{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "features-3",
  "type": "registry:block",
  "title": "Features 3",
  "description": "Feature cards with layered icon treatments and centered copy.",
  "registryDependencies": [
    "card"
  ],
  "files": [
    {
      "path": "app/preview/features/three/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=\"bg-zinc-50 py-16 md:py-32 dark:bg-transparent\">\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                <Card className=\"@min-4xl:max-w-full @min-4xl:grid-cols-3 @min-4xl:divide-x @min-4xl:divide-y-0 mx-auto mt-8 grid max-w-sm divide-y overflow-hidden shadow-zinc-950/5 *:text-center md:mt-16\">\n                    <div className=\"group shadow-zinc-950/5\">\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                    </div>\n\n                    <div className=\"group shadow-zinc-950/5\">\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                    </div>\n\n                    <div className=\"group shadow-zinc-950/5\">\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                    </div>\n                </Card>\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=\"bg-background absolute inset-0 m-auto flex size-12 items-center justify-center border-l border-t\">{children}</div>\n    </div>\n)\n",
      "type": "registry:component",
      "target": "components/features-3.tsx"
    }
  ]
}