# Carrot — Landing Page Design Plan

> Ziel: Eine Landing Page die konvertiert, Persönlichkeit hat, und NICHT wie ein AI-Template aussieht.
> Stand: Mai 2026 (Komplett-Redesign live in Commit `14032be`)

> **Update Mai 2026:** Die Landing Page wurde komplett redesigned. Die hier beschriebene
> Design-Philosophie und Zielgruppe gelten weiter; die finale Umsetzung in `apps/web/src/components/sections/`
> hat acht Sektionen statt der ursprünglichen sieben (Live Demo Insel als Conversion-Hook hinzugefügt),
> JetBrains Mono als Mono-Akzent ergänzt, View Transitions API + scroll-driven CSS animations integriert,
> und das Squad-Pricing prominent in eine eigene Pricing-Sektion gehoben. Diese Datei dokumentiert die
> ursprünglichen Entscheidungen — die Code-Realität ist Source-of-Truth.

---

## Zielgruppe

**Primär:** Junge Erwachsene (18-35) im DACH-Raum, die Gewohnheiten aufbauen oder ablegen wollen — Sport, Lesen, Rauchen aufhören, Meditation, gesündere Ernährung.

**Psychografie:**
- Wollen sich verbessern, scheitern aber an Disziplin
- Aktiv auf TikTok/Instagram, konsumieren Self-Improvement Content
- Skeptisch gegenüber "noch einer Habit App" — müssen sofort den Unterschied spüren
- Schätzen Authentizität über Corporate-Polish
- Community-orientiert, wollen nicht alleine kämpfen

---

## Design-Philosophie: Anti-AI, Pro-Persönlichkeit

### Was die Seite NICHT sein darf:
- Zentrierter Hero mit Gradient-Blob und generischer Illustration
- Blaue/Lila Safe-Palette die jedes AI-Tool ausspuckt
- Geometrische Sans-Serif (Inter, Poppins) überall
- Stock-Photos von lächelnden Menschen
- Perfekt symmetrische Layouts ohne Spannung
- Generische Testimonials ("Great app! — Sarah M.")

### Was die Seite sein MUSS:
- **Mutig Orange** — #FA7000 als dominantes Statement, nicht als zaghafter Akzent
- **Typografie als Identität** — ein markanter Display-Font der sofort wiedererkennbar ist
- **Asymmetrisch** — Layouts mit Spannung, nicht alles zentriert
- **Meinungsstark** — Copy die eine Haltung hat, nicht generische Benefit-Listen
- **Echte Inhalte** — echte Screenshots, echte Testimonials (später), echte Zahlen
- **Schnell** — unter 2 Sekunden Ladezeit (Astro = zero JS, kein Framework-Bloat)

---

## Farbpalette

| Rolle | Farbe | Verwendung |
|-------|-------|-----------|
| **Primary** | `#FA7000` (Hot Orange) | CTA Buttons, Headlines, Akzente, Hero-Hintergrund |
| **Background** | `#FFFFFF` (White) | Haupthintergrund, cleane Sektionen |
| **Warm Surface** | `#FFF8F2` | Abwechslungs-Sektionen (leichter Orange-Tint, nicht grau) |
| **Text Primary** | `#171717` | Body Text, dunkel und lesbar |
| **Text Secondary** | `#525252` | Untertitel, Descriptions |
| **Text Muted** | `#A3A3A3` | Labels, Fußnoten |
| **Dark Section** | `#1A1A1A` | Eine dunkle Sektion für Kontrast (z.B. Features oder Social Proof) |
| **Success Green** | `#22C55E` | Check-Marks, "Geschafft"-Elemente |

### Farbstrategie

Orange NICHT als Hintergrund der gesamten Seite — sondern als **punktuelles Power-Statement**:
- Hero-Headline in Orange
- CTA Buttons in Orange auf Weiß
- Eine volle Orange-Sektion als Akzent (z.B. CTA-Banner)
- Kleine Orange-Details: Unterstreichungen, Icons, Hover-States

---

## Typografie

### Warum Typografie der wichtigste Differenziator ist

In 2026 ist ein **einziger markanter Display-Font** mehr wert als jede Illustration. Er ist sofort wiedererkennbar, kostet nichts (Google Fonts), und kein AI-Tool würde ihn wählen.

