# Prompt: Replikace landing page "Premium Reality Praha" > Tento prompt popisuje kompletní landing page pro realitní kancelář "Premium Reality Praha". > Použijte ho přesně podle zadání — nevynechávejte sekce, texty ani barevné kódy. > Obrázky si vygenerujte AI nebo nahraďte placeholder fotografiemi. --- ## 1. Celkový popis projektu Vytvoř **jednostránkový (one-page) landing page** pro luxusní realitní kancelář s názvem **Premium Reality Praha**. Design musí působit prémiově, luxusně a důvěryhodně. Provedení je **tmavě šedé** s **zlatými akcenty** (#C9A84C) a čistou typografií. Struktura webu (odshora dolů): 1. Sticky navigace 2. Hero sekce s vyhledáváním 3. Služby (3 karty) 4. Proces prodeje — interaktivní roadmapa (6 kroků) 5. Aktuální nabídka nemovitostí (3 karty) 6. Reference / sociální důkaz (3 karty) 7. FAQ accordion 8. Kontaktní sekce s formulářem 9. Footer --- ## 2. Design systém & barevná paleta Použij následující CSS proměnné (Tailwind nebo custom CSS): ```css :root { --background: #1a1a1a; /* hlavní tmavé pozadí */ --foreground: #f7f7f5; /* hlavní světlý text */ --surface: #222222; /* mírně světlejší pozadí sekcí */ --surface-elevated: #2a2a2a; /* pozadí formuláře/karet */ --muted-foreground: #a0a0a0; /* sekundární text */ --border: #3a3a3a; /* jemné ohraničení */ --gold: #C9A84C; /* zlatý akcent — pro TITULKY, tlačítka, linky */ --gold-soft: #d4b86a; /* světlejší zlato pro hover */ --gold-foreground: #1a1a1a; /* text na zlatém pozadí */ } ``` ### Typografie - **Nadpisy (H1–H3):** *Cormorant Garamond* nebo jiný elegantní serif, font-weight 500, letter-spacing -0.01em. - **Body text:** *Inter* nebo systémový sans-serif. - **Velikosti nadpisů:** - H1: 5xl–8xl (mobil→desktop) - H2: 4xl–6xl - H3: 2xl–3xl - **Accent texty:** malé velké písmo (`text-[10px]`, `tracking-[0.25em]–[0.4em]`, `uppercase`) v barvě `--gold`. ### Společné vzory - Zlatá vodorovná čára před eyebrow texty: `h-px w-8 bg-[--gold]` - Ohraničení karet: `border: 1px solid var(--border)` - Hover efekt na kartách: zlatavé ohraničení nebo zvýrazněný text - Tlačítka: plné zlaté pozadí s tmavým textem, hover `background: var(--gold-soft)` - Linky: `text-[--gold]` s dolní čárou `border-bottom: 1px solid rgba(--gold, 0.4)` - Plynulé scrollování: `scroll-behavior: smooth` --- ## 3. Komponenty detailně ### 3.1 Navbar (sticky navigace) - **Pozice:** `fixed top-0`, z-index 50. - **Stavy:** - *Nahoře na stránce:* průhledné pozadí (`bg-transparent`). - *Po scrollu:* `bg-background/85` + `backdrop-blur-xl` + spodní ohraničení `1px solid rgba(--border, 0.6)`. - **Logo vlevo:** Malý čtvereček `w-9 h-9` s ohraničením `1px solid --gold`, uvnitř písmeno **"P"** v serif fontu, barvou `--gold`. Vedle něj text "Premium Reality" (serif, 18px) a pod ním menší text "PRAHA" (10px, uppercase, tracking 0.35em, `--gold`). - **Navigační odkazy (skryté na mobilu):** Služby, Proces, Nabídka, Reference, FAQ — všechny smooth-scroll na odpovídající `id`. - **CTA tlačítko vpravo:** "Konzultace" — ohraničené `1px solid --gold`, text `--gold`, hover plné zlaté pozadí s tmavým textem. - **Mobilní hamburger:** 3 čáry, animace na křížek při otevření. Pod ním dropdown menu s odkazy + CTA. --- ### 3.2 Hero sekce - **Výška:** `min-h-screen`, zarovnáno vertikálně na střed. - **Pozadí:** Full-width fotografie luxusní nemovitosti (vila), `object-cover`, přes celou sekci. - **Overlay:** Přes fotografii dvě vrstvy: 1. Gradient zespoda: `linear-gradient(180deg, rgba(26,26,26,0.4) 0%, rgba(26,26,26,0.85) 70%, #1a1a1a 100%)` 2. Jemný tmavý overlay `rgba(--background, 0.3)` - **Eyebrow:** "Realitní kancelář · Praha" — zlatý text, malé velké písmo, s malou zlatou čárou nalevo. - **H1:** "Váš vysněný domov" na první řádek, druhý řádek `"začíná zde"` — kurzívou, zlatou barvou. - **Podnadpis:** Popisek o diskretním prodeji, přístupu a výsledcích nad odhadní cenou. Barva `--muted-foreground`. - **Vyhledávací panel:** - Pozice pod hlavním textem, `max-width` cca 5xl. - Pozadí `rgba(--surface, 0.8)` + `backdrop-blur-xl` + ohraničení `--border`. - Grid: 4 sloupce na desktopu (1 sloupec na mobilu). - Pole: 1. **Lokalita** — ikona MapPin, placeholder "Praha 1, Vinohrady…" 2. **Typ nemovitosti** — ikona Home, select s options: Byt, Dům/vila, Komerční, Pozemek 3. **Cena** — ikona Banknote, select s options: do 5 mil., 5–15 mil., 15–40 mil., nad 40 mil. 4. **Tlačítko "Hledat"** — plné zlaté pozadí, ikona Search, text tmavý. - Každé pole má nadpis (label) malými velkými písmeny v `--gold`. - **Statistiky pod panelem:** 3 sloupce: - "18" / "let na trhu" - "420+" / "spokojených klientů" - "+15 %" / "průměrně nad odhad" - Čísla v serif fontu, zlatá barva, velká. Popisky malá velká písmena, `--muted-foreground`. --- ### 3.3 Sekce "Služby" (id="sluzby") - **Pozadí:** `--background`. - **Heading komponenta (používá se ve více sekcích):** - Eyebrow: zlatý text mezi dvěma zlatými čárami (každá `w-8`). - H2: velký serif nadpis. - Volitelný podnadpis: `--muted-foreground`. - **3 karty ve službách:** 1. **Prodej** — ikona Building2 - Popisek: "Profesionální příprava, fotograf, home staging a cílený marketing pro maximální cenu." - Odrážky: Tržní ocenění zdarma, Mezinárodní distribuce, Právní servis 2. **Pronájem** — ikona KeyRound - Popisek: "Prověření nájemníci, smlouvy připravené advokátem a kompletní správa nemovitosti." - Odrážky: Screening nájemce, Inkaso a vyúčtování, 24/7 podpora 3. **Investice** — ikona TrendingUp - Popisek: "Výběr nemovitostí s prokazatelným výnosem a strategie pro budování portfolia." - Odrážky: Analýza výnosu, Off-market příležitosti, Asset management - **Styl karet:** `bg-background`, ohraničení `--border`, padding 40–48px. Ikona v rámečku `w-14 h-14`, ohraničení `1px solid rgba(--gold, 0.4)`, text `--gold`. Při hoveru se ikona vyplní zlatem a text změní na tmavý. Nadpis karty v serifu 30px. Odrážky s malou zlatou tečkou. - **Rozvržení karet:** `grid` 3 sloupce na desktopu, oddělené jemnými linkami (`gap-px`, `bg-border` jako dělící čára). --- ### 3.4 Sekce "Proces prodeje" — Roadmap (id="proces") - **Pozadí:** `--surface`. - **Heading:** eyebrow "Jak pracujeme", H2 "Cesta k úspěšnému prodeji", podnadpis o klikatelných fázích. - **6 kroků vodorovně** (grid 6 sloupců na desktopu, 2 na mobilu): 1. **Ocenění** — "Bezplatné tržní ocenění do 48 h" 2. **Příprava** — "Home staging, dokumentace, právní audit" 3. **Marketing** — "Cílená kampaň do ČR i zahraničí" 4. **Prohlídky** — "Předkvalifikovaní zájemci, žádný turismus" 5. **Vyjednávání** — "Maximalizujeme cenu a chráníme vaše zájmy" 6. **Podpis smlouvy** — "Bezpečná úschova a předání nemovitosti" - **Každý krok:** Klikatelný button. Číslo (01–06) v rámečku `w-12 h-12`, border, serif font. Aktivní krok má plné zlaté pozadí + stín. Neaktivní krok má `--border`, text `--muted-foreground`, hover zvýrazní text na `--gold`. Pod číslem nadpis kroku a malý popis (jen na desktopu). - **Vodorovná linka:** Mezi kroky jemná čára `h-px bg-border`, skrytá na mobilu. - **Detailní panel pod kroky:** - Rozložení: levý sloupec (1/3) — eyebrow "Fáze XX / 06", velký nadpis aktuálního kroku, krátký popis. - Pravý sloupec (2/3) — seznam 3 detailních odrážek s ikonou šipky (ChevronRight) v `--gold`. - Panel má `bg-background`, `border: 1px solid --border`, padding 32–64px. - **React state:** `useState(0)` pro aktivní fázi. Kliknutím na krok se změní detailní panel. --- ### 3.5 Sekce "Aktuální nabídka" (id="nabidka") - **Pozadí:** `--background`. - **Heading:** eyebrow "Aktuální nabídka", H2 "Vybrané nemovitosti", podnadpis o diskrétní nabídce. Vpravo od heading link "Požádat o kompletní katalog →" zlatý s čárou. - **3 karty nemovitostí:** 1. **Penthouse s výhledem na Hradčany** — tag "Nové", lokalita "Praha 1 — Staré Město", cena "38 900 000 Kč", 4+kk, 186 m² 2. **Cihlový byt v secesním domě** — tag "Exkluzivně", lokalita "Praha 2 — Vinohrady", cena "14 250 000 Kč", 3+1, 112 m² 3. **Architektonická vila s bazénem** — tag "Off-market", lokalita "Praha-západ — Roztoky", cena "62 500 000 Kč", 6+kk, 340 m² - **Styl karty:** - Fotografie v poměru 4:3, `overflow-hidden`, jemný zoom `scale-105` při hoveru (přechod 1.2s). - Tag vlevo nahoře: `bg-gold`, text tmavý, malé velké písmo. - Pod fotkou: lokace s ikonou MapPin (malá, zlatá), nadpis v serifu 24px, hover změní text na zlatý. - Spodní řádek: cena vlevo (serif, zlatá, 24px), vpravo pokoje (ikona Bed) a m² (ikona Maximize2) — `--muted-foreground`. - **Grid:** 3 sloupce na desktopu, 2 na tabletu, 1 na mobilu, mezery 32px. --- ### 3.6 Sekce "Reference" (id="reference") - **Pozadí:** `--surface`. - **Heading:** eyebrow "Reference", H2 "Důvěřuje nám 420+ klientů", podnadpis "Konkrétní výsledky, ne marketingové fráze." - **3 testimonial karty:** 1. **Markéta Dvořáková** — Majitelka, Praha 2. Výsledek: "Prodáno za 3 týdny o 15 % nad odhadní cenou". Citace o profesionálním přístupu a home stagingu. 2. **Ing. Petr Havelka** — Investor, Praha 6. Výsledek: "Portfolio 4 bytů s ročním výnosem 6,8 %". Citace o dlouhodobé spolupráci. 3. **Rodina Novákovi** — Kupující, Vinohrady. Výsledek: "Našli nám byt mimo veřejnou nabídku". Citace o diskrétní nabídce. - **Styl karty:** `bg-background`, `border: 1px solid --border`, padding 32–40px. Ikona uvozovek (Quote) v `rgba(--gold, 0.4)`. Citace text `--foreground/90`. Výsledek v rámečku: levý border zlatý 2px, `bg rgba(--gold, 0.05)`, nadpis "Výsledek" malé velké písmo zlaté, pod ním výsledek v serifu 18px. Spodní část: fotografie klienta `w-12 h-12`, `rounded-full`, `grayscale`, při hoveru barevná (`grayscale-0` → transition). Jméno a role. --- ### 3.7 FAQ sekce (id="faq") - **Pozadí:** `--surface`. - **Heading:** eyebrow "Časté dotazy", H2 "Než nám napíšete", centrováno. - **6 accordion položek:** 1. Kolik stojí vaše služby? 2. Jak dlouho trvá prodej nemovitosti? 3. Pracujete i s nemovitostmi mimo Prahu? 4. Co když nemovitost neprodáte? 5. Pomůžete i s investičním poradenstvím? 6. Jak probíhá první schůzka? - **Styl accordionu:** Každá položka má `bg-background`, `border: 1px solid --border`. Otevřená položka změní border na `rgba(--gold, 0.6)`. Trigger (otázka) v serifu 20px, hover změní barvu na zlatou. Obsah (odpověď) `--muted-foreground`, padding dole. --- ### 3.8 Kontaktní sekce (id="kontakt") - **Pozadí:** Gradient `linear-gradient(to bottom, --background, --surface, --background)`. - **Rozložení:** 2 sloupce na desktopu (2/5 info, 3/5 formulář), 1 sloupec na mobilu. - **Levý sloupec:** - Eyebrow "Kontakt" se zlatou čárou. - H2: "Bezplatná" + kurzívou zlatá "konzultace". - Krátký popis: "Ozveme se do 24 hodin…" - 3 kontaktní položky s ikonou v rámečku `w-10 h-10` (border `rgba(--gold, 0.4)`): 1. Telefon: +420 225 000 000 2. E-mail: info@premiumreality.cz 3. Kancelář: Vinohradská 25, Praha 2 - Každá položka má malý nadpis (Telefon / E-mail / Kancelář) v `--muted-foreground`, velké písmo, tracking. - **Pravý sloupec — formulář:** - Pozadí `--surface-elevated`, border `--border`, stín elegantní (tmavý). - Po odeslání se zobrazí success stav: zelená/zlatá ikona Check v kruhu, text "Děkujeme za zprávu", popis o 24 hodinách. - **Pole formuláře:** - Jméno a příjmení (text, required) - Telefon (tel, required) - E-mail (email, required) - Mám zájem o — select: Prodej, Pronájem, Hledání, Investiční poradenství - Zpráva — textarea 4 řádky - **Tlačítko:** "Odeslat poptávku" — plné zlaté pozadí, tmavý text, tracking 0.2em, uppercase, stín zlatý. - Pod tlačítkem: malý text "Vaše údaje zpracováváme dle GDPR…" v `--muted-foreground`, centrováno. - Všechna input pole: `bg-background`, `border: 1px solid --border`, padding, focus border změna na `--gold`. - Labely: malé velké písmo, `--gold`, tracking 0.25em. --- ### 3.9 Footer - **Pozadí:** `--background`. - **Horní ohraničení:** `1px solid --border`. - **Obsah:** 3 sloupce na desktopu: - Vlevo: logo (malý "P" v rámečku) + "Premium Reality" + "Praha" zlaté. - Uprostřed: copyright "© [aktuální rok] Premium Reality Praha s.r.o. — všechna práva vyhrazena." - Vpravo: odkazy "GDPR" a "Obchodní podmínky" — hover na `--gold`. - **Mobil:** vše pod sebou, centrováno. --- ## 4. Technické pokyny - **Framework:** React (nebo Next.js) + Tailwind CSS. - **Ikonky:** Použij knihovnu `lucide-react` — Search, MapPin, Home, Banknote, Building2, KeyRound, TrendingUp, ChevronRight, Quote, Phone, Mail, Bed, Maximize2, Check. - **Accordion:** Použij shadcn/ui nebo vlastní komponentu s `useState` pro otevření jedné položky. - **Smooth scroll:** `html { scroll-behavior: smooth; }` - **Responzivita:** - Mobilní breakpointy: zásobníkové rozvržení (stacked), menší písma, hamburger menu. - Tablet: 2 sloupce tam, kde je to možné. - Desktop: plné rozvržení popsané výše. - **Obrázky:** Vygeneruj si pomocí AI nebo použij Unsplash placeholder: - Hero: luxusní vila (široká, krajinka) - 3 nemovitosti: penthouse, secesní byt, moderní vila - 3 klienti: portréty (žena, muž, pár/rodina) - **Favicon:** Stylizované zlaté "P" v rámečku na tmavém pozadí (SVG). --- ## 5. SEO Meta tagy ``` Title: Premium Reality Praha — Prémiové nemovitosti v Praze Description: Diskrétní prodej, pronájem a investice do prémiových nemovitostí v Praze. Osobní přístup, mezinárodní marketing a prokazatelné výsledky nad odhadní cenou. OG Title: Premium Reality Praha OG Description: Váš vysněný domov začíná zde. Luxusní reality v Praze a okolí. ``` --- ## 6. Interakce & animace - **Scroll efekt na navbar:** přidání pozadí a rozmazání při scrollu dolů. - **Roadmap:** Kliknutím na krok se okamžitě změní detailní panel (žádný smooth transition nutný, ale můžeš přidat). - **Hover karet nemovitostí:** `scale(1.05)` na fotografii, změna barvy nadpisu na zlatou. - **Hover karet služeb:** ikona se vyplní zlatem, text uvnitř ikony ztmavne. - **Grayscale fotky klientů:** výchozí `grayscale`, na hover `grayscale(0)`. - **Tlačítka:** plynulá změna barvy pozadí (`transition-colors`). --- > **Zásadní pravidlo:** Každá barva musí pocházet z design systému — nikdy nepoužívej přímo `#C9A84C` v komponentě, ale vždy token `--gold`. Stejně tak pro pozadí, text a ohraničení.