✨ feat: enhance accessibility with skip to main content button and improve navigation handling

🔧 fix: update navigation href resolution to include localized paths 🆕 feat: add new FeatureIcon component for feature boxes 🎨 style: improve styling for prose elements in richtext blocks 🛠️ refactor: streamline medialib image loading and caching logic 📦 chore: update mock data handling to support new medialib entries 🔄 chore: synchronize i18n initialization and locale management 📝 docs: update video tour descriptions to reflect recent changes
2026-05-12 13:55:32 +00:00
parent 8fb26fdeba
commit e84b87ed16
41 changed files with 1523 additions and 338 deletions
@@ -1,7 +1,8 @@
 [
    {
-        "id": "home-de",
-        "_id": "home-de",
+        "_id": {
+            "$oid": "6821c0a10000000000000001"
+        },
        "active": true,
        "type": "page",
        "lang": "de",
@@ -21,19 +22,50 @@
                    "buttonTarget": ""
                },
                "heroImage": {
-                    "externalUrl": "https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920&q=80"
+                    "image": "6821c0a10000000000000201"
                }
            },
            {
                "type": "features",
                "headline": "Was dieses Template kann",
-                "tagline": "Features",
+                "tagline": "Highlights",
                "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'><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"/></svg></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'><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.93 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.04-.23-.29-.38-.63-.38-1.01 0-.83.67-1.5 1.5-1.5H16c3.31 0 6-2.69 6-6 0-5.17-4.49-9-10-9z\"/><circle cx=\"7.5\" cy=\"11.5\" r=\"1.5\"/><circle cx=\"10.5\" cy=\"7.5\" r=\"1.5\"/><circle cx=\"14.5\" cy=\"7.5\" r=\"1.5\"/><circle cx=\"17.5\" cy=\"11.5\" r=\"1.5\"/></svg></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'><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22v-5\"/><path d=\"M9 8V2\"/><path d=\"M15 8V2\"/><path d=\"M18 8v5a6 6 0 0 1-12 0V8h12z\"/></svg></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'><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M2 12h20\"/><path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"/></svg></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'><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"/><path d=\"M8 21h8\"/><path d=\"M12 17v4\"/></svg></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'><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 2h6\"/><path d=\"M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.578A1 1 0 0 0 5.598 22h12.804a1 1 0 0 0 .878-1.422l-5.069-10.155A2 2 0 0 1 14 9.527V2\"/></svg></div><h3>Playwright Tests</h3><p>E2E, API, Visual Regression und Video-Tours — alles vorkonfiguriert und ready to go.</p></div></div>"
+                "featureBoxes": [
+                    {
+                        "icon": "lightning",
+                        "title": "Svelte 5 Runes",
+                        "text": "Reaktives UI mit $state, $derived und $effect — kein Boilerplate, maximale Performance."
+                    },
+                    {
+                        "icon": "palette",
+                        "title": "Tailwind CSS 4",
+                        "text": "Utility-first Styling mit Custom-Theme, Dark-Mode-ready und blitzschnellen Builds."
+                    },
+                    {
+                        "icon": "database",
+                        "title": "Tibi CMS API",
+                        "text": "Collections, Hooks, Medialib — alles über eine REST-API. Mit Mock-Modus für offline-Entwicklung."
+                    },
+                    {
+                        "icon": "globe",
+                        "title": "Mehrsprachig",
+                        "text": "Mehrsprachigkeit aus der Box: URL-basierte Sprachauswahl, Lazy-Loaded Locales, SSR-kompatibel."
+                    },
+                    {
+                        "icon": "monitor",
+                        "title": "SSR via goja",
+                        "text": "Server-Side Rendering in Go — schnelle Erstauslieferung, SEO-freundlich, mit Cache-Invalidierung."
+                    },
+                    {
+                        "icon": "flask",
+                        "title": "Playwright Tests",
+                        "text": "E2E, API, Visual Regression und Video-Tours — alles vorkonfiguriert und ready to go."
+                    }
+                ]
            },
            {
                "type": "richtext",
@@ -44,9 +76,9 @@
                    "top": "lg",
                    "bottom": "sm"
                },
-                "externalImageUrl": "https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=800&q=80",
+                "image": "6821c0a10000000000000202",
                "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>"
