{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-section-01",
  "title": "Feature Section",
  "description": "A product feature section with a narrative introduction and three responsive cards.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@rivelle/utils",
    "@rivelle/badge",
    "@rivelle/button"
  ],
  "files": [
    {
      "path": "registry/nova/blocks/feature-section-01.tsx",
      "content": "import * as React from \"react\";\nimport { ArrowRight, Boxes, Gauge, ShieldCheck, Sparkles } from \"lucide-react\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nconst features = [\n  {\n    icon: Gauge,\n    title: \"Move at product speed\",\n    description:\n      \"Turn briefs into aligned plans, decisions and releases without stitching together five different tools.\",\n  },\n  {\n    icon: Boxes,\n    title: \"One shared system\",\n    description:\n      \"Connect projects, docs and feedback in a flexible workspace your whole team can understand.\",\n  },\n  {\n    icon: ShieldCheck,\n    title: \"Ready for serious work\",\n    description:\n      \"Granular permissions, audit history and dependable infrastructure arrive as standard.\",\n  },\n];\n\nfunction FeatureSection01({\n  className,\n  ...props\n}: React.ComponentProps<\"section\">) {\n  return (\n    <section\n      className={cn(\"px-5 py-24 sm:px-8 sm:py-32\", className)}\n      data-slot=\"feature-section\"\n      id=\"product\"\n      {...props}\n    >\n      <div className=\"mx-auto max-w-7xl\">\n        <div className=\"grid gap-10 lg:grid-cols-[.8fr_1.2fr] lg:items-end\">\n          <div>\n            <Badge variant=\"secondary\">\n              <Sparkles /> Built for momentum\n            </Badge>\n            <h2 className=\"mt-6 text-balance text-4xl font-semibold tracking-[-.05em] sm:text-6xl\">\n              Everything important stays in motion.\n            </h2>\n          </div>\n          <div className=\"lg:pb-2\">\n            <p className=\"max-w-2xl text-base leading-relaxed text-muted-foreground sm:text-lg\">\n              A calm operating system for modern teams. Flexible enough for\n              early ideas, structured enough for the work that follows.\n            </p>\n            <Button className=\"mt-6\" variant=\"outline\">\n              Explore the platform <ArrowRight />\n            </Button>\n          </div>\n        </div>\n        <div className=\"mt-14 grid gap-4 md:grid-cols-3\">\n          {features.map(({ icon: Icon, title, description }, index) => (\n            <article\n              className=\"group rounded-[1.75rem] border border-foreground/10 bg-background p-6 transition-[transform,border-color,box-shadow] duration-300 hover:-translate-y-1 hover:border-primary/20 hover:shadow-[0_30px_80px_-60px_var(--primary)] sm:p-8\"\n              key={title}\n            >\n              <div className=\"flex items-center justify-between\">\n                <span className=\"grid size-11 place-items-center rounded-2xl bg-primary/10 text-primary\">\n                  <Icon className=\"size-5\" />\n                </span>\n                <span className=\"text-xs font-semibold text-muted-foreground\">\n                  0{index + 1}\n                </span>\n              </div>\n              <h3 className=\"mt-12 text-xl font-semibold tracking-[-.03em]\">\n                {title}\n              </h3>\n              <p className=\"mt-3 text-sm leading-relaxed text-muted-foreground\">\n                {description}\n              </p>\n            </article>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n\nexport { FeatureSection01 };\n",
      "type": "registry:block"
    }
  ],
  "type": "registry:block"
}