{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "feature-2", "title": "Feature Exemple 2", "description": "Frequently asked questions section with collapsible items.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "registry/default/blocks/Feature/feature2.tsx", "content": "\"use client\";\r\n\r\nimport { motion, Variants } from \"framer-motion\";\r\nimport Image from \"next/image\";\r\n\r\n/* ─── Animation ─── */\r\nconst fadeUp: Variants = {\r\n hidden: { opacity: 0, y: 20 },\r\n visible: { opacity: 1, y: 0, transition: { duration: 0.55, ease: [0.22, 1, 0.36, 1] } },\r\n};\r\nconst stagger: Variants = {\r\n hidden: {},\r\n visible: { transition: { staggerChildren: 0.13 } },\r\n};\r\n\r\n/* ══════════════════════════════════════════\r\n SVG 1 — Connect your stack\r\n Radial web with real logo via foreignObject\r\n══════════════════════════════════════════ */\r\nconst LOGOS = [\r\n {\r\n label: \"Stripe\",\r\n src: \"https://cdn.simpleicons.org/stripe\",\r\n cx: 62,\r\n cy: 62,\r\n },\r\n {\r\n label: \"HubSpot\",\r\n src: \"https://cdn.simpleicons.org/hubspot\",\r\n cx: 198,\r\n cy: 62,\r\n },\r\n {\r\n label: \"Vercel\",\r\n src: \"https://cdn.simpleicons.org/vercel\",\r\n cx: 62,\r\n cy: 158,\r\n },\r\n {\r\n label: \"Xero\",\r\n src: \"https://cdn.simpleicons.org/xero\",\r\n cx: 198,\r\n cy: 158,\r\n },\r\n];\r\n\r\nfunction ConnectSvg() {\r\n const cx = 130, cy = 110;\r\n return (\r\n \r\n {/* Dashed circles */}\r\n \r\n \r\n \r\n\r\n {/* Center globe */}\r\n \r\n \r\n \r\n \r\n\r\n {/* Connector lines to logos */}\r\n {LOGOS.map(({ cx: lx, cy: ly, label }) => (\r\n \r\n ))}\r\n\r\n {/* Logo circles */}\r\n {LOGOS.map(({ cx: lx, cy: ly, src, label }) => (\r\n \r\n \r\n \r\n {/* eslint-disable-next-line @next/next/no-img-element */}\r\n \r\n \r\n \r\n ))}\r\n \r\n );\r\n}\r\n\r\n/* ══════════════════════════════════════════\r\n SVG 2 — Register once\r\n Tree: top pill → globe hub → 3 state nodes (evenly spaced)\r\n══════════════════════════════════════════ */\r\nfunction RegisterSvg() {\r\n const hub = { x: 130, y: 118 };\r\n const states = [\r\n { label: \"Texas\", x: 52, y: 188 },\r\n { label: \"Washington\", x: 130, y: 188 },\r\n { label: \"California\", x: 208, y: 188 },\r\n ];\r\n const pillW = 148, pillH = 26, pillX = 130 - pillW / 2, pillY = 20;\r\n\r\n return (\r\n \r\n {/* Top pill */}\r\n \r\n \r\n \r\n Registered on Kintsugi\r\n \r\n\r\n {/* Vertical trunk to hub */}\r\n \r\n\r\n {/* Globe hub */}\r\n \r\n \r\n \r\n \r\n\r\n {/* Branch lines hub → state nodes */}\r\n {states.map(({ x, y, label }) => (\r\n \r\n ))}\r\n\r\n {/* State pill nodes */}\r\n {states.map(({ x, y, label }) => {\r\n const w = label.length * 6 + 22;\r\n return (\r\n \r\n \r\n \r\n {label}\r\n \r\n );\r\n })}\r\n \r\n );\r\n}\r\n\r\n/* ══════════════════════════════════════════\r\n SVG 3 — Filing autopilot: clean table\r\n══════════════════════════════════════════ */\r\nconst TAX_ROWS = [\r\n { state: \"Alabama\", amount: \"$83,176\", status: \"Filed\", statusBg: \"#dcfce7\", statusColor: \"#16a34a\" },\r\n { state: \"Texas\", amount: \"$73,255\", status: \"Filed\", statusBg: \"#dcfce7\", statusColor: \"#16a34a\" },\r\n { state: \"California\", amount: \"$123,150\", status: \"Filing\", statusBg: \"#fef3c7\", statusColor: \"#d97706\", highlight: true },\r\n { state: \"New York\", amount: \"$153,155\", status: \"Due\", statusBg: \"#fee2e2\", statusColor: \"#dc2626\" },\r\n { state: \"Washington\", amount: \"$96,777\", status: \"Due\", statusBg: \"#fee2e2\", statusColor: \"#dc2626\" },\r\n];\r\n\r\nfunction FilingSvg() {\r\n const colState = 30, colAmount = 148, colStatus = 222;\r\n const rowH = 30, headerY = 38, firstRowY = 58;\r\n\r\n return (\r\n \r\n {/* Card bg */}\r\n \r\n\r\n {/* Header row bg */}\r\n \r\n \r\n\r\n {/* Header labels */}\r\n STATE\r\n AMOUNT\r\n STATUS\r\n\r\n {/* Divider under header */}\r\n \r\n\r\n {TAX_ROWS.map(({ state, amount, status, statusBg, statusColor, highlight }, i) => {\r\n const y = firstRowY + i * rowH;\r\n const pillW = 38, pillH = 18;\r\n return (\r\n \r\n {highlight && (\r\n \r\n )}\r\n {state}\r\n {amount}\r\n {/* Status pill */}\r\n \r\n {status}\r\n {/* Row divider */}\r\n {i < TAX_ROWS.length - 1 && (\r\n \r\n )}\r\n \r\n );\r\n })}\r\n \r\n );\r\n}\r\n\r\n/* ─── Steps ─── */\r\nconst steps = [\r\n {\r\n num: \"01\",\r\n title: \"Connect your stack in minutes.\",\r\n desc: \"Link Chargebee, Stripe, QuickBooks, and NetSuite. Our native integrations mean the setup is simple and the connection is stable.\",\r\n Illustration: ConnectSvg,\r\n },\r\n {\r\n num: \"02\",\r\n title: \"Register once, collect everywhere.\",\r\n desc: \"We identify where you need to pay sales tax. Then we handle the state registrations so you can collect the right sales tax on every invoice.\",\r\n Illustration: RegisterSvg,\r\n },\r\n {\r\n num: \"03\",\r\n title: \"Put filing on autopilot.\",\r\n desc: \"Returns are filed and paid on time. Sales tax runs quietly in the background while you focus on growth.\",\r\n Illustration: FilingSvg,\r\n },\r\n];\r\n\r\n/* ─── Main ─── */\r\nexport default function FeaturesSection2() {\r\n return (\r\n
\r\n
\r\n\r\n {/* ── Hero copy ── */}\r\n \r\n \r\n A tax platform designed for your business.\r\n \r\n \r\n You spend days fixing sync errors between your tax software and QuickBooks. Your support\r\n tickets take a week to get a real answer. You track nexus thresholds on a spreadsheet,\r\n hoping you don't miss one.\r\n \r\n \r\n There is a simpler way to work.\r\n \r\n \r\n\r\n {/* ── 3-col panel ── */}\r\n \r\n {steps.map(({ num, title, desc, Illustration }, i) => (\r\n \r\n {/* Top: text */}\r\n
\r\n

{num}

\r\n

{title}

\r\n

{desc}

\r\n
\r\n {/* Bottom: illustration */}\r\n
\r\n \r\n
\r\n \r\n ))}\r\n \r\n\r\n
\r\n
\r\n );\r\n}", "type": "registry:block", "target": "components/blocks/feature-ex-2.tsx" } ], "type": "registry:block" }