diff --git a/assets/img/icon-download.svg b/assets/img/icon-download.svg new file mode 100644 index 0000000..abffe6d --- /dev/null +++ b/assets/img/icon-download.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/assets/img/smiley.svg b/assets/img/smiley.svg new file mode 100644 index 0000000..1259d5f --- /dev/null +++ b/assets/img/smiley.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/site/blueprints/pages/white-paper.yml b/site/blueprints/pages/white-paper.yml index 57d1c52..c97619b 100644 --- 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 diff --git a/site/blueprints/pages/white-papers.yml b/site/blueprints/pages/white-papers.yml index 816c625..7c05d1e 100644 --- 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 diff --git a/site/blueprints/site.yml b/site/blueprints/site.yml index f4a3748..61507b1 100644 --- 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 diff --git a/site/config/routes/download-white-paper.php b/site/config/routes/download-white-paper.php index 41d93aa..05d6a5c 100644 --- 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'); diff --git a/src/i18n/index.js b/src/i18n/index.js index 4e6dd2d..b7c4601 100644 --- 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.", diff --git a/src/styles/buttons.css b/src/styles/buttons.css index c578ba5..08e91b6 100644 --- 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; diff --git a/src/views/Home.svelte b/src/views/Home.svelte index 866422f..d237d8b 100644 --- a/src/views/Home.svelte +++ b/src/views/Home.svelte @@ -78,18 +78,14 @@

{data.hero.subtitle}

-
e.key === 'Enter' && handleExplore()} - role="button" tabindex="0" > -
-

{data.hero.ctaText} -

-
+ diff --git a/src/views/Portfolio.svelte b/src/views/Portfolio.svelte index 7b0992e..28c66d2 100644 --- a/src/views/Portfolio.svelte +++ b/src/views/Portfolio.svelte @@ -129,7 +129,7 @@
{#each currentProject.externalLinks as link} - {link.label} + {link.label} {/each}
diff --git a/src/views/WhitePaper.svelte b/src/views/WhitePaper.svelte index 3f0a9fd..769aa8a 100644 --- a/src/views/WhitePaper.svelte +++ b/src/views/WhitePaper.svelte @@ -80,42 +80,44 @@
-
-

{t('wp_form_intro')}

-
-
- - -
- - - + {#if status === 'success'} +
+ +

{t('wp_success_heading')}

+

{t('wp_success_sub')}

+
+ {:else} +
+

{t('wp_form_intro')}

+ +
+ + +
+ + + - + - + - {#if status === 'success'} -

{t('wp_success')}

- {:else if status === 'error'} -

{t('wp_error')}

- {/if} + {#if status === 'error'} +

{t('wp_error')}

+ {/if} - - -
+ + +
+ {/if}
@@ -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 { diff --git a/src/views/WhitePapers.svelte b/src/views/WhitePapers.svelte index e0cbfba..4fff64e 100644 --- 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; } }