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/apps/fittimo/page.tsx

@@ -0,0 +1,109 @@
+import type { Metadata } from 'next'
+import Link from 'next/link'
+
+export const metadata: Metadata = {
+  title: 'Fittimo – Bewegung im Alltag | HyggeCraftery',
+  description: 'Sanfte Bewegung und Atemübungen für Körper und Geist im Einklang.',
+}
+
+const accent = '#7DAF8A'
+
+const features = [
+  { title: 'Sanfte Übungen', desc: 'Keine schweißtreibenden Sessions — sanfte Bewegung, die sich gut anfühlt.' },
+  { title: 'Atemübungen', desc: 'Atme dich in die Ruhe. Geführte Übungen für Momente der Stille.' },
+  { title: 'Jederzeit & überall', desc: 'Kein Gym nötig. Eine Kachel, eine Übung, ein Moment für dich.' },
+  { title: 'Körper & Geist', desc: 'Bewegung als Ritual — nicht als Pflicht. Fittimo verbindet beides.' },
+]
+
+export default function FittimoPage() {
+  return (
+    <div style={{ fontFamily: 'var(--font-mulish, Mulish, sans-serif)', color: '#3D2B1F', background: '#FAFAF7', overflow: 'hidden' }}>
+
+      {/* App-Header */}
+      <header style={{ position: 'relative', zIndex: 10, maxWidth: 1240, margin: '0 auto', padding: '30px 48px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+          <div style={{ width: 34, height: 34, borderRadius: '50% 50% 50% 12px', background: accent, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <span style={{ width: 13, height: 13, borderRadius: '50%', border: '2.5px solid #FAFAF7', display: 'inline-block' }} />
+          </div>
+          <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
+            <span style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontSize: 24, fontWeight: 600, letterSpacing: 0.4, color: '#3D2B1F' }}>Fittimo</span>
+            <span style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: 1.2, textTransform: 'uppercase', color: '#9a8b78', marginTop: 3 }}>by HyggeCraftery</span>
+          </div>
+        </div>
+        <nav style={{ display: 'flex', alignItems: 'center', gap: 34 }}>
+          <Link href="/" style={{ textDecoration: 'none', color: '#3D2B1F', fontSize: 14.5, fontWeight: 500, opacity: 0.78 }}>← HyggeCraftery</Link>
+          <a href="#features" style={{ textDecoration: 'none', color: '#3D2B1F', fontSize: 14.5, fontWeight: 500, opacity: 0.78 }}>Features</a>
+          <a href="#download" style={{ textDecoration: 'none', color: '#FAFAF7', background: accent, fontSize: 14, fontWeight: 600, padding: '11px 22px', borderRadius: 40 }}>App entdecken</a>
+        </nav>
+      </header>
+
+      {/* Hero */}
+      <section style={{ maxWidth: 1240, margin: '0 auto', padding: '46px 48px 96px', display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 48, alignItems: 'center' }}>
+        <div>
+          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 9, background: `${accent}28`, borderRadius: 40, padding: '7px 16px 7px 12px', marginBottom: 26 }}>
+            <span style={{ width: 7, height: 7, borderRadius: '50%', background: accent, display: 'inline-block' }} />
+            <span style={{ fontSize: 12.5, fontWeight: 600, letterSpacing: 1.2, textTransform: 'uppercase', color: '#4a7a5a' }}>Bewegung im Alltag</span>
+          </div>
+          <h1 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 66, lineHeight: 1.08, letterSpacing: -0.8, margin: '0 0 22px', color: '#3D2B1F' }}>
+            Eine Übung.<br />Jederzeit.<br /><span style={{ fontStyle: 'italic', color: accent }}>Überall.</span>
+          </h1>
+          <p style={{ fontSize: 17.5, lineHeight: 1.7, color: '#6b5d4e', maxWidth: 430, margin: '0 0 36px' }}>
+            Bewegung, die sich anfühlt wie durch einen schönen Feed scrollen. Kleine Übungen, großer Effekt — ganz ohne Druck.
+          </p>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 22, flexWrap: 'wrap' }}>
+            <a href="#download" style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 11, background: accent, color: '#FAFAF7', fontSize: 15.5, fontWeight: 600, padding: '16px 32px', borderRadius: 44 }}>
+              App entdecken
+              <span style={{ width: 18, height: 18, borderRadius: '50%', border: '1.5px solid rgba(250,250,247,0.6)', display: 'inline-block' }} />
+            </a>
+            <a href="#features" style={{ textDecoration: 'none', fontSize: 15, fontWeight: 600, color: '#3D2B1F', borderBottom: `1.5px solid ${accent}`, paddingBottom: 3 }}>
+              Mehr erfahren
+            </a>
+          </div>
+        </div>
+
+        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+          <div style={{ width: 320, height: 420, borderRadius: '40px 16px 40px 40px', background: accent, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', overflow: 'hidden' }}>
+            <div style={{ position: 'absolute', inset: 0, background: 'rgba(250,250,247,0.08)' }} />
+            <span style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontSize: 96, fontWeight: 600, color: 'rgba(250,250,247,0.9)', position: 'relative', zIndex: 1 }}>F</span>
+          </div>
+        </div>
+      </section>
+
+      {/* Features */}
+      <section id="features" style={{ background: '#F5F0E8', padding: '100px 48px' }}>
+        <div style={{ maxWidth: 1240, margin: '0 auto' }}>
+          <div style={{ textAlign: 'center', marginBottom: 60 }}>
+            <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: 2.5, textTransform: 'uppercase', color: accent }}>Features</span>
+            <h2 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 46, letterSpacing: -0.6, color: '#3D2B1F', margin: '14px 0 0' }}>
+              Warum Fittimo?
+            </h2>
+          </div>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 24 }}>
+            {features.map((f) => (
+              <div key={f.title} style={{ background: '#FAFAF7', borderRadius: 28, padding: '36px 40px' }}>
+                <h3 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 600, fontSize: 26, color: '#3D2B1F', margin: '0 0 10px' }}>{f.title}</h3>
+                <p style={{ fontSize: 15, color: '#6b5d4e', margin: 0, lineHeight: 1.7 }}>{f.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Download */}
+      <section id="download" style={{ background: '#3D2B1F', padding: '100px 48px', textAlign: 'center' }}>
+        <div style={{ maxWidth: 600, margin: '0 auto' }}>
+          <h2 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 50, color: '#FAFAF7', margin: '0 0 20px' }}>
+            Bereit für mehr Bewegung?
+          </h2>
+          <p style={{ fontSize: 16, color: 'rgba(250,250,247,0.65)', margin: '0 0 40px', lineHeight: 1.7 }}>
+            Fittimo erscheint bald. Trage dich in unseren Newsletter ein und erfahre als Erste davon.
+          </p>
+          <Link href="/#newsletter" style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 10, background: accent, color: '#FAFAF7', fontSize: 15.5, fontWeight: 600, padding: '16px 36px', borderRadius: 44 }}>
+            Benachrichtigen lassen →
+          </Link>
+        </div>
+      </section>
+
+    </div>
+  )
+}

