Feat: écran de remerciement post-téléchargement white paper

- Remplace le message inline par un écran centré (smiley + heading + signature) - Ajout clés i18n wp_success_heading / wp_success_sub - Ajustements blueprints white-paper / white-papers / site - Route : stockage leads sur page livres-blancs Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Feat: ajustements UI white-paper, home, portfolio + icône download
2026-03-19 11:36:00 +01:00 · 2026-03-19 11:21:05 +01:00
12 changed files with 179 additions and 137 deletions
--- a/assets/img/icon-download.svg
+++ b/assets/img/icon-download.svg
@ -0,0 +1,13 @@
+<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2339_203)">
+<path d="M6.26423 8.06567H4.10986V10.0801H6.26423V8.06567Z" fill="black" style="fill:black;fill-opacity:1;"/>
+<path d="M8.41853 12.1025V14.1169H10.5816V12.1025H12.7359V10.08H10.5816V8.06562V4.03685V0H8.41853V4.03685V8.06562V10.08H6.26416V12.1025H8.41853Z" fill="black" style="fill:black;fill-opacity:1;"/>
+<path d="M16.8456 11.9487V13.9631V15.9775H2.15437V13.9631V11.9487H0V13.9631V15.9775V18H19V15.9775V13.9631V11.9487H16.8456Z" fill="black" style="fill:black;fill-opacity:1;"/>
+<path d="M14.8902 8.06567H12.7358V10.0801H14.8902V8.06567Z" fill="black" style="fill:black;fill-opacity:1;"/>
+</g>
+<defs>
+<clipPath id="clip0_2339_203">
+<rect width="19" height="18" fill="white" style="fill:white;fill-opacity:1;"/>
+</clipPath>
+</defs>
+</svg>
--- a/assets/img/smiley.svg
+++ b/assets/img/smiley.svg
@ -0,0 +1,15 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2188_87542)">
+<path d="M31.8075 60.7859H25.501V67.0923H31.8075V60.7859Z" fill="#4DFCA1" style="fill:#4DFCA1;fill:color(display-p3 0.3020 0.9882 0.6314);fill-opacity:1;"/>
+<path d="M38.1341 28.0353H31.8276V55.167H38.1341V28.0353Z" fill="#4DFCA1" style="fill:#4DFCA1;fill:color(display-p3 0.3020 0.9882 0.6314);fill-opacity:1;"/>
+<path d="M67.4657 28.0353H61.1592V55.167H67.4657V28.0353Z" fill="#4DFCA1" style="fill:#4DFCA1;fill:color(display-p3 0.3020 0.9882 0.6314);fill-opacity:1;"/>
+<path d="M73.7918 60.7859H67.4854V67.0923H73.7918V60.7859Z" fill="#4DFCA1" style="fill:#4DFCA1;fill:color(display-p3 0.3020 0.9882 0.6314);fill-opacity:1;"/>
+<path d="M67.4858 67.112H31.8276V73.4185H67.4858V67.112Z" fill="#4DFCA1" style="fill:#4DFCA1;fill:color(display-p3 0.3020 0.9882 0.6314);fill-opacity:1;"/>
+<path d="M75.6778 9.82318C83.6739 9.82318 90.1768 16.3261 90.1768 24.3222V75.6974C90.1768 83.6935 83.6739 90.1965 75.6778 90.1965H24.3222C16.3261 90.1965 9.82318 83.6935 9.82318 75.6974V24.3222C9.82318 16.3261 16.3261 9.82318 24.3222 9.82318H75.6974M75.6778 0H24.3222C10.8841 0 0 10.8841 0 24.3222V75.6974C0 89.1159 10.8841 100.02 24.3222 100.02H75.6974C89.1159 100.02 100.02 89.1356 100.02 75.6974V24.3222C100.02 10.9037 89.1356 0 75.6974 0H75.6778Z" fill="#4DFCA1" style="fill:#4DFCA1;fill:color(display-p3 0.3020 0.9882 0.6314);fill-opacity:1;"/>
+</g>
+<defs>
+<clipPath id="clip0_2188_87542">
+<rect width="100" height="100" fill="white" style="fill:white;fill-opacity:1;"/>
+</clipPath>
+</defs>
+</svg>
--- a/site/blueprints/pages/white-paper.yml
+++ b/site/blueprints/pages/white-paper.yml
@ -59,50 +59,3 @@ tabs:
                accept: application/pdf
                translate: false
                help: Fichier téléchargé après soumission du formulaire
