feat: ✨ update for engine v3.0.0

favicon/safari-pinned-tab.svg

@@ -2,108 +2,37 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="680.000000pt" height="680.000000pt" viewBox="0 0 680.000000 680.000000"
+ width="784.000000pt" height="784.000000pt" viewBox="0 0 784.000000 784.000000"
  preserveAspectRatio="xMidYMid meet">
 <metadata>
 Created by potrace 1.14, written by Peter Selinger 2001-2017
 </metadata>
-<g transform="translate(0.000000,680.000000) scale(0.100000,-0.100000)"
+<g transform="translate(0.000000,784.000000) scale(0.100000,-0.100000)"
 fill="#000000" stroke="none">
-<path d="M3378 6575 c-2 -1 -61 -5 -133 -9 -161 -7 -208 -12 -365 -38 -448
--73 -906 -257 -1278 -515 -247 -171 -495 -397 -647 -588 -22 -27 -43 -52 -46
--55 -4 -3 -46 -59 -94 -124 -239 -329 -418 -714 -514 -1106 -16 -69 -32 -136
--35 -150 -26 -146 -41 -260 -51 -385 -5 -67 -6 -403 -1 -450 2 -16 7 -65 10
--107 4 -43 9 -88 11 -100 2 -13 9 -54 15 -93 46 -294 145 -604 285 -890 71
--143 181 -331 248 -423 51 -69 141 -187 147 -192 3 -3 29 -34 59 -70 64 -76
-250 -263 334 -335 290 -248 669 -467 1019 -590 77 -27 256 -81 298 -89 14 -3
-34 -7 45 -10 59 -15 231 -46 282 -52 32 -3 61 -8 64 -10 37 -23 711 -22 749 1
-3 2 33 6 68 9 34 4 119 18 189 32 1118 222 2042 1038 2407 2128 37 110 93 325
-110 426 14 84 17 101 35 230 17 119 11 630 -9 770 -127 904 -598 1679 -1340
-2205 -429 304 -894 479 -1485 560 -22 3 -107 8 -190 11 -82 3 -158 7 -167 8
--9 2 -18 3 -20 1z m-74 -317 c0 -54 -2 -99 -5 -102 -2 -2 -49 -6 -104 -10 -55
--3 -115 -8 -132 -11 -18 -3 -45 -7 -60 -9 -95 -13 -287 -55 -358 -76 -543
--168 -959 -431 -1315 -831 -111 -125 -200 -240 -245 -317 -5 -9 -12 -19 -15
--22 -15 -13 -123 -206 -167 -295 -152 -311 -247 -665 -269 -1000 -4 -55 -8
--102 -10 -104 -2 -2 -48 -4 -101 -5 l-98 0 1 59 c1 75 16 236 30 315 2 14 7
-41 10 60 28 173 122 480 206 668 99 223 256 484 389 647 150 183 379 414 481
-483 13 9 25 18 28 22 13 15 156 115 250 175 139 88 386 211 541 267 114 42
-308 101 369 113 14 3 70 13 125 24 108 21 155 28 255 37 36 4 66 7 67 8 1 1
-30 1 65 1 l63 0 -1 -97z m431 86 c28 -2 61 -7 75 -9 14 -3 41 -7 60 -10 427
--66 835 -225 1199 -469 58 -39 113 -76 121 -83 8 -7 31 -25 51 -40 103 -81
-146 -120 279 -253 171 -171 247 -263 378 -460 259 -388 428 -848 477 -1295 4
--33 8 -71 10 -83 8 -46 8 -152 1 -159 -10 -10 -187 -10 -193 1 -3 4 -7 31 -8
-60 -7 129 -14 180 -61 439 -3 15 -21 81 -39 147 -215 753 -732 1376 -1434
-1730 -240 121 -542 221 -771 256 -19 2 -46 7 -60 9 -78 14 -168 22 -257 24
-l-53 1 0 106 0 106 88 -6 c48 -4 110 -9 137 -12z m-180 -398 c500 -20 1018
--215 1444 -543 128 -99 364 -340 467 -478 295 -394 469 -844 511 -1320 9 -109
-9 -361 0 -468 -19 -215 -92 -526 -162 -692 -60 -145 -96 -221 -147 -313 -349
--628 -937 -1084 -1622 -1258 -110 -28 -181 -43 -241 -50 -22 -3 -47 -7 -55 -9
--67 -18 -427 -26 -575 -12 -400 38 -739 150 -1094 358 -233 138 -502 372 -682
-594 -269 333 -461 755 -533 1172 -14 79 -19 118 -31 243 -5 50 -5 358 0 405 2
-22 7 65 10 95 3 30 7 64 9 75 2 11 7 40 11 65 18 112 24 135 62 268 149 519
-449 969 878 1316 300 242 757 454 1105 511 19 3 58 10 85 15 85 16 125 20 260
-26 72 4 131 8 133 9 2 2 11 1 20 -1 9 -1 76 -5 147 -8z m-2924 -2733 c0 -32 2
--67 4 -78 1 -11 6 -51 9 -90 19 -203 114 -566 191 -733 14 -29 25 -55 25 -58
-0 -4 51 -107 115 -234 39 -75 185 -290 270 -395 102 -127 277 -304 385 -390
-41 -33 77 -62 80 -65 3 -3 30 -23 60 -45 184 -135 418 -263 639 -350 139 -54
-393 -125 501 -140 14 -2 52 -8 85 -14 60 -10 129 -18 239 -26 32 -2 62 -8 65
--14 9 -14 7 -173 -2 -188 -4 -7 -13 -10 -20 -8 -7 2 -50 6 -97 9 -74 4 -267
-28 -325 40 -289 60 -494 127 -740 245 -212 102 -409 226 -600 379 -100 81
--350 332 -429 432 -37 47 -73 92 -79 100 -103 130 -272 425 -352 615 -81 193
--159 457 -190 640 -3 17 -7 39 -9 50 -2 11 -7 49 -11 85 -4 36 -9 73 -10 82
--2 9 -7 60 -10 112 l-7 96 106 0 106 0 1 -57z m5763 27 c-4 -63 -16 -203 -19
--218 -1 -9 -6 -42 -9 -72 -9 -81 -42 -246 -66 -330 -115 -414 -268 -728 -513
--1055 -141 -188 -367 -417 -532 -540 -22 -16 -42 -33 -45 -36 -13 -16 -235
--162 -323 -213 -237 -136 -574 -269 -790 -312 -10 -2 -26 -5 -35 -8 -9 -3 -30
--8 -47 -11 -31 -5 -62 -11 -105 -20 -14 -3 -41 -7 -60 -9 -19 -3 -55 -7 -80
--10 -66 -9 -127 -14 -195 -17 l-60 -3 -3 102 c-3 100 -2 102 20 103 54 2 241
-22 318 34 560 86 1124 376 1526 787 173 175 294 329 407 514 54 88 177 324
-177 338 0 3 9 25 20 49 81 172 177 554 196 780 6 71 12 146 13 165 1 10 26 12
-104 10 102 -3 102 -3 101 -28z"/>
-<path d="M5081 3581 c-12 -7 -14 -48 -15 -210 l-1 -200 40 -7 c142 -27 216 21
-218 139 1 67 -18 113 -56 137 -27 16 -82 22 -111 10 -24 -9 -24 -8 -22 66 1
-68 -1 74 -19 74 -11 0 -26 -4 -34 -9z m148 -198 c26 -22 36 -86 20 -125 -12
--30 -66 -54 -97 -44 -16 5 -19 18 -19 87 -1 74 0 81 20 89 34 13 53 12 76 -7z"/>
-<path d="M1619 3543 c-81 -24 -119 -75 -127 -169 -13 -169 94 -249 281 -208
-l27 6 0 92 0 93 -35 1 -35 1 0 -68 c0 -76 -4 -81 -59 -75 -77 9 -116 68 -106
-157 6 59 26 94 61 107 34 13 101 13 126 -1 23 -12 38 1 38 34 0 34 -99 52
--171 30z"/>
-<path d="M2789 3550 c-91 -16 -150 -88 -154 -189 -5 -158 106 -235 284 -196
-l27 6 0 92 -1 92 -30 1 c-16 1 -32 -2 -35 -7 -3 -5 -5 -35 -5 -68 2 -65 -2
--69 -54 -65 -80 6 -110 48 -108 147 2 57 6 70 28 93 31 31 100 43 149 26 28
--10 32 -9 40 14 13 32 13 31 -7 39 -37 14 -99 21 -134 15z"/>
-<path d="M4215 3542 c-1 -2 1 -20 6 -40 50 -215 62 -263 76 -299 14 -38 19
--43 47 -43 32 0 33 2 69 104 20 57 37 109 37 115 0 6 4 11 8 11 4 0 23 -46 41
--102 18 -57 38 -109 43 -115 6 -7 23 -13 38 -13 25 0 29 6 48 63 11 34 30 105
-42 157 12 52 26 110 30 127 10 37 6 41 -34 39 -31 -2 -39 -15 -51 -96 -11 -73
--39 -190 -43 -185 -3 3 -22 56 -42 117 -36 109 -39 113 -68 116 l-30 3 -38
--122 c-37 -117 -39 -121 -50 -93 -6 16 -21 81 -34 145 l-23 116 -34 -1 c-19
--1 -36 -2 -38 -4z"/>
-<path d="M1936 3440 c-52 -26 -71 -64 -70 -135 0 -52 5 -69 27 -98 29 -39 83
--58 144 -50 57 6 63 10 63 38 0 25 -2 26 -51 21 -27 -3 -60 0 -73 5 -25 12
--49 45 -42 58 3 5 46 8 96 7 54 -1 90 3 91 9 13 122 -83 197 -185 145z m106
--62 c19 -19 20 -22 4 -33 -17 -13 -106 -14 -106 -2 0 4 0 11 0 16 0 18 32 41
-56 41 13 0 34 -10 46 -22z"/>
-<path d="M2255 3453 c-67 -13 -61 1 -61 -153 l0 -140 33 0 32 0 3 118 3 117
-30 3 c59 6 70 -14 73 -132 l4 -106 28 0 c15 0 30 6 32 13 10 24 1 195 -11 223
--6 16 -21 36 -33 43 -22 13 -96 21 -133 14z"/>
-<path d="M3053 3450 c-24 -10 -27 -18 -18 -42 4 -11 19 -13 56 -10 55 5 79 -8
-79 -42 0 -19 -5 -21 -34 -18 -80 9 -141 -40 -130 -104 11 -67 79 -90 201 -69
-l32 6 -3 112 c-3 113 -13 149 -46 163 -26 10 -114 13 -137 4z m117 -200 c0
--40 0 -40 -38 -40 -40 0 -62 14 -62 40 0 26 22 40 62 40 38 0 38 0 38 -40z"/>
-<path d="M3360 3451 l-35 -6 -3 -143 -3 -143 33 3 33 3 2 105 c0 58 2 111 2
-118 1 7 15 12 36 12 47 0 58 -24 59 -140 l2 -95 32 -3 33 -3 -3 115 -3 116 33
-6 c37 7 61 -8 67 -42 2 -10 4 -59 4 -107 l1 -88 33 3 32 3 -1 112 c-1 130 -12
-156 -71 173 -30 9 -47 9 -82 -4 -34 -11 -49 -12 -65 -4 -24 13 -84 17 -136 9z"/>
-<path d="M3848 3436 c-70 -46 -88 -160 -35 -229 36 -47 127 -66 195 -42 19 7
-11 61 -8 57 -50 -11 -85 -10 -110 3 -17 9 -30 20 -30 24 0 5 -2 16 -5 24 -5
-11 11 14 90 13 l95 -1 0 38 c0 47 -22 97 -52 116 -37 23 -103 22 -140 -3z
-m104 -48 c8 -7 18 -22 20 -33 5 -19 1 -21 -51 -19 -31 1 -60 2 -64 3 -9 1 12
-43 27 53 17 12 51 9 68 -4z"/>
-<path d="M4822 3450 c-56 -24 -85 -74 -85 -146 0 -62 29 -116 72 -134 62 -25
-179 -14 167 16 -3 9 -6 22 -6 30 0 9 -5 12 -11 8 -19 -12 -79 -13 -107 -3 -29
-11 -42 26 -42 50 0 13 13 16 83 14 45 0 87 1 93 3 14 4 11 64 -5 104 -19 50
--104 81 -159 58z m94 -75 c9 -14 14 -29 10 -32 -4 -4 -31 -8 -61 -8 -60 -2
--70 11 -38 47 24 27 69 23 89 -7z"/>
+<path d="M3666 7690 c-1193 -93 -2233 -670 -2906 -1611 -372 -520 -596 -1106
+-676 -1769 -24 -199 -24 -581 0 -780 133 -1104 689 -2039 1591 -2677 533 -377
+1153 -609 1840 -689 206 -24 604 -24 810 0 921 107 1717 486 2350 1120 545
+546 902 1223 1040 1970 45 243 59 404 59 666 0 262 -14 423 -59 666 -210 1137
+-943 2121 -1985 2667 -417 219 -912 368 -1400 422 -174 19 -513 27 -664 15z
+m2089 -1595 c126 -33 297 -135 377 -224 92 -103 130 -251 94 -362 -20 -61 -81
+-163 -137 -230 -49 -59 -152 -129 -189 -129 -34 0 -45 23 -71 145 -36 171
+-118 299 -223 350 -120 58 -350 56 -501 -4 -353 -142 -630 -477 -840 -1017
+-78 -200 -156 -509 -186 -739 -18 -142 -7 -377 25 -505 35 -137 108 -289 177
+-365 107 -117 260 -195 395 -203 73 -4 88 -1 140 22 165 76 307 257 387 496
+31 94 153 587 162 656 6 41 4 54 -11 68 -25 26 -114 16 -325 -34 -277 -66
+-394 -75 -453 -37 -24 16 -26 23 -26 85 0 123 45 267 97 314 33 30 99 47 271
+68 92 11 226 31 297 45 72 13 173 31 225 39 117 19 557 52 567 43 19 -20 -89
+-536 -243 -1164 -192 -784 -232 -1013 -241 -1367 l-6 -219 -57 6 c-100 9 -311
+104 -397 180 -44 39 -72 98 -73 154 0 23 11 98 25 166 14 69 28 157 31 196 l7
+70 -75 -29 c-41 -15 -133 -43 -203 -60 -124 -31 -134 -32 -274 -27 -156 6
+-223 20 -426 90 -185 63 -248 105 -328 211 -32 44 -83 130 -112 190 -199 412
+-227 864 -85 1401 57 215 187 519 301 702 197 314 551 644 855 796 163 81 339
+136 634 197 207 43 317 50 415 25z m-2760 -77 c-4 -18 -22 -85 -40 -148 -83
+-290 -228 -893 -354 -1475 -93 -433 -115 -546 -215 -1115 -97 -552 -106 -609
+-106 -675 l0 -56 38 7 c119 21 434 108 537 148 66 26 186 83 266 126 145 79
+262 130 299 130 19 0 20 -7 20 -97 0 -130 -37 -287 -88 -373 -120 -203 -535
+-429 -917 -501 -159 -30 -381 -33 -470 -6 -93 29 -154 65 -216 126 -97 97
+-115 199 -89 506 44 513 410 2368 575 2910 69 225 164 365 291 426 70 33 345
+96 427 98 l49 1 -7 -32z"/>
 </g>
 </svg>

