Joe Wee
94 lines
3.3 KiB
TypeScript
94 lines
3.3 KiB
TypeScript
import { Link } from "react-router-dom";
|
|
import { Separator } from "@/components/ui/separator";
|
|
|
|
const footerLinks = {
|
|
shop: [
|
|
{ label: "New Arrivals", to: "/products" },
|
|
{ label: "Best Sellers", to: "/products" },
|
|
{ label: "Sale", to: "/products" },
|
|
{ label: "Collections", to: "/products" },
|
|
],
|
|
help: [
|
|
{ label: "Customer Service", to: "/" },
|
|
{ label: "Size Guide", to: "/" },
|
|
{ label: "Shipping & Returns", to: "/" },
|
|
{ label: "FAQ", to: "/" },
|
|
],
|
|
about: [
|
|
{ label: "Our Story", to: "/" },
|
|
{ label: "Sustainability", to: "/" },
|
|
{ label: "Careers", to: "/" },
|
|
{ label: "Press", to: "/" },
|
|
],
|
|
};
|
|
|
|
export default function Footer() {
|
|
return (
|
|
<footer className="bg-stone-900 text-white">
|
|
<div className="mx-auto max-w-7xl px-6 py-16">
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-10">
|
|
{/* Brand */}
|
|
<div className="col-span-2 md:col-span-1">
|
|
<h3 className="text-lg font-bold mb-4">StyleHaus</h3>
|
|
<p className="text-sm text-stone-400 leading-relaxed">
|
|
Discover curated collections of premium fashion, accessories, and lifestyle essentials crafted for the modern individual.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Shop */}
|
|
<div>
|
|
<h4 className="font-semibold text-sm mb-4 text-stone-300 uppercase tracking-wider">Shop</h4>
|
|
<ul className="space-y-3">
|
|
{footerLinks.shop.map((link) => (
|
|
<li key={link.label}>
|
|
<Link to={link.to} className="text-sm text-stone-400 hover:text-white transition-colors">{link.label}</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Help */}
|
|
<div>
|
|
<h4 className="font-semibold text-sm mb-4 text-stone-300 uppercase tracking-wider">Help</h4>
|
|
<ul className="space-y-3">
|
|
{footerLinks.help.map((link) => (
|
|
<li key={link.label}>
|
|
<Link to={link.to} className="text-sm text-stone-400 hover:text-white transition-colors">{link.label}</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* About */}
|
|
<div>
|
|
<h4 className="font-semibold text-sm mb-4 text-stone-300 uppercase tracking-wider">About</h4>
|
|
<ul className="space-y-3">
|
|
{footerLinks.about.map((link) => (
|
|
<li key={link.label}>
|
|
<Link to={link.to} className="text-sm text-stone-400 hover:text-white transition-colors">{link.label}</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator className="my-10 bg-stone-800" />
|
|
|
|
{/* Payment & Copyright */}
|
|
<div className="flex flex-col sm:flex-row items-center justify-between gap-4">
|
|
<p className="text-xs text-stone-500">
|
|
© 2024 StyleHaus. All rights reserved.
|
|
</p>
|
|
<div className="flex items-center gap-3">
|
|
{["Visa", "Mastercard", "Amex", "PayPal", "Apple Pay"].map((method) => (
|
|
<span key={method} className="text-xs text-stone-500 bg-stone-800 px-2 py-1 rounded">
|
|
{method}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|