{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-section-v2",
  "title": "Feature Section v2",
  "description": "Four-card feature grid with uppercase titles, descriptions, unique x.ai–style SVG illustrations, and scroll-triggered entrance animations per card.",
  "registryDependencies": [
    "card"
  ],
  "files": [
    {
      "path": "registry/new-york/blocks/feature-section-v2/page.tsx",
      "content": "import FeatureSectionV2 from \"./components/feature-section-v2\"\n\nexport default function Page() {\n  return <FeatureSectionV2 />\n}\n",
      "type": "registry:page",
      "target": "app/feature-section-v2/page.tsx"
    },
    {
      "path": "registry/new-york/blocks/feature-section-v2/components/feature-section-v2.tsx",
      "content": "import FeatureShowcase from \"./feature-showcase\"\n\nimport \"../styles/feature-section-v2.css\"\n\nexport default function FeatureSectionV2() {\n  return (\n    <section className=\"py-4 md:py-6 lg:py-8\">\n      <div className=\"mx-auto max-w-4xl px-4\">\n        <div className=\"mb-6 flex flex-col items-center gap-2.5 text-center md:mb-8\">\n          <h2 className=\"text-4xl tracking-tighter lg:text-5xl\">\n            Everything your team needs\n          </h2>\n          <p className=\"max-w-xl text-3.75 leading-relaxed text-muted-foreground\">\n            See what is happening in real time, let automations handle the\n            routine, and connect the tools you already use without any extra\n            setup.\n          </p>\n        </div>\n        <FeatureShowcase />\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "app/feature-section-v2/components/feature-section-v2.tsx"
    },
    {
      "path": "registry/new-york/blocks/feature-section-v2/components/feature-showcase.tsx",
      "content": "import type { ComponentType } from \"react\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport AccessControlIllustration from \"./access-control-illustration\"\nimport { FeatureCardMedia } from \"./feature-card-media\"\nimport IntegrationsIllustration from \"./integrations-illustration\"\nimport RealTimeAnalyticsIllustration from \"./real-time-analytics-illustration\"\nimport WorkflowAutomationIllustration from \"./workflow-automation-illustration\"\nimport { features, type FeatureIllustrationId } from \"../lib/features\"\n\nconst illustrationComponents: Record<FeatureIllustrationId, ComponentType> = {\n  \"workflow-automation\": WorkflowAutomationIllustration,\n  \"real-time-analytics\": RealTimeAnalyticsIllustration,\n  \"access-control\": AccessControlIllustration,\n  integrations: IntegrationsIllustration,\n}\n\nexport default function FeatureShowcase() {\n  return (\n    <ul className=\"m-0 grid list-none grid-cols-1 gap-2 p-0 sm:grid-cols-2\">\n      {features.map(({ id, title, description, illustration }) => {\n        const Illustration = illustrationComponents[illustration]\n\n        return (\n          <li key={id} className=\"flex min-w-0\">\n            <Card\n              size=\"sm\"\n              className=\"group/card flex w-full flex-col gap-0 overflow-hidden rounded-lg bg-background py-0 ring-1 ring-border transition-shadow duration-200 hover:shadow-[0_2px_8px_rgba(0,0,0,0.04)]\"\n            >\n              <FeatureCardMedia>\n                <Illustration />\n              </FeatureCardMedia>\n              <CardHeader className=\"gap-0.5 px-3 pt-2 pb-0\">\n                <CardTitle className=\"font-mono text-[0.625rem] leading-[1.25] font-medium tracking-[0.1em] text-foreground/90 uppercase\">\n                  {title}\n                </CardTitle>\n              </CardHeader>\n              <CardContent className=\"px-3 pt-1 pb-2.5\">\n                <CardDescription className=\"m-0 line-clamp-3 text-[0.75rem] leading-[1.4]\">\n                  {description}\n                </CardDescription>\n              </CardContent>\n            </Card>\n          </li>\n        )\n      })}\n    </ul>\n  )\n}\n",
      "type": "registry:component",
      "target": "app/feature-section-v2/components/feature-showcase.tsx"
    },
    {
      "path": "registry/new-york/blocks/feature-section-v2/components/feature-card-media.tsx",
      "content": "import type { ReactNode } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport { FEATURE_CARD_MEDIA_HEIGHT } from \"./feature-illustration\"\n\ntype FeatureCardMediaProps = {\n  children: ReactNode\n  className?: string\n}\n\nexport function FeatureCardMedia({ children, className }: FeatureCardMediaProps) {\n  return (\n    <div\n      className={cn(\n        \"relative w-full shrink-0 overflow-hidden bg-background\",\n        FEATURE_CARD_MEDIA_HEIGHT,\n        className\n      )}\n      aria-hidden\n    >\n      {children}\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "app/feature-section-v2/components/feature-card-media.tsx"
    },
    {
      "path": "registry/new-york/blocks/feature-section-v2/components/feature-illustration.tsx",
      "content": "import type { ReactNode } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport const FEATURE_CARD_MEDIA_HEIGHT = \"h-56 min-h-56\"\n\ntype FeatureIllustrationProps = {\n  viewBox: string\n  children: ReactNode\n  className?: string\n  svgClassName?: string\n}\n\nexport function FeatureIllustration({\n  viewBox,\n  children,\n  className,\n  svgClassName,\n}: FeatureIllustrationProps) {\n  return (\n    <div\n      className={cn(\n        \"size-full min-h-0 opacity-40 motion-safe:transition-opacity duration-200 ease-out group-hover/card:opacity-70\",\n        className\n      )}\n    >\n      <svg\n        aria-hidden\n        viewBox={viewBox}\n        preserveAspectRatio=\"xMidYMid meet\"\n        className={cn(\"text-foreground block size-full\", svgClassName)}\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        {children}\n      </svg>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "app/feature-section-v2/components/feature-illustration.tsx"
    },
    {
      "path": "registry/new-york/blocks/feature-section-v2/components/workflow-automation-illustration.tsx",
      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport { FeatureIllustration } from \"./feature-illustration\"\nimport { featureIllustrationViewBoxes } from \"../lib/features\"\nimport { useInViewOnce } from \"../lib/use-in-view-once\"\n\nexport default function WorkflowAutomationIllustration() {\n  const { ref, active } = useInViewOnce()\n\n  return (\n    <div ref={ref} className=\"size-full min-h-0\">\n      <FeatureIllustration\n        viewBox={featureIllustrationViewBoxes[\"workflow-automation\"]}\n        svgClassName={cn(\"fsv2-wf-chart\", active && \"fsv2-wf-chart--active\")}\n      >\n        <rect\n          x=\"24\"\n          y=\"28\"\n          width=\"440\"\n          height=\"326\"\n          rx=\"2\"\n          fill=\"var(--card)\"\n          stroke=\"url(#fsv2_wf_frame)\"\n        />\n        <line x1=\"24\" y1=\"68\" x2=\"464\" y2=\"68\" stroke=\"currentColor\" strokeOpacity=\"0.35\" />\n        <circle cx=\"44\" cy=\"48\" r=\"4\" stroke=\"currentColor\" strokeOpacity=\"0.5\" />\n        <circle cx=\"58\" cy=\"48\" r=\"4\" stroke=\"currentColor\" strokeOpacity=\"0.35\" />\n        <circle cx=\"72\" cy=\"48\" r=\"4\" stroke=\"currentColor\" strokeOpacity=\"0.2\" />\n\n        <g className=\"fsv2-wf-trigger\">\n          <rect\n            x=\"48\"\n            y=\"108\"\n            width=\"112\"\n            height=\"88\"\n            rx=\"4\"\n            fill=\"var(--card)\"\n            stroke=\"url(#fsv2_wf_panel)\"\n            strokeDasharray=\"6 4\"\n          />\n          <line x1=\"64\" y1=\"132\" x2=\"144\" y2=\"132\" stroke=\"currentColor\" strokeOpacity=\"0.55\" />\n          <line x1=\"64\" y1=\"152\" x2=\"128\" y2=\"152\" stroke=\"currentColor\" strokeOpacity=\"0.35\" />\n          <line x1=\"64\" y1=\"172\" x2=\"136\" y2=\"172\" stroke=\"currentColor\" strokeOpacity=\"0.25\" />\n        </g>\n\n        <g className=\"motion-safe:transition-transform duration-200 ease-out group-hover/card:translate-x-0.5\">\n          <path\n            className=\"fsv2-wf-flow__line\"\n            pathLength={1}\n            d=\"M176 152H208\"\n            stroke=\"url(#fsv2_wf_flow)\"\n            strokeWidth=\"1.5\"\n            strokeLinecap=\"round\"\n            fill=\"none\"\n          />\n          <path\n            className=\"fsv2-wf-flow__arrow\"\n            d=\"M208 152L198 146\"\n            stroke=\"currentColor\"\n            strokeOpacity=\"0.6\"\n            strokeLinecap=\"round\"\n          />\n          <path\n            className=\"fsv2-wf-flow__arrow\"\n            d=\"M208 152L198 158\"\n            stroke=\"currentColor\"\n            strokeOpacity=\"0.6\"\n            strokeLinecap=\"round\"\n          />\n        </g>\n\n        <g className=\"fsv2-wf-queue\">\n          <rect\n            x=\"224\"\n            y=\"96\"\n            width=\"216\"\n            height=\"200\"\n            rx=\"4\"\n            fill=\"var(--card)\"\n            stroke=\"url(#fsv2_wf_panel)\"\n          />\n          <rect\n            x=\"240\"\n            y=\"116\"\n            width=\"184\"\n            height=\"28\"\n            rx=\"3\"\n            stroke=\"currentColor\"\n            strokeOpacity=\"0.15\"\n          />\n          <rect\n            x=\"240\"\n            y=\"156\"\n            width=\"184\"\n            height=\"28\"\n            rx=\"3\"\n            stroke=\"currentColor\"\n            strokeOpacity=\"0.55\"\n            fill=\"currentColor\"\n            fillOpacity=\"0.04\"\n          />\n          <circle cx=\"252\" cy=\"170\" r=\"4\" fill=\"currentColor\" fillOpacity=\"0.7\" />\n          <rect\n            x=\"240\"\n            y=\"196\"\n            width=\"184\"\n            height=\"28\"\n            rx=\"3\"\n            stroke=\"currentColor\"\n            strokeOpacity=\"0.12\"\n          />\n          <rect\n            x=\"240\"\n            y=\"236\"\n            width=\"184\"\n            height=\"28\"\n            rx=\"3\"\n            stroke=\"currentColor\"\n            strokeOpacity=\"0.08\"\n          />\n        </g>\n\n        <rect\n          x=\"388\"\n          y=\"40\"\n          width=\"52\"\n          height=\"18\"\n          rx=\"9\"\n          stroke=\"currentColor\"\n          strokeOpacity=\"0.45\"\n        />\n        <circle cx=\"426\" cy=\"49\" r=\"6\" fill=\"currentColor\" fillOpacity=\"0.35\" />\n\n        <defs>\n          <linearGradient\n            id=\"fsv2_wf_frame\"\n            x1=\"244\"\n            y1=\"28\"\n            x2=\"244\"\n            y2=\"354\"\n            gradientUnits=\"userSpaceOnUse\"\n          >\n            <stop stopColor=\"var(--foreground)\" />\n            <stop offset=\"0.8\" stopColor=\"var(--card)\" />\n          </linearGradient>\n          <linearGradient\n            id=\"fsv2_wf_panel\"\n            x1=\"0\"\n            y1=\"0\"\n            x2=\"0\"\n            y2=\"1\"\n            gradientUnits=\"objectBoundingBox\"\n          >\n            <stop stopColor=\"var(--foreground)\" />\n            <stop offset=\"0.75\" stopColor=\"var(--foreground)\" stopOpacity=\"0\" />\n          </linearGradient>\n          <linearGradient\n            id=\"fsv2_wf_flow\"\n            x1=\"176\"\n            y1=\"152\"\n            x2=\"208\"\n            y2=\"152\"\n            gradientUnits=\"userSpaceOnUse\"\n          >\n            <stop stopColor=\"var(--foreground)\" stopOpacity=\"0.2\" />\n            <stop offset=\"1\" stopColor=\"var(--foreground)\" />\n          </linearGradient>\n        </defs>\n      </FeatureIllustration>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "app/feature-section-v2/components/workflow-automation-illustration.tsx"
    },
    {
      "path": "registry/new-york/blocks/feature-section-v2/components/real-time-analytics-illustration.tsx",
      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport { FeatureIllustration } from \"./feature-illustration\"\nimport { featureIllustrationViewBoxes } from \"../lib/features\"\nimport { useInViewOnce } from \"../lib/use-in-view-once\"\n\nexport default function RealTimeAnalyticsIllustration() {\n  const { ref, active } = useInViewOnce()\n\n  return (\n    <div ref={ref} className=\"size-full min-h-0\">\n      <FeatureIllustration\n        viewBox={featureIllustrationViewBoxes[\"real-time-analytics\"]}\n        svgClassName={cn(\"fsv2-an-chart\", active && \"fsv2-an-chart--active\")}\n      >\n        <rect\n          x=\"32\"\n          y=\"36\"\n          width=\"424\"\n          height=\"310\"\n          fill=\"var(--card)\"\n          stroke=\"url(#fsv2_an_frame)\"\n        />\n        <line x1=\"32\" y1=\"76\" x2=\"456\" y2=\"76\" stroke=\"currentColor\" strokeOpacity=\"0.3\" />\n\n        <g className=\"fsv2-an-live\">\n          <rect\n            x=\"52\"\n            y=\"52\"\n            width=\"48\"\n            height=\"16\"\n            rx=\"8\"\n            stroke=\"currentColor\"\n            strokeOpacity=\"0.4\"\n          />\n          <circle cx=\"64\" cy=\"60\" r=\"3\" fill=\"#22c55e\" fillOpacity=\"0.9\" />\n          <line x1=\"72\" y1=\"60\" x2=\"88\" y2=\"60\" stroke=\"currentColor\" strokeOpacity=\"0.5\" />\n        </g>\n\n        <path\n          d=\"M72 108H416M72 148H416M72 188H416M72 228H416M72 268H416M72 308H416\"\n          stroke=\"currentColor\"\n          strokeOpacity=\"0.08\"\n        />\n\n        <g className=\"motion-safe:transition-opacity duration-200 ease-out group-hover/card:opacity-100 opacity-90\">\n          <path\n            className=\"fsv2-an-spark\"\n            pathLength={1}\n            d=\"M72 248 L120 220 L168 232 L216 180 L264 196 L312 140 L360 156 L408 108\"\n            stroke=\"url(#fsv2_an_spark)\"\n            strokeWidth=\"1.5\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            fill=\"none\"\n          />\n        </g>\n\n        <rect\n          className=\"fsv2-an-bar fsv2-an-bar--1\"\n          x=\"88\"\n          y=\"248\"\n          width=\"36\"\n          height=\"60\"\n          fill=\"url(#fsv2_an_bar)\"\n          fillOpacity=\"0.25\"\n          stroke=\"currentColor\"\n          strokeOpacity=\"0.2\"\n        />\n        <rect\n          className=\"fsv2-an-bar fsv2-an-bar--2\"\n          x=\"136\"\n          y=\"220\"\n          width=\"36\"\n          height=\"88\"\n          fill=\"url(#fsv2_an_bar)\"\n          fillOpacity=\"0.3\"\n          stroke=\"currentColor\"\n          strokeOpacity=\"0.25\"\n        />\n        <rect\n          className=\"fsv2-an-bar fsv2-an-bar--3\"\n          x=\"184\"\n          y=\"196\"\n          width=\"36\"\n          height=\"112\"\n          fill=\"url(#fsv2_an_bar_active)\"\n          fillOpacity=\"0.35\"\n          stroke=\"currentColor\"\n          strokeOpacity=\"0.65\"\n        />\n        <rect\n          className=\"fsv2-an-bar fsv2-an-bar--4\"\n          x=\"232\"\n          y=\"212\"\n          width=\"36\"\n          height=\"96\"\n          fill=\"url(#fsv2_an_bar)\"\n          fillOpacity=\"0.28\"\n          stroke=\"currentColor\"\n          strokeOpacity=\"0.22\"\n        />\n        <rect\n          className=\"fsv2-an-bar fsv2-an-bar--5\"\n          x=\"280\"\n          y=\"168\"\n          width=\"36\"\n          height=\"140\"\n          fill=\"url(#fsv2_an_bar)\"\n          fillOpacity=\"0.32\"\n          stroke=\"currentColor\"\n          strokeOpacity=\"0.28\"\n        />\n        <rect\n          className=\"fsv2-an-bar fsv2-an-bar--6\"\n          x=\"328\"\n          y=\"184\"\n          width=\"36\"\n          height=\"124\"\n          fill=\"url(#fsv2_an_bar)\"\n          fillOpacity=\"0.26\"\n          stroke=\"currentColor\"\n          strokeOpacity=\"0.2\"\n        />\n\n        <g className=\"fsv2-an-marker\">\n          <line\n            x1=\"184\"\n            y1=\"196\"\n            x2=\"220\"\n            y2=\"196\"\n            stroke=\"currentColor\"\n            strokeOpacity=\"0.7\"\n            strokeDasharray=\"4 3\"\n          />\n          <circle cx=\"220\" cy=\"196\" r=\"3\" fill=\"currentColor\" fillOpacity=\"0.8\" />\n        </g>\n\n        <defs>\n          <linearGradient\n            id=\"fsv2_an_frame\"\n            x1=\"244\"\n            y1=\"36\"\n            x2=\"244\"\n            y2=\"346\"\n            gradientUnits=\"userSpaceOnUse\"\n          >\n            <stop stopColor=\"var(--foreground)\" />\n            <stop offset=\"0.8\" stopColor=\"var(--card)\" />\n          </linearGradient>\n          <linearGradient\n            id=\"fsv2_an_spark\"\n            x1=\"72\"\n            y1=\"248\"\n            x2=\"408\"\n            y2=\"108\"\n            gradientUnits=\"userSpaceOnUse\"\n          >\n            <stop stopColor=\"var(--foreground)\" stopOpacity=\"0.15\" />\n            <stop offset=\"1\" stopColor=\"var(--foreground)\" />\n          </linearGradient>\n          <linearGradient\n            id=\"fsv2_an_bar\"\n            x1=\"0\"\n            y1=\"1\"\n            x2=\"0\"\n            y2=\"0\"\n            gradientUnits=\"objectBoundingBox\"\n          >\n            <stop stopColor=\"var(--foreground)\" stopOpacity=\"0\" />\n            <stop offset=\"1\" stopColor=\"var(--foreground)\" />\n          </linearGradient>\n          <linearGradient\n            id=\"fsv2_an_bar_active\"\n            x1=\"0\"\n            y1=\"1\"\n            x2=\"0\"\n            y2=\"0\"\n            gradientUnits=\"objectBoundingBox\"\n          >\n            <stop stopColor=\"var(--foreground)\" stopOpacity=\"0.1\" />\n            <stop offset=\"1\" stopColor=\"var(--foreground)\" />\n          </linearGradient>\n        </defs>\n      </FeatureIllustration>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "app/feature-section-v2/components/real-time-analytics-illustration.tsx"
    },
    {
      "path": "registry/new-york/blocks/feature-section-v2/components/access-control-illustration.tsx",
      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport { FeatureIllustration } from \"./feature-illustration\"\nimport { featureIllustrationViewBoxes } from \"../lib/features\"\nimport { useInViewOnce } from \"../lib/use-in-view-once\"\n\nexport default function AccessControlIllustration() {\n  const { ref, active } = useInViewOnce()\n\n  return (\n    <div ref={ref} className=\"size-full min-h-0\">\n      <FeatureIllustration\n        viewBox={featureIllustrationViewBoxes[\"access-control\"]}\n        svgClassName={cn(\"fsv2-ac-chart\", active && \"fsv2-ac-chart--active\")}\n      >\n        <g className=\"fsv2-ac-layer fsv2-ac-layer--3\">\n          <rect\n            x=\"72\"\n            y=\"56\"\n            width=\"344\"\n            height=\"280\"\n            fill=\"var(--card)\"\n            stroke=\"url(#fsv2_ac_layer3)\"\n            strokeOpacity=\"0.35\"\n          />\n          <line x1=\"96\" y1=\"96\" x2=\"392\" y2=\"96\" stroke=\"currentColor\" strokeOpacity=\"0.12\" />\n          <line x1=\"96\" y1=\"128\" x2=\"320\" y2=\"128\" stroke=\"currentColor\" strokeOpacity=\"0.08\" />\n        </g>\n\n        <g className=\"fsv2-ac-layer fsv2-ac-layer--2\">\n          <rect\n            x=\"56\"\n            y=\"44\"\n            width=\"344\"\n            height=\"280\"\n            fill=\"var(--card)\"\n            stroke=\"url(#fsv2_ac_layer2)\"\n            strokeOpacity=\"0.55\"\n          />\n          <line x1=\"80\" y1=\"84\" x2=\"376\" y2=\"84\" stroke=\"currentColor\" strokeOpacity=\"0.2\" />\n          <line x1=\"80\" y1=\"116\" x2=\"340\" y2=\"116\" stroke=\"currentColor\" strokeOpacity=\"0.14\" />\n          <rect\n            x=\"80\"\n            y=\"140\"\n            width=\"72\"\n            height=\"20\"\n            rx=\"4\"\n            stroke=\"currentColor\"\n            strokeOpacity=\"0.25\"\n          />\n        </g>\n\n        <g className=\"fsv2-ac-layer fsv2-ac-layer--1 motion-safe:transition-transform duration-200 ease-out group-hover/card:-translate-y-0.5\">\n          <rect\n            x=\"40\"\n            y=\"32\"\n            width=\"344\"\n            height=\"280\"\n            fill=\"var(--card)\"\n            stroke=\"url(#fsv2_ac_layer1)\"\n          />\n          <line x1=\"64\" y1=\"72\" x2=\"360\" y2=\"72\" stroke=\"currentColor\" strokeOpacity=\"0.35\" />\n          <line x1=\"64\" y1=\"104\" x2=\"360\" y2=\"104\" stroke=\"currentColor\" strokeOpacity=\"0.28\" />\n          <line x1=\"64\" y1=\"136\" x2=\"300\" y2=\"136\" stroke=\"currentColor\" strokeOpacity=\"0.2\" />\n          <line x1=\"64\" y1=\"168\" x2=\"360\" y2=\"168\" stroke=\"currentColor\" strokeOpacity=\"0.14\" />\n\n          <rect\n            x=\"64\"\n            y=\"292\"\n            width=\"56\"\n            height=\"18\"\n            rx=\"4\"\n            stroke=\"currentColor\"\n            strokeOpacity=\"0.35\"\n          />\n          <rect\n            x=\"132\"\n            y=\"292\"\n            width=\"72\"\n            height=\"18\"\n            rx=\"4\"\n            stroke=\"currentColor\"\n            strokeOpacity=\"0.2\"\n          />\n        </g>\n\n        <g className=\"fsv2-ac-lock\">\n          <rect\n            x=\"196\"\n            y=\"188\"\n            width=\"96\"\n            height=\"88\"\n            rx=\"6\"\n            fill=\"var(--card)\"\n            stroke=\"url(#fsv2_ac_lock)\"\n          />\n          <path\n            d=\"M228 224V212C228 200.954 236.954 192 248 192C259.046 192 268 200.954 268 212V224\"\n            stroke=\"currentColor\"\n            strokeOpacity=\"0.75\"\n            strokeWidth=\"1.5\"\n            strokeLinecap=\"round\"\n          />\n          <rect\n            x=\"220\"\n            y=\"224\"\n            width=\"56\"\n            height=\"40\"\n            rx=\"4\"\n            stroke=\"currentColor\"\n            strokeOpacity=\"0.75\"\n          />\n          <circle cx=\"248\" cy=\"240\" r=\"4\" fill=\"currentColor\" fillOpacity=\"0.6\" />\n          <line x1=\"248\" y1=\"244\" x2=\"248\" y2=\"252\" stroke=\"currentColor\" strokeOpacity=\"0.5\" />\n        </g>\n\n        <defs>\n          <linearGradient\n            id=\"fsv2_ac_layer1\"\n            x1=\"212\"\n            y1=\"32\"\n            x2=\"212\"\n            y2=\"312\"\n            gradientUnits=\"userSpaceOnUse\"\n          >\n            <stop stopColor=\"var(--foreground)\" />\n            <stop offset=\"0.8\" stopColor=\"var(--foreground)\" stopOpacity=\"0\" />\n          </linearGradient>\n          <linearGradient\n            id=\"fsv2_ac_layer2\"\n            x1=\"228\"\n            y1=\"44\"\n            x2=\"228\"\n            y2=\"324\"\n            gradientUnits=\"userSpaceOnUse\"\n          >\n            <stop stopColor=\"var(--foreground)\" stopOpacity=\"0.7\" />\n            <stop offset=\"0.8\" stopColor=\"var(--foreground)\" stopOpacity=\"0\" />\n          </linearGradient>\n          <linearGradient\n            id=\"fsv2_ac_layer3\"\n            x1=\"244\"\n            y1=\"56\"\n            x2=\"244\"\n            y2=\"336\"\n            gradientUnits=\"userSpaceOnUse\"\n          >\n            <stop stopColor=\"var(--foreground)\" stopOpacity=\"0.4\" />\n            <stop offset=\"0.8\" stopColor=\"var(--foreground)\" stopOpacity=\"0\" />\n          </linearGradient>\n          <linearGradient\n            id=\"fsv2_ac_lock\"\n            x1=\"244\"\n            y1=\"188\"\n            x2=\"244\"\n            y2=\"276\"\n            gradientUnits=\"userSpaceOnUse\"\n          >\n            <stop stopColor=\"var(--foreground)\" />\n            <stop offset=\"1\" stopColor=\"var(--foreground)\" stopOpacity=\"0.2\" />\n          </linearGradient>\n        </defs>\n      </FeatureIllustration>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "app/feature-section-v2/components/access-control-illustration.tsx"
    },
    {
      "path": "registry/new-york/blocks/feature-section-v2/components/integrations-illustration.tsx",
      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport { FeatureIllustration } from \"./feature-illustration\"\nimport { featureIllustrationViewBoxes } from \"../lib/features\"\nimport { useInViewOnce } from \"../lib/use-in-view-once\"\n\nexport default function IntegrationsIllustration() {\n  const { ref, active } = useInViewOnce()\n\n  return (\n    <div ref={ref} className=\"size-full min-h-0\">\n      <FeatureIllustration\n        viewBox={featureIllustrationViewBoxes.integrations}\n        svgClassName={cn(\"fsv2-in-chart\", active && \"fsv2-in-chart--active\")}\n      >\n        <rect\n          x=\"28\"\n          y=\"24\"\n          width=\"432\"\n          height=\"334\"\n          fill=\"var(--card)\"\n          stroke=\"url(#fsv2_in_frame)\"\n        />\n\n        <path\n          className=\"fsv2-in-spoke fsv2-in-spoke--1\"\n          pathLength={1}\n          d=\"M244 191 L120 100\"\n          stroke=\"url(#fsv2_in_line)\"\n          strokeOpacity=\"0.45\"\n          fill=\"none\"\n        />\n        <path\n          className=\"fsv2-in-spoke fsv2-in-spoke--2\"\n          pathLength={1}\n          d=\"M244 191 L368 100\"\n          stroke=\"url(#fsv2_in_line)\"\n          strokeOpacity=\"0.45\"\n          fill=\"none\"\n        />\n        <path\n          className=\"fsv2-in-spoke fsv2-in-spoke--3\"\n          pathLength={1}\n          d=\"M244 191 L96 220\"\n          stroke=\"url(#fsv2_in_line)\"\n          strokeOpacity=\"0.35\"\n          fill=\"none\"\n        />\n        <path\n          className=\"fsv2-in-spoke fsv2-in-spoke--4\"\n          pathLength={1}\n          d=\"M244 191 L392 220\"\n          stroke=\"url(#fsv2_in_line)\"\n          strokeOpacity=\"0.35\"\n          fill=\"none\"\n        />\n        <path\n          className=\"fsv2-in-spoke fsv2-in-spoke--5\"\n          pathLength={1}\n          d=\"M244 191 L244 300\"\n          stroke=\"url(#fsv2_in_line)\"\n          strokeOpacity=\"0.5\"\n          fill=\"none\"\n        />\n\n        <g className=\"fsv2-in-node fsv2-in-node--1 motion-safe:transition-transform duration-200 ease-out group-hover/card:-translate-y-1\">\n          <rect\n            x=\"88\"\n            y=\"72\"\n            width=\"64\"\n            height=\"48\"\n            rx=\"4\"\n            fill=\"var(--card)\"\n            stroke=\"currentColor\"\n            strokeOpacity=\"0.35\"\n          />\n          <line x1=\"100\" y1=\"88\" x2=\"140\" y2=\"88\" stroke=\"currentColor\" strokeOpacity=\"0.4\" />\n          <line x1=\"100\" y1=\"104\" x2=\"128\" y2=\"104\" stroke=\"currentColor\" strokeOpacity=\"0.25\" />\n        </g>\n\n        <g className=\"fsv2-in-node fsv2-in-node--2 motion-safe:transition-transform duration-200 ease-out group-hover/card:-translate-y-1\">\n          <rect\n            x=\"336\"\n            y=\"72\"\n            width=\"64\"\n            height=\"48\"\n            rx=\"4\"\n            fill=\"var(--card)\"\n            stroke=\"currentColor\"\n            strokeOpacity=\"0.35\"\n          />\n          <line x1=\"348\" y1=\"88\" x2=\"388\" y2=\"88\" stroke=\"currentColor\" strokeOpacity=\"0.4\" />\n          <line x1=\"348\" y1=\"104\" x2=\"376\" y2=\"104\" stroke=\"currentColor\" strokeOpacity=\"0.25\" />\n        </g>\n\n        <g className=\"fsv2-in-node fsv2-in-node--3 motion-safe:transition-transform duration-200 ease-out group-hover/card:translate-x-1\">\n          <rect\n            x=\"64\"\n            y=\"196\"\n            width=\"64\"\n            height=\"48\"\n            rx=\"4\"\n            fill=\"var(--card)\"\n            stroke=\"currentColor\"\n            strokeOpacity=\"0.28\"\n          />\n          <line x1=\"76\" y1=\"212\" x2=\"116\" y2=\"212\" stroke=\"currentColor\" strokeOpacity=\"0.3\" />\n        </g>\n\n        <g className=\"fsv2-in-node fsv2-in-node--4 motion-safe:transition-transform duration-200 ease-out group-hover/card:-translate-x-1\">\n          <rect\n            x=\"360\"\n            y=\"196\"\n            width=\"64\"\n            height=\"48\"\n            rx=\"4\"\n            fill=\"var(--card)\"\n            stroke=\"currentColor\"\n            strokeOpacity=\"0.28\"\n          />\n          <line x1=\"372\" y1=\"212\" x2=\"412\" y2=\"212\" stroke=\"currentColor\" strokeOpacity=\"0.3\" />\n        </g>\n\n        <g className=\"fsv2-in-node fsv2-in-node--5 motion-safe:transition-transform duration-200 ease-out group-hover/card:translate-y-1\">\n          <rect\n            x=\"212\"\n            y=\"276\"\n            width=\"64\"\n            height=\"48\"\n            rx=\"4\"\n            fill=\"var(--card)\"\n            stroke=\"currentColor\"\n            strokeOpacity=\"0.4\"\n          />\n          <line x1=\"224\" y1=\"292\" x2=\"264\" y2=\"292\" stroke=\"currentColor\" strokeOpacity=\"0.35\" />\n        </g>\n\n        <g className=\"fsv2-in-hub\">\n          <circle\n            cx=\"244\"\n            cy=\"191\"\n            r=\"44\"\n            fill=\"var(--card)\"\n            stroke=\"url(#fsv2_in_hub)\"\n            strokeWidth=\"1.5\"\n          />\n          <circle cx=\"244\" cy=\"191\" r=\"6\" fill=\"currentColor\" fillOpacity=\"0.7\" />\n          <line x1=\"244\" y1=\"163\" x2=\"244\" y2=\"219\" stroke=\"currentColor\" strokeOpacity=\"0.5\" />\n          <line x1=\"216\" y1=\"191\" x2=\"272\" y2=\"191\" stroke=\"currentColor\" strokeOpacity=\"0.5\" />\n        </g>\n\n        <defs>\n          <linearGradient\n            id=\"fsv2_in_frame\"\n            x1=\"244\"\n            y1=\"24\"\n            x2=\"244\"\n            y2=\"358\"\n            gradientUnits=\"userSpaceOnUse\"\n          >\n            <stop stopColor=\"var(--foreground)\" />\n            <stop offset=\"0.8\" stopColor=\"var(--card)\" />\n          </linearGradient>\n          <linearGradient\n            id=\"fsv2_in_hub\"\n            x1=\"244\"\n            y1=\"147\"\n            x2=\"244\"\n            y2=\"235\"\n            gradientUnits=\"userSpaceOnUse\"\n          >\n            <stop stopColor=\"var(--foreground)\" />\n            <stop offset=\"1\" stopColor=\"var(--foreground)\" stopOpacity=\"0.15\" />\n          </linearGradient>\n          <linearGradient\n            id=\"fsv2_in_line\"\n            x1=\"244\"\n            y1=\"191\"\n            x2=\"244\"\n            y2=\"100\"\n            gradientUnits=\"userSpaceOnUse\"\n          >\n            <stop stopColor=\"var(--foreground)\" stopOpacity=\"0.6\" />\n            <stop offset=\"1\" stopColor=\"var(--foreground)\" stopOpacity=\"0\" />\n          </linearGradient>\n        </defs>\n      </FeatureIllustration>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "app/feature-section-v2/components/integrations-illustration.tsx"
    },
    {
      "path": "registry/new-york/blocks/feature-section-v2/lib/use-in-view-once.ts",
      "content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\n\nexport function useInViewOnce(threshold = 0.35) {\n  const ref = useRef<HTMLDivElement>(null)\n  const [active, setActive] = useState(false)\n\n  useEffect(() => {\n    const el = ref.current\n    if (!el || active) return\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (entry?.isIntersecting) {\n          setActive(true)\n          observer.disconnect()\n        }\n      },\n      { threshold }\n    )\n\n    observer.observe(el)\n    return () => observer.disconnect()\n  }, [active, threshold])\n\n  return { ref, active }\n}\n",
      "type": "registry:lib",
      "target": "app/feature-section-v2/lib/use-in-view-once.ts"
    },
    {
      "path": "registry/new-york/blocks/feature-section-v2/lib/features.ts",
      "content": "export type FeatureIllustrationId =\n  | \"workflow-automation\"\n  | \"real-time-analytics\"\n  | \"access-control\"\n  | \"integrations\"\n\nexport const featureIllustrationViewBoxes = {\n  \"workflow-automation\": \"16 20 456 342\",\n  \"real-time-analytics\": \"24 28 440 318\",\n  \"access-control\": \"32 24 396 294\",\n  integrations: \"20 16 448 348\",\n} as const satisfies Record<FeatureIllustrationId, string>\n\nexport type Feature = {\n  id: string\n  title: string\n  description: string\n  illustration: FeatureIllustrationId\n}\n\nexport const features: Feature[] = [\n  {\n    id: \"workflow-automation\",\n    title: \"Workflow automation\",\n    description:\n      \"Set it up once and let it run. Your team gets back the time that used to disappear into repetitive work.\",\n    illustration: \"workflow-automation\",\n  },\n  {\n    id: \"real-time-analytics\",\n    title: \"Real-time analytics\",\n    description:\n      \"Pull live data into your dashboards so you can act on it while it still matters, not days later when the weekly export finally lands.\",\n    illustration: \"real-time-analytics\",\n  },\n  {\n    id: \"access-control\",\n    title: \"Access control\",\n    description:\n      \"Give people exactly the access they need, keep sensitive areas locked down, and put an end to the permission requests piling up in your inbox.\",\n    illustration: \"access-control\",\n  },\n  {\n    id: \"integrations\",\n    title: \"Integrations\",\n    description:\n      \"Connect the tools your team already uses in minutes, without turning it into another engineering project.\",\n    illustration: \"integrations\",\n  },\n]\n",
      "type": "registry:lib",
      "target": "app/feature-section-v2/lib/features.ts"
    },
    {
      "path": "registry/new-york/blocks/feature-section-v2/styles/feature-section-v2.css",
      "content": "@keyframes fsv2-illus-draw {\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n\n@keyframes fsv2-illus-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes fsv2-illus-scale-in {\n  from {\n    opacity: 0;\n    transform: scale(0.88);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes fsv2-illus-grow-up {\n  from {\n    opacity: 0;\n    transform: scaleY(0.55);\n  }\n  to {\n    opacity: 1;\n    transform: scaleY(1);\n  }\n}\n\n.fsv2-wf-trigger,\n.fsv2-wf-queue {\n  opacity: 0;\n  transform-box: fill-box;\n  transform-origin: center;\n}\n\n.fsv2-wf-flow__line {\n  stroke-dasharray: 1;\n  stroke-dashoffset: 1;\n}\n\n.fsv2-wf-flow__arrow {\n  opacity: 0;\n}\n\n.fsv2-wf-chart--active .fsv2-wf-trigger {\n  animation: fsv2-illus-scale-in 520ms cubic-bezier(0.22, 1, 0.36, 1) 120ms forwards;\n}\n\n.fsv2-wf-chart--active .fsv2-wf-flow__line {\n  animation: fsv2-illus-draw 480ms cubic-bezier(0.22, 1, 0.36, 1) 360ms forwards;\n}\n\n.fsv2-wf-chart--active .fsv2-wf-flow__arrow {\n  animation: fsv2-illus-fade-in 320ms ease-out 720ms forwards;\n}\n\n.fsv2-wf-chart--active .fsv2-wf-queue {\n  animation: fsv2-illus-scale-in 560ms cubic-bezier(0.16, 1, 0.3, 1) 520ms forwards;\n}\n\n.fsv2-an-spark {\n  stroke-dasharray: 1;\n  stroke-dashoffset: 1;\n}\n\n.fsv2-an-live {\n  opacity: 0;\n}\n\n.fsv2-an-bar {\n  opacity: 0;\n  transform-box: fill-box;\n  transform-origin: bottom center;\n}\n\n.fsv2-an-chart--active .fsv2-an-live {\n  animation: fsv2-illus-fade-in 360ms ease-out 100ms forwards;\n}\n\n.fsv2-an-chart--active .fsv2-an-spark {\n  animation: fsv2-illus-draw 1.1s cubic-bezier(0.16, 1, 0.3, 1) 280ms forwards;\n}\n\n.fsv2-an-chart--active .fsv2-an-bar--1 {\n  animation: fsv2-illus-grow-up 480ms cubic-bezier(0.22, 1, 0.36, 1) 900ms forwards;\n}\n\n.fsv2-an-chart--active .fsv2-an-bar--2 {\n  animation: fsv2-illus-grow-up 480ms cubic-bezier(0.22, 1, 0.36, 1) 1020ms forwards;\n}\n\n.fsv2-an-chart--active .fsv2-an-bar--3 {\n  animation: fsv2-illus-grow-up 520ms cubic-bezier(0.16, 1, 0.3, 1) 1140ms forwards;\n}\n\n.fsv2-an-chart--active .fsv2-an-bar--4 {\n  animation: fsv2-illus-grow-up 480ms cubic-bezier(0.22, 1, 0.36, 1) 1260ms forwards;\n}\n\n.fsv2-an-chart--active .fsv2-an-bar--5 {\n  animation: fsv2-illus-grow-up 480ms cubic-bezier(0.22, 1, 0.36, 1) 1380ms forwards;\n}\n\n.fsv2-an-chart--active .fsv2-an-bar--6 {\n  animation: fsv2-illus-grow-up 480ms cubic-bezier(0.22, 1, 0.36, 1) 1500ms forwards;\n}\n\n.fsv2-an-marker {\n  opacity: 0;\n}\n\n.fsv2-an-chart--active .fsv2-an-marker {\n  animation: fsv2-illus-fade-in 360ms ease-out 1.65s forwards;\n}\n\n.fsv2-ac-layer {\n  opacity: 0;\n  transform-box: fill-box;\n  transform-origin: center;\n}\n\n.fsv2-ac-chart--active .fsv2-ac-layer--3 {\n  animation: fsv2-illus-scale-in 480ms ease-out 120ms forwards;\n}\n\n.fsv2-ac-chart--active .fsv2-ac-layer--2 {\n  animation: fsv2-illus-scale-in 520ms cubic-bezier(0.22, 1, 0.36, 1) 280ms forwards;\n}\n\n.fsv2-ac-chart--active .fsv2-ac-layer--1 {\n  animation: fsv2-illus-scale-in 560ms cubic-bezier(0.16, 1, 0.3, 1) 460ms forwards;\n}\n\n.fsv2-ac-lock {\n  opacity: 0;\n  transform-box: fill-box;\n  transform-origin: center;\n}\n\n.fsv2-ac-chart--active .fsv2-ac-lock {\n  animation: fsv2-illus-scale-in 480ms cubic-bezier(0.34, 1.2, 0.64, 1) 720ms forwards;\n}\n\n.fsv2-in-hub {\n  opacity: 0;\n  transform-box: fill-box;\n  transform-origin: center;\n}\n\n.fsv2-in-spoke {\n  stroke-dasharray: 1;\n  stroke-dashoffset: 1;\n}\n\n.fsv2-in-node {\n  opacity: 0;\n  transform-box: fill-box;\n  transform-origin: center;\n}\n\n.fsv2-in-chart--active .fsv2-in-hub {\n  animation: fsv2-illus-scale-in 520ms cubic-bezier(0.22, 1, 0.36, 1) 140ms forwards;\n}\n\n.fsv2-in-chart--active .fsv2-in-spoke--1 {\n  animation: fsv2-illus-draw 420ms ease-out 400ms forwards;\n}\n\n.fsv2-in-chart--active .fsv2-in-spoke--2 {\n  animation: fsv2-illus-draw 420ms ease-out 480ms forwards;\n}\n\n.fsv2-in-chart--active .fsv2-in-spoke--3 {\n  animation: fsv2-illus-draw 420ms ease-out 560ms forwards;\n}\n\n.fsv2-in-chart--active .fsv2-in-spoke--4 {\n  animation: fsv2-illus-draw 420ms ease-out 640ms forwards;\n}\n\n.fsv2-in-chart--active .fsv2-in-spoke--5 {\n  animation: fsv2-illus-draw 420ms ease-out 720ms forwards;\n}\n\n.fsv2-in-chart--active .fsv2-in-node--1,\n.fsv2-in-chart--active .fsv2-in-node--2 {\n  animation: fsv2-illus-scale-in 400ms ease-out 1.2s forwards;\n}\n\n.fsv2-in-chart--active .fsv2-in-node--3,\n.fsv2-in-chart--active .fsv2-in-node--4 {\n  animation: fsv2-illus-scale-in 400ms ease-out 1.32s forwards;\n}\n\n.fsv2-in-chart--active .fsv2-in-node--5 {\n  animation: fsv2-illus-scale-in 400ms ease-out 1.44s forwards;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .fsv2-wf-trigger,\n  .fsv2-wf-queue,\n  .fsv2-wf-flow__arrow,\n  .fsv2-an-live,\n  .fsv2-an-bar,\n  .fsv2-an-marker,\n  .fsv2-ac-layer,\n  .fsv2-ac-lock,\n  .fsv2-in-hub,\n  .fsv2-in-node {\n    opacity: 1;\n    transform: none;\n    animation: none;\n  }\n\n  .fsv2-wf-flow__line,\n  .fsv2-an-spark,\n  .fsv2-in-spoke {\n    stroke-dashoffset: 0;\n    animation: none;\n  }\n}\n",
      "type": "registry:file",
      "target": "app/feature-section-v2/styles/feature-section-v2.css"
    }
  ],
  "type": "registry:block"
}