tibi-svelte-starter/frontend/mocking/content.json

[
    {
        "id": "home-de",
        "_id": "home-de",
        "active": true,
        "type": "page",
        "lang": "de",
        "translationKey": "home",
        "name": "Startseite",
        "path": "/",
        "blocks": [
            {
                "type": "hero",
                "headline": "Moderne Webprojekte. Blitzschnell umgesetzt.",
                "headlineH1": true,
                "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": {
                    "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": "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": "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": "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 das Template",
        "path": "/ueber-uns",
        "blocks": [
            {
                "type": "hero",
                "headline": "Über das Template",
                "headlineH1": true,
                "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 das Template — Tibi Svelte Starter",
            "description": "Architektur und Tech-Stack des Tibi Svelte Starter Templates.",
            "keywords": "svelte, über uns, template, architektur"
        }
    },
    {
        "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",
        "translationKey": "contact",
        "name": "Kontakt",
        "path": "/kontakt",
        "blocks": [
            {
                "type": "hero",
                "headline": "Kontakt",
                "headlineH1": true,
                "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 — 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"
        }
    }
]