diff --git a/assets/img/icon-download.svg b/assets/img/icon-download.svg deleted file mode 100644 index abffe6d..0000000 --- a/assets/img/icon-download.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - - - diff --git a/assets/img/smiley.svg b/assets/img/smiley.svg deleted file mode 100644 index 1259d5f..0000000 --- a/assets/img/smiley.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/site/blueprints/pages/white-paper.yml b/site/blueprints/pages/white-paper.yml index c97619b..57d1c52 100644 --- a/site/blueprints/pages/white-paper.yml +++ b/site/blueprints/pages/white-paper.yml @@ -59,3 +59,50 @@ 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 7c05d1e..816c625 100644 --- a/site/blueprints/pages/white-papers.yml +++ b/site/blueprints/pages/white-papers.yml @@ -41,48 +41,3 @@ 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 61507b1..f4a3748 100644 --- a/site/blueprints/site.yml +++ b/site/blueprints/site.yml @@ -86,3 +86,28 @@ 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 05d6a5c..41d93aa 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('livres-blancs')->update(['contactDatabase' => \Kirby\Data\Data::encode($entries, 'yaml')]); + $page->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 b7c4601..4e6dd2d 100644 --- a/src/i18n/index.js +++ b/src/i18n/index.js @@ -64,13 +64,9 @@ 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_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_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_error: { fr: "Une erreur est survenue, veuillez réessayer.", diff --git a/src/styles/buttons.css b/src/styles/buttons.css index 08e91b6..c578ba5 100644 --- a/src/styles/buttons.css +++ b/src/styles/buttons.css @@ -37,13 +37,13 @@ button[disabled] { color: var(--color-primary); } -.button:not([disabled]):hover::before { +.button:hover::before { filter: invert(84%) sepia(30%) saturate(1700%) hue-rotate(87deg) brightness(100%) contrast(99%); } - -.button.with-icon::before { +.button.earth-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,8 +51,9 @@ button[disabled] { transition: all 0.5s ease-out; } -.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:hover .earth-icon { + filter: brightness(0) saturate(100%) invert(77%) sepia(82%) saturate(507%) + hue-rotate(91deg) brightness(101%) contrast(97%); } .button.play-icon::before { @@ -65,16 +66,6 @@ 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 d237d8b..866422f 100644 --- a/src/views/Home.svelte +++ b/src/views/Home.svelte @@ -78,14 +78,18 @@

{data.hero.subtitle}

- +

+ diff --git a/src/views/Portfolio.svelte b/src/views/Portfolio.svelte index 28c66d2..7b0992e 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 769aa8a..3f0a9fd 100644 --- a/src/views/WhitePaper.svelte +++ b/src/views/WhitePaper.svelte @@ -80,44 +80,42 @@
- {#if status === 'success'} -
- -

{t('wp_success_heading')}

-

{t('wp_success_sub')}

-
- {:else} -
-

{t('wp_form_intro')}

-
-
- - -
- - - +
+

{t('wp_form_intro')}

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

{t('wp_error')}

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

{t('wp_success')}

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

{t('wp_error')}

+ {/if} - - -
- {/if} + + +
@@ -126,11 +124,11 @@ color: var(--color-text); padding: 8rem 5rem; display: flex; - justify-content: space-between; + column-gap: 5rem; } .catch-area { - width: 45vw; + width: min(100%, 45vw); } .label { @@ -185,10 +183,8 @@ /* ── Form area: desktop — right column ── */ .form-area { - background: #000; margin-top: 2rem; - width: 30vw; - align-self: stretch; + width: min(100%, 30vw); display: flex; align-items: flex-start; justify-content: center; @@ -201,6 +197,7 @@ } .form-card { + background: #0b0b18; border-radius: 4px; padding: 2.5rem; width: 100%; @@ -301,36 +298,9 @@ border-radius: 2px; } - /* ── 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); + .status--success { + background: rgba(4, 254, 160, 0.15); 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 { @@ -341,32 +311,30 @@ /* ── Mobile ── */ @media (max-width: 700px) { .white-paper { - display: block; + display: flex; + flex-direction: column; height: 100vh; overflow: hidden; - padding: 6rem 0; + padding: 6vh 1.25rem 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 4fff64e..e0cbfba 100644 --- a/src/views/WhitePapers.svelte +++ b/src/views/WhitePapers.svelte @@ -173,7 +173,7 @@ @media (max-width: 700px) { .white-papers { - padding: 0 2rem; + padding: 0 1.25rem; } }