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.
A curated set of tools designed to help you build, scale, and secure your next big idea.
Gain actionable insights with our predictive machine learning models that evolve with your data.
Instant synchronization across all devices.
Enterprise encryption standards protecting your intellectual property 24/7.
Deploy your application to edge nodes worldwide in seconds.
Built-in comments, versioning, and approval workflows for efficient teamwork.
npm install framer-motion lucide-react'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>
);
}