Template
Rami BitarandClaude Fable 5
f23332e42c
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01F22Ms5Cxam5UHyxaCrtZzu
91 lines
3.2 KiB
TypeScript
91 lines
3.2 KiB
TypeScript
import Link from "next/link";
|
|
|
|
import { content } from "@/lib/content";
|
|
|
|
const footerLinkClass =
|
|
"min-h-touch-target text-on-surface-secondary hover:text-on-surface focus-visible:outline-accent inline-flex items-center font-normal no-underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 motion-safe:transition-colors";
|
|
|
|
/**
|
|
* Site footer — shared chrome, server-rendered. Includes the `/cart` link that
|
|
* is the drawer's reachable no-JS fallback on every page (engineering.md F4 +
|
|
* `notes/cart.md` "Without JavaScript").
|
|
*/
|
|
export function Footer() {
|
|
return (
|
|
<footer className="max-w-page px-margin mx-auto w-full">
|
|
<div className="border-border grid grid-cols-1 gap-8 border-t py-12 text-sm md:grid-cols-2 lg:grid-cols-4">
|
|
<div>
|
|
<h2 className="type-body-sm text-on-surface mb-4 font-medium">CORE</h2>
|
|
<p className="text-on-surface-secondary">© 2026 CORE</p>
|
|
</div>
|
|
<nav aria-labelledby="footer-quick-links-heading">
|
|
<h2
|
|
className="type-body-sm text-on-surface mb-4 font-medium"
|
|
id="footer-quick-links-heading"
|
|
>
|
|
{content.footer.quickLinks}
|
|
</h2>
|
|
<ul role="list" className="flex flex-col gap-2">
|
|
<li>
|
|
<Link href="/collections" className={footerLinkClass}>
|
|
Collections
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/collections/men" className={footerLinkClass}>
|
|
Men
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/collections/women" className={footerLinkClass}>
|
|
Women
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/collections/accessories" className={footerLinkClass}>
|
|
Accessories
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<nav aria-labelledby="footer-customer-care-heading">
|
|
<h2
|
|
className="type-body-sm text-on-surface mb-4 font-medium"
|
|
id="footer-customer-care-heading"
|
|
>
|
|
{content.footer.customerCare}
|
|
</h2>
|
|
<ul role="list" className="flex flex-col gap-2">
|
|
<li>
|
|
<Link href="/search" className={footerLinkClass}>
|
|
{content.footer.search}
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/cart" className={footerLinkClass}>
|
|
{content.cart.title}
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<div>
|
|
<h2 className="type-body-sm text-on-surface mb-4 font-medium">
|
|
{content.footer.paymentMethods}
|
|
</h2>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<span className="border-border text-on-surface-secondary rounded-sm border px-2 py-1 text-xs">
|
|
Visa
|
|
</span>
|
|
<span className="border-border text-on-surface-secondary rounded-sm border px-2 py-1 text-xs">
|
|
Mastercard
|
|
</span>
|
|
<span className="border-border text-on-surface-secondary rounded-sm border px-2 py-1 text-xs">
|
|
Shop Pay
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|