✨ 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.
2026-02-26 03:54:07 +00:00
parent e8fd38e98a
commit 40ffa8207e
27 changed files with 2009 additions and 98 deletions
--- a/frontend/mocking/content.json
+++ b/frontend/mocking/content.json
@@ -1,7 +1,7 @@
 [
    {
-        "id": "home",
-        "_id": "home",
+        "id": "home-de",
+        "_id": "home-de",
        "active": true,
        "type": "page",
        "lang": "de",
@@ -11,49 +11,231 @@
        "blocks": [
            {
                "type": "hero",
-                "headline": "Willkommen",
+                "headline": "Moderne Webprojekte. Blitzschnell umgesetzt.",
                "headlineH1": true,
-                "subline": "Demo-Startseite des Starter-Templates",
+                "subline": "Tibi CMS Starter — Svelte 5, Tailwind CSS 4, SSR und eine API, die einfach funktioniert.",
+                "containerWidth": "full",
+                "callToAction": {
+                    "buttonText": "Features entdecken",
+                    "buttonLink": "#features",
+                    "buttonTarget": ""
+                },
                "heroImage": {
-                    "image": "demo-hero"
+                    "externalUrl": "https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920&q=80"
                }
            },
+            {
+                "type": "features",
+                "headline": "Was dieses Template kann",
+                "tagline": "Features",
+                "anchorId": "features",
+                "padding": { "top": "lg", "bottom": "lg" },
+                "text": "<div class='grid gap-8 sm:grid-cols-2 lg:grid-cols-3'><div class='feature-card'><div class='feature-icon'>⚡</div><h3>Svelte 5 Runes</h3><p>Reaktives UI mit $state, $derived und $effect — kein Boilerplate, maximale Performance.</p></div><div class='feature-card'><div class='feature-icon'>🎨</div><h3>Tailwind CSS 4</h3><p>Utility-first Styling mit Custom-Theme, Dark-Mode-ready und blitzschnellen Builds.</p></div><div class='feature-card'><div class='feature-icon'>🔌</div><h3>Tibi CMS API</h3><p>Collections, Hooks, Medialib — alles über eine REST-API. Mit Mock-Modus für offline-Entwicklung.</p></div><div class='feature-card'><div class='feature-icon'>🌍</div><h3>i18n Built-in</h3><p>Mehrsprachigkeit aus der Box: URL-basierte Sprachauswahl, Lazy-Loaded Locales, SSR-kompatibel.</p></div><div class='feature-card'><div class='feature-icon'>🖥️</div><h3>SSR via goja</h3><p>Server-Side Rendering in Go — schnelle Erstauslieferung, SEO-freundlich, mit Cache-Invalidierung.</p></div><div class='feature-card'><div class='feature-icon'>🧪</div><h3>Playwright Tests</h3><p>E2E, API, Visual Regression und Video-Tours — alles vorkonfiguriert und ready to go.</p></div></div>"
+            },
            {
                "type": "richtext",
-                "headline": "Über uns",
-                "text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>"
+                "headline": "So funktioniert's",
+                "tagline": "Workflow",
+                "anchorId": "workflow",
+                "padding": { "top": "lg", "bottom": "sm" },
+                "externalImageUrl": "https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=800&q=80",
+                "imagePosition": "right",
+                "text": "<p>Starte die Entwicklungsumgebung mit <code>make docker-up && make docker-start</code>. Der esbuild-Watcher kompiliert Änderungen in Echtzeit, BrowserSync lädt den Browser automatisch neu.</p><p>Für Offline-Entwicklung aktiviere den Mock-Modus mit <code>MOCK=1</code> in der <code>.env</code>. Content wird über die Tibi-API geladen und mit dem BlockRenderer dargestellt.</p><p>Jeder Block-Typ (Hero, Richtext, Accordion, Features) ist eine eigene Svelte-Komponente — <strong>erweiterbar und austauschbar</strong>.</p>"
+            },
+            {
+                "type": "accordion",
+                "headline": "Häufige Fragen",
+                "tagline": "FAQ",
+                "anchorId": "faq",
+                "padding": { "top": "sm", "bottom": "lg" },
+                "accordionItems": [
+                    {
+                        "question": "Wie starte ich ein neues Projekt mit diesem Template?",
+                        "answer": "<p>Klone das Repository, passe <code>.env</code> an und starte mit <code>make docker-up && make docker-start</code>. Die Demo-Inhalte kannst du einfach durch echte Inhalte ersetzen.</p>",
+                        "open": true
+                    },
+                    {
+                        "question": "Brauche ich einen laufenden Tibi-Server für die Entwicklung?",
+                        "answer": "<p>Nein! Mit <code>MOCK=1</code> in der <code>.env</code> werden API-Aufrufe gegen lokale JSON-Dateien aufgelöst. So kannst du Frontend-Features ohne Backend entwickeln.</p>"
+                    },
+                    {
+                        "question": "Wie füge ich eine neue Seite hinzu?",
+                        "answer": "<p>Erstelle einen neuen Content-Eintrag in der Collection (oder in <code>mocking/content.json</code> für Mock-Modus) mit dem gewünschten Pfad und Blöcken. Die App rendert ihn automatisch über den BlockRenderer.</p>"
+                    },
+                    {
+                        "question": "Kann ich eigene Block-Typen erstellen?",
+                        "answer": "<p>Ja! Erstelle eine neue Svelte-Komponente und registriere den Typ im BlockRenderer. Das Type-Interface <code>ContentBlockEntry</code> in <code>global.d.ts</code> kannst du entsprechend erweitern.</p>"
+                    }
+                ]
            }
        ],
        "meta": {
-            "title": "Startseite",
-            "description": "Demo-Startseite"
+            "title": "Tibi Svelte Starter — Modernes CMS-Template",
+            "description": "Svelte 5, Tailwind CSS 4, SSR, i18n und Playwright-Tests — das perfekte Starterkit.",
+            "keywords": "svelte, tibi, cms, starter, template"
        }
    },
    {
-        "id": "about",
-        "_id": "about",
+        "id": "home-en",
+        "_id": "home-en",
+        "active": true,
+        "type": "page",
+        "lang": "en",
+        "translationKey": "home",
+        "name": "Home",
+        "path": "/",
+        "blocks": [
+            {
+                "type": "hero",
+                "headline": "Modern web projects. Lightning fast.",
+                "headlineH1": true,
+                "subline": "Tibi CMS Starter — Svelte 5, Tailwind CSS 4, SSR and an API that just works.",
+                "containerWidth": "full",
+                "callToAction": {
+                    "buttonText": "Explore features",
+                    "buttonLink": "#features",
+                    "buttonTarget": ""
+                },
+                "heroImage": {
+                    "externalUrl": "https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920&q=80"
+                }
+            },
+            {
+                "type": "features",
+                "headline": "What this template offers",
+                "tagline": "Features",
+                "anchorId": "features",
+                "padding": { "top": "lg", "bottom": "lg" },
+                "text": "<div class='grid gap-8 sm:grid-cols-2 lg:grid-cols-3'><div class='feature-card'><div class='feature-icon'>⚡</div><h3>Svelte 5 Runes</h3><p>Reactive UI with $state, $derived and $effect — no boilerplate, maximum performance.</p></div><div class='feature-card'><div class='feature-icon'>🎨</div><h3>Tailwind CSS 4</h3><p>Utility-first styling with custom theme, dark-mode-ready and blazing fast builds.</p></div><div class='feature-card'><div class='feature-icon'>🔌</div><h3>Tibi CMS API</h3><p>Collections, hooks, media library — all via REST API. With mock mode for offline development.</p></div><div class='feature-card'><div class='feature-icon'>🌍</div><h3>Built-in i18n</h3><p>Multi-language out of the box: URL-based language selection, lazy-loaded locales, SSR-compatible.</p></div><div class='feature-card'><div class='feature-icon'>🖥️</div><h3>SSR via goja</h3><p>Server-side rendering in Go — fast initial delivery, SEO-friendly, with cache invalidation.</p></div><div class='feature-card'><div class='feature-icon'>🧪</div><h3>Playwright Tests</h3><p>E2E, API, visual regression and video tours — all preconfigured and ready to go.</p></div></div>"
+            },
+            {
+                "type": "richtext",
+                "headline": "How it works",
+                "tagline": "Workflow",
+                "anchorId": "workflow",
+                "padding": { "top": "lg", "bottom": "sm" },
+                "externalImageUrl": "https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=800&q=80",
+                "imagePosition": "right",
+                "text": "<p>Start the dev environment with <code>make docker-up && make docker-start</code>. The esbuild watcher compiles changes in real-time, BrowserSync auto-reloads the browser.</p><p>For offline development, enable mock mode with <code>MOCK=1</code> in <code>.env</code>. Content is loaded via the Tibi API and rendered with the BlockRenderer.</p><p>Each block type (Hero, Richtext, Accordion, Features) is its own Svelte component — <strong>extensible and swappable</strong>.</p>"
+            },
+            {
+                "type": "accordion",
+                "headline": "Frequently Asked Questions",
+                "tagline": "FAQ",
+                "anchorId": "faq",
+                "padding": { "top": "sm", "bottom": "lg" },
+                "accordionItems": [
+                    {
+                        "question": "How do I start a new project with this template?",
+                        "answer": "<p>Clone the repository, adjust <code>.env</code> and start with <code>make docker-up && make docker-start</code>. Simply replace the demo content with your real content.</p>",
+                        "open": true
+                    },
+                    {
+                        "question": "Do I need a running Tibi server for development?",
+                        "answer": "<p>No! With <code>MOCK=1</code> in <code>.env</code>, API calls are resolved against local JSON files. This lets you develop frontend features without a backend.</p>"
+                    },
+                    {
+                        "question": "How do I add a new page?",
+                        "answer": "<p>Create a new content entry in the collection (or in <code>mocking/content.json</code> for mock mode) with the desired path and blocks. The app renders it automatically via the BlockRenderer.</p>"
+                    },
+                    {
+                        "question": "Can I create custom block types?",
+                        "answer": "<p>Yes! Create a new Svelte component and register the type in BlockRenderer. You can extend the <code>ContentBlockEntry</code> type interface in <code>global.d.ts</code> accordingly.</p>"
+                    }
+                ]
+            }
+        ],
+        "meta": {
+            "title": "Tibi Svelte Starter — Modern CMS Template",
+            "description": "Svelte 5, Tailwind CSS 4, SSR, i18n and Playwright tests — the perfect starter kit.",
+            "keywords": "svelte, tibi, cms, starter, template"
+        }
+    },
+    {
+        "id": "about-de",
+        "_id": "about-de",
        "active": true,
        "type": "page",
        "lang": "de",
        "translationKey": "about",
-        "name": "Über uns",
+        "name": "Über das Template",
        "path": "/ueber-uns",
        "blocks": [
            {
-                "type": "richtext",
-                "headline": "Über uns",
+                "type": "hero",
+                "headline": "Über das Template",
                "headlineH1": true,
-                "text": "<p>Wir sind ein Demo-Unternehmen.</p>"
+                "subline": "Gebaut für Teams, die schnell professionelle Webprojekte umsetzen wollen.",
+                "containerWidth": "full",
+                "heroImage": {
+                    "externalUrl": "https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=1920&q=80"
+                }
+            },
+            {
+                "type": "richtext",
+                "headline": "Warum dieses Template?",
+                "padding": { "top": "lg", "bottom": "md" },
+                "text": "<p>Das Tibi Svelte Starter vereint bewährte Patterns aus dutzenden Projekten in einem sofort einsetzbaren Fundament:</p><ul><li><strong>API-Layer</strong> mit Request-Deduplication, Loading-States und Caching</li><li><strong>Widget-Bibliothek</strong> mit Button, Input, Select, Carousel, Pagination und mehr</li><li><strong>Block-Rendering</strong> für CMS-gesteuerte Seiten mit beliebig erweiterbaren Typen</li><li><strong>Testing-Setup</strong> mit Playwright für E2E, API und visuelle Regressionstests</li></ul>"
+            },
+            {
+                "type": "richtext",
+                "headline": "Technologie-Stack",
+                "padding": { "top": "md", "bottom": "lg" },
+                "externalImageUrl": "https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&q=80",
+                "imagePosition": "left",
+                "text": "<p>Jede Komponente wurde sorgfältig ausgewählt:</p><ul><li><strong>Svelte 5</strong> — Reaktives Framework mit Runes-API</li><li><strong>Tailwind CSS 4</strong> — Utility-first CSS mit @theme</li><li><strong>esbuild</strong> — Extrem schneller Bundler</li><li><strong>Tibi CMS</strong> — Headless CMS mit Go-Backend</li><li><strong>goja SSR</strong> — Server-Side Rendering in Go</li><li><strong>Playwright</strong> — Modernes Testing-Framework</li></ul>"
            }
        ],
        "meta": {
-            "title": "Über uns",
-            "description": "Erfahren Sie mehr über uns"
+            "title": "Über das Template — Tibi Svelte Starter",
+            "description": "Architektur und Tech-Stack des Tibi Svelte Starter Templates.",
+            "keywords": "svelte, über uns, template, architektur"
        }
    },
    {
-        "id": "contact",
-        "_id": "contact",
+        "id": "about-en",
+        "_id": "about-en",
+        "active": true,
+        "type": "page",
+        "lang": "en",
+        "translationKey": "about",
+        "name": "About the Template",
+        "path": "/about",
+        "blocks": [
+            {
+                "type": "hero",
+                "headline": "About the Template",
+                "headlineH1": true,
+                "subline": "Built for teams who want to ship professional web projects fast.",
+                "containerWidth": "full",
+                "heroImage": {
+                    "externalUrl": "https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=1920&q=80"
+                }
+            },
+            {
+                "type": "richtext",
+                "headline": "Why this template?",
+                "padding": { "top": "lg", "bottom": "md" },
+                "text": "<p>The Tibi Svelte Starter combines proven patterns from dozens of projects into an immediately usable foundation:</p><ul><li><strong>API layer</strong> with request deduplication, loading states and caching</li><li><strong>Widget library</strong> with Button, Input, Select, Carousel, Pagination and more</li><li><strong>Block rendering</strong> for CMS-driven pages with extensible types</li><li><strong>Testing setup</strong> with Playwright for E2E, API and visual regression tests</li></ul>"
+            },
+            {
+                "type": "richtext",
+                "headline": "Technology Stack",
+                "padding": { "top": "md", "bottom": "lg" },
+                "externalImageUrl": "https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&q=80",
+                "imagePosition": "left",
+                "text": "<p>Every component was carefully chosen:</p><ul><li><strong>Svelte 5</strong> — Reactive framework with Runes API</li><li><strong>Tailwind CSS 4</strong> — Utility-first CSS with @theme</li><li><strong>esbuild</strong> — Extremely fast bundler</li><li><strong>Tibi CMS</strong> — Headless CMS with Go backend</li><li><strong>goja SSR</strong> — Server-side rendering in Go</li><li><strong>Playwright</strong> — Modern testing framework</li></ul>"
+            }
+        ],
+        "meta": {
+            "title": "About the Template — Tibi Svelte Starter",
+            "description": "Architecture and tech stack of the Tibi Svelte Starter Template.",
+            "keywords": "svelte, about, template, architecture"
+        }
+    },
+    {
+        "id": "contact-de",
+        "_id": "contact-de",
        "active": true,
        "type": "page",
        "lang": "de",
@@ -62,15 +244,57 @@
        "path": "/kontakt",
        "blocks": [
            {
-                "type": "richtext",
+                "type": "hero",
                "headline": "Kontakt",
                "headlineH1": true,
-                "text": "<p>Schreiben Sie uns eine Nachricht.</p>"
+                "subline": "Fragen, Feedback oder Projektanfragen? Schreib uns!",
+                "containerWidth": "full",
+                "heroImage": {
+                    "externalUrl": "https://images.unsplash.com/photo-1423666639041-f56000c27a9a?w=1920&q=80"
+                }
+            },
+            {
+                "type": "contact-form",
+                "headline": "Nachricht senden",
+                "padding": { "top": "lg", "bottom": "lg" }
            }
        ],
        "meta": {
-            "title": "Kontakt",
-            "description": "Kontaktieren Sie uns"
+            "title": "Kontakt — Tibi Svelte Starter",
+            "description": "Nimm Kontakt mit uns auf.",
+            "keywords": "kontakt, anfrage"
+        }
+    },
+    {
+        "id": "contact-en",
+        "_id": "contact-en",
+        "active": true,
+        "type": "page",
+        "lang": "en",
+        "translationKey": "contact",
+        "name": "Contact",
+        "path": "/contact",
+        "blocks": [
+            {
+                "type": "hero",
+                "headline": "Contact",
+                "headlineH1": true,
+                "subline": "Questions, feedback or project inquiries? Get in touch!",
+                "containerWidth": "full",
+                "heroImage": {
+                    "externalUrl": "https://images.unsplash.com/photo-1423666639041-f56000c27a9a?w=1920&q=80"
+                }
+            },
+            {
+                "type": "contact-form",
+                "headline": "Send a message",
+                "padding": { "top": "lg", "bottom": "lg" }
+            }
+        ],
+        "meta": {
+            "title": "Contact — Tibi Svelte Starter",
+            "description": "Get in touch with us.",
+            "keywords": "contact, inquiry"
        }
    }
-]
+]
--- a/frontend/mocking/navigation.json
+++ b/frontend/mocking/navigation.json
@@ -5,18 +5,20 @@
        "language": "de",
        "type": "header",
        "elements": [
-            {
-                "name": "Startseite",
-                "page": "home"
-            },
-            {
-                "name": "Über uns",
-                "page": "about"
-            },
-            {
-                "name": "Kontakt",
-                "page": "contact"
-            }
+            { "name": "Startseite", "page": "/" },
+            { "name": "Über uns", "page": "/ueber-uns" },
+            { "name": "Kontakt", "page": "/kontakt" }
+        ]
+    },
+    {
+        "id": "header-en",
+        "_id": "header-en",
+        "language": "en",
+        "type": "header",
+        "elements": [
+            { "name": "Home", "page": "/" },
+            { "name": "About", "page": "/about" },
+            { "name": "Contact", "page": "/contact" }
        ]
    },
    {
@@ -25,14 +27,22 @@
        "language": "de",
        "type": "footer",
        "elements": [
-            {
-                "name": "Impressum",
-                "page": "imprint"
-            },
-            {
-                "name": "Datenschutz",
-                "page": "privacy"
-            }
+            { "name": "Startseite", "page": "/" },
+            { "name": "Über uns", "page": "/ueber-uns" },
+            { "name": "Kontakt", "page": "/kontakt" },
+            { "name": "GitHub", "external": true, "externalUrl": "https://github.com" }
+        ]
+    },
+    {
+        "id": "footer-en",
+        "_id": "footer-en",
+        "language": "en",
+        "type": "footer",
+        "elements": [
+            { "name": "Home", "page": "/" },
+            { "name": "About", "page": "/about" },
+            { "name": "Contact", "page": "/contact" },
+            { "name": "GitHub", "external": true, "externalUrl": "https://github.com" }
        ]
    }