favicon/site.webmanifest

@@ -1,6 +1,6 @@
 {
-    "name": "",
-    "short_name": "",
+    "name": "Le Gaulois Tour de France",
+    "short_name": "Le Gaulois TDF",
     "icons": [
         {
             "src": "/android-chrome-192x192.png",
@@ -16,4 +16,4 @@
     "theme_color": "#ffffff",
     "background_color": "#ffffff",
     "display": "standalone"
-}
+}

sass/base/_common.scss

@@ -1 +1,110 @@
 // Empty.
+.text-border-white {
+    text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
+        1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
+}
+
+.geometric-form-background {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    background: $color-primary;
+    clip-path: polygon(8px 0, 100% 8px, calc(100% - 4px) calc(100% - 4px), 0 100%);
+    transform: translate(-50%, -50%);
+}
+
+.title-bikes {
+    font-size: 4rem;
+    line-height: .7;
+
+    @include media-breakpoint-up(lg) {
+        padding: 0 12rem;
+
+        &::before {
+            position: absolute;
+            z-index: 1;
+            bottom: -.5rem;
+            left: 0.3rem;
+            width: 12rem;
+            height: 4.5rem;
+            background-image: url('@Theme/images/Velos-rouges.png');
+            background-repeat: no-repeat;
+            background-size: contain;
+            content: "";
+        }
+    }
+}
+
+.default-image-background {
+    background-image: url('@Theme/images/home_background.png');
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.border-custom {
+    border-top: 4px solid #{$color-white};
+
+    @include media-breakpoint-up(lg) {
+        border-top: 0;
+        border-left: 4px solid #{$color-white};
+    }
+}
+
+.details {
+    &-left, &-right {
+        top: -2rem;
+        width: 30rem;
+    }
+
+    &-left {
+        left: -2rem;
+        transform: rotate(-10deg);
+    }
+
+    &-right {
+        right: -2rem;
+        transform: rotate(10deg);
+    }
+}
+
+@include media-breakpoint-up(lg) {
+    .gifts-imgs::before {
+        position: absolute;
+        z-index: 2;
+        bottom: 0;
+        left: 10vw;
+        width: 10rem;
+        height: 10rem;
+        background-image: url('@Theme/images/cadeau-rouge.png');
+        background-repeat: no-repeat;
+        background-size: contain;
+        content: "";
+    }
+
+    .gifts-imgs::after {
+        position: absolute;
+        z-index: 2;
+        right: 10vw;
+        bottom: 0;
+        width: 10rem;
+        height: 10rem;
+        background-image: url('@Theme/images/cadeau-bleu.png');
+        background-repeat: no-repeat;
+        background-size: contain;
+        content: "";
+    }
+
+    .gift-after::before {
+        position: absolute;
+        z-index: 2;
+        right: 0;
+        bottom: -5rem;
+        width: 10rem;
+        height: 10rem;
+        background-image: url('@Theme/images/cadeau-bleu.png');
+        background-repeat: no-repeat;
+        background-size: contain;
+        content: "";
+    }
+}

sass/base/_fonts.scss

@@ -1 +1,70 @@
-// Empty.
+@font-face {
+    font-family: "Barlow Bold";
+    font-style: normal;
+    font-weight: normal;
+    src: url("@Theme/fonts/barlow/Barlow-Bold.woff2") format("ttf"),
+        url("@Theme/fonts/barlow/Barlow-Bold.woff") format("woff"),
+        url("@Theme/fonts/barlow/Barlow-Bold.ttf") format("ttf"),
+        url("@Theme/fonts/barlow/Barlow-Bold.svg") format("svg"),
+        url("@Theme/fonts/barlow/Barlow-Bold.eot") format("eot");
+}
+
+@font-face {
+    font-family: "Barlow Condensed Medium";
+    font-style: normal;
+    font-weight: normal;
+    src: url("@Theme/fonts/barlow/BarlowCondensed-Medium.woff2") format("ttf"),
+        url("@Theme/fonts/barlow/BarlowCondensed-Medium.woff") format("woff"),
+        url("@Theme/fonts/barlow/BarlowCondensed-Medium.ttf") format("ttf"),
+        url("@Theme/fonts/barlow/BarlowCondensed-Medium.svg") format("svg"),
+        url("@Theme/fonts/barlow/BarlowCondensed-Medium.eot") format("eot");
+}
+
+@font-face {
+    font-family: "Barlow Condensed Semi Bold";
+    font-style: normal;
+    font-weight: normal;
+    src: url("@Theme/fonts/barlow/BarlowCondensed-SemiBold.woff2") format("ttf"),
+        url("@Theme/fonts/barlow/BarlowCondensed-SemiBold.woff") format("woff"),
+        url("@Theme/fonts/barlow/BarlowCondensed-SemiBold.ttf") format("ttf"),
+        url("@Theme/fonts/barlow/BarlowCondensed-SemiBold.svg") format("svg"),
+        url("@Theme/fonts/barlow/BarlowCondensed-SemiBold.eot") format("eot");
+}
+
+@font-face {
+    font-family: "Barlow Medium";
+    font-style: normal;
+    font-weight: normal;
+    src: url("@Theme/fonts/barlow/Barlow-Medium.woff2") format("ttf"),
+        url("@Theme/fonts/barlow/Barlow-Medium.woff") format("woff"),
+        url("@Theme/fonts/barlow/Barlow-Medium.ttf") format("ttf"),
+        url("@Theme/fonts/barlow/Barlow-Medium.svg") format("svg"),
+        url("@Theme/fonts/barlow/Barlow-Medium.eot") format("eot");
+}
+
+@font-face {
+    font-family: Veneer;
+    font-style: normal;
+    font-weight: normal;
+    src: url("@Theme/fonts/Veneer/regular/veneer.ttf") format("truetype");
+}
+
+.f-veneer {
+    font-family: Veneer, sans-serif;
+}
+
+.f-barlow-bold {
+    font-family: "Barlow Bold", sans-serif;
+}
+
+.f-barlow-condensed-medium {
+    font-family: "Barlow Condensed Medium", sans-serif;
+}
+
+.f-barlow-condensed-semi-bold {
+    font-family: "Barlow Condensed Semi Bold", sans-serif;
+}
+
+.f-barlow-medium {
+    font-family: "Barlow Medium", sans-serif;
+}

sass/base/_layout.scss

@@ -44,7 +44,7 @@ body {
 
     > footer {
         .share {
-            width: 1.6rem;
+            width: 2.5rem;
         }
 
         .list-inline {
@@ -76,25 +76,22 @@ body {
 
         @include media-breakpoint-up(md) {
             .downlink {
-                position: relative;
-                height: 6rem;
-
                 > a {
-                    position: absolute;
-                    top: -3rem;
-                    left: 50%;
-                    width: 11rem;
-                    max-height: 8rem;
-                    transform: translateX(-50%);
+                    position: relative;
 
                     > span {
-                        position: relative;
-                        top: -3rem;
+                        position: absolute;
+                        right: 5%;
+                        bottom: 0;
                     }
                 }
             }
         }
 
+        #newsletter-email::placeholder {
+            color: $color-white !important;
+        }
+
         #page-up {
             position: fixed;
             right: 0;

sass/fo.scss

@@ -15,9 +15,7 @@
 @import "./base/layout";
 
 // * PAGES
-@import "./pages/teaser";
 @import "./pages/home";
 @import "./pages/static_page";
 @import "./pages/products";
 @import "./pages/won";
-@import "./pages/participate";

sass/mail-theme.scss

@@ -138,9 +138,7 @@ p {
 /* Logo */
 
 .logo {
-    width: 75px;
-    height: 75px;
-    max-height: 75px;
+    width: 200px;
 }
 
 /* Body */

sass/pages/_home.scss

@@ -1,4 +1,186 @@
 .home-page {
+    #main-section {
+        .gift-label {
+            top: 25%;
+        }
+
+        .gift-discount {
+            border-style: dashed !important;
+        }
+
+
+        .wheel-up {
+            top: 15%;
+            left: 94%;
+            width: 40%;
+            max-width: fit-content;
+            transform: translate(-50%, -50%);
+        }
+
+        .details {
+            &-left, &-right {
+                top: -4rem;
+                width: 45rem;
+            }
+
+            &-left {
+                left: -2rem;
+                transform: rotate(-10deg);
+            }
+
+            &-right {
+                right: -2rem;
+                transform: rotate(10deg);
+            }
+        }
+
+        #home-gifts {
+            .gifts-background {
+                left: -5%;
+            }
+
+            .separation {
+                width: 0;
+                height: 80%;
+            }
+
+            .main-quantity {
+                font-size: 10rem;
+                line-height: .9;
+
+                ~ .small {
+                    font-size: 1.5rem;
+                    line-height: .9;
+                }
+
+                @include media-breakpoint-up(xl) {
+                    font-size: 18rem;
+                    line-height: .9;
+
+                    ~ .small {
+                        font-size: 3rem;
+                        line-height: .9;
+                    }
+                }
+            }
+
+            .second-gift {
+                .quantity {
+                    font-size: 6rem;
+                    line-height: .9;
+
+                    @include media-breakpoint-up(xl) {
+                        font-size: 10rem;
+                    }
+                }
+
+                .br-text {
+                    font-size: 1.5rem;
+                    line-height: .9;
+
+                    @include media-breakpoint-up(xl) {
+                        font-size: 2rem;
+                    }
+                }
+            }
+
+            .gift-label {
+                font-size: 2rem;
+                line-height: .9;
+
+                @include media-breakpoint-up(xl) {
+                    font-size: 4rem;
+                }
+            }
+
+            .col-md-6 .img-fluid {
+                max-width: 10rem;
+
+                @include media-breakpoint-up(xl) {
+                    max-width: 16rem;
+                }
+            }
+
+            .border-custom {
+                @include media-breakpoint-up(md) {
+                    border-left: 4px solid #{$color-dark};
+                }
+            }
+        }
+    }
+
+    #howto {
+        @keyframes spin {
+            from {
+                transform: rotate(0deg);
+            }
+
+            to {
+                transform: rotate(360deg);
+            }
+        }
+
+        .rotate-anim {
+            animation: spin 15s linear infinite;
+        }
+    }
+
+    #gifts {
+        background-color: #F3F1F2;
+
+        .details {
+            &-left, &-right {
+                top: -2rem;
+                width: 30rem;
+            }
+
+            &-left {
+                left: -2rem;
+                transform: rotate(-10deg);
+            }
+
+            &-right {
+                right: -2rem;
+                transform: rotate(10deg);
+            }
+        }
+
+        .carousel-item .rounded-circle {
+            width: 50%;
+
+            @include media-breakpoint-up(xl) {
+                width: 75%;
+            }
+        }
+
+        .carousel-indicators .rounded-circle {
+            width: 1rem;
+            height: 1rem;
+        }
+
+        @include media-breakpoint-up(lg) {
+            .carousel-inner::before {
+                position: absolute;
+                z-index: 1;
+                right: 0;
+                bottom: -2rem;
+                width: 10rem;
+                height: 10rem;
+                background-image: url('@Theme/images/cadeau-bleu.png');
+                background-repeat: no-repeat;
+                background-size: contain;
+                content: "";
+            }
+        }
+
+        @include media-breakpoint-up(xl) {
+            .carousel-inner::before {
+                right: -0.5rem;
+                bottom: -4rem;
+            }
+        }
+    }
+
     .picture-100-win {
         left: 40%;
         transform: translateX(-60%);
@@ -16,17 +198,13 @@
 
     .badge-vertical {
         width: 4rem;
+        height: 4rem;
         padding: 0.8rem;
 
-        @include media-breakpoint-up(md) {
-            width: 7rem;
-            padding: 1.3rem;
-        }
-
         &::after {
             display: block;
-            width: 0.4rem;
-            height: 200%;
+            width: 0.3rem;
+            height: 215%;
             margin: 0 auto;
             background-color: $color-white;
             content: ' ';
@@ -35,10 +213,16 @@
         &:last-child::after  {
             display: none;
         }
-    }
 
-    .picture-products {
-        max-width: 20rem;
+        @include media-breakpoint-up(md) {
+            width: 10rem;
+            height: 10rem;
+            padding: .1rem;
+
+            &::after {
+                height: 50%;
+            }
+        }
     }
 
     #carousel-lots {
@@ -46,7 +230,7 @@
             max-width: 40rem;
         }
 
-        .carousel-item {
+        .carousel-item, .carousel-item-content {
             min-height: 55rem;
 
             @include media-breakpoint-up(sm) {

sass/pages/_participate.scss

@@ -1,23 +0,0 @@
-.participate-page {
-    .br-and-arrow {
-        position: relative;
-        text-align: center;
-
-        img {
-            width: 9rem;
-        }
-
-        &::after {
-            position: relative;
-            display: inline-block;
-            width: 3rem;
-            height: 4rem;
-            background-image: url('@Theme/images/arrow-code.png');
-            background-position: center;
-            background-repeat: no-repeat;
-            background-size: contain;
-            content: ' ';
-            transform: translateY(100%);
-        }
-    }
-}

sass/pages/_teaser.scss

@@ -1,20 +0,0 @@
-.teaser-page {
-    .container-big {
-        max-width: 1500px;
-    }
-
-    .picture-100-win {
-        left: 40%;
-        transform: translateX(-60%);
-    }
-
-    @include media-breakpoint-up(xl) {
-        .main-rotate {
-            transform: rotateZ(-5deg);
-        }
-
-        .anti-rotate {
-            transform: rotateZ(5deg);
-        }
-    }
-}

sass/pages/_won.scss

@@ -1,27 +1,33 @@
 @import "./../partials/spin_wheel";
+@import "./../partials/scratch";
 
 .won-page {
     #wheel-wrapper  {
         position: relative;
-        width: 16rem;
+        width: 14.4rem;
+        height: 14.4rem;
         margin: 0 auto;
-    }
+        background-image: url('@Theme/images/Roue.png');
+        background-repeat: no-repeat;
+        background-size: cover;
 
-    @include media-breakpoint-up(md) {
-        .prize-rotate {
-            transform: rotateZ(-3deg);
+        @include media-breakpoint-up(lg) {
+            width: 29.4rem;
+            height: 29.4rem;
         }
 
-        .anti-rotate {
-            transform: rotateZ(3deg);
-        }
-    }
-
-    .wide-banner {
-        position: relative;
-
-        @include media-breakpoint-up(md) {
-            right: -2rem;
+        &::before {
+            position: absolute;
+            z-index: 1;
+            top: -1.5rem;
+            left: 50%;
+            width: 6rem;
+            height: 4.5rem;
+            background-image: url('@Theme/images/wheel-arrow.png');
+            background-repeat: no-repeat;
+            background-size: contain;
+            content: "";
+            transform: translateX(-50%);
         }
     }
 }

sass/partials/_scratch.scss

@@ -0,0 +1,7 @@
+#scratch-wrapper {
+    canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+}

sass/partials/_spin_wheel.scss

@@ -7,23 +7,17 @@
     .wheel {
         position: relative;
         overflow: hidden;
-        width: 16rem;
-        height: 16rem;
-        border: 0.4rem solid #{$color-white};
+        width: 12rem;
+        height: 12rem;
         border-radius: 50%;
         margin: 0;
-        box-shadow: rgb(0 0 0 / 20%) 0 0 10px, rgb(0 0 0 / 5%) 0 3px 0;
+        background-color: #{$color-secondary};
+        outline: 0.4rem solid #{$color-white};
         transform: rotate(0deg);
 
-        &::before {
-            position: absolute;
-            z-index: 1000;
-            left: 0;
-            width: calc(16rem - 0.2rem * 2);
-            height: calc(16rem - 0.2rem * 2);
-            border: 0.2rem solid rgb(0 0 0 / 10%);
-            border-radius: 50%;
-            content: "";
+        @include media-breakpoint-up(lg) {
+            width: 25rem;
+            height: 25rem;
         }
 
         .wheel-inner {
@@ -34,16 +28,21 @@
 
         .wheel-sec {
             position: absolute;
-            top: -.1rem;
-            left: -.1rem;
-            width: 16rem;
-            height: calc(16rem / 2);
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: calc(12rem / 2);
             background-origin: border-box;
             background-position: center;
             background-repeat: no-repeat;
             background-size: auto;
             opacity: 1;
-            transform-origin: calc(16rem / 2) calc(16rem / 2);
+            transform-origin: calc(12rem / 2) calc(12rem / 2);
+
+            @include media-breakpoint-up(lg) {
+                height: calc(25rem / 2);
+                transform-origin: calc(25rem / 2) calc(25rem / 2);
+            }
         }
 
         .wheel-spin {
@@ -55,64 +54,12 @@
             height: 4.2rem;
             border-radius: 50%;
             margin: -34px 0 0 -34px;
-            background: #{$color-white};
+            background: $color-yellow;
             box-shadow: rgb(0 0 0 / 10%) 0 3px 0;
             cursor: pointer;
             font-family: "Exo 2", sans-serif;
             user-select: none;
 
-            &::before {
-                position: absolute;
-                top: -12px;
-                left: 14px;
-                width: 0;
-                height: 0;
-                border-width: 0 20px 28px;
-                border-style: solid;
-                border-color: transparent transparent #{$color-white};
-                content: "";
-            }
-
-            &::after {
-                position: relative;
-                z-index: 100000;
-                display: block;
-                width: 4.2rem;
-                height: 4.2rem;
-                color: $color-dark;
-                content: "LANCER";
-                font-size: .7rem;
-                line-height: 4.2rem;
-                text-align: center;
-                text-shadow: 0 2px 0 #{$color-white}, 0 -1px 0 rgb(0 0 0 / 30%);
-            }
-
-            .wheel-spin-inner {
-                position: absolute;
-                z-index: 999;
-                top: 50%;
-                left: 50%;
-                width: 54px;
-                height: 54px;
-                border-radius: 50%;
-                margin: -27px 0 0 -27px;
-                background: $color-white;
-
-                /* Old browsers */
-                /* stylelint-disable-next-line declaration-property-value-no-unknown */
-                background: radial-gradient(center, ellipse cover, rgb(255 255 255 / 100%) 0%, rgb(234 234 234 / 100%) 100% ); /* FF3.6+ */
-                background: -webkit-gradient(radial, center center, 0, center center, 100%, color-stop(0%, rgb(255 255 255 / 100%)), color-stop(100%, rgb(234 234 234 / 100%)) ); /* Chrome,Safari4+ */
-                /* stylelint-disable-next-line declaration-property-value-no-unknown */
-                background: radial-gradient(center, ellipse cover, rgb(255 255 255 / 100%) 0%, rgb(234 234 234 / 100%) 100% ); /* Chrome10+,Safari5.1+ */
-                /* stylelint-disable-next-line declaration-property-value-no-unknown */
-                background: radial-gradient(center, ellipse cover, rgb(255 255 255 / 100%) 0%, rgb(234 234 234 / 100%) 100% ); /* Opera 12+ */
-                /* stylelint-disable-next-line declaration-property-value-no-unknown */
-                background: radial-gradient(center, ellipse cover, rgb(255 255 255 / 100%) 0%, rgb(234 234 234 / 100%) 100% ); /* IE10+ */
-                background: radial-gradient(ellipse at center, rgb(255 255 255 / 100%) 0%, rgb(234 234 234 / 100%) 100% ); /* W3C */
-                box-shadow: rgb(255 255 255 / 100%) 0 -2px 0 inset, rgb(255 255 255 / 100%) 0 2px 0 inset, rgb(0 0 0 / 40%) 0 0 5px;
-                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
-            }
-
             &:active,&.active {
                 &::after {
                     font-size: .8rem;
@@ -123,20 +70,6 @@
                 }
             }
         }
-
-        .wheel-shine {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 16rem;
-            height: 16rem; /* FF3.6+ */
-            background: -webkit-gradient(radial, center center, 0, center center, 100%, color-stop(0%, rgb(255 255 255 / 100%)), color-stop(1%, rgb(255 255 255 / 99%)), color-stop(9%, rgb(255 255 255 / 91%)), color-stop(100%, rgb(255 255 255 / 0%)) ); /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 12+ */
-            /* stylelint-disable-next-line declaration-property-value-no-unknown */
-            background: radial-gradient(center, ellipse cover, rgb(255 255 255 / 100%) 0%, rgb(255 255 255 / 99%) 1%, rgb(255 255 255 / 91%) 9%, rgb(255 255 255 / 0%) 100% ); /* IE10+ */
-            background: radial-gradient(ellipse at center, rgb(255 255 255 / 100%) 0%, rgb(255 255 255 / 99%) 1%, rgb(255 255 255 / 91%) 9%, rgb(255 255 255 / 0%) 100% ); /* W3C */
-            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
-            opacity: 0.1;
-        }
     }
 
     /* ANIMATION */

sass/utilities/_bootstrap-custom.scss

@@ -34,6 +34,9 @@
         .w#{$infix}-100 {
             width: 100% !important;
         }
+        .w#{$infix}-fit {
+            width: fit-content !important;
+        }
 
         @each $prop, $unit in (width: vw, height: vh) {
             @each $size in [25, 50, 75, 100] {

sass/utilities/_bootstrap-variables.scss

@@ -14,6 +14,7 @@ $dark: $color-dark;
 $tertiary: $color-tertiary;
 $quad: $color-quad;
 $quint: $color-quint;
+$yellow: $color-yellow;
 $theme-colors: (
     primary: $primary,
     secondary: $secondary,
@@ -27,6 +28,7 @@ $theme-colors: (
     light: $light,
     "white": $white,
     dark: $dark,
+    yellow: $yellow,
 );
 $custom-theme-colors: map.merge($theme-colors,
 (
@@ -44,6 +46,8 @@ $line-height-base: $line-default-height-base;
 
 // Add font-size variable
 $heading-multiplicator: 1;
+$big-font-size: $font-size-base * $heading-multiplicator * 6;
+$mid-font-size: $font-size-base * $heading-multiplicator * 5;
 $h1-font-size: $font-size-base * $heading-multiplicator * 2.5;
 $h2-font-size: $font-size-base * $heading-multiplicator * 2;
 $h3-font-size: $font-size-base * $heading-multiplicator * 1.75;
@@ -53,10 +57,12 @@ $h6-font-size: $font-size-base * $heading-multiplicator;
 
 // Add the new font-size in this map
 $font-sizes: (
+    big: $big-font-size,
+    mid: $mid-font-size,
     1: $h1-font-size,
     2: $h2-font-size,
     3: $h3-font-size,
     4: $h4-font-size,
     5: $h5-font-size,
     6: $h6-font-size,
-);
+);

sass/utilities/_variables.scss

@@ -2,17 +2,18 @@
 
 // * COLORS
 $color-white: #fff;
-$color-light: #eceff3;
-$color-dark: #070000;
-$color-success: #00ac61;
-$color-danger: #f71200;
-$color-info: #508fdf;
-$color-warning: #e6cd00;
-$color-primary: #0f437e;
-$color-secondary: #135ba7;
-$color-tertiary: #db275a;
-$color-quad: #00719e;
-$color-quint: #fba629;
+$color-light: #fff9f0;
+$color-dark: #000;
+$color-success: #5ea600;
+$color-danger: #f30066;
+$color-info: #5883a3;
+$color-warning: #ffc06c;
+$color-primary: #e30613;
+$color-secondary: #005d89;
+$color-tertiary: #0972b4;
+$color-quad: #1d88b9;
+$color-quint: #a1aab4;
+$color-yellow: #FFED3B;
 
 // * BACKGROUNDS COLORS
 $bg-lightened: $color-light;
@@ -24,18 +25,16 @@ $color-default-titles: $color-primary;
 $color-default-texts: $color-dark;
 
 // * FONTS
-$font-default-family-base: "Imprima Regular", sans-serif; // - The default site font family.
+$font-default-family-base: "Barlow Condensed Semi Bold", sans-serif; // - The default site font family.
 $font-default-size-base: 1rem; // Assumes the browser default, typically `16px`
 $line-default-height-base: 1.65;
 
-
 // * Inputs
-
 $input-bg: color.adjust($color-tertiary, $lightness: 45%);
 $input-color: color.adjust($color-tertiary, $lightness: -10%);
-
+$input-focus-border-color: color.adjust($color-tertiary, $lightness: 45%);
 
 // * Cookie Notice
 $ck-primary-color: $color-primary;
-$ck-secondary-color: color.adjust($color-tertiary, $lightness: -10%);
+$ck-secondary-color: color.adjust($color-primary, $lightness: -10%);
 $ck-background-color: $color-light;

theme.config.php

@@ -1,27 +1,37 @@
 <?php
 
 return [
-    // * GGW version
-    'version' => '2.0.0',
-    // * Theme name
-    'name' => 'base',
-    // * Picture BO validation sizes
+    // GGW motor version.
+    'version' => '3.0.0',
+
+    // Theme name.
+    'name' => 'default-theme',
+
+    // Picture BO validation sizes.
     'models' => [
         'prizes' => [
-            'picture_max_width' => 560,
+            'picture_min_width'  => 560,
+            'picture_min_height' => 700,
+            'picture_max_width'  => 560,
             'picture_max_height' => 700,
         ],
         'products' => [
-            'picture_max_width' => 550,
+            'picture_min_width'  => 550,
+            'picture_min_height' => 550,
+            'picture_max_width'  => 550,
             'picture_max_height' => 550,
         ],
         'ranges' => [
-            'picture_max_width' => 476,
+            'picture_min_width'  => 476,
+            'picture_min_height' => 355,
+            'picture_max_width'  => 476,
             'picture_max_height' => 355,
         ],
     ],
-    // * Image resizer config
+
     /**
+     * Image resizer config.
+     *
      * Format can specifiy to which format save the image
      *              JPEG PNG GIF TIF BMP ICO PSD WebP
      *   GD         ✔️  ✔️  ✔️   -   -   -   -  ✔️ *
@@ -53,20 +63,30 @@ return [
      *  ]
      */
     'resizes' => [
-        'trimlot1' => [
-            'height' => 600,
-            'width' => 400,
+        'trimlot1'      => [
+            'height'   => 526,
+            'width'    => 560,
             'inCanvas' => true,
-            'fit' => true,
-            'format' => 'webp'
+            'fit'      => true,
+            'format'   => 'webp'
         ],
-        'trimlot2' => [
-            'height' => 400,
-            'width' => 400,
-            'fit' => true,
+        'trimlot2'      => [
+            'height'   => 155,
+            'width'    => 350,
+            'fit'      => true,
             'inCanvas' => true,
-            'trim' => ['transparent', null, 10],
-            'format' => 'png'
-        ]
+            'trim'     => ['transparent', null, 10],
+            'format'   => 'png'
+        ],
+        'scratch_prize' => [
+            'width'     => 570,
+            'height'    => 350,
+            'resize'    => true,
+            'inCanvas'  => true,
+            'keepRatio' => true,
+            'trim'      => ['transparent', null, 10],
+            'format'    => 'png'
+        ],
+
     ]
 ];

ts/base/common.ts

@@ -41,53 +41,4 @@ document.addEventListener("DOMContentLoaded", function () {
             });
         }, 300);
     }
-
-    const scrollTop = (target: string, offset: number = 0) => {
-        const targetElement = document.getElementById(target);
-        if (!targetElement) throw new Error(`scrollTop requires ${target} to exist`);
-        const top = targetElement.getBoundingClientRect().top,
-            t = window.scrollY + top - offset;
-        scrollTo({
-            top: t,
-            behavior: "smooth"
-        });
-    };
-
-    const pageUp = document.getElementById("page-up");
-    if (pageUp) {
-        pageUp.addEventListener("click", () => scrollTop("content-container", 250)),
-        document.addEventListener("scroll", () => {
-            if (window.scrollY > 250) {
-                pageUp.classList.add("show");
-                return;
-            }
-            pageUp.classList.remove("show");
-        });
-    }
-});
-
-// * Input Validation.
-document.addEventListener("DOMContentLoaded", function () {
-    document.querySelectorAll("input.is-invalid").forEach((input) => {
-        let timer: NodeJS.Timeout|null = null;
-        input.addEventListener("change", () => {
-            const parent = input.parentElement;
-            input.classList.remove("is-invalid");
-            if (parent && parent.classList.contains("is-invalid")) {
-                parent.classList.remove("is-invalid");
-            }
-        });
-        input.addEventListener("input", () => {
-            if (timer) {
-                clearTimeout(timer);
-            }
-            timer = setTimeout(() => {
-                const parent = input.parentElement;
-                input.classList.remove("is-invalid");
-                if (parent && parent.classList.contains("is-invalid")) {
-                    parent.classList.remove("is-invalid");
-                }
-            }, 250);
-        });
-    });
 });

ts/fo.ts

@@ -10,10 +10,16 @@ import "./utilities/vue-fo";
 // CUSTOM
 import "./base/common";
 
+// PARTIALS
+import "./partials/input-errors-removal";
+import "./partials/newsletter";
+import "./partials/scroll-to-top";
+
 // PAGES
 import "./pages/home";
 import "./pages/products";
-import "./pages/won";
+import "./pages/won-spin";
+
 
 // Cookies
 import CookieNotice from "@ldc-web/cookie-notice";

ts/pages/home.ts

@@ -6,7 +6,6 @@ document.addEventListener("DOMContentLoaded", function () {
         return;
     }
 
-
     // * BR Carousel (With BS)
     const lotsCarousel = document.getElementById("carousel-lots");
     if (lotsCarousel) {
@@ -23,11 +22,11 @@ document.addEventListener("DOMContentLoaded", function () {
                 if (!isRunning) {
                     playPauseBtn.children.item(0)?.classList.remove("d-none");
                     playPauseBtn.children.item(1)?.classList.add("d-none");
-                    playPauseBtn.setAttribute('title', String(playPauseBtn.dataset['play']));
+                    playPauseBtn.setAttribute("title", String(playPauseBtn.dataset["play"]));
                 } else {
                     playPauseBtn.children.item(0)?.classList.add("d-none");
                     playPauseBtn.children.item(1)?.classList.remove("d-none");
-                    playPauseBtn.setAttribute('title', String(playPauseBtn.dataset['stop']));
+                    playPauseBtn.setAttribute("title", String(playPauseBtn.dataset["stop"]));
                 }
             };
             playPauseBtn.addEventListener("click", () => {

ts/pages/won-scratch.ts

@@ -0,0 +1,67 @@
+import { SCRATCH_TYPE, ScratchCard } from "scratchcard-js";
+import grattageUrl from "./../../assets/images/animations/grattage.png";
+
+document.addEventListener("DOMContentLoaded", function () {
+    if (!document.querySelector("main.won-page")) {
+        return;
+    }
+
+    const scratchWrapper = document.getElementById("scratch-wrapper"),
+        scratchPicture = document.getElementById("scratch-picture") as HTMLPictureElement|null,
+        animationSection = document.getElementById("scratch-animation"),
+        prizeSection = document.getElementById("prize-section"),
+        discountSection = document.getElementById("discount-section"),
+        winningProofSection = document.getElementById("winning-proof-section");
+
+    /** Hide animation and show win sections */
+    const toggleAnimationPhase = () => {
+        if (animationSection) {
+            animationSection.classList.add("d-none");
+        }
+        if (prizeSection) {
+            prizeSection.classList.remove("d-none");
+        }else if (discountSection) {
+            discountSection.classList.remove("d-none");
+        } else {
+            throw new Error("No section to toggle");
+        }
+        if (winningProofSection) {
+            winningProofSection.classList.remove("d-none");
+        }
+    };
+
+    if (!animationSection) {
+        throw Error("section#scratch-animation missing");
+    }
+
+    if (scratchWrapper && scratchPicture) {
+        scratchPicture.addEventListener("load", () => {
+            const sc = new ScratchCard(scratchWrapper, {
+                scratchType: SCRATCH_TYPE.LINE,
+                containerWidth: scratchWrapper.offsetWidth,
+                containerHeight: scratchWrapper.offsetHeight,
+                imageForwardSrc: grattageUrl,
+                imageBackgroundSrc: "",
+                htmlBackground: "",
+                clearZoneRadius: 50,
+                nPoints: 30,
+                pointSize: 8,
+                percentToFinish: 65,
+                callback: function () {
+                    toggleAnimationPhase();
+                },
+                brushSrc: "",
+                enabledPercentUpdate: true
+            });
+            sc.init().catch((e) => {
+                console.error(e);
+                toggleAnimationPhase();
+            });
+        });
+        scratchPicture.setAttribute("src", String(scratchPicture.dataset["src"]));
+    } else {
+        toggleAnimationPhase();
+    }
+
+});
+