# Prompt pro replikaci kvízu "Jaký typ podnikatele jsi?" > **Instrukce pro studenty:** Zkopíruj celý tento prompt do AI nástroje (např. Lovable, v0, Bolt nebo Cursor) a vytvoří se ti interaktivní kvíz, který bude vizuálně i funkčně odpovídat referenčnímu designu. --- ## 🎯 Cíl Vytvoř interaktivní osobnostní kvíz **"Jaký typ podnikatele jsi?"** jako jednostránkovou React aplikaci s tmavým neonovým designem. --- ## 🎨 Vizuální styl (přesně podle tohoto) ### Barevná paleta - **Pozadí:** velmi tmavá šedá / téměř černá (`#0f1115` nebo podobná) - **Text:** bílá / světle šedá - **Neonové akcenty (4 barvy):** - **Lime zelená** — primární tlačítka, progress bar, Budovatel - **Magenta / růžová** — gradienty, Vizionář - **Cyan** — Analytik - **Amber / oranžová** — Konektor - **Sklo/glass efekt:** na panelech použij `backdrop-blur`, poloprůhledné pozadí (`bg-opacity`), jemné bílé/šedé ohraničení (`border`) ### Gradienty a efekty - **Hero pozadí:** radiální gradient s neonovými skvrnami — magenta nahoře, zelená dole, obě velmi jemné a rozptýlené (opacity ~20%, heavy blur) - **Text gradient:** nadpisy s gradientem z lime zelené do magenta - **Glow efekty:** tlačítko "Začít kvíz" má měkký lime glow stín; emoji výsledku má drop-shadow v barvě daného typu - **Progress bar:** gradient z lime do magenta, smooth animace šířky ### Typografie - **Display font (nadpisy):** Space Grotesk, bold, tight letter-spacing (`-0.02em`), velké (`text-5xl` až `text-7xl`) - **Body font:** Inter, čitelná velikost - **Drobné texty:** uppercase, `tracking-widest`, šedá barva — použito pro tagy jako "Osobnostní kvíz", "Otázka X / 10", "Tvůj typ" ### Layout - Vše centrované, max-width ~700px na desktopu - Padding na mobilech, generozní mezery (`gap-3`, `space-y-3`) - Panely s border-radius `1.5rem` (`rounded-2xl`) --- ## 📐 Struktura aplikace (3 fáze) ### 1. Úvodní obrazovka (intro) - **Tag** nahoře: malý pill-shaped label s ikonou Sparkles a textem "Osobnostní kvíz" - **Hlavní nadpis:** "Jaký typ **podnikatele** jsi?" — slovo "podnikatele" má gradient - **Podnadpis:** "10 otázek. 4 archetypy. Zjisti, jaký podnikatelský styl je tvůj — a co dělat, aby ses v něm posunul dál." - **CTA tlačítko:** velké kulaté tlačítko "Začít kvíz" s šipkou, lime zelené, glow efekt, hover = mírné zvětšení (`scale-105`) - **Náhled 4 typů dole:** 4 emoji v řadě (🚀 🛠️ 📊 🤝) s názvy pod nimi (Vizionář, Budovatel, Analytik, Konektor), poloprůhledné ### 2. Kvíz (quiz) - **Progress bar:** nahoře, s textem "Otázka X / 10" a procenty, gradientová výplň s animací - **Otázka:** velký nadpis (`text-3xl`–`text-4xl`), bold - **4 odpovědi:** každá jako samostatný panel (card) s: - textem nalevo - šipkou napravo (ArrowRight) - hover efekt: border změní barvu na neon, šipka se posune doprava, celý panel se mírně posune doprava (`translate-x-1`) - animace příletu odpovědí: postupné `stagger` (delay 0.1s, 0.15s, 0.2s, 0.25s) - **Slide animace mezi otázkami:** když uživatel klikne, aktuální otázka odjede doleva (`x: -60`, opacity 0), nová přijede zprava (`x: 60` → `0`). Doba animace ~0.35s, ease-out. ### 3. Výsledek (result) - **Velké emoji** (`text-8xl`–`text-9xl`) v barvě daného typu s barevným drop-shadow glow, spring animace při příchodu (scale 0.5 → 1, mírný rotate) - **Tag:** "Tvůj typ" — uppercase, tracking, šedý - **Nadpis:** název typu (Vizionář / Budovatel / Analytik / Konektor) v jeho barvě, velký (`text-5xl`–`text-7xl`) - **Tagline:** kurzívou pod nadpisem, např. "Vidíš tam, kam ostatní ještě nedohlédnou" - **Popis:** odstavec s max-width a leading-relaxed - **2 sloupce (cards):** - **Silné stránky** — lime akcent, 3–4 bullet pointy s pomlčkou - **Co hlídat** — magenta akcent, 3–4 bullet pointy s pomlčkou - **Box s tipy:** "3 tipy pro tebe" se Sparkles ikonou, číslovaný seznam (1–3) s barevnými kruhy jako čísla - **Tlačítka dole:** - "Sdílet výsledek" — v barvě typu, používá Web Share API nebo clipboard fallback + toast notifikace - "Zkusit znovu" — outline styl, šedý, s RotateCcw ikonou --- ## 🧠 Logika a data ### 4 výsledkové typy (archetypy) 1. **Vizionář** 🚀 (magenta) — vidí budoucnost, kreativita, inspirace 2. **Budovatel** 🛠️ (lime) — exekuce, vytrvalost, praktičnost 3. **Analytik** 📊 (cyan) — data, logika, rizika, hluboká expertiza 4. **Konektor** 🤝 (amber) — lidé, networking, empatie, komunita Každý typ má: - `name`, `tagline`, `emoji`, `description` (2–3 věty) - `strengths`: pole 3–4 stringů - `weaknesses`: pole 3–4 stringů - `tips`: pole 3 stringů (konkrétní rady) - `color`: CSS proměnná/barva ### 10 otázek - Každá otázka má přesně **4 odpovědi** - Každá odpověď přiřazuje **1 bod** právě jednomu typu - Po dokončení se sečtou skóre a vítězí typ s nejvíce body - Při remíze (doplňující pravidlo): vyhrává první v pořadí ve skóre objektu ### Otázky pokrývají témata: 1. Co tě na podnikání láká? 2. Jak se rozhoduješ? 3. Tvoje největší síla? 4. Ideální pracovní den? 5. Co tě vyčerpává? 6. Jak vnímáš riziko? 7. Co uděláš, když zbyde měsíc? 8. Co tě motivuje? 9. Jaký tým potřebuješ? 10. Kam by měla firma směřovat za 10 let? *(Vymysli vlastní české formulace, které elegantně mapují 4 odpovědi na 4 typy.)* --- ## ⚙️ Technické požadavky - **React** (funkční komponenty + hooks: `useState`, `useMemo`) - **Framer Motion** pro animace: - `AnimatePresence mode="wait"` pro přechody mezi fázemi (intro → quiz → result) - Slide animace mezi otázkámí (custom direction, initial/animate/exit s `x`) - Stagger na odpovědi (`delay: i * 0.05`) - Spring animace na emoji výsledku - **Lucide React** ikony: `ArrowRight`, `RotateCcw`, `Share2`, `Sparkles` - **Sonner** nebo podobná toast knihovna pro "Zkopírováno do schránky" - **Styling:** Tailwind CSS nebo ekvivalent, striktně používej CSS custom properties (proměnné) pro barvy — ne hardcoduj hex přímo v komponentách ### State management - `stage`: `"intro" | "quiz" | "result"` - `index`: číslo aktuální otázky (0–9) - `scores`: objekt `{ visionary: 0, builder: 0, analyst: 0, connector: 0 }` - `direction`: pro animaci směru (1 = dopředu) --- ## 🖼️ Favicon (bonus) - Kulatý favicon v barvách webu: tmavé pozadí s neonovým prvkem (např. raketa nebo jiná ikona v lime/magenta) --- ## ✅ Checklist pro AI (aby výstup odpovídal referenci) - [ ] Tmavé pozadí s 2 rozptýlenými neonovými gradientními kruhy (blur, low opacity) - [ ] Space Grotesk + Inter fonty - [ ] 3 fáze s AnimatePresence přechody - [ ] Progress bar s gradientem a procenty - [ ] 10 otázek, každá se 4 odpověďmi - [ ] Slide animace mezi otázkami (zprava doleva) - [ ] Stagger animace odpovědí - [ ] 4 detailní výsledkové stránky s emoji, popisem, silnými/slabými stránkami, 3 tipy - [ ] Sdílení výsledku (Web Share API + clipboard fallback) - [ ] Tlačítko "Zkusit znovu" resetuje vše - [ ] Glassmorphism panely s border a backdrop-blur - [ ] Všechny texty v češtině --- ## 📎 Meta (volitelné) ``` Title: Jaký typ podnikatele jsi? — Interaktivní kvíz Meta description: 10 otázek a zjistíš svůj podnikatelský archetyp: Vizionář, Budovatel, Analytik, nebo Konektor. Plus tipy, jak růst dál. ```