{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mist-content-2",
  "type": "registry:block",
  "title": "Content Two",
  "description": "Mist Kit Content block, variant two",
  "registryDependencies": [
    "toggle",
    "toggle-group"
  ],
  "files": [
    {
      "path": "../../packages/mist-kit/blocks/content/two/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'\n\nexport default function ContentSection() {\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                        <span className=\"text-primary\">Smart Editor</span>\n                        <h2 className=\"text-foreground mt-4 text-4xl font-semibold\">Ask Vengeance UI to Edit anything</h2>\n                        <p className=\"text-muted-foreground mb-12 mt-4 text-lg\">Efficient content creation is our mission. With Vengeance UI, you can effortlessly edit text, generate code snippets, format documents, create visualizations from data, and seamlessly integrate with your existing workflow.</p>\n                    </div>\n\n                    <div className=\"border-foreground/5 space-y-6 [--color-border:color-mix(in_oklab,var(--color-foreground)10%,transparent)] sm:space-y-0 sm:divide-y\">\n                        <div className=\"grid sm:grid-cols-5\">\n                            <CodeIllustration className=\"sm:col-span-2\" />\n                            <div className=\"mt-6 sm:col-span-3 sm:mt-0 sm:border-l sm:pl-12\">\n                                <h3 className=\"text-foreground text-xl font-semibold\">Marketing Campaigns</h3>\n                                <p className=\"text-muted-foreground mt-4 text-lg\">We'll put together your schedule on automatically. You'll keep app deadlines, and will work on the highest priority items first.</p>\n                            </div>\n                        </div>\n                        <div className=\"grid sm:grid-cols-5\">\n                            <div className=\"flex items-center justify-center pt-12 sm:col-span-2\">\n                                <ScheduleIllustation className=\"pt-8\" />\n                            </div>\n                            <div className=\"mt-6 sm:col-span-3 sm:mt-0 sm:border-l sm:pl-12 sm:pt-12\">\n                                <h3 className=\"text-foreground text-xl font-semibold\">AI Meeting Scheduler</h3>\n                                <p className=\"text-muted-foreground mt-4 text-lg\">Ask the chat to create or update your events. Ask it how much time you've spent on demo calls last week. Or have it prepare today's agendas.</p>\n                            </div>\n                        </div>\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/content-two.tsx"
    }
  ]
}