updating the css components

src/assets/css/components/LanguageSelect.scss

@@ -0,0 +1,113 @@
+.language-select {
+	@apply relative flex flex-wrap gap-4;
+	@apply bg-transparent;
+	background-image: url("../../img/shapes-background/language-selector-background.svg");
+	background-size: 100% 100%;
+	background-repeat: no-repeat;
+	box-sizing: border-box;
+
+	&__toggle,
+	&__country-list {
+		@apply border-none  w-full;
+	}
+
+	&__label {
+		@apply bg-construction font-bold text-4xl py-3 px-6 block text-zuume;
+		line-height: 1;
+	}
+
+	&__toggle {
+		@apply py-3
+		bg-transparent 
+		text-neutral-800
+		capitalize
+		text-base
+		flex
+		px-5
+		pr-12
+		my-0
+		w-fit
+		cursor-pointer
+		items-center;
+		transform: skew(-2deg);
+
+		.flag {
+			@apply bg-slate-200 rounded-full w-8 h-8 flex justify-center items-center border-4 border-solid border-slate-800 overflow-hidden;
+
+			img {
+				@apply w-full h-full object-cover;
+			}
+		}
+
+		.language {
+			@apply font-bold ml-1 text-2xl text-zuume text-slate-900;
+		}
+
+		&:after {
+			@apply block w-4 h-4 absolute right-5
+			bg-center bg-no-repeat bg-contain;
+			content: "";
+			background-image: url("../../img/select_deploy_icon.svg");
+		}
+		&:hover {
+			&:after {
+				transition: all 0.3s ease-in-out;
+				filter: invert(27%) sepia(40%) saturate(1344%) hue-rotate(156deg) brightness(97%)
+					contrast(102%);
+			}
+		}
+	}
+
+	&__country-list {
+		&[aria-hidden="true"] {
+			@apply hidden;
+		}
+
+		@apply my-0 
+		bg-white
+		py-2
+	
+		absolute
+		top-0
+		z-30
+		list-none	
+		pl-0
+		overflow-y-auto  w-full;
+		max-height: 286px;
+		box-sizing: border-box;
+		overflow-y: scroll;
+		top: 100%;
+		transform: translate(0, -10px);
+	}
+
+	li {
+		@apply flex items-center text-neutral-800 cursor-pointer pl-8 py-2;
+		span {
+			@apply font-bold text-slate-800;
+		}
+
+		.flag {
+			@apply pr-4 w-6 h-auto;
+		}
+		&:hover {
+			@apply bg-slate-200;
+		}
+	}
+}
+
+.language-select:has(.language-select__country-list[aria-hidden="false"]) {
+	.language-select__toggle::after {
+		transform: rotate(180deg);
+	}
+}
+
+.page-container--welcome {
+	.language-select {
+		isolation: isolate;
+		&__country-list {
+			top: 0;
+			transform: translate(0, calc(-100% + 10px));
+			z-index: -2;
+		}
+	}
+}

src/assets/css/components/Modal.scss

@@ -1,36 +0,0 @@
-dialog {
-	&::backdrop {
-		backdrop-filter: blur(6px) brightness(0.2);
-	}
-
-	width: clamp(50%, 900px, 90%);
-}
-
-.game-modal {
-	&__close-button {
-		@apply absolute top-2 right-2 bg-construction p-4 border-none;
-	}
-	overflow: visible;
-}
-
-.modal-content-container {
-	@apply w-full;
-	box-sizing: border-box;
-	@apply p-8 grid  gap-x-8;
-
-	grid-template-columns: 1fr 1fr;
-	h2 {
-		@apply text-5xl py-8;
-	}
-	&__content {
-	}
-	&__cover {
-		@apply px-6 py-12 bg-neutral-50;
-
-		align-self: center;
-		box-sizing: border-box;
-		img {
-			@apply block w-full h-auto object-contain object-center;
-		}
-	}
-}

src/assets/css/components/Page-container.scss

@@ -5,26 +5,23 @@
 	h1.titling-construction {
 		@apply mx-auto text-4xl;
 	}
-	.screen {
-		@apply flex flex-col justify-center items-center relative overflow-hidden;
-		@apply bg-lhoist;
-		height: calc(99.8dvh - $margin * 2);
-		width: calc(100% - $margin * 2);
 
-		margin: $margin auto 0 auto;
-	}
 	h2.screen-subtitle {
 		@apply text-6xl mt-4 mb-12;
 	}
+
 	.screen {
+		@apply flex flex-col justify-center items-center relative overflow-hidden bg-lhoist;
+		height: calc(99.8dvh - $margin * 2);
+		width: calc(100% - $margin * 2);
+		margin: $margin auto 0 auto;
+
 		&__content {
 			@apply text-center pt-12 px-16 w-fit mx-auto h-auto overflow-visible relative;
-
-			padding-bottom: -100px;
-
 			background-image: url("../../img/mask.svg");
 			background-position: center;
 			background-size: cover;
+			// padding-bottom: -100px;
 		}
 	}
 }

src/assets/css/components/Tutorials.scss

