Feature Grid Section

1"use client";
2 
3import { motion, useInView } from "framer-motion";
4import { Code, Globe, Lock, Shield, Sparkles, Zap } from "lucide-react";
5import { useRef } from "react";
6 
7const features = [
8  {
9    icon: Code,
10    title: "Developer Friendly",
11    description: "Built with TypeScript and modern React patterns for a superior developer experience.",
12  },
13  {
14    icon: Zap,
15    title: "Lightning Fast",
16    description: "Optimized animations and code splitting that ensures your app never lags.",
17  },
18  {
19    icon: Shield,
20    title: "Production Ready",
21    description: "Fully tested components that are ready for your next big project launch.",
22  },
23  {
24    icon: Globe,
25    title: "Responsive",
26    description: "Layouts that adapt perfectly to any screen size, from mobile to desktop.",
27  },
28  {
29    icon: Lock,
30    title: "Secure By Default",
31    description: "Implementation following best security practices to keep your data safe.",
32  },
33  {
34    icon: Sparkles,
35    title: "Modern Design",
36    description: "Crafted with the latest web technologies and aesthetic trends in mind.",
37  },
38];
39 
40export function FeatureGridSectionBaseui() {
41  const ref = useRef(null);
42  const isInView = useInView(ref, { once: true, margin: "-100px" });
43 
44  return (
45    <section
46      ref={ref}
47      className="relative w-full overflow-hidden bg-background px-4 py-12 sm:py-16 md:py-20 lg:py-24"
48    >
49      {/* Background Pattern */}
50      <div className="absolute inset-0 -z-10 h-full w-full bg-white dark:bg-black bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:14px_24px]"></div>
51 
52      <div className="mx-auto max-w-6xl">
53        <motion.div
54          initial={{ opacity: 0, y: 20 }}
55          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
56          transition={{ duration: 0.5 }}
57          className="mb-12 sm:mb-16 md:mb-20 text-center"
58        >
59          <h2 className="mb-4 text-3xl font-bold tracking-tight text-foreground sm:text-4xl md:text-5xl">
60            Why Choose Us
61          </h2>
62          <p className="mx-auto max-w-2xl px-4 text-base text-muted-foreground sm:text-lg">
63            Everything you need to build amazing applications, faster and better.
64          </p>
65        </motion.div>
66 
67        <div className="grid grid-cols-1 gap-6 sm:gap-8 sm:grid-cols-2 lg:grid-cols-3">
68          {features.map((feature, index) => {
69            const Icon = feature.icon;
70            return (
71// … truncated