{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"mist-features-11","type":"registry:block","title":"Features 11","description":"Tailark Mist features variant 11 block","registryDependencies":["@tailark-oss/mist-button","@tailark-oss/mist-card"],"meta":{"aspect-ratio":"72/43","width":686,"height":410},"files":[{"path":"mist/blocks/features/eleven.tsx","type":"registry:component","target":"@components/features-11.tsx","content":"import { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\nimport { ArrowUp, Globe, Plus, Sparkles } from 'lucide-react'\nimport Image from 'next/image'\n\nexport default function Features() {\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                        >\n                            <Image\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=\"AI Assistant Illustration background\"\n                                width=\"3132\"\n                                height=\"2235\"\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        >\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                    {[\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                        >\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                        >\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"}]}