{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mist-features-5",
  "type": "registry:block",
  "title": "Features Five",
  "description": "Mist Kit Features block, variant five",
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "../../packages/mist-kit/blocks/features/five/index.tsx",
      "content": "import { Button } from '@/components/ui/button'\nimport { CalendarCheck, ChevronRight, Target } from 'lucide-react'\nimport Image from 'next/image'\nimport Link from 'next/link'\n\nexport default function FeaturesSection() {\n    return (\n        <section>\n            <div className=\"bg-muted/50 py-24\">\n                <div className=\"mx-auto w-full max-w-5xl px-6\">\n                    <div className=\"grid gap-12 md:grid-cols-5\">\n                        <div className=\"md:col-span-2\">\n                            <h2 className=\"text-foreground text-balance text-4xl font-semibold\">The AI Coding Assistant that helps you write code faster</h2>\n                            <Button\n                                className=\"mt-8 pr-2\"\n                                variant=\"outline\"\n                                asChild>\n                                <Link href=\"#\">\n                                    Learn more\n                                    <ChevronRight className=\"size-4 opacity-50\" />\n                                </Link>\n                            </Button>\n                        </div>\n\n                        <div className=\"space-y-6 md:col-span-3 md:space-y-10\">\n                            <div>\n                                <div className=\"flex items-center gap-2\">\n                                    <Target className=\"size-5\" />\n                                    <h3 className=\"text-foreground text-lg font-semibold\">Code Generation</h3>\n                                </div>\n                                <p className=\"text-muted-foreground mt-3 text-balance\">Just describe the code you want to write and we'll generate it for you. From boilerplate code to complex business logic, we've got you covered.</p>\n                            </div>\n\n                            <div>\n                                <div className=\"flex items-center gap-2\">\n                                    <CalendarCheck className=\"size-5\" />\n                                    <h3 className=\"text-foreground text-lg font-semibold\">Code Review</h3>\n                                </div>\n                                <p className=\"text-muted-foreground mt-3 text-balance\">Get instant feedback on your code. Our AI will review your code and suggest improvements in terms of best practices and performance.</p>\n                            </div>\n                        </div>\n                    </div>\n\n                    <div className=\"relative -mx-12 mt-16 px-12\">\n                        <div className=\"bg-background rounded-(--radius) relative mx-auto overflow-hidden border border-transparent shadow-lg shadow-black/10 ring-1 ring-black/10\">\n                            <Image\n                                src=\"/mist/Vengeance UI-2.png\"\n                                alt=\"app screen\"\n                                width=\"2880\"\n                                height=\"1842\"\n                            />\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </section>\n    )\n}\n",
      "type": "registry:component",
      "target": "components/features-five.tsx"
    }
  ]
}