WebWizard/docs/prompts/step16.md

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