80 lines
2.6 KiB
TypeScript
80 lines
2.6 KiB
TypeScript
import Link from 'next/link';
|
|
import { t } from '@/lib/i18n';
|
|
|
|
const columns: { title: string; links: { href: string; label: string }[] }[] = [
|
|
{
|
|
title: 'Shop',
|
|
links: [
|
|
{ href: '/shop', label: 'All products' },
|
|
{ href: '/shop?category=apparel', label: 'Apparel' },
|
|
{ href: '/shop?category=accessories', label: 'Accessories' },
|
|
{ href: '/shop?category=home', label: 'Home' },
|
|
],
|
|
},
|
|
{
|
|
title: 'Account',
|
|
links: [
|
|
{ href: '/orders', label: 'Orders' },
|
|
{ href: '/cart', label: 'Cart' },
|
|
{ href: '/login', label: t('nav.login') },
|
|
],
|
|
},
|
|
{
|
|
title: 'Company',
|
|
links: [
|
|
{ href: '/pricing', label: t('nav.pricing') },
|
|
{ href: '/legal/privacy', label: 'Privacy' },
|
|
{ href: '/legal/terms', label: 'Terms' },
|
|
],
|
|
},
|
|
];
|
|
|
|
export function SiteFooter() {
|
|
return (
|
|
<footer className="border-t" style={{ borderColor: 'var(--border)', background: 'var(--canvas)' }}>
|
|
<div className="page grid gap-12 py-16 lg:grid-cols-[1.6fr_1fr_1fr_1fr]">
|
|
<div>
|
|
<span className="font-display text-3xl leading-none tracking-tight">{t('brand.name')}</span>
|
|
<p className="muted mt-4 max-w-xs text-sm leading-relaxed">
|
|
Everyday goods, made to last. Free shipping over $50, 30-day returns and a checkout that works
|
|
out of the box.
|
|
</p>
|
|
</div>
|
|
{columns.map((col) => (
|
|
<nav key={col.title} aria-label={col.title}>
|
|
<h2 className="kicker">{col.title}</h2>
|
|
<ul className="mt-5 space-y-3 text-sm">
|
|
{col.links.map((link) => (
|
|
<li key={link.href}>
|
|
<Link href={link.href} className="transition-colors hover:text-[var(--text)]" style={{ color: 'var(--text-muted)' }}>
|
|
{link.label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
))}
|
|
</div>
|
|
|
|
<div className="page">
|
|
<div className="rule" />
|
|
</div>
|
|
<div className="page flex flex-col items-center justify-between gap-2 py-6 text-sm sm:flex-row">
|
|
<p className="muted">
|
|
© {new Date().getFullYear()} {t('brand.name')}
|
|
</p>
|
|
<p className="muted">Built with Next.js · mock payments ready</p>
|
|
</div>
|
|
|
|
<div aria-hidden className="page select-none overflow-hidden">
|
|
<div
|
|
className="font-display translate-y-[16%] text-center text-[24vw] leading-none tracking-tight lg:text-[16rem]"
|
|
style={{ color: 'color-mix(in srgb, var(--text) 6%, transparent)' }}
|
|
>
|
|
{t('brand.name')}
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|