Border Grid

1"use client";
2
3import { motion } from "framer-motion";
4import {
5  Cpu,
6  Globe,
7  Zap,
8  ShieldCheck,
9  Rocket,
10  BarChart3
11} from "lucide-react";
12
13const features = [
14  {
15    title: "Global Edge Network",
16    description: "Deploy your application to over 300+ edge locations worldwide for lightning fast latency.",
17    icon: Globe,
18    className: "md:col-span-2",
19    gradient: "from-blue-500/20 via-cyan-500/20 to-teal-500/20",
20  },
21  {
22    title: "Instant Scaling",
23    description: "Handle millions of requests with zero configuration.",
24    icon: Zap,
25    className: "md:col-span-1",
26    gradient: "from-purple-500/20 via-pink-500/20 to-red-500/20",
27  },
28  {
29    title: "Enterprise Security",
30    description: "Bank-grade encryption and DDoS protection included.",
31    icon: ShieldCheck,
32    className: "md:col-span-1",
33    gradient: "from-amber-500/20 via-orange-500/20 to-yellow-500/20",
34  },
35  {
36    title: "Real-time Analytics",
37    description: "Track performance metrics and user behavior in real-time.",
38    icon: BarChart3,
39    className: "md:col-span-2",
40    gradient: "from-emerald-500/20 via-green-500/20 to-lime-500/20",
41  },
42];
43
44export function FeaturesBento() {
45  return (
46    <section className="py-24 px-4 md:px-8 bg-background text-foreground overflow-hidden">
47      <div className="max-w-7xl mx-auto space-y-12">
48        {/* Header */}
49        <div className="text-center space-y-4 max-w-3xl mx-auto">
50          <motion.div
51            initial={{ opacity: 0, y: 20 }}
52            whileInView={{ opacity: 1, y: 0 }}
53            viewport={{ once: true }}
54            transition={{ duration: 0.5 }}
55            className="inline-flex items-center rounded-full border border-primary/20 bg-primary/5 px-3 py-1 text-sm font-medium text-primary"
56          >
57            <Rocket className="mr-2 h-3.5 w-3.5" />
58            Powerful Features
59          </motion.div>
60          <motion.h2
61            initial={{ opacity: 0, y: 20 }}
62            whileInView={{ opacity: 1, y: 0 }}
63            viewport={{ once: true }}
64            transition={{ duration: 0.5, delay: 0.1 }}
65            className="text-4xl md:text-5xl font-black tracking-tight"
66          >
67            Everything you need to <span className="text-primary">scale</span>.
68          </motion.h2>
69          <motion.p
70            initial={{ opacity: 0, y: 20 }}
71            whileInView={{ opacity: 1, y: 0 }}
72            viewport={{ once: true }}
73// … truncated