From b3b0580ab10169cacc937ec127e7392188c2fece Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Tue, 17 Mar 2026 10:00:53 +0100
Subject: [PATCH] Feat: footer reveal + refactor page About
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Footer global fixé en bas (App.svelte), masqué par le contenu des slides
- margin-bottom sur .page-scrollable pour l'effet footer reveal (about, blog, article)
- About : champ intro remplacé par heading (text) + subtitle (writer), blueprint + API + vue mis à jour
- LanguageSwitcher : div → button avec hitbox élargie
- i18n : clé our_team (fr: NOTRE ÉQUIPE / en: OUR TEAM)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 site/blueprints/pages/about.yml           |  25 +--
 site/templates/about.json.php             |   3 +-
 src/App.svelte                            |  11 ++
 src/components/ui/LanguageSwitcher.svelte |  10 +-
 src/i18n/index.js                         |   2 +
 src/styles/layout.css                     |   7 +-
 src/styles/variables.css                  |  11 +-
 src/views/About.svelte                    | 196 ++++++++++++----------
 src/views/Article.svelte                  |   3 +-
 src/views/Blog.svelte                     |  10 +-
 10 files changed, 148 insertions(+), 130 deletions(-)

diff --git a/site/blueprints/pages/about.yml b/site/blueprints/pages/about.yml
index c40cc28..1325293 100644
--- a/site/blueprints/pages/about.yml
+++ b/site/blueprints/pages/about.yml
@@ -18,23 +18,14 @@ tabs:
           content:
             type: fields
             fields:
-              intro:
-                type: writer
-                marks:
-                  - bold
-                  - italic
-                  - green
-                  - pixel
-                  - underline
-                  - strike
-                  - clear
-                  - link
-                nodes:
-                  - heading
-                headings:
-                  - 1
+              heading:
+                type: text
+                label: Titre
+                help: Titre principal de la section intro.
+              subtitle:
+                type: text
                 buttons: false
-                help: Section de texte centrée.
+                help: Texte d'accroche sous le titre.
               body:
                 label: Corps
                 type: blocks
@@ -77,6 +68,6 @@ tabs:
             image:
               ratio: 3/5
               cover: true
-              back: '#0e1e43'
+              back: "#0e1e43"
             text: "{{ file.memberName }}"
             info: "{{ file.role }}"
