{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"mist-content-4","type":"registry:block","title":"Content 4","description":"Tailark Mist content variant 4 block","meta":{"aspect-ratio":"90/45","width":686,"height":343},"files":[{"path":"mist/blocks/content/four.tsx","type":"registry:component","target":"@components/content-4.tsx","content":"import { ArrowRight } from 'lucide-react'\n\nexport default function ContentSection() {\n    return (\n        <section>\n            <div className=\"py-24\">\n                <div className=\"mx-auto w-full max-w-5xl px-6\">\n                    <div className=\"@container mx-auto max-w-2xl\">\n                        <div>\n                            <h2 className=\"text-foreground text-4xl font-semibold\">Create Content with AI Assistance</h2>\n                            <p className=\"text-muted-foreground mb-12 mt-4 text-xl\">Our AI assistant helps you create better content faster. Generate ideas, improve your writing, and design layouts with simple prompts.</p>\n                        </div>\n\n                        <div className=\"@sm:grid-cols-2 @2xl:grid-cols-3 my-12 grid gap-6\">\n                            <div className=\"space-y-2\">\n                                <span className=\"mb-4 block text-3xl\">💡</span>\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                                <span className=\"mb-4 block text-3xl\">✏️</span>\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                                <span className=\"mb-4 block text-3xl\">🎨</span>\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\n                        <div className=\"border-t\">\n                            <ul\n                                role=\"list\"\n                                className=\"text-muted-foreground mt-8 space-y-2\"\n                            >\n                                {[\n                                    { value: '90+', label: 'Integrations' },\n                                    { value: '56%', label: 'Productivity Boost' },\n                                    { value: '24/7', label: 'Customer Support' },\n                                    { value: '10k+', label: 'Active Users' },\n                                ].map((stat, index) => (\n                                    <li\n                                        key={index}\n                                        className=\"-ml-0.5 flex items-center gap-1.5\"\n                                    >\n                                        <ArrowRight className=\"size-4 opacity-50\" />\n                                        <span className=\"text-foreground font-medium\">{stat.value}</span> {stat.label}\n                                    </li>\n                                ))}\n                            </ul>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </section>\n    )\n}\n"}]}