From cbe89acb211ded21ea8bcbea82c3bcab368e5c1e Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 6 Feb 2026 16:30:15 +0100
Subject: [PATCH] =?UTF-8?q?Migration=20vers=20architecture=20Svelte=20+=20?=
 =?UTF-8?q?Kirby=20inspir=C3=A9e=20de=20design-to-pack?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Mise en place de Svelte 4 avec Vite pour le frontend (SPA)
- Simplification des templates PHP (header/footer minimalistes)
- Création de templates JSON pour API (home, about, expertise, portfolio, jouer, game, blog, article, project)
- Ajout d'un controller de site pour définir genericData globalement
- Structure des stores Svelte (page, navigation, locale, site)
- Router avec navaid pour navigation SPA et interception des liens
- Composants layout (Header, Footer, Cursor) et vues de base
- Build Vite vers assets/dist/ (index.js/css)
- Header PHP détecte assets/dist pour basculer dev/prod

Architecture fonctionnelle de base établie, à améliorer et compléter.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 .gitignore                               |   15 +-
 index.html                               |   46 +
 package-lock.json                        | 1295 ++++++++++++++++++++++
 package.json                             |   29 +
 site/controllers/site.php                |   37 +
 site/snippets/footer.php                 |   80 --
 site/snippets/header.php                 |   64 +-
 site/templates/about.json.php            |   34 +
 site/templates/about.php                 |   79 --
 site/templates/article.json.php          |   34 +
 site/templates/article.php               |   99 --
 site/templates/blog.json.php             |   26 +
 site/templates/blog.php                  |   59 -
 site/templates/default.json.php          |   10 +
 site/templates/default.php               |    3 +-
 site/templates/expertise.json.php        |   24 +
 site/templates/expertise.php             |   34 -
 site/templates/game.json.php             |   16 +
 site/templates/game.php                  |   56 -
 site/templates/home.json.php             |   24 +
 site/templates/home.php                  |   47 -
 site/templates/jouer.json.php            |   33 +
 site/templates/jouer.php                 |   55 -
 site/templates/portfolio.json.php        |   32 +
 site/templates/portfolio.php             |  107 --
 site/templates/project.json.php          |   31 +
 site/templates/project.php               |  102 --
 src/App.svelte                           |   83 ++
 src/components/layout/Cursor.svelte      |   68 ++
 src/components/layout/Footer.svelte      |   73 ++
 src/components/layout/Header.svelte      |  245 ++++
 src/components/ui/Button.svelte          |   98 ++
 src/components/ui/VideoBackground.svelte |   68 ++
 src/lib/animations.js                    |  142 +++
 src/lib/router.js                        |  100 ++
 src/main.js                              |   13 +
 src/stores/locale.js                     |   17 +
 src/stores/navigation.js                 |   18 +
 src/stores/page.js                       |   27 +
 src/stores/site.js                       |   19 +
 src/style.css                            |   82 ++
 src/views/About.svelte                   |  177 +++
 src/views/Article.svelte                 |   24 +
 src/views/Blog.svelte                    |   24 +
 src/views/Default.svelte                 |   45 +
 src/views/Expertise.svelte               |   24 +
 src/views/Game.svelte                    |   24 +
 src/views/Home.svelte                    |  164 +++
 src/views/Jouer.svelte                   |   24 +
 src/views/Portfolio.svelte               |   24 +
 src/views/Project.svelte                 |   24 +
 svelte.config.js                         |    5 +
 vite.config.js                           |   37 +
 53 files changed, 3348 insertions(+), 772 deletions(-)
 create mode 100644 index.html
 create mode 100644 package-lock.json
 create mode 100644 package.json
 create mode 100644 site/controllers/site.php
 create mode 100644 site/templates/about.json.php
 create mode 100644 site/templates/article.json.php
 create mode 100644 site/templates/blog.json.php
 create mode 100644 site/templates/default.json.php
 create mode 100644 site/templates/expertise.json.php
 create mode 100644 site/templates/game.json.php
 create mode 100644 site/templates/home.json.php
 create mode 100644 site/templates/jouer.json.php
 create mode 100644 site/templates/portfolio.json.php
 create mode 100644 site/templates/project.json.php
 create mode 100644 src/App.svelte
 create mode 100644 src/components/layout/Cursor.svelte
 create mode 100644 src/components/layout/Footer.svelte
 create mode 100644 src/components/layout/Header.svelte
 create mode 100644 src/components/ui/Button.svelte
 create mode 100644 src/components/ui/VideoBackground.svelte
 create mode 100644 src/lib/animations.js
 create mode 100644 src/lib/router.js
 create mode 100644 src/main.js
 create mode 100644 src/stores/locale.js
 create mode 100644 src/stores/navigation.js
 create mode 100644 src/stores/page.js
 create mode 100644 src/stores/site.js
 create mode 100644 src/style.css
 create mode 100644 src/views/About.svelte
 create mode 100644 src/views/Article.svelte
 create mode 100644 src/views/Blog.svelte
 create mode 100644 src/views/Default.svelte
 create mode 100644 src/views/Expertise.svelte
 create mode 100644 src/views/Game.svelte
 create mode 100644 src/views/Home.svelte
 create mode 100644 src/views/Jouer.svelte
 create mode 100644 src/views/Portfolio.svelte
 create mode 100644 src/views/Project.svelte
 create mode 100644 svelte.config.js
 create mode 100644 vite.config.js

diff --git a/.gitignore b/.gitignore
index 86399ae..ea11103 100644
--- a/.gitignore
+++ b/.gitignore
@@ -57,4 +57,17 @@ Icon
 # Claude settings
 # ---------------
 