-]
+]
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -1,11 +1,14 @@
 <script lang="ts">
    import { metricCall } from "./config"
-    import { location } from "./lib/store"
+    import { location, mobileMenuOpen, currentContentEntry } from "./lib/store"
    import { _, locale } from "./lib/i18n/index"
    import LoadingBar from "./widgets/LoadingBar.svelte"
    import ToastContainer from "./widgets/ToastContainer.svelte"
    import DebugFooterInfo from "./widgets/DebugFooterInfo.svelte"
+    import BlockRenderer from "./blocks/BlockRenderer.svelte"
+    import NotFound from "./blocks/NotFound.svelte"
    import { initScrollRestoration } from "./lib/navigation"
+    import { getCachedEntries } from "./lib/api"
    import {
        SUPPORTED_LANGUAGES,
        LANGUAGE_LABELS,
@@ -15,8 +18,9 @@
        getBrowserLanguage,
        extractLanguageFromPath,
        DEFAULT_LANGUAGE,
-        getRoutePath,
+        stripLanguageFromPath,
    } from "./lib/i18n"
+
    export let url = ""

    initScrollRestoration()
@@ -31,7 +35,6 @@
            push: false,
            pop: false,
        }
-        // Set svelte-i18n locale from URL for SSR rendering
        const lang = extractLanguageFromPath(l[0]) || DEFAULT_LANGUAGE
        $locale = lang
    }
