# Prompt pro replikaci webu: Personalizovaná nabídka Škoda Superb

> Zkopírujte tento prompt do Lovable (nebo jiného AI nástroje pro generování webů). Výsledkem má být **jednostránkový, luxusní dark-theme web** v češtině pro osobní prodejní nabídku vozu Škoda Superb.

---

## 1. Základní parametry

- **Typ:** Jednostránkový web (single-page) s hash anebo scroll navigací
- **Jazyk:** Čeština
- **Styl:** Dark luxury, prémiová atmosféra inspirovaná automobilovými značkami (Škoda, Mercedes, BMW)
- **Cílová skupina:** Majitel staršího vozu (Octavia), který uvažuje o přechodu na vyšší třídu — komunikace oslovuje přímo zákazníka jménem (Tomáš Horáček)
- **Technologie:** React + Tailwind CSS, scroll-reveal animace přes IntersectionObserver

---

## 2. Design systém (Přísně dodržet)

### Paleta
Použijte barevný systém v **oklch** nebo přesné náhrady v HEX:

| Token | Hodnota | Popis |
|-------|---------|-------|
| `--background` | `oklch(0.16 0.012 160)` | `#121414` — téměř černá, mírně do zelena |
| `--foreground` | `oklch(0.97 0.005 90)` | `#f7f7f6` — teplá bílá |
| `--card` | `oklch(0.20 0.014 160)` | `#1a1c1c` — tmavá karta |
| `--primary` | `oklch(0.55 0.13 155)` | `#1f4a36` — **Škoda emerald** |
| `--emerald` | `oklch(0.72 0.16 155)` | `#4ade80` — světlejší emerald pro text/accenty |
| `--silver` | `oklch(0.85 0.015 90)` | `#d1d5db` — stříbrná pro sekundární text |
| `--muted-foreground` | `oklch(0.70 0.012 160)` | `#a0a0a0` — tlumený text |
| `--border` | `oklch(0.30 0.012 160)` | `#333635` — jemné okraje |

### Gradienty
- `grad-emerald`: `linear-gradient(135deg, oklch(0.45 0.13 155), oklch(0.62 0.15 155))`
- `grad-hero`: `linear-gradient(180deg, transparent 0%, oklch(0.16 0.012 160 / 0.7) 65%, oklch(0.16 0.012 160) 100%)`

### Fonty
- **Nadpisy (serif):** Cormorant Garamond, weight 500, letter-spacing `-0.01em`
- **Body text (sans):** Inter, font-feature-settings `"ss01", "cv11"`
- **Luxusní tracking:** `.tracking-luxe { letter-spacing: 0.22em; }` pro štítky/kategorie

### Utility třídy (vytvořit)
- `.glass` — `background: oklch(0.20 0.014 160 / 0.6); backdrop-filter: blur(12px); border: 1px solid oklch(1 0 0 / 0.06);`
- `.shadow-glow` — `box-shadow: 0 0 60px -10px oklch(0.55 0.13 155 / 0.5);`
- `.shadow-luxe` — `box-shadow: 0 30px 80px -20px oklch(0.05 0.01 160 / 0.6);`
- `.reveal` — start: `opacity: 0; transform: translateY(24px);`, při scrolu do viewportu přidej `.in` → `opacity: 1; transform: translateY(0);` s transition `0.9s ease`

### Společný pattern pro nadpisy sekcí
Každá sekce má nahoře:
1. Label řádek: krátká emerald čára (`h-px w-10 bg-emerald`) + text v `.tracking-luxe text-emerald uppercase` (10–11px)
2. H2 nadpis: `.serif text-4xl md:text-6xl leading-tight`, vždy obsahuje jedno slovo v `<span class="italic text-emerald">`

---

## 3. Struktura stránky (7 sekcí shora dolů)

### Sekce A: Hero
- **Výška:** `min-h-[100svh]`, full-width
- **Pozadí:** Fotografie auta (Škoda Superb zepředu/ze strany v přírodě), `background-size: cover`, mírně zvětšeno (`scale(1.08)`)
- **Překryv:** `grad-hero` gradient shora dolů + radiální vigneta (`transparent 30%` → `oklch(0.10 0.01 160/0.6)`)
- **Top bar:** Logo (čtverec s písmeny „AP“ v emerald gradientu) + „AutoPremium Praha“ vpravo datum „Osobní nabídka · 27. 5. 2026“
- **Content v dolní části (justify-end):**
  - Label: `Připraveno pro Tomáše Horáčka`
  - H1: *„Tohle auto bylo **stvořené** pro vaše cesty s rodinou.“* (slovo „stvořené“ je italic + emerald)
  - Podtitul: *„Škoda Superb 2025 — komfort prémiové třídy pro každou cestu do hor, na chatu či do práce. Připravili jsme nabídku přesně pro vás.“*
  - **2 CTA tlačítka:**
    - Primární: emerald gradient, text „Prohlédnout konfiguraci →“ → scroll na `#stock`
    - Sekundární: border stříbrný, text „Domluvit testovací jízdu“ → scroll na `#cta`
- **Scroll indikátor:** úplně dole, malý svislý pruh s animací `animate-pulse` + text „Scroll“

---

### Sekce B: Proč Superb (WhySection)
- **Obsah:** 4 argumentační karty ve 2×2 gridu (na desktopu), na mobilu pod sebou
- **Každá karta:** `.glass`, rounded-md, padding 32–40px
  - Nahoře: ikona (Lucide: Mountain, Users, Gauge, Compass) v emerald + číslo `01`–`04` v `.serif text-2xl text-muted-foreground/40`
  - Velký nadpis (serif 3xl–4xl)
  - Text věty popisující benefit
  - **Glow efekt:** absolutně pozicovaný rozostřený kruh (`bg-emerald/10 blur-3xl`) v rohu, který se zvýší na hover (`group-hover:opacity-60`)
- **Karty:**
  1. *Hory bez kompromisů* — 4×4, světlá výška 156 mm, vyhřívané sklo, lyže z výroby
  2. *Rodinný prostor* — 645 l kufr, sklopná sedadla 40:20:40, průchod pro lyže
  3. *Dálniční komfort* — adaptivní tempomat, Travel Assist, masážní sedadla, HUD
  4. *Technologie zná vaši trasu* — offline horské mapy, varování náledí, auto 4×4

---

### Sekce C: Skladové vozy (StockPicker) — **`id="stock"`**
- **Koncept:** Uživatel si vybírá ze 3 skladových vozů. Jeden je doporučený.
- **Nadpis:** „Tři Superby. **Jeden** stvořený pro hory.“
- **Layout:** 3 sloupce (grid `md:grid-cols-3`), každý je **celoklikatelná karta** (button nebo div)
- **Každá karta obsahuje:**
  - Horní badge (pokud doporučený): zelený pill „Doporučeno pro Tomáše“ s ikonou Sparkles
  - Fotografie auta (aspect-ratio 5:3), hover efekt `scale-105`
  - Název modelu (serif 2xl), rok, motor, pohon, barva (s barevným kolečkem), najeté km
  - 3 highlighty s checkmarky (zelené) + „+X dalších“
  - Spodní řádek: lokace s MapPin ikonou + dostupnost + **velká cena** (serif 2xl emerald)
- **Vozy (data):**
  1. **Doporučený:** Superb Laurin & Klement, 2.0 TDI 193 k DSG, 4×4, Emerald Green `#1f4a36`, 1 389 000 Kč, 12 km, sklad Praha-Chodov, ihned. Highlights: panoramatická střecha, Canton audio, vyhřívaná sedadla, lyžařský nosič, zimní kola.
  2. Superb Style, 1.5 TSI mHEV 150 k, 2WD, Moon White `#e9e9e6`, 1 149 000 Kč, 8 km.
  3. Superb Style iV, 1.5 TSI plug-in hybrid, Graphite Grey `#3a3d40`, 1 289 000 Kč, 24 km.
- **Interakce:** Klik na kartu ji označí (`border-primary shadow-glow`, checkmark badge). Výběr aktualizuje globální cenu pro sekci Finance.
- **Doporučení box:** Pod kartami, pokud je vybrán doporučený vůz, zobrazí se `.glass` banner s ikonou Mountain a textem: *„Přesně pro Krkonoše i Alpy — 4×4, naftový motor s dojezdem 1 100 km a kompletní zimní výbava.“*

---

### Sekce D: Srovnání s konkurencí (Comparison)
- **Nadpis:** „Proti konkurenci i proti **vaší Octavii**.“
- **Obsah:** `.glass` tabulka s porovnáním parametrů (Škoda Superb vs VW Passat vs Škoda Octavia — „váš současný vůz“)
- **Sloupce:** Parametr | Škoda Superb (označená korunkou Crown ikonou a emerald zvýrazněním) | VW Passat | Škoda Octavia
- **Řádky:** objem kufru, pohon 4×4, spotřeba na dálnici, délka záruky, servisní balíček 5 let, lyžařský nosič z výroby, světlá výška
- **Styling:** hlavička `bg-card/60`, sloupec Superb má nahoře tenký emerald gradient line, sudé řádky mírně zvýrazněné `bg-card/20`

---

### Sekce E: Konfigurátor (Configurator) — **`id="konfigurator"`**
- **Nadpis:** „Postavte si **svůj** Superb.“
- **Layout:** 2 sloupce — vlevo ovládací prvky, vpravo sticky summary karta
- **Controls (vlevo):**
  1. **Motor:** select dropdown — 2.0 TDI 150 k (základ), 2.0 TDI 193 k (+95 000 Kč), 1.5 TSI 150 k (−30 000 Kč), 1.5 TSI iV PHEV (+180 000 Kč)
  2. **Pohon:** 2 tlačítka vedle sebe — Přední 2WD / Inteligentní 4×4 (doporučeno pro hory, badge s Mountain ikonou, +85 000 Kč)
  3. **Výbava:** 3 tlačítka — Ambition / Style (+120 000 Kč) / Laurin & Klement (+280 000 Kč)
  4. **Barva:** 5 kruhů s barvou (Emerald Green `#1f4a36`, Graphite Grey `#3a3d40`, Moon White `#e9e9e6`, Race Blue `#1b2d52`, Magic Black `#0e0f10`) + label pod každým. Aktivní má `ring-2 ring-primary`.
  5. **Doplňky:** 4 checkboxy jako tlačítka — lyžařský nosič Thule (+18 900 Kč), tažné zařízení (+24 500 Kč), zimní kola (+42 000 Kč), cargo organizér (+6 800 Kč)
- **Summary karta (vpravo, sticky):**
  - Fotografie auta (aspect 4:3) s **barevným overlay** pomocí CSS `mix-blend-color` a `mix-blend-multiply` podle vybrané barvy (mění se dynamicky)
  - Spodní badge s barevným kolečkem a názvem barvy
  - Seznam vybraných parametrů (motor, pohon, výbava, barva, doplňky)
  - Oddělovač
  - **Velká cena celkem** (serif 4xl emerald) s poznámkou „vč. DPH · cena pro Tomáše“
- **Základní cena:** 1 099 000 Kč

---

### Sekce F: Financování (Finance)
- **Nadpis:** „Spočítáno přesně **pro vás**.“
- **Layout:** 2 sloupce
- **Vlevo:**
  - 4 režimové tlačítka (Hotovost / Leasing / Úvěr / Operativní leasing) — aktivní má emerald gradient
  - 2 range slidery (nativní HTML `<input type="range">`) s custom accent color:
    - Akontace: 0–60 %, krok 5 %
    - Doba splácení: 24–84 měsíců, krok 12 (zobrazuj se roky)
    - Při hotovosti slidery znevýrazněné (`opacity: 0.5`)
- **Vpravo:** `.glass` karta s výsledky
  - Velké číslo: měsíční splátka (serif 6xl–7xl emerald) nebo jednorázová platba
  - **Srovnání:** box s border-left emerald: „Oproti vaší Octavii připlácíte/připlácítete **X Kč** měsíčně za prémiovou třídu.“ (Předpokládej, že současná Octavia stojí 8 400 Kč/měsíc.)
  - Rozpis: cena vozu, servisní balíček 5 let (24 900 Kč), pojištění 5 let (5 × 28 000 Kč)
  - Celkové náklady 5 let (TCO)
- **Výpočet:** leasing/úvěr/operativní leasing použijte anuitní vzorec s ročním úrokem 6,9 % / 5,8 % / 4,5 %. Při hotovosti splátka = 0, total = cena vozu.

---

### Sekce G: Scénáře (Scenarios)
- **Nadpis:** „Jeden víkend, **tři okamžiky**.“
- **Layout:** 3 sloupce s fotografiemi (aspect 4:5), na mobilu pod sebou
- **Každý scénář:** fotografie s gradientním překryvem (`from-background via-background/40 to-transparent`), vespod text:
  - Chip (pill s border a backdrop-blur): časové razítko (např. „Pátek 17:30“)
  - Nadpis (serif 3xl)
  - Popisek (text-muted-foreground)
- **Scénáře:**
  1. *Odjezd po práci* — auto naložené, rodina v pohodlí, navigace na Špindl, adaptivní LED
  2. *Ráno na sjezdovce* — vyhřátý interiér z aplikace, lyže na střeše
  3. *Tichá cesta domů* — adaptivní tempomat, masážní sedadla, děti spí
- **Hover efekt:** foto se pomalu zoomuje (`scale-110` přes 1200 ms)

---

### Sekce H: Timeline
- **Nadpis:** „Od objednávky po **klíče v ruce**.“
- **Obsah:** `.glass` karta s 5 kroky
- **Progress bar:** nahoře tenký emerald gradient bar (výpočet: počet hotových kroků / celkem)
- **Kroky:** vizuálně jako timeline s čísly v kruzích:
  1. Objednávka (20. 5. 2026) — hotovo (`grad-emerald` kruh)
  2. Výroba (10. 6. 2026) — hotovo
  3. Transport do Prahy (1. 7. 2026) — aktivní (`ring-2 ring-emerald shadow-glow animate-pulse`)
  4. Příprava a PDI (8. 7. 2026) — čeká
  5. Předání vám (15. 7. 2026) — čeká
- **Spojnice:** mezi kroky tenká čára (`bg-border`), v mobilním layoutu svislá, na desktopu vodorovná

---

### Sekce I: Final CTA — **`id="cta"`**
- **Layout:** 2 sloupce — vlevo text, vpravo vizitka prodejce
- **Vlevo:**
  - Nadpis: *„Tomáši, **jdeme do toho?**“* (jméno zákazníka + italic emerald)
  - Text: *„Rezervaci pro vás držím do pátku. Klidně si Superb nejdřív vyzkoušejte — testovací jízdu můžeme udělat i s lyžemi na střeše, ať máte jistotu.“*
  - **2 tlačítka:** „Rezervovat Superb pro Tomáše →“ (emerald gradient) a „Domluvit testovací jízdu do hor“ (border)
- **Vpravo:** `.glass` karta s:
  - Kulatá fotografie prodejce (60–80 px, ring emerald), jméno **Martin Procházka**, „AutoPremium Praha · Smíchov“
  - Citace (serif italic 2xl): *„Tomáši, jezdím Superbem do Špindlu pět let. Vím přesně, co od něj v horách potřebujete. Zavolejte mi — domluvíme se.“*
  - Rukou psaný podpis (např. „M. Procházka“ v emerald, mírně otočený `rotate(-3deg)`)
  - Kontakty: telefon +420 777 123 456, email martin@autopremium.cz s ikonami Phone a Mail
- **Footer pod tím:** jemný text (10px, tracking-luxe, muted): „AutoPremium Praha · Nabídka platná do 25. 5. 2026 · Osobně pro Tomáše Horáčka“

---

## 4. Interakce a chování

1. **Scroll-reveal:** Všechny sekce/karty s třídou `.reveal` se postupně objevují při scrollování do viewportu. Použijte IntersectionObserver (threshold ~0.12). Jednou odhaleno, zůstává viditelné.
2. **Stock picker:** Kliknutí na kartu vozu = označení + propagace ceny do Finance sekce.
3. **Konfigurátor:** Každá změna (motor, výbava, barva, doplňky) okamžitě přepočítá cenu a aktualizuje summary. Barva mění barevný overlay na fotografii.
4. **Finance:** Přepínání režimu (hotovost/úvěr/leasing) okamžitě přepočítá měsíční splátku přes anuitní vzorec.
5. **Smooth scroll:** `html { scroll-behavior: smooth; }`
6. **Responzivita:** Na mobilu (< md) všechny 2–3 sloupcové layouty přecházejí na 1 sloupec. Tabulka srovnání bude horizontálně scrollovat (`overflow-x-auto`).

---

## 5. Asset požadavky

Vygenerujte nebo použijte placeholder obrázky s těmito názvy/účely:

| Asset | Popis |
|-------|-------|
| `hero-superb.jpg` | Škoda Superb v přírodním/horském prostředí, široký záběr vhodný na hero background |
| `stock-emerald.jpg` | Škoda Superb v barvě Emerald Green, 3/4 pohled |
| `stock-white.jpg` | Škoda Superb v Moon White, 3/4 pohled |
| `stock-graphite.jpg` | Škoda Superb v Graphite Grey, 3/4 pohled |
| `superb-config.jpg` | Škoda Superb pro konfigurátor — ideálně stříbrná/šedá základní barva, aby barevný overlay fungoval |
| `scene-friday.jpg` | Fotografie: auto na dálnici/ve městě večer, rodinná atmosféra |
| `scene-saturday.jpg` | Fotografie: lyže, hory, parkoviště u sjezdovky |
| `scene-sunday.jpg` | Fotografie: noční dálnice/interiér auta, klidná atmosféra |
| `salesman.jpg` | Portrét muže (prodejce), přátelský, profesionální |
| `favicon.png` | Malé logo „AP“ v emerald barvě na tmavém podkladě |

---

## 6. Copy/Text — kompletní přehled

Všechny texty na stránce jsou v **češtině** a vykají zákazníkovi. Používejte prémiový, osobní tón — nikoliv prodejní leták, ale dopis od prodejce.

### Zásady copy:
- Oslovujte „Tomáši“ (2. pád) — personalizace je klíčová
- Používejte hovorové, ale kultivované výrazy („stvořené pro vaše cesty“, „jdeme do toho?“)
- Vyhýbejte se superlativům bez kontextu — vždy vysvětlete „proč“
- Vždy zmiňte konkrétní lokalitu (Krkonoše, Alpy, Špindl) — to posiluje personalizaci

---

## 7. Technické tipy pro studenty

- **Framework:** React (Vite nebo Next.js). Pokud používáte Lovable, stačí tento prompt vložit do chatu.
- **Styling:** Tailwind CSS v4 s vlastními CSS proměnnými v `styles.css`.
- **Ikony:** Lucide React (`lucide-react`).
- **Animace:** Nepotřebujete Framer Motion — stačí vanilla IntersectionObserver pro reveal efekt.
- **Formátování cen:** Použijte `new Intl.NumberFormat("cs-CZ")` pro správné mezery v cenách (např. `1 389 000 Kč`).
- **Range input:** Nativní `<input type="range">` lze stylovat pomocí `accent-color` na emerald.

---

*Generováno pro výuku — studenti mohou tento prompt volně upravovat a experimentovat.*