-/.claude
\ No newline at end of file
+/.claude
+
+# Node.js
+# ---------------
+
+node_modules/
+npm-debug.log*
+*.log
+
+# Build
+# ---------------
+
+dist/
+node_modules/
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..2315788
--- /dev/null
+++ b/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>World Game - Play to Engage</title>
+  <meta name="description" content="World Game - Création de jeux et expériences interactives">
+
+  <!-- This file is only used during development with Vite -->
+  <!-- In production, Kirby's header.php will be used -->
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+
+  <!-- Mock Kirby data for development -->
+  <script>
+    window.__KIRBY__ = {
+      page: {
+        id: 'home',
+        template: 'home',
+        url: '/',
+        uri: ''
+      },
+      site: {
+        title: 'World Game',
+        url: 'http://localhost:8000',
+        language: 'fr',
+        languages: [
+          { code: 'fr', name: 'Français' },
+          { code: 'en', name: 'English' }
+        ],
+        logo: null,
+        navigation: [
+          { label_fr: 'Accueil', label_en: 'Home', url: '/', isActive: true },
+          { label_fr: 'Expertise', label_en: 'Expertise', url: '/expertise', isActive: false },
+          { label_fr: 'Portfolio', label_en: 'Portfolio', url: '/portfolio', isActive: false },
+          { label_fr: 'Jouer', label_en: 'Play', url: '/jouer', isActive: false },
+          { label_fr: 'À propos', label_en: 'About', url: '/a-propos', isActive: false },
+          { label_fr: 'Blog', label_en: 'Blog', url: '/blog', isActive: false }
+        ]
+      }
+    };
+  </script>
+</body>
+</html>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..b749d29
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,1295 @@
+{
+  "name": "world-game-website",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "world-game-website",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "@sveltejs/vite-plugin-svelte": "^3.1.2",
+        "gsap": "^3.14.2",
+        "navaid": "^1.2.0",
+        "svelte": "^4.2.20",
+        "vite": "^5.4.21"
+      },
+      "devDependencies": {
+        "fs-extra": "^11.3.3"
+      }
+    },
+    "node_modules/@ampproject/remapping": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
+      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+      "cpu": [
+        "loong64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.57.1.tgz",
+      "integrity": "sha512-A6ehUVSiSaaliTxai040ZpZ2zTevHYbvu/lDoeAteHI8QnaosIzm4qwtezfRg1jOYaUmnzLX1AOD6Z+UJjtifg==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.57.1.tgz",
+      "integrity": "sha512-dQaAddCY9YgkFHZcFNS/606Exo8vcLHwArFZ7vxXq4rigo2bb494/xKMMwRRQW6ug7Js6yXmBZhSBRuBvCCQ3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.57.1.tgz",
+      "integrity": "sha512-crNPrwJOrRxagUYeMn/DZwqN88SDmwaJ8Cvi/TN1HnWBU7GwknckyosC2gd0IqYRsHDEnXf328o9/HC6OkPgOg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.57.1.tgz",
+      "integrity": "sha512-Ji8g8ChVbKrhFtig5QBV7iMaJrGtpHelkB3lsaKzadFBe58gmjfGXAOfI5FV0lYMH8wiqsxKQ1C9B0YTRXVy4w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.57.1.tgz",
+      "integrity": "sha512-R+/WwhsjmwodAcz65guCGFRkMb4gKWTcIeLy60JJQbXrJ97BOXHxnkPFrP+YwFlaS0m+uWJTstrUA9o+UchFug==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.57.1.tgz",
+      "integrity": "sha512-IEQTCHeiTOnAUC3IDQdzRAGj3jOAYNr9kBguI7MQAAZK3caezRrg0GxAb6Hchg4lxdZEI5Oq3iov/w/hnFWY9Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.57.1.tgz",
+      "integrity": "sha512-F8sWbhZ7tyuEfsmOxwc2giKDQzN3+kuBLPwwZGyVkLlKGdV1nvnNwYD0fKQ8+XS6hp9nY7B+ZeK01EBUE7aHaw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.57.1.tgz",
+      "integrity": "sha512-rGfNUfn0GIeXtBP1wL5MnzSj98+PZe/AXaGBCRmT0ts80lU5CATYGxXukeTX39XBKsxzFpEeK+Mrp9faXOlmrw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.57.1.tgz",
+      "integrity": "sha512-MMtej3YHWeg/0klK2Qodf3yrNzz6CGjo2UntLvk2RSPlhzgLvYEB3frRvbEF2wRKh1Z2fDIg9KRPe1fawv7C+g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.57.1.tgz",
+      "integrity": "sha512-1a/qhaaOXhqXGpMFMET9VqwZakkljWHLmZOX48R0I/YLbhdxr1m4gtG1Hq7++VhVUmf+L3sTAf9op4JlhQ5u1Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.57.1.tgz",
+      "integrity": "sha512-QWO6RQTZ/cqYtJMtxhkRkidoNGXc7ERPbZN7dVW5SdURuLeVU7lwKMpo18XdcmpWYd0qsP1bwKPf7DNSUinhvA==",
+      "cpu": [
+        "loong64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-musl": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.57.1.tgz",
+      "integrity": "sha512-xpObYIf+8gprgWaPP32xiN5RVTi/s5FCR+XMXSKmhfoJjrpRAjCuuqQXyxUa/eJTdAE6eJ+KDKaoEqjZQxh3Gw==",
+      "cpu": [
+        "loong64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.57.1.tgz",
+      "integrity": "sha512-4BrCgrpZo4hvzMDKRqEaW1zeecScDCR+2nZ86ATLhAoJ5FQ+lbHVD3ttKe74/c7tNT9c6F2viwB3ufwp01Oh2w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-musl": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.57.1.tgz",
+      "integrity": "sha512-NOlUuzesGauESAyEYFSe3QTUguL+lvrN1HtwEEsU2rOwdUDeTMJdO5dUYl/2hKf9jWydJrO9OL/XSSf65R5+Xw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.57.1.tgz",
+      "integrity": "sha512-ptA88htVp0AwUUqhVghwDIKlvJMD/fmL/wrQj99PRHFRAG6Z5nbWoWG4o81Nt9FT+IuqUQi+L31ZKAFeJ5Is+A==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.57.1.tgz",
+      "integrity": "sha512-S51t7aMMTNdmAMPpBg7OOsTdn4tySRQvklmL3RpDRyknk87+Sp3xaumlatU+ppQ+5raY7sSTcC2beGgvhENfuw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.57.1.tgz",
+      "integrity": "sha512-Bl00OFnVFkL82FHbEqy3k5CUCKH6OEJL54KCyx2oqsmZnFTR8IoNqBF+mjQVcRCT5sB6yOvK8A37LNm/kPJiZg==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.57.1.tgz",
+      "integrity": "sha512-ABca4ceT4N+Tv/GtotnWAeXZUZuM/9AQyCyKYyKnpk4yoA7QIAuBt6Hkgpw8kActYlew2mvckXkvx0FfoInnLg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.57.1.tgz",
+      "integrity": "sha512-HFps0JeGtuOR2convgRRkHCekD7j+gdAuXM+/i6kGzQtFhlCtQkpwtNzkNj6QhCDp7DRJ7+qC/1Vg2jt5iSOFw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openbsd-x64": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.57.1.tgz",
+      "integrity": "sha512-H+hXEv9gdVQuDTgnqD+SQffoWoc0Of59AStSzTEj/feWTBAnSfSD3+Dql1ZruJQxmykT/JVY0dE8Ka7z0DH1hw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.57.1.tgz",
+      "integrity": "sha512-4wYoDpNg6o/oPximyc/NG+mYUejZrCU2q+2w6YZqrAs2UcNUChIZXjtafAiiZSUc7On8v5NyNj34Kzj/Ltk6dQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.57.1.tgz",
+      "integrity": "sha512-O54mtsV/6LW3P8qdTcamQmuC990HDfR71lo44oZMZlXU4tzLrbvTii87Ni9opq60ds0YzuAlEr/GNwuNluZyMQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.57.1.tgz",
+      "integrity": "sha512-P3dLS+IerxCT/7D2q2FYcRdWRl22dNbrbBEtxdWhXrfIMPP9lQhb5h4Du04mdl5Woq05jVCDPCMF7Ub0NAjIew==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.57.1.tgz",
+      "integrity": "sha512-VMBH2eOOaKGtIJYleXsi2B8CPVADrh+TyNxJ4mWPnKfLB/DBUmzW+5m1xUrcwWoMfSLagIRpjUFeW5CO5hyciQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.57.1.tgz",
+      "integrity": "sha512-mxRFDdHIWRxg3UfIIAwCm6NzvxG0jDX/wBN6KsQFTvKFqqg9vTrWUE68qEjHt19A5wwx5X5aUi2zuZT7YR0jrA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@sveltejs/vite-plugin-svelte": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-3.1.2.tgz",
+      "integrity": "sha512-Txsm1tJvtiYeLUVRNqxZGKR/mI+CzuIQuc2gn+YCs9rMTowpNZ2Nqt53JdL8KF9bLhAf2ruR/dr9eZCwdTriRA==",
+      "license": "MIT",
+      "dependencies": {
+        "@sveltejs/vite-plugin-svelte-inspector": "^2.1.0",
+        "debug": "^4.3.4",
+        "deepmerge": "^4.3.1",
+        "kleur": "^4.1.5",
+        "magic-string": "^0.30.10",
+        "svelte-hmr": "^0.16.0",
+        "vitefu": "^0.2.5"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20"
+      },
+      "peerDependencies": {
+        "svelte": "^4.0.0 || ^5.0.0-next.0",
+        "vite": "^5.0.0"
+      }
+    },
+    "node_modules/@sveltejs/vite-plugin-svelte-inspector": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-2.1.0.tgz",
+      "integrity": "sha512-9QX28IymvBlSCqsCll5t0kQVxipsfhFFL+L2t3nTWfXnddYwxBuAEtTtlaVQpRz9c37BhJjltSeY4AJSC03SSg==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20"
+      },
+      "peerDependencies": {
+        "@sveltejs/vite-plugin-svelte": "^3.0.0",
+        "svelte": "^4.0.0 || ^5.0.0-next.0",
+        "vite": "^5.0.0"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "license": "MIT"
+    },
+    "node_modules/acorn": {
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/aria-query": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
+      "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/axobject-query": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
+      "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/code-red": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
+      "integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "@types/estree": "^1.0.1",
+        "acorn": "^8.10.0",
+        "estree-walker": "^3.0.3",
+        "periscopic": "^3.1.0"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/fs-extra": {
+      "version": "11.3.3",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.3.tgz",
+      "integrity": "sha512-VWSRii4t0AFm6ixFFmLLx1t7wS1gh+ckoa84aOeapGum0h+EZd1EhEumSB+ZdDLnEPuucsVB9oB7cxJHap6Afg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/gsap": {
+      "version": "3.14.2",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.14.2.tgz",
+      "integrity": "sha512-P8/mMxVLU7o4+55+1TCnQrPmgjPKnwkzkXOK1asnR9Jg2lna4tEY5qBJjMmAaOBDDZWtlRjBXjLa0w53G/uBLA==",
+      "license": "Standard 'no charge' license: https://gsap.com/standard-license."
+    },
+    "node_modules/is-reference": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
+      "integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.6"
+      }
+    },
+    "node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/kleur": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
+      "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/locate-character": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
+      "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
+      "license": "MIT"
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/mdn-data": {
+      "version": "2.0.30",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "license": "CC0-1.0"
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/navaid": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/navaid/-/navaid-1.2.0.tgz",
+      "integrity": "sha512-Yh5mix394WrT5go29GFeFD4Gp4W0Xj1Ejs0KHXXCA24KKW74pq3PY3fwP3o18KveYO/pjUI2zzcAAp8kY98aNA==",
+      "license": "MIT",
+      "dependencies": {
+        "regexparam": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/periscopic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
+      "integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^3.0.0",
+        "is-reference": "^3.0.0"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/regexparam": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/regexparam/-/regexparam-1.3.0.tgz",
+      "integrity": "sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.57.1.tgz",
+      "integrity": "sha512-oQL6lgK3e2QZeQ7gcgIkS2YZPg5slw37hYufJ3edKlfQSGGm8ICoxswK15ntSzF/a8+h7ekRy7k7oWc3BQ7y8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.8"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.57.1",
+        "@rollup/rollup-android-arm64": "4.57.1",
+        "@rollup/rollup-darwin-arm64": "4.57.1",
+        "@rollup/rollup-darwin-x64": "4.57.1",
+        "@rollup/rollup-freebsd-arm64": "4.57.1",
+        "@rollup/rollup-freebsd-x64": "4.57.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.57.1",
+        "@rollup/rollup-linux-arm-musleabihf": "4.57.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.57.1",
+        "@rollup/rollup-linux-arm64-musl": "4.57.1",
+        "@rollup/rollup-linux-loong64-gnu": "4.57.1",
+        "@rollup/rollup-linux-loong64-musl": "4.57.1",
+        "@rollup/rollup-linux-ppc64-gnu": "4.57.1",
+        "@rollup/rollup-linux-ppc64-musl": "4.57.1",
+        "@rollup/rollup-linux-riscv64-gnu": "4.57.1",
+        "@rollup/rollup-linux-riscv64-musl": "4.57.1",
+        "@rollup/rollup-linux-s390x-gnu": "4.57.1",
+        "@rollup/rollup-linux-x64-gnu": "4.57.1",
+        "@rollup/rollup-linux-x64-musl": "4.57.1",
+        "@rollup/rollup-openbsd-x64": "4.57.1",
+        "@rollup/rollup-openharmony-arm64": "4.57.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.57.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.57.1",
+        "@rollup/rollup-win32-x64-gnu": "4.57.1",
+        "@rollup/rollup-win32-x64-msvc": "4.57.1",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/svelte": {
+      "version": "4.2.20",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.20.tgz",
+      "integrity": "sha512-eeEgGc2DtiUil5ANdtd8vPwt9AgaMdnuUFnPft9F5oMvU/FHu5IHFic+p1dR/UOB7XU2mX2yHW+NcTch4DCh5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@ampproject/remapping": "^2.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "@jridgewell/trace-mapping": "^0.3.18",
+        "@types/estree": "^1.0.1",
+        "acorn": "^8.9.0",
+        "aria-query": "^5.3.0",
+        "axobject-query": "^4.0.0",
+        "code-red": "^1.0.3",
+        "css-tree": "^2.3.1",
+        "estree-walker": "^3.0.3",
+        "is-reference": "^3.0.1",
+        "locate-character": "^3.0.0",
+        "magic-string": "^0.30.4",
+        "periscopic": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/svelte-hmr": {
+      "version": "0.16.0",
+      "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.16.0.tgz",
+      "integrity": "sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==",
+      "license": "ISC",
+      "engines": {
+        "node": "^12.20 || ^14.13.1 || >= 16"
+      },
+      "peerDependencies": {
+        "svelte": "^3.19.0 || ^4.0.0"
+      }
+    },
+    "node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/vite": {
+      "version": "5.4.21",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
+      "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.43",
+        "rollup": "^4.20.0"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vitefu": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-0.2.5.tgz",
+      "integrity": "sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "vite": {
+          "optional": true
+        }
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..8effa14
--- /dev/null
+++ b/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "world-game-website",
+  "version": "1.0.0",
+  "description": "World Game - Svelte + Kirby",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "kirby:dev": "php -S localhost:8000"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://forge.studio-variable.com/studio-variable/world-game.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "gsap": "^3.14.2",
+    "navaid": "^1.2.0",
+    "svelte": "^4.2.20",
+    "vite": "^5.4.21"
+  },
+  "devDependencies": {
+    "fs-extra": "^11.3.3"
+  }
+}
diff --git a/site/controllers/site.php b/site/controllers/site.php
new file mode 100644
index 0000000..5ee297d
--- /dev/null
+++ b/site/controllers/site.php
@@ -0,0 +1,37 @@
+<?php
+
+return function ($page, $kirby, $site) {
+  // Generic page data available in all templates
+  $genericData = [
+    'title' => $page->title()->value(),
+    'url' => $page->url(),
+    'uri' => $page->uri(),
+    'template' => $page->intendedTemplate()->name(),
+    'modified' => $page->modified('Y-m-d'),
+    'site' => [
+      'title' => $site->site_title()->value(),
+      'url' => $site->url(),
+      'logo' => $site->logo()->toFile()?->url(),
+      'language' => $kirby->language()?->code() ?? 'fr',
+      'languages' => $kirby->languages()->map(function($l) {
+        return [
+          'code' => $l->code(),
+          'name' => $l->name()
+        ];
+      })->values(),
+      'navigation' => $site->main_navigation()->toStructure()->map(function($item) use ($kirby) {
+        $linkedPage = $item->link()->toPages()->first();
+        return [
+          'label_fr' => $item->label_fr()->value(),
+          'label_en' => $item->label_en()->value(),
+          'url' => $linkedPage?->url(),
+          'isActive' => $linkedPage?->isOpen() ?? false
+        ];
+      })->values()
+    ]
+  ];
+
+  return [
+    'genericData' => $genericData
+  ];
+};
diff --git a/site/snippets/footer.php b/site/snippets/footer.php
index e66fffc..308b1d0 100644
--- a/site/snippets/footer.php
+++ b/site/snippets/footer.php
@@ -1,82 +1,2 @@
-  <!-- Footer -->
-  <footer class="site-footer">
-    <div class="site-footer__container">
-      <!-- Logo & Info -->
-      <div class="site-footer__brand">
-        <?php if ($logo = $site->logo()->toFile()): ?>
-          <img src="<?= $logo->url() ?>" alt="<?= $site->site_title() ?>" class="site-footer__logo">
-        <?php else: ?>
-          <span class="site-footer__logo-text"><?= $site->site_title() ?></span>
-        <?php endif ?>
-
-        <?php if ($site->site_tagline()->isNotEmpty()): ?>
-          <p class="site-footer__tagline"><?= $site->site_tagline() ?></p>
-        <?php endif ?>
-      </div>
-
-      <!-- Contact -->
-      <div class="site-footer__contact">
-        <?php if ($site->contact_email()->isNotEmpty()): ?>
-          <a href="mailto:<?= $site->contact_email() ?>" class="site-footer__email">
-            <?= $site->contact_email() ?>
-          </a>
-        <?php endif ?>
-
-        <?php if ($site->contact_phone()->isNotEmpty()): ?>
-          <a href="tel:<?= $site->contact_phone() ?>" class="site-footer__phone">
-            <?= $site->contact_phone() ?>
-          </a>
-        <?php endif ?>
-
-        <?php if ($site->contact_address()->isNotEmpty()): ?>
-          <address class="site-footer__address">
-            <?= $site->contact_address()->kt() ?>
-          </address>
-        <?php endif ?>
-      </div>
-
-      <!-- Social Links -->
-      <div class="site-footer__social">
-        <?php if ($site->social_linkedin()->isNotEmpty()): ?>
-          <a href="<?= $site->social_linkedin() ?>" class="site-footer__social-link" target="_blank" rel="noopener noreferrer">
-            LinkedIn
-          </a>
-        <?php endif ?>
-
-        <?php if ($site->social_twitter()->isNotEmpty()): ?>
-          <a href="<?= $site->social_twitter() ?>" class="site-footer__social-link" target="_blank" rel="noopener noreferrer">
-            Twitter
-          </a>
-        <?php endif ?>
-
-        <?php if ($site->social_instagram()->isNotEmpty()): ?>
-          <a href="<?= $site->social_instagram() ?>" class="site-footer__social-link" target="_blank" rel="noopener noreferrer">
-            Instagram
-          </a>
-        <?php endif ?>
-
-        <?php if ($site->social_youtube()->isNotEmpty()): ?>
-          <a href="<?= $site->social_youtube() ?>" class="site-footer__social-link" target="_blank" rel="noopener noreferrer">
-            YouTube
-          </a>
-        <?php endif ?>
-      </div>
-
-      <!-- Mentions légales -->
-      <?php if ($pdf = $site->mentions_legales()->toFile()): ?>
-        <div class="site-footer__legal">
-          <a href="<?= $pdf->url() ?>" target="_blank">Mentions légales</a>
-        </div>
-      <?php endif ?>
-
-      <!-- Copyright -->
-      <div class="site-footer__copyright">
-        <p>&copy; <?= date('Y') ?> <?= $site->site_title() ?>. Tous droits réservés.</p>
-      </div>
-    </div>
-  </footer>
-
-  <!-- Scripts -->
-  <?= js('assets/js/main.js') ?>
 </body>
 </html>
diff --git a/site/snippets/header.php b/site/snippets/header.php
index 8a16298..f6b4c47 100644
--- a/site/snippets/header.php
+++ b/site/snippets/header.php
@@ -10,9 +10,6 @@
   <!-- Favicon -->
   <link rel="icon" type="image/png" href="<?= url('assets/favicon.png') ?>">
 
