Feature Grid Section

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