76 lines
2.8 KiB
Markdown
76 lines
2.8 KiB
Markdown
# Krok 16 - Rendering Vrstva (Obsahové Sekcie)
|
|
|
|
## Kontext projektu
|
|
Po vytvorení HTML kostry je potrebné implementovať vykresľovanie jednotlivých sekcií webu (Hero, O nás, Služby, atď.) na základe AI dát.
|
|
|
|
## Pred implementáciou si preštuduj
|
|
- `docs/mvp.md` - Sekcia 4 (Rendering layer).
|
|
- `docs/wizard.md` - Sekcia 11 (Website Quality Requirements).
|
|
- `docs/prompts/step15.md` - Core Renderer.
|
|
|
|
## Cieľ
|
|
Implementovať šablóny pre jednotlivé sekcie webu a zabezpečiť ich dynamické vkladanie do výsledného HTML.
|
|
|
|
## Požadované zmeny
|
|
1. Vytvorenie adresára `src/Templates/sections/`.
|
|
2. Implementácia PHP šablón pre sekcie:
|
|
- `hero.php` - Headline, subheadline, CTA tlačidlo.
|
|
- `about.php` - Titulok a text O nás.
|
|
- `services.php` - Zoznam služieb (karty).
|
|
- `pricing.php` - Cenník alebo balíky.
|
|
- `gallery.php` - Zobrazenie nahraných obrázkov.
|
|
- `faq.php` - Harmonika s otázkami a odpoveďami.
|
|
- `contact.php` - Kontaktné údaje a formulár.
|
|
3. Úprava `Renderer.php`:
|
|
- Logika pre iteráciu cez `wizard_data.modules.sections`.
|
|
- Inklúzia príslušných šablón sekcií.
|
|
- Odovzdávanie dát z `content.generated` do šablón.
|
|
|
|
## Implementačné pravidlá
|
|
- Používaj sémantické HTML tagy (`<section>`, `<article>`, `<header>`, `<footer>`).
|
|
- Zabezpeč logickú hierarchiu nadpisov (H1 len v Hero, H2 pre sekcie).
|
|
- Každá sekcia musí mať unikátne ID pre navigáciu (anchor links).
|
|
- Obrázky musia mať alt texty (z AI alebo fallback).
|
|
|
|
## Súbory ktoré je potrebné vytvoriť
|
|
- `src/Templates/sections/hero.php`
|
|
- `src/Templates/sections/about.php`
|
|
- `src/Templates/sections/services.php`
|
|
- `src/Templates/sections/pricing.php`
|
|
- `src/Templates/sections/gallery.php`
|
|
- `src/Templates/sections/faq.php`
|
|
- `src/Templates/sections/contact.php`
|
|
|
|
## Súbory ktoré je potrebné upraviť
|
|
- `src/Services/Renderer.php`
|
|
|
|
## API a dátové štruktúry
|
|
Vstupné dáta sú `wizard_data` a `content.generated` z JSONu projektu.
|
|
|
|
## Frontend požiadavky
|
|
- Responzívny layout pre všetky sekcie.
|
|
- Moderný styling (definovaný v `site.css` z kroku 15).
|
|
|
|
## Backend požiadavky
|
|
- PHP 8.2.
|
|
|
|
## Testovací scenár
|
|
1. Vygeneruj web pre projekt s viacerými sekciami.
|
|
2. Over, či sa v `index.html` nachádzajú všetky vybrané sekcie.
|
|
3. Skontroluj sémantiku HTML (napr. či sú služby v zozname `<ul>` alebo v kartách).
|
|
4. Over, či sú texty správne escapované.
|
|
|
|
## Definition of Done
|
|
- Všetky podporované sekcie sú implementované a vykresľujú sa.
|
|
- Web obsahuje kompletný obsah z AI content layer.
|
|
- HTML je sémantické a validné.
|
|
|
|
## Obmedzenia
|
|
- Nepoužívaj žiadne JS frameworky v šablónach sekcií.
|
|
|
|
## Výstup
|
|
- zoznam vytvorených súborov
|
|
- zoznam upravených súborov
|
|
- stručné zhrnutie vykonaných zmien
|
|
- prípadné otvorené problémy
|