-  <!-- Styles -->
-  <?= css('assets/css/main.css') ?>
-
   <!-- Open Graph -->
   <meta property="og:title" content="<?= $page->meta_title()->or($page->title()) ?>">
   <meta property="og:description" content="<?= $page->meta_description()->or($site->site_description()) ?>">
@@ -21,53 +18,16 @@
   <?php if ($cover = $page->cover()->toFile()): ?>
     <meta property="og:image" content="<?= $cover->url() ?>">
   <?php endif ?>
+
+  <?php if (file_exists('assets/dist')): ?>
+    <!-- Production: Load compiled assets -->
+    <script type="module" src="<?= url('assets/dist/index.js') ?>" defer></script>
+    <link rel="stylesheet" href="<?= url('assets/dist/index.css') ?>">
+  <?php else: ?>
+    <!-- Development: Load from Vite dev server -->
+    <script type="module" src="http://localhost:5173/@vite/client" defer></script>
+    <script type="module" src="http://localhost:5173/src/main.js" defer></script>
+  <?php endif ?>
 </head>
-<body class="template-<?= $page->template() ?>">
-  <!-- Header -->
-  <header class="site-header">
-    <div class="site-header__container">
-      <!-- Logo -->
-      <a href="<?= $site->url() ?>" class="site-header__logo">
-        <?php if ($logo = $site->logo()->toFile()): ?>
-          <img src="<?= $logo->url() ?>" alt="<?= $site->site_title() ?>">
-        <?php else: ?>
-          <span class="site-header__logo-text"><?= $site->site_title() ?></span>
-        <?php endif ?>
-      </a>
-
-      <!-- Navigation -->
-      <nav class="site-header__nav">
-        <ul class="site-nav">
-          <?php foreach ($site->main_navigation()->toStructure() as $item): ?>
-            <?php $linkedPage = $item->link()->toPages()->first() ?>
-            <?php if ($linkedPage): ?>
-              <li class="site-nav__item <?= $linkedPage->isOpen() ? 'is-active' : '' ?>">
-                <a href="<?= $linkedPage->url() ?>">
-                  <?= $kirby->language()?->code() === 'en' ? $item->label_en() : $item->label_fr() ?>
-                </a>
-              </li>
-            <?php endif ?>
-          <?php endforeach ?>
-        </ul>
-      </nav>
-
-      <!-- Language Switcher -->
-      <?php if ($kirby->languages()->count() > 1): ?>
-        <div class="site-header__lang">
-          <?php foreach ($kirby->languages() as $lang): ?>
-            <a href="<?= $page->url($lang->code()) ?>"
-               class="site-lang__link <?= $lang->code() === $kirby->language()?->code() ? 'is-active' : '' ?>">
-              <?= strtoupper($lang->code()) ?>
-            </a>
-          <?php endforeach ?>
-        </div>
-      <?php endif ?>
-
-      <!-- Mobile Menu Toggle -->
-      <button class="site-header__toggle" aria-label="Menu">
-        <span></span>
-        <span></span>
-        <span></span>
-      </button>
-    </div>
-  </header>
+<body>
+  <div id="app"></div>
diff --git a/site/templates/about.json.php b/site/templates/about.json.php
new file mode 100644
index 0000000..dacd24e
--- /dev/null
+++ b/site/templates/about.json.php
@@ -0,0 +1,34 @@
+<?php
+
+$specificData = [
+  'intro' => [
+    'title' => $page->intro_title()->value(),
+    'text' => $page->intro_text()->value()
+  ],
+  'mission' => [
+    'title' => $page->mission_title()->value(),
+    'text' => $page->mission_text()->toBlocks()
+  ],
+  'manifesto' => [
+    'title' => $page->manifesto_title()->value(),
+    'text' => $page->manifesto_text()->toBlocks()
+  ],
+  'team' => [
+    'title' => $page->team_title()->value(),
+    'members' => $page->team_members()->toStructure()->map(function($member) {
+      return [
+        'name' => $member->name()->value(),
+        'role' => $member->role()->value(),
+        'bio' => $member->bio()->value(),
+        'photo' => $member->photo()->toFile()?->url(),
+        'linkedin' => $member->linkedin()->value(),
+        'twitter' => $member->twitter()->value()
+      ];
+    })->values()
+  ]
+];
+
+$pageData = array_merge($genericData, $specificData);
+
+header('Content-Type: application/json');
+echo json_encode($pageData);
diff --git a/site/templates/about.php b/site/templates/about.php
index a6f89ff..f31b64d 100644
--- a/site/templates/about.php
+++ b/site/templates/about.php
@@ -1,81 +1,2 @@
 <?php snippet('header') ?>
-
-<main class="about">
-  <!-- Intro Section -->
-  <section class="about__intro">
-    <h1 class="about__title"><?= $page->intro_title() ?></h1>
-
-    <?php if ($page->intro_text()->isNotEmpty()): ?>
-      <p class="about__subtitle"><?= $page->intro_text() ?></p>
-    <?php endif ?>
-  </section>
-
-  <!-- Mission Section -->
-  <?php if ($page->mission_text()->isNotEmpty()): ?>
-    <section class="about__mission">
-      <h2 class="about__section-title"><?= $page->mission_title() ?></h2>
-      <div class="about__section-content">
-        <?= $page->mission_text()->toBlocks() ?>
-      </div>
-    </section>
-  <?php endif ?>
-
-  <!-- Manifesto Section -->
-  <?php if ($page->manifesto_text()->isNotEmpty()): ?>
-    <section class="about__manifesto">
-      <h2 class="about__section-title"><?= $page->manifesto_title() ?></h2>
-      <div class="about__section-content">
-        <?= $page->manifesto_text()->toBlocks() ?>
-      </div>
-    </section>
-  <?php endif ?>
-
-  <!-- Team Section -->
-  <?php if ($page->team_members()->isNotEmpty()): ?>
-    <section class="about__team">
-      <h2 class="about__section-title"><?= $page->team_title() ?></h2>
-
-      <div class="about__team-grid">
-        <?php foreach ($page->team_members()->toStructure() as $member): ?>
-          <article class="team-card">
-            <?php if ($photo = $member->photo()->toFile()): ?>
-              <div class="team-card__photo">
-                <img src="<?= $photo->url() ?>" alt="<?= $member->name() ?>">
-              </div>
-            <?php endif ?>
-
-            <div class="team-card__info">
-              <h3 class="team-card__name"><?= $member->name() ?></h3>
-              <p class="team-card__role"><?= $member->role() ?></p>
-
-              <?php if ($member->bio()->isNotEmpty()): ?>
-                <p class="team-card__bio"><?= $member->bio() ?></p>
-              <?php endif ?>
-
-              <div class="team-card__social">
-                <?php if ($member->linkedin()->isNotEmpty()): ?>
-                  <a href="<?= $member->linkedin() ?>" target="_blank" class="team-card__social-link">
-                    LinkedIn
-                  </a>
-                <?php endif ?>
-
-                <?php if ($member->twitter()->isNotEmpty()): ?>
-                  <a href="<?= $member->twitter() ?>" target="_blank" class="team-card__social-link">
-                    Twitter
-                  </a>
-                <?php endif ?>
-              </div>
-            </div>
-          </article>
-        <?php endforeach ?>
-      </div>
-
-      <nav class="about__team-nav">
-        <button class="about__team-prev">&larr; Précédent</button>
-        <button class="about__team-next">Suivant &rarr;</button>
-      </nav>
-    </section>
-  <?php endif ?>
-</main>
-
 <?php snippet('footer') ?>
diff --git a/site/templates/article.json.php b/site/templates/article.json.php
new file mode 100644
index 0000000..0e4398d
--- /dev/null
+++ b/site/templates/article.json.php
@@ -0,0 +1,34 @@
+<?php
+
+$related = $page->related_articles()->toPages();
+if ($related->isEmpty()) {
+  $related = $page->siblings()->listed()->not($page)->shuffle()->limit(3);
+}
+
+$specificData = [
+  'date' => $page->date()->toDate('Y-m-d'),
+  'date_formatted' => $page->date()->toDate('d/m/Y'),
+  'intro' => $page->intro()->value(),
+  'author' => [
+    'name' => $page->author_name()->value(),
+    'role' => $page->author_role()->value(),
+    'photo' => $page->author_photo()->toFile()?->url()
+  ],
+  'cover' => $page->cover()->toFile()?->url(),
+  'content' => $page->article_content()->toBlocks(),
+  'tags' => $page->tags()->split(),
+  'related' => $related->map(function($rec) {
+    return [
+      'title' => $rec->title()->value(),
+      'url' => $rec->url(),
+      'category' => $rec->category()->value(),
+      'cover' => $rec->cover()->toFile()?->thumb(['width' => 400])->url()
+    ];
+  })->values(),
+  'parent_url' => $page->parent()->url()
+];
+
+$pageData = array_merge($genericData, $specificData);
+
+header('Content-Type: application/json');
+echo json_encode($pageData);
diff --git a/site/templates/article.php b/site/templates/article.php
index c253981..f31b64d 100644
--- a/site/templates/article.php
+++ b/site/templates/article.php
@@ -1,101 +1,2 @@
 <?php snippet('header') ?>
-
-<main class="article">
-  <article class="article__content">
-    <!-- Header -->
-    <header class="article__header">
-      <?php if ($page->date()->isNotEmpty()): ?>
-        <time class="article__date" datetime="<?= $page->date()->toDate('Y-m-d') ?>">
-          Publié le <?= $page->date()->toDate('d/m/Y') ?>
-        </time>
-      <?php endif ?>
-
-      <h1 class="article__title"><?= $page->title() ?></h1>
-
-      <?php if ($page->intro()->isNotEmpty()): ?>
-        <p class="article__intro"><?= $page->intro() ?></p>
-      <?php endif ?>
-    </header>
-
-    <!-- Author -->
-    <?php if ($page->author_name()->isNotEmpty()): ?>
-      <div class="article__author">
-        <?php if ($photo = $page->author_photo()->toFile()): ?>
-          <img src="<?= $photo->url() ?>" alt="<?= $page->author_name() ?>" class="article__author-photo">
-        <?php endif ?>
-
-        <div class="article__author-info">
-          <span class="article__author-name"><?= $page->author_name() ?></span>
-          <?php if ($page->author_role()->isNotEmpty()): ?>
-            <span class="article__author-role"><?= $page->author_role() ?></span>
-          <?php endif ?>
-        </div>
-      </div>
-    <?php endif ?>
-
-    <!-- Cover Image -->
-    <?php if ($cover = $page->cover()->toFile()): ?>
-      <figure class="article__cover">
-        <img src="<?= $cover->url() ?>" alt="<?= $page->title() ?>">
-      </figure>
-    <?php endif ?>
-
-    <!-- Content -->
-    <div class="article__body">
-      <?= $page->article_content()->toBlocks() ?>
-    </div>
-
-    <!-- Tags -->
-    <?php if ($page->tags()->isNotEmpty()): ?>
-      <div class="article__tags">
-        <?php foreach ($page->tags()->split() as $tag): ?>
-          <span class="article__tag"><?= $tag ?></span>
-        <?php endforeach ?>
-      </div>
-    <?php endif ?>
-  </article>
-
-  <!-- Recommendations -->
-  <?php
-  $related = $page->related_articles()->toPages();
-  if ($related->isEmpty()) {
-    $related = $page->siblings()->listed()->not($page)->shuffle()->limit(3);
-  }
-  ?>
-
-  <?php if ($related->isNotEmpty()): ?>
-    <section class="article__recommendations">
-      <h2 class="article__recommendations-title">Nos recommandations</h2>
-      <a href="<?= $page->parent()->url() ?>" class="article__recommendations-link">Voir tous les articles &rarr;</a>
-
-      <div class="article__recommendations-grid">
-        <?php foreach ($related as $rec): ?>
-          <article class="recommendation-card">
-            <?php if ($cover = $rec->cover()->toFile()): ?>
-              <div class="recommendation-card__cover">
-                <img src="<?= $cover->thumb(['width' => 400])->url() ?>" alt="<?= $rec->title() ?>">
-              </div>
-            <?php endif ?>
-
-            <?php if ($rec->category()->isNotEmpty()): ?>
-              <span class="recommendation-card__category"><?= $rec->category() ?></span>
-            <?php endif ?>
-
-            <h3 class="recommendation-card__title">
-              <a href="<?= $rec->url() ?>"><?= $rec->title() ?></a>
-            </h3>
-          </article>
-        <?php endforeach ?>
-      </div>
-    </section>
-  <?php endif ?>
-
-  <!-- Navigation -->
-  <nav class="article__nav">
-    <a href="<?= $page->parent()->url() ?>" class="article__nav-back">
-      &larr; Tous les articles
-    </a>
-  </nav>
-</main>
-
 <?php snippet('footer') ?>
