"use client"; import { motion } from "framer-motion"; import { Cpu, Globe, Zap, ShieldCheck, Rocket, BarChart3 } from "lucide-react"; const features = [ { title: "Global Edge Network", description: "Deploy your application to over 300+ edge locations worldwide for lightning fast latency.", icon: Globe, className: "md:col-span-2", gradient: "from-blue-500/20 via-cyan-500/20 to-teal-500/20", }, { title: "Instant Scaling", description: "Handle millions of requests with zero configuration.", icon: Zap, className: "md:col-span-1", gradient: "from-purple-500/20 via-pink-500/20 to-red-500/20", }, { title: "Enterprise Security", description: "Bank-grade encryption and DDoS protection included.", icon: ShieldCheck, className: "md:col-span-1", gradient: "from-amber-500/20 via-orange-500/20 to-yellow-500/20", }, { title: "Real-time Analytics", description: "Track performance metrics and user behavior in real-time.", icon: BarChart3, className: "md:col-span-2", gradient: "from-emerald-500/20 via-green-500/20 to-lime-500/20", }, ]; export function FeaturesBento() { return (

{/* Header */}

Powerful Features Everything you need to scale. Our platform provides the infrastructure and tools you need to build next-generation applications.

{/* Bento Grid */}

{features.map((feature, i) => ( {/* Background Gradient */}

{/* Content */}

{feature.title}

{feature.description}

{/* Decorative Blur */}

))}

); } export default FeaturesBento;

Features

Border Grid