-  leads:
-    label: Contacts intéressés
-    icon: users
-    sections:
-      contactDatabase:
-        type: fields
-        fields:
-          contactDatabase:
-            label: Visiteurs ayant téléchargé
-            type: structure
-            translate: false
-            columns:
-              firstName:
-                label: Prénom
-                width: 1/4
-              lastName:
-                label: Nom
-                width: 1/4
-              email:
-                label: Email
-                width: 1/4
-              company:
-                label: Entreprise
-                width: 1/4
-              role:
-                label: Fonction
-              downloadedAt:
-                label: Date
-            fields:
-              firstName:
-                type: text
-                label: Prénom
-              lastName:
-                type: text
-                label: Nom
-              email:
-                type: email
-                label: Email
-              company:
-                type: text
-                label: Entreprise
-              role:
-                type: text
-                label: Fonction
-              downloadedAt:
-                type: text
-                label: Date
--- a/site/blueprints/pages/white-papers.yml
+++ b/site/blueprints/pages/white-papers.yml
@ -41,3 +41,48 @@ tabs:
          ratio: 3/4
          cover: true
        info: "{{ page.published.toDate('d/m/Y') }}"
+  dataTab:
+    label: Contacts
+    icon: chart
+    fields:
+      contactDatabase:
+        label: Ont téléchargé un livre blanc
+        type: structure
+        columns:
+          firstName:
+            label: Prénom
+            width: 1/4
+          lastName:
+            label: Nom
+            width: 1/4
+          email:
+            label: Email
+            width: 1/4
+          company:
+            label: Entreprise
+            width: 1/4
+          role:
+            label: Fonction
+          downloadedAt:
+            label: Date
+        fields:
+          firstName:
+            label: Prénom
+            type: text
+            required: true
+          lastName:
+            label: Nom
+            type: text
+            required: true
+          company:
+            label: Société
+            type: text
+          role:
+            label: Fonction
+            type: text
+          email:
+            type: email
+            required: true
+          downloadedAt:
+            type: text
+            label: Date
--- a/site/blueprints/site.yml
+++ b/site/blueprints/site.yml
@ -86,28 +86,3 @@ tabs:
                max: 1
                accept: application/pdf
                translate: false
-  dataTab:
-    label: Données d'usage
-    icon: chart
-    fields:
-      contactDatabase:
-        label: Ont téléchargé un livre blanc
-        type: structure
-        fields:
-          firstName:
-            label: Prénom
-            type: text
-            required: true
-          lastName:
-            label: Nom
-            type: text
-            required: true
-          company:
-            label: Société
-            type: text
-          role:
-            label: Fonction
-            type: text
-          email:
-            type: email
-            required: true
--- a/site/config/routes/download-white-paper.php
+++ b/site/config/routes/download-white-paper.php
@ -80,7 +80,7 @@ return [
        }

        kirby()->impersonate('kirby', function () use ($page, $entries) {
-            $page->update(['contactDatabase' => \Kirby\Data\Data::encode($entries, 'yaml')]);
+            page('livres-blancs')->update(['contactDatabase' => \Kirby\Data\Data::encode($entries, 'yaml')]);
        });

        header('Content-Type: application/json');
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@ -64,9 +64,13 @@ const dict = {
    en: "By checking this box, I agree to be contacted by World Game. My data will not be sold or shared.",
  },
  wp_download: { fr: "TÉLÉCHARGER", en: "DOWNLOAD" },