### Font-Empfehlung

| Rolle | Font | Warum |
|-------|------|-------|
| **Display / Headlines** | **Bricolage Grotesque** (Google Fonts) | Warm, charaktervoll, leicht quirky ohne unprofessionell zu sein. Hat personality die Inter/Poppins nicht haben. Variable Font. |
| **Body** | **DM Sans** (Google Fonts) | Clean, gut lesbar, neutral genug um den Display-Font strahlen zu lassen. Bewährt in Hof-Projekt. |
| **Alternative Display** | **Fraunces** oder **Sora** | Falls Bricolage nicht gefällt: Fraunces (funky Soft-Serif), Sora (warm geometric mit Charakter) |

### Typografie-Hierarchie

| Element | Size (Desktop) | Size (Mobile) | Weight | Font |
|---------|---------------|---------------|--------|------|
| Hero Headline | 72-80px | 40-48px | 800 (ExtraBold) | Bricolage Grotesque |
| Section Headlines | 48-56px | 32-36px | 700 (Bold) | Bricolage Grotesque |
| Sub-Headlines | 24-28px | 20-24px | 600 (SemiBold) | Bricolage Grotesque |
| Body | 18px | 16px | 400 (Regular) | DM Sans |
| Small / Labels | 14px | 14px | 500 (Medium) | DM Sans |

---

## Seitenstruktur (Scroll-Reihenfolge)

### 1. Hero — "Der erste Eindruck" (100vh)

**Layout:** Asymmetrisch. Headline links, App-Mockup rechts (leicht rotiert, nicht perfekt gerade).

**Inhalt:**
- Große mutige Headline: **"Deine Gewohnheiten. Dein Game."** (oder ähnlich meinungsstarke Copy)
- Kurzer Untertitel: "Die App die dich motiviert — mit Streaks, Rewards und einer Community die dich pusht."
- **Ein einziger CTA:** "Bald verfügbar — Erinnere mich" (Email-Signup, da die App noch nicht live ist)
- App-Mockup: echtes UI-Screenshot im iPhone-Frame

**Design-Details:**
- Headline in Orange (#FA7000), riesig, überlappend mit dem Mockup
- Weißer Hintergrund, viel Whitespace
- Subtle Karotten-Icon als dekoratives Element (nicht kitschig, eher wie ein Wasserzeichen)
- Kein Hero-Image, kein Gradient — Typografie IST der Hero

**Mobile:** Headline oben, Mockup darunter, sticky CTA-Button am unteren Rand.

### 2. Problem & Lösung — "Warum noch eine App?" (ca. 70vh)

**Layout:** Zentrierter Text, aber mit asymmetrischen Dekor-Elementen.

**Inhalt:**
- Headline: **"95% aller Habit-Apps scheitern. Wir wissen warum."**
- 3 Schmerzpunkte mit Icons:
  - "Keine Motivation nach Tag 3" → Carrot hat Streaks & Rewards
  - "Alleine ist es schwer" → Carrot hat Community & Accountability
  - "Trockene Tracker ohne Seele" → Carrot ist eine Brand, kein Tool
- Jeder Punkt: Kurzes Problem → Carrot's Lösung

**Design-Details:**
- Hintergrund: `#FFF8F2` (warmes Off-White, nicht kalt-grau)
- Icons: einfache, custom Line-Icons in Orange — keine generischen Emoji oder Phosphor-Icons
- Starker Kontrast zwischen Problem (grauer Text) und Lösung (Orange, Bold)

### 3. Feature Showcase — "Was Carrot kann" (ca. 120vh)

**Layout:** Abwechselnd links/rechts (App-Screenshot + Text), NICHT als Grid.

**3 Key Features:**

**a) Streaks & Gamification**
- Screenshot: Habit-Liste mit Streak-Counter und XP
- Copy: "Jeder Check-in zählt. Bau Streaks auf, sammle XP, unlock Badges."

**b) Dein Fortschritt, visualisiert**
- Screenshot: Progress-Screen mit Charts
- Copy: "Sieh wie du wächst. Tägliche, wöchentliche und monatliche Insights."

