{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "features-11",
  "type": "registry:block",
  "title": "Features 11",
  "description": "Feature cards combining screenshots, integration logos and a command hint.",
  "registryDependencies": [
    "card"
  ],
  "files": [
    {
      "path": "app/preview/features/eleven/page.tsx",
      "content": "import { Card, CardContent, CardHeader } from '@/components/ui/card'\nimport { Globe } from 'lucide-react'\nimport Image from 'next/image'\n\nexport default function Features() {\n    return (\n        <section className=\"dark:bg-muted/25 bg-zinc-50 py-16 md:py-32\">\n            <div className=\"mx-auto max-w-5xl px-6\">\n                <div className=\"mx-auto grid gap-2 sm:grid-cols-5\">\n                    <Card className=\"group overflow-hidden shadow-zinc-950/5 sm:col-span-3 sm:rounded-none sm:rounded-tl-xl\">\n                        <CardHeader>\n                            <div className=\"md:p-6\">\n                                <p className=\"font-medium\">Advanced tracking system</p>\n                                <p className=\"text-muted-foreground mt-3 max-w-sm text-sm\">Quick AI lives a single hotkey away - ready to quickly appear as a floating window above your other apps..</p>\n                            </div>\n                        </CardHeader>\n\n                        <div className=\"relative h-fit pl-6 md:pl-12\">\n                            <div className=\"absolute -inset-6 [background:radial-gradient(75%_95%_at_50%_0%,transparent,var(--color-background)_100%)]\"></div>\n\n                            <div className=\"bg-background overflow-hidden rounded-tl-lg border-l border-t pl-2 pt-2 dark:bg-zinc-950\">\n                                <Image\n                                    src=\"/mail2.png\"\n                                    className=\"hidden dark:block\"\n                                    alt=\"payments illustration dark\"\n                                    width={1207}\n                                    height={929}\n                                />\n                                <Image\n                                    src=\"/mail2-light.png\"\n                                    className=\"shadow dark:hidden\"\n                                    alt=\"payments illustration light\"\n                                    width={1207}\n                                    height={929}\n                                />\n                            </div>\n                        </div>\n                    </Card>\n\n                    <Card className=\"group overflow-hidden shadow-zinc-950/5 sm:col-span-2 sm:rounded-none sm:rounded-tr-xl\">\n                        <p className=\"mx-auto my-6 max-w-md text-balance px-6 text-center text-lg font-semibold sm:text-2xl md:p-6\">Advanced UX, Instantly locate all your assets.</p>\n\n                        <CardContent className=\"mt-auto h-fit\">\n                            <div className=\"relative mb-6 sm:mb-0\">\n                                <div className=\"absolute -inset-6 [background:radial-gradient(50%_75%_at_75%_50%,transparent,var(--color-background)_100%)]\"></div>\n                                <div className=\"aspect-76/59 overflow-hidden rounded-r-lg border\">\n                                    <Image\n                                        src=\"/origin-cal-dark.png\"\n                                        className=\"hidden dark:block\"\n                                        alt=\"payments illustration dark\"\n                                        width={1207}\n                                        height={929}\n                                    />\n                                    <Image\n                                        src=\"/origin-cal.png\"\n                                        className=\"shadow dark:hidden\"\n                                        alt=\"payments illustration light\"\n                                        width={1207}\n                                        height={929}\n                                    />\n                                </div>\n                            </div>\n                        </CardContent>\n                    </Card>\n                    <Card className=\"group p-6 shadow-zinc-950/5 sm:col-span-2 sm:rounded-none sm:rounded-bl-xl md:p-12\">\n                        <p className=\"mx-auto mb-12 max-w-md text-balance text-center text-lg font-semibold sm:text-2xl\">Advanced UX, Instantly locate all your assets.</p>\n\n                        <div className=\"flex justify-center gap-6\">\n                            <div className=\"inset-shadow-sm dark:inset-shadow-white/5 bg-muted/35 relative flex aspect-square size-16 items-center rounded-[7px] border p-3 shadow-lg ring dark:shadow-white/5 dark:ring-black\">\n                                <span className=\"absolute right-2 top-1 block text-sm\">fn</span>\n                                <Globe className=\"mt-auto size-4\" />\n                            </div>\n                            <div className=\"inset-shadow-sm dark:inset-shadow-white/5 bg-muted/35 flex aspect-square size-16 items-center justify-center rounded-[7px] border p-3 shadow-lg ring dark:shadow-white/5 dark:ring-black\">\n                                <span>K</span>\n                            </div>\n                        </div>\n                    </Card>\n                    <Card className=\"group relative shadow-zinc-950/5 sm:col-span-3 sm:rounded-none sm:rounded-br-xl\">\n                        <CardHeader className=\"p-6 md:p-12\">\n                            <p className=\"font-medium\">Advanced tracking system</p>\n                            <p className=\"text-muted-foreground mt-2 max-w-sm text-sm\">Quick AI lives a single hotkey away apps..</p>\n                        </CardHeader>\n                        <CardContent className=\"relative h-fit px-6 pb-6 md:px-12 md:pb-12\">\n                            <div className=\"grid grid-cols-4 gap-2 md:grid-cols-6\">\n                                <div className=\"rounded-(--radius) aspect-square border border-dashed\"></div>\n                                <div className=\"rounded-(--radius) bg-muted/50 flex aspect-square items-center justify-center border p-4\">\n                                    <img\n                                        className=\"m-auto size-8 invert dark:invert-0\"\n                                        src=\"https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/linear.svg\"\n                                        alt=\"Linear logo\"\n                                        width=\"32\"\n                                        height=\"32\"\n                                    />\n                                </div>\n                                <div className=\"rounded-(--radius) aspect-square border border-dashed\"></div>\n                                <div className=\"rounded-(--radius) bg-muted/50 flex aspect-square items-center justify-center border p-4\">\n                                    <img\n                                        className=\"m-auto size-8 invert dark:invert-0\"\n                                        src=\"https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/netlify.svg\"\n                                        alt=\"Netlify logo\"\n                                        width=\"32\"\n                                        height=\"32\"\n                                    />\n                                </div>\n                                <div className=\"rounded-(--radius) aspect-square border border-dashed\"></div>\n                                <div className=\"rounded-(--radius) bg-muted/50 flex aspect-square items-center justify-center border p-4\">\n                                    <img\n                                        className=\"m-auto size-8 invert dark:invert-0\"\n                                        src=\"https://cdn.jsdelivr.net/npm/simple-icons@16.32.0/icons/github.svg\"\n                                        alt=\"github logo\"\n                                        width=\"32\"\n                                        height=\"32\"\n                                    />\n                                </div>\n                            </div>\n                        </CardContent>\n                    </Card>\n                </div>\n            </div>\n        </section>\n    )\n}\n",
      "type": "registry:component",
      "target": "components/features-11.tsx"
    }
  ]
}