@@ -0,0 +1,10 @@
+.tutorial-container {
+	&__slides-controls {
+		@apply mt-12 flex gap-4;
+	}
+	&__animated-cover {
+		svg {
+			max-height: 300px;
+		}
+	}
+}

src/assets/css/components/cta.scss

@@ -1,39 +0,0 @@
-.cta {
-	@apply block;
-	&--round {
-		@apply w-20 h-20;
-		border-radius: 50%;
-	}
-	&--construction {
-		@apply bg-construction;
-	}
-	&--button-icon {
-		@apply relative border-none cursor-pointer;
-
-		transition: all 0.4s ease-in-out;
-		&:after {
-			@apply absolute w-10 h-10 z-20 left-1/2 top-1/2;
-			content: "";
-			transform: translate(-50%, -50%);
-			background-position: center;
-			background-size: contain;
-			background-repeat: no-repeat;
-		}
-		&:hover {
-			scale: 1.2;
-		}
-	}
-	&--play {
-		&:after {
-			background-image: url("../../img/icons/icon-play.svg");
-		}
-	}
-	&--next {
-		&:after {
-			background-image: url("../../img/icons/arrow-next.svg");
-		}
-	}
-}
-.motion-button {
-	@apply bg-transparent w-fit h-fit border-none;
-}

src/assets/css/components/ui/AppLogo.scss

@@ -0,0 +1,11 @@
+.application-logo {
+	@apply text-zuume text-center;
+	animation-play-state: bg-red-500;
+	&__title {
+		@apply text-9xl;
+	}
+	&__subtitle {
+		@apply text-6xl bg-construction w-fit mx-auto px-3 block mb-10;
+		transform: rotate(-3deg);
+	}
+}

src/assets/css/components/ui/Cta.scss

@@ -0,0 +1,74 @@
+.cta {
+	@apply block;
+	&--round {
+		@apply w-20 h-20;
+		border-radius: 50%;
+	}
+	&--construction {
+		@apply bg-construction;
+	}
+	&--lhoist {
+		@apply bg-lhoistdark;
+	}
+	&--button-icon {
+		@apply relative border-none cursor-pointer;
+
+		text-decoration: none;
+		transition: all 0.4s ease-in-out;
+		&:after {
+			@apply absolute w-10 h-10 z-20 left-1/2 top-1/2;
+			content: "";
+			transform: translate(-50%, -50%);
+			background-position: center;
+			background-size: contain;
+			background-repeat: no-repeat;
+		}
+		&:hover {
+			scale: 1.2;
+		}
+	}
+	&--play {
+		@apply p-3;
+		&:after {
+			@apply w-10 h-9;
+			background-image: url("../../../img/icons/icon-play.svg");
+			translate: 6px 1px;
+		}
+	}
+	&--next {
+		&:after {
+			background-image: url("../../../img/icons/arrow-next.svg");
+		}
+	}
+	&--previous {
+		&:after {
+			background-image: url("../../../img/icons/arrow-previous.svg");
+		}
+	}
+	&--home {
+		&:after {
+			background-image: url("../../../img/icons/home.svg");
+		}
+	}
+	&--back {
+		&:after {
+			background-image: url("../../../img/icons/icon-back.svg");
+		}
+	}
+	&--start {
+		@apply text-5xl text-white p-8 py-4 flex items-center gap-6 h-fit;
+		line-height: 0.4;
+
+		span {
+			@apply block  text-zuume;
+		}
+		&:after {
+			@apply inline-block static;
+			transform: none;
+			background-image: url("../../../img/icons/arrow-start.svg");
+		}
+	}
+}
+.motion-button {
+	@apply bg-transparent w-fit h-fit border-none;
+}

src/assets/css/components/ui/Loading.scss

@@ -0,0 +1,21 @@
+.loading {
+	&__animation {
+		-webkit-transform: scaleX(-1);
+		transform: scaleX(-1);
+		animation: translate 2s infinite linear;
+	}
+
+	&__text {
+		@apply text-7xl tracking-wider text-zuume text-white text-center;
+		transform: translate(0, -50px);
+	}
+}
+
+@keyframes translate {
+	from {
+		translate: -2vw;
+	}
+	to {
+		translate: 2vw;
+	}
+}

src/assets/css/components/ui/Modal.scss

@@ -0,0 +1,60 @@
+body:has(dialog) {
+	overflow: hidden;
+}
+dialog {
+	border: none;
+	transform: skew(0deg, -0.7deg);
+	background-color: transparent;
+	&::backdrop {
+		backdrop-filter: blur(3px) brightness(0.4);
+	}
+
+	width: clamp(50%, 900px, 90%);
+
+	overflow-y: scroll;
+	overflow-x: hidden;
+	max-width: 80vw;
+	max-height: 90dvh;
+}
+
+.game-modal {
+	&__close-button {
+		@apply absolute top-3 right-3 bg-construction p-3 border-none cursor-pointer;
+		img {
+			@apply w-6 h-6;
+		}
+	}
+	overflow: visible;
+}
+
+.modal-content-container {
+	@apply w-full
+	p-8 grid  gap-x-8;
+	@apply pt-28 pb-16;
+
+	box-sizing: border-box;
+	grid-template-columns: 1fr 1fr;
+
+	&__background {
+		@apply h-full w-full absolute top-0 left-0 object-fill;
+	}
+	background-image: url("../../../img/shapes-background/modal-background.svg");
+	background-position: center top;
+	background-size: 100% 100%;
+	background-repeat: no-repeat;
+
+	h2 {
+		@apply text-5xl py-8;
+	}
+	&__content {
+	}
+	&__cover {
+		@apply px-6 py-12 bg-neutral-50;
+
+		align-self: center;
+		box-sizing: border-box;
+		img {
+			@apply block w-full h-auto object-contain object-center;
+		}
+	}
+}