-  wp_success: {
-    fr: "Votre demande a été enregistrée. Le téléchargement devrait démarrer.",
-    en: "Your request has been registered. The download should start.",
+  wp_success_heading: {
+    fr: "Merci pour votre\nintérêt et bonne lecture !",
+    en: "Thank you for your\ninterest, enjoy the read!",
+  },
+  wp_success_sub: {
+    fr: "L'équipe du World Game.",
+    en: "The World Game team.",
  },
  wp_error: {
    fr: "Une erreur est survenue, veuillez réessayer.",
--- a/src/styles/buttons.css
+++ b/src/styles/buttons.css
@ -37,13 +37,13 @@ button[disabled] {
  color: var(--color-primary);
 }

-.button:hover::before {
+.button:not([disabled]):hover::before {
  filter: invert(84%) sepia(30%) saturate(1700%) hue-rotate(87deg)
    brightness(100%) contrast(99%);
 }
-.button.earth-icon::before {
+
+.button.with-icon::before {
  content: "";
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAlCAYAAADFniADAAACmUlEQVRYhe2YsWtUQRDGf1ETNAlJhIgRop4gGqyCoI0IekUKbSJaaRNBxErwP0hnIxhbq7MRLYRYaJEiKMHCFMFGURAMGlBRMBElEGOUlW9lbtm3d/d4gRPvg8c+5s3OzO3Mfrtz5MAk8KuBZ7JRFxvyRLXeaKth/yxwOJB9B34EskvAduAVcCf41g50BbJZ4Hbe31aJpGk0oveM7FSNRmxUUk43ZcgG9e7SuwRsBLrz/a4qfAN+ym5JHxaAVasUqykX0Bs900AfcLSAgJCdPtn1PgZDpaYsdJs+V9QjQZouAMeANeC8ZHMN+pgzcy9rIfaa79eU1qlY8U8kuGe+huNUoVvMJ3xMeL1YoTuFt3rv13buAIYTzrZo7K2h16HR0cpnve9KUZNfqUUji1FCEY+lhMVwpZq20H0dPAdORdja4RNwMWHnunjHMfXVhN5NYFsgOyfWP2Rr0qdjPGKksk6FHmP0cR9LU6avFVS9aFMeHT4CH4J5jkO2qvhfJGzuBzYDX3WeZeGAivqL4UKPAV1/qoJqGlhGdxe0l0FgB4GdwLLOpiwcB3q00k8TeiNi/3eRM3RIK/4HLUqoB62g6oUr9PvSbdcl323/B8H8zoyGwaNX444aep0R2Un5dpfLx+HH1tUlhdjNs8dQQL/G98CJhJ27wD7gEXAlofdQKT6ju7/3V4VYUI7ldweyFXFRFpYlX6qht6KxK9I1/4UNyl3QbqngTkv2BHitbmZMsunIuZWCOz/LZq7vZo5Idk/dzGzKSMkUpA9kuKC23TcVY0ZWCif8M+Tpevs9esrasjMF+ZuRvbLxsRAqxQp91ey+NUOMRaDb2M085GNBWUwFZIq6jrDhHNA4FLltOLa+EciSRZ0H/+Hfi8Bv133zgtDiJQYAAAAASUVORK5CYII=");
  background-size: 100%;
  width: 1.125rem;
  height: 1.125rem;
@ -51,9 +51,8 @@ button[disabled] {
  transition: all 0.5s ease-out;
 }

-.button:hover .earth-icon {
-  filter: brightness(0) saturate(100%) invert(77%) sepia(82%) saturate(507%)
-    hue-rotate(91deg) brightness(101%) contrast(97%);
+.button.earth-icon::before {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAlCAYAAADFniADAAACmUlEQVRYhe2YsWtUQRDGf1ETNAlJhIgRop4gGqyCoI0IekUKbSJaaRNBxErwP0hnIxhbq7MRLYRYaJEiKMHCFMFGURAMGlBRMBElEGOUlW9lbtm3d/d4gRPvg8c+5s3OzO3Mfrtz5MAk8KuBZ7JRFxvyRLXeaKth/yxwOJB9B34EskvAduAVcCf41g50BbJZ4Hbe31aJpGk0oveM7FSNRmxUUk43ZcgG9e7SuwRsBLrz/a4qfAN+ym5JHxaAVasUqykX0Bs900AfcLSAgJCdPtn1PgZDpaYsdJs+V9QjQZouAMeANeC8ZHMN+pgzcy9rIfaa79eU1qlY8U8kuGe+huNUoVvMJ3xMeL1YoTuFt3rv13buAIYTzrZo7K2h16HR0cpnve9KUZNfqUUji1FCEY+lhMVwpZq20H0dPAdORdja4RNwMWHnunjHMfXVhN5NYFsgOyfWP2Rr0qdjPGKksk6FHmP0cR9LU6avFVS9aFMeHT4CH4J5jkO2qvhfJGzuBzYDX3WeZeGAivqL4UKPAV1/qoJqGlhGdxe0l0FgB4GdwLLOpiwcB3q00k8TeiNi/3eRM3RIK/4HLUqoB62g6oUr9PvSbdcl323/B8H8zoyGwaNX444aep0R2Un5dpfLx+HH1tUlhdjNs8dQQL/G98CJhJ27wD7gEXAlofdQKT6ju7/3V4VYUI7ldweyFXFRFpYlX6qht6KxK9I1/4UNyl3QbqngTkv2BHitbmZMsunIuZWCOz/LZq7vZo5Idk/dzGzKSMkUpA9kuKC23TcVY0ZWCif8M+Tpevs9esrasjMF+ZuRvbLxsRAqxQp91ey+NUOMRaDb2M085GNBWUwFZIq6jrDhHNA4FLltOLa+EciSRZ0H/+Hfi8Bv133zgtDiJQYAAAAASUVORK5CYII=");
 }

 .button.play-icon::before {
@ -66,6 +65,16 @@ button[disabled] {
  transition: all 0.5s ease-out;
 }

+.button.download-icon::before {
+  content: "";
+  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2219%22%20height%3D%2218%22%20viewBox%3D%220%200%2019%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_2339_203)%22%3E%3Cpath%20d%3D%22M6.26423%208.06567H4.10986V10.0801H6.26423V8.06567Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3Cpath%20d%3D%22M8.41853%2012.1025V14.1169H10.5816V12.1025H12.7359V10.08H10.5816V8.06562V4.03685V0H8.41853V4.03685V8.06562V10.08H6.26416V12.1025H8.41853Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3Cpath%20d%3D%22M16.8456%2011.9487V13.9631V15.9775H2.15437V13.9631V11.9487H0V13.9631V15.9775V18H19V15.9775V13.9631V11.9487H16.8456Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3Cpath%20d%3D%22M14.8902%208.06567H12.7358V10.0801H14.8902V8.06567Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_2339_203%22%3E%3Crect%20width%3D%2219%22%20height%3D%2218%22%20fill%3D%22white%22%20style%3D%22fill%3Awhite%3Bfill-opacity%3A1%3B%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
+  background-size: 100%;
+  width: 1.125rem;
+  height: 1.125rem;
+  transform: translateX(-0.5rem);
+  transition: all 0.5s ease-out;
+}
+
 /* Clickable elements */
 .clickable {
  user-select: none;
--- a/src/views/Home.svelte
+++ b/src/views/Home.svelte
@ -78,18 +78,14 @@
    <h2 class="font-face-danzza-light home-subtitle">
      {data.hero.subtitle}
    </h2>
-    <div
-      class="clickable button home-cta"
+    <button
+      class="button with-icon earth-icon home-cta"
      onclick={handleExplore}
      onkeypress={(e) => e.key === 'Enter' && handleExplore()}
-      role="button"
      tabindex="0"
    >
-      <div class="earth-icon clickable-filter-black"></div>
-      <p class="home-cta-text clickable">
        {data.hero.ctaText}
-      </p>
-    </div>
+    </button>
  </div>
 </div>

--- a/src/views/Portfolio.svelte
+++ b/src/views/Portfolio.svelte
@ -129,7 +129,7 @@
      </div>
      <div class="portfolio-links">
        {#each currentProject.externalLinks as link}
-          <a href={link.url} target="_blank" rel="noopener noreferrer" class="button earth-icon">{link.label}</a>
+          <a href={link.url} target="_blank" rel="noopener noreferrer" class="button with-icon earth-icon">{link.label}</a>
        {/each}
      </div>
    </div>
--- a/src/views/WhitePaper.svelte
+++ b/src/views/WhitePaper.svelte
@ -80,42 +80,44 @@
  <!-- Form area: right column on desktop, full-screen overlay on mobile -->
  <div class="form-area" class:is-visible={showForm}>
    <button class="form-close" onclick={() => showForm = false} aria-label="Fermer">✕</button>
-    <div class="form-card">
-      <p class="form-intro">{t('wp_form_intro')}</p>
-      <form class="form" onsubmit={handleSubmit}>
-        <div class="form-row">
-          <input class="input" type="text" placeholder={t('wp_firstname')} bind:value={firstName} required />
-          <input class="input" type="text" placeholder={t('wp_lastname')} bind:value={lastName} required />
-        </div>
-        <input class="input" type="text" placeholder={t('wp_company')} bind:value={company} />
-        <input class="input" type="text" placeholder={t('wp_role')} bind:value={role} />
-        <input class="input" type="email" placeholder={t('wp_email')} bind:value={email} required />
+    {#if status === 'success'}
+      <div class="thank-you">
+        <img src="/assets/img/smiley.svg" alt="" class="thank-you-smiley" aria-hidden="true" />
+        <p class="thank-you-heading">{t('wp_success_heading')}</p>
+        <p class="thank-you-sub">{t('wp_success_sub')}</p>
+      </div>
+    {:else}
+      <div class="form-card">
+        <p class="form-intro">{t('wp_form_intro')}</p>
+        <form class="form" onsubmit={handleSubmit}>
+          <div class="form-row">
+            <input class="input" type="text" placeholder={t('wp_firstname')} bind:value={firstName} required />
+            <input class="input" type="text" placeholder={t('wp_lastname')} bind:value={lastName} required />
+          </div>
+          <input class="input" type="text" placeholder={t('wp_company')} bind:value={company} />
+          <input class="input" type="text" placeholder={t('wp_role')} bind:value={role} />
+          <input class="input" type="email" placeholder={t('wp_email')} bind:value={email} required />

-        <div class="hp" aria-hidden="true">
-          <label for="website">Website</label>
-          <input id="website" type="text" name="website" tabindex="-1" autocomplete="off" bind:value={honeypot} />
-        </div>
+          <div class="hp" aria-hidden="true">
+            <label for="website">Website</label>
+            <input id="website" type="text" name="website" tabindex="-1" autocomplete="off" bind:value={honeypot} />
+          </div>

-        <label class="consent">
-          <input type="checkbox" bind:checked={consent} required />
-          <span>{t('wp_consent')}</span>
-        </label>
+          <label class="consent">
+            <input type="checkbox" bind:checked={consent} required />
+            <span>{t('wp_consent')}</span>
+          </label>

-        {#if status === 'success'}
-          <p class="status status--success">{t('wp_success')}</p>
-        {:else if status === 'error'}
-          <p class="status status--error">{t('wp_error')}</p>
-        {/if}
+          {#if status === 'error'}
+            <p class="status status--error">{t('wp_error')}</p>
+          {/if}

-        <button type="submit" class="submit button" disabled={submitting || !isDownloadable}>
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-            <path d="M12 16L7 11H10V4H14V11H17L12 16Z" fill="currentColor"/>
-            <path d="M5 20H19V18H5V20Z" fill="currentColor"/>
-          </svg>
-          {t('wp_download')}
-        </button>
-      </form>
-    </div>
+          <button type="submit" class="submit button download-icon" disabled={submitting || !isDownloadable}>
+            {t('wp_download')}
+          </button>
+        </form>
+      </div>
+    {/if}
  </div>
 </div>

@ -124,11 +126,11 @@
    color: var(--color-text);
    padding: 8rem 5rem;
    display: flex;
-    column-gap: 5rem;
+    justify-content: space-between;
  }

  .catch-area {
-    width: min(100%, 45vw);
+    width: 45vw;
  }

  .label {
@ -183,8 +185,10 @@

  /* ── Form area: desktop — right column ── */
  .form-area {
+    background: #000;
    margin-top: 2rem;
-    width: min(100%, 30vw);
+    width: 30vw;
+    align-self: stretch;
    display: flex;
    align-items: flex-start;
    justify-content: center;
@ -197,7 +201,6 @@
  }

  .form-card {
-    background: #0b0b18;
    border-radius: 4px;
    padding: 2.5rem;
    width: 100%;
@ -298,9 +301,36 @@
    border-radius: 2px;
  }

-  .status--success {
-    background: rgba(4, 254, 160, 0.15);
+  /* ── Thank you screen ── */
+  .thank-you {
+    border-radius: 4px;
+    width: 100%;
+    height: 70vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 1.5rem;
+    padding: 2.5rem;
+    text-align: center;
+  }
+
+  .thank-you-smiley {
+    width: 80px;
+    height: 80px;
+  }
+
+  .thank-you-heading {
+    font-family: "Danzza bold", sans-serif;
+    font-size: var(--font-size-title-section);
    color: var(--color-primary);
+    line-height: 1.2;
+  }
+
+  .thank-you-sub {
+    font-family: "Danzza", sans-serif;
+    font-size: var(--font-size-paragraph);
+    color: rgba(255, 255, 255, 0.6);
  }

  .status--error {
@ -311,30 +341,32 @@
  /* ── Mobile ── */
  @media (max-width: 700px) {
    .white-paper {
-      display: flex;
-      flex-direction: column;
+      display: block;
      height: 100vh;
      overflow: hidden;
-      padding: 6vh 1.25rem 0;
+      padding: 6rem 0;
      position: relative;
    }

+    .catch-area {
+      width: auto;
+    }
+
    .label {
      font-size: var(--font-size-paragraph-small);
      text-align: center;
      margin-bottom: 1rem;
    }

+    .title {
+      font-size: var(--font-size-title-section);
+    }
+    
    .text {
      flex: 1;
      align-items: center;
      text-align: center;
      gap: 1rem;
-      overflow: hidden;
-    }
-
-    .title {
-      font-size: clamp(2rem, 10vw, 3.5rem);
    }

    .description {
--- a/src/views/WhitePapers.svelte
+++ b/src/views/WhitePapers.svelte
@ -173,7 +173,7 @@

  @media (max-width: 700px) {
    .white-papers {
-      padding: 0 1.25rem;
+      padding: 0 2rem;
    }
  }
 </style>