Bento Grid Features
A sophisticated bento grid layout designed with a professional light theme. It features subtle dot patterns, glassmorphism-inspired borders, and smooth entrance animations using Framer Motion. Each card includes interactive hover states, accent lines, and dynamic icon rotations for a premium UI experience.
ReactTailwindFramer MotionLucide React
Features
Elevating the future.
A curated set of tools designed to help you build, scale, and secure your next big idea.
AI-Powered Analytics
Gain actionable insights with our predictive machine learning models that evolve with your data.
Real-time Sync
Instant synchronization across all devices.
Bank-Grade Security
Enterprise encryption standards protecting your intellectual property 24/7.
Global Infrastructure
Deploy your application to edge nodes worldwide in seconds.
Team Collaboration
Built-in comments, versioning, and approval workflows for efficient teamwork.
Installation
npm install framer-motion lucide-reactCode
'use client'
import React from 'react';
import { BarChart3, Zap, Shield, Globe, Users, ArrowUpRight } from 'lucide-react';
import { motion } from 'framer-motion';
export default function GridFeatureSection() {
const features = [
{
title: "AI-Powered Analytics",
description: "Gain actionable insights with our predictive machine learning models that evolve with your data.",
icon: <BarChart3 className="w-6 h-6 text-indigo-600" />,
span: "md:col-span-2",
color: "bg-indigo-50",
borderHover: "hover:border-indigo-200",
dotColor: "bg-indigo-500",
delay: 0.1
},
{
title: "Real-time Sync",
description: "Instant synchronization across all devices.",
icon: <Zap className="w-6 h-6 text-amber-600" />,
span: "md:col-span-1",
color: "bg-amber-50",
borderHover: "hover:border-amber-200",
dotColor: "bg-amber-500",
delay: 0.2
},
{
title: "Bank-Grade Security",
description: "Enterprise encryption standards protecting your intellectual property 24/7.",
icon: <Shield className="w-6 h-6 text-emerald-600" />,
span: "md:col-span-1",
color: "bg-emerald-50",
borderHover: "hover:border-emerald-200",
dotColor: "bg-emerald-500",
delay: 0.3
},
{
title: "Global Infrastructure",
description: "Deploy your application to edge nodes worldwide in seconds.",
icon: <Globe className="w-6 h-6 text-blue-600" />,
span: "md:col-span-2",
color: "bg-blue-50",
borderHover: "hover:border-blue-200",
dotColor: "bg-blue-500",
delay: 0.4
},
{
title: "Team Collaboration",
description: "Built-in comments, versioning, and approval workflows for efficient teamwork.",
icon: <Users className="w-6 h-6 text-rose-600" />,
span: "md:col-span-3",
color: "bg-rose-50",
borderHover: "hover:border-rose-200",
dotColor: "bg-rose-500",
delay: 0.5
}
];
return (
<div className="p-6 md:p-12 bg-[#FBFBFB] rounded-[2rem] w-full h-full relative border border-gray-100 shadow-inner overflow-hidden">
{/* Background Pattern */}
<div className="absolute inset-0 opacity-[0.03] pointer-events-none bg-[radial-gradient(#000000_1px,transparent_1px)] [background-size:24px_24px]"></div>
<div className="max-w-5xl mx-auto relative z-10">
<div className="mb-12 text-center md:text-left">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
>
<span className="inline-block px-4 py-1.5 mb-4 text-xs font-bold tracking-widest text-indigo-600 uppercase bg-indigo-50 rounded-full">
Features
</span>
<h2 className="text-4xl md:text-5xl font-black text-gray-900 mb-4 tracking-tight">
Elevating the <span className="text-gray-400">future</span>.
</h2>
<p className="text-gray-500 text-lg max-w-xl font-medium leading-relaxed">
A curated set of tools designed to help you build, scale, and secure your next big idea.
</p>
</motion.div>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{features.map((feature, idx) => (
<motion.div
key={idx}
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5, delay: feature.delay }}
whileHover={{ y: -5 }}
className={`group relative p-8 rounded-[1.5rem] border border-gray-100 bg-white shadow-[0_4px_20px_-4px_rgba(0,0,0,0.05)] transition-all duration-300 ${feature.borderHover} ${feature.span} overflow-hidden`}
>
{/* Animated Background Blob */}
<div className={`absolute -right-8 -top-8 w-32 h-32 rounded-full opacity-0 group-hover:opacity-20 transition-opacity duration-500 blur-3xl ${feature.color}`} />
<div className="flex items-start justify-between mb-8 relative z-10">
<div className={`p-4 rounded-2xl ${feature.color} ring-4 ring-white shadow-sm transition-transform duration-500 group-hover:rotate-[10deg]`}>
{feature.icon}
</div>
<div className="flex gap-1.5 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<div className={`w-2 h-2 rounded-full ${feature.dotColor} animate-pulse`} />
<div className={`w-2 h-2 rounded-full ${feature.dotColor} opacity-50`} />
</div>
</div>
<div className="relative z-10">
<h3 className="text-2xl font-bold text-gray-900 mb-3 flex items-center gap-2">
{feature.title}
<ArrowUpRight className="w-4 h-4 text-gray-300 group-hover:text-gray-900 transition-all duration-300 transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
</h3>
<p className="text-gray-500 font-medium leading-relaxed">
{feature.description}
</p>
</div>
{/* Bottom Accent Line */}
<div className={`absolute bottom-0 left-0 h-1 w-0 group-hover:w-full transition-all duration-500 ${feature.dotColor}`} />
</motion.div>
))}
</div>
</div>
</div>
);
}