LEO Template — Website-Sektionen

Agent-Prompt

# Neues Website-Projekt aus dem LEO-Template aufsetzen

Pfadvariablen: $LEO_TEMPLATE = Checkout dieses Templates, $LEO_WIKI = Wiki-Checkout.

## 1. Projekt-Setup
Folge dem create_website_project-Command (leo-server/opencode_commands/commands/create_website_project.md).
Fehlende Variablen (Projektname, Preview-Domain, Projekt-Typ, Port) vorab abfragen.
Tech-Stack: Vite, TanStack Start + Router, React, Tailwind CSS v4, TypeScript, @mdi/js.

## 2. Theme
Theme-Werte (in src/styles/tailwind.css des Zielprojekts fest eintragen — KEINE Laufzeit-Abstraktion übernehmen,
als Vorlage dient der :root-Block in $LEO_TEMPLATE/src/styles/tailwind.css):

:root {
  --theme-primary: #1f6f64;
  --theme-accent: #b66f3d;
  --theme-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --theme-font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

Theme-Variante: HELL (Standard-Werte des Templates)

## 3. Sektionen / Komponenten
Folgende Komponenten aus dem Template kopieren und an das Projekt anpassen
(Demo-Props/-Inhalte ersetzen, <a>-Links auf TanStack <Link> umstellen, Seitenstruktur daraus aufbauen):

- Navbar: NavbarCenteredRounded → $LEO_TEMPLATE/src/components/navbar/NavbarCenteredRounded.tsx
- Hero: HeroSplitImage → $LEO_TEMPLATE/src/components/hero/HeroSplitImage.tsx
- Leistungen / Features: FeatureCardsGrid → $LEO_TEMPLATE/src/components/section/FeatureCardsGrid.tsx
- Footer: FooterAccordionContact → $LEO_TEMPLATE/src/components/footer/FooterAccordionContact.tsx
- Cookie-Banner: CookieBanner → $LEO_TEMPLATE/src/components/cookie/CookieBanner.tsx + $LEO_TEMPLATE/src/components/cookie/consent.ts

Basis-Bausteine immer mit übernehmen:
- $LEO_TEMPLATE/src/components/Icon.tsx (mdi-Icons)
- $LEO_TEMPLATE/src/components/Image.tsx + $LEO_TEMPLATE/src/app/assets/ (Asset-Management, imageList wird vom Pipeline-Task generiert)
- $LEO_TEMPLATE/src/styles/tailwind.css als Ausgangspunkt für das Design-System (semantische Tokens: primary, accent, surface, paper, ink, muted, line)
- $LEO_TEMPLATE/src/markdown.css, falls Markdown-Inhalte (z. B. Ratgeber) geplant sind

## 4. Qualität
Qualität & Referenzen (nur referenzieren, Inhalte nicht in dieses Prompt kopieren):
- SEO-Checkliste abarbeiten: $LEO_WIKI/Infrastruktur/Webseite/seo_checkliste.md
- Asset-/Bild-/Video-/Font-Management gemäß Wiki-Anleitung einrichten (Image_Video_Font_Management)
- Demo-Inhalte (Musterfirma, Platzhalter-Bilder) durch echte Projektinhalte ersetzen

Pfade bleiben über $LEO_TEMPLATE und $LEO_WIKI konfigurierbar. Die Konfiguration wird automatisch im Browser gespeichert (localStorage) — die Live-Vorschau im anderen Tab aktualisiert sich mit.

Konfigurator

Theme

Schriften

Sektionen

Agent-Prompt