diff --git a/site/templates/blog.json.php b/site/templates/blog.json.php
new file mode 100644
index 0000000..e34d683
--- /dev/null
+++ b/site/templates/blog.json.php
@@ -0,0 +1,26 @@
+<?php
+
+$specificData = [
+  'intro' => [
+    'title' => $page->intro_title()->value(),
+    'text' => $page->intro_text()->value()
+  ],
+  'articles' => $page->children()->listed()->sortBy('date', 'desc')->map(function($article) {
+    return [
+      'title' => $article->title()->value(),
+      'slug' => $article->slug(),
+      'url' => $article->url(),
+      'date' => $article->date()->toDate('Y-m-d'),
+      'date_formatted' => $article->date()->toDate('d/m/Y'),
+      'intro' => $article->intro()->excerpt(200),
+      'cover' => $article->cover()->toFile()?->url(),
+      'author_name' => $article->author_name()->value(),
+      'author_photo' => $article->author_photo()->toFile()?->url()
+    ];
+  })->values()
+];
+
+$pageData = array_merge($genericData, $specificData);
+
+header('Content-Type: application/json');
+echo json_encode($pageData);
diff --git a/site/templates/blog.php b/site/templates/blog.php
index 9250711..f31b64d 100644
--- a/site/templates/blog.php
+++ b/site/templates/blog.php
@@ -1,61 +1,2 @@
 <?php snippet('header') ?>
-
-<main class="blog">
-  <!-- Intro Section -->
-  <section class="blog__intro">
-    <h1 class="blog__title"><?= $page->intro_title() ?></h1>
-
-    <?php if ($page->intro_text()->isNotEmpty()): ?>
-      <p class="blog__subtitle"><?= $page->intro_text() ?></p>
-    <?php endif ?>
-  </section>
-
-  <!-- Articles List -->
-  <section class="blog__articles">
-    <?php foreach ($page->children()->listed()->sortBy('date', 'desc') as $article): ?>
-      <article class="article-card">
-        <!-- Date -->
-        <?php if ($article->date()->isNotEmpty()): ?>
-          <time class="article-card__date" datetime="<?= $article->date()->toDate('Y-m-d') ?>">
-            <?= $article->date()->toDate('d/m/Y') ?>
-          </time>
-        <?php endif ?>
-
-        <!-- Content -->
-        <div class="article-card__content">
-          <h2 class="article-card__title">
-            <a href="<?= $article->url() ?>"><?= $article->title() ?></a>
-          </h2>
-
-          <?php if ($article->intro()->isNotEmpty()): ?>
-            <p class="article-card__intro"><?= $article->intro()->excerpt(200) ?></p>
-          <?php endif ?>
-
-          <a href="<?= $article->url() ?>" class="article-card__link">
-            Lire la suite &rarr;
-          </a>
-        </div>
-
-        <!-- Author -->
-        <div class="article-card__author">
-          <?php if ($photo = $article->author_photo()->toFile()): ?>
-            <img src="<?= $photo->url() ?>" alt="<?= $article->author_name() ?>" class="article-card__author-photo">
-          <?php endif ?>
-
-          <?php if ($article->author_name()->isNotEmpty()): ?>
-            <span class="article-card__author-name"><?= $article->author_name() ?></span>
-          <?php endif ?>
-        </div>
-
-        <!-- Cover Image -->
-        <?php if ($cover = $article->cover()->toFile()): ?>
-          <div class="article-card__cover">
-            <img src="<?= $cover->url() ?>" alt="<?= $article->title() ?>">
-          </div>
-        <?php endif ?>
-      </article>
-    <?php endforeach ?>
-  </section>
-</main>
-
 <?php snippet('footer') ?>
diff --git a/site/templates/default.json.php b/site/templates/default.json.php
new file mode 100644
index 0000000..c910894
--- /dev/null
+++ b/site/templates/default.json.php
@@ -0,0 +1,10 @@
+<?php
+
+$specificData = [
+  'body' => $page->body()->toBlocks()
+];
+
+$pageData = array_merge($genericData, $specificData);
+
+header('Content-Type: application/json');
+echo json_encode($pageData);
diff --git a/site/templates/default.php b/site/templates/default.php
index 74e38ae..f31b64d 100644
--- a/site/templates/default.php
+++ b/site/templates/default.php
@@ -1 +1,2 @@
-<h1><?= $page->title() ?></h1>
+<?php snippet('header') ?>
+<?php snippet('footer') ?>
diff --git a/site/templates/expertise.json.php b/site/templates/expertise.json.php
new file mode 100644
index 0000000..18cafcb
--- /dev/null
+++ b/site/templates/expertise.json.php
@@ -0,0 +1,24 @@
+<?php
+
+$specificData = [
+  'intro' => [
+    'title' => $page->intro_title()->value(),
+    'text' => $page->intro_text()->value()
+  ],
+  'sections' => $page->expertise_sections()->toStructure()->map(function($section) {
+    return [
+      'title' => $section->title()->value(),
+      'icon' => $section->icon()->value(),
+      'content' => $section->content()->toBlocks()
+    ];
+  })->values(),
+  'objective' => [
+    'title' => $page->objective_title()->value(),
+    'text' => $page->objective_text()->value()
+  ]
+];
+
+$pageData = array_merge($genericData, $specificData);
+
+header('Content-Type: application/json');
+echo json_encode($pageData);
diff --git a/site/templates/expertise.php b/site/templates/expertise.php
index df8392e..f31b64d 100644
--- a/site/templates/expertise.php
+++ b/site/templates/expertise.php
@@ -1,36 +1,2 @@
 <?php snippet('header') ?>
-
-<main class="expertise">
-  <!-- Intro Section -->
-  <section class="expertise__intro">
-    <h1 class="expertise__title"><?= $page->intro_title() ?></h1>
-
-    <?php if ($page->intro_text()->isNotEmpty()): ?>
-      <p class="expertise__text"><?= $page->intro_text() ?></p>
-    <?php endif ?>
-  </section>
-
-  <!-- Expertise Sections -->
-  <?php if ($page->expertise_sections()->isNotEmpty()): ?>
-    <div class="expertise__sections">
-      <?php foreach ($page->expertise_sections()->toStructure() as $section): ?>
-        <section class="expertise-section expertise-section--<?= $section->icon() ?>">
-          <h2 class="expertise-section__title"><?= $section->title() ?></h2>
-          <div class="expertise-section__content">
-            <?= $section->content()->toBlocks() ?>
-          </div>
-        </section>
-      <?php endforeach ?>
-    </div>
-  <?php endif ?>
-
-  <!-- Objective Section -->
-  <?php if ($page->objective_text()->isNotEmpty()): ?>
-    <section class="expertise__objective">
-      <h2 class="expertise__objective-title"><?= $page->objective_title() ?></h2>
-      <p class="expertise__objective-text"><?= $page->objective_text() ?></p>
-    </section>
-  <?php endif ?>
-</main>
-
 <?php snippet('footer') ?>
diff --git a/site/templates/game.json.php b/site/templates/game.json.php
new file mode 100644
index 0000000..09041da
--- /dev/null
+++ b/site/templates/game.json.php
@@ -0,0 +1,16 @@
+<?php
+
+$specificData = [
+  'description' => $page->description()->value(),
+  'rules' => $page->rules()->toBlocks(),
+  'game_status' => $page->game_status()->value(),
+  'is_embedded' => $page->is_embedded()->toBool(),
+  'play_link' => $page->play_link()->value(),
+  'cover' => $page->cover()->toFile()?->url(),
+  'parent_url' => $page->parent()->url()
+];
+
+$pageData = array_merge($genericData, $specificData);
+
+header('Content-Type: application/json');
+echo json_encode($pageData);
diff --git a/site/templates/game.php b/site/templates/game.php
index 3249014..f31b64d 100644
--- a/site/templates/game.php
+++ b/site/templates/game.php
@@ -1,58 +1,2 @@
 <?php snippet('header') ?>
-
-<main class="game">
-  <article class="game__content">
-    <!-- Info -->
-    <div class="game__info">
-      <h1 class="game__title"><?= $page->title() ?></h1>
-
-      <?php if ($page->description()->isNotEmpty()): ?>
-        <p class="game__description"><?= $page->description() ?></p>
-      <?php endif ?>
-
-      <!-- Rules -->
-      <?php if ($page->rules()->isNotEmpty()): ?>
-        <div class="game__rules">
-          <?= $page->rules()->toBlocks() ?>
-        </div>
-      <?php endif ?>
-
-      <!-- Status Button -->
-      <?php if ($page->game_status()->value() !== 'available'): ?>
-        <div class="game__status">
-          <span class="btn btn--disabled">
-            <?= $page->game_status()->value() === 'coming_soon' ? 'Bientôt disponible' : 'En maintenance' ?>
-          </span>
-        </div>
-      <?php endif ?>
-    </div>
-
-    <!-- Game Area -->
-    <div class="game__area">
-      <?php if ($page->game_status()->value() === 'available'): ?>
-        <?php if ($page->is_embedded()->toBool() && $page->play_link()->isNotEmpty()): ?>
-          <iframe src="<?= $page->play_link() ?>" class="game__iframe" frameborder="0"></iframe>
-        <?php elseif ($page->play_link()->isNotEmpty()): ?>
-          <a href="<?= $page->play_link() ?>" class="game__external-link btn btn--large" target="_blank">
-            Jouer maintenant
-          </a>
-        <?php endif ?>
-
-        <?php if ($cover = $page->cover()->toFile()): ?>
-          <div class="game__cover">
-            <img src="<?= $cover->url() ?>" alt="<?= $page->title() ?>">
-          </div>
-        <?php endif ?>
-      <?php endif ?>
-    </div>
-  </article>
-
-  <!-- Back Navigation -->
-  <nav class="game__nav">
-    <a href="<?= $page->parent()->url() ?>" class="game__nav-back">
-      &larr; Retour aux jeux
-    </a>
-  </nav>
-</main>
-
 <?php snippet('footer') ?>
diff --git a/site/templates/home.json.php b/site/templates/home.json.php
new file mode 100644
index 0000000..94c9c2f
--- /dev/null
+++ b/site/templates/home.json.php
@@ -0,0 +1,24 @@
+<?php
+
+$specificData = [
+  'hero' => [
+    'title' => $page->hero_title()->value(),
+    'title_highlight' => $page->hero_title_highlight()->value(),
+    'subtitle' => $page->hero_subtitle()->value(),
+    'cta_text' => $page->hero_cta_text()->value(),
+    'cta_link' => $page->hero_cta_link()->toPage()?->url() ?? '#',
+    'image' => $page->hero_image()->toFile()?->url()
+  ],
+  'background_video' => $page->background_video()->toFile()?->url(),
+  'floating_bubbles' => $page->floating_bubbles()->toStructure()->map(function($bubble) {
+    return [
+      'text' => $bubble->text()->value(),
+      'position' => $bubble->position()->value()
+    ];
+  })->values()
+];
+
+$pageData = array_merge($genericData, $specificData);
+
+header('Content-Type: application/json');
+echo json_encode($pageData);
diff --git a/site/templates/home.php b/site/templates/home.php
index 8594f41..f31b64d 100644
--- a/site/templates/home.php
+++ b/site/templates/home.php
@@ -1,49 +1,2 @@
 <?php snippet('header') ?>
-
-<main class="home">
-  <!-- Hero Section -->
-  <section class="hero">
-    <div class="hero__content">
-      <h1 class="hero__title">
-        <?php
-        $title = $page->hero_title()->value();
-        $highlight = $page->hero_title_highlight()->value();
-        if ($highlight) {
-          echo str_replace($highlight, '<span class="highlight">' . $highlight . '</span>', $title);
-        } else {
-          echo $title;
-        }
-        ?>
-      </h1>
-
-      <?php if ($page->hero_subtitle()->isNotEmpty()): ?>
-        <p class="hero__subtitle"><?= $page->hero_subtitle() ?></p>
-      <?php endif ?>
-
-      <?php if ($page->hero_cta_text()->isNotEmpty()): ?>
-        <a href="<?= $page->hero_cta_link()->toPage()?->url() ?? '#' ?>" class="hero__cta btn">
-          <?= $page->hero_cta_text() ?>
-        </a>
-      <?php endif ?>
-    </div>
-
-    <?php if ($hero = $page->hero_image()->toFile()): ?>
-      <div class="hero__image">
-        <img src="<?= $hero->url() ?>" alt="<?= $page->hero_title() ?>">
-      </div>
-    <?php endif ?>
-
-    <!-- Floating Bubbles -->
-    <?php if ($page->floating_bubbles()->isNotEmpty()): ?>
-      <div class="hero__bubbles">
-        <?php foreach ($page->floating_bubbles()->toStructure() as $bubble): ?>
-          <div class="bubble bubble--<?= $bubble->position() ?>">
-            <?= $bubble->text() ?>
-          </div>
-        <?php endforeach ?>
-      </div>
-    <?php endif ?>
-  </section>
-</main>
-
 <?php snippet('footer') ?>