+                "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, Kontaktformular) ist eine eigene Svelte-Komponente — <strong>erweiterbar und austauschbar</strong>.</p>"
            },
            {
                "type": "accordion",
@@ -81,12 +113,19 @@
        "meta": {
            "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"
+            "keywords": [
+                "svelte",
+                "tibi",
+                "cms",
+                "starter",
+                "template"
+            ]
        }
    },
    {
-        "id": "home-en",
-        "_id": "home-en",
+        "_id": {
+            "$oid": "6821c0a10000000000000002"
+        },
        "active": true,
        "type": "page",
        "lang": "en",
@@ -106,7 +145,7 @@
                    "buttonTarget": ""
                },
                "heroImage": {
-                    "externalUrl": "https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920&q=80"
+                    "image": "6821c0a10000000000000201"
                }
            },
            {
@@ -118,7 +157,38 @@
                    "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'><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"/></svg></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'><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.93 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.04-.23-.29-.38-.63-.38-1.01 0-.83.67-1.5 1.5-1.5H16c3.31 0 6-2.69 6-6 0-5.17-4.49-9-10-9z\"/><circle cx=\"7.5\" cy=\"11.5\" r=\"1.5\"/><circle cx=\"10.5\" cy=\"7.5\" r=\"1.5\"/><circle cx=\"14.5\" cy=\"7.5\" r=\"1.5\"/><circle cx=\"17.5\" cy=\"11.5\" r=\"1.5\"/></svg></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'><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22v-5\"/><path d=\"M9 8V2\"/><path d=\"M15 8V2\"/><path d=\"M18 8v5a6 6 0 0 1-12 0V8h12z\"/></svg></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'><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M2 12h20\"/><path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"/></svg></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'><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"/><path d=\"M8 21h8\"/><path d=\"M12 17v4\"/></svg></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'><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 2h6\"/><path d=\"M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.578A1 1 0 0 0 5.598 22h12.804a1 1 0 0 0 .878-1.422l-5.069-10.155A2 2 0 0 1 14 9.527V2\"/></svg></div><h3>Playwright Tests</h3><p>E2E, API, visual regression and video tours — all preconfigured and ready to go.</p></div></div>"
+                "featureBoxes": [
+                    {
+                        "icon": "lightning",
+                        "title": "Svelte 5 Runes",
+                        "text": "Reactive UI with $state, $derived and $effect — no boilerplate, maximum performance."
+                    },
+                    {
+                        "icon": "palette",
+                        "title": "Tailwind CSS 4",
+                        "text": "Utility-first styling with custom theme, dark-mode-ready and blazing fast builds."
+                    },
+                    {
+                        "icon": "database",
+                        "title": "Tibi CMS API",
+                        "text": "Collections, hooks, media library — all via REST API. With mock mode for offline development."
+                    },
+                    {
+                        "icon": "globe",
+                        "title": "Built-in i18n",
+                        "text": "Multi-language out of the box: URL-based language selection, lazy-loaded locales, SSR-compatible."
+                    },
+                    {
+                        "icon": "monitor",
+                        "title": "SSR via goja",
+                        "text": "Server-side rendering in Go — fast initial delivery, SEO-friendly, with cache invalidation."
+                    },
+                    {
+                        "icon": "flask",
+                        "title": "Playwright Tests",
+                        "text": "E2E, API, visual regression and video tours — all preconfigured and ready to go."
+                    }
+                ]
            },
            {
                "type": "richtext",
@@ -129,9 +199,9 @@
                    "top": "lg",
                    "bottom": "sm"
                },
-                "externalImageUrl": "https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=800&q=80",
+                "image": "6821c0a10000000000000202",
                "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>"
+                "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, Contact Form) is its own Svelte component — <strong>extensible and swappable</strong>.</p>"
            },
            {
                "type": "accordion",
@@ -166,12 +236,19 @@
        "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"
+            "keywords": [
+                "svelte",
+                "tibi",
+                "cms",
+                "starter",
+                "template"
+            ]
        }
    },
    {
-        "id": "about-de",
-        "_id": "about-de",
+        "_id": {
+            "$oid": "6821c0a10000000000000003"
+        },
        "active": true,
        "type": "page",
        "lang": "de",
@@ -186,7 +263,7 @@
                "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"
+                    "image": "6821c0a10000000000000203"
                }
            },
            {
@@ -205,7 +282,7 @@
                    "top": "md",
                    "bottom": "lg"
                },
-                "externalImageUrl": "https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&q=80",
+                "image": "6821c0a10000000000000204",
                "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>"
            }
