{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"mist-features-6","type":"registry:block","title":"Features 6","description":"Tailark Mist features variant 6 block","registryDependencies":["@tailark-oss/mist-button","@tailark-oss/mist-card"],"meta":{"aspect-ratio":"90/46","width":686,"height":351},"files":[{"path":"mist/blocks/features/six.tsx","type":"registry:component","target":"@components/features-6.tsx","content":"import { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\nimport { ArrowUp, CalendarCheck, Globe, Play, Plus, Signature, Sparkles, Target } from 'lucide-react'\nimport Image from 'next/image'\n\nconst MESCHAC_AVATAR = 'https://avatars.githubusercontent.com/u/47919550?v=4'\nconst BERNARD_AVATAR = 'https://avatars.githubusercontent.com/u/31113941?v=4'\nconst THEO_AVATAR = 'https://avatars.githubusercontent.com/u/68236786?v=4'\nconst GLODIE_AVATAR = 'https://avatars.githubusercontent.com/u/99137927?v=4'\n\nexport default function FeaturesSection() {\n    return (\n        <section>\n            <div className=\"py-24\">\n                <div className=\"mx-auto w-full max-w-5xl px-6\">\n                    <div>\n                        <h2 className=\"text-foreground max-w-2xl text-balance text-4xl font-semibold\">Empowering developers with AI-driven solutions</h2>\n                    </div>\n                    <div className=\"mt-16 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3\">\n                        <Card\n                            variant=\"soft\"\n                            className=\"overflow-hidden p-6\"\n                        >\n                            <Target className=\"text-primary size-5\" />\n                            <h3 className=\"text-foreground mt-5 text-lg font-semibold\">AI Code Generation</h3>\n                            <p className=\"text-muted-foreground mt-3 text-balance\">Our advanced AI models transform natural language into production-ready code.</p>\n\n                            <MeetingIllustration />\n                        </Card>\n\n                        <Card\n                            variant=\"soft\"\n                            className=\"group overflow-hidden px-6 pt-6\"\n                        >\n                            <CalendarCheck className=\"text-primary size-5\" />\n                            <h3 className=\"text-foreground mt-5 text-lg font-semibold\">Intelligent Code Review</h3>\n                            <p className=\"text-muted-foreground mt-3 text-balance\">Our AI analyzes your code for bugs, security issues, and optimization opportunities.</p>\n\n                            <CodeReviewIllustration />\n                        </Card>\n                        <Card\n                            variant=\"soft\"\n                            className=\"group overflow-hidden px-6 pt-6\"\n                        >\n                            <Sparkles className=\"text-primary size-5\" />\n                            <h3 className=\"text-foreground mt-5 text-lg font-semibold\">Contextual AI Assistant</h3>\n                            <p className=\"text-muted-foreground mt-3 text-balance\">A personalized AI companion that understands your codebase and helps solve complex...</p>\n\n                            <div className=\"mask-b-from-50 -mx-2 -mt-2 px-2 pt-2\">\n                                <AIAssistantIllustration />\n                            </div>\n                        </Card>\n                    </div>\n                </div>\n            </div>\n        </section>\n    )\n}\n\nconst MeetingIllustration = () => {\n    return (\n        <Card\n            aria-hidden\n            className=\"mt-9 aspect-video p-4\"\n        >\n            <div className=\"relative hidden h-fit\">\n                <div className=\"absolute -left-1.5 bottom-1.5 rounded-md border-t border-red-700 bg-red-500 px-1 py-px text-[10px] font-medium text-white shadow-md shadow-red-500/35\">PDF</div>\n                <div className=\"bg-linear-to-b h-10 w-8 rounded-md border from-zinc-100 to-zinc-200\" />\n            </div>\n            <div className=\"mb-0.5 text-sm font-semibold\">AI Strategy Meeting</div>\n            <div className=\"mb-4 flex gap-2 text-sm\">\n                <span className=\"text-muted-foreground\">2:30 - 3:45 PM</span>\n            </div>\n            <div className=\"mb-2 flex -space-x-1.5\">\n                <div className=\"flex -space-x-1.5\">\n                    {[\n                        { src: MESCHAC_AVATAR, alt: 'Méschac Irung' },\n                        { src: BERNARD_AVATAR, alt: 'Bernard Ngandu' },\n                        { src: THEO_AVATAR, alt: 'Théo Balick' },\n                        { src: GLODIE_AVATAR, alt: 'Glodie Lukose' },\n                    ].map((avatar, index) => (\n                        <div\n                            key={index}\n                            className=\"bg-background size-7 rounded-full border p-0.5 shadow shadow-zinc-950/5\"\n                        >\n                            <Image\n                                className=\"aspect-square rounded-full object-cover\"\n                                src={avatar.src}\n                                alt={avatar.alt}\n                                height=\"32\"\n                                width=\"32\"\n                            />\n                        </div>\n                    ))}\n                </div>\n            </div>\n            <div className=\"text-muted-foreground text-sm font-medium\">ML Pipeline Discussion</div>\n        </Card>\n    )\n}\n\nconst CodeReviewIllustration = () => {\n    return (\n        <div\n            aria-hidden\n            className=\"relative mt-6\"\n        >\n            <Card className=\"aspect-video w-4/5 translate-y-4 p-3 transition-transform duration-200 ease-in-out group-hover:-rotate-3\">\n                <div className=\"mb-3 flex items-center gap-2\">\n                    <div className=\"bg-background size-6 rounded-full border p-0.5 shadow shadow-zinc-950/5\">\n                        <Image\n                            className=\"aspect-square rounded-full object-cover\"\n                            src={MESCHAC_AVATAR}\n                            alt=\"M Irung\"\n                            height=\"32\"\n                            width=\"32\"\n                        />\n                    </div>\n                    <span className=\"text-muted-foreground text-sm font-medium\">Méschac Irung</span>\n\n                    <span className=\"text-muted-foreground/75 text-xs\">2m</span>\n                </div>\n\n                <div className=\"ml-8 space-y-2\">\n                    <div className=\"bg-foreground/10 h-2 rounded-full\" />\n                    <div className=\"bg-foreground/10 h-2 w-3/5 rounded-full\" />\n                    <div className=\"bg-foreground/10 h-2 w-1/2 rounded-full\" />\n                </div>\n\n                <Signature className=\"ml-8 mt-3 size-5\" />\n            </Card>\n            <Card className=\"aspect-3/5 absolute -top-4 right-0 flex w-2/5 translate-y-4 p-2 transition-transform duration-200 ease-in-out group-hover:rotate-3\">\n                <div className=\"bg-foreground/5 m-auto flex size-10 rounded-full\">\n                    <Play className=\"fill-foreground/50 stroke-foreground/50 m-auto size-4\" />\n                </div>\n            </Card>\n        </div>\n    )\n}\n\nconst AIAssistantIllustration = () => {\n    return (\n        <Card\n            aria-hidden\n            className=\"mt-6 aspect-video translate-y-4 p-4 pb-6 transition-transform duration-200 group-hover:translate-y-0\"\n        >\n            <div className=\"w-fit\">\n                <Sparkles className=\"size-3.5 fill-purple-300 stroke-purple-300\" />\n                <p className=\"mt-2 line-clamp-2 text-sm\">How can I optimize my neural network to reduce inference time while maintaining accuracy?</p>\n            </div>\n            <div className=\"bg-foreground/5 -mx-3 -mb-3 mt-3 space-y-3 rounded-lg p-3\">\n                <div className=\"text-muted-foreground text-sm\">Ask AI Assistant</div>\n\n                <div className=\"flex justify-between\">\n                    <div className=\"flex gap-2\">\n                        <Button\n                            variant=\"outline\"\n                            size=\"icon\"\n                            className=\"size-7 rounded-2xl bg-transparent shadow-none\"\n                        >\n                            <Plus />\n                        </Button>\n                        <Button\n                            variant=\"outline\"\n                            size=\"icon\"\n                            className=\"size-7 rounded-2xl bg-transparent shadow-none\"\n                        >\n                            <Globe />\n                        </Button>\n                    </div>\n\n                    <Button\n                        size=\"icon\"\n                        className=\"size-7 rounded-2xl bg-black\"\n                    >\n                        <ArrowUp strokeWidth={3} />\n                    </Button>\n                </div>\n            </div>\n        </Card>\n    )\n}\n"}]}