{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"mist-features-5","type":"registry:block","title":"Features 5","description":"Tailark Mist features variant 5 block","registryDependencies":["@tailark-oss/mist-button"],"meta":{"aspect-ratio":"72/53","width":686,"height":505},"files":[{"path":"mist/blocks/features/five.tsx","type":"registry:component","target":"@components/features-5.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 Features() {\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                            >\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/tailark-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"}]}