{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "footer-5",
  "type": "registry:block",
  "title": "Footer 5",
  "description": "Footer with a newsletter form, link groups and social links.",
  "registryDependencies": [
    "button",
    "input",
    "label"
  ],
  "files": [
    {
      "path": "app/preview/footer/five/page.tsx",
      "content": "import React from 'react'\nimport Link from 'next/link'\nimport { Button } from '@/components/ui/button'\nimport { Label } from '@/components/ui/label'\nimport { Input } from '@/components/ui/input'\nimport { Logo } from '@/components/logo'\n\nconst enterpriseLinks = [\n    { href: '#', label: 'About' },\n    { href: '#', label: 'Customers' },\n    { href: '#', label: 'Enterprise' },\n    { href: '#', label: 'Partners' },\n    { href: '#', label: 'Jobs' },\n]\n\nconst productLinks = [\n    { href: '#', label: 'Security' },\n    { href: '#', label: 'Customization' },\n    { href: '#', label: 'Enterprise' },\n    { href: '#', label: 'Partners' },\n]\n\nconst docsLinks = [\n    { href: '#', label: 'Introduction' },\n    { href: '#', label: 'Installation' },\n    { href: '#', label: 'Utils' },\n    { href: '#', label: 'Principles' },\n    { href: '#', label: 'Jargon' },\n    { href: '#', label: 'Plugin' },\n    { href: '#', label: 'Customizer' },\n    { href: '#', label: 'Boilerplates' },\n]\n\nconst communityLinks = [\n    { href: '#', label: 'GitHub' },\n    { href: '#', label: 'Discord' },\n    { href: '#', label: 'Slack' },\n    { href: '#', label: 'X / Twitter' },\n]\n\nconst footerLinks = [\n    {\n        name: 'Enterprise',\n        links: enterpriseLinks,\n    },\n    {\n        name: 'Product',\n        links: productLinks,\n    },\n    {\n        name: 'Docs',\n        links: docsLinks,\n    },\n]\n\nexport default function Footer() {\n    return (\n        <footer className=\"m-1 rounded-3xl border\">\n            <div className=\"mx-auto max-w-5xl space-y-16 px-5 py-16\">\n                <div className=\"flex flex-wrap items-center justify-between gap-4 border-b pb-8\">\n                    <Link href=\"/\" aria-label=\"go home\">\n                        <Logo />\n                    </Link>\n                    <div className=\"flex gap-3\">\n                        <Link href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Threads\" className=\"text-muted-foreground hover:text-primary block\">\n                            <svg className=\"size-6\" xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\">\n                                <path fill=\"none\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"1.5\" d=\"M19.25 8.505c-1.577-5.867-7-5.5-7-5.5s-7.5-.5-7.5 8.995s7.5 8.996 7.5 8.996s4.458.296 6.5-3.918c.667-1.858.5-5.573-6-5.573c0 0-3 0-3 2.5c0 .976 1 2 2.5 2s3.171-1.027 3.5-3c1-6-4.5-6.5-6-4\" color=\"currentColor\"></path>\n                            </svg>\n                        </Link>\n                        <Link href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Instagram\" className=\"text-muted-foreground hover:text-primary block\">\n                            <svg className=\"size-6\" xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\">\n                                <path\n                                    fill=\"currentColor\"\n                                    d=\"M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3\"></path>\n                            </svg>\n                        </Link>\n                        <Link href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"TikTok\" className=\"text-muted-foreground hover:text-primary block\">\n                            <svg className=\"size-6\" xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\">\n                                <path fill=\"currentColor\" d=\"M16.6 5.82s.51.5 0 0A4.28 4.28 0 0 1 15.54 3h-3.09v12.4a2.59 2.59 0 0 1-2.59 2.5c-1.42 0-2.6-1.16-2.6-2.6c0-1.72 1.66-3.01 3.37-2.48V9.66c-3.45-.46-6.47 2.22-6.47 5.64c0 3.33 2.76 5.7 5.69 5.7c3.14 0 5.69-2.55 5.69-5.7V9.01a7.35 7.35 0 0 0 4.3 1.38V7.3s-1.88.09-3.24-1.48\"></path>\n                            </svg>\n                        </Link>\n                    </div>\n                </div>\n                <div className=\"grid grid-cols-2 gap-6 sm:grid-cols-4\">\n                    {footerLinks.map((linksGroup, index) => (\n                        <div key={index}>\n                            <span className=\"font-medium\">{linksGroup.name}</span>\n                            <ul className=\"mt-4 list-inside space-y-4\">\n                                {linksGroup.links.map((link, index) => (\n                                    <li key={index}>\n                                        <Link href={link.href} className=\"hover:text-primary text-muted-foreground text-sm duration-150\">\n                                            {link.label}\n                                        </Link>\n                                    </li>\n                                ))}\n                            </ul>\n                        </div>\n                    ))}\n                    <div>\n                        <span className=\"text-sm font-medium\">Community</span>\n                        <ul className=\"mt-4 list-inside space-y-4\">\n                            {communityLinks.map((link, index) => (\n                                <li key={index}>\n                                    <Link href={link.href} className=\"hover:text-primary text-muted-foreground text-sm duration-150\">\n                                        {link.label}\n                                    </Link>\n                                </li>\n                            ))}\n                        </ul>\n\n                        <form className=\"mt-12 w-full max-w-xs\">\n                            <div className=\"space-y-2.5\">\n                                <Label className=\"block text-sm font-medium\" htmlFor=\"email\">\n                                    Subscribe to our newsletter\n                                </Label>\n                                <Input className=\"input variant-mixed sz-md\" placeholder=\"Your email\" type=\"email\" id=\"email\" required name=\"email\" />\n                            </div>\n                            <Button type=\"submit\" className=\"mt-3\">\n                                <span>Subscribe</span>\n                            </Button>\n                        </form>\n                    </div>\n                </div>\n                <div className=\"bg-muted mt-16 flex items-center justify-between rounded-md p-4 px-6 py-3\">\n                    <span className=\"text-title\">&copy; {new Date().getFullYear()} Lyra</span>\n                    <Link href=\"#\" className=\"text-muted-foreground hover:text-primary text-sm\">\n                        Licence\n                    </Link>\n                </div>\n            </div>\n        </footer>\n    )\n}\n",
      "type": "registry:component",
      "target": "components/footer.tsx"
    },
    {
      "path": "components/logo.tsx",
      "content": "import { cn } from '@/lib/utils'\n\n/**\n * Brand mark: four blocks, two squared and two rounded, stacked on a grid.\n * Purely presentational — wrap it in your own <Link> where it should navigate.\n */\nexport function Logo({ className }: { className?: string }) {\n    return (\n        <svg\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            aria-hidden=\"true\"\n            className={cn('size-6 text-foreground', className)}>\n            <rect\n                x=\"2\"\n                y=\"2\"\n                width=\"9\"\n                height=\"9\"\n                rx=\"2.25\"\n                fill=\"currentColor\"\n            />\n            <rect\n                x=\"13\"\n                y=\"2\"\n                width=\"9\"\n                height=\"9\"\n                rx=\"4.5\"\n                fill=\"currentColor\"\n                fillOpacity=\".3\"\n            />\n            <rect\n                x=\"2\"\n                y=\"13\"\n                width=\"9\"\n                height=\"9\"\n                rx=\"4.5\"\n                fill=\"currentColor\"\n                fillOpacity=\".3\"\n            />\n            <rect\n                x=\"13\"\n                y=\"13\"\n                width=\"9\"\n                height=\"9\"\n                rx=\"2.25\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n",
      "type": "registry:component"
    }
  ]
}