{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mist-features-9",
  "type": "registry:block",
  "title": "Features Nine",
  "description": "Mist Kit Features block, variant nine",
  "registryDependencies": [
    "card",
    "button"
  ],
  "files": [
    {
      "path": "../../packages/mist-kit/blocks/features/nine/index.tsx",
      "content": "import { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\nimport { ArrowUp, Globe, Play, Plus, Signature, Sparkles } from 'lucide-react'\n\nconst CREATOR_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-2xl px-6 lg:px-0\">\n                    <div>\n                        <h2 className=\"text-foreground text-balance text-center text-4xl font-semibold\">Empowering developers with AI-driven solutions</h2>\n                    </div>\n                    <div className=\"mt-16 space-y-12\">\n                        <div className=\"grid items-center gap-6 sm:grid-cols-5\">\n                            <Card\n                                variant=\"soft\"\n                                className=\"p-6 sm:col-span-2\">\n                                <MeetingIllustration />\n                            </Card>\n                            <div className=\"max-w-md sm:col-span-3\">\n                                <h3 className=\"text-foreground 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                            </div>\n                        </div>\n\n                        <div className=\"grid items-center gap-6 sm:grid-cols-5\">\n                            <Card\n                                variant=\"soft\"\n                                className=\"overflow-hidden p-6 sm:col-span-2 sm:overflow-clip\">\n                                <CodeReviewIllustration />\n                            </Card>\n                            <div className=\"max-w-md sm:col-span-3\">\n                                <h3 className=\"text-foreground 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                            </div>\n                        </div>\n\n                        <div className=\"grid items-center gap-6 sm:grid-cols-5\">\n                            <Card\n                                variant=\"soft\"\n                                className=\"overflow-hidden px-6 sm:col-span-2\">\n                                <div className=\"mask-b-from-75% -mx-2 -mt-2 px-2 pt-6\">\n                                    <AIAssistantIllustration />\n                                </div>\n                            </Card>\n                            <div className=\"max-w-md sm:col-span-3\">\n                                <h3 className=\"text-foreground 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                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </section>\n    )\n}\n\nconst MeetingIllustration = () => {\n    return (\n        <Card\n            aria-hidden\n            className=\"aspect-video p-4\">\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=\"h-10 w-8 rounded-md border bg-gradient-to-b from-zinc-100 to-zinc-200\"></div>\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: CREATOR_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                            <img\n                                className=\"aspect-square rounded-full object-cover\"\n                                src={avatar.src}\n                                alt={avatar.alt}\n                                height=\"460\"\n                                width=\"460\"\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\">\n            <Card className=\"aspect-video w-4/5 p-3 transition-transform duration-200 ease-in-out group-hover:-rotate-3\">\n                <div className=\"mb-3 grid grid-cols-[auto_1fr] gap-2\">\n                    <div className=\"bg-background size-6 rounded-full border p-0.5 shadow shadow-zinc-950/5\">\n                        <img\n                            className=\"aspect-square rounded-full object-cover\"\n                            src={CREATOR_AVATAR}\n                            alt=\"M Irung\"\n                            height=\"460\"\n                            width=\"460\"\n                        />\n                    </div>\n                    <div className=\"flex items-center gap-1\">\n                        <span className=\"text-muted-foreground line-clamp-1 text-sm font-medium\">Méschac Irung</span>\n\n                        <span className=\"text-muted-foreground/75 text-xs\">2m</span>\n                    </div>\n                </div>\n\n                <div className=\"ml-8 space-y-2\">\n                    <div className=\"bg-foreground/10 h-2 rounded-full\"></div>\n                    <div className=\"bg-foreground/10 h-2 w-3/5 rounded-full\"></div>\n                    <div className=\"bg-foreground/10 h-2 w-1/2 rounded-full\"></div>\n                </div>\n\n                <Signature className=\"ml-8 mt-3 size-5\" />\n            </Card>\n            <Card className=\"aspect-3/5 absolute right-0 top-4 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=\"aspect-video p-4 transition-transform duration-200 group-hover:translate-y-0\">\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                            <Plus />\n                        </Button>\n                        <Button\n                            variant=\"outline\"\n                            size=\"icon\"\n                            className=\"size-7 rounded-2xl bg-transparent shadow-none\">\n                            <Globe />\n                        </Button>\n                    </div>\n\n                    <Button\n                        size=\"icon\"\n                        className=\"size-7 rounded-2xl bg-black\">\n                        <ArrowUp strokeWidth={3} />\n                    </Button>\n                </div>\n            </div>\n        </Card>\n    )\n}\n",
      "type": "registry:component",
      "target": "components/features-nine.tsx"
    }
  ]
}