@@ -58,63 +61,278 @@
                    "x-ssr-skip": "204",
                    "x-ssr-ref": ref,
                    "x-ssr-res": `${window.innerWidth}x${window.innerHeight}`,
-                    // no cache
                    "cache-control": "no-cache, no-store, must-revalidate",
                },
            })
        }
    })
+
+    // ── Content loading ──────────────────────────────────────────
+    let contentEntry = $state<ContentEntry | null>(null)
+    let headerNav = $state<NavigationEntry | null>(null)
+    let footerNav = $state<NavigationEntry | null>(null)
+    let loading = $state(true)
+    let notFound = $state(false)
+
+    // Header scroll detection
+    let scrolled = $state(false)
+    if (typeof window !== "undefined") {
+        window.addEventListener(
+            "scroll",
+            () => {
+                scrolled = window.scrollY > 20
+            },
+            { passive: true }
+        )
+    }
+
+    // Close mobile menu on navigation
+    $effect(() => {
+        $location.path // subscribe
+        $mobileMenuOpen = false
+    })
+
+    async function loadContent(lang: string, routePath: string) {
+        loading = true
+        notFound = false
+        contentEntry = null
+
+        try {
+            // Load navigation
+            const [headerEntries, footerEntries] = await Promise.all([
+                getCachedEntries<"navigation">("navigation", { type: "header", language: lang }),
+                getCachedEntries<"navigation">("navigation", { type: "footer", language: lang }),
+            ])
+            headerNav = headerEntries[0] || null
+            footerNav = footerEntries[0] || null
+
+            // Load content for current path
+            const contentEntries = await getCachedEntries<"content">("content", {
+                lang,
+                path: routePath,
+                active: true,
+            })
+
+            if (contentEntries.length > 0) {
+                contentEntry = contentEntries[0]
+                $currentContentEntry = {
+                    translationKey: contentEntry.translationKey,
+                    lang: contentEntry.lang,
+                    path: contentEntry.path,
+                }
+            } else {
+                notFound = true
+            }
+        } catch (err) {
+            console.error("[App] Failed to load content:", err)
+            notFound = true
+        }
+
+        loading = false
+    }
+
+    // Re-load content when path or language changes
+    $effect(() => {
+        const lang = $currentLanguage
+        const routePath = stripLanguageFromPath($location.path)
+        loadContent(lang, routePath || "/")
+    })
 </script>

 <LoadingBar />
 <ToastContainer />

