Initial Next.js 14 project — HyggeCraftery web

- 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>

components/ui/Footer.tsx

@@ -0,0 +1,95 @@
+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>
+  )
+}