**c) Squads — Community (Coming Soon)**
- Illustration/Mockup: Squad-Screen mit Squad Leaderboard oder Squad Challenge
- Copy: "Nicht alleine. Gründe ein Squad mit Freunden — Squad Challenges, Squad Leaderboards und echte Accountability. Zusammen bleibt ihr dran."

**Design-Details:**
- Dunkler Hintergrund (`#1A1A1A`) für diese Sektion — die App-Screenshots leuchten auf Dunkel
- Dezente Scroll-Animationen: Screenshots sliden sanft rein (kein Bounce, kein Overshoot)
- Nummern (01, 02, 03) als großer dekorativer Text im Hintergrund

### 4. Social Proof — "Nicht nur wir sagen das" (ca. 50vh)

**Inhalt (Phase 1 — vor Launch):**
- Statt Testimonials: **Markt-Zahlen als Social Proof**
  - "$20 Mrd. — Wellness App Markt bis 2030"
  - "75 Mio. Menschen nutzen Habit-Apps weltweit"
  - "Runtastic hat bewiesen: Aus Österreich geht's."
- Alternativ: Counter "X Leute auf der Warteliste" (wenn Email-Signup funktioniert)

**Inhalt (Phase 2 — nach Beta):**
- Echte User-Testimonials mit Foto und vollem Namen
- App Store Rating Badge
- Press-Logos (wenn vorhanden)

**Design-Details:**
- Weißer Hintergrund
- Zahlen in riesiger Display-Schrift (Orange), Kontext darunter klein
- Minimal, keine Boxen oder Cards — nur Typografie

### 5. Brand Story — "Mehr als eine App" (ca. 60vh)

**Inhalt:**
- Headline: **"Carrot ist kein Tool. Carrot ist eine Bewegung."**
- Kurzer Absatz über die Vision: App + Merch + Community + Events
- Evtl. ein Foto vom Team (Tim + Co-Founder) — Authentizität!
- "Built in Austria 🇦🇹" Badge

**Design-Details:**
- Full-width Orange-Hintergrund (`#FA7000`) mit weißem Text
- Das ist die EINE mutige Farb-Sektion die die Seite braucht
- Hier darf es emotional werden

### 6. CTA / Waitlist — "Mach mit" (ca. 40vh)

**Inhalt:**
- Headline: **"Sei dabei wenn Carrot startet."**
- Email-Input + Button: "Erinnere mich"
- Kleiner Text: "Kein Spam. Nur ein Reminder wenn's losgeht."
- Optional: Social Media Links (TikTok, Instagram)

**Design-Details:**
- Weißer Hintergrund, viel Whitespace
- Großes Email-Feld, Orange Submit-Button
- Karotten-Icon als subtiles Dekor-Element

### 7. Footer (minimal)

- Logo (CARROT in Display-Font)
- Legal Links: Impressum, Datenschutz (Pflicht in AT)
- Social Links
- "Made in Austria 🇦🇹"
- Copyright

---

## Animationen & Micro-Interactions

### Regeln:
- **Subtil, nicht spektakulär** — Animationen sollen sich natürlich anfühlen
- **Kein Bounce, kein Overshoot** — das schreit "AI-Template"
- **Reduce Motion respektieren** — `prefers-reduced-motion` Media Query

### Geplante Animationen:

| Element | Animation | Trigger |
|---------|-----------|---------|
| Hero Headline | Fade-in + leichtes Slide-up (200ms) | Page Load |
| App Mockup | Sanftes Slide von rechts (400ms, ease-out) | Page Load |
| Feature Screenshots | Fade-in + Slide (300ms) | Scroll into View |
| Zahlen (Social Proof) | Count-up Animation | Scroll into View |
| CTA Button | Subtle Scale auf Hover (1.02) | Hover |
| Orange-Sektion | Kein — statisch, Farbe spricht für sich | — |

### Technisch:
- CSS-only Animationen (kein JS-Framework nötig)
- `IntersectionObserver` für Scroll-Trigger (einziges JS auf der Seite)
- CSS `transition` + `@keyframes` für alle Animationen

---

## App-Mockup Strategie

