diff options
Diffstat (limited to 'frontend/src/components/footer.tsx')
| -rw-r--r-- | frontend/src/components/footer.tsx | 267 |
1 files changed, 267 insertions, 0 deletions
diff --git a/frontend/src/components/footer.tsx b/frontend/src/components/footer.tsx new file mode 100644 index 0000000..d7c8ae7 --- /dev/null +++ b/frontend/src/components/footer.tsx @@ -0,0 +1,267 @@ +import Link from "next/link"; +import Image from "next/image"; +import { Input } from "@/components/ui/input"; +import { Button } from "@/components/ui/button"; +import { Separator } from "@/components/ui/separator"; +import { + Facebook, + Instagram, + Twitter, + Youtube, + Mail, + Phone, + MapPin, + CreditCard, + Shield, + Truck, + RefreshCw, +} from "lucide-react"; + +export function Footer() { + const currentYear = new Date().getFullYear(); + + const footerLinks = { + shop: [ + { name: "Women", href: "/women" }, + { name: "Men", href: "/men" }, + { name: "Kids", href: "/kids" }, + { name: "Sale", href: "/sale" }, + { name: "New Arrivals", href: "/new-arrivals" }, + { name: "Best Sellers", href: "/best-sellers" }, + ], + company: [ + { name: "About Us", href: "/about" }, + { name: "Careers", href: "/careers" }, + { name: "Press", href: "/press" }, + { name: "Sustainability", href: "/sustainability" }, + { name: "Store Locator", href: "/stores" }, + ], + help: [ + { name: "Customer Service", href: "/customer-service" }, + { name: "Size Guide", href: "/size-guide" }, + { name: "Shipping & Returns", href: "/shipping-returns" }, + { name: "Track Your Order", href: "/track-order" }, + { name: "FAQ", href: "/faq" }, + { name: "Contact Us", href: "/contact" }, + ], + legal: [ + { name: "Privacy Policy", href: "/privacy" }, + { name: "Terms of Service", href: "/terms" }, + { name: "Cookie Policy", href: "/cookies" }, + { name: "Accessibility", href: "/accessibility" }, + ], + }; + + return ( + <footer className="bg-neutral-50 border-t"> + {/* Newsletter Section */} + <div className="bg-black text-white"> + <div className="container mx-auto px-4 py-12"> + <div className="max-w-2xl mx-auto text-center"> + <h2 className="text-2xl font-bold mb-4">Stay in the loop</h2> + <p className="text-neutral-300 mb-6"> + Subscribe to our newsletter and be the first to know about new arrivals, sales, and exclusive offers. + </p> + <div className="flex max-w-md mx-auto gap-3"> + <Input + placeholder="Enter your email" + className="bg-white text-black placeholder:text-gray-500" + /> + <Button variant="secondary" className="px-8"> + Subscribe + </Button> + </div> + <p className="text-xs text-neutral-400 mt-3"> + By subscribing, you agree to our Privacy Policy and Terms of Service. + </p> + </div> + </div> + </div> + + {/* Main Footer Content */} + <div className="container mx-auto px-4 py-12"> + <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8"> + {/* Brand Info */} + <div className="lg:col-span-2"> + <Link href="/" className="flex items-center space-x-2 mb-4"> + <Image + src="/black-logo.png" + alt="blcklst" + width={140} + height={45} + className="h-8 w-auto" + /> + </Link> + <p className="text-muted-foreground mb-6 max-w-md"> + not everyone gets blcklsted - discover carefully curated fashion pieces that define modern elegance and exclusivity. + </p> + + {/* Contact Info */} + <div className="space-y-3 mb-6"> + <div className="flex items-center space-x-3 text-sm"> + <Phone className="h-4 w-4 text-muted-foreground" /> + <span>+1 (555) 123-4567</span> + </div> + <div className="flex items-center space-x-3 text-sm"> + <Mail className="h-4 w-4 text-muted-foreground" /> + <span>[email protected]</span> + </div> + <div className="flex items-center space-x-3 text-sm"> + <MapPin className="h-4 w-4 text-muted-foreground" /> + <span>123 Fashion St, New York, NY 10001</span> + </div> + </div> + + {/* Social Media */} + <div className="flex space-x-4"> + <Link href="#" className="text-muted-foreground hover:text-foreground"> + <Facebook className="h-5 w-5" /> + </Link> + <Link href="#" className="text-muted-foreground hover:text-foreground"> + <Instagram className="h-5 w-5" /> + </Link> + <Link href="#" className="text-muted-foreground hover:text-foreground"> + <Twitter className="h-5 w-5" /> + </Link> + <Link href="#" className="text-muted-foreground hover:text-foreground"> + <Youtube className="h-5 w-5" /> + </Link> + </div> + </div> + + {/* Shop Links */} + <div> + <h3 className="font-semibold mb-4">Shop</h3> + <ul className="space-y-3"> + {footerLinks.shop.map((link) => ( + <li key={link.name}> + <Link + href={link.href} + className="text-sm text-muted-foreground hover:text-foreground transition-colors" + > + {link.name} + </Link> + </li> + ))} + </ul> + </div> + + {/* Company Links */} + <div> + <h3 className="font-semibold mb-4">Company</h3> + <ul className="space-y-3"> + {footerLinks.company.map((link) => ( + <li key={link.name}> + <Link + href={link.href} + className="text-sm text-muted-foreground hover:text-foreground transition-colors" + > + {link.name} + </Link> + </li> + ))} + </ul> + </div> + + {/* Help Links */} + <div> + <h3 className="font-semibold mb-4">Help</h3> + <ul className="space-y-3"> + {footerLinks.help.map((link) => ( + <li key={link.name}> + <Link + href={link.href} + className="text-sm text-muted-foreground hover:text-foreground transition-colors" + > + {link.name} + </Link> + </li> + ))} + </ul> + </div> + </div> + + {/* Features Section */} + <div className="mt-12 pt-8 border-t"> + <div className="grid grid-cols-1 md:grid-cols-4 gap-6"> + <div className="flex items-center space-x-3"> + <div className="bg-primary/10 p-2 rounded-full"> + <Truck className="h-5 w-5 text-primary" /> + </div> + <div> + <h4 className="font-medium text-sm">Free Shipping</h4> + <p className="text-xs text-muted-foreground">On orders over $100</p> + </div> + </div> + <div className="flex items-center space-x-3"> + <div className="bg-primary/10 p-2 rounded-full"> + <RefreshCw className="h-5 w-5 text-primary" /> + </div> + <div> + <h4 className="font-medium text-sm">Easy Returns</h4> + <p className="text-xs text-muted-foreground">30-day return policy</p> + </div> + </div> + <div className="flex items-center space-x-3"> + <div className="bg-primary/10 p-2 rounded-full"> + <Shield className="h-5 w-5 text-primary" /> + </div> + <div> + <h4 className="font-medium text-sm">Secure Payment</h4> + <p className="text-xs text-muted-foreground">SSL encrypted checkout</p> + </div> + </div> + <div className="flex items-center space-x-3"> + <div className="bg-primary/10 p-2 rounded-full"> + <CreditCard className="h-5 w-5 text-primary" /> + </div> + <div> + <h4 className="font-medium text-sm">Multiple Payment</h4> + <p className="text-xs text-muted-foreground">Cards, PayPal & more</p> + </div> + </div> + </div> + </div> + </div> + + {/* Bottom Footer */} + <div className="border-t bg-neutral-100"> + <div className="container mx-auto px-4 py-6"> + <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0"> + <div className="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-6"> + <p className="text-sm text-muted-foreground"> + © {currentYear} blcklst. All rights reserved. + </p> + <div className="flex space-x-4"> + {footerLinks.legal.map((link) => ( + <Link + key={link.name} + href={link.href} + className="text-xs text-muted-foreground hover:text-foreground" + > + {link.name} + </Link> + ))} + </div> + </div> + + {/* Payment Methods */} + <div className="flex items-center space-x-2"> + <span className="text-xs text-muted-foreground mr-2">We accept:</span> + <div className="flex space-x-1"> + {["Visa", "Mastercard", "AmEx", "PayPal", "Apple Pay"].map((method) => ( + <div + key={method} + className="bg-white border rounded px-2 py-1 text-xs font-medium" + > + {method} + </div> + ))} + </div> + </div> + </div> + </div> + </div> + </footer> + ); +}
\ No newline at end of file |