{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mist-features-4",
  "type": "registry:block",
  "title": "Features Four",
  "description": "Mist Kit Features block, variant four",
  "registryDependencies": [
    "card",
    "toggle",
    "toggle-group"
  ],
  "files": [
    {
      "path": "../../packages/mist-kit/blocks/features/four/index.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 FeaturesSection() {\n    return (\n        <section>\n            <div className=\"bg-muted/50 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 className=\"p-6\">\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 className=\"p-6\">\n                            <div className=\"flex aspect-video items-center justify-center\">\n                                <ScheduleIllustation\n                                    className=\"border\"\n                                    variant=\"mixed\"\n                                />\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                <Button\n                    size=\"sm\"\n                    className=\"rounded-sm\">\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                    <ToggleGroupItem\n                        value=\"bold\"\n                        aria-label=\"Toggle bold\">\n                        <Bold className=\"size-4\" />\n                    </ToggleGroupItem>\n                    <ToggleGroupItem\n                        value=\"italic\"\n                        aria-label=\"Toggle italic\">\n                        <Italic className=\"size-4\" />\n                    </ToggleGroupItem>\n                    <ToggleGroupItem\n                        value=\"underline\"\n                        aria-label=\"Toggle underline\">\n                        <Underline className=\"size-4\" />\n                    </ToggleGroupItem>\n                    <ToggleGroupItem\n                        value=\"strikethrough\"\n                        aria-label=\"Toggle strikethrough\">\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                    <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-image: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                        {item}\n                    </li>\n                ))}\n            </ul>\n        </div>\n    )\n}\n",
      "type": "registry:component",
      "target": "components/features-four.tsx"
    }
  ]
}