@@ -213,12 +290,18 @@
        "meta": {
            "title": "Über das Template — Tibi Svelte Starter",
            "description": "Architektur und Tech-Stack des Tibi Svelte Starter Templates.",
-            "keywords": "svelte, über uns, template, architektur"
+            "keywords": [
+                "svelte",
+                "über uns",
+                "template",
+                "architektur"
+            ]
        }
    },
    {
-        "id": "about-en",
-        "_id": "about-en",
+        "_id": {
+            "$oid": "6821c0a10000000000000004"
+        },
        "active": true,
        "type": "page",
        "lang": "en",
@@ -233,7 +316,7 @@
                "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"
+                    "image": "6821c0a10000000000000203"
                }
            },
            {
@@ -252,7 +335,7 @@
                    "top": "md",
                    "bottom": "lg"
                },
-                "externalImageUrl": "https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&q=80",
+                "image": "6821c0a10000000000000204",
                "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>"
            }
@@ -260,12 +343,18 @@
        "meta": {
            "title": "About the Template — Tibi Svelte Starter",
            "description": "Architecture and tech stack of the Tibi Svelte Starter Template.",
-            "keywords": "svelte, about, template, architecture"
+            "keywords": [
+                "svelte",
+                "about",
+                "template",
+                "architecture"
+            ]
        }
    },
    {
-        "id": "contact-de",
-        "_id": "contact-de",
+        "_id": {
+            "$oid": "6821c0a10000000000000005"
+        },
        "active": true,
        "type": "page",
        "lang": "de",
@@ -280,7 +369,7 @@
                "subline": "Fragen, Feedback oder Projektanfragen? Schreib uns!",
                "containerWidth": "full",
                "heroImage": {
-                    "externalUrl": "https://images.unsplash.com/photo-1423666639041-f56000c27a9a?w=1920&q=80"
+                    "image": "6821c0a10000000000000205"
                }
            },
            {
@@ -295,12 +384,16 @@
        "meta": {
            "title": "Kontakt — Tibi Svelte Starter",
            "description": "Nimm Kontakt mit uns auf.",
-            "keywords": "kontakt, anfrage"
+            "keywords": [
+                "kontakt",
+                "anfrage"
+            ]
        }
    },
    {
-        "id": "contact-en",
-        "_id": "contact-en",
+        "_id": {
+            "$oid": "6821c0a10000000000000006"
+        },
        "active": true,
        "type": "page",
        "lang": "en",
@@ -315,7 +408,7 @@
                "subline": "Questions, feedback or project inquiries? Get in touch!",
                "containerWidth": "full",
                "heroImage": {
-                    "externalUrl": "https://images.unsplash.com/photo-1423666639041-f56000c27a9a?w=1920&q=80"
+                    "image": "6821c0a10000000000000205"
                }
            },
            {
@@ -330,7 +423,10 @@
        "meta": {
            "title": "Contact — Tibi Svelte Starter",
            "description": "Get in touch with us.",
-            "keywords": "contact, inquiry"
+            "keywords": [
+                "contact",
+                "inquiry"
+            ]
        }
    }
 ]
