# Interní FAQ — Specifikace pro 1:1 replikaci webu Kompletní specifikace interní FAQ aplikace pro realitní kancelář. Tento dokument obsahuje vše potřebné k přesné replikaci: design tokeny, strukturu stránky, komponenty, chování vyhledávání a kompletní databázi FAQ. --- ## 1. Přehled - **Účel:** Interní firemní FAQ pro realitní kancelář — zaměstnanec rychle najde odpověď bez nutnosti psát email. - **Typ:** Statická single-page aplikace, bez backendu, data hardcoded v JS. - **Jazyk:** Čeština. - **Stack (referenční):** React 19 + TanStack Start + Tailwind CSS v4. Replikovatelné v jakémkoli frameworku — důležitá je vizuální a funkční specifikace níže. --- ## 2. Design system ### Barvy (kompletní paleta) | Token | Hex / OKLCH | Použití | | --- | --- | --- | | `background` | `#0A0A0A` / `oklch(0.07 0 0)` | Hlavní pozadí stránky | | `foreground` | `oklch(0.97 0 0)` (téměř bílá) | Hlavní text | | `card` | `oklch(0.11 0 0)` | Pozadí karet FAQ | | `primary` (žlutá) | `#F5C518` / `oklch(0.84 0.16 90)` | Akcent — tlačítka, focus, highlight, ikony šipek | | `primary-foreground` | `#0A0A0A` | Text na žlutém pozadí | | `muted` | `oklch(0.15 0 0)` | Tlumené plochy | | `muted-foreground` | `oklch(0.65 0 0)` | Sekundární text (podnadpisy, odpovědi) | | `border` | `oklch(0.22 0 0)` | Okraje karet a inputů (neaktivní stav) | | `input` | `oklch(0.13 0 0)` | Pozadí inputu | | `ring` | `#F5C518` | Focus ring (žlutý) | ### Typografie - **Font:** `Inter`, váhy `400, 500, 600, 700, 800`. Fallback: `system-ui, sans-serif`. - **Načítání:** Google Fonts `https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap`. - **Nadpis H1:** `text-4xl` mobil / `text-5xl` desktop, `font-extrabold`, `tracking-tight`. Slovo „FAQ" žlutě (`text-primary`). - **Podnadpis:** `text-base` / `text-lg` desktop, `text-muted-foreground`. - **Otázka (karta):** `text-base` / `text-lg`, `font-semibold`. - **Štítek kategorie nad otázkou:** `text-[11px]`, `uppercase`, `tracking-wider`, `text-muted-foreground`. - **Odpověď:** `text-sm` / `text-base`, `leading-relaxed`, `text-muted-foreground`. ### Radius a spacing - Globální radius: `0.625rem` (`--radius`). - Karty: `rounded-xl`. - Search input: `rounded-2xl`, výška `h-16`. - Tagy kategorií: `rounded-full`. - Hlavní kontejner: `max-w-4xl mx-auto px-5 pt-16 sm:pt-24 pb-24`. ### Stíny, animace, hover - **Karta hover (zavřená):** okraj přechází z `border` na `border-primary/60` (jemný žlutý okraj). - **Karta rozbalená:** levý okraj `border-l-4 border-l-primary` (výrazná žlutá hranice vlevo), horní/dolní/pravý zůstává `border-border`. - **Šipka:** otáčí se 180° při otevření, `transition-transform duration-300`. - **Accordion:** CSS grid trik — `grid-rows-[0fr]` → `grid-rows-[1fr]`, `transition-all duration-300 ease-out`, vnitřní `overflow-hidden`. Současně `opacity-0` → `opacity-100`. - **Tagy aktivní:** `bg-primary text-primary-foreground border-primary`. Neaktivní: `bg-card text-foreground border-border`, hover `border-primary/60`. - **Input focus:** `border-primary` + `ring-2 ring-primary/40`. --- ## 3. Struktura stránky (shora dolů) Vše vycentrované v `max-w-4xl` kontejneru. ### 3.1 Header (`text-center`) - H1: **„Interní FAQ"** — slovo „FAQ" žlutě. - Podnadpis: **„Najdi odpověď rychleji než napíšeš email"**. - Margin top headeru: `pt-16` mobil / `pt-24` desktop. ### 3.2 Vyhledávání (hlavní prvek) - Velký input šířky 100 %, výška `h-16`. - Ikona `Search` (lucide) absolutně vlevo (`left-5`, `h-5 w-5`, `text-muted-foreground`). - Placeholder: **„Hledej otázku, klíčové slovo…"**. - Vpravo uvnitř inputu (jen desktop, `sm:inline-flex`) žluté tlačítko **„Hledat"** — `h-12`, `rounded-xl`, `bg-primary text-primary-foreground`, hover `brightness-110`. - Padding inputu: `pl-14 pr-32`. - Margin top: `mt-10 sm:mt-14`. ### 3.3 Kategorie (filtry) - Řada „pill" tagů, `flex flex-wrap gap-2`, `mt-6`. - První tag **„Vše"** — resetuje filtr. - Další tagy (přesné pořadí a názvy): 1. Dokumenty & Šablony 2. CRM & Leady 3. Klienti 4. Finance 5. Marketing 6. Procesy 7. IT & Přístupy - Toggle chování: klik na aktivní kategorii ji deaktivuje. - Aktivní: žluté pozadí, černý text. ### 3.4 Sekce výsledků (`mt-10`) Tři režimy zobrazení: 1. **Prázdné vyhledávání (default)** — výsledky seskupené dle kategorií. Každá skupina má nadpis H2: `text-xs uppercase tracking-widest text-primary`. Mezi skupinami `space-y-10`, mezi kartami uvnitř `space-y-3`. 2. **S query** — plochý seznam všech shod + řádek nahoře: „Nalezeno N výsledek/výsledky/výsledků" (česká pluralizace: 1 = „výsledek", 2–4 = „výsledky", 5+ = „výsledků"). 3. **Žádné výsledky** — karta s textem: > Tuto informaci zatím nemám. > Zeptej se operations managera nebo napiš na **info@firma.cz** (mailto, žlutý link). ### 3.5 FAQ karta (accordion) - Klikatelná hlavička (tlačítko přes celou šířku): štítek kategorie + otázka vlevo, ikona `ChevronDown` vpravo. - Po kliknutí se plynule rozbalí odpověď + objeví se žlutá levá hranice (4 px). - Padding: `px-5 py-4` hlavička, `px-5 pb-5` tělo odpovědi. ### 3.6 Footer (`mt-20`, oddělené horní linkou `border-t border-border pt-10`, `text-center`) - Nadpis: **„Nenašel jsi co hledáš?"** (`text-lg font-semibold`). - Žluté CTA tlačítko s ikonou `Mail`: **„Napsat operations managerovi"** → `mailto:operations@firma.cz`. Styling: `rounded-xl bg-primary text-primary-foreground px-6 py-3 text-sm font-semibold`, hover `brightness-110`. - Malý text dole: **„FAQ se pravidelně aktualizuje. Poslední aktualizace: 24. 6. 2026"** (`text-xs text-muted-foreground`). --- ## 4. Logika vyhledávání - **Real-time** při psaní (žádné tlačítko Enter). - **Normalizace:** lowercase + odstranění diakritiky (`NFD` + regex `/[\u0300-\u036f]/g`). Aplikuje se na query i na prohledávaný text. - **Pole prohledávání:** spojení `otazka + " " + odpoved + " " + klicova_slova.join(" ")`. - **Match:** substring (`includes`). Zobrazí **všechny** shody, ne jen nejlepší. - **Highlight:** v textu otázky i odpovědi se najde shoda (case + diacritics insensitive) a obalí se `` s třídou `bg-primary/30 text-primary rounded px-0.5` (žluté zvýraznění). Při hledání se musí zachovat originální velikost a diakritika viditelného textu — normalizovaná je jen porovnávací varianta. - **Kombinace s kategorií:** filtr kategorie a vyhledávání fungují AND. - **Prázdné `filtered`** → empty-state komponenta (viz 3.4). --- ## 5. Komponenty / kontrakty ```ts type Faq = { kategorie: string; // jedna z 7 kategorií otazka: string; odpoved: string; klicova_slova: string[]; }; ``` - `normalize(s: string): string` — lowercase + bez diakritiky. - `` — vrací JSX s `` obalením shodných úseků. - `` — stavový (`open`), accordion animace, hover/expanded okraje. - `Index` — `useState` pro `query` a `activeCat`, `useMemo` pro `filtered` a `grouped`. Ikony: `lucide-react` — `Search`, `ChevronDown`, `Mail`. --- ## 6. Responzivita - Mobile-first. - Tlačítko „Hledat" uvnitř inputu se na mobilu skrývá (`hidden sm:inline-flex`). - Typografie zvětšuje na `sm:` breakpointu. - Kontejner má `px-5` padding na všech velikostech. - Tagy se přirozeně lámou (`flex-wrap`). --- ## 7. Meta / SEO / favicon - ``: „Interní FAQ — Realitní kancelář". - `<meta description>`: „Najdi odpověď rychleji než napíšeš email." - Open Graph + Twitter card se stejným titulkem a popisem. - Favicon: žluté kolečko (`/favicon.png`). - `lang="cs"` doporučeno. --- ## 8. Databáze FAQ (kompletních 20 záznamů, vložit beze změny) ```json [ { "kategorie": "Dokumenty & Šablony", "otazka": "Kde najdu aktuální fotky nemovitosti?", "odpoved": "Všechny fotky najdeš v Google Drive ve složce: Nemovitosti → Název projektu → Foto. Pokud tam nejsou, kontaktuj marketing.", "klicova_slova": ["fotky","foto","nemovitost","drive","složka","obrázky"] }, { "kategorie": "Dokumenty & Šablony", "otazka": "Jakou smlouvu mám použít při rezervaci bytu?", "odpoved": "Použij šablonu Rezervační smlouva – byt v interní složce Smlouvy → Rezervace.", "klicova_slova": ["smlouva","rezervace","byt","šablona","dokument"] }, { "kategorie": "CRM & Leady", "otazka": "Jak mám založit nového klienta do CRM?", "odpoved": "V CRM klikni na Nový kontakt, vyplň základní údaje, zdroj leadu a nastav stav Nový lead.", "klicova_slova": ["CRM","klient","nový","kontakt","lead","založit"] }, { "kategorie": "Marketing", "otazka": "Kde najdu naše logo a brand manuál?", "odpoved": "Brand assets jsou ve složce Marketing → Brand → Logo & Brand Manual.", "klicova_slova": ["logo","brand","manuál","marketing","vizuál","design"] }, { "kategorie": "Klienti", "otazka": "Jak probíhá onboarding nového klienta?", "odpoved": "Nejprve pošli onboarding email, následně nastav úvodní call a vytvoř klientovi onboarding checklist.", "klicova_slova": ["onboarding","klient","nový","email","call","checklist"] }, { "kategorie": "Klienti", "otazka": "Jak mám nacenit tuto službu?", "odpoved": "Orientační ceny najdeš v dokumentu Ceník služeb. Pokud si nejsi jistý, konzultuj výjimky s vedením.", "klicova_slova": ["cena","ceník","nacenit","služba","ceny","nabídka"] }, { "kategorie": "Klienti", "otazka": "Jak mám odpovědět klientovi, který chce slevu?", "odpoved": "Nejdříve zjisti důvod. Neposkytuj slevu automaticky. Použij připravenou šablonu Práce s námitkou cena.", "klicova_slova": ["sleva","námitka","cena","klient","šablona","odpověď"] }, { "kategorie": "CRM & Leady", "otazka": "Kde se evidují nové leady?", "odpoved": "Všechny nové leady zapisujeme do CRM v sekci Incoming Leads.", "klicova_slova": ["lead","leady","CRM","evidence","nový","incoming"] }, { "kategorie": "Dokumenty & Šablony", "otazka": "Jak mám vytvořit nabídku pro klienta?", "odpoved": "Použij šablonu nabídky v Canva nebo Google Docs a doplň personalizované informace podle klienta.", "klicova_slova": ["nabídka","šablona","canva","docs","klient","personalizace"] }, { "kategorie": "Marketing", "otazka": "Jak funguje proces schvalování příspěvků na sociální sítě?", "odpoved": "Nejprve návrh vlož do Notion boardu Content Approval, poté čekej na schválení marketing manažera.", "klicova_slova": ["sociální sítě","příspěvek","schválení","notion","marketing","content"] }, { "kategorie": "Procesy", "otazka": "Kde najdu záznam z posledního meetingu?", "odpoved": "Záznamy a shrnutí meetingů jsou v Notionu v sekci Meeting Notes.", "klicova_slova": ["meeting","záznam","shrnutí","notion","schůzka","notes"] }, { "kategorie": "Klienti", "otazka": "Jak řešit klienta, který nereaguje?", "odpoved": "Po 48 hodinách pošli follow-up. Po dalších 3 dnech zavolej. Poté lead označ jako cold.", "klicova_slova": ["klient","nereaguje","follow-up","cold","lead","kontakt"] }, { "kategorie": "Procesy", "otazka": "Jaký je postup při reklamaci?", "odpoved": "Vyplň reklamační formulář, přiřaď ticket supportu a informuj klienta do 24 hodin.", "klicova_slova": ["reklamace","formulář","ticket","support","postup","stížnost"] }, { "kategorie": "IT & Přístupy", "otazka": "Kde najdu přístupy k firemním nástrojům?", "odpoved": "Přístupy jsou uložené v password manageru. Přístup ti přidělí operations manager.", "klicova_slova": ["přístupy","heslo","password","nástroje","účet","login"] }, { "kategorie": "Procesy", "otazka": "Jak mám vytvořit novou nemovitost na web?", "odpoved": "Nahraj fotky, vyplň parametry, lokalitu, cenu a následně dej listing ke kontrole.", "klicova_slova": ["nemovitost","web","listing","fotky","parametry","nový"] }, { "kategorie": "Procesy", "otazka": "Jak máme pojmenovávat soubory a dokumenty?", "odpoved": "Používej formát: ROK_MĚSÍC_TYP_DOKUMENTU_NÁZEV.", "klicova_slova": ["soubor","dokument","pojmenování","název","formát","naming"] }, { "kategorie": "Procesy", "otazka": "Jak řešit urgentní problém mimo pracovní dobu?", "odpoved": "Kritické situace řeš přes emergency Slack channel nebo telefonicky s odpovědnou osobou.", "klicova_slova": ["urgentní","problém","mimo","pracovní","slack","emergency","nouzový"] }, { "kategorie": "Procesy", "otazka": "Kde najdu checklist pro organizaci eventu?", "odpoved": "V Notionu v sekci Events → Event SOP → Checklist.", "klicova_slova": ["event","checklist","notion","organizace","akce","SOP"] }, { "kategorie": "Finance", "otazka": "Jak funguje schvalování faktur?", "odpoved": "Faktury nejprve nahraj do složky Finance → Pending Approval. Schvaluje je finance manager každý pátek.", "klicova_slova": ["faktura","schválení","finance","pátek","manager","platba"] }, { "kategorie": "Klienti", "otazka": "Jaké jsou nejčastější chyby při onboardingu klienta?", "odpoved": "Chybějící očekávání, pozdní komunikace a nepřiřazené úkoly. Vždy používej onboarding checklist.", "klicova_slova": ["onboarding","chyby","checklist","komunikace","úkoly","očekávání"] } ] ``` --- ## 9. Akceptační checklist (pro ověření 1:1 replikace) - [ ] Pozadí `#0A0A0A`, akcenty `#F5C518`, font Inter. - [ ] H1 „Interní **FAQ**" (FAQ žlutě) + podnadpis. - [ ] Velký search input s ikonou lupy vlevo a žlutým tlačítkem „Hledat" vpravo (desktop). - [ ] 7 kategorií + „Vše" jako pill tagy; aktivní žlutá s černým textem; toggle on/off. - [ ] Real-time hledání napříč otázkami, odpověďmi a klíčovými slovy; ignoruje diakritiku a case. - [ ] Žluté zvýraznění hledaného slova v otázce i odpovědi. - [ ] Při prázdném hledání zobrazeny všechny FAQ seskupené dle kategorií. - [ ] Karta accordion: plynulé rozbalení, šipka rotuje 180°, žlutý levý border při otevření, jemný žlutý border-hover. - [ ] Žádné výsledky → fallback text s odkazem na `info@firma.cz`. - [ ] Footer s žlutým CTA „Napsat operations managerovi" (mailto) + datum poslední aktualizace. - [ ] Plně responzivní (mobil zachová čitelnost a UX). - [ ] Favicon = žluté kolečko.