{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mist-features-11",
  "type": "registry:block",
  "title": "Features Eleven",
  "description": "Mist Kit Features block, variant eleven",
  "registryDependencies": [
    "card",
    "button"
  ],
  "files": [
    {
      "path": "../../packages/mist-kit/blocks/features/eleven/index.tsx",
      "content": "import { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\nimport { ArrowUp, Globe, Plus, Sparkles } from 'lucide-react'\n\nexport default function FeaturesSection() {\n    return (\n        <section>\n            <div className=\"py-24\">\n                <div className=\"mx-auto w-full max-w-3xl px-6\">\n                    <h2 className=\"text-foreground text-balance text-3xl font-semibold md:text-4xl\">\n                        <span className=\"text-muted-foreground\">Empowering Marketing teams with</span> AI-driven solutions\n                    </h2>\n                    <div className=\"@container mt-12 space-y-12\">\n                        <Card\n                            variant=\"soft\"\n                            className=\"relative overflow-hidden p-0 sm:col-span-2\">\n                            <img\n                                src=\"https://images.unsplash.com/photo-1635776062043-223faf322554?q=80&w=3132&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n                                alt=\"\"\n                                className=\"absolute inset-0 size-full object-cover\"\n                            />\n                            <div className=\"m-auto max-w-md p-4 sm:p-12\">\n                                <AIAssistantIllustration />\n                            </div>\n                        </Card>\n                        <div className=\"@sm:grid-cols-2 @2xl:grid-cols-3 grid gap-6\">\n                            <div className=\"space-y-2\">\n                                <h3 className=\"text-xl font-medium\">Generate Ideas</h3>\n                                <p className=\"text-muted-foreground\">Spark creativity with AI-powered content suggestions and inspiration.</p>\n                            </div>\n                            <div className=\"space-y-2\">\n                                <h3 className=\"text-xl font-medium\">Improve Writing</h3>\n                                <p className=\"text-muted-foreground\">Enhance your text with smart editing suggestions and style refinements.</p>\n                            </div>\n                            <div className=\"space-y-2\">\n                                <h3 className=\"text-xl font-medium\">Design Layouts</h3>\n                                <p className=\"text-muted-foreground\">Create visually appealing layouts that capture your audience's attention.</p>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </section>\n    )\n}\n\nconst AIAssistantIllustration = () => {\n    return (\n        <Card\n            aria-hidden\n            className=\"relative space-y-4 p-6\">\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                <ul\n                    role=\"list\"\n                    className=\"text-muted-foreground mt-3 space-y-2 text-sm\">\n                    {[\n                        { value: '90+', emoji: '⭐️', label: 'Integrations' },\n                        { value: '56%', emoji: '👨🏽‍💻', label: 'Productivity Boost' },\n                        { value: '24/7', emoji: '🦜', label: 'Customer Support' },\n                    ].map((stat, index) => (\n                        <li\n                            key={index}\n                            className=\"-ml-0.5 flex items-center gap-2\">\n                            <span>{stat.emoji}</span>\n                            <span className=\"text-foreground font-medium\">{stat.value}</span> {stat.label}\n                        </li>\n                    ))}\n                </ul>\n            </div>\n            <div className=\"bg-foreground/5 -mx-3 -mb-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-eleven.tsx"
    }
  ]
}