### Phase 1 (jetzt — kein echtes UI):
- **Figma/Design-Mockup** der geplanten App-Screens
- Im iPhone 15-Frame, leicht rotiert/angewinkelt (nicht flat frontal)
- 2-3 Screens: Habit-Liste, Check-in Animation, Progress

### Phase 2 (nach MVP):
- Echte Screenshots ersetzen die Mockups
- Screen-Recording als kurzes Video-Loop (kein Autoplay mit Sound)

### Darstellung:
- **Keine generischen Mockup-Templates** von Smartmockups/Placeit
- Eigenes CSS-basiertes Phone-Frame oder cleanes PNG-Cutout
- Schatten unter dem Phone für Tiefe (`box-shadow`, kein Drop-Shadow-Filter)

---

## Responsive Breakpoints

| Breakpoint | Layout |
|-----------|--------|
| **Desktop** (1200px+) | Asymmetrisches 2-Column Layout, große Typografie |
| **Tablet** (768-1199px) | Angepasste 2-Column, kleinere Fonts |
| **Mobile** (< 768px) | Single Column, stacked, sticky Bottom-CTA |

### Mobile-Besonderheiten:
- Sticky CTA-Button am unteren Bildschirmrand (Orange, "Erinnere mich")
- Hamburger Menu? **Nein** — es gibt nichts zu navigieren, es ist eine Single-Page
- Thumb-zone-friendly Tap-Targets (min. 44px)

---

## Performance-Ziele

| Metrik | Ziel |
|--------|------|
| First Contentful Paint | < 1.0s |
| Largest Contentful Paint | < 2.0s |
| Cumulative Layout Shift | < 0.1 |
| Total Page Size | < 500KB (ohne Mockup-Bilder) |
| Lighthouse Score | 95+ |

### Wie:
- Astro Static Output (Pre-rendered HTML, zero JS by default)
- Fonts: Google Fonts mit `display=swap`, nur benötigte Weights
- Bilder: WebP/AVIF, lazy-loaded (Astro `<Image />` Component für automatische Optimierung)
- Kein JavaScript an den Client (außer explizite Inseln für Interaktivität)
- Plausible Analytics = kein Cookie-Banner nötig

---

## Copy-Richtlinien

### Sprache: Deutsch (DACH-first)
- Du-Form, nicht Sie
- Kurze Sätze, kein Marketing-Sprech
- Meinungsstark, nicht neutral
- Emojis sparsam (1-2 pro Sektion max)
- Kein "Revolutionär", kein "Game-Changer", kein "Cutting-Edge"

### Tone of Voice Beispiele:

| Nicht so | Sondern so |
|----------|-----------|
| "Die revolutionäre App für bessere Gewohnheiten" | "Deine Gewohnheiten. Dein Game." |
| "Starten Sie jetzt Ihre Reise zu einem besseren Ich" | "Fang an. Bleib dran. Level up." |
| "Unsere innovative Lösung hilft Ihnen..." | "95% aller Habit-Apps scheitern. Wir wissen warum." |
| "Registrieren Sie sich kostenlos" | "Erinnere mich" |

---

## Mobile-First (83% des Traffics)

Landing Pages für Apps bekommen **83% Mobile Traffic**. Desktop ist zweitrangig.

### Mobile-First Regeln:
- **Design startet bei 375px** (iPhone SE), dann hochskalieren
- **Sticky Bottom CTA** — immer sichtbar, Orange Button, "Erinnere mich"
- **Kein Hamburger Menu** — Single-Page braucht keine Navigation
- **Tap-Targets mindestens 44px**
- **Keine Hover-Animationen** die auf Touch nicht funktionieren
- **Vertikaler Scroll** — keine horizontalen Carousels oder Swipe-Elemente
- **Font-Sizes testen** — Minimum 16px Body (verhindert Auto-Zoom auf iOS)

---

## Post-Signup Flow (Waitlist)

### Was passiert nach der Email-Eingabe:

```
1. User gibt Email ein → klickt "Erinnere mich"
2. Supabase Edge Function speichert in waitlist-Tabelle
3. Success-State: "Du bist dabei! 🥕" mit Waitlist-Position
4. Optional: "Teil es mit Freunden" — Referral Link
5. Confirmation Email (Double Opt-In, DSGVO-Pflicht in AT)
```

### Referral Loop (virales Wachstum):
- Nach Signup: "Teile Carrot und rück auf der Warteliste vor"
- Unique Referral Link pro User
- Share-Buttons: WhatsApp, Instagram Story, Link kopieren
- Jeder Referral = +1 Position auf der Warteliste

### Waitlist Counter als Social Proof:
- "Bereits **X** Leute auf der Warteliste" — live Counter auf der Seite
- Wird ab 50+ Signups sichtbar (nicht bei 3)
- Supabase Realtime für Live-Updates (nice-to-have)

---

## Technische Umsetzung

### Framework-Entscheidung

| Option | Vorteile | Nachteile |
|--------|---------|-----------|
| **Astro** (gewählt) | Zero JS default, schnellster LCP, gebaut für Landing Pages | Neues Tool im Stack |
| **SvelteKit** | Tim kennt es, kann später interaktiv werden | Schickt JS mit, auch bei Static |

**Entscheidung: Astro.** Zero JS by default = schnellster LCP, perfekt für eine statische Landing Page. Falls später interaktive Inseln nötig sind (z.B. Email-Form mit Validierung), können einzelne Komponenten JS hydratisiert werden. SvelteKit bleibt als Option für ein späteres Admin Portal.

### Stack

- **Framework:** Astro 5 (Static Output, bereits in `apps/web/`)
- **Styling:** Scoped CSS in Astro Components (kein Tailwind — zu generisch, zu erkennbar)
- **Fonts:** Google Fonts (Bricolage Grotesque + DM Sans), `display=swap`, nur Weight 400/600/700/800
- **Animations:** CSS Transitions + `IntersectionObserver` (kein JS-Framework nötig)
- **Email-Signup:** Supabase Edge Function → `waitlist` Tabelle → Double Opt-In Email
- **Hosting:** Cloudflare Pages (statisch, edge-cached, global schnell)
- **Analytics:** **Plausible** (EU-Firma, Estland, kein Cookie-Consent nötig, DSGVO-konform ohne Banner)
- **Error Tracking:** Sentry (minimal, nur für Edge Function Errors)

### Open Graph & Social Sharing

```html
<meta property="og:title" content="Carrot — Set goals. Build habits. Level up." />
<meta property="og:description" content="Die App die dich motiviert — mit Streaks, Rewards und Community." />
<meta property="og:image" content="/og-image.png" />  <!-- 1200x630px -->
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
```

OG-Image: Orange Hintergrund, "CARROT" in Bricolage Grotesque, Tagline darunter. Muss als statisches PNG existieren (kein dynamisches Rendering nötig).

---

## Accessibility (WCAG 2.1 AA)

| Anforderung | Umsetzung |
|-------------|-----------|
| Farbkontrast | Orange #FA7000 auf Weiß hat **3.5:1** — knapp unter AA für Body Text. **Lösung:** Orange nur für Headlines (Large Text, 3:1 reicht) und Buttons (weißer Text auf Orange = 3.5:1 OK). Body Text bleibt #171717 auf Weiß (**15:1**). |
| Keyboard Navigation | Alle interaktiven Elemente fokussierbar, sichtbarer Focus-Ring |
| Screen Reader | Semantisches HTML (section, main, nav, h1-h3 Hierarchie) |
| Reduced Motion | `@media (prefers-reduced-motion: reduce)` — alle Animationen aus |
| Alt-Texte | Alle Bilder/Mockups mit beschreibenden Alt-Texten |
| Formular | Email-Input mit `<label>`, Error-States, `aria-describedby` |

### Kontrast-Problem mit Orange lösen:

```css
/* Orange auf Weiß: nur für large text (≥18px bold / ≥24px regular) */
.headline { color: #FA7000; }

/* Für kleineren Text: dunkleres Orange */
.small-accent { color: #C85A00; }  /* 4.6:1 auf Weiß, AA-konform */

/* CTA Button: Weiß auf Orange */
.cta { background: #FA7000; color: #FFFFFF; }  /* 3.5:1, AA für large text */
```

---

## Rechtliche Pflichtseiten (Österreich)

### Impressum (§ 5 ECG, § 25 MedienG)
Pflichtangaben:
- Vollständiger Name / Firma
- Anschrift (Straße, PLZ, Ort)
- Kontakt (E-Mail, optional Telefon)
- UID-Nummer (wenn vorhanden)
- Unternehmensgegenstand
- Zuständige Aufsichtsbehörde (wenn reguliert)

### Datenschutzerklärung (DSGVO Art. 13/14)
Muss enthalten:
- Verantwortliche Stelle + Kontakt
- Welche Daten gesammelt werden (Email via Waitlist)
- Rechtsgrundlage (Einwilligung, Art. 6 Abs. 1 lit. a)
- Speicherdauer
- Rechte der Betroffenen (Auskunft, Löschung, Widerspruch)
- Wenn Plausible: Erwähnung dass cookie-free Analytics genutzt wird
- Keine Datenübertragung in Drittländer (EU-only Stack)

### Cookie Consent
- **Plausible braucht KEINEN Cookie Consent** (cookie-free, kein Tracking)
- Cookie-Banner nur nötig wenn später Marketing-Tools (Meta Pixel etc.) dazukommen
- Am Anfang: kein Cookie-Banner nötig = bessere UX

---

## Referenzen & Inspiration

| Was | Von wem | Lernen |
|-----|---------|--------|
| Mutige Typografie als Hero | Linear.app | Headline IS the design |
| Orange als Statement | Headspace (Orange-Phase) | Warme Farbe, dosiert eingesetzt |
| Asymmetrisches Layout | Vercel.com | Spannung ohne Chaos |
| Dunkle Feature-Sektion | Raycast.com | App-Screenshots leuchten auf Dunkel |
| Persönlichkeit in Copy | Duolingo.com | Frech, direkt, unvergesslich |
| Minimalismus + Emotion | Finch.care | Warm und clean gleichzeitig |
| Scroll-Animationen | Stripe.com | Subtil, nie ablenkend |
| Waitlist mit Referral | Monzo, Robinhood | Position + Referral = virales Wachstum |

---

## Validierte Entscheidungen (Web Research April 2026)

| Entscheidung | Status | Quelle |
|-------------|--------|--------|
| Bricolage Grotesque | Bestätigt — Top 50 Google Fonts 2026, "delightfully weird", variable font | Typewolf, Google Fonts |
| DM Sans als Body | Bestätigt — paart gut mit quirky Display-Fonts | Typewolf |
| Astro statt SvelteKit | Gewählt — zero JS, schnellster LCP, gebaut für statische Seiten | pkgpulse.com |
| Plausible Analytics | Bestätigt — EU-Firma (Estland), kein Cookie-Consent nötig, open source | plausible.io |
| Single CTA | Bestätigt — zweiter CTA reduziert Conversion um bis zu 266% | zoho.com |
| Email-only Waitlist | Bestätigt — weniger Felder = 120% mehr Conversions | waitlister.me |
| Waitlist Conversion Target | 40%+ erreichbar mit guter Page | waitlister.me |

---

## Nächste Schritte

- [x] ~~Font-Test~~ — Bricolage Grotesque + DM Sans implementiert
- [x] ~~App-Mockups~~ — CSS Phone-Mockups mit Habit UI direkt in Code gebaut
- [x] ~~Copy schreiben~~ — Alle 7 Sektionen mit deutschem Copy (du-Form)
- [x] ~~Implementation~~ — Astro Seite in `apps/web/` gebaut (7 Sektionen, 16KB HTML, 427ms Build)
- [ ] **OG-Image erstellen** — 1200x630px, Orange + Bricolage Grotesque
- [ ] **Waitlist Backend** — Supabase Tabelle + Edge Function + Double Opt-In
- [ ] **Referral System** — Unique Links, Position-Counter, Share-Buttons
- [ ] **Rechtliches** — Impressum + Datenschutzerklärung erstellen
- [ ] **Plausible** — Analytics einrichten (kein Cookie-Banner nötig)
- [x] ~~Deployment~~ — Cloudflare Pages live: [carrot-landing.pages.dev](https://carrot-landing.pages.dev)
- [ ] **Favicon** — Carrot-Icon als PNG in `apps/web/public/`
- [ ] **Custom Domain** — z.B. carrot.at oder getcarrot.at