diff --git a/frontend/mocking/content.json b/frontend/mocking/content.json
index 8ce1d5e..d19557f 100644
--- a/frontend/mocking/content.json
+++ b/frontend/mocking/content.json
@@ -29,15 +29,21 @@
"headline": "Was dieses Template kann",
"tagline": "Features",
"anchorId": "features",
- "padding": { "top": "lg", "bottom": "lg" },
- "text": "⚡
Svelte 5 Runes
Reaktives UI mit $state, $derived und $effect — kein Boilerplate, maximale Performance.
🎨
Tailwind CSS 4
Utility-first Styling mit Custom-Theme, Dark-Mode-ready und blitzschnellen Builds.
🔌
Tibi CMS API
Collections, Hooks, Medialib — alles über eine REST-API. Mit Mock-Modus für offline-Entwicklung.
🌍
i18n Built-in
Mehrsprachigkeit aus der Box: URL-basierte Sprachauswahl, Lazy-Loaded Locales, SSR-kompatibel.
🖥️
SSR via goja
Server-Side Rendering in Go — schnelle Erstauslieferung, SEO-freundlich, mit Cache-Invalidierung.
🧪
Playwright Tests
E2E, API, Visual Regression und Video-Tours — alles vorkonfiguriert und ready to go.
Svelte 5 Runes
Reaktives UI mit $state, $derived und $effect — kein Boilerplate, maximale Performance.
Tailwind CSS 4
Utility-first Styling mit Custom-Theme, Dark-Mode-ready und blitzschnellen Builds.
Tibi CMS API
Collections, Hooks, Medialib — alles über eine REST-API. Mit Mock-Modus für offline-Entwicklung.
i18n Built-in
Mehrsprachigkeit aus der Box: URL-basierte Sprachauswahl, Lazy-Loaded Locales, SSR-kompatibel.
SSR via goja
Server-Side Rendering in Go — schnelle Erstauslieferung, SEO-freundlich, mit Cache-Invalidierung.
Playwright Tests
E2E, API, Visual Regression und Video-Tours — alles vorkonfiguriert und ready to go.
Starte die Entwicklungsumgebung mit make docker-up && make docker-start. Der esbuild-Watcher kompiliert Änderungen in Echtzeit, BrowserSync lädt den Browser automatisch neu.
Für Offline-Entwicklung aktiviere den Mock-Modus mit MOCK=1 in der .env. Content wird über die Tibi-API geladen und mit dem BlockRenderer dargestellt.
Jeder Block-Typ (Hero, Richtext, Accordion, Features) ist eine eigene Svelte-Komponente — erweiterbar und austauschbar.
"
@@ -47,7 +53,10 @@
"headline": "Häufige Fragen",
"tagline": "FAQ",
"anchorId": "faq",
- "padding": { "top": "sm", "bottom": "lg" },
+ "padding": {
+ "top": "sm",
+ "bottom": "lg"
+ },
"accordionItems": [
{
"question": "Wie starte ich ein neues Projekt mit diesem Template?",
@@ -105,15 +114,21 @@
"headline": "What this template offers",
"tagline": "Features",
"anchorId": "features",
- "padding": { "top": "lg", "bottom": "lg" },
- "text": "⚡
Svelte 5 Runes
Reactive UI with $state, $derived and $effect — no boilerplate, maximum performance.
🎨
Tailwind CSS 4
Utility-first styling with custom theme, dark-mode-ready and blazing fast builds.
🔌
Tibi CMS API
Collections, hooks, media library — all via REST API. With mock mode for offline development.
🌍
Built-in i18n
Multi-language out of the box: URL-based language selection, lazy-loaded locales, SSR-compatible.
🖥️
SSR via goja
Server-side rendering in Go — fast initial delivery, SEO-friendly, with cache invalidation.
🧪
Playwright Tests
E2E, API, visual regression and video tours — all preconfigured and ready to go.
Svelte 5 Runes
Reactive UI with $state, $derived and $effect — no boilerplate, maximum performance.
Tailwind CSS 4
Utility-first styling with custom theme, dark-mode-ready and blazing fast builds.
Tibi CMS API
Collections, hooks, media library — all via REST API. With mock mode for offline development.
Built-in i18n
Multi-language out of the box: URL-based language selection, lazy-loaded locales, SSR-compatible.
SSR via goja
Server-side rendering in Go — fast initial delivery, SEO-friendly, with cache invalidation.
Playwright Tests
E2E, API, visual regression and video tours — all preconfigured and ready to go.
Start the dev environment with make docker-up && make docker-start. The esbuild watcher compiles changes in real-time, BrowserSync auto-reloads the browser.
For offline development, enable mock mode with MOCK=1 in .env. Content is loaded via the Tibi API and rendered with the BlockRenderer.
Each block type (Hero, Richtext, Accordion, Features) is its own Svelte component — extensible and swappable.
"
@@ -123,7 +138,10 @@
"headline": "Frequently Asked Questions",
"tagline": "FAQ",
"anchorId": "faq",
- "padding": { "top": "sm", "bottom": "lg" },
+ "padding": {
+ "top": "sm",
+ "bottom": "lg"
+ },
"accordionItems": [
{
"question": "How do I start a new project with this template?",
@@ -174,13 +192,19 @@
{
"type": "richtext",
"headline": "Warum dieses Template?",
- "padding": { "top": "lg", "bottom": "md" },
+ "padding": {
+ "top": "lg",
+ "bottom": "md"
+ },
"text": "Das Tibi Svelte Starter vereint bewährte Patterns aus dutzenden Projekten in einem sofort einsetzbaren Fundament:
- API-Layer mit Request-Deduplication, Loading-States und Caching
- Widget-Bibliothek mit Button, Input, Select, Carousel, Pagination und mehr
- Block-Rendering für CMS-gesteuerte Seiten mit beliebig erweiterbaren Typen
- Testing-Setup mit Playwright für E2E, API und visuelle Regressionstests
"
},
{
"type": "richtext",
"headline": "Technologie-Stack",
- "padding": { "top": "md", "bottom": "lg" },
+ "padding": {
+ "top": "md",
+ "bottom": "lg"
+ },
"externalImageUrl": "https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&q=80",
"imagePosition": "left",
"text": "Jede Komponente wurde sorgfältig ausgewählt:
- Svelte 5 — Reaktives Framework mit Runes-API
- Tailwind CSS 4 — Utility-first CSS mit @theme
- esbuild — Extrem schneller Bundler
- Tibi CMS — Headless CMS mit Go-Backend
- goja SSR — Server-Side Rendering in Go
- Playwright — Modernes Testing-Framework
"
@@ -215,13 +239,19 @@
{
"type": "richtext",
"headline": "Why this template?",
- "padding": { "top": "lg", "bottom": "md" },
+ "padding": {
+ "top": "lg",
+ "bottom": "md"
+ },
"text": "The Tibi Svelte Starter combines proven patterns from dozens of projects into an immediately usable foundation:
- API layer with request deduplication, loading states and caching
- Widget library with Button, Input, Select, Carousel, Pagination and more
- Block rendering for CMS-driven pages with extensible types
- Testing setup with Playwright for E2E, API and visual regression tests
"
},
{
"type": "richtext",
"headline": "Technology Stack",
- "padding": { "top": "md", "bottom": "lg" },
+ "padding": {
+ "top": "md",
+ "bottom": "lg"
+ },
"externalImageUrl": "https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&q=80",
"imagePosition": "left",
"text": "Every component was carefully chosen:
- Svelte 5 — Reactive framework with Runes API
- Tailwind CSS 4 — Utility-first CSS with @theme
- esbuild — Extremely fast bundler
- Tibi CMS — Headless CMS with Go backend
- goja SSR — Server-side rendering in Go
- Playwright — Modern testing framework
"
@@ -256,7 +286,10 @@
{
"type": "contact-form",
"headline": "Nachricht senden",
- "padding": { "top": "lg", "bottom": "lg" }
+ "padding": {
+ "top": "lg",
+ "bottom": "lg"
+ }
}
],
"meta": {
@@ -288,7 +321,10 @@
{
"type": "contact-form",
"headline": "Send a message",
- "padding": { "top": "lg", "bottom": "lg" }
+ "padding": {
+ "top": "lg",
+ "bottom": "lg"
+ }
}
],
"meta": {
@@ -297,4 +333,4 @@
"keywords": "contact, inquiry"
}
}
-]
+]
\ No newline at end of file
diff --git a/frontend/src/blocks/HeroBlock.svelte b/frontend/src/blocks/HeroBlock.svelte
index 79556f6..78aaade 100644
--- a/frontend/src/blocks/HeroBlock.svelte
+++ b/frontend/src/blocks/HeroBlock.svelte
@@ -1,9 +1,11 @@
{block.callToAction.buttonText}
diff --git a/frontend/src/css/style.css b/frontend/src/css/style.css
index 75ff5e0..55cc1e1 100644
--- a/frontend/src/css/style.css
+++ b/frontend/src/css/style.css
@@ -128,8 +128,14 @@
}
.feature-card .feature-icon {
- font-size: 2.5rem;
margin-bottom: 1rem;
+ color: var(--color-brand-600);
+ line-height: 1;
+}
+
+.feature-card .feature-icon svg {
+ width: 2.5rem;
+ height: 2.5rem;
}
.feature-card h3 {
diff --git a/frontend/src/lib/navigation.ts b/frontend/src/lib/navigation.ts
index 0b645cb..97c895d 100644
--- a/frontend/src/lib/navigation.ts
+++ b/frontend/src/lib/navigation.ts
@@ -173,6 +173,16 @@ export const spaLink = (node: HTMLAnchorElement, options: SpaNavigateOptions = {
return
}
+ // Handle anchor links: scroll to element instead of SPA navigation
+ if (href.startsWith("#")) {
+ event.preventDefault()
+ const target = document.getElementById(href.slice(1))
+ if (target) {
+ target.scrollIntoView({ behavior: "smooth" })
+ }
+ return
+ }
+
// Skip if target is set (e.g., _blank)
if (node.target && node.target !== "_self") {
return