diff --git a/site/templates/jouer.json.php b/site/templates/jouer.json.php
new file mode 100644
index 0000000..638abd6
--- /dev/null
+++ b/site/templates/jouer.json.php
@@ -0,0 +1,33 @@
+<?php
+
+$specificData = [
+  'intro' => [
+    'title' => $page->intro_title()->value(),
+    'text' => $page->intro_text()->value()
+  ],
+  'games' => $page->children()->listed()->map(function($game) {
+    $badgeValue = $game->badge()->value();
+    $badgeLabel = 'none';
+    if ($badgeValue === 'new') {
+      $badgeLabel = 'NEW';
+    } elseif ($badgeValue === 'coming_soon') {
+      $badgeLabel = 'INCOMING';
+    }
+
+    return [
+      'title' => $game->title()->value(),
+      'slug' => $game->slug(),
+      'url' => $game->url(),
+      'description' => $game->description()->value(),
+      'cover' => $game->cover()->toFile()?->url(),
+      'badge' => $badgeValue,
+      'badge_label' => $badgeLabel,
+      'game_status' => $game->game_status()->value()
+    ];
+  })->values()
+];
+
+$pageData = array_merge($genericData, $specificData);
+
+header('Content-Type: application/json');
+echo json_encode($pageData);
diff --git a/site/templates/jouer.php b/site/templates/jouer.php
index be348fe..f31b64d 100644
--- a/site/templates/jouer.php
+++ b/site/templates/jouer.php
@@ -1,57 +1,2 @@
 <?php snippet('header') ?>
-
-<main class="jouer">
-  <!-- Intro Section -->
-  <section class="jouer__intro">
-    <?php if ($page->intro_title()->isNotEmpty()): ?>
-      <h1 class="jouer__title"><?= $page->intro_title() ?></h1>
-    <?php endif ?>
-
-    <?php if ($page->intro_text()->isNotEmpty()): ?>
-      <p class="jouer__text"><?= $page->intro_text() ?></p>
-    <?php endif ?>
-  </section>
-
-  <!-- Games List -->
-  <section class="jouer__games">
-    <?php foreach ($page->children()->listed() as $game): ?>
-      <article class="game-card">
-        <!-- Badge -->
-        <?php if ($game->badge()->isNotEmpty() && $game->badge()->value() !== 'none'): ?>
-          <span class="game-card__badge game-card__badge--<?= $game->badge() ?>">
-            <?= $game->badge()->value() === 'new' ? 'NEW' : ($game->badge()->value() === 'coming_soon' ? 'INCOMING' : $game->badge()) ?>
-          </span>
-        <?php endif ?>
-
-        <!-- Cover -->
-        <?php if ($cover = $game->cover()->toFile()): ?>
-          <div class="game-card__cover">
-            <img src="<?= $cover->url() ?>" alt="<?= $game->title() ?>">
-          </div>
-        <?php endif ?>
-
-        <!-- Info -->
-        <div class="game-card__info">
-          <h2 class="game-card__title"><?= $game->title() ?></h2>
-
-          <?php if ($game->description()->isNotEmpty()): ?>
-            <p class="game-card__description"><?= $game->description() ?></p>
-          <?php endif ?>
-
-          <!-- Play Button -->
-          <?php if ($game->game_status()->value() === 'available'): ?>
-            <a href="<?= $game->url() ?>" class="game-card__play btn">
-              Jouer
-            </a>
-          <?php else: ?>
-            <span class="game-card__status btn btn--disabled">
-              Bientôt disponible
-            </span>
-          <?php endif ?>
-        </div>
-      </article>
-    <?php endforeach ?>
-  </section>
-</main>
-
 <?php snippet('footer') ?>
diff --git a/site/templates/portfolio.json.php b/site/templates/portfolio.json.php
new file mode 100644
index 0000000..7838aca
--- /dev/null
+++ b/site/templates/portfolio.json.php
@@ -0,0 +1,32 @@
+<?php
+
+$specificData = [
+  'intro' => [
+    'title' => $page->intro_title()->value(),
+    'text' => $page->intro_text()->value()
+  ],
+  'projects' => $page->children()->listed()->map(function($project) {
+    return [
+      'title' => $project->title()->value(),
+      'slug' => $project->slug(),
+      'url' => $project->url(),
+      'tagline' => $project->tagline()->value(),
+      'description' => $project->description()->value(),
+      'cover' => $project->cover()->toFile()?->url(),
+      'cover_thumb' => $project->cover()->toFile()?->thumb(['width' => 100])->url(),
+      'gallery' => $project->files()->filterBy('template', 'image')->limit(5)->map(function($img) {
+        return $img->url();
+      })->values(),
+      'impact' => $project->impact()->split(','),
+      'category' => $project->category()->value(),
+      'platforms' => $project->platforms()->split(','),
+      'apple_link' => $project->apple_link()->value(),
+      'android_link' => $project->android_link()->value()
+    ];
+  })->values()
+];
+
+$pageData = array_merge($genericData, $specificData);
+
+header('Content-Type: application/json');
+echo json_encode($pageData);
diff --git a/site/templates/portfolio.php b/site/templates/portfolio.php
index 41ea880..f31b64d 100644
--- a/site/templates/portfolio.php
+++ b/site/templates/portfolio.php
@@ -1,109 +1,2 @@
 <?php snippet('header') ?>
-
-<main class="portfolio">
-  <!-- Intro Section -->
-  <section class="portfolio__intro">
-    <?php if ($page->intro_title()->isNotEmpty()): ?>
-      <h1 class="portfolio__title"><?= $page->intro_title() ?></h1>
-    <?php endif ?>
-
-    <?php if ($page->intro_text()->isNotEmpty()): ?>
-      <p class="portfolio__text"><?= $page->intro_text() ?></p>
-    <?php endif ?>
-  </section>
-
-  <!-- Projects Grid -->
-  <section class="portfolio__projects">
-    <?php
-    $projects = $page->children()->listed();
-    $total = $projects->count();
-    $index = 0;
-    ?>
-
-    <?php foreach ($projects as $project): ?>
-      <?php $index++ ?>
-      <article class="project-card" data-index="<?= $index ?>">
-        <!-- Project Gallery -->
-        <div class="project-card__gallery">
-          <?php if ($cover = $project->cover()->toFile()): ?>
-            <img src="<?= $cover->url() ?>" alt="<?= $project->title() ?>" class="project-card__cover">
-          <?php endif ?>
-
-          <?php foreach ($project->files()->filterBy('template', 'image')->limit(5) as $image): ?>
-            <img src="<?= $image->url() ?>" alt="" class="project-card__image">
-          <?php endforeach ?>
-        </div>
-
-        <!-- Project Info -->
-        <div class="project-card__info">
-          <h2 class="project-card__title"><?= $project->title() ?></h2>
-
-          <?php if ($project->tagline()->isNotEmpty()): ?>
-            <p class="project-card__tagline"><?= $project->tagline() ?></p>
-          <?php endif ?>
-
-          <?php if ($project->description()->isNotEmpty()): ?>
-            <p class="project-card__description"><?= $project->description() ?></p>
-          <?php endif ?>
-
-          <!-- Meta -->
-          <div class="project-card__meta">
-            <?php if ($project->impact()->isNotEmpty()): ?>
-              <div class="project-card__impact">
-                <span class="label">Impact:</span>
-                <?= $project->impact()->join(', ') ?>
-              </div>
-            <?php endif ?>
-
-            <?php if ($project->category()->isNotEmpty()): ?>
-              <div class="project-card__category">
-                <span class="label">Catégorie:</span>
-                <?= $project->category()->value() ?>
-              </div>
-            <?php endif ?>
-
-            <?php if ($project->platforms()->isNotEmpty()): ?>
-              <div class="project-card__platforms">
-                <span class="label">Plateformes:</span>
-                <?= $project->platforms()->join(' / ') ?>
-              </div>
-            <?php endif ?>
-          </div>
-
-          <!-- Links -->
-          <div class="project-card__links">
-            <?php if ($project->apple_link()->isNotEmpty()): ?>
-              <a href="<?= $project->apple_link() ?>" class="btn btn--apple" target="_blank">
-                Apple
-              </a>
-            <?php endif ?>
-
-            <?php if ($project->android_link()->isNotEmpty()): ?>
-              <a href="<?= $project->android_link() ?>" class="btn btn--android" target="_blank">
-                Android
-              </a>
-            <?php endif ?>
-          </div>
-        </div>
-
-        <!-- Counter -->
-        <div class="project-card__counter">
-          <?= str_pad($index, 2, '0', STR_PAD_LEFT) ?>/<?= str_pad($total, 2, '0', STR_PAD_LEFT) ?>
-        </div>
-      </article>
-    <?php endforeach ?>
-  </section>
-
-  <!-- Thumbnails Navigation -->
-  <nav class="portfolio__thumbnails">
-    <?php foreach ($projects as $project): ?>
-      <a href="#<?= $project->slug() ?>" class="portfolio__thumbnail">
-        <?php if ($cover = $project->cover()->toFile()): ?>
-          <img src="<?= $cover->thumb(['width' => 100])->url() ?>" alt="<?= $project->title() ?>">
-        <?php endif ?>
-      </a>
-    <?php endforeach ?>
-  </nav>
-</main>
-
 <?php snippet('footer') ?>
diff --git a/site/templates/project.json.php b/site/templates/project.json.php
new file mode 100644
index 0000000..6c9aecf
--- /dev/null
+++ b/site/templates/project.json.php
@@ -0,0 +1,31 @@
+<?php
+
+$specificData = [
+  'tagline' => $page->tagline()->value(),
+  'description' => $page->description()->kt(),
+  'cover' => $page->cover()->toFile()?->url(),
+  'gallery' => $page->files()->filterBy('template', 'image')->map(function($img) {
+    return $img->url();
+  })->values(),
+  'impact' => $page->impact()->split(','),
+  'category' => $page->category()->value(),
+  'platforms' => $page->platforms()->split(','),
+  'client_name' => $page->client_name()->value(),
+  'apple_link' => $page->apple_link()->value(),
+  'android_link' => $page->android_link()->value(),
+  'web_link' => $page->web_link()->value(),
+  'prev' => $page->prev() ? [
+    'title' => $page->prev()->title()->value(),
+    'url' => $page->prev()->url()
+  ] : null,
+  'next' => $page->next() ? [
+    'title' => $page->next()->title()->value(),
+    'url' => $page->next()->url()
+  ] : null,
+  'parent_url' => $page->parent()->url()
+];
+
+$pageData = array_merge($genericData, $specificData);
+
+header('Content-Type: application/json');
+echo json_encode($pageData);
diff --git a/site/templates/project.php b/site/templates/project.php
index 6340277..f31b64d 100644
--- a/site/templates/project.php
+++ b/site/templates/project.php
@@ -1,104 +1,2 @@
 <?php snippet('header') ?>
-
-<main class="project">
-  <article class="project__content">
-    <!-- Gallery -->
-    <div class="project__gallery">
-      <?php if ($cover = $page->cover()->toFile()): ?>
-        <img src="<?= $cover->url() ?>" alt="<?= $page->title() ?>" class="project__cover">
-      <?php endif ?>
-
-      <?php foreach ($page->files()->filterBy('template', 'image') as $image): ?>
-        <img src="<?= $image->url() ?>" alt="" class="project__image">
-      <?php endforeach ?>
-    </div>
-
-    <!-- Info -->
-    <div class="project__info">
-      <h1 class="project__title"><?= $page->title() ?></h1>
-
-      <?php if ($page->tagline()->isNotEmpty()): ?>
-        <p class="project__tagline"><?= $page->tagline() ?></p>
-      <?php endif ?>
-
-      <?php if ($page->description()->isNotEmpty()): ?>
-        <div class="project__description">
-          <?= $page->description()->kt() ?>
-        </div>
-      <?php endif ?>
-
-      <!-- Meta -->
-      <div class="project__meta">
-        <?php if ($page->impact()->isNotEmpty()): ?>
-          <div class="project__impact">
-            <span class="label">Impact:</span>
-            <?= $page->impact()->join(', ') ?>
-          </div>
-        <?php endif ?>
-
-        <?php if ($page->category()->isNotEmpty()): ?>
-          <div class="project__category">
-            <span class="label">Catégorie:</span>
-            <?= $page->category()->value() ?>
-          </div>
-        <?php endif ?>
-
-        <?php if ($page->platforms()->isNotEmpty()): ?>
-          <div class="project__platforms">
-            <span class="label">Plateformes:</span>
-            <?= $page->platforms()->join(' / ') ?>
-          </div>
-        <?php endif ?>
-
-        <?php if ($page->client_name()->isNotEmpty()): ?>
-          <div class="project__client">
-            <span class="label">Client:</span>
-            <?= $page->client_name() ?>
-          </div>
-        <?php endif ?>
-      </div>
-
-      <!-- Links -->
-      <div class="project__links">
-        <?php if ($page->apple_link()->isNotEmpty()): ?>
-          <a href="<?= $page->apple_link() ?>" class="btn btn--apple" target="_blank">
-            App Store
-          </a>
-        <?php endif ?>
-
-        <?php if ($page->android_link()->isNotEmpty()): ?>
-          <a href="<?= $page->android_link() ?>" class="btn btn--android" target="_blank">
-            Play Store
-          </a>
-        <?php endif ?>
-
-        <?php if ($page->web_link()->isNotEmpty()): ?>
-          <a href="<?= $page->web_link() ?>" class="btn btn--web" target="_blank">
-            Voir le site
-          </a>
-        <?php endif ?>
-      </div>
-    </div>
-  </article>
-
-  <!-- Navigation -->
-  <nav class="project__nav">
-    <?php if ($prev = $page->prev()): ?>
-      <a href="<?= $prev->url() ?>" class="project__nav-prev">
-        &larr; <?= $prev->title() ?>
-      </a>
-    <?php endif ?>
-
-    <a href="<?= $page->parent()->url() ?>" class="project__nav-back">
-      Tous les projets
-    </a>
-
-    <?php if ($next = $page->next()): ?>
-      <a href="<?= $next->url() ?>" class="project__nav-next">
-        <?= $next->title() ?> &rarr;
-      </a>
-    <?php endif ?>
-  </nav>
-</main>
-
 <?php snippet('footer') ?>
