{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-3",
  "title": "Feature Exemple 3",
  "description": "Frequently asked questions section with collapsible items.",
  "dependencies": [
    "framer-motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/default/blocks/Feature/feature3.tsx",
      "content": "\"use client\";\n\nimport { motion, Variants } from \"framer-motion\";\nimport { Zap, Shield, Cpu, Gauge } from \"lucide-react\";\n\n/* ─── Animation ─── */\nconst fadeUp: Variants = {\n    hidden: { opacity: 0, y: 20 },\n    visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] } },\n};\nconst stagger: Variants = { hidden: {}, visible: { transition: { staggerChildren: 0.1 } } };\n\n/* ══════════════════════════════════════════\n   SVG 1 — Invoice card\n══════════════════════════════════════════ */\nfunction InvoiceSvg() {\n    return (\n        <svg viewBox=\"0 0 320 160\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className=\"w-full h-full\">\n            {/* Outer card */}\n            <rect x=\"8\" y=\"8\" width=\"304\" height=\"144\" rx=\"12\" fill=\"white\" stroke=\"#e2e8f0\" strokeWidth=\"1.2\"/>\n\n            {/* Blue accent top-left corner square */}\n            <rect x=\"24\" y=\"24\" width=\"32\" height=\"32\" rx=\"6\" fill=\"#eff6ff\" stroke=\"#bfdbfe\" strokeWidth=\"1\"/>\n            {/* Grid icon inside */}\n            <line x1=\"34\" y1=\"30\" x2=\"34\" y2=\"50\" stroke=\"#93c5fd\" strokeWidth=\"1.2\"/>\n            <line x1=\"46\" y1=\"30\" x2=\"46\" y2=\"50\" stroke=\"#93c5fd\" strokeWidth=\"1.2\"/>\n            <line x1=\"28\" y1=\"36\" x2=\"52\" y2=\"36\" stroke=\"#93c5fd\" strokeWidth=\"1.2\"/>\n            <line x1=\"28\" y1=\"44\" x2=\"52\" y2=\"44\" stroke=\"#93c5fd\" strokeWidth=\"1.2\"/>\n\n            {/* Doc lines top-right */}\n            <rect x=\"242\" y=\"28\" width=\"52\" height=\"6\" rx=\"3\" fill=\"#f1f5f9\"/>\n            <rect x=\"242\" y=\"38\" width=\"40\" height=\"5\" rx=\"2.5\" fill=\"#f1f5f9\"/>\n            <rect x=\"242\" y=\"47\" width=\"46\" height=\"5\" rx=\"2.5\" fill=\"#f1f5f9\"/>\n            {/* Doc corner fold icon */}\n            <rect x=\"266\" y=\"22\" width=\"22\" height=\"28\" rx=\"3\" fill=\"white\" stroke=\"#e2e8f0\" strokeWidth=\"1\"/>\n            <polyline points=\"278,22 288,32 278,32\" fill=\"#f1f5f9\" stroke=\"#e2e8f0\" strokeWidth=\"1\"/>\n            {/* Small icon bottom-right of doc */}\n            <rect x=\"270\" y=\"38\" width=\"14\" height=\"10\" rx=\"2\" fill=\"#f8fafc\" stroke=\"#e2e8f0\" strokeWidth=\"0.8\"/>\n            <line x1=\"273\" y1=\"42\" x2=\"281\" y2=\"42\" stroke=\"#cbd5e1\" strokeWidth=\"0.8\"/>\n\n            {/* Invoice details */}\n            <text x=\"24\" y=\"76\" fontSize=\"7.5\" fill=\"#94a3b8\" fontFamily=\"Inter,sans-serif\">INV-456789</text>\n            <text x=\"24\" y=\"96\" fontSize=\"17\" fontWeight=\"700\" fill=\"#0f172a\" fontFamily=\"Inter,sans-serif\">$284,342.57</text>\n            <text x=\"24\" y=\"108\" fontSize=\"7.5\" fill=\"#94a3b8\" fontFamily=\"Inter,sans-serif\">Due in 15 days</text>\n\n            {/* To / From / Address rows */}\n            <text x=\"24\" y=\"124\" fontSize=\"7.5\" fill=\"#94a3b8\" fontFamily=\"Inter,sans-serif\">To</text>\n            <rect x=\"50\" y=\"116\" width=\"80\" height=\"6\" rx=\"3\" fill=\"#e2e8f0\"/>\n            <text x=\"24\" y=\"136\" fontSize=\"7.5\" fill=\"#94a3b8\" fontFamily=\"Inter,sans-serif\">From</text>\n            <rect x=\"50\" y=\"128\" width=\"100\" height=\"6\" rx=\"3\" fill=\"#e2e8f0\"/>\n            <text x=\"24\" y=\"148\" fontSize=\"7.5\" fill=\"#94a3b8\" fontFamily=\"Inter,sans-serif\">Address</text>\n            <rect x=\"60\" y=\"140\" width=\"70\" height=\"6\" rx=\"3\" fill=\"#e2e8f0\"/>\n        </svg>\n    );\n}\n\n/* ══════════════════════════════════════════\n   SVG 2 — Spending Limit / Data Viz card\n══════════════════════════════════════════ */\nfunction SpendingSvg() {\n    const barTotal = 248;\n    const usedPct = 0.4;\n    const usedW = barTotal * usedPct;\n\n    return (\n        <svg viewBox=\"0 0 320 160\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className=\"w-full h-full\">\n            {/* Card */}\n            <rect x=\"8\" y=\"8\" width=\"304\" height=\"144\" rx=\"12\" fill=\"white\" stroke=\"#e2e8f0\" strokeWidth=\"1.2\"/>\n\n            {/* Header */}\n            <text x=\"24\" y=\"34\" fontSize=\"13\" fontWeight=\"700\" fill=\"#f59e0b\" fontFamily=\"Inter,sans-serif\">Spending</text>\n            <text x=\"102\" y=\"34\" fontSize=\"13\" fontWeight=\"700\" fill=\"#0f172a\" fontFamily=\"Inter,sans-serif\"> Limit</text>\n            <text x=\"24\" y=\"48\" fontSize=\"8\" fill=\"#94a3b8\" fontFamily=\"Inter,sans-serif\">New users by First user primary channel group</text>\n\n            {/* Progress bar */}\n            {/* bg */}\n            <rect x=\"24\" y=\"58\" width={barTotal} height=\"12\" rx=\"6\" fill=\"#e2e8f0\"/>\n            {/* used (blue) */}\n            <rect x=\"24\" y=\"58\" width={usedW} height=\"12\" rx=\"6\" fill=\"#1e40af\"/>\n            {/* free overlay (striped feel — lighter) */}\n            <rect x={24 + usedW} y=\"58\" width={barTotal - usedW} height=\"12\" rx=\"0\" fill=\"#bfdbfe\" opacity=\".4\"/>\n            <rect x={24 + barTotal - 6} y=\"58\" width=\"6\" height=\"12\" rx=\"6\" fill=\"#bfdbfe\" opacity=\".4\"/>\n\n            {/* Labels */}\n            <text x=\"24\"  y=\"83\" fontSize=\"14\" fontWeight=\"700\" fill=\"#0f172a\" fontFamily=\"Inter,sans-serif\">40%</text>\n            <text x=\"224\" y=\"83\" fontSize=\"14\" fontWeight=\"700\" fill=\"#0f172a\" fontFamily=\"Inter,sans-serif\">60%</text>\n            <text x=\"24\"  y=\"94\" fontSize=\"8\"  fill=\"#94a3b8\"   fontFamily=\"Inter,sans-serif\">Used</text>\n            <text x=\"224\" y=\"94\" fontSize=\"8\"  fill=\"#94a3b8\"   fontFamily=\"Inter,sans-serif\">Free</text>\n\n            {/* Divider */}\n            <line x1=\"24\" y1=\"104\" x2=\"296\" y2=\"104\" stroke=\"#f1f5f9\" strokeWidth=\"1\"/>\n\n            {/* Bullet rows */}\n            <circle cx=\"30\" cy=\"116\" r=\"4\" fill=\"#1e40af\"/>\n            <text x=\"40\" y=\"120\" fontSize=\"8\" fill=\"#374151\" fontFamily=\"Inter,sans-serif\">\n                Running (20%) average of 12 Minutes\n            </text>\n            <circle cx=\"30\" cy=\"133\" r=\"4\" fill=\"#94a3b8\"/>\n            <text x=\"40\" y=\"137\" fontSize=\"8\" fill=\"#94a3b8\" fontFamily=\"Inter,sans-serif\">\n                Swimming (20%)\n            </text>\n        </svg>\n    );\n}\n\n/* ─── Bottom features ─── */\nconst bottomFeatures = [\n    {\n        Icon: Zap,\n        title: \"Faaast\",\n        desc: \"It supports an entire helping developers and innovate.\",\n    },\n    {\n        Icon: Gauge,\n        title: \"Powerful\",\n        desc: \"It supports an entire helping developers and businesses.\",\n    },\n    {\n        Icon: Shield,\n        title: \"Security\",\n        desc: \"An helping developers businesses innovate.\",\n    },\n    {\n        Icon: Cpu,\n        title: \"AI Powered\",\n        desc: \"Helping developers businesses innovate.\",\n    },\n];\n\n/* ─── Section ─── */\nexport default function FeaturesSection3() {\n    return (\n        <section className=\"w-full py-16 px-4 \">\n            <div className=\"max-w-4xl mx-auto\">\n\n                {/* ── Top 2-col grid ── */}\n                <motion.div\n                    className=\"grid grid-cols-1 md:grid-cols-2 gap-8 mb-12\"\n                    initial=\"hidden\"\n                    whileInView=\"visible\"\n                    viewport={{ once: true, margin: \"-60px\" }}\n                    variants={stagger}\n                >\n                    {/* Col 1 — Invoice */}\n                    <motion.div variants={fadeUp} className=\"flex flex-col gap-4\">\n                        <div>\n                            <h3 className=\"text-[17px] font-semibold text-[#0f172a] mb-2\">Intuitive Invoice Creation</h3>\n                            <p className=\"text-[13.5px] text-[#64748b] leading-relaxed\">\n                                Create professional invoices instantly with our intuitive tools. Customize templates\n                                and automate billing to save time.\n                            </p>\n                        </div>\n                        {/* Card illustration */}\n                        <motion.div\n                            whileHover={{ y: -3, boxShadow: \"0 12px 32px rgba(0,0,0,0.07)\" }}\n                            transition={{ duration: 0.2 }}\n                            className=\"rounded-xl overflow-hidden border border-[#e2e8f0] bg-[#f8fafc] p-1 shadow-sm\"\n                        >\n                            <InvoiceSvg />\n                        </motion.div>\n                    </motion.div>\n\n                    {/* Col 2 — Data viz */}\n                    <motion.div variants={fadeUp} className=\"flex flex-col gap-4\">\n                        <div>\n                            <h3 className=\"text-[17px] font-semibold text-[#0f172a] mb-2\">Data Visualization</h3>\n                            <p className=\"text-[13.5px] text-[#64748b] leading-relaxed\">\n                                Transform complex data into intuitive visualizations. Our powerful tools help you\n                                uncover insights and communicate findings effectively.\n                            </p>\n                        </div>\n                        {/* Card illustration */}\n                        <motion.div\n                            whileHover={{ y: -3, boxShadow: \"0 12px 32px rgba(0,0,0,0.07)\" }}\n                            transition={{ duration: 0.2 }}\n                            className=\"rounded-xl overflow-hidden border border-[#e2e8f0] bg-[#f8fafc] p-1 shadow-sm\"\n                        >\n                            <SpendingSvg />\n                        </motion.div>\n                    </motion.div>\n                </motion.div>\n\n                {/* ── Divider ── */}\n                <div className=\"h-px bg-[#e2e8f0] mb-10\" />\n\n                {/* ── Bottom 4-col features ── */}\n                <motion.div\n                    className=\"grid grid-cols-2 md:grid-cols-4 gap-6\"\n                    initial=\"hidden\"\n                    whileInView=\"visible\"\n                    viewport={{ once: true, margin: \"-40px\" }}\n                    variants={stagger}\n                >\n                    {bottomFeatures.map(({ Icon, title, desc }) => (\n                        <motion.div key={title} variants={fadeUp} className=\"flex flex-col gap-2\">\n                            <Icon className=\"w-4 h-4 text-[#0f172a]\" strokeWidth={1.8} />\n                            <h4 className=\"text-[13.5px] font-semibold text-[#0f172a]\">{title}</h4>\n                            <p className=\"text-[12.5px] text-[#64748b] leading-relaxed\">{desc}</p>\n                        </motion.div>\n                    ))}\n                </motion.div>\n\n            </div>\n        </section>\n    );\n}",
      "type": "registry:block",
      "target": "components/blocks/feature-ex-3.tsx"
    }
  ],
  "type": "registry:block"
}