{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "features-2",
  "type": "registry:block",
  "title": "Features 2",
  "description": "Three-column feature cards with icon badges and short descriptions.",
  "registryDependencies": [
    "card"
  ],
  "files": [
    {
      "path": "app/preview/features/two/page.tsx",
      "content": "import { Card, CardContent, CardHeader } from '@/components/ui/card'\nimport { Settings2, Sparkles, Zap } from 'lucide-react'\nimport { ReactNode } from 'react'\n\nexport default function Features() {\n    return (\n        <section className=\"py-16 md:py-32\">\n            <div className=\"@container mx-auto max-w-5xl px-6\">\n                <div className=\"text-center\">\n                    <h2 className=\"text-balance text-4xl font-semibold lg:text-5xl\">Built to cover your needs</h2>\n                    <p className=\"mt-4\">Composable sections for landing pages, docs, and product sites. Adapt them to your brand in minutes.</p>\n                </div>\n                <div className=\"@min-4xl:max-w-full @min-4xl:grid-cols-3 mx-auto mt-8 grid max-w-sm gap-6 [--color-background:var(--color-muted)] [--color-card:var(--color-muted)] *:text-center md:mt-16 dark:[--color-muted:var(--color-zinc-900)]\">\n                    <Card className=\"group border-0 shadow-none\">\n                        <CardHeader className=\"pb-3\">\n                            <CardDecorator>\n                                <Zap className=\"size-6\" aria-hidden />\n                            </CardDecorator>\n\n                            <h3 className=\"mt-6 font-medium\">Customizable</h3>\n                        </CardHeader>\n\n                        <CardContent>\n                            <p className=\"text-sm\">Extensive customization options, allowing you to tailor every aspect to meet your specific needs.</p>\n                        </CardContent>\n                    </Card>\n\n                    <Card className=\"group border-0 shadow-none\">\n                        <CardHeader className=\"pb-3\">\n                            <CardDecorator>\n                                <Settings2 className=\"size-6\" aria-hidden />\n                            </CardDecorator>\n\n                            <h3 className=\"mt-6 font-medium\">You have full control</h3>\n                        </CardHeader>\n\n                        <CardContent>\n                            <p className=\"mt-3 text-sm\">From design elements to functionality, you have complete control to create a unique and personalized experience.</p>\n                        </CardContent>\n                    </Card>\n\n                    <Card className=\"group border-0 shadow-none\">\n                        <CardHeader className=\"pb-3\">\n                            <CardDecorator>\n                                <Sparkles className=\"size-6\" aria-hidden />\n                            </CardDecorator>\n\n                            <h3 className=\"mt-6 font-medium\">Powered By AI</h3>\n                        </CardHeader>\n\n                        <CardContent>\n                            <p className=\"mt-3 text-sm\">Elements to functionality, you have complete control to create a unique experience.</p>\n                        </CardContent>\n                    </Card>\n                </div>\n            </div>\n        </section>\n    )\n}\n\nconst CardDecorator = ({ children }: { children: ReactNode }) => (\n    <div className=\"relative mx-auto size-36 duration-200 [--color-border:color-mix(in_oklab,var(--color-zinc-950)10%,transparent)] group-hover:[--color-border:color-mix(in_oklab,var(--color-zinc-950)20%,transparent)] dark:[--color-border:color-mix(in_oklab,var(--color-white)15%,transparent)] dark:group-hover:bg-white/5 dark:group-hover:[--color-border:color-mix(in_oklab,var(--color-white)20%,transparent)]\">\n        <div aria-hidden className=\"absolute inset-0 bg-[linear-gradient(to_right,var(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-border)_1px,transparent_1px)] bg-[size:24px_24px]\" />\n        <div aria-hidden className=\"bg-radial to-background absolute inset-0 from-transparent to-75%\" />\n        <div className=\"dark:bg-background absolute inset-0 m-auto flex size-12 items-center justify-center border-l border-t bg-white\">{children}</div>\n    </div>\n)\n",
      "type": "registry:component",
      "target": "components/features-2.tsx"
    }
  ]
}