# Prompt: Kalkulačka cen projektů pro marketingovou agenturu

> **Jednoduše zkopíruj tento prompt a vlož ho do AI nástroje (např. Lovable, ChatGPT, Claude). AI vygeneruje webovou aplikaci, která odpovídá popisu níže.**

---

## 🎯 Cíl

Vytvoř profesionální jednostránkovou kalkulačku cen projektů pro fiktivní marketingovou agenturu **"Nordstrøm Studio"** (nebo si vymysli vlastní název). Web bude čistý, důvěryhodný a minimalistický.

---

## 🎨 Design požadavky

### Celkový vzhled
- **Bílé pozadí** (`#ffffff` nebo velmi světlé off-white)
- **Tmavě modrý text** pro hlavní nadpisy a tlačítka (např. `#1a2d4d` nebo `#1e3a5f`)
- **Zelený akcent** pro ceny a cenové elementy (např. `#2d8a4e` nebo sytější zelená)
- Čistá typografie, důraz na čitelnost a důvěryhodnost
- Jemné stíny karet (`shadow-sm` nebo lehký stín)
- Kulaté rohy na kartách a tlačítkách (`border-radius: 0.75rem`)

### Layout
- **Header** nahoře: logo (ikona + název agentury vlevo), lokalita vpravo
- **Hlavní obsah** vlevo: formulářová karta s výběry
- **Boční panel** vpravo: živý přehled ceny (sticky, zůstává viditelný při scrollování)
- **Footer** dole: copyright + kontakt
- Responzivní: na mobilu se sloupce přehodí pod sebe

---

## ⚙️ Funkcionality

### 1. Výběr parametrů projektu (vlevo)

Klient vyplní následující parametry — každá změna **okamžitě aktualizuje** odhad ceny:

#### A) Typ projektu — **Dropdown select**
Možnosti (každá s krátkým popiskem):
| Hodnota | Label | Popis | Základní cena |
|---------|-------|-------|---------------|
| `web` | Web & landing page | Návrh, copy, vývoj a nasazení | **65 000 Kč** |
| `kampan` | Reklamní kampaň | Strategie, kreativa, nasazení a reporting | **45 000 Kč** |
| `branding` | Branding & identita | Logo, vizuální systém, brand guide | **85 000 Kč** |
| `socky` | Správa sociálních sítí | Měsíční správa, obsah a komunikace | **28 000 Kč** |

#### B) Rozsah projektu — **Segmentované tlačítka (3 možnosti vedle sebe)**
| Hodnota | Label | Popis | Násobitel |
|---------|-------|-------|-----------|
| `maly` | Malý | 1 produkt / 1 platforma | **×1** |
| `stredni` | Střední | Více sekcí, integrace | **×1.8** |
| `velky` | Velký | Komplexní řešení na míru | **×3.2** |

- Aktivní volba se zvýrazní zeleným rámečkem a checkmark ikonou
- Neaktivní volby mají jemný šedý rámeček

#### C) Časová osa — **Segmentované tlačítka (3 možnosti vedle sebe)**
| Hodnota | Label | Popis | Příplatek/sleva |
|---------|-------|-------|-----------------|
| `express` | Express (do 2 týdnů) | Prioritní zařazení | **+35 %** |
| `standard` | Standardní (4–6 týdnů) | Doporučený režim | **+0 %** |
| `flex` | Flexibilní (8+ týdnů) | Sleva za volnost v plánu | **−8 %** |

#### D) Počet revizí — **Číselný vstup s −/+ tlačítky**
- Minimum: 0, Maximum: 15
- **2 revize jsou v ceně** (základní cena je bez příplatku)
- Každá revize navíc: **2 500 Kč**
- Zobraz text: *"2 v ceně · další po 2 500 Kč"*

#### E) Kontaktní údaje (volitelné, na konci karty)
- **Vaše jméno** — textové pole
- **Firma** — textové pole
- Slouží pouze pro generování nabídky, nejsou povinná