src/assets/css/components/ui/close-icon.scss

@@ -0,0 +1 @@
+.close{}

src/assets/css/pages/Rating.scss

@@ -0,0 +1,95 @@
+.page-container--rating {
+	--primary-colour: #191919;
+	--secondary-colour: hsl(233 80% 70%);
+	--star-colour: hsl(38 90% 55%);
+
+	transition: 0.3s;
+
+	.screen__content {
+		@apply pb-6;
+		h1 {
+			@apply text-3xl;
+		}
+		h2 {
+			@apply text-5xl mt-6;
+		}
+	}
+
+	.rating {
+		@apply mx-auto my-6;
+		max-width: 300px;
+		transform: rotateY(180deg);
+
+		&__items {
+			@apply flex justify-center items-center;
+			display: flex;
+			gap: 0 0.5em;
+			// align-items: center;
+			// justify-content: center;
+
+			width: 100%;
+			height: 100%;
+
+			input {
+				display: none;
+			}
+
+			input:hover ~ label .star-fill,
+			input:checked ~ label .star-fill {
+				@apply bg-yellow-500;
+			}
+
+			label {
+				width: 20%;
+				aspect-ratio: 1;
+				cursor: pointer;
+			}
+
+			label .star-fill {
+				@apply grid;
+				place-items: center;
+				width: 100%;
+				height: 100%;
+				@apply bg-slate-300;
+				clip-path: polygon(
+					50% 0%,
+					61% 35%,
+					98% 35%,
+					68% 57%,
+					79% 91%,
+					50% 70%,
+					21% 91%,
+					32% 57%,
+					2% 35%,
+					39% 35%
+				);
+			}
+
+			label:hover .label-description::after {
+				@apply text-yellow-500 text-2xl;
+
+				content: attr(data-content);
+				position: fixed;
+				left: 0;
+				right: 0;
+				text-align: center;
+
+				// margin-top: 1em;
+				margin-inline: auto;
+
+				width: 100%;
+				height: 2em;
+
+				transform: rotateY(180deg);
+			}
+		}
+	}
+
+	textarea {
+		@apply bg-slate-200 border-none min-w-96 p-4 text-lg my-4;
+		min-width: 600px;
+	}
+	.cta--back {
+		@apply mt-3 mx-auto;
+	}
+}

src/assets/css/pages/Results.scss

@@ -0,0 +1,56 @@
+.results-modal {
+	.modal-content-container {
+		@apply flex flex-col items-center pt-16 pb-10;
+		&__celebration {
+			@apply absolute top-0 left-0 w-full h-full z-10;
+			pointer-events: none;
+		}
+		&__celebration-confettis-fixe {
+			@apply absolute top-0 left-0 z-10 w-full;
+
+			// svg > g {
+			// 	@apply bg-purple-900 opacity-100 w-full;
+			// }
+		}
+	}
+
+	.visual-results {
+		@apply relative;
+		&__cup {
+			@apply w-48 h-48;
+		}
+
+		&__score {
+			@apply bg-neutral-300 h-12 w-12 rounded-full 
+			flex 
+			justify-center
+			items-center
+			text-3xl 
+			text-zuume
+			absolute
+			top-0
+			right-0;
+			transform: translateX(100%);
+		}
+		.succes-indicator {
+			@apply w-3 h-3 absolute top-0 right-0 bg-green-600 rounded-full p-2;
+			transform: translate(40%, -40%);
+		}
+	}
+
+	.results-explanation {
+		@apply text-center mt-6 max-w-md text-lg font-normal;
+		line-height: 1.3;
+	}
+	.cta--home {
+		@apply mt-8;
+	}
+}
+
+.page-container--results {
+	.screen {
+		background-position: center;
+		background-size: cover;
+		background-repeat: no-repeat;
+	}
+}

src/assets/css/pages/welcome.scss

@@ -0,0 +1,30 @@
+.page-container--welcome {
+	@apply bg-lhoist flex flex-col items-center justify-center text-center;
+	min-height: 100dvh;
+
+	.application-logo {
+		@apply mb-0;
+		&__title {
+			@apply text-white;
+		}
+		&__subtitle {
+		}
+	}
+	.truck-animation {
+		margin-top: -40px;
+		svg {
+			@apply max-h-96;
+		}
+	}
+	.interaction-buttons {
+		@apply flex items-stretch gap-6;
+
+		.cta--start,
+		.language-select {
+			@apply h-auto;
+		}
+		.cta--start {
+			@apply py-2;
+		}
+	}
+}