{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"ecommerce-ecommerce-footers-with-newsletter","type":"registry:block","title":"With Newsletter","files":[{"path":"components/blocks/ecommerce/ecommerce-footers/with-newsletter.tsx","content":"import { Button } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nexport default function EcommerceFooterWithNewsletter() {\n  return (\n    <footer className=\"bg-muted/30 border-t px-4 py-8 md:py-12\">\n      <div className=\"container mx-auto max-w-7xl\">\n        <div className=\"grid gap-8 md:grid-cols-2 lg:grid-cols-5\">\n          {/* Company Info */}\n          <div className=\"space-y-4\">\n            <h3 className=\"text-lg font-semibold\">Company</h3>\n            <nav className=\"flex flex-col space-y-2\">\n              <a\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n              >\n                About Us\n              </a>\n              <a\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n              >\n                Careers\n              </a>\n              <a\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n              >\n                Press\n              </a>\n              <a\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n              >\n                Blog\n              </a>\n            </nav>\n          </div>\n\n          {/* Customer Service */}\n          <div className=\"space-y-4\">\n            <h3 className=\"text-lg font-semibold\">Support</h3>\n            <nav className=\"flex flex-col space-y-2\">\n              <a\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n              >\n                Help Center\n              </a>\n              <a\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n              >\n                Contact Us\n              </a>\n              <a\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n              >\n                Shipping Info\n              </a>\n              <a\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n              >\n                Returns\n              </a>\n            </nav>\n          </div>\n\n          {/* Shop Categories */}\n          <div className=\"space-y-4\">\n            <h3 className=\"text-lg font-semibold\">Shop</h3>\n            <nav className=\"flex flex-col space-y-2\">\n              <a\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n              >\n                New Arrivals\n              </a>\n              <a\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n              >\n                Best Sellers\n              </a>\n              <a\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n              >\n                Sale\n              </a>\n              <a\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n              >\n                Gift Cards\n              </a>\n            </nav>\n          </div>\n\n          {/* Legal */}\n          <div className=\"space-y-4\">\n            <h3 className=\"text-lg font-semibold\">Legal</h3>\n            <nav className=\"flex flex-col space-y-2\">\n              <a\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n              >\n                Privacy Policy\n              </a>\n              <a\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n              >\n                Terms of Service\n              </a>\n              <a\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n              >\n                Cookie Policy\n              </a>\n              <a\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n              >\n                Accessibility\n              </a>\n            </nav>\n          </div>\n\n          {/* Newsletter Signup */}\n          <div className=\"space-y-4 md:col-span-2 lg:col-span-1\">\n            <h3 className=\"text-lg font-semibold\">Stay Updated</h3>\n            <p className=\"text-muted-foreground text-sm\">\n              Get the latest deals and new product announcements.\n            </p>\n            <form className=\"space-y-3\">\n              <div className=\"space-y-2\">\n                <Label htmlFor=\"newsletter-email\" className=\"sr-only\">\n                  Email address\n                </Label>\n                <Input\n                  id=\"newsletter-email\"\n                  type=\"email\"\n                  placeholder=\"Enter your email\"\n                  className=\"w-full\"\n                  required\n                />\n              </div>\n              <Button type=\"submit\" className=\"w-full\">\n                Subscribe\n              </Button>\n            </form>\n          </div>\n        </div>\n\n        {/* Bottom Section */}\n        <div className=\"border-border mt-8 border-t pt-6\">\n          <div className=\"flex flex-col items-center justify-between gap-4 md:flex-row\">\n            <div className=\"flex items-center space-x-4\">\n              <a href=\"#\" className=\"text-xl font-bold\">\n                StoreName\n              </a>\n              <span className=\"text-muted-foreground text-sm\">\n                © 2024 All rights reserved\n              </span>\n            </div>\n            <div className=\"flex items-center space-x-4\">\n              <span className=\"text-muted-foreground text-sm\">Follow us:</span>\n              <div className=\"flex space-x-3\">\n                <a\n                  href=\"#\"\n                  className=\"text-muted-foreground hover:text-foreground transition-colors\"\n                >\n                  <span className=\"sr-only\">Facebook</span>\n                  <svg\n                    className=\"h-5 w-5\"\n                    fill=\"currentColor\"\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <path d=\"M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z\" />\n                  </svg>\n                </a>\n                <a\n                  href=\"#\"\n                  className=\"text-muted-foreground hover:text-foreground transition-colors\"\n                >\n                  <span className=\"sr-only\">Twitter</span>\n                  <svg\n                    className=\"h-5 w-5\"\n                    fill=\"currentColor\"\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <path d=\"M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z\" />\n                  </svg>\n                </a>\n                <a\n                  href=\"#\"\n                  className=\"text-muted-foreground hover:text-foreground transition-colors\"\n                >\n                  <span className=\"sr-only\">Instagram</span>\n                  <svg\n                    className=\"h-5 w-5\"\n                    fill=\"currentColor\"\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <path d=\"M12.017 0C5.396 0 .029 5.367.029 11.987c0 6.62 5.367 11.987 11.988 11.987 6.62 0 11.987-5.367 11.987-11.987C24.014 5.367 18.637.001 12.017.001zM8.449 16.988c-1.297 0-2.448-.49-3.323-1.297C4.198 14.895 3.708 13.744 3.708 12.447s.49-2.448 1.418-3.323C6.001 8.198 7.152 7.708 8.449 7.708s2.448.49 3.323 1.416c.875.875 1.365 2.026 1.365 3.323s-.49 2.448-1.365 3.323c-.875.807-2.026 1.218-3.323 1.218zm7.718 0c-1.297 0-2.448-.49-3.323-1.297-.875-.896-1.365-2.047-1.365-3.344s.49-2.448 1.365-3.323c.875-.875 2.026-1.365 3.323-1.365s2.448.49 3.323 1.365c.875.875 1.365 2.026 1.365 3.323s-.49 2.448-1.365 3.344c-.875.807-2.026 1.297-3.323 1.297z\" />\n                  </svg>\n                </a>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </footer>\n  );\n}\n","type":"registry:component","target":"components/blocks/ecommerce/ecommerce-footers/with-newsletter.tsx"},{"path":"components/ui/button.tsx","content":"import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline:\n          \"border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n        destructive:\n          \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5\",\n        lg: \"h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        icon: \"size-9\",\n        \"icon-xs\":\n          \"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n","type":"registry:ui","target":"components/ui/button.tsx"},{"path":"components/ui/input.tsx","content":"import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n","type":"registry:ui","target":"components/ui/input.tsx"},{"path":"components/ui/label.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Label as LabelPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Label({\n  className,\n  ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  return (\n    <LabelPrimitive.Root\n      data-slot=\"label\"\n      className={cn(\n        \"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Label }\n","type":"registry:ui","target":"components/ui/label.tsx"}],"description":"A footer pairing link columns with an email signup field and button. Captures subscribers for promotions and offers while customers browse your store.","dependencies":["class-variance-authority","radix-ui"]}