{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "features-12",
  "title": "Features 12",
  "description": "A simple features block",
  "files": [
    {
      "path": "src/registry/blocks/radix/features-12/components/features.tsx",
      "content": "import {\n  ArrowUpRight,\n  Cable,\n  Code,\n  Contrast,\n  MonitorSmartphone,\n  Smile,\n  SquareDashedMousePointer,\n  Zap,\n} from \"lucide-react\";\nimport Link from \"next/link\";\nimport { Button } from \"@/registry/bases/radix/ui/button\";\n\nconst features = [\n  {\n    title: \"Blazing Fast Performance\",\n    description:\n      \"Optimized for speed with minimal loading times and instant interactions, ensuring a smooth experience across devices.\",\n    icon: Zap,\n  },\n  {\n    title: \"Fully Customizable\",\n    description:\n      \"Tailor every component to match your brand or workflow — with built-in support for themes, layouts, and configurations.\",\n    icon: SquareDashedMousePointer,\n  },\n  {\n    title: \"Developer-Friendly\",\n    description:\n      \"Built with clean, modern code and best practices in mind, making it easy to integrate, extend, and scale.\",\n    icon: Code,\n  },\n  {\n    title: \"Responsive by Default\",\n    description:\n      \"Every component is designed to look great on all screen sizes — no extra work needed to make things mobile-friendly.\",\n    icon: MonitorSmartphone,\n  },\n  {\n    title: \"Accessible for Everyone\",\n    description:\n      \"Built with accessibility best practices in mind to ensure an inclusive experience for all users, regardless of ability.\",\n    icon: Contrast,\n  },\n  {\n    title: \"Seamless Integration\",\n    description:\n      \"Easily connect with your favorite tools, APIs, and services — whether it's authentication, databases, or third-party libraries.\",\n    icon: Cable,\n  },\n];\n\nconst Features = () => {\n  return (\n    <div className=\"mx-auto flex max-w-7xl flex-col px-6 py-20\">\n      <h2 className=\"text-pretty text-center font-medium text-4xl tracking-[-0.04em] sm:text-[2.75rem]\">\n        Designed to scale\n      </h2>\n      <p className=\"mt-3 text-center text-muted-foreground text-xl -tracking-[0.01em] sm:text-2xl\">\n        Spend less time configuring and more time creating\n      </p>\n\n      <div className=\"mt-20 grid grid-cols-1 bg-card sm:grid-cols-2 lg:grid-cols-3\">\n        <div className=\"-mr-px flex h-16 items-center border px-6 font-medium text-lg sm:col-span-2 md:col-span-1\">\n          <Smile className=\"mr-4 text-primary\" /> Features that make you happy\n        </div>\n        <div className=\"-mr-px hidden h-16 border bg-[repeating-linear-gradient(315deg,var(--muted)_0,var(--muted)_1px,transparent_0,transparent_50%)] bg-size-[10px_10px] bg-fixed md:block lg:col-span-2\" />\n        {features.map((feature, index) => (\n          <div\n            className=\"-mt-px -mr-px border border-border/75 px-5 pt-7 pb-5\"\n            key={index}\n          >\n            <div className=\"flex items-center gap-3\">\n              <div className=\"flex h-8 w-8 items-center justify-center rounded-lg bg-primary/7 text-primary dark:bg-primary/10\">\n                <feature.icon className=\"h-5 w-5\" />\n              </div>\n              <h3 className=\"font-medium text-lg tracking-[-0.005em]\">\n                {feature.title}\n              </h3>\n            </div>\n            <p className=\"mt-4 text-foreground/80\">{feature.description}</p>\n\n            <Button asChild className=\"mt-4 px-0!\" variant=\"link\">\n              <Link href=\"#\" target=\"_blank\">\n                Learn more <ArrowUpRight />\n              </Link>\n            </Button>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default Features;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}