New

FeatureBento

Bento grid layout for features with gradient borders and hover effects

Marketing & Landingfeaturesbentogrid

Dependencies

shadcn/ui components needed:

npx shadcn@latest add card

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client";
2
3import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
4import { Zap, Shield, BarChart3, Globe, Sparkles, Lock } from 'lucide-react';
5
6const features = [
7  { icon: Zap, title: 'Lightning Fast', description: 'Optimized performance for instant load times', span: 'col-span-2' },
8  { icon: Shield, title: 'Secure by Default', description: 'Enterprise-grade security built in', span: 'col-span-1' },
9  { icon: BarChart3, title: 'Advanced Analytics', description: 'Deep insights into your data', span: 'col-span-1' },
10  { icon: Globe, title: 'Global CDN', description: 'Deploy worldwide in seconds', span: 'col-span-1' },
11  { icon: Sparkles, title: 'AI Powered', description: 'Smart automation for your workflow', span: 'col-span-1' },
12  { icon: Lock, title: 'Privacy First', description: 'Your data stays yours', span: 'col-span-2' },
13];
14
15export default function FeatureBento() {
16  return (
17    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 py-20 px-6">
18      <div className="container mx-auto max-w-6xl">
19        <div className="text-center mb-16">
20          <h2 className="text-4xl lg:text-5xl font-bold text-white mb-4">
21            Everything you need
22          </h2>
23          <p className="text-xl text-slate-400 max-w-2xl mx-auto">
24            Powerful features to help you build, scale, and succeed
25          </p>
26        </div>
27        
28        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
29          {features.map((feature, index) => {
30            const Icon = feature.icon;
31            return (
32              <Card
33                key={index}
34                className={
35                  feature.span +
36                  ' bg-gradient-to-br from-slate-800/50 to-slate-900/50 border-slate-700/50 hover:border-purple-500/50 transition-all duration-300 hover:scale-[1.02] group'
37                }
38              >
39                <CardHeader>
40                  <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-purple-500/20 to-indigo-500/20 flex items-center justify-center mb-4 group-hover:from-purple-500/30 group-hover:to-indigo-500/30 transition-colors">
41                    <Icon className="h-6 w-6 text-purple-400" />
42                  </div>
43                  <CardTitle className="text-white">{feature.title}</CardTitle>
44                  <CardDescription className="text-slate-400">
45                    {feature.description}
46                  </CardDescription>
47                </CardHeader>
48              </Card>
49            );
50          })}
51        </div>
52      </div>
53    </div>
54  );
55}