{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"mist-features-3","type":"registry:block","title":"Features 3","description":"Tailark Mist features variant 3 block","registryDependencies":["@tailark-oss/mist-button","@tailark-oss/mist-card","@tailark-oss/mist-toggle-group"],"meta":{"aspect-ratio":"60/32","width":686,"height":366},"files":[{"path":"mist/blocks/features/three.tsx","type":"registry:component","target":"@components/features-3.tsx","content":"'use client'\nimport { cn } from '@/lib/utils'\nimport { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'\nimport { Bold, Calendar1, Ellipsis, Italic, Strikethrough, Underline } from 'lucide-react'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\n\nexport default function Features() {\n    return (\n        <section>\n            <div className=\"py-24\">\n                <div className=\"mx-auto w-full max-w-5xl px-6\">\n                    <div>\n                        <h2 className=\"text-foreground mt-4 text-4xl font-semibold\">Personal AI, with you Anywhere</h2>\n                        <p className=\"text-muted-foreground mb-12 mt-4 text-balance text-lg\">Quick AI lives a single hotkey away - ready to quickly appear as a floating window above your other apps. Get instant assistance whether you're browsing, coding, or writing documents.</p>\n                    </div>\n\n                    <div className=\"grid gap-4 sm:grid-cols-2\">\n                        <Card\n                            variant=\"soft\"\n                            className=\"p-6\"\n                        >\n                            <div className=\"flex aspect-video items-center justify-center\">\n                                <CodeIllustration className=\"w-full\" />\n                            </div>\n                            <div className=\"text-center\">\n                                <h3 className=\"text-foreground text-xl font-semibold\">Marketing Campaigns</h3>\n                                <p className=\"text-muted-foreground mt-4 text-balance text-lg\">Effortlessly plan and execute your marketing campaigns organized.</p>\n                            </div>\n                        </Card>\n                        <Card\n                            variant=\"soft\"\n                            className=\"p-6\"\n                        >\n                            <div className=\"flex aspect-video items-center justify-center\">\n                                <ScheduleIllustation className=\"border\" />\n                            </div>\n                            <div className=\"text-center\">\n                                <h3 className=\"text-foreground text-xl font-semibold\">AI Meeting Scheduler</h3>\n                                <p className=\"text-muted-foreground mt-4 text-balance text-lg\">Effortlessly book and manage your meetings. Stay on top of your schedule.</p>\n                            </div>\n                        </Card>\n                    </div>\n                </div>\n            </div>\n        </section>\n    )\n}\n\ntype IllustrationProps = {\n    className?: string\n    variant?: 'elevated' | 'outlined' | 'mixed'\n}\n\nexport const ScheduleIllustation = ({ className, variant = 'elevated' }: IllustrationProps) => {\n    return (\n        <div className={cn('relative', className)}>\n            <div\n                className={cn('bg-background -translate-x-1/8 absolute flex translate-y-[-110%] items-center gap-2 rounded-lg p-1', {\n                    'shadow-black-950/10 shadow-lg': variant === 'elevated',\n                    'border-foreground/10 border': variant === 'outlined',\n                    'border-foreground/10 border shadow-md shadow-black/5': variant === 'mixed',\n                })}\n            >\n                <Button\n                    size=\"sm\"\n                    className=\"rounded-sm\"\n                >\n                    <Calendar1 className=\"size-3\" />\n                    <span className=\"text-sm font-medium\">Schedule</span>\n                </Button>\n                <span className=\"bg-border block h-4 w-px\"></span>\n                <ToggleGroup\n                    type=\"multiple\"\n                    size=\"sm\"\n                    className=\"gap-0.5 *:rounded-md\"\n                >\n                    <ToggleGroupItem\n                        value=\"bold\"\n                        aria-label=\"Toggle bold\"\n                    >\n                        <Bold className=\"size-4\" />\n                    </ToggleGroupItem>\n                    <ToggleGroupItem\n                        value=\"italic\"\n                        aria-label=\"Toggle italic\"\n                    >\n                        <Italic className=\"size-4\" />\n                    </ToggleGroupItem>\n                    <ToggleGroupItem\n                        value=\"underline\"\n                        aria-label=\"Toggle underline\"\n                    >\n                        <Underline className=\"size-4\" />\n                    </ToggleGroupItem>\n                    <ToggleGroupItem\n                        value=\"strikethrough\"\n                        aria-label=\"Toggle strikethrough\"\n                    >\n                        <Strikethrough className=\"size-4\" />\n                    </ToggleGroupItem>\n                </ToggleGroup>\n                <span className=\"bg-border block h-4 w-px\"></span>\n                <Button\n                    size=\"icon\"\n                    className=\"size-8\"\n                    variant=\"ghost\"\n                >\n                    <Ellipsis className=\"size-3\" />\n                </Button>\n            </div>\n            <span>\n                <span className=\"bg-secondary text-secondary-foreground py-1\">Tomorrow 8:30 pm</span> is our priority.\n            </span>\n        </div>\n    )\n}\n\nexport const CodeIllustration = ({ className }: { className?: string }) => {\n    return (\n        <div className={cn('mask-[radial-gradient(ellipse_50%_50%_at_50%_50%,#000_50%,transparent_100%)]', className)}>\n            <ul className=\"text-muted-foreground mx-auto w-fit font-mono text-2xl font-medium\">\n                {['Images', 'Variables', 'Pages', 'Components', 'Styles'].map((item, index) => (\n                    <li\n                        key={index}\n                        className={cn(index == 2 && \"text-foreground before:absolute before:translate-x-[-110%] before:text-orange-500 before:content-['Import']\")}\n                    >\n                        {item}\n                    </li>\n                ))}\n            </ul>\n        </div>\n    )\n}\n"}]}