diff --git a/site/templates/about.json.php b/site/templates/about.json.php
index f2934dc..f7b3307 100644
--- a/site/templates/about.json.php
+++ b/site/templates/about.json.php
@@ -11,7 +11,8 @@ foreach ($page->body()->toBlocks() as $block) {
 }
 
 $specificData = [
-    'intro' => $page->intro()->value(),
+    'heading'  => $page->heading()->value(),
+    'subtitle' => $page->subtitle()->value(),
     'body'  => $bodyBlocks,
     'team'  => $page->files()->template('member')->sort('sort')->map(function ($file) {
         return [
diff --git a/src/App.svelte b/src/App.svelte
index daa35b0..79b67d1 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -7,6 +7,7 @@
   import Cursor from '@components/layout/Cursor.svelte'
   import LanguageSwitcher from '@components/ui/LanguageSwitcher.svelte'
 
+  import Footer from '@components/layout/Footer.svelte'
   import Home from '@views/Home.svelte'
   import About from '@views/About.svelte'
   import Expertise from '@views/Expertise.svelte'
@@ -95,6 +96,7 @@
     {/each}
   </div>
 </main>
+<Footer />
 <LanguageSwitcher />
 
 <style>
@@ -127,6 +129,7 @@
 
   .main {
     position: relative;
+    z-index: 1;
     overflow: hidden;
     height: 100vh;
   }
@@ -155,4 +158,12 @@
     background-position: center;
     background-repeat: no-repeat;
   }
+
+  :global(.site-footer) {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 0;
+  }
 </style>
diff --git a/src/components/ui/LanguageSwitcher.svelte b/src/components/ui/LanguageSwitcher.svelte
index 8948d28..54e643d 100644
--- a/src/components/ui/LanguageSwitcher.svelte
+++ b/src/components/ui/LanguageSwitcher.svelte
@@ -10,9 +10,9 @@
   }
 </script>
 
-<div class="lang-switcher font-face-danzza-bold clickable" onclick={switchLanguage}>
-  <p class="clickable">{locale.current === 'en' ? 'fr' : 'en'}</p>
-</div>
+<button class="lang-switcher font-face-danzza-bold" onclick={switchLanguage}>
+  {locale.current === 'en' ? 'fr' : 'en'}
+</button>
 
 <style>
   .lang-switcher {
@@ -22,7 +22,9 @@
     left: 4vh;
     text-transform: uppercase;
     color: rgb(4, 254, 160);
-    display: block;
+    background: none;
+    border: none;
     cursor: pointer;
+    padding: 0.75rem 1rem;
   }
 </style>
diff --git a/src/i18n/index.js b/src/i18n/index.js
index 06ef2e8..7745238 100644
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -45,6 +45,8 @@ const dict = {
   legal: { fr: "Mentions légales", en: "Legal notice" },
   cookies: { fr: "Préférences cookies", en: "Cookie preferences" },
   privacy: { fr: "Confidentialité", en: "Privacy" },
+  // About
+  our_team: { fr: "NOTRE ÉQUIPE", en: "OUR TEAM" },
   // Menu
   menu: { fr: "MENU", en: "MENU" },
   connect: { fr: "CONNECT", en: "CONNECT" },
diff --git a/src/styles/layout.css b/src/styles/layout.css
index fb4f319..44b6993 100644
--- a/src/styles/layout.css
+++ b/src/styles/layout.css
@@ -17,12 +17,11 @@
 .page-scrollable {
   height: 100%;
   overflow-y: auto;
+  margin-bottom: var(--footer-height);
 }
 
-.page-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 50px;
+.page-scrollable .page-container {
+  margin-bottom: var(--footer-height);
 }
 
 /* Vertical Lines */
diff --git a/src/styles/variables.css b/src/styles/variables.css
index f8abf70..28a1db8 100644
--- a/src/styles/variables.css
+++ b/src/styles/variables.css
@@ -16,11 +16,11 @@
    * --z-header   : barre de navigation (toujours au-dessus du menu)
    * --z-cursor   : curseur personnalisé (toujours au-dessus de tout)
    */
-  --z-base:    1;
+  --z-base: 1;
   --z-content: 5;
-  --z-menu:    100;
-  --z-header:  200;
-  --z-cursor:  9999;
+  --z-menu: 100;
+  --z-header: 200;
+  --z-cursor: 9999;
 
   /* Font sizes — desktop */
   --font-size-paragraph: 18px;
@@ -52,6 +52,9 @@
   --font-size-button-tablet: 12px;
   --font-size-caption-tablet: 11px;
 
+  /* Footer */
+  --footer-height: 18.75rem;
+
   /* Easing */
   --ease-standard: cubic-bezier(0.65, 0, 0.35, 1);
 
diff --git a/src/views/About.svelte b/src/views/About.svelte
index 3dbc961..e4734b9 100644
--- a/src/views/About.svelte
+++ b/src/views/About.svelte
@@ -1,11 +1,13 @@
 <script>
   import { onMount } from 'svelte'
   import { slides } from '@state/slides.svelte'
-  import Footer from '@components/layout/Footer.svelte'
+
+  import { t } from '@i18n'
 
   let { data } = $props()
 
-  const intro    = $derived(data?.intro ?? '')
+  const heading  = $derived(data?.heading ?? '')
+  const subtitle = $derived(data?.subtitle ?? '')
   const body     = $derived(data?.body ?? [])
   const members  = $derived(data?.team ?? [])
   const isActive = $derived(slides.active?.id === 'about')
@@ -72,86 +74,88 @@
   })
 </script>
 
-<div class="about page-scrollable" bind:this={sectionEl}>
-
-  <!-- Intro -->
-  <section class="about-intro">
-    <div class="about-intro-content">
-      {@html intro}
-    </div>
-  </section>
-
-  <!-- Body blocks (Mission, Manifeste…) -->
-  {#if body.length > 0}
-    <section class="about-body">
-      {#each body as block}
-        {#if block.type === 'text'}
-          <div class="about-body-block">
-            {@html block.html}
-          </div>
-        {/if}
-      {/each}
+<div class="about golden-grid page-scrollable" bind:this={sectionEl}>
+  <div class="page-container">
+    <!-- Intro -->
+    <section class="about-intro">
+      <div class="about-intro-content">
+        {#if heading}<h1 class="heading">{heading}</h1>{/if}
+        <p class="subtitle">{subtitle}</p>
+      </div>
     </section>
-  {/if}
-
-  <!-- Team carousel -->
-  {#if members.length > 0}
-    <section class="about-team">
-      <h2 class="about-team-heading">OUR TEAM</h2>
-
-      <div class="team-carousel-container">
-        <div
-          class="team-grid"
-          style="transform: translateX(-{carouselOffset}px)"
-          ontouchstart={(e) => { touchStartX = e.touches[0].clientX }}
-          ontouchend={(e) => {
-            if (touchStartX === null) return
-            const delta = touchStartX - e.changedTouches[0].clientX
-            if (Math.abs(delta) > 50) delta > 0 ? nextSlide() : prevSlide()
-            touchStartX = null
-          }}
-        >
-          {#each members as member}
-            <div class="team-member">
-              {#if member.photo}
-                <img src={member.photo} alt={member.name} class="team-member-image" draggable="false" />
-              {/if}
-              <h4 class="team-member-name">{member.name}</h4>
-              <p class="team-member-title">{member.role}</p>
+  
+    <!-- Body blocks (Mission, Manifeste…) -->
+    {#if body.length > 0}
+      <section class="about-body">
+        {#each body as block}
+          {#if block.type === 'text'}
+            <div class="about-body-block">
+              {@html block.html}
             </div>
-          {/each}
+          {/if}
+        {/each}
+      </section>
+    {/if}
+  
+    <!-- Team carousel -->
+    {#if members.length > 0}
+      <section class="about-team">
+        <h2 class="about-team-heading">{t('our_team')}</h2>
+  
+        <div class="team-carousel-container">
+          <div
+            class="team-grid"
+            style="transform: translateX(-{carouselOffset}px)"
+            ontouchstart={(e) => { touchStartX = e.touches[0].clientX }}
+            ontouchend={(e) => {
+              if (touchStartX === null) return
+              const delta = touchStartX - e.changedTouches[0].clientX
+              if (Math.abs(delta) > 50) delta > 0 ? nextSlide() : prevSlide()
+              touchStartX = null
+            }}
+          >
+            {#each members as member}
+              <div class="team-member">
+                {#if member.photo}
+                  <img src={member.photo} alt={member.name} class="team-member-image" draggable="false" />
+                {/if}
+                <h4 class="team-member-name">{member.name}</h4>
+                <p class="team-member-title">{member.role}</p>
+              </div>
+            {/each}
+          </div>
         </div>
-      </div>
-
-      <div class="nav-buttons">
-        <button
-          class="nav-button"
-          disabled={currentSlide === 0}
-          onclick={prevSlide}
-        >← BEFORE</button>
-
-        <div class="pagination-indicator">
-          {#each { length: totalSlides } as _, i}
-            <button
-              class="pagination-dot"
-              class:active={i === currentSlide}
-              aria-label="Slide {i + 1}"
-              onclick={() => goToSlide(i)}
-            ></button>
-          {/each}
+  
+        <div class="nav-buttons">
+          <button
+            class="nav-button"
+            disabled={currentSlide === 0}
+            onclick={prevSlide}
+          >← BEFORE</button>
+  
+          <div class="pagination-indicator">
+            {#each { length: totalSlides } as _, i}
+              <button
+                class="pagination-dot"
+                class:active={i === currentSlide}
+                aria-label="Slide {i + 1}"
+                onclick={() => goToSlide(i)}
+              ></button>
+            {/each}
+          </div>
+  
+          <button
+            class="nav-button"
+            disabled={currentSlide === totalSlides - 1}
+            onclick={nextSlide}
+          >NEXT →</button>
         </div>
+      </section>
+    {/if}
+  
+  </div>
+  </div>
 
-        <button
-          class="nav-button"
-          disabled={currentSlide === totalSlides - 1}
-          onclick={nextSlide}
-        >NEXT →</button>
-      </div>
-    </section>
-  {/if}
-
-  <Footer />
-</div>
 
 <style>
   .about {
@@ -161,15 +165,22 @@
     overflow-x: hidden;
   }
 
+  .page-container {
+    grid-area: 6/6/span 7/span 10;
+    height: 100%;
+    place-self: center;
+    text-align: center;
+    white-space: pre-line;
+    width: 100%;
+  }
+
   /* ── Intro ── */
   .about-intro {
     display: flex;
     justify-content: center;
-    padding: 8rem 3rem 2rem;
   }
 
   .about-intro-content {
-    max-width: 800px;
     text-align: center;
     font-family: "Danzza", sans-serif;
     font-size: var(--font-size-paragraph);
@@ -194,20 +205,17 @@
     color: #04fea0;
   }
 
-  .about-intro-content :global(p) {
+  .about-intro-content .subtitle {
     font-size: var(--font-size-subtitle);
     font-weight: normal;
     margin-top: 1.5rem;
     text-align: center;
+
+    margin-top: 3.125rem;
+    padding-left: 1.25rem;
   }
 
   /* ── Body blocks ── */
-  .about-body {
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 1rem 3rem 3rem;
-  }
-
   .about-body-block {
     border-left: 2px solid #04fea0;
     padding-left: 20px;
@@ -221,12 +229,22 @@
   }
 
   .about-body-block :global(h3) {
-    font-family: "Terminal", sans-serif;
-    font-size: var(--font-size-subtitle);
-    color: #04fea0;
+    font-family: Danzza Medium,sans-serif;
+    font-size: var(--font-size-paragraph);
     margin-bottom: 1rem;
   }
 
+  .about-body-block :global(h3::before) {
+    content: '';
+    display: inline-block;
+    width: .6rem;
+    height: .6rem;
+    background-color: var(--color-primary);
+
+    margin-right: .6rem;
+    margin-bottom: .1rem;
+  }
+
   .about-body-block :global(p) {
     opacity: 0.9;
     margin-bottom: 0.75rem;
diff --git a/src/views/Article.svelte b/src/views/Article.svelte
index 79b7d29..c62fe69 100644
--- a/src/views/Article.svelte
+++ b/src/views/Article.svelte
@@ -3,7 +3,7 @@
    * Vue article — sous-composant de Blog.svelte.
    * Reçoit les données article via props, pas via le slide system.
    */
-  import Footer from '@components/layout/Footer.svelte'
+
   import { t } from '@i18n'
 
   let { data, onBack } = $props()
@@ -114,7 +114,6 @@
   {/if}
 </article>
 
-<Footer />
 </div>
 
 <style>
diff --git a/src/views/Blog.svelte b/src/views/Blog.svelte
index 92161c0..a2f354f 100644
--- a/src/views/Blog.svelte
+++ b/src/views/Blog.svelte
@@ -2,7 +2,7 @@
   import { onMount } from 'svelte'
   import { slides } from '@state/slides.svelte'
   import { locale } from '@state/locale.svelte'
-  import Footer from '@components/layout/Footer.svelte'
+
   import Article from '@views/Article.svelte'
   import { t } from '@i18n'
 
@@ -178,7 +178,6 @@
 
     </div>
 
-    <Footer />
   {/if}
 </section>
 
@@ -211,7 +210,6 @@
 
   .page-container {
     max-width: none;
-    margin: 0;
     padding: 0 10%;
   }
 
@@ -312,12 +310,6 @@
     opacity: 0.6;
   }
 
-  .blog :global(.site-footer) {
-    margin-left: -50px;
-    margin-right: -50px;
-    margin-top: 4rem;
-  }
-
   /* --- Mobile --- */
   @media (max-width: 700px) {
     .blog-header {