diff --git a/src/App.svelte b/src/App.svelte
new file mode 100644
index 0000000..11dc178
--- /dev/null
+++ b/src/App.svelte
@@ -0,0 +1,83 @@
+<script>
+  import { pageStore } from '@stores/page'
+
+  import Header from '@components/layout/Header.svelte'
+  import Footer from '@components/layout/Footer.svelte'
+  import Cursor from '@components/layout/Cursor.svelte'
+
+  import Home from '@views/Home.svelte'
+  import About from '@views/About.svelte'
+  import Expertise from '@views/Expertise.svelte'
+  import Portfolio from '@views/Portfolio.svelte'
+  import Project from '@views/Project.svelte'
+  import Jouer from '@views/Jouer.svelte'
+  import Game from '@views/Game.svelte'
+  import Blog from '@views/Blog.svelte'
+  import Article from '@views/Article.svelte'
+  import Default from '@views/Default.svelte'
+
+  const templates = {
+    'home': Home,
+    'about': About,
+    'expertise': Expertise,
+    'portfolio': Portfolio,
+    'project': Project,
+    'jouer': Jouer,
+    'game': Game,
+    'blog': Blog,
+    'article': Article,
+    'default': Default
+  }
+
+  $: template = $pageStore.template || 'default'
+  $: component = templates[template] || Default
+  $: data = $pageStore.data
+</script>
+
+<div class="app">
+  <Cursor />
+  <Header />
+
+  <main class="main">
+    {#if data}
+      <svelte:component this={component} {data} />
+    {/if}
+  </main>
+
+  <Footer />
+</div>
+
+<style>
+  :global(*) {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  :global(body) {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    background: #000;
+    color: #fff;
+    overflow-x: hidden;
+  }
+
+  .app {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .main {
+    flex: 1;
+  }
+
+  :global(a) {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  :global(img) {
+    max-width: 100%;
+    height: auto;
+  }
+</style>
diff --git a/src/components/layout/Cursor.svelte b/src/components/layout/Cursor.svelte
new file mode 100644
index 0000000..22a088c
--- /dev/null
+++ b/src/components/layout/Cursor.svelte
@@ -0,0 +1,68 @@
+<script>
+  import { onMount } from 'svelte'
+
+  let cursorX = 0
+  let cursorY = 0
+  let outlineX = 0
+  let outlineY = 0
+  let rafId
+
+  onMount(() => {
+    const handleMouseMove = (e) => {
+      cursorX = e.clientX
+      cursorY = e.clientY
+    }
+
+    const animate = () => {
+      outlineX += (cursorX - outlineX) * 0.2
+      outlineY += (cursorY - outlineY) * 0.2
+      rafId = requestAnimationFrame(animate)
+    }
+
+    window.addEventListener('mousemove', handleMouseMove)
+    animate()
+
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove)
+      if (rafId) cancelAnimationFrame(rafId)
+    }
+  })
+</script>
+
+<div class="cursor" style="transform: translate({cursorX}px, {cursorY}px)"></div>
+<div class="cursor-outline" style="transform: translate({outlineX}px, {outlineY}px)"></div>
+
+<style>
+  .cursor,
+  .cursor-outline {
+    position: fixed;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    z-index: 9999;
+  }
+
+  .cursor {
+    width: 8px;
+    height: 8px;
+    background: #04fea0;
+    border-radius: 50%;
+    transform-origin: center;
+  }
+
+  .cursor-outline {
+    width: 40px;
+    height: 40px;
+    border: 2px solid #04fea0;
+    border-radius: 50%;
+    transform-origin: center;
+    margin: -16px 0 0 -16px;
+  }
+
+  @media (max-width: 768px) {
+    .cursor,
+    .cursor-outline {
+      display: none;
+    }
+  }
+</style>
diff --git a/src/components/layout/Footer.svelte b/src/components/layout/Footer.svelte
new file mode 100644
index 0000000..3e6cb3c
--- /dev/null
+++ b/src/components/layout/Footer.svelte
@@ -0,0 +1,73 @@
+<script>
+  import { siteStore } from '@stores/site'
+
+  $: siteTitle = $siteStore.title || 'World Game'
+  $: currentYear = new Date().getFullYear()
+</script>
+
+<footer class="footer">
+  <div class="footer__container">
+    <div class="footer__brand">
+      <p class="footer__title">{siteTitle}</p>
+      <p class="footer__tagline">Play to Engage</p>
+    </div>
+
+    <div class="footer__copyright">
+      <p>&copy; {currentYear} {siteTitle}. Tous droits réservés.</p>
+    </div>
+  </div>
+</footer>
+
+<style>
+  .footer {
+    background: #000;
+    color: #fff;
+    padding: 3rem 2rem 2rem;
+    margin-top: auto;
+  }
+
+  .footer__container {
+    max-width: 1400px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 2rem;
+  }
+
+  .footer__brand {
+    flex: 1;
+  }
+
+  .footer__title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin: 0 0 0.5rem;
+  }
+
+  .footer__tagline {
+    color: #04fea0;
+    margin: 0;
+    font-size: 0.9rem;
+  }
+
+  .footer__copyright {
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
+  .footer__copyright p {
+    margin: 0;
+  }
+
+  @media (max-width: 768px) {
+    .footer__container {
+      flex-direction: column;
+      text-align: center;
+    }
+
+    .footer__copyright {
+      order: 2;
+    }
+  }
+</style>
diff --git a/src/components/layout/Header.svelte b/src/components/layout/Header.svelte
new file mode 100644
index 0000000..ab2074e
--- /dev/null
+++ b/src/components/layout/Header.svelte
@@ -0,0 +1,245 @@
+<script>
+  import { navigationStore } from '@stores/navigation'
+  import { localeStore } from '@stores/locale'
+  import { siteStore } from '@stores/site'
+  import { navigateTo } from '@lib/router'
+
+  $: isMenuOpen = $navigationStore.isMenuOpen
+  $: currentLang = $localeStore.current
+  $: site = $siteStore
+  $: logo = site.logo
+  $: siteTitle = site.title
+  $: navigation = site.navigation || []
+  $: languages = site.languages || []
+
+  function handleNav(path) {
+    navigateTo(path)
+    navigationStore.closeMenu()
+  }
+
+  function handleLanguageChange(langCode) {
+    // In a full implementation, this would switch to the translated URL
+    localeStore.setLanguage(langCode)
+  }
+</script>
+
+<header class="header" class:menu-open={isMenuOpen}>
+  <div class="header__container">
+    <!-- Logo -->
+    <a href="/" on:click|preventDefault={() => handleNav('/')} class="header__logo">
+      {#if logo}
+        <img src={logo} alt={siteTitle} />
+      {:else}
+        <span class="header__logo-text">{siteTitle}</span>
+      {/if}
+    </a>
+
+    <!-- Navigation -->
+    <nav class="header__nav" class:open={isMenuOpen}>
+      <ul class="header__nav-list">
+        {#each navigation as item}
+          {#if item.url}
+            <li class="header__nav-item" class:active={item.isActive}>
+              <a
+                href={item.url}
+                on:click|preventDefault={() => handleNav(item.url)}
+              >
+                {currentLang === 'en' ? item.label_en : item.label_fr}
+              </a>
+            </li>
+          {/if}
+        {/each}
+      </ul>
+    </nav>
+
+    <!-- Language Switcher -->
+    {#if languages.length > 1}
+      <div class="header__lang">
+        {#each languages as lang}
+          <button
+            class="header__lang-btn"
+            class:active={lang.code === currentLang}
+            on:click={() => handleLanguageChange(lang.code)}
+          >
+            {lang.code.toUpperCase()}
+          </button>
+        {/each}
+      </div>
+    {/if}
+
+    <!-- Mobile Menu Toggle -->
+    <button
+      class="header__toggle"
+      on:click={() => navigationStore.toggleMenu()}
+      aria-label="Menu"
+    >
+      <span></span>
+      <span></span>
+      <span></span>
+    </button>
+  </div>
+</header>
+
+<style>
+  .header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    background: rgba(0, 0, 0, 0.9);
+    backdrop-filter: blur(10px);
+  }
+
+  .header__container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 1.5rem 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 2rem;
+  }
+
+  .header__logo {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    z-index: 1001;
+  }
+
+  .header__logo img {
+    height: 40px;
+    width: auto;
+  }
+
+  .header__logo-text {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #fff;
+  }
+
+  .header__nav {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+  }
+
+  .header__nav-list {
+    display: flex;
+    gap: 2rem;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .header__nav-item a {
+    color: #fff;
+    text-decoration: none;
+    font-weight: 500;
+    text-transform: uppercase;
+    font-size: 0.9rem;
+    letter-spacing: 0.05em;
+    transition: color 0.3s;
+  }
+
+  .header__nav-item a:hover,
+  .header__nav-item.active a {
+    color: #04fea0;
+  }
+
+  .header__lang {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .header__lang-btn {
+    background: none;
+    border: 1px solid #fff;
+    color: #fff;
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+    font-size: 0.8rem;
+    font-weight: 600;
+    transition: all 0.3s;
+  }
+
+  .header__lang-btn:hover,
+  .header__lang-btn.active {
+    background: #04fea0;
+    border-color: #04fea0;
+    color: #000;
+  }
+
+  .header__toggle {
+    display: none;
+    flex-direction: column;
+    gap: 4px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0.5rem;
+    z-index: 1001;
+  }
+
+  .header__toggle span {
+    width: 25px;
+    height: 2px;
+    background: #fff;
+    transition: all 0.3s;
+  }
+
+  @media (max-width: 768px) {
+    .header__container {
+      padding: 1rem;
+    }
+
+    .header__toggle {
+      display: flex;
+    }
+
+    .header__nav {
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      max-width: 300px;
+      background: rgba(0, 0, 0, 0.98);
+      transform: translateX(100%);
+      transition: transform 0.3s;
+      padding: 5rem 2rem 2rem;
+    }
+
+    .header__nav.open {
+      transform: translateX(0);
+    }
+
+    .header__nav-list {
+      flex-direction: column;
+      gap: 1.5rem;
+    }
+
+    .header__nav-item a {
+      font-size: 1.2rem;
+    }
+
+    .header__lang {
+      position: fixed;
+      bottom: 2rem;
+      right: 2rem;
+    }
+
+    .menu-open .header__toggle span:nth-child(1) {
+      transform: rotate(45deg) translate(5px, 5px);
+    }
+
+    .menu-open .header__toggle span:nth-child(2) {
+      opacity: 0;
+    }
+
+    .menu-open .header__toggle span:nth-child(3) {
+      transform: rotate(-45deg) translate(7px, -6px);
+    }
+  }
+</style>
diff --git a/src/components/ui/Button.svelte b/src/components/ui/Button.svelte
new file mode 100644
index 0000000..e598ed5
--- /dev/null
+++ b/src/components/ui/Button.svelte
@@ -0,0 +1,98 @@
+<script>
+  export let variant = 'primary' // primary, secondary, outline
+  export let size = 'medium' // small, medium, large
+  export let disabled = false
+  export let href = null
+</script>
+
+{#if href}
+  <a
+    {href}
+    class="btn btn--{variant} btn--{size}"
+    class:disabled
+    on:click
+  >
+    <slot />
+  </a>
+{:else}
+  <button
+    class="btn btn--{variant} btn--{size}"
+    {disabled}
+    on:click
+  >
+    <slot />
+  </button>
+{/if}
+
+<style>
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.75rem 2rem;
+    font-weight: 600;
+    text-decoration: none;
+    border: 2px solid transparent;
+    cursor: pointer;
+    transition: all 0.3s;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-size: 0.9rem;
+  }
+
+  .btn--primary {
+    background: #04fea0;
+    color: #000;
+    border-color: #04fea0;
+  }
+
+  .btn--primary:hover {
+    background: #03d98c;
+    border-color: #03d98c;
+  }
+
+  .btn--secondary {
+    background: #000;
+    color: #04fea0;
+    border-color: #04fea0;
+  }
+
+  .btn--secondary:hover {
+    background: #04fea0;
+    color: #000;
+  }
+
+  .btn--outline {
+    background: transparent;
+    color: #fff;
+    border-color: #fff;
+  }
+
+  .btn--outline:hover {
+    background: #fff;
+    color: #000;
+  }
+
+  .btn--small {
+    padding: 0.5rem 1.5rem;
+    font-size: 0.8rem;
+  }
+
+  .btn--medium {
+    padding: 0.75rem 2rem;
+    font-size: 0.9rem;
+  }
+
+  .btn--large {
+    padding: 1rem 2.5rem;
+    font-size: 1rem;
+  }
+
+  .btn:disabled,
+  .btn.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+</style>
diff --git a/src/components/ui/VideoBackground.svelte b/src/components/ui/VideoBackground.svelte
new file mode 100644
index 0000000..7d24f5c
--- /dev/null
+++ b/src/components/ui/VideoBackground.svelte
@@ -0,0 +1,68 @@
+<script>
+  import { onMount } from 'svelte'
+
+  export let src
+  export let poster = ''
+  export let overlay = true
+
+  let videoElement
+
+  onMount(() => {
+    if (videoElement && src) {
+      videoElement.play().catch(err => {
+        console.log('Autoplay failed:', err)
+      })
+    }
+  })
+</script>
+
+<div class="video-background">
+  {#if src}
+    <video
+      bind:this={videoElement}
+      {poster}
+      muted
+      loop
+      playsinline
+      preload="metadata"
+      class="video-background__video"
+    >
+      <source {src} type="video/mp4" />
+    </video>
+  {/if}
+
+  {#if overlay}
+    <div class="video-background__overlay"></div>
+  {/if}
+</div>
+
+<style>
+  .video-background {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    z-index: 0;
+  }
+
+  .video-background__video {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    min-width: 100%;
+    min-height: 100%;
+    width: auto;
+    height: auto;
+    transform: translate(-50%, -50%);
+    object-fit: cover;
+  }
+
+  .video-background__overlay {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0.3),
+      rgba(0, 0, 0, 0.7)
+    );
+  }
+</style>
diff --git a/src/lib/animations.js b/src/lib/animations.js
new file mode 100644
index 0000000..c4c2e4b
--- /dev/null
+++ b/src/lib/animations.js
@@ -0,0 +1,142 @@
+import gsap from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+
+gsap.registerPlugin(ScrollTrigger)
+
+/**
+ * Fade in animation for page enter
+ */
+export function pageEnter(element, options = {}) {
+  const defaults = {
+    opacity: 0,
+    y: 50,
+    duration: 0.8,
+    ease: 'power3.out'
+  }
+
+  return gsap.from(element, { ...defaults, ...options })
+}
+
+/**
+ * Fade out animation for page exit
+ */
+export function pageExit(element, options = {}) {
+  const defaults = {
+    opacity: 0,
+    y: -50,
+    duration: 0.5,
+    ease: 'power3.in'
+  }
+
+  return gsap.to(element, { ...defaults, ...options })
+}
+
+/**
+ * Carousel slide animation
+ */
+export function carouselSlide(element, offset, options = {}) {
+  const defaults = {
+    x: `-${offset}%`,
+    duration: 0.8,
+    ease: 'power2.inOut'
+  }
+
+  return gsap.to(element, { ...defaults, ...options })
+}
+
+/**
+ * Scroll reveal animation
+ */
+export function scrollReveal(elements, options = {}) {
+  const defaults = {
+    scrollTrigger: {
+      trigger: elements,
+      start: 'top 80%',
+      toggleActions: 'play none none none'
+    },
+    y: 50,
+    opacity: 0,
+    stagger: 0.1,
+    duration: 0.8,
+    ease: 'power3.out'
+  }
+
+  return gsap.from(elements, { ...defaults, ...options })
+}
+
+/**
+ * Fade in elements on scroll
+ */
+export function fadeInOnScroll(elements, options = {}) {
+  const defaults = {
+    scrollTrigger: {
+      trigger: elements,
+      start: 'top 80%'
+    },
+    opacity: 0,
+    duration: 1,
+    stagger: 0.2,
+    ease: 'power2.out'
+  }
+
+  return gsap.from(elements, { ...defaults, ...options })
+}
+
+/**
+ * Scale animation
+ */
+export function scaleIn(element, options = {}) {
+  const defaults = {
+    scale: 0,
+    duration: 0.5,
+    ease: 'back.out(1.7)'
+  }
+
+  return gsap.from(element, { ...defaults, ...options })
+}
+
+/**
+ * Cleanup all ScrollTrigger instances
+ */
+export function cleanupScrollTriggers() {
+  ScrollTrigger.getAll().forEach(trigger => trigger.kill())
+}
+
+/**
+ * Refresh ScrollTrigger (useful after content changes)
+ */
+export function refreshScrollTriggers() {
+  ScrollTrigger.refresh()
+}
+
+/**
+ * Custom cursor follow animation
+ */
+export function cursorFollow(cursorElement, outlineElement) {
+  let cursorX = 0
+  let cursorY = 0
+  let outlineX = 0
+  let outlineY = 0
+
+  const handleMouseMove = (e) => {
+    cursorX = e.clientX
+    cursorY = e.clientY
+  }
+
+  const animate = () => {
+    outlineX += (cursorX - outlineX) * 0.2
+    outlineY += (cursorY - outlineY) * 0.2
+
+    gsap.set(cursorElement, { x: cursorX, y: cursorY })
+    gsap.set(outlineElement, { x: outlineX, y: outlineY })
+
+    requestAnimationFrame(animate)
+  }
+
+  window.addEventListener('mousemove', handleMouseMove)
+  animate()
+
+  return () => {
+    window.removeEventListener('mousemove', handleMouseMove)
+  }
+}
diff --git a/src/lib/router.js b/src/lib/router.js
new file mode 100644
index 0000000..5afd887
--- /dev/null
+++ b/src/lib/router.js
@@ -0,0 +1,100 @@
+import navaid from "navaid";
+import { pageStore } from "@stores/page";
+import { navigationStore } from "@stores/navigation";
+import { siteStore } from "@stores/site";
+import { localeStore } from "@stores/locale";
+
+export const router = navaid("/", () => {
+  // Default handler
+});
+
+async function loadPage(path) {
+  navigationStore.setLoading(true);
+  pageStore.setLoading(true);
+
+  try {
+    // Fetch JSON data for this page
+    const response = await fetch(`${path}.json`);
+
+    if (!response.ok) {
+      throw new Error(`Failed to load page: ${response.status}`);
+    }
+
+    const data = await response.json();
+
+    // Update site store with site data (from genericData)
+    if (data.site) {
+      siteStore.set(data.site);
+      localeStore.initialize(data.site.language, data.site.languages);
+    }
+
+    // Update page store with page data
+    pageStore.set({
+      data,
+      template: data.template || "default",
+      url: path,
+      loading: false,
+      error: null,
+    });
+
+    // Scroll to top
+    window.scrollTo(0, 0);
+  } catch (error) {
+    console.error("Failed to load page:", error);
+    pageStore.setError(error);
+  } finally {
+    navigationStore.setLoading(false);
+  }
+}
+
+// Route handlers
+router
+  .on("/", () => loadPage("/home"))
+  .on("/expertise", () => loadPage("/expertise"))
+  .on("/portfolio", () => loadPage("/portfolio"))
+  .on("/portfolio/:slug", ({ slug }) => loadPage(`/portfolio/${slug}`))
+  .on("/jouer", () => loadPage("/jouer"))
+  .on("/jouer/:slug", ({ slug }) => loadPage(`/jouer/${slug}`))
+  .on("/a-propos", () => loadPage("/a-propos"))
+  .on("/blog", () => loadPage("/blog"))
+  .on("/blog/:slug", ({ slug }) => loadPage(`/blog/${slug}`))
+  .on("*", (params) => {
+    // Fallback for other routes
+    loadPage(window.location.pathname);
+  });
+
+export function initRouter() {
+  // Load initial page data
+  loadPage(window.location.pathname);
+
+  // Start listening to route changes
+  router.listen();
+
+  // Intercept internal link clicks
+  document.addEventListener("click", (e) => {
+    const link = e.target.closest("a");
+    if (!link) return;
+
+    const url = new URL(link.href, window.location.origin);
+
+    // Only intercept same-origin links without target attribute
+    if (
+      url.origin === window.location.origin &&
+      !link.target &&
+      !link.hasAttribute("download")
+    ) {
+      e.preventDefault();
+      navigateTo(url.pathname);
+    }
+  });
+
+  // Handle browser back/forward
+  window.addEventListener("popstate", () => {
+    loadPage(window.location.pathname);
+  });
+}
+
+export function navigateTo(path) {
+  window.history.pushState({}, "", path);
+  loadPage(path);
+}
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..038d0bc
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,13 @@
+import './style.css'
+import App from './App.svelte'
+import { initRouter } from './lib/router'
+
+// Initialize the router
+initRouter()
+
+// Mount the app
+const app = new App({
+  target: document.getElementById('app')
+})
+
+export default app
diff --git a/src/stores/locale.js b/src/stores/locale.js
new file mode 100644
index 0000000..d40ee82
--- /dev/null
+++ b/src/stores/locale.js
@@ -0,0 +1,17 @@
+import { writable } from 'svelte/store'
+
+function createLocaleStore() {
+  const { subscribe, set, update } = writable({
+    current: 'fr',
+    languages: []
+  })
+
+  return {
+    subscribe,
+    set,
+    setLanguage: (code) => update(s => ({ ...s, current: code })),
+    initialize: (language, languages) => set({ current: language, languages })
+  }
+}
+
+export const localeStore = createLocaleStore()
diff --git a/src/stores/navigation.js b/src/stores/navigation.js
new file mode 100644
index 0000000..af72b5c
--- /dev/null
+++ b/src/stores/navigation.js
@@ -0,0 +1,18 @@
+import { writable } from 'svelte/store'
+
+function createNavigationStore() {
+  const { subscribe, update } = writable({
+    isLoading: false,
+    isMenuOpen: false
+  })
+
+  return {
+    subscribe,
+    setLoading: (loading) => update(s => ({ ...s, isLoading: loading })),
+    toggleMenu: () => update(s => ({ ...s, isMenuOpen: !s.isMenuOpen })),
+    openMenu: () => update(s => ({ ...s, isMenuOpen: true })),
+    closeMenu: () => update(s => ({ ...s, isMenuOpen: false }))
+  }
+}
+
+export const navigationStore = createNavigationStore()
diff --git a/src/stores/page.js b/src/stores/page.js
new file mode 100644
index 0000000..24032a9
--- /dev/null
+++ b/src/stores/page.js
@@ -0,0 +1,27 @@
+import { writable } from 'svelte/store'
+
+function createPageStore() {
+  const { subscribe, set, update } = writable({
+    data: null,
+    template: null,
+    url: null,
+    loading: false,
+    error: null
+  })
+
+  return {
+    subscribe,
+    set,
+    setLoading: (loading) => update(s => ({ ...s, loading })),
+    setError: (error) => update(s => ({ ...s, error, loading: false })),
+    reset: () => set({
+      data: null,
+      template: null,
+      url: null,
+      loading: false,
+      error: null
+    })
+  }
+}
+
+export const pageStore = createPageStore()
diff --git a/src/stores/site.js b/src/stores/site.js
new file mode 100644
index 0000000..11af6a3
--- /dev/null
+++ b/src/stores/site.js
@@ -0,0 +1,19 @@
+import { writable } from 'svelte/store'
+
+function createSiteStore() {
+  const { subscribe, set } = writable({
+    title: 'World Game',
+    url: '',
+    logo: null,
+    language: 'fr',
+    languages: [],
+    navigation: []
+  })
+
+  return {
+    subscribe,
+    set
+  }
+}
+
+export const siteStore = createSiteStore()
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 0000000..519ccc6
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,82 @@
+/* Global Styles */
+
+/* Custom fonts */
+@font-face {
+  font-family: 'Danzza';
+  src: url('/assets/fonts/danzza.woff2') format('woff2'),
+       url('/assets/fonts/danzza.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Reset */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  background: #000;
+  color: #fff;
+  line-height: 1.6;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+/* Links */
+a {
+  color: inherit;
+  text-decoration: none;
+  transition: color 0.3s;
+}
+
+/* Images */
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+/* Buttons */
+button {
+  font-family: inherit;
+  cursor: pointer;
+}
+
+/* Selection */
+::selection {
+  background: #04fea0;
+  color: #000;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: #000;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #04fea0;
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #03d98c;
+}
diff --git a/src/views/About.svelte b/src/views/About.svelte
new file mode 100644
index 0000000..c5b8e57
--- /dev/null
+++ b/src/views/About.svelte
@@ -0,0 +1,177 @@
+<script>
+  import { fade } from 'svelte/transition'
+
+  export let data
+
+  $: intro = data?.intro || {}
+  $: mission = data?.mission || {}
+  $: manifesto = data?.manifesto || {}
+  $: team = data?.team || {}
+</script>
+
+<div class="about" transition:fade>
+  <section class="about__intro">
+    <h1>{intro.title || data?.title}</h1>
+    {#if intro.text}
+      <p class="about__intro-text">{@html intro.text}</p>
+    {/if}
+  </section>
+
+  {#if mission.text}
+    <section class="about__section">
+      <h2>{mission.title}</h2>
+      <div class="about__section-content">
+        {@html mission.text}
+      </div>
+    </section>
+  {/if}
+
+  {#if manifesto.text}
+    <section class="about__section">
+      <h2>{manifesto.title}</h2>
+      <div class="about__section-content">
+        {@html manifesto.text}
+      </div>
+    </section>
+  {/if}
+
+  {#if team.members && team.members.length > 0}
+    <section class="about__team">
+      <h2>{team.title}</h2>
+
+      <div class="about__team-grid">
+        {#each team.members as member}
+          <article class="team-card">
+            {#if member.photo}
+              <div class="team-card__photo">
+                <img src={member.photo} alt={member.name} />
+              </div>
+            {/if}
+
+            <div class="team-card__info">
+              <h3>{member.name}</h3>
+              <p class="team-card__role">{member.role}</p>
+
+              {#if member.bio}
+                <p class="team-card__bio">{member.bio}</p>
+              {/if}
+            </div>
+          </article>
+        {/each}
+      </div>
+    </section>
+  {/if}
+</div>
+
+<style>
+  .about {
+    min-height: 100vh;
+    padding: 8rem 2rem 4rem;
+    color: #fff;
+  }
+
+  .about__intro {
+    max-width: 1200px;
+    margin: 0 auto 6rem;
+    text-align: center;
+  }
+
+  .about__intro h1 {
+    font-size: clamp(2.5rem, 6vw, 5rem);
+    margin-bottom: 2rem;
+  }
+
+  .about__intro-text {
+    font-size: clamp(1.1rem, 2vw, 1.5rem);
+    opacity: 0.9;
+    max-width: 900px;
+    margin: 0 auto;
+  }
+
+  .about__section {
+    max-width: 1200px;
+    margin: 4rem auto;
+  }
+
+  .about__section h2 {
+    font-size: clamp(2rem, 4vw, 3rem);
+    margin-bottom: 2rem;
+    color: #04fea0;
+  }
+
+  .about__section-content {
+    line-height: 1.8;
+    opacity: 0.9;
+  }
+
+  .about__team {
+    max-width: 1400px;
+    margin: 6rem auto 0;
+  }
+
+  .about__team h2 {
+    font-size: clamp(2rem, 4vw, 3rem);
+    margin-bottom: 3rem;
+    text-align: center;
+    color: #04fea0;
+  }
+
+  .about__team-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 2rem;
+  }
+
+  .team-card {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 2rem;
+    border-radius: 8px;
+    transition: transform 0.3s, border-color 0.3s;
+  }
+
+  .team-card:hover {
+    transform: translateY(-5px);
+    border-color: #04fea0;
+  }
+
+  .team-card__photo {
+    margin-bottom: 1.5rem;
+  }
+
+  .team-card__photo img {
+    width: 100%;
+    height: 250px;
+    object-fit: cover;
+    border-radius: 4px;
+  }
+
+  .team-card h3 {
+    font-size: 1.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .team-card__role {
+    color: #04fea0;
+    font-size: 0.9rem;
+    margin-bottom: 1rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .team-card__bio {
+    font-size: 0.95rem;
+    line-height: 1.6;
+    opacity: 0.8;
+  }
+
+  @media (max-width: 768px) {
+    .about {
+      padding: 6rem 1rem 3rem;
+    }
+
+    .about__team-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>
diff --git a/src/views/Article.svelte b/src/views/Article.svelte
new file mode 100644
index 0000000..e87e403
--- /dev/null
+++ b/src/views/Article.svelte
@@ -0,0 +1,24 @@
+<script>
+  import { fade } from 'svelte/transition'
+  export let data
+</script>
+
+<div class="article" transition:fade>
+  <div class="article__container">
+    <h1>{data?.title || 'Article'}</h1>
+    <p>Article view - To be implemented</p>
+  </div>
+</div>
+
+<style>
+  .article {
+    min-height: 100vh;
+    padding: 8rem 2rem 4rem;
+    color: #fff;
+  }
+
+  .article__container {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+</style>
diff --git a/src/views/Blog.svelte b/src/views/Blog.svelte
new file mode 100644
index 0000000..d65a98c
--- /dev/null
+++ b/src/views/Blog.svelte
@@ -0,0 +1,24 @@
+<script>
+  import { fade } from 'svelte/transition'
+  export let data
+</script>
+
+<div class="blog" transition:fade>
+  <div class="blog__container">
+    <h1>{data?.title || 'Blog'}</h1>
+    <p>Blog view - To be implemented</p>
+  </div>
+</div>
+
+<style>
+  .blog {
+    min-height: 100vh;
+    padding: 8rem 2rem 4rem;
+    color: #fff;
+  }
+
+  .blog__container {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+</style>
diff --git a/src/views/Default.svelte b/src/views/Default.svelte
new file mode 100644
index 0000000..8d0e4ae
--- /dev/null
+++ b/src/views/Default.svelte
@@ -0,0 +1,45 @@
+<script>
+  import { fade } from 'svelte/transition'
+
+  export let data
+</script>
+
+<div class="default" transition:fade>
+  <div class="default__container">
+    <h1>{data?.title || 'Page'}</h1>
+    {#if data?.body}
+      <div class="default__content">
+        {@html data.body}
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .default {
+    min-height: 100vh;
+    padding: 8rem 2rem 4rem;
+  }
+
+  .default__container {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  h1 {
+    font-size: clamp(2rem, 5vw, 4rem);
+    margin-bottom: 2rem;
+    color: #fff;
+  }
+
+  .default__content {
+    color: rgba(255, 255, 255, 0.9);
+    line-height: 1.8;
+  }
+
+  @media (max-width: 768px) {
+    .default {
+      padding: 6rem 1rem 3rem;
+    }
+  }
+</style>
diff --git a/src/views/Expertise.svelte b/src/views/Expertise.svelte
new file mode 100644
index 0000000..c398ba4
--- /dev/null
+++ b/src/views/Expertise.svelte
@@ -0,0 +1,24 @@
+<script>
+  import { fade } from 'svelte/transition'
+  export let data
+</script>
+
+<div class="expertise" transition:fade>
+  <div class="expertise__container">
+    <h1>{data?.title || 'Expertise'}</h1>
+    <p>Expertise view - To be implemented</p>
+  </div>
+</div>
+
+<style>
+  .expertise {
+    min-height: 100vh;
+    padding: 8rem 2rem 4rem;
+    color: #fff;
+  }
+
+  .expertise__container {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+</style>
diff --git a/src/views/Game.svelte b/src/views/Game.svelte
new file mode 100644
index 0000000..14ad530
--- /dev/null
+++ b/src/views/Game.svelte
@@ -0,0 +1,24 @@
+<script>
+  import { fade } from 'svelte/transition'
+  export let data
+</script>
+
+<div class="game" transition:fade>
+  <div class="game__container">
+    <h1>{data?.title || 'Game'}</h1>
+    <p>Game view - To be implemented</p>
+  </div>
+</div>
+
+<style>
+  .game {
+    min-height: 100vh;
+    padding: 8rem 2rem 4rem;
+    color: #fff;
+  }
+
+  .game__container {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+</style>
diff --git a/src/views/Home.svelte b/src/views/Home.svelte
new file mode 100644
index 0000000..063791d
--- /dev/null
+++ b/src/views/Home.svelte
@@ -0,0 +1,164 @@
+<script>
+  import { onMount } from 'svelte'
+  import { fade } from 'svelte/transition'
+  import VideoBackground from '@components/ui/VideoBackground.svelte'
+  import Button from '@components/ui/Button.svelte'
+  import { navigateTo } from '@lib/router'
+  import { pageEnter } from '@lib/animations'
+
+  export let data
+
+  let contentElement
+
+  onMount(() => {
+    if (contentElement) {
+      pageEnter(contentElement)
+    }
+  })
+
+  function handleExplore() {
+    navigateTo(data?.hero?.cta_link || '/portfolio')
+  }
+
+  $: hero = data?.hero || {}
+  $: backgroundVideo = data?.background_video
+  $: floatingBubbles = data?.floating_bubbles || []
+</script>
+
+<div class="home" transition:fade>
+  {#if backgroundVideo}
+    <VideoBackground src={backgroundVideo} />
+  {/if}
+
+  <div class="home__content" bind:this={contentElement}>
+    <h1 class="home__title">
+      {@html hero.title || 'PLAY TO ENGAGE'}
+    </h1>
+
+    {#if hero.subtitle}
+      <p class="home__subtitle">
+        {@html hero.subtitle}
+      </p>
+    {/if}
+
+    {#if hero.cta_text}
+      <Button on:click={handleExplore} variant="primary" size="large">
+        {hero.cta_text}
+      </Button>
+    {/if}
+  </div>
+
+  {#if floatingBubbles.length > 0}
+    <div class="home__bubbles">
+      {#each floatingBubbles as bubble}
+        <div class="bubble bubble--{bubble.position}">
+          {bubble.text}
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .home {
+    position: relative;
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    padding: 6rem 2rem 2rem;
+  }
+
+  .home__content {
+    position: relative;
+    z-index: 10;
+    text-align: center;
+    max-width: 1200px;
+    color: white;
+  }
+
+  .home__title {
+    font-size: clamp(3rem, 8vw, 8rem);
+    font-family: 'Danzza', sans-serif;
+    font-weight: 700;
+    margin: 0 0 1.5rem;
+    line-height: 1.1;
+    text-transform: uppercase;
+  }
+
+  .home__title :global(.highlight) {
+    color: #04fea0;
+  }
+
+  .home__subtitle {
+    font-size: clamp(1.2rem, 3vw, 2rem);
+    margin: 0 0 3rem;
+    opacity: 0.9;
+    max-width: 800px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .home__bubbles {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 5;
+  }
+
+  .bubble {
+    position: absolute;
+    background: rgba(4, 254, 160, 0.1);
+    border: 1px solid rgba(4, 254, 160, 0.3);
+    border-radius: 50%;
+    padding: 1rem 1.5rem;
+    font-size: 0.9rem;
+    color: #04fea0;
+    backdrop-filter: blur(10px);
+    animation: float 6s ease-in-out infinite;
+  }
+
+  .bubble--top-left {
+    top: 15%;
+    left: 10%;
+  }
+
+  .bubble--top-right {
+    top: 20%;
+    right: 15%;
+    animation-delay: -2s;
+  }
+
+  .bubble--bottom-left {
+    bottom: 25%;
+    left: 15%;
+    animation-delay: -4s;
+  }
+
+  .bubble--bottom-right {
+    bottom: 20%;
+    right: 10%;
+    animation-delay: -3s;
+  }
+
+  @keyframes float {
+    0%, 100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-20px);
+    }
+  }
+
+  @media (max-width: 768px) {
+    .home {
+      padding: 5rem 1rem 2rem;
+    }
+
+    .bubble {
+      font-size: 0.7rem;
+      padding: 0.75rem 1rem;
+    }
+  }
+</style>
diff --git a/src/views/Jouer.svelte b/src/views/Jouer.svelte
new file mode 100644
index 0000000..169ddfb
--- /dev/null
+++ b/src/views/Jouer.svelte
@@ -0,0 +1,24 @@
+<script>
+  import { fade } from 'svelte/transition'
+  export let data
+</script>
+
+<div class="jouer" transition:fade>
+  <div class="jouer__container">
+    <h1>{data?.title || 'Jouer'}</h1>
+    <p>Jouer view - To be implemented</p>
+  </div>
+</div>
+
+<style>
+  .jouer {
+    min-height: 100vh;
+    padding: 8rem 2rem 4rem;
+    color: #fff;
+  }
+
+  .jouer__container {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+</style>
diff --git a/src/views/Portfolio.svelte b/src/views/Portfolio.svelte
new file mode 100644
index 0000000..aacf907
--- /dev/null
+++ b/src/views/Portfolio.svelte
@@ -0,0 +1,24 @@
+<script>
+  import { fade } from 'svelte/transition'
+  export let data
+</script>
+
+<div class="portfolio" transition:fade>
+  <div class="portfolio__container">
+    <h1>{data?.title || 'Portfolio'}</h1>
+    <p>Portfolio view - To be implemented</p>
+  </div>
+</div>
+
+<style>
+  .portfolio {
+    min-height: 100vh;
+    padding: 8rem 2rem 4rem;
+    color: #fff;
+  }
+
+  .portfolio__container {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+</style>
diff --git a/src/views/Project.svelte b/src/views/Project.svelte
new file mode 100644
index 0000000..0449cba
--- /dev/null
+++ b/src/views/Project.svelte
@@ -0,0 +1,24 @@
+<script>
+  import { fade } from 'svelte/transition'
+  export let data
+</script>
+
+<div class="project" transition:fade>
+  <div class="project__container">
+    <h1>{data?.title || 'Project'}</h1>
+    <p>Project view - To be implemented</p>
+  </div>
+</div>
+
+<style>
+  .project {
+    min-height: 100vh;
+    padding: 8rem 2rem 4rem;
+    color: #fff;
+  }
+
+  .project__container {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+</style>
diff --git a/svelte.config.js b/svelte.config.js
new file mode 100644
index 0000000..09a1bf7
--- /dev/null
+++ b/svelte.config.js
@@ -0,0 +1,5 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+export default {
+  preprocess: vitePreprocess()
+}
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..fb77cb3
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,37 @@
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [svelte()],
+  resolve: {
+    alias: {
+      '@components': path.resolve(__dirname, 'src/components'),
+      '@views': path.resolve(__dirname, 'src/views'),
+      '@stores': path.resolve(__dirname, 'src/stores'),
+      '@lib': path.resolve(__dirname, 'src/lib')
+    }
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      '^(?!/@vite|/@fs|/node_modules|/src).*': {
+        target: 'http://localhost:8000',
+        changeOrigin: true
+      }
+    }
+  },
+  build: {
+    outDir: 'assets/dist',
+    emptyOutDir: true,
+    manifest: false,
+    rollupOptions: {
+      input: 'src/main.js',
+      output: {
+        entryFileNames: 'index.js',
+        chunkFileNames: '[name].js',
+        assetFileNames: '[name].[ext]'
+      }
+    }
+  }
+})