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>

app/shop/page.tsx

@@ -0,0 +1,71 @@
+import type { Metadata } from 'next'
+import Link from 'next/link'
+
+export const metadata: Metadata = {
+  title: 'Shop – HyggeCraftery',
+  description: 'Handgemachte Stücke für ein langsameres, schöneres Zuhause.',
+}
+
+const products = [
+  { name: 'Leinen-Kissen «Fjord»', price: '€ 48', desc: 'Sanftes Leinen in gedämpftem Salbei.', badge: 'Neu', bg: 'repeating-linear-gradient(40deg,#F0E8DA,#F0E8DA 11px,#E7DDCC 11px,#E7DDCC 22px)' },
+  { name: 'Keramik-Tasse «Lykke»', price: '€ 32', desc: 'Handgedreht, jede ein Unikat.', badge: null, bg: 'repeating-linear-gradient(40deg,#EEE6D6,#EEE6D6 11px,#E4D9C7 11px,#E4D9C7 22px)' },
+  { name: 'Duftkerze «Skog»', price: '€ 26', desc: 'Zeder, Moos und stiller Wald.', badge: null, bg: 'repeating-linear-gradient(40deg,#F0E8DA,#F0E8DA 11px,#E6DBCA 11px,#E6DBCA 22px)' },
+  { name: 'Wolldecke «Vintersol»', price: '€ 89', desc: 'Weiche Merinowolle in warmen Tönen.', badge: 'Bald', bg: 'repeating-linear-gradient(40deg,#EDE5D5,#EDE5D5 11px,#E3D8C5 11px,#E3D8C5 22px)' },
+  { name: 'Keramik-Schale «Ro»', price: '€ 38', desc: 'Für Früchte, Schlüssel oder stille Momente.', badge: null, bg: 'repeating-linear-gradient(40deg,#F2EAD8,#F2EAD8 11px,#E8DEC8 11px,#E8DEC8 22px)' },
+  { name: 'Leinentuch «Morgon»', price: '€ 44', desc: 'Natürlich, weich, zeitlos.', badge: null, bg: 'repeating-linear-gradient(40deg,#EFE8D8,#EFE8D8 11px,#E5DBC6 11px,#E5DBC6 22px)' },
+]
+
+export default function ShopPage() {
+  return (
+    <div style={{ fontFamily: 'var(--font-mulish, Mulish, sans-serif)', color: '#3D2B1F', background: '#FAFAF7', minHeight: '60vh' }}>
+      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '80px 48px 120px' }}>
+
+        {/* Header */}
+        <div style={{ marginBottom: 64 }}>
+          <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: 2.5, textTransform: 'uppercase', color: '#C4896A' }}>Shop</span>
+          <h1 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 62, letterSpacing: -1, color: '#3D2B1F', margin: '14px 0 18px' }}>
+            Stücke fürs Zuhause
+          </h1>
+          <p style={{ fontSize: 17, color: '#6b5d4e', maxWidth: 540, margin: 0, lineHeight: 1.7 }}>
+            Handgefertigte Objekte für ein langsameres, bewussteres Zuhause.
+            Jedes Stück ist mit Bedacht ausgewählt.
+          </p>
+        </div>
+
+        {/* Shopify-Platzhalter-Hinweis */}
+        <div style={{ background: '#F5F0E8', borderRadius: 20, padding: '20px 28px', marginBottom: 52, display: 'flex', alignItems: 'center', gap: 14 }}>
+          <span style={{ fontSize: 20 }}>🛒</span>
+          <p style={{ margin: 0, fontSize: 14, color: '#8a7a68', lineHeight: 1.6 }}>
+            <strong style={{ color: '#3D2B1F' }}>Shop-Integration kommt bald.</strong>{' '}
+            Diese Produkte sind Platzhalter. Die Shopify Storefront API wird in{' '}
+            <code style={{ background: 'rgba(61,43,31,0.08)', padding: '2px 6px', borderRadius: 6, fontSize: 12 }}>lib/shopify.ts</code>{' '}
+            integriert.
+          </p>
+        </div>
+
+        {/* Product grid */}
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 30 }}>
+          {products.map((p) => (
+            <div key={p.name} style={{ display: 'block', color: 'inherit' }}>
+              <div style={{ position: 'relative', height: 360, borderRadius: 30, overflow: 'hidden', background: p.bg, display: 'flex', alignItems: 'flex-end', justifyContent: 'center', padding: 18 }}>
+                {p.badge && (
+                  <span style={{ position: 'absolute', top: 18, left: 18, background: p.badge === 'Bald' ? '#C4896A' : '#A8B89A', color: '#FAFAF7', fontSize: 11.5, fontWeight: 700, letterSpacing: 0.6, padding: '6px 13px', borderRadius: 30 }}>
+                    {p.badge}
+                  </span>
+                )}
+                <span style={{ fontFamily: 'monospace', fontSize: 11.5, letterSpacing: 1, color: '#8a7a68', background: 'rgba(250,250,247,0.72)', padding: '7px 13px', borderRadius: 18 }}>
+                  [ Produktfoto ]
+                </span>
+              </div>
+              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginTop: 18 }}>
+                <h3 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 600, fontSize: 23, color: '#3D2B1F', margin: 0 }}>{p.name}</h3>
+                <span style={{ fontSize: 15, fontWeight: 700, color: '#C4896A' }}>{p.price}</span>
+              </div>
+              <p style={{ fontSize: 14, color: '#8a7a68', margin: '5px 0 0' }}>{p.desc}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}