-<header class="text-white p-4 bg-red-900">
-    <div class="container mx-auto flex flex-wrap items-center justify-between gap-2">
-        <a href={localizedPath("/")} class="text-xl font-bold shrink-0">Tibi Svelte Starter</a>
-        <nav class="flex items-center gap-4">
-            <ul class="hidden sm:flex space-x-4">
-                <li><a href={localizedPath("/")} class="hover:underline">{$_("nav.home")}</a></li>
-                <li><a href={localizedPath("/about")} class="hover:underline">{$_("nav.about")}</a></li>
-                <li><a href={localizedPath("/contact")} class="hover:underline">{$_("nav.contact")}</a></li>
-            </ul>
-            <div class="flex space-x-2 text-sm sm:border-l sm:border-white/30 sm:pl-4">
-                {#each SUPPORTED_LANGUAGES as lang}
+<!-- ── Sticky Header with glassmorphism ──────────────────────── -->
+<header
+    class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 {scrolled
+        ? 'bg-white/80 backdrop-blur-lg shadow-sm'
+        : 'bg-transparent'}"
+>
+    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
+        <!-- Logo -->
+        <a
+            href={localizedPath("/")}
+            class="text-xl font-display font-bold transition-colors duration-300 {scrolled
+                ? 'text-gray-900'
+                : 'text-white'}"
+        >
+            {#if scrolled}<span class="text-gradient">Tibi</span>{:else}Tibi{/if} Starter
+        </a>
+
+        <!-- Desktop Nav -->
+        <nav class="hidden md:flex items-center gap-8">
+            {#if headerNav?.elements}
+                {#each headerNav.elements as item}
                    <a
-                        href={getLanguageSwitchUrl(lang)}
-                        class="hover:underline px-1"
-                        class:font-bold={$currentLanguage === lang}
-                        class:opacity-60={$currentLanguage !== lang}
+                        href={localizedPath(item.page || "/")}
+                        class="text-sm font-medium transition-colors duration-300 hover:text-brand-500 {scrolled
+                            ? 'text-gray-700'
+                            : 'text-white/90'}"
                    >
-                        {LANGUAGE_LABELS[lang]}
+                        {item.name}
                    </a>
                {/each}
+            {/if}
+
+            <!-- Language Switcher -->
+            <div
+                class="flex items-center gap-1 border-l pl-6 transition-colors duration-300 {scrolled
+                    ? 'border-gray-200'
+                    : 'border-white/20'}"
+            >
+                {#each SUPPORTED_LANGUAGES as lang}
+                    {#if $currentLanguage === lang}
+                        <a
+                            href={getLanguageSwitchUrl(lang)}
+                            class="text-xs font-semibold uppercase px-2 py-1 rounded transition-all duration-300 bg-brand-600 text-white"
+                        >
+                            {lang}
+                        </a>
+                    {:else}
+                        <a
+                            href={getLanguageSwitchUrl(lang)}
+                            class="text-xs font-semibold uppercase px-2 py-1 rounded transition-all duration-300 hover:text-brand-500 {scrolled
+                                ? 'text-gray-500'
+                                : 'text-white/50'}"
+                        >
+                            {lang}
+                        </a>
+                    {/if}
+                {/each}
            </div>
        </nav>
+
+        <!-- Mobile Hamburger -->
+        <button
+            class="md:hidden p-2 rounded-lg transition-colors {scrolled ? 'text-gray-900' : 'text-white'}"
+            onclick={() => ($mobileMenuOpen = !$mobileMenuOpen)}
+            aria-label="Menu"
+            aria-expanded={$mobileMenuOpen}
+        >
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                {#if $mobileMenuOpen}
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"
+                    ></path>
+                {:else}
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"
+                    ></path>
+                {/if}
+            </svg>
+        </button>
    </div>
-    <!-- Mobile nav -->
-    <nav class="sm:hidden mt-2 border-t border-white/20 pt-2">
-        <ul class="flex space-x-4 text-sm">
-            <li><a href={localizedPath("/")} class="hover:underline">{$_("nav.home")}</a></li>
-            <li><a href={localizedPath("/about")} class="hover:underline">{$_("nav.about")}</a></li>
-            <li><a href={localizedPath("/contact")} class="hover:underline">{$_("nav.contact")}</a></li>
-        </ul>
-    </nav>
+
+    <!-- Mobile Menu Overlay -->
+    {#if $mobileMenuOpen}
+        <div class="md:hidden bg-white border-t border-gray-100 shadow-lg">
+            <nav class="max-w-6xl mx-auto px-6 py-4 space-y-3">
+                {#if headerNav?.elements}
+                    {#each headerNav.elements as item}
+                        <a
+                            href={localizedPath(item.page || "/")}
+                            class="block text-gray-700 text-lg font-medium hover:text-brand-600 py-2"
+                        >
+                            {item.name}
+                        </a>
+                    {/each}
+                {/if}
+                <div class="flex gap-2 pt-3 border-t border-gray-100">
+                    {#each SUPPORTED_LANGUAGES as lang}
+                        <a
+                            href={getLanguageSwitchUrl(lang)}
+                            class="text-xs font-semibold uppercase px-3 py-1.5 rounded {$currentLanguage === lang
+                                ? 'bg-brand-600 text-white'
+                                : 'text-gray-500 bg-gray-100'}"
+                        >
+                            {LANGUAGE_LABELS[lang]}
+                        </a>
+                    {/each}
+                </div>
+            </nav>
+        </div>
+    {/if}
 </header>

-<main class="container mx-auto p-4">
-    {#if getRoutePath($location.path) === "/about"}
-        <h1 class="text-2xl font-bold mb-4">{$_("page.about.title")}</h1>
-        <p>{$_("page.about.text")}</p>
-    {:else if getRoutePath($location.path) === "/contact"}
-        <h1 class="text-2xl font-bold mb-4">{$_("page.contact.title")}</h1>
-        <p>{$_("page.contact.text")}</p>
-    {:else}
-        <h1 class="text-2xl font-bold mb-4">{$_("page.home.title")}</h1>
-        <p>{$_("page.home.text")}</p>
+<!-- ── Main Content ──────────────────────────────────────────── -->
+<main>
+    {#if loading}
+        <div class="min-h-screen flex items-center justify-center">
+            <div class="w-8 h-8 border-4 border-brand-200 border-t-brand-600 rounded-full animate-spin"></div>
+        </div>
+    {:else if notFound}
+        <div class="pt-16">
+            <NotFound />
+        </div>
+    {:else if contentEntry?.blocks}
+        <div class="page-enter">
+            <BlockRenderer blocks={contentEntry.blocks} />
+        </div>
    {/if}
 </main>

-<footer class="text-center p-2">
-    <DebugFooterInfo />
+<!-- ── Footer ────────────────────────────────────────────────── -->
+<footer class="bg-gray-900 text-gray-400">
+    <div class="max-w-6xl mx-auto px-6 py-12">
+        <div class="grid md:grid-cols-3 gap-8 mb-8">
+            <!-- Brand -->
+            <div>
+                <h3 class="text-white font-display font-bold text-lg mb-3">Tibi Starter</h3>
+                <p class="text-sm leading-relaxed">
+                    {$_("footer.madeWith")}
+                </p>
+            </div>
+
+            <!-- Footer Nav -->
+            {#if footerNav?.elements}
+                <div>
+                    <h4 class="text-white font-semibold text-sm uppercase tracking-wider mb-3">Navigation</h4>
+                    <ul class="space-y-2">
+                        {#each footerNav.elements as item}
+                            <li>
+                                {#if item.external}
+                                    <a
+                                        href={item.externalUrl || "#"}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        class="text-sm hover:text-white transition-colors"
+                                    >
+                                        {item.name} &nearr;
+                                    </a>
+                                {:else}
+                                    <a
+                                        href={localizedPath(item.page || "/")}
+                                        class="text-sm hover:text-white transition-colors"
+                                    >
+                                        {item.name}
+                                    </a>
+                                {/if}
+                            </li>
+                        {/each}
+                    </ul>
+                </div>
+            {/if}
+
+            <!-- Language -->
+            <div>
+                <h4 class="text-white font-semibold text-sm uppercase tracking-wider mb-3">{$_("language")}</h4>
+                <div class="flex gap-2">
+                    {#each SUPPORTED_LANGUAGES as lang}
+                        <a
+                            href={getLanguageSwitchUrl(lang)}
+                            class="text-sm px-3 py-1.5 rounded transition-all {$currentLanguage === lang
+                                ? 'bg-brand-600 text-white'
+                                : 'hover:text-white'}"
+                        >
+                            {LANGUAGE_LABELS[lang]}
+                        </a>
+                    {/each}
+                </div>
+            </div>
+        </div>
+
+        <!-- Bottom bar -->
+        <div class="border-t border-gray-800 pt-6 flex flex-col sm:flex-row justify-between items-center gap-4 text-sm">
+            <p>&copy; {new Date().getFullYear()} Tibi Svelte Starter. {$_("footer.rights")}</p>
+            <DebugFooterInfo />
+        </div>
+    </div>
 </footer>
--- a/frontend/src/blocks/AccordionBlock.svelte
+++ b/frontend/src/blocks/AccordionBlock.svelte
@@ -0,0 +1,91 @@
+<script lang="ts">
+    import { reveal } from "../lib/actions/reveal"
+    import { untrack } from "svelte"
+
+    let { block }: { block: ContentBlockEntry } = $props()
+
+    const paddingTop = $derived(
+        block.padding?.top === "lg"
+            ? "pt-20"
+            : block.padding?.top === "md"
+              ? "pt-12"
+              : block.padding?.top === "sm"
+                ? "pt-8"
+                : "pt-4"
+    )
+    const paddingBottom = $derived(
+        block.padding?.bottom === "lg"
+            ? "pb-20"
+            : block.padding?.bottom === "md"
+              ? "pb-12"
+              : block.padding?.bottom === "sm"
+                ? "pb-8"
+                : "pb-4"
+    )
+
+    // Track open/closed state per item — intentionally capture initial prop value only
+    let openItems = $state<boolean[]>(untrack(() => (block.accordionItems || []).map((item) => !!item.open)))
+
+    function toggle(index: number) {
+        openItems = openItems.map((open, i) => (i === index ? !open : open))
+    }
+</script>
+
+<section
+    data-block="accordion"
+    class="accordion-section {paddingTop} {paddingBottom} bg-gray-50"
+    id={block.anchorId || undefined}
+>
+    <div class="max-w-3xl mx-auto px-6">
+        {#if block.tagline}
+            <div use:reveal>
+                <span class="inline-block text-brand-500 text-sm font-semibold tracking-widest uppercase mb-3">
+                    {block.tagline}
+                </span>
+            </div>
+        {/if}
+
+        {#if block.headline}
+            <div use:reveal={{ delay: 100 }}>
+                <h2 class="text-3xl sm:text-4xl font-display font-bold text-gray-900 mb-10">
+                    {block.headline}
+                </h2>
+            </div>
+        {/if}
+
+        <div class="space-y-3">
+            {#each block.accordionItems || [] as item, i}
+                <div
+                    class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden"
+                    use:reveal={{ delay: 150 + i * 80 }}
+                >
+                    <button
+                        class="w-full text-left px-6 py-5 flex items-center justify-between gap-4 hover:bg-gray-50 transition-colors cursor-pointer"
+                        onclick={() => toggle(i)}
+                        aria-expanded={openItems[i]}
+                    >
+                        <span class="font-semibold text-gray-900 text-lg">
+                            {item.question}
+                        </span>
+                        <svg
+                            class="w-5 h-5 text-brand-500 shrink-0 transition-transform duration-300"
+                            class:rotate-180={openItems[i]}
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                        >
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"
+                            ></path>
+                        </svg>
+                    </button>
+
+                    {#if openItems[i]}
+                        <div class="px-6 pb-5 prose max-w-none text-gray-600 border-t border-gray-50">
+                            {@html item.answer || ""}
+                        </div>
+                    {/if}
+                </div>
+            {/each}
+        </div>
+    </div>
+</section>
--- a/frontend/src/blocks/BlockRenderer.svelte
+++ b/frontend/src/blocks/BlockRenderer.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+    /**
+     * BlockRenderer — renders ContentBlockEntry[] by type.
+     *
+     * Each block type maps to a dedicated Svelte component.
+     * Unknown types are silently skipped (or shown in dev mode).
+     * Easy to extend: add a new component import + case.
+     *
+     * DEMO: This file is part of the demo showcase.
+     * For real projects, adjust block types and components as needed.
+     */
+    import HeroBlock from "./HeroBlock.svelte"
+    import FeaturesBlock from "./FeaturesBlock.svelte"
+    import RichtextBlock from "./RichtextBlock.svelte"
+    import AccordionBlock from "./AccordionBlock.svelte"
+    import ContactFormBlock from "./ContactFormBlock.svelte"
+
+    let { blocks = [] }: { blocks: ContentBlockEntry[] } = $props()
+</script>
+
+{#each blocks as block, i (i)}
+    {#if !block.hide}
+        {#if block.type === "hero"}
+            <HeroBlock {block} />
+        {:else if block.type === "features"}
+            <FeaturesBlock {block} />
+        {:else if block.type === "richtext"}
+            <RichtextBlock {block} />
+        {:else if block.type === "accordion"}
+            <AccordionBlock {block} />
+        {:else if block.type === "contact-form"}
+            <ContactFormBlock {block} />
+        {:else}
+            <!-- Unknown block type: {block.type} -->
+            {#if typeof window !== "undefined" && window.location?.hostname === "localhost"}
+                <div
+                    class="max-w-6xl mx-auto px-6 py-4 bg-yellow-50 border border-yellow-200 rounded-lg my-4 text-sm text-yellow-800"
+                >
+                    Unknown block type: <code>{block.type}</code>
+                </div>
+            {/if}
+        {/if}
+    {/if}
+{/each}
--- a/frontend/src/blocks/ContactFormBlock.svelte
+++ b/frontend/src/blocks/ContactFormBlock.svelte
@@ -0,0 +1,147 @@
+<script lang="ts">
+    import { _ } from "../lib/i18n/index"
+    import { reveal } from "../lib/actions/reveal"
+    import { addToast } from "../lib/toast"
+    import Form from "../widgets/Form.svelte"
+    import Input from "../widgets/Input.svelte"
+    import Select from "../widgets/Select.svelte"
+    import Button from "../widgets/Button.svelte"
+
+    let { block }: { block: ContentBlockEntry } = $props()
+
+    const paddingTop = $derived(
+        block.padding?.top === "lg"
+            ? "pt-20"
+            : block.padding?.top === "md"
+              ? "pt-12"
+              : block.padding?.top === "sm"
+                ? "pt-8"
+                : "pt-4"
+    )
+    const paddingBottom = $derived(
+        block.padding?.bottom === "lg"
+            ? "pb-20"
+            : block.padding?.bottom === "md"
+              ? "pb-12"
+              : block.padding?.bottom === "sm"
+                ? "pb-8"
+                : "pb-4"
+    )
+
+    let name = $state("")
+    let email = $state("")
+    let subject = $state("")
+    let message = $state("")
+    let sending = $state(false)
+    let formRef = $state<{ validate: () => Promise<boolean> } | null>(null)
+
+    const subjectOptions = $derived([
+        { value: "", label: $_("form.selectSubject") },
+        { value: "general", label: $_("form.subjects.general") },
+        { value: "project", label: $_("form.subjects.project") },
+        { value: "support", label: $_("form.subjects.support") },
+        { value: "feedback", label: $_("form.subjects.feedback") },
+    ])
+
+    async function handleSubmit(e: SubmitEvent) {
+        e.preventDefault()
+        if (!formRef) return
+
+        const isValid = await formRef.validate()
+        if (!isValid) return
+
+        sending = true
+
+        // Simulate API call
+        await new Promise((resolve) => setTimeout(resolve, 1200))
+
+        addToast($_("form.success"), "success", 5000)
+
+        // Reset form
+        name = ""
+        email = ""
+        subject = ""
+        message = ""
+        sending = false
+    }
+</script>
+
+<section
+    data-block="contact-form"
+    class="contact-form-section {paddingTop} {paddingBottom}"
+    id={block.anchorId || undefined}
+>
+    <div class="max-w-2xl mx-auto px-6">
+        {#if block.headline}
+            <div use:reveal>
+                <h2 class="text-3xl font-display font-bold text-gray-900 mb-8">
+                    {block.headline}
+                </h2>
+            </div>
+        {/if}
+
+        <div use:reveal={{ delay: 150 }}>
+            <Form bind:this={formRef} onsubmit={handleSubmit} class="space-y-6">
+                <div class="grid sm:grid-cols-2 gap-6">
+                    <Input
+                        label={$_("form.name")}
+                        hideLabel={false}
+                        bind:value={name}
+                        placeholder={$_("form.name")}
+                        required
+                        name="name"
+                        messages={{ valueMissing: $_("form.validation.required") }}
+                    />
+                    <Input
+                        label={$_("form.email")}
+                        hideLabel={false}
+                        bind:value={email}
+                        placeholder={$_("form.email")}
+                        type="email"
+                        required
+                        name="email"
+                        messages={{
+                            valueMissing: $_("form.validation.required"),
+                            typeMismatch: $_("form.validation.email"),
+                        }}
+                    />
+                </div>
+
+                <Select
+                    label={$_("form.subject")}
+                    hideLabel={false}
+                    bind:value={subject}
+                    options={subjectOptions}
+                    required
+                    name="subject"
+                />
+
+                <div>
+                    <label for="contact-message" class="block text-sm font-medium text-gray-700 mb-1">
+                        {$_("form.message")}
+                    </label>
+                    <textarea
+                        id="contact-message"
+                        bind:value={message}
+                        rows="5"
+                        required
+                        name="message"
+                        placeholder={$_("form.message")}
+                        class="w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 shadow-sm focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 focus:outline-none transition-colors resize-y"
+                    ></textarea>
+                </div>
+
+                <div class="flex justify-end">
+                    <Button
+                        type="submit"
+                        variant="primary"
+                        size="lg"
+                        text={sending ? $_("loading") : $_("form.send")}
+                        disabled={sending}
+                        class="bg-brand-600! hover:bg-brand-700! rounded-xl!"
+                    />
+                </div>
+            </Form>
+        </div>
+    </div>
+</section>
--- a/frontend/src/blocks/FeaturesBlock.svelte
+++ b/frontend/src/blocks/FeaturesBlock.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+    import { reveal } from "../lib/actions/reveal"
+
+    let { block }: { block: ContentBlockEntry } = $props()
+
+    const paddingTop = $derived(
+        block.padding?.top === "lg"
+            ? "pt-20"
+            : block.padding?.top === "md"
+              ? "pt-12"
+              : block.padding?.top === "sm"
+                ? "pt-8"
+                : "pt-4"
+    )
+    const paddingBottom = $derived(
+        block.padding?.bottom === "lg"
+            ? "pb-20"
+            : block.padding?.bottom === "md"
+              ? "pb-12"
+              : block.padding?.bottom === "sm"
+                ? "pb-8"
+                : "pb-4"
+    )
+</script>
+
+<section data-block="features" class="features-section {paddingTop} {paddingBottom}" id={block.anchorId || undefined}>
+    <div class="max-w-6xl mx-auto px-6">
+        {#if block.tagline}
+            <div use:reveal>
+                <span class="inline-block text-brand-500 text-sm font-semibold tracking-widest uppercase mb-3">
+                    {block.tagline}
+                </span>
+            </div>
+        {/if}
+
+        {#if block.headline}
+            <div use:reveal={{ delay: 100 }}>
+                <h2 class="text-3xl sm:text-4xl font-display font-bold text-gray-900 mb-12">
+                    {block.headline}
+                </h2>
+            </div>
+        {/if}
+
+        {#if block.text}
+            <div class="prose max-w-none" use:reveal={{ delay: 200 }}>
+                {@html block.text}
+            </div>
+        {/if}
+    </div>
+</section>
--- a/frontend/src/blocks/HeroBlock.svelte
+++ b/frontend/src/blocks/HeroBlock.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+    import { reveal } from "../lib/actions/reveal"
+
+    let { block }: { block: ContentBlockEntry } = $props()
+
+    const hasImage = $derived(block.heroImage?.externalUrl || block.heroImage?.image)
+</script>
+
+<section
+    data-block="hero"
+    class="hero-section relative flex items-center justify-center overflow-hidden"
+    class:min-h-[70vh]={block.containerWidth === "full"}
+    class:min-h-[50vh]={block.containerWidth !== "full"}
+>
+    <!-- Background image -->
+    {#if hasImage}
+        <div class="absolute inset-0 z-0">
+            {#if block.heroImage?.externalUrl}
+                <img src={block.heroImage.externalUrl} alt="" class="w-full h-full object-cover" loading="lazy" />
+            {/if}
+            <div class="absolute inset-0 bg-linear-to-b from-brand-950/80 via-brand-900/70 to-brand-950/90"></div>
+        </div>
+    {:else}
+        <div class="absolute inset-0 bg-linear-to-br from-brand-900 via-brand-800 to-brand-950"></div>
+    {/if}
+
+    <!-- Content -->
+    <div class="relative z-10 max-w-4xl mx-auto px-6 py-20 text-center" use:reveal>
+        {#if block.tagline}
+            <span class="inline-block text-brand-300 text-sm font-semibold tracking-widest uppercase mb-4">
+                {block.tagline}
+            </span>
+        {/if}
+
+        {#if block.headlineH1}
+            <h1 class="text-4xl sm:text-5xl lg:text-6xl font-display font-extrabold text-white leading-tight mb-6">
+                {block.headline}
+            </h1>
+        {:else}
+            <h2 class="text-3xl sm:text-4xl lg:text-5xl font-display font-bold text-white leading-tight mb-6">
+                {block.headline}
+            </h2>
+        {/if}
+
+        {#if block.subline}
+            <p class="text-lg sm:text-xl text-brand-200 max-w-2xl mx-auto mb-8 leading-relaxed">
+                {block.subline}
+            </p>
+        {/if}
+
+        {#if block.callToAction?.buttonText}
+            <div class="flex justify-center gap-4">
+                <a
+                    href={block.callToAction.buttonLink || "#"}
+                    target={block.callToAction.buttonTarget || undefined}
+                    class="inline-flex items-center gap-2 bg-brand-500 hover:bg-brand-400 text-white font-bold px-8 py-4 rounded-xl text-lg transition-all duration-300 hover:shadow-lg hover:shadow-brand-500/25 hover:-translate-y-0.5"
+                >
+                    {block.callToAction.buttonText}
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                    </svg>
+                </a>
+            </div>
+        {/if}
+    </div>
+
+    <!-- Decorative bottom wave -->
+    <div class="absolute bottom-0 left-0 right-0 z-10">
+        <svg viewBox="0 0 1440 80" fill="none" class="w-full h-auto">
+            <path d="M0 80V40C240 10 480 0 720 20C960 40 1200 50 1440 30V80H0Z" fill="white"></path>
+        </svg>
+    </div>
+</section>
--- a/frontend/src/blocks/NotFound.svelte
+++ b/frontend/src/blocks/NotFound.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { _ } from "../lib/i18n/index"
+    import { localizedPath } from "../lib/i18n"
+    import { reveal } from "../lib/actions/reveal"
+</script>
+
+<section class="min-h-[60vh] flex items-center justify-center bg-gray-50">
+    <div class="text-center px-6 py-20" use:reveal>
+        <div class="text-8xl mb-6 opacity-20 font-display font-black text-brand-900">404</div>
+        <h1 class="text-3xl sm:text-4xl font-display font-bold text-gray-900 mb-4">
+            {$_("page.notFound.title")}
+        </h1>
+        <p class="text-lg text-gray-500 mb-8 max-w-md mx-auto">
+            {$_("page.notFound.text")}
+        </p>
+        <a
+            href={localizedPath("/")}
+            class="inline-flex items-center gap-2 bg-brand-600 hover:bg-brand-700 text-white font-bold px-8 py-4 rounded-xl text-lg transition-all duration-300 hover:shadow-lg hover:shadow-brand-500/25 hover:-translate-y-0.5"
+        >
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"
+                ></path>
+            </svg>
+            {$_("page.notFound.backHome")}
+        </a>
+    </div>
+</section>
--- a/frontend/src/blocks/RichtextBlock.svelte
+++ b/frontend/src/blocks/RichtextBlock.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+    import { reveal } from "../lib/actions/reveal"
+
+    let { block }: { block: ContentBlockEntry } = $props()
+
+    const paddingTop = $derived(
+        block.padding?.top === "lg"
+            ? "pt-20"
+            : block.padding?.top === "md"
+              ? "pt-12"
+              : block.padding?.top === "sm"
+                ? "pt-8"
+                : "pt-4"
+    )
+    const paddingBottom = $derived(
+        block.padding?.bottom === "lg"
+            ? "pb-20"
+            : block.padding?.bottom === "md"
+              ? "pb-12"
+              : block.padding?.bottom === "sm"
+                ? "pb-8"
+                : "pb-4"
+    )
+
+    const hasImage = $derived(block.externalImageUrl || block.image)
+    const imageOnRight = $derived(block.imagePosition === "right")
+    const imageOnLeft = $derived(block.imagePosition === "left")
+    const showImage = $derived(hasImage && (imageOnRight || imageOnLeft))
+</script>
+
+<section data-block="richtext" class="richtext-section {paddingTop} {paddingBottom}" id={block.anchorId || undefined}>
+    <div class="max-w-6xl mx-auto px-6">
+        {#if block.tagline}
+            <div use:reveal>
+                <span class="inline-block text-brand-500 text-sm font-semibold tracking-widest uppercase mb-3">
+                    {block.tagline}
+                </span>
+            </div>
+        {/if}
+
+        {#if block.headline}
+            <div use:reveal={{ delay: 100 }}>
+                <h2 class="text-3xl sm:text-4xl font-display font-bold text-gray-900 mb-8">
+                    {block.headline}
+                </h2>
+            </div>
+        {/if}
+
+        {#if showImage}
+            <!-- Layout with image -->
+            <div class="grid md:grid-cols-2 gap-12 items-center" use:reveal={{ delay: 200 }}>
+                <div class:order-2={imageOnLeft} class="prose max-w-none">
+                    {@html block.text || ""}
+                </div>
+                <div class:order-1={imageOnLeft} class="relative">
+                    <div class="rounded-2xl overflow-hidden shadow-xl shadow-brand-900/10">
+                        <img
+                            src={block.externalImageUrl || ""}
+                            alt={block.headline || ""}
+                            class="w-full h-auto object-cover aspect-4/3"
+                            loading="lazy"
+                        />
+                    </div>
+                    <!-- Decorative gradient behind image -->
+                    <div
+                        class="absolute -inset-4 -z-10 rounded-3xl bg-linear-to-br from-brand-100 to-brand-50 blur-sm"
+                    ></div>
+                </div>
+            </div>
+        {:else}
+            <!-- Text-only layout -->
+            <div class="prose max-w-3xl" use:reveal={{ delay: 200 }}>
+                {@html block.text || ""}
+            </div>
+        {/if}
+    </div>
+</section>
--- a/frontend/src/css/style.css
+++ b/frontend/src/css/style.css
@@ -1,4 +1,4 @@
-@import 'tailwindcss';
+@import "tailwindcss";

 /*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
@@ -9,11 +9,161 @@
  color utility to any element that depends on these defaults.
 */
@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentcolor);
-  }
+    *,
+    ::after,
+    ::before,
+    ::backdrop,
+    ::file-selector-button {
+        border-color: var(--color-gray-200, currentcolor);
+    }
+}
+
+/* ── Custom theme tokens ─────────────────────────────────────────── */
+@theme {
+    --color-brand-50: #f0f5ff;
+    --color-brand-100: #e0eaff;
+    --color-brand-200: #c7d7fe;
+    --color-brand-300: #a4bcfd;
+    --color-brand-400: #8098f9;
+    --color-brand-500: #6172f3;
+    --color-brand-600: #444ce7;
+    --color-brand-700: #3538cd;
+    --color-brand-800: #2d31a6;
+    --color-brand-900: #2d3282;
+    --color-brand-950: #1f235b;
+
+    --color-accent-400: #f79009;
+    --color-accent-500: #f59e0b;
+
+    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
+    --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
+}
+
+/* ── Scroll-triggered reveal animation ───────────────────────────── */
+@keyframes reveal-up {
+    from {
+        opacity: 0;
+        transform: translateY(2rem);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.reveal {
+    opacity: 0;
+}
+
+.reveal.revealed {
+    animation: reveal-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+/* ── Prose styling for CMS richtext blocks ───────────────────────── */
+.prose h2 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.75rem;
+}
+.prose h3 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+}
+.prose p {
+    margin-bottom: 1rem;
+    line-height: 1.7;
+}
+.prose ul {
+    list-style: disc;
+    padding-left: 1.5rem;
+    margin-bottom: 1rem;
+}
+.prose ol {
+    list-style: decimal;
+    padding-left: 1.5rem;
+    margin-bottom: 1rem;
+}
+.prose a {
+    color: var(--color-brand-600);
+    text-decoration: underline;
+}
+
+/* ── Smooth page transitions ─────────────────────────────────────── */
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+.page-enter {
+    animation: fade-in 0.35s ease-out;
+}
+
+/* ── Gradient text helper ────────────────────────────────────────── */
+.text-gradient {
+    background: linear-gradient(135deg, var(--color-brand-600), var(--color-brand-400));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+/* ── Feature cards (rendered via CMS richtext HTML) ──────────────── */
+.feature-card {
+    background: white;
+    border: 1px solid var(--color-gray-100, #f3f4f6);
+    border-radius: 1rem;
+    padding: 2rem;
+    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+}
+
+.feature-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
+    border-color: var(--color-brand-200);
+}
+
+.feature-card .feature-icon {
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+}
+
+.feature-card h3 {
+    font-size: 1.125rem;
+    font-weight: 700;
+    color: var(--color-gray-900, #111827);
+    margin-bottom: 0.5rem;
+}
+
+.feature-card p {
+    font-size: 0.938rem;
+    color: var(--color-gray-500, #6b7280);
+    line-height: 1.65;
+}
+
+/* ── Prose code inline styling ───────────────────────────────────── */
+.prose code {
+    background: var(--color-brand-50, #f0f5ff);
+    color: var(--color-brand-700, #3538cd);
+    padding: 0.15em 0.4em;
+    border-radius: 0.375rem;
+    font-size: 0.875em;
+    font-weight: 500;
+}
+
+.prose strong {
+    color: var(--color-gray-900, #111827);
+}
+
+.prose li {
+    margin-bottom: 0.35rem;
+}
+
+/* ── Smooth scroll for anchor links ──────────────────────────────── */
+html {
+    scroll-behavior: smooth;
 }
--- a/frontend/src/lib/actions/reveal.ts
+++ b/frontend/src/lib/actions/reveal.ts
@@ -0,0 +1,58 @@
+/**
+ * Scroll-reveal action — fades elements in when they enter the viewport.
+ *
+ * Usage: <div use:reveal>...</div>
+ *        <div use:reveal={{ delay: 200, threshold: 0.2 }}>...</div>
+ *
+ * The element gets the `.reveal` CSS class on mount and `.revealed` when
+ * it enters the viewport. Animation is defined in style.css.
+ *
+ * SSR-safe: no-ops when IntersectionObserver is unavailable.
+ */
+
+export interface RevealOptions {
+    /** Delay in ms before the animation starts (default: 0) */
+    delay?: number
+    /** IntersectionObserver threshold 0–1 (default: 0.15) */
+    threshold?: number
+    /** Only animate once, then disconnect (default: true) */
+    once?: boolean
+}
+
+export function reveal(node: HTMLElement, options: RevealOptions = {}) {
+    if (typeof IntersectionObserver === "undefined") return
+
+    const { delay = 0, threshold = 0.15, once = true } = options
+
+    node.classList.add("reveal")
+
+    const observer = new IntersectionObserver(
+        (entries) => {
+            for (const entry of entries) {
+                if (entry.isIntersecting) {
+                    if (delay > 0) {
+                        setTimeout(() => node.classList.add("revealed"), delay)
+                    } else {
+                        node.classList.add("revealed")
+                    }
+                    if (once) observer.unobserve(node)
+                } else if (!once) {
+                    node.classList.remove("revealed")
+                }
+            }
+        },
+        { threshold }
+    )
+
+    observer.observe(node)
+
+    return {
+        update(newOptions: RevealOptions) {
+            // Options are static for simplicity — recreate if needed
+        },
+        destroy() {
+            observer.unobserve(node)
+            observer.disconnect()
+        },
+    }
+}
--- a/frontend/src/lib/i18n.ts
+++ b/frontend/src/lib/i18n.ts
@@ -21,8 +21,8 @@ export const LANGUAGE_LABELS: Record<SupportedLanguage, string> = {
 * Example: { about: { de: "ueber-uns", en: "about" } }
 */
 export const ROUTE_TRANSLATIONS: Record<string, Record<SupportedLanguage, string>> = {
-    // Add your route translations here:
-    // about: { de: "ueber-uns", en: "about" },
+    about: { de: "ueber-uns", en: "about" },
+    contact: { de: "kontakt", en: "contact" },
 }

 export const getLocalizedRoute = (canonicalRoute: string, lang: SupportedLanguage): string => {
--- a/frontend/src/lib/i18n/locales/de.json
+++ b/frontend/src/lib/i18n/locales/de.json
@@ -16,8 +16,40 @@
        "contact": {
            "title": "Kontakt",
            "text": "Hier kannst du ein Kontaktformular oder Kontaktdaten anzeigen."
+        },
+        "notFound": {
+            "title": "Seite nicht gefunden",
+            "text": "Die Seite, die du suchst, existiert leider nicht.",
+            "backHome": "Zur Startseite"
        }
    },
+    "form": {
+        "name": "Name",
+        "email": "E-Mail",
+        "subject": "Betreff",
+        "message": "Nachricht",
+        "send": "Nachricht senden",
+        "success": "Vielen Dank! Deine Nachricht wurde gesendet.",
+        "error": "Leider ist ein Fehler aufgetreten. Bitte versuche es erneut.",
+        "selectSubject": "Bitte wählen…",
+        "subjects": {
+            "general": "Allgemeine Anfrage",
+            "project": "Projektanfrage",
+            "support": "Technischer Support",
+            "feedback": "Feedback"
+        },
+        "validation": {
+            "required": "Dieses Feld ist erforderlich.",
+            "email": "Bitte gib eine gültige E-Mail-Adresse ein."
+        }
+    },
+    "footer": {
+        "builtWith": "Gebaut mit",
+        "rights": "Alle Rechte vorbehalten.",
+        "madeWith": "Gemacht mit ♥ und Svelte"
+    },
    "welcome": "Willkommen",
-    "language": "Sprache"
+    "language": "Sprache",
+    "scrollToTop": "Nach oben",
+    "loading": "Laden…"
 }
--- a/frontend/src/lib/i18n/locales/en.json
+++ b/frontend/src/lib/i18n/locales/en.json
@@ -16,8 +16,40 @@
        "contact": {
            "title": "Contact",
            "text": "Use this page to display a contact form or contact details."
+        },
+        "notFound": {
+            "title": "Page not found",
+            "text": "The page you're looking for doesn't exist.",
+            "backHome": "Back to Home"
        }
    },
+    "form": {
+        "name": "Name",
+        "email": "Email",
+        "subject": "Subject",
+        "message": "Message",
+        "send": "Send message",
+        "success": "Thank you! Your message has been sent.",
+        "error": "Sorry, something went wrong. Please try again.",
+        "selectSubject": "Please select…",
+        "subjects": {
+            "general": "General inquiry",
+            "project": "Project inquiry",
+            "support": "Technical support",
+            "feedback": "Feedback"
+        },
+        "validation": {
+            "required": "This field is required.",
+            "email": "Please enter a valid email address."
+        }
+    },
+    "footer": {
+        "builtWith": "Built with",
+        "rights": "All rights reserved.",
+        "madeWith": "Made with ♥ and Svelte"
+    },
    "welcome": "Welcome",
-    "language": "Language"
+    "language": "Language",
+    "scrollToTop": "Scroll to top",
+    "loading": "Loading…"
 }