x
This commit is contained in:
Your Name committed
1 parent
63bc3bfb1a
commit
497e3d4d5b
2 files changed
+205
-123
No files matched your search
@@ -209,6 +209,65 @@
|
||||
@apply flex h-9 w-9 items-center justify-center rounded-full border border-line-primary/20 bg-surface-page text-[10px] font-bold text-text-main transition-all duration-300 hover:border-brand-primary hover:bg-brand-primary hover:text-surface-card;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
@apply relative bg-surface-page;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.site-footer-brand-finale {
|
||||
@apply flex min-h-[55svh] items-center justify-center overflow-hidden border-t border-line-primary/20 bg-surface-page px-6 py-20 text-center;
|
||||
}
|
||||
|
||||
.site-footer-finale-logo {
|
||||
@apply h-auto max-h-32 w-auto max-w-[min(82vw,32rem)] object-contain;
|
||||
}
|
||||
|
||||
.site-footer-finale-wordmark {
|
||||
@apply max-w-full break-words text-5xl font-semibold uppercase text-text-main md:text-7xl;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.site-footer-navigation {
|
||||
@apply relative border-t border-line-primary/20 bg-surface-card px-6 py-20;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.global-main {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
background: var(--color-surface-page);
|
||||
}
|
||||
|
||||
.site-footer-with-finale {
|
||||
padding-top: 100svh;
|
||||
}
|
||||
|
||||
.site-footer-brand-finale {
|
||||
@apply fixed inset-0 min-h-[100svh] py-24;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.site-footer-finale-logo {
|
||||
@apply max-h-48 max-w-[min(68vw,48rem)];
|
||||
}
|
||||
|
||||
.site-footer-finale-wordmark {
|
||||
@apply text-8xl;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.site-footer-brand-finale {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.site-footer-with-finale {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-section-band {
|
||||
@apply px-6 py-20 md:py-24;
|
||||
}
|
||||
|
||||
@@ -54,138 +54,161 @@ export default function Footer({
|
||||
// Social links — use settings if available, fallback to placeholder buttons
|
||||
const hasSocialLinks = settings && (settings.facebookUrl || settings.instagramUrl || settings.tiktokUrl)
|
||||
const brandName = settings?.brandName || ''
|
||||
const hasBrandFinale = Boolean(settings?.logoUrl || brandName.trim())
|
||||
|
||||
return (
|
||||
<footer className="border-t border-line-primary/20 bg-surface-card px-6 py-20 text-text-main">
|
||||
<div className="mx-auto grid max-w-7xl grid-cols-1 gap-12 md:grid-cols-4">
|
||||
<footer className={`site-footer text-text-main${hasBrandFinale ? ' site-footer-with-finale' : ''}`}>
|
||||
{hasBrandFinale && (
|
||||
<section
|
||||
className="site-footer-brand-finale"
|
||||
aria-label={brandName || t('footer.brand', 'Brand')}
|
||||
>
|
||||
{settings?.logoUrl ? (
|
||||
<Image
|
||||
src={settings.logoUrl}
|
||||
alt=""
|
||||
width={640}
|
||||
height={240}
|
||||
unoptimized
|
||||
className="site-footer-finale-logo"
|
||||
/>
|
||||
) : (
|
||||
<p className="site-footer-finale-wordmark">{brandName}</p>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Col 1 — Brand */}
|
||||
<div className="space-y-6">
|
||||
<div className="text-2xl font-bold tracking-widest">
|
||||
{settings?.logoUrl ? (
|
||||
<Image src={settings.logoUrl} alt={brandName} width={160} height={40} unoptimized className="h-8 w-auto object-contain md:h-10" />
|
||||
) : (
|
||||
brandName
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm leading-relaxed ui-muted-text">
|
||||
{resolveLocalized(settings?.footerDescription, effectiveLang) || t('footer.catchphrase')}
|
||||
</p>
|
||||
<div className="flex gap-4">
|
||||
{hasSocialLinks ? (
|
||||
<>
|
||||
{settings!.facebookUrl && (
|
||||
<a
|
||||
href={settings!.facebookUrl}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="ui-footer-social"
|
||||
>
|
||||
FB
|
||||
</a>
|
||||
)}
|
||||
{settings!.instagramUrl && (
|
||||
<a
|
||||
href={settings!.instagramUrl}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="ui-footer-social"
|
||||
>
|
||||
IG
|
||||
</a>
|
||||
)}
|
||||
{settings!.tiktokUrl && (
|
||||
<a
|
||||
href={settings!.tiktokUrl}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="ui-footer-social"
|
||||
>
|
||||
TT
|
||||
</a>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
['IG', 'FB', 'TW', 'YT'].map((s) => (
|
||||
<a
|
||||
key={s}
|
||||
href="#"
|
||||
className="ui-footer-social"
|
||||
>
|
||||
{s}
|
||||
</a>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="site-footer-navigation">
|
||||
<div className="mx-auto grid max-w-7xl grid-cols-1 gap-12 md:grid-cols-4">
|
||||
|
||||
{/* Col 2 — Explore */}
|
||||
<div className="space-y-4">
|
||||
<h4 className="ui-menu-title">{t('footer.explore')}</h4>
|
||||
<div className="flex flex-col space-y-2 text-sm text-muted-text">
|
||||
{exploreMenu.length > 0 ? (
|
||||
exploreMenu.map((item) => (
|
||||
{/* Col 1 — Brand */}
|
||||
<div className="space-y-6">
|
||||
<div className="text-2xl font-bold tracking-widest">
|
||||
{settings?.logoUrl ? (
|
||||
<Image src={settings.logoUrl} alt={brandName} width={160} height={40} unoptimized className="h-8 w-auto object-contain md:h-10" />
|
||||
) : (
|
||||
brandName
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm leading-relaxed ui-muted-text">
|
||||
{resolveLocalized(settings?.footerDescription, effectiveLang) || t('footer.catchphrase')}
|
||||
</p>
|
||||
<div className="flex gap-4">
|
||||
{hasSocialLinks ? (
|
||||
<>
|
||||
{settings!.facebookUrl && (
|
||||
<a
|
||||
href={settings!.facebookUrl}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="ui-footer-social"
|
||||
>
|
||||
FB
|
||||
</a>
|
||||
)}
|
||||
{settings!.instagramUrl && (
|
||||
<a
|
||||
href={settings!.instagramUrl}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="ui-footer-social"
|
||||
>
|
||||
IG
|
||||
</a>
|
||||
)}
|
||||
{settings!.tiktokUrl && (
|
||||
<a
|
||||
href={settings!.tiktokUrl}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="ui-footer-social"
|
||||
>
|
||||
TT
|
||||
</a>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
['IG', 'FB', 'TW', 'YT'].map((s) => (
|
||||
<a
|
||||
key={s}
|
||||
href="#"
|
||||
className="ui-footer-social"
|
||||
>
|
||||
{s}
|
||||
</a>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Col 2 — Explore */}
|
||||
<div className="space-y-4">
|
||||
<h4 className="ui-menu-title">{t('footer.explore')}</h4>
|
||||
<div className="flex flex-col space-y-2 text-sm text-muted-text">
|
||||
{exploreMenu.length > 0 ? (
|
||||
exploreMenu.map((item) => (
|
||||
<Link key={item.id} href={item.url} className="ui-footer-link">
|
||||
{translateMenuLabel(item)}
|
||||
</Link>
|
||||
))
|
||||
) : (
|
||||
<>
|
||||
<Link href="/" className="ui-footer-link">{t('nav.home')}</Link>
|
||||
<Link href="/shop" className="ui-footer-link">{t('nav.shop')}</Link>
|
||||
<Link href="/scent-guide" className="ui-footer-link">{t('nav.scentGuide')}</Link>
|
||||
<Link href="/about" className="ui-footer-link">{t('nav.about')}</Link>
|
||||
<Link href="/contact" className="ui-footer-link">{t('nav.contact')}</Link>
|
||||
<Link href="/faq" className="ui-footer-link">{t('nav.faq')}</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Col 3 — Collections */}
|
||||
<div className="space-y-4">
|
||||
<h4 className="ui-menu-title">{t('nav.collections')}</h4>
|
||||
<div className="flex flex-col space-y-2 text-sm text-muted-text">
|
||||
{categories.map((c) => (
|
||||
<Link key={c.id} href={`/category/${c.id}`} className="ui-footer-link">
|
||||
{resolveLocalized(c.name, effectiveLang)}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Col 4 — Support & Legal */}
|
||||
<div className="space-y-4">
|
||||
<h4 className="ui-menu-title">
|
||||
{settings?.footerSupportHeading
|
||||
? (typeof settings.footerSupportHeading === 'string'
|
||||
? settings.footerSupportHeading
|
||||
: settings.footerSupportHeading[effectiveLang]
|
||||
|| settings.footerSupportHeading.en
|
||||
|| 'Support & Legal')
|
||||
: t('footer.support', 'Support & Legal')}
|
||||
</h4>
|
||||
<div className="flex flex-col space-y-2 text-sm text-muted-text">
|
||||
{supportMenu.map((item) => (
|
||||
<Link key={item.id} href={item.url} className="ui-footer-link">
|
||||
{translateMenuLabel(item)}
|
||||
</Link>
|
||||
))
|
||||
) : (
|
||||
<>
|
||||
<Link href="/" className="ui-footer-link">{t('nav.home')}</Link>
|
||||
<Link href="/shop" className="ui-footer-link">{t('nav.shop')}</Link>
|
||||
<Link href="/scent-guide" className="ui-footer-link">{t('nav.scentGuide')}</Link>
|
||||
<Link href="/about" className="ui-footer-link">{t('nav.about')}</Link>
|
||||
<Link href="/contact" className="ui-footer-link">{t('nav.contact')}</Link>
|
||||
<Link href="/faq" className="ui-footer-link">{t('nav.faq')}</Link>
|
||||
</>
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="pt-4">
|
||||
<p className="text-[10px] uppercase tracking-widest text-muted-text">
|
||||
{settings?.footerCopyrightText
|
||||
? (typeof settings.footerCopyrightText === 'string'
|
||||
? settings.footerCopyrightText
|
||||
: settings.footerCopyrightText[effectiveLang]
|
||||
|| settings.footerCopyrightText.en
|
||||
|| `© ${new Date().getFullYear()} ${brandName}. ${t('footer.rights')}`)
|
||||
: `© ${new Date().getFullYear()} ${brandName}. ${t('footer.rights')}`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Col 3 — Collections */}
|
||||
<div className="space-y-4">
|
||||
<h4 className="ui-menu-title">{t('nav.collections')}</h4>
|
||||
<div className="flex flex-col space-y-2 text-sm text-muted-text">
|
||||
{categories.map((c) => (
|
||||
<Link key={c.id} href={`/category/${c.id}`} className="ui-footer-link">
|
||||
{resolveLocalized(c.name, effectiveLang)}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Col 4 — Support & Legal */}
|
||||
<div className="space-y-4">
|
||||
<h4 className="ui-menu-title">
|
||||
{settings?.footerSupportHeading
|
||||
? (typeof settings.footerSupportHeading === 'string'
|
||||
? settings.footerSupportHeading
|
||||
: settings.footerSupportHeading[effectiveLang]
|
||||
|| settings.footerSupportHeading.en
|
||||
|| 'Support & Legal')
|
||||
: t('footer.support', 'Support & Legal')}
|
||||
</h4>
|
||||
<div className="flex flex-col space-y-2 text-sm text-muted-text">
|
||||
{supportMenu.map((item) => (
|
||||
<Link key={item.id} href={item.url} className="ui-footer-link">
|
||||
{translateMenuLabel(item)}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="pt-4">
|
||||
<p className="text-[10px] uppercase tracking-widest text-muted-text">
|
||||
{settings?.footerCopyrightText
|
||||
? (typeof settings.footerCopyrightText === 'string'
|
||||
? settings.footerCopyrightText
|
||||
: settings.footerCopyrightText[effectiveLang]
|
||||
|| settings.footerCopyrightText.en
|
||||
|| `© ${new Date().getFullYear()} ${brandName}. ${t('footer.rights')}`)
|
||||
: `© ${new Date().getFullYear()} ${brandName}. ${t('footer.rights')}`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
|
||||
Reference in new issue
Block a user