@@ -0,0 +1,97 @@
+[
+    {
+        "_id": {
+            "$oid": "6821c0a10000000000000201"
+        },
+        "file": {
+            "src": "https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920&q=80&auto=format&fit=crop",
+            "type": "image/jpeg"
+        },
+        "title": "Homepage Hero",
+        "alt": {
+            "de": "Abstrakte Ansicht einer vernetzten digitalen Weltkarte",
+            "en": "Abstract view of a connected digital world map"
+        },
+        "description": "Hero image for the homepage demo.",
+        "tags": [
+            "hero",
+            "homepage"
+        ]
+    },
+    {
+        "_id": {
+            "$oid": "6821c0a10000000000000202"
+        },
+        "file": {
+            "src": "https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=1200&q=80&auto=format&fit=crop",
+            "type": "image/jpeg"
+        },
+        "title": "Workflow",
+        "alt": {
+            "de": "Laptop mit geoeffnetem Code-Editor auf einem Schreibtisch",
+            "en": "Laptop with an open code editor on a desk"
+        },
+        "description": "Workflow image for the richtext demo block.",
+        "tags": [
+            "workflow",
+            "development"
+        ]
+    },
+    {
+        "_id": {
+            "$oid": "6821c0a10000000000000203"
+        },
+        "file": {
+            "src": "https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=1920&q=80&auto=format&fit=crop",
+            "type": "image/jpeg"
+        },
+        "title": "About Team",
+        "alt": {
+            "de": "Team sitzt gemeinsam an einem grossen Tisch und arbeitet zusammen",
+            "en": "Team working together around a large table"
+        },
+        "description": "Hero image for the about page demo.",
+        "tags": [
+            "about",
+            "team"
+        ]
+    },
+    {
+        "_id": {
+            "$oid": "6821c0a10000000000000204"
+        },
+        "file": {
+            "src": "https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=1200&q=80&auto=format&fit=crop",
+            "type": "image/jpeg"
+        },
+        "title": "Technology Stack",
+        "alt": {
+            "de": "Nahaufnahme eines Bildschirms mit Code und farbiger Syntaxhervorhebung",
+            "en": "Close-up of a screen with code and colorful syntax highlighting"
+        },
+        "description": "Technology stack image for the about page demo.",
+        "tags": [
+            "about",
+            "code"
+        ]
+    },
+    {
+        "_id": {
+            "$oid": "6821c0a10000000000000205"
+        },
+        "file": {
+            "src": "https://images.unsplash.com/photo-1423666639041-f56000c27a9a?w=1920&q=80&auto=format&fit=crop",
+            "type": "image/jpeg"
+        },
+        "title": "Contact Hero",
+        "alt": {
+            "de": "Arbeitsplatz mit Laptop, Telefon und Notizbuch fuer Kontaktanfragen",
+            "en": "Workspace with laptop, phone, and notebook for contact inquiries"
+        },
+        "description": "Hero image for the contact page demo.",
+        "tags": [
+            "contact",
+            "hero"
+        ]
+    }
+]
@@ -1,48 +1,96 @@
 [
    {
-        "id": "header-de",
-        "_id": "header-de",
+        "_id": {
+            "$oid": "6821c0a10000000000000101"
+        },
        "language": "de",
        "type": "header",
        "elements": [
-            { "name": "Startseite", "page": "/" },
-            { "name": "Über uns", "page": "/ueber-uns" },
-            { "name": "Kontakt", "page": "/kontakt" }
+            {
+                "name": "Startseite",
+                "page": "6821c0a10000000000000001"
+            },
+            {
+                "name": "Über uns",
+                "page": "6821c0a10000000000000003"
+            },
+            {
+                "name": "Kontakt",
+                "page": "6821c0a10000000000000005"
+            }
        ]
    },
    {
-        "id": "header-en",
-        "_id": "header-en",
+        "_id": {
+            "$oid": "6821c0a10000000000000102"
+        },
        "language": "en",
        "type": "header",
        "elements": [
-            { "name": "Home", "page": "/" },
-            { "name": "About", "page": "/about" },
-            { "name": "Contact", "page": "/contact" }
+            {
+                "name": "Home",
+                "page": "6821c0a10000000000000002"
+            },
+            {
+                "name": "About",
+                "page": "6821c0a10000000000000004"
+            },
+            {
+                "name": "Contact",
+                "page": "6821c0a10000000000000006"
+            }
        ]
    },
    {
-        "id": "footer-de",
-        "_id": "footer-de",
+        "_id": {
+            "$oid": "6821c0a10000000000000103"
+        },
        "language": "de",
        "type": "footer",
        "elements": [
-            { "name": "Startseite", "page": "/" },
-            { "name": "Über uns", "page": "/ueber-uns" },
-            { "name": "Kontakt", "page": "/kontakt" },
-            { "name": "GitHub", "external": true, "externalUrl": "https://github.com" }
+            {
+                "name": "Startseite",
+                "page": "6821c0a10000000000000001"
+            },
+            {
+                "name": "Über uns",
+                "page": "6821c0a10000000000000003"
+            },
+            {
+                "name": "Kontakt",
+                "page": "6821c0a10000000000000005"
+            },
+            {
+                "name": "GitHub",
+                "external": true,
+                "externalUrl": "https://github.com"
+            }
        ]
    },
    {
-        "id": "footer-en",
-        "_id": "footer-en",
+        "_id": {
+            "$oid": "6821c0a10000000000000104"
+        },
        "language": "en",
        "type": "footer",
        "elements": [
-            { "name": "Home", "page": "/" },
-            { "name": "About", "page": "/about" },
-            { "name": "Contact", "page": "/contact" },
-            { "name": "GitHub", "external": true, "externalUrl": "https://github.com" }
+            {
+                "name": "Home",
+                "page": "6821c0a10000000000000002"
+            },
+            {
+                "name": "About",
+                "page": "6821c0a10000000000000004"
+            },
+            {
+                "name": "Contact",
+                "page": "6821c0a10000000000000006"
+            },
+            {
+                "name": "GitHub",
+                "external": true,
+                "externalUrl": "https://github.com"
+            }
        ]
    }
-]
+]