{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mist-features-7",
  "type": "registry:block",
  "title": "Features Seven",
  "description": "Mist Kit Features block, variant seven",
  "registryDependencies": [
    "card",
    "button"
  ],
  "files": [
    {
      "path": "../../packages/mist-kit/blocks/features/seven/index.tsx",
      "content": "import { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\nimport { ArrowUp, CalendarCheck, Globe, Layout, Play, Plus, Signature, Sparkles, Target } from 'lucide-react'\nimport Image from 'next/image'\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-5xl px-6\">\n                    <div className=\"grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3\">\n                        <Card\n                            variant=\"soft\"\n                            className=\"col-span-full overflow-hidden pl-6 pt-6\">\n                            <Layout 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 max-w-xl text-balance\">Our advanced AI models transform natural language into production-ready code, streamlining development workflows and enabling faster iteration. </p>\n                            <div className=\"mask-b-from-95% -ml-2 -mt-2 mr-0.5 pl-2 pt-2\">\n                                <div className=\"bg-background rounded-tl-(--radius) ring-foreground/5 relative mx-auto mt-8 h-96 overflow-hidden border border-transparent shadow ring-1\">\n                                    <Image\n                                        src=\"/mist/Vengeance UI-2.png\"\n                                        alt=\"app screen\"\n                                        width=\"2880\"\n                                        height=\"1842\"\n                                        className=\"object-top-left h-full object-cover\"\n                                    />\n                                </div>\n                            </div>\n                        </Card>\n                        <Card\n                            variant=\"soft\"\n                            className=\"overflow-hidden p-6\">\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                            <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                            <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            <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 mt-6\">\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                        <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                    <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\"></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 -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            <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-seven.tsx"
    }
  ]
}