✨ feat: add new contact form, hero, features, and richtext blocks; implement scroll-reveal action and update styles

- Introduced ContactFormBlock, FeaturesBlock, HeroBlock, and RichtextBlock components.
- Implemented a scroll-reveal action for animations on element visibility.
- Enhanced CSS styles for better theming and prose formatting.
- Added localization support for new components and updated existing translations.
- Created e2e tests for demo pages including contact form validation and navigation.
- Added a video tour showcasing the demo pages and interactions.

README.md

@@ -2,6 +2,33 @@
 
 Starter Kit für SPAs(s)   `;)`   mit Svelte und TibiCMS inkl. SSR
 
+## Neues Projekt starten
+
+Nachdem du dieses Repository als Vorlage geklont hast, passe die Platzhalter an dein Projekt an:
+
+1. **`.env`**: Ersetze `__PROJECT_NAME__` mit deinem Projektnamen (z.B. `mein-projekt`).
+   Die folgenden URLs werden automatisch abgeleitet:
+   - `CODING_URL=https://mein-projekt.code.testversion.online`
+   - `STAGING_URL=https://dev-mein-projekt.staging.testversion.online`
+2. **`frontend/spa.html`** / **`api/templates/spa.html`**: Ersetze `__PROJECT_TITLE__` mit dem Seitentitel.
+3. **`api/config.yml.env`**: Passe `ADMIN_TOKEN`, Datenbank-Name und weitere Secrets an.
+4. **`docker-compose-local.yml`**: Suche nach `project_name__` und ersetze mit deinem Projektnamen (Container-Benennung).
+5. **Demo-Inhalte entfernen**: Die Demo-Seite besteht aus diesen Dateien, die für ein echtes Projekt entfernt/ersetzt werden können:
+   - `frontend/src/blocks/` — Block-Komponenten (HeroBlock, FeaturesBlock, RichtextBlock, AccordionBlock, ContactFormBlock, BlockRenderer, NotFound)
+   - `frontend/mocking/content.json` — Demo-Mockdaten für Content
+   - `frontend/mocking/navigation.json` — Demo-Mockdaten für Navigation
+   - `api/collections/content.yml` — Content-Collection-Konfiguration
+   - `api/collections/navigation.yml` — Navigation-Collection-Konfiguration
+   - `tests/e2e/demo.spec.ts` — Demo-E2E-Tests
+   - `video-tours/tours/demo-showcase.tour.ts` — Demo-Video-Tour
+6. **`frontend/src/App.svelte`**: Passe Header, Footer und Content-Loading an dein Datenmodell an.
+
+```sh
+# Platzhalter ersetzen (Beispiel für Linux/Mac):
+sed -i 's/__PROJECT_NAME__/mein-projekt/g' .env
+sed -i 's/__PROJECT_TITLE__/Mein Projekt/g' frontend/spa.html api/templates/spa.html
+```
+
 ## Wozu?
 
 Via Svelte wird eine SPA (Single-Page-App) programmiert. Dazu wird der Code einmal für den Browser aufgebreitet und außerdem für den Server kompiliert und transpiliert. Der Server-Code wird in einem tibi-server SSR-Hook (server side rendering) eingebunden und generiert dort fertiges HTML anhand der aktuelle Route für SEO und optimierte Ladezeiten.