Fix: golden-grid height 100vh au lieu de 100%

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

site/blueprints/pages/home.yml

@@ -23,13 +23,13 @@ tabs:
                 type: writer
                 marks: false
                 nodes: false
-              cta_text:
+              ctaText:
                 width: 1/2
                 label: Texte du bouton CTA
                 help: CTA pour call to action
                 type: text
                 default: Explorer
-              cta_link:
+              ctaLink:
                 width: 1/2
                 label: Lien du bouton CTA
                 help: CTA pour call to action

site/templates/home.json.php

@@ -5,8 +5,8 @@ $specificData = [
     '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() ?? '#',
+    'ctaText' => $page->ctaText()->value(),
+    'ctaPath' => $page->ctaLink()->toPage()?->id() ?? '#',
     'image' => $page->hero_image()->toFile()?->url()
   ],
   'background_video' => $page->background_video()->toFile()?->url(),

src/components/layout/Header.svelte

@@ -2,7 +2,7 @@
   import { navigation } from '@state/navigation.svelte'
   import { locale } from '@state/locale.svelte'
   import { page } from '@state/page.svelte'
-  import { navigateTo } from '@state/router'
+  import { navigateTo } from '@router'
 
   const isMenuOpen = $derived(navigation.isMenuOpen)
   const currentLang = $derived(locale.current)

src/main.js

@@ -1,7 +1,7 @@
 import './styles/index.css'
 import App from './App.svelte'
 import { mount } from 'svelte'
-import { initRouter } from './state/router'
+import { initRouter } from './router'
 
 initRouter()
 

src/router/index.js

@@ -1,8 +1,8 @@
 import navaid from "navaid";
-import { page } from "./page.svelte";
-import { navigation } from "./navigation.svelte";
-import { site } from "./site.svelte";
-import { locale } from "./locale.svelte";
+import { page } from "@state/page.svelte";
+import { navigation } from "@state/navigation.svelte";
+import { site } from "@state/site.svelte";
+import { locale } from "@state/locale.svelte";
 
 export const router = navaid("/", () => {
   // Default handler

src/style.css

@@ -121,7 +121,7 @@ body {
 
 /* Golden Grid */
 .golden-grid {
-  height: 100% !important;
+  height: 100vh !important;
   min-height: 100% !important;
   display: grid !important;
   position: relative;
@@ -198,7 +198,7 @@ body {
 .earth-icon {
   width: 24px;
   height: 24px;
-  background-image: url('/assets/img/icon-earth-green.png');
+  background-image: url("/assets/img/icon-earth-green.png");
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
@@ -207,7 +207,8 @@ body {
 }
 
 .button:hover .earth-icon {
-  filter: brightness(0) saturate(100%) invert(77%) sepia(82%) saturate(507%) hue-rotate(91deg) brightness(101%) contrast(97%);
+  filter: brightness(0) saturate(100%) invert(77%) sepia(82%) saturate(507%)
+    hue-rotate(91deg) brightness(101%) contrast(97%);
 }
 
 /* Clickable elements */

src/styles/layout.css

@@ -1,6 +1,6 @@
 /* Golden Grid */
 .golden-grid {
-  height: 100% !important;
+  height: 100vh !important;
   min-height: 100% !important;
   display: grid !important;
   position: relative;

src/views/Home.svelte

@@ -1,27 +1,12 @@
 <script>
   import { onMount } from 'svelte'
   import { locale } from '@state/locale.svelte'
-  import { navigateTo } from '@state/router'
+  import { navigateTo } from '@router'
 
   let { data } = $props()
 
   const currentLang = $derived(locale.current)
 
-  const translations = {
-    homeText: {
-      fr: "World Game crée des expériences gamifiées qui transforment l'engagement en résultats mesurables",
-      en: "World Game creates gamified experiences that transform engagement into measurable results"
-    },
-    explore: {
-      fr: "EXPLORER",
-      en: "EXPLORE"
-    }
-  }
-
-  function t(key) {
-    return translations[key]?.[currentLang] || translations[key]?.fr || ''
-  }
-
   onMount(() => {
     const playVideo = async (videoId) => {
       const video = document.getElementById(videoId)
@@ -55,7 +40,7 @@
   })
 
   function handleExplore() {
-    navigateTo('/portfolio')
+    navigateTo('/' + data.hero.ctaPath)
   }
 </script>
 
@@ -125,7 +110,7 @@
     style="z-index: 5; justify-self: center; margin-top: 6vmax;"
   >
     <h2 class="font-face-danzza-light home-subtitle">
-      {t('homeText')}
+      {data.hero.subtitle}
     </h2>
     <div
       class="clickable button"
@@ -137,7 +122,7 @@
     >
       <div class="earth-icon clickable-filter-black"></div>
       <p class="clickable" style="font-family: Terminal; font-size: 1.2em;">
-        {t('explore')}
+        {data.hero.ctaText}
       </p>
     </div>
   </div>

vite.config.js

@@ -12,7 +12,9 @@ export default defineConfig({
     alias: {
       '@components': path.resolve(__dirname, 'src/components'),
       '@views': path.resolve(__dirname, 'src/views'),
-      '@state': path.resolve(__dirname, 'src/state')
+      '@state': path.resolve(__dirname, 'src/state'),
+      '@router': path.resolve(__dirname, 'src/router'),
+      '@utils': path.resolve(__dirname, 'src/utils')
     }
   },
   server: {