app/apps/page.tsx

@@ -0,0 +1,102 @@
+import type { Metadata } from 'next'
+import Link from 'next/link'
+
+export const metadata: Metadata = {
+  title: 'Apps – HyggeCraftery',
+  description: 'Drei sanfte Apps für einen langsameren, bewussteren Alltag.',
+}
+
+const apps = [
+  {
+    name: 'Snakkimo',
+    tagline: 'Eine Kachel. Eine Lektion. Eine Sprache.',
+    desc: 'Sprachen lernen, das sich anfühlt wie durch einen schönen Feed scrollen. Kleine Lektionen, großer Effekt — ganz ohne Druck.',
+    href: '/apps/snakkimo',
+    accent: '#7BA7BC',
+    iconRadius: '20px 20px 20px 6px',
+    badge: 'Sprachen lernen für Erwachsene',
+  },
+  {
+    name: 'Fittimo',
+    tagline: 'Eine Übung. Jederzeit. Überall.',
+    desc: 'Sanfte Bewegung und Atemübungen für Körper und Geist im Einklang. Kleine Übungen, großer Effekt.',
+    href: '/apps/fittimo',
+    accent: '#7DAF8A',
+    iconRadius: '20px 6px 20px 20px',
+    badge: 'Bewegung im Alltag',
+  },
+  {
+    name: 'Rezeptimo',
+    tagline: 'Ein Rezept. Einfach. Genussvoll.',
+    desc: 'Saisonale Rezepte zum langsamen Kochen — ehrlich, einfach, nährend. Ganz ohne Stress.',
+    href: '/apps/rezeptimo',
+    accent: '#C4896A',
+    iconRadius: '6px 20px 20px 20px',
+    badge: 'Kochen mit Freude',
+  },
+]
+
+export default function AppsPage() {
+  return (
+    <div style={{ fontFamily: 'var(--font-mulish, Mulish, sans-serif)', color: '#3D2B1F', background: '#FAFAF7' }}>
+      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '80px 48px 120px' }}>
+
+        <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 80px' }}>
+          <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: 2.5, textTransform: 'uppercase', color: '#A8B89A' }}>Unsere Apps</span>
+          <h1 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 58, letterSpacing: -0.8, color: '#3D2B1F', margin: '14px 0 18px' }}>
+            Achtsamkeit in der Tasche
+          </h1>
+          <p style={{ fontSize: 17, color: '#6b5d4e', margin: 0, lineHeight: 1.7 }}>
+            Drei sanfte Begleiter für einen langsameren, bewussteren Alltag.
+          </p>
+        </div>
+
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
+          {apps.map((app, i) => (
+            <Link
+              key={app.name}
+              href={app.href}
+              style={{
+                textDecoration: 'none',
+                display: 'grid',
+                gridTemplateColumns: i % 2 === 0 ? '1fr 2fr' : '2fr 1fr',
+                gap: 48,
+                alignItems: 'center',
+                background: '#F5F0E8',
+                borderRadius: 40,
+                padding: '56px 64px',
+                color: 'inherit',
+              }}
+            >
+              {i % 2 !== 0 && (
+                <div>
+                  <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: 2, textTransform: 'uppercase', color: app.accent }}>{app.badge}</span>
+                  <h2 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 44, letterSpacing: -0.6, color: '#3D2B1F', margin: '12px 0 16px' }}>{app.tagline}</h2>
+                  <p style={{ fontSize: 16, color: '#6b5d4e', margin: '0 0 28px', lineHeight: 1.7 }}>{app.desc}</p>
+                  <span style={{ fontSize: 15, fontWeight: 600, color: app.accent, borderBottom: `1.5px solid ${app.accent}`, paddingBottom: 3 }}>Mehr erfahren →</span>
+                </div>
+              )}
+
+              <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+                <div style={{ width: 200, height: 200, borderRadius: app.iconRadius, background: app.accent, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                  <span style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontSize: 64, fontWeight: 600, color: 'rgba(250,250,247,0.9)' }}>
+                    {app.name[0]}
+                  </span>
+                </div>
+              </div>
+
+              {i % 2 === 0 && (
+                <div>
+                  <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: 2, textTransform: 'uppercase', color: app.accent }}>{app.badge}</span>
+                  <h2 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 44, letterSpacing: -0.6, color: '#3D2B1F', margin: '12px 0 16px' }}>{app.tagline}</h2>
+                  <p style={{ fontSize: 16, color: '#6b5d4e', margin: '0 0 28px', lineHeight: 1.7 }}>{app.desc}</p>
+                  <span style={{ fontSize: 15, fontWeight: 600, color: app.accent, borderBottom: `1.5px solid ${app.accent}`, paddingBottom: 3 }}>Mehr erfahren →</span>
+                </div>
+              )}
+            </Link>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

app/apps/rezeptimo/page.tsx

@@ -0,0 +1,109 @@
+import type { Metadata } from 'next'
+import Link from 'next/link'
+
+export const metadata: Metadata = {
+  title: 'Rezeptimo – Kochen mit Freude | HyggeCraftery',
+  description: 'Saisonale Rezepte zum langsamen Kochen — ehrlich, einfach, nährend.',
+}
+
+const accent = '#C4896A'
+
+const features = [
+  { title: 'Saisonal', desc: 'Rezepte, die mit der Natur gehen. Frühling, Sommer, Herbst, Winter.' },
+  { title: 'Einfach', desc: 'Wenige Zutaten, klare Schritte — Kochen als Meditation, nicht als Stress.' },
+  { title: 'Ehrlich', desc: 'Keine Hochglanzküche. Echtes Essen für echte Menschen.' },
+  { title: 'Nährend', desc: 'Gut für Körper und Seele. Slow Food im besten Sinne.' },
+]
+
+export default function RezeptimoPage() {
+  return (
+    <div style={{ fontFamily: 'var(--font-mulish, Mulish, sans-serif)', color: '#3D2B1F', background: '#FAFAF7', overflow: 'hidden' }}>
+
+      {/* App-Header */}
+      <header style={{ position: 'relative', zIndex: 10, maxWidth: 1240, margin: '0 auto', padding: '30px 48px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+          <div style={{ width: 34, height: 34, borderRadius: '50% 50% 50% 12px', background: accent, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <span style={{ width: 13, height: 13, borderRadius: '50%', border: '2.5px solid #FAFAF7', display: 'inline-block' }} />
+          </div>
+          <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
+            <span style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontSize: 24, fontWeight: 600, letterSpacing: 0.4, color: '#3D2B1F' }}>Rezeptimo</span>
+            <span style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: 1.2, textTransform: 'uppercase', color: '#9a8b78', marginTop: 3 }}>by HyggeCraftery</span>
+          </div>
+        </div>
+        <nav style={{ display: 'flex', alignItems: 'center', gap: 34 }}>
+          <Link href="/" style={{ textDecoration: 'none', color: '#3D2B1F', fontSize: 14.5, fontWeight: 500, opacity: 0.78 }}>← HyggeCraftery</Link>
+          <a href="#features" style={{ textDecoration: 'none', color: '#3D2B1F', fontSize: 14.5, fontWeight: 500, opacity: 0.78 }}>Features</a>
+          <a href="#download" style={{ textDecoration: 'none', color: '#FAFAF7', background: accent, fontSize: 14, fontWeight: 600, padding: '11px 22px', borderRadius: 40 }}>App entdecken</a>
+        </nav>
+      </header>
+
+      {/* Hero */}
+      <section style={{ maxWidth: 1240, margin: '0 auto', padding: '46px 48px 96px', display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 48, alignItems: 'center' }}>
+        <div>
+          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 9, background: `${accent}28`, borderRadius: 40, padding: '7px 16px 7px 12px', marginBottom: 26 }}>
+            <span style={{ width: 7, height: 7, borderRadius: '50%', background: accent, display: 'inline-block' }} />
+            <span style={{ fontSize: 12.5, fontWeight: 600, letterSpacing: 1.2, textTransform: 'uppercase', color: '#7a5a40' }}>Kochen mit Freude</span>
+          </div>
+          <h1 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 66, lineHeight: 1.08, letterSpacing: -0.8, margin: '0 0 22px', color: '#3D2B1F' }}>
+            Ein Rezept.<br />Einfach.<br /><span style={{ fontStyle: 'italic', color: accent }}>Genussvoll.</span>
+          </h1>
+          <p style={{ fontSize: 17.5, lineHeight: 1.7, color: '#6b5d4e', maxWidth: 430, margin: '0 0 36px' }}>
+            Kochen, das sich anfühlt wie durch einen schönen Feed scrollen. Saisonale Rezepte, einfach gemacht — ganz ohne Stress.
+          </p>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 22, flexWrap: 'wrap' }}>
+            <a href="#download" style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 11, background: accent, color: '#FAFAF7', fontSize: 15.5, fontWeight: 600, padding: '16px 32px', borderRadius: 44 }}>
+              App entdecken
+              <span style={{ width: 18, height: 18, borderRadius: '50%', border: '1.5px solid rgba(250,250,247,0.6)', display: 'inline-block' }} />
+            </a>
+            <a href="#features" style={{ textDecoration: 'none', fontSize: 15, fontWeight: 600, color: '#3D2B1F', borderBottom: `1.5px solid ${accent}`, paddingBottom: 3 }}>
+              Mehr erfahren
+            </a>
+          </div>
+        </div>
+
+        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+          <div style={{ width: 320, height: 420, borderRadius: '16px 40px 40px 40px', background: accent, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', overflow: 'hidden' }}>
+            <div style={{ position: 'absolute', inset: 0, background: 'rgba(250,250,247,0.08)' }} />
+            <span style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontSize: 96, fontWeight: 600, color: 'rgba(250,250,247,0.9)', position: 'relative', zIndex: 1 }}>R</span>
+          </div>
+        </div>
+      </section>
+
+      {/* Features */}
+      <section id="features" style={{ background: '#F5F0E8', padding: '100px 48px' }}>
+        <div style={{ maxWidth: 1240, margin: '0 auto' }}>
+          <div style={{ textAlign: 'center', marginBottom: 60 }}>
+            <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: 2.5, textTransform: 'uppercase', color: accent }}>Features</span>
+            <h2 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 46, letterSpacing: -0.6, color: '#3D2B1F', margin: '14px 0 0' }}>
+              Warum Rezeptimo?
+            </h2>
+          </div>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 24 }}>
+            {features.map((f) => (
+              <div key={f.title} style={{ background: '#FAFAF7', borderRadius: 28, padding: '36px 40px' }}>
+                <h3 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 600, fontSize: 26, color: '#3D2B1F', margin: '0 0 10px' }}>{f.title}</h3>
+                <p style={{ fontSize: 15, color: '#6b5d4e', margin: 0, lineHeight: 1.7 }}>{f.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Download */}
+      <section id="download" style={{ background: '#3D2B1F', padding: '100px 48px', textAlign: 'center' }}>
+        <div style={{ maxWidth: 600, margin: '0 auto' }}>
+          <h2 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 50, color: '#FAFAF7', margin: '0 0 20px' }}>
+            Bereit für langsames Kochen?
+          </h2>
+          <p style={{ fontSize: 16, color: 'rgba(250,250,247,0.65)', margin: '0 0 40px', lineHeight: 1.7 }}>
+            Rezeptimo erscheint bald. Trage dich in unseren Newsletter ein und erfahre als Erste davon.
+          </p>
+          <Link href="/#newsletter" style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 10, background: accent, color: '#FAFAF7', fontSize: 15.5, fontWeight: 600, padding: '16px 36px', borderRadius: 44 }}>
+            Benachrichtigen lassen →
+          </Link>
+        </div>
+      </section>
+
+    </div>
+  )
+}

app/apps/snakkimo/page.tsx

@@ -0,0 +1,109 @@
+import type { Metadata } from 'next'
+import Link from 'next/link'
+
+export const metadata: Metadata = {
+  title: 'Snakkimo – Sprachen lernen | HyggeCraftery',
+  description: 'Sprachen lernen, das sich anfühlt wie durch einen schönen Feed scrollen. Kleine Lektionen, großer Effekt.',
+}
+
+const accent = '#7BA7BC'
+
+const features = [
+  { title: 'Kachelformat', desc: 'Jede Lektion passt auf eine Kachel — kein Scrollen, kein Suchen, einfach lernen.' },
+  { title: 'Tägliche Impulse', desc: 'Eine neue Vokabel, ein neuer Satz, ein neuer Moment. Jeden Tag.' },
+  { title: 'Ohne Druck', desc: 'Kein Streak-Stress, keine Punktejagd. Nur du und die Sprache.' },
+  { title: 'Viele Sprachen', desc: 'Spanisch, Französisch, Schwedisch, Japanisch und viele mehr.' },
+]
+
+export default function SnakkimoPage() {
+  return (
+    <div style={{ fontFamily: 'var(--font-mulish, Mulish, sans-serif)', color: '#3D2B1F', background: '#FAFAF7', overflow: 'hidden' }}>
+
+      {/* App-Header */}
+      <header style={{ position: 'relative', zIndex: 10, maxWidth: 1240, margin: '0 auto', padding: '30px 48px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+          <div style={{ width: 34, height: 34, borderRadius: '50% 50% 50% 12px', background: accent, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <span style={{ width: 13, height: 13, borderRadius: '50%', border: '2.5px solid #FAFAF7', display: 'inline-block' }} />
+          </div>
+          <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
+            <span style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontSize: 24, fontWeight: 600, letterSpacing: 0.4, color: '#3D2B1F' }}>Snakkimo</span>
+            <span style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: 1.2, textTransform: 'uppercase', color: '#9a8b78', marginTop: 3 }}>by HyggeCraftery</span>
+          </div>
+        </div>
+        <nav style={{ display: 'flex', alignItems: 'center', gap: 34 }}>
+          <Link href="/" style={{ textDecoration: 'none', color: '#3D2B1F', fontSize: 14.5, fontWeight: 500, opacity: 0.78 }}>← HyggeCraftery</Link>
+          <a href="#features" style={{ textDecoration: 'none', color: '#3D2B1F', fontSize: 14.5, fontWeight: 500, opacity: 0.78 }}>Features</a>
+          <a href="#download" style={{ textDecoration: 'none', color: '#FAFAF7', background: accent, fontSize: 14, fontWeight: 600, padding: '11px 22px', borderRadius: 40 }}>App entdecken</a>
+        </nav>
+      </header>
+
+      {/* Hero */}
+      <section style={{ maxWidth: 1240, margin: '0 auto', padding: '46px 48px 96px', display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 48, alignItems: 'center' }}>
+        <div>
+          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 9, background: `${accent}28`, borderRadius: 40, padding: '7px 16px 7px 12px', marginBottom: 26 }}>
+            <span style={{ width: 7, height: 7, borderRadius: '50%', background: accent, display: 'inline-block' }} />
+            <span style={{ fontSize: 12.5, fontWeight: 600, letterSpacing: 1.2, textTransform: 'uppercase', color: '#5f7e8d' }}>Sprachen lernen für Erwachsene</span>
+          </div>
+          <h1 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 66, lineHeight: 1.08, letterSpacing: -0.8, margin: '0 0 22px', color: '#3D2B1F' }}>
+            Eine Kachel.<br />Eine Lektion.<br /><span style={{ fontStyle: 'italic', color: accent }}>Eine Sprache.</span>
+          </h1>
+          <p style={{ fontSize: 17.5, lineHeight: 1.7, color: '#6b5d4e', maxWidth: 430, margin: '0 0 36px' }}>
+            Sprachen lernen, das sich anfühlt wie durch einen schönen Feed scrollen. Kleine Lektionen, großer Effekt — ganz ohne Druck.
+          </p>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 22, flexWrap: 'wrap' }}>
+            <a href="#download" style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 11, background: accent, color: '#FAFAF7', fontSize: 15.5, fontWeight: 600, padding: '16px 32px', borderRadius: 44 }}>
+              App entdecken
+              <span style={{ width: 18, height: 18, borderRadius: '50%', border: '1.5px solid rgba(250,250,247,0.6)', display: 'inline-block' }} />
+            </a>
+            <a href="#features" style={{ textDecoration: 'none', fontSize: 15, fontWeight: 600, color: '#3D2B1F', borderBottom: `1.5px solid ${accent}`, paddingBottom: 3 }}>
+              Mehr erfahren
+            </a>
+          </div>
+        </div>
+
+        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+          <div style={{ width: 320, height: 420, borderRadius: '40px 40px 40px 16px', background: accent, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', overflow: 'hidden' }}>
+            <div style={{ position: 'absolute', inset: 0, background: 'rgba(250,250,247,0.08)' }} />
+            <span style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontSize: 96, fontWeight: 600, color: 'rgba(250,250,247,0.9)', position: 'relative', zIndex: 1 }}>S</span>
+          </div>
+        </div>
+      </section>
+
+      {/* Features */}
+      <section id="features" style={{ background: '#F5F0E8', padding: '100px 48px' }}>
+        <div style={{ maxWidth: 1240, margin: '0 auto' }}>
+          <div style={{ textAlign: 'center', marginBottom: 60 }}>
+            <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: 2.5, textTransform: 'uppercase', color: accent }}>Features</span>
+            <h2 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 46, letterSpacing: -0.6, color: '#3D2B1F', margin: '14px 0 0' }}>
+              Warum Snakkimo?
+            </h2>
+          </div>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 24 }}>
+            {features.map((f) => (
+              <div key={f.title} style={{ background: '#FAFAF7', borderRadius: 28, padding: '36px 40px' }}>
+                <h3 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 600, fontSize: 26, color: '#3D2B1F', margin: '0 0 10px' }}>{f.title}</h3>
+                <p style={{ fontSize: 15, color: '#6b5d4e', margin: 0, lineHeight: 1.7 }}>{f.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Download */}
+      <section id="download" style={{ background: '#3D2B1F', padding: '100px 48px', textAlign: 'center' }}>
+        <div style={{ maxWidth: 600, margin: '0 auto' }}>
+          <h2 style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)', fontWeight: 500, fontSize: 50, color: '#FAFAF7', margin: '0 0 20px' }}>
+            Bereit zum Lernen?
+          </h2>
+          <p style={{ fontSize: 16, color: 'rgba(250,250,247,0.65)', margin: '0 0 40px', lineHeight: 1.7 }}>
+            Snakkimo erscheint bald. Trage dich in unseren Newsletter ein und erfahre als Erste davon.
+          </p>
+          <Link href="/#newsletter" style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 10, background: accent, color: '#FAFAF7', fontSize: 15.5, fontWeight: 600, padding: '16px 36px', borderRadius: 44 }}>
+            Benachrichtigen lassen →
+          </Link>
+        </div>
+      </section>
+
+    </div>
+  )
+}