{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"ecommerce-ecommerce-footers-with-payments","type":"registry:block","title":"With Payments","files":[{"path":"components/blocks/ecommerce/ecommerce-footers/with-payments.tsx","content":"import { CreditCard, Smartphone } from 'lucide-react';\n\nexport default function EcommerceFooterWithPayments() {\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 grid-cols-2 gap-8 md:grid-cols-4 lg:grid-cols-5\">\n          {/* Company */}\n          <div className=\"space-y-3\">\n            <h3 className=\"text-foreground font-semibold\">Company</h3>\n            <ul className=\"space-y-2 text-sm\">\n              <li>\n                <a\n                  href=\"#\"\n                  className=\"text-muted-foreground hover:text-foreground transition-colors\"\n                >\n                  About Us\n                </a>\n              </li>\n              <li>\n                <a\n                  href=\"#\"\n                  className=\"text-muted-foreground hover:text-foreground transition-colors\"\n                >\n                  Careers\n                </a>\n              </li>\n              <li>\n                <a\n                  href=\"#\"\n                  className=\"text-muted-foreground hover:text-foreground transition-colors\"\n                >\n                  Press\n                </a>\n              </li>\n              <li>\n                <a\n                  href=\"#\"\n                  className=\"text-muted-foreground hover:text-foreground transition-colors\"\n                >\n                  Contact\n                </a>\n              </li>\n            </ul>\n          </div>\n\n          {/* Customer Service */}\n          <div className=\"space-y-3\">\n            <h3 className=\"text-foreground font-semibold\">Support</h3>\n            <ul className=\"space-y-2 text-sm\">\n              <li>\n                <a\n                  href=\"#\"\n                  className=\"text-muted-foreground hover:text-foreground transition-colors\"\n                >\n                  Help Center\n                </a>\n              </li>\n              <li>\n                <a\n                  href=\"#\"\n                  className=\"text-muted-foreground hover:text-foreground transition-colors\"\n                >\n                  Shipping Info\n                </a>\n              </li>\n              <li>\n                <a\n                  href=\"#\"\n                  className=\"text-muted-foreground hover:text-foreground transition-colors\"\n                >\n                  Returns\n                </a>\n              </li>\n              <li>\n                <a\n                  href=\"#\"\n                  className=\"text-muted-foreground hover:text-foreground transition-colors\"\n                >\n                  Size Guide\n                </a>\n              </li>\n            </ul>\n          </div>\n\n          {/* Shop */}\n          <div className=\"space-y-3\">\n            <h3 className=\"text-foreground font-semibold\">Shop</h3>\n            <ul className=\"space-y-2 text-sm\">\n              <li>\n                <a\n                  href=\"#\"\n                  className=\"text-muted-foreground hover:text-foreground transition-colors\"\n                >\n                  New Arrivals\n                </a>\n              </li>\n              <li>\n                <a\n                  href=\"#\"\n                  className=\"text-muted-foreground hover:text-foreground transition-colors\"\n                >\n                  Best Sellers\n                </a>\n              </li>\n              <li>\n                <a\n                  href=\"#\"\n                  className=\"text-muted-foreground hover:text-foreground transition-colors\"\n                >\n                  Sale\n                </a>\n              </li>\n              <li>\n                <a\n                  href=\"#\"\n                  className=\"text-muted-foreground hover:text-foreground transition-colors\"\n                >\n                  Gift Cards\n                </a>\n              </li>\n            </ul>\n          </div>\n\n          {/* Legal */}\n          <div className=\"space-y-3\">\n            <h3 className=\"text-foreground font-semibold\">Legal</h3>\n            <ul className=\"space-y-2 text-sm\">\n              <li>\n                <a\n                  href=\"#\"\n                  className=\"text-muted-foreground hover:text-foreground transition-colors\"\n                >\n                  Privacy Policy\n                </a>\n              </li>\n              <li>\n                <a\n                  href=\"#\"\n                  className=\"text-muted-foreground hover:text-foreground transition-colors\"\n                >\n                  Terms of Service\n                </a>\n              </li>\n              <li>\n                <a\n                  href=\"#\"\n                  className=\"text-muted-foreground hover:text-foreground transition-colors\"\n                >\n                  Cookie Policy\n                </a>\n              </li>\n              <li>\n                <a\n                  href=\"#\"\n                  className=\"text-muted-foreground hover:text-foreground transition-colors\"\n                >\n                  Accessibility\n                </a>\n              </li>\n            </ul>\n          </div>\n\n          {/* Newsletter - spans full width on mobile, single column on larger screens */}\n          <div className=\"col-span-2 space-y-3 md:col-span-4 lg:col-span-1\">\n            <h3 className=\"text-foreground font-semibold\">Stay Updated</h3>\n            <p className=\"text-muted-foreground text-sm\">\n              Subscribe to get special offers and updates.\n            </p>\n            <div className=\"flex flex-col gap-2 sm:flex-row lg:flex-col\">\n              <input\n                type=\"email\"\n                placeholder=\"Enter your email\"\n                className=\"border-input bg-background placeholder:text-muted-foreground focus:ring-ring flex-1 rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none\"\n              />\n              <button className=\"bg-primary text-primary-foreground hover:bg-primary/90 rounded-md px-4 py-2 text-sm font-medium transition-colors\">\n                Subscribe\n              </button>\n            </div>\n          </div>\n        </div>\n\n        {/* Payment Methods & Copyright */}\n        <div className=\"mt-8 border-t pt-8\">\n          <div className=\"flex flex-col items-center justify-between gap-4 md:flex-row\">\n            {/* Payment Methods */}\n            <div className=\"flex items-center gap-4\">\n              <span className=\"text-muted-foreground text-sm\">We accept:</span>\n              <div className=\"flex items-center gap-3\">\n                {/* Visa */}\n                <div className=\"bg-background flex h-8 w-12 items-center justify-center rounded border\">\n                  <CreditCard className=\"text-muted-foreground h-4 w-4\" />\n                </div>\n                {/* Mastercard */}\n                <div className=\"bg-background flex h-8 w-12 items-center justify-center rounded border\">\n                  <div className=\"flex gap-0.5\">\n                    <div className=\"h-3 w-3 rounded-full bg-red-500 opacity-80\"></div>\n                    <div className=\"-ml-1 h-3 w-3 rounded-full bg-yellow-500 opacity-80\"></div>\n                  </div>\n                </div>\n                {/* PayPal */}\n                <div className=\"bg-background flex h-8 w-12 items-center justify-center rounded border\">\n                  <span className=\"text-xs font-bold text-blue-600\">PP</span>\n                </div>\n                {/* Apple Pay */}\n                <div className=\"bg-background flex h-8 w-12 items-center justify-center rounded border\">\n                  <Smartphone className=\"text-muted-foreground h-4 w-4\" />\n                </div>\n                {/* Google Pay */}\n                <div className=\"bg-background flex h-8 w-12 items-center justify-center rounded border\">\n                  <span className=\"text-muted-foreground text-xs font-bold\">\n                    G\n                  </span>\n                </div>\n                {/* American Express */}\n                <div className=\"bg-background flex h-8 w-12 items-center justify-center rounded border\">\n                  <span className=\"text-xs font-bold text-blue-600\">AE</span>\n                </div>\n              </div>\n            </div>\n\n            {/* Copyright */}\n            <div className=\"text-muted-foreground text-center text-sm md:text-right\">\n              <p>\n                &copy; {new Date().getFullYear()} Your Store Name. All rights\n                reserved.\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </footer>\n  );\n}\n","type":"registry:component","target":"components/blocks/ecommerce/ecommerce-footers/with-payments.tsx"}],"description":"A footer that displays accepted card and wallet badges beside the usual store links. Reassures shoppers about secure checkout right before they buy.","dependencies":["lucide-react"]}