---

### 2. Živý přehled ceny (vpravo, sticky panel)

Panel se přilepí k hornímu okraji při scrollování.

Zobrazuj:
- **Malý label nahoře:** "Odhadovaná cena"
- **Velké zelené číslo** — celková cena v Kč s mezerami (např. `156 250 Kč`)
- **Rozmezí** pod cenou: min = celkem × 0.9, max = celkem × 1.15
  - Formát: `"75 000 Kč – 95 625 Kč bez DPH"`

#### Rozpad ceny (pod cenou, seznam řádků):
| Položka | Vzorec |
|---------|--------|
| Základní cena | `basePrice × scopeMultiplier` |
| Příplatek za termín | `+35 % / 0 % / −8 %` z základní ceny |
| Poplatek za revize | `počet navíc × 2 500 Kč` |
| **Celkem** | součet výše |

- Příplatek za termín se zvýrazní, pokud je nenulový
- Všechny částky zarovnané vpravo, tabular nums

---

### 3. Souhrnná karta (pod cenovým panelem)

Karta s přehledem všech zvolených parametrů:
- Typ: název projektu
- Rozsah: malý/střední/velký
- Termín: express/standardní/flexibilní
- Revize: počet ×

Při každé změně parametrů se karta **jemně animuje** (fade-up efekt, ~0.4s).

---

### 4. Tlačítko "Vygenerovat nabídku"

- Zelené tlačítko přes celou šířku karty
- Po kliknutí se vygeneruje **formátovaný textový souhrn** a zkopíruje do schránky
- Zobrazí se toast notifikace: *"Nabídka zkopírována do schránky"*

**Formát nabídky:**
```
═══════════════════════════════════════
  NABÍDKA — Nordstrøm Studio
═══════════════════════════════════════

Pro: [Jméno] ([Firma])
Datum: [dnešní datum v českém formátu]

── SPECIFIKACE ──
• Typ projektu: [název]
• Rozsah: [název]
• Časová osa: [název]
• Počet revizí: [X] (z toho 2 v ceně)

── ROZPAD CENY ──
Základní cena:           [částka] Kč
Příplatek za termín:     [+/−částka] Kč
Poplatek za revize:      [částka] Kč
───────────────────────────────────────
CENOVÉ ROZMEZÍ:          [min] – [max] Kč

Nabídka je orientační a platí 14 dní.
Kontakt: hello@nordstrom.studio · +420 720 000 000
```

---

### 5. Animace

- **Při změně ceny:** číslo celkové ceny se lehce zvětší (scale 1 → 1.08 → 1) a na chvíli zezelená. Trvání ~0.45s, easing `cubic-bezier(.34,1.56,.64,1)` (jemný overshoot).
- **Při změně parametrů:** souhrnná karta se animuje fade-up (opacity 0→1, translateY 8px→0, ~0.4s).
- **Při výběru rozsahu/termínu:** aktivní tlačítko plynule přejde do zvýrazněného stavu.

---

## 🧮 Vzorce pro výpočet

```
basePrice  = PROJECT[typ].basePrice × SCOPE[rozsah].multiplier
timelineFee = basePrice × TIMELINE[termín].percentage
extraRevisions = max(0, pocetRevizi - 2)
revisionFee = extraRevisions × 2_500

total = basePrice + timelineFee + revisionFee
min = total × 0.9
max = total × 1.15
```

Ceny formátuj jako `Intl.NumberFormat('cs-CZ', { style: 'currency', currency: 'CZK', maximumFractionDigits: 0 })` nebo ručně s mezerami.

---

## 🛠️ Technické požadavky

- **Framework:** React (ideálně s Vite nebo Next.js)
- **Styling:** Tailwind CSS nebo ekvivalentní utility-first CSS
- **UI komponenty:** shadcn/ui nebo podobné — Card, Select, Button, Input, Label, Toast/Sonner
- **Ikony:** Lucide React (Sparkles, Check, Copy)
- **Jazyk:** Čeština (UI texty, formátování čísel, datumů)
- **Formátování čísel:** České (mezera jako oddělovač tisíců, desetinná čárka)
- **Favicon:** Vytvoř jednoduchý favicon (např. tmavě modrý čtvereček s bílým písmenem)
- **SEO meta tagy:** title, description, viewport

---

## 📁 Struktura stránky (přibližně)

```
┌─────────────────────────────────────────────┐
│  [◆] Nordstrøm Studio      Marketingová   │
│                              agentura · Praha│
├─────────────────────────────────────────────┤
│                                             │
│  KALKULAČKA PROJEKTU                        │
│  Spočítejte si orientační cenu za pár sekund│
│  Žádné dohady. Vyberte parametry...         │
│                                             │
│  ┌─────────────────────┐  ┌───────────────┐│
│  │ TYP PROJEKTU        │  │ ODHADOVANÁ    ││
│  │ [▼ Web & landing   │  │ CENA          ││
│  │     page           │  │               ││
│  │  Návrh, copy...]   │  │ 156 250 Kč    ││
│  │                     │  │               ││
│  │ ROZSAH PROJEKTU     │  │ 140 625 –     ││
│  │ ┌────┬──────┬────┐ │  │ 179 688 Kč    ││
│  │ │Malý│Střed.│Velk│ │  │ bez DPH       ││
│  │ └────┴──────┴────┘ │  │               ││
│  │                     │  │ Základní: ... ││
│  │ ČASOVÁ OSA          │  │ Termín:   ... ││
│  │ ┌──────┬──────┬───┐│  │ Revize:   ... ││
│  │ │Expres│Stand.│Flex││  │ ───────────── ││
│  │ └──────┴──────┴───┘│  │ Celkem:  ...  ││
│  │                     │  └───────────────┘│
│  │ POČET REVIZÍ        │  ┌───────────────┐│
│  │ [−]   5    [+]      │  │ SOUHRN VÝBĚRU││
│  │ 2 v ceně            │  │ Typ: Web...   ││
│  │                     │  │ Rozsah: Velký ││
│  │ ─────────────────── │  │ Termín: Stand.││
│  │ Jméno: [________]  │  │ Revize: 5×    ││
│  │ Firma: [________]   │  │               ││
│  └─────────────────────┘  │ [Vygenerovat] ││
│                           └───────────────┘│
│                                             │
│  © 2025 Nordstrøm Studio   hello@... · tel│
└─────────────────────────────────────────────┘
```

---

## ✅ Checklist pro ověření

Po vygenerování zkontroluj, že:
- [ ] Změna jakéhokoliv parametru **ihned** změní cenu
- [ ] Cena má jemnou "pop" animaci při změně
- [ ] Rozsah a časová osa používají segmentovaná tlačítka (ne radio buttons)
- [ ] Příplatek za termín se zobrazí i jako záporná částka (sleva)
- [ ] Tlačítko "Vygenerovat nabídku" vytvoří formátovaný text a zkopíruje ho
- [ ] Všechny částky jsou v českém formátu
- [ ] Stránka je responzivní (mobilní zobrazení)
- [ ] Souhrnná karta se animuje při změně
- [ ] Footer obsahuje aktuální rok (`new Date().getFullYear()`)

---

## 💡 Tip pro studenty

Pokud AI vygeneruje něco jiného než chceš, buď konkrétní:
- "Změň barvu ceny na [#barva]"
- "Přidej políčko pro e-mail"
- "Změň násobitele rozsahu na..."
- "Použij jiné fonty: [název] pro nadpisy, [název] pro text"

Můžeš také požádat o vytvoření **vlastního ceníku** — prostě nahraď čísla v tabulkách výše svými.