7f67d123d6
- App Router mit TypeScript & Tailwind CSS - Landing Page mit Hero, Über uns, Shop-Teaser, Apps-Teaser, Newsletter - /shop mit 6 Platzhalter-Produkten - /apps Übersicht mit Snakkimo, Fittimo, Rezeptimo - Nav mit Apps-Dropdown, Footer - Design System: Cormorant Garamond + Mulish, Markenfarben - lib/shopify.ts als Platzhalter für Storefront API - Hero-Bild aus ZIP übernommen Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
96 lines
4.0 KiB
TypeScript
96 lines
4.0 KiB
TypeScript
import Link from 'next/link'
|
|
|
|
export default function Footer() {
|
|
return (
|
|
<footer style={{ background: '#3D2B1F', color: '#FAFAF7', padding: '0 48px 48px' }}>
|
|
<div style={{ maxWidth: 1240, margin: '0 auto', borderTop: '1px solid rgba(250,250,247,0.14)', paddingTop: 56 }}>
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr', gap: 40, paddingBottom: 52 }}>
|
|
|
|
{/* Brand */}
|
|
<div>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 11, marginBottom: 18 }}>
|
|
<div style={{ width: 30, height: 30, borderRadius: '50% 50% 50% 10px', background: '#A8B89A' }} />
|
|
<span style={{ fontFamily: 'var(--font-cormorant), "Cormorant Garamond", serif', fontSize: 23, fontWeight: 600, color: '#FAFAF7' }}>
|
|
HyggeCraftery
|
|
</span>
|
|
</div>
|
|
<p style={{ fontSize: 14.5, color: 'rgba(250,250,247,0.55)', maxWidth: 280, margin: 0 }}>
|
|
Skandinavisches Lifestyle-Handwerk für ein langsameres, schöneres Leben. Mit Liebe gemacht in Schweden.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Entdecken */}
|
|
<div>
|
|
<h4 style={{ fontSize: 13, fontWeight: 700, letterSpacing: 1.4, textTransform: 'uppercase', color: '#A8B89A', margin: '0 0 18px' }}>
|
|
Entdecken
|
|
</h4>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
|
<FooterLink href="/shop">Shop</FooterLink>
|
|
<FooterLink href="/apps">Apps</FooterLink>
|
|
<FooterLink href="/#ueber">Über uns</FooterLink>
|
|
<FooterLink href="/#newsletter">Newsletter</FooterLink>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Service */}
|
|
<div>
|
|
<h4 style={{ fontSize: 13, fontWeight: 700, letterSpacing: 1.4, textTransform: 'uppercase', color: '#A8B89A', margin: '0 0 18px' }}>
|
|
Service
|
|
</h4>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
|
<FooterLink href="#">Versand</FooterLink>
|
|
<FooterLink href="#">Kontakt</FooterLink>
|
|
<FooterLink href="#">Impressum</FooterLink>
|
|
<FooterLink href="#">Datenschutz</FooterLink>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Social */}
|
|
<div>
|
|
<h4 style={{ fontSize: 13, fontWeight: 700, letterSpacing: 1.4, textTransform: 'uppercase', color: '#A8B89A', margin: '0 0 18px' }}>
|
|
Folgen
|
|
</h4>
|
|
<div style={{ display: 'flex', gap: 12 }}>
|
|
{[['Ig', 'Instagram'], ['Pin', 'Pinterest'], ['Jo', 'Journal']].map(([abbr, label]) => (
|
|
<a
|
|
key={abbr}
|
|
href="#"
|
|
title={label}
|
|
style={{
|
|
textDecoration: 'none',
|
|
width: 42,
|
|
height: 42,
|
|
borderRadius: '50% 50% 50% 12px',
|
|
background: 'rgba(250,250,247,0.08)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
fontSize: 13,
|
|
fontWeight: 600,
|
|
color: '#FAFAF7',
|
|
}}
|
|
>
|
|
{abbr}
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ borderTop: '1px solid rgba(250,250,247,0.14)', paddingTop: 28, display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 14 }}>
|
|
<span style={{ fontSize: 13.5, color: 'rgba(250,250,247,0.45)' }}>© 2026 HyggeCraftery AB · Göteborg, Sverige</span>
|
|
<span style={{ fontSize: 13.5, color: 'rgba(250,250,247,0.45)' }}>Leben. Langsam. Schön.</span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
)
|
|
}
|
|
|
|
function FooterLink({ href, children }: { href: string; children: React.ReactNode }) {
|
|
return (
|
|
<Link href={href} style={{ textDecoration: 'none', fontSize: 14.5, color: 'rgba(250,250,247,0.7)' }}>
|
|
{children}
|
|
</Link>
|
|
)
|
|
}
|