From d1dbaf8afcd80fd83462aea262f170c16c19a82a Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Mon, 18 Mar 2024 17:08:47 +0100
Subject: [PATCH] updating thematiques page

---
 src/assets/css/pages/Thematiques.scss | 88 +++++++++++++++++++++++++--
 src/pages/Thematiques.jsx             | 84 +++++++++++++------------
 2 files changed, 127 insertions(+), 45 deletions(-)

diff --git a/src/assets/css/pages/Thematiques.scss b/src/assets/css/pages/Thematiques.scss
index 014eba0..163a88a 100644
--- a/src/assets/css/pages/Thematiques.scss
+++ b/src/assets/css/pages/Thematiques.scss
@@ -1,11 +1,87 @@
 .page-container--thematiques {
-	.swiper-container {
-		@apply mt-20 w-full;
-		.swiper-slide {
-			@apply bg-green-300 h-auto py-32;
-		}
+	@apply opacity-25;
+
+	--swiper-pagination-bullet-horizontal-gap: 8px;
+
+	.swiper-pagination-bullet {
+		@apply bg-construction;
+		transition: scale 0.3s ease-in-out;
+		opacity: 0.9;
+		scale: 1.2;
+	}
+	.swiper-pagination-bullet-active {
+		border: 2px solid white;
+		scale: 1.5;
+		opacity: 1;
 	}
 	.swiper-pagination {
-		@apply bottom-0;
+		bottom: -120px !important;
+	}
+	.swiper-button-prev,
+	.swiper-button-next {
+		@apply bg-construction p-2 rounded-full w-auto;
+		aspect-ratio: 1/1;
+		&:after {
+			@apply w-8 h-8 block bg-contain bg-no-repeat bg-center;
+			content: "";
+			background-image: url("../../img/icons/arrow-next.svg");
+		}
+	}
+	.swiper-button-prev {
+		left: -140px;
+		&:after {
+			transform: rotate(180deg);
+		}
+	}
+	.swiper-button-next {
+		right: -140px;
+	}
+	.swiper-container {
+		@apply mt-32 pb-24 w-full mx-auto overflow-visible;
+		max-width: 1200px;
+		width: calc(100% - 280px);
+
+		.swiper-slide {
+			@apply h-auto text-center;
+		}
+	}
+
+	.game-slide {
+		overflow: visible !important;
+		&__cover {
+			@apply mx-auto border-white  border-solid  bg-white;
+			box-sizing: border-box;
+			width: 100%;
+			border-width: 28px;
+			aspect-ratio: 18/9;
+
+			img {
+				@apply h-full w-full object-cover object-center;
+			}
+		}
+
+		&__title {
+			@apply my-0  absolute top-0 left-1/2 bg-construction px-2 py-1;
+			transform: translateX(-50%) translateY(-50%);
+			transition: transform 0.3s ease-in-out;
+			&:hover {
+				transform: translateX(-50%) scale(1.2);
+			}
+			a {
+				@apply text-slate-900 text-4xl text-zuume no-underline block;
+			}
+		}
+
+		.cta--play {
+			@apply absolute bottom-0 left-1/2;
+			transform: translate(-50%, 50%);
+		}
+	}
+
+	.swiper-slide:not(.swiper-slide-active) {
+		opacity: 0.7;
+		.cta--play {
+			@apply hidden;
+		}
 	}
 }
diff --git a/src/pages/Thematiques.jsx b/src/pages/Thematiques.jsx
index c444a99..7c81056 100644
--- a/src/pages/Thematiques.jsx
+++ b/src/pages/Thematiques.jsx
@@ -14,6 +14,7 @@ import { Keyboard, Pagination, Navigation, EffectCards } from "swiper/modules";
 
 import GameSlide from "../components/Thematiques/GameSlide";
 import { useWordpressCustomData } from "../services/WordpressFetchData";
+import { Link } from "react-router-dom";
 
 export default function Thematiques() {
 	const gamesDatas = useWordpressCustomData(`/screen/play/all`);
@@ -23,46 +24,51 @@ export default function Thematiques() {
 		<AnimatedPage className='page-container page-container--thematiques  '>
 			<div className='content-page '>
 				<Nav />
-				<div className='page_title'>
-					<h1>Thémathiques</h1>
-				</div>
+				<div className='inner-content'>
+					<div className='page-title'>
+						<h1 className='page-title__title'>Thémathiques</h1>
+						<div className='page-title__span-construction'>Interactive</div>
+					</div>
 
-				<div className='swiper-container'>
-					<Swiper
-						effect={"cards"}
-						// slidesPerView={2}
-						navigation={true}
-						centeredSlides={true}
-						// spaceBetween={30}
-						keyboard={{
-							enabled: true,
-						}}
-						pagination={{
-							clickable: true,
-						}}
-						grabCursor={true}
-						breakpoints={{
-							640: {
-								slidesPerView: 2,
-								spaceBetween: 20,
-							},
-							768: {
-								slidesPerView: 4,
-								spaceBetween: 40,
-							},
-							1024: {
-								slidesPerView: 3,
-								spaceBetween: 50,
-							},
-						}}
-						modules={[Pagination, Navigation, EffectCards]}
-						className='mySwiper'>
-						<SwiperSlide>Slide 1</SwiperSlide>
-						<SwiperSlide>Slide 2</SwiperSlide>
-						<SwiperSlide>Slide 2</SwiperSlide>
-						<SwiperSlide>Slide 3</SwiperSlide>
-						<SwiperSlide>Slide 4</SwiperSlide>
-					</Swiper>
+					<div className='swiper-container'>
+						<Swiper
+							effect={"cards"}
+							// slidesPerView={2}
+							navigation={true}
+							centeredSlides={true}
+							// spaceBetween={30}
+							keyboard={{
+								enabled: true,
+							}}
+							pagination={{
+								clickable: true,
+							}}
+							grabCursor={true}
+							modules={[Pagination, Navigation, EffectCards]}
+							className='mySwiper'>
+							{gamesDatas &&
+								gamesDatas.map((game, index) => (
+									<SwiperSlide key={index} className='game-slide'>
+										<div className='game-slide__cover'>
+											<img
+												src={game.gameCover}
+												alt=''
+											/>
+										</div>
+										<h2 className='game-slide__title'>
+											<Link
+												to={`/play/${game.gameId}`}>
+												{game.gameTitle}
+											</Link>
+										</h2>
+
+										<Link
+											to={`/play/${game.gameId}`}
+											className='cta cta--construction cta--round cta--button-icon cta--play'></Link>
+									</SwiperSlide>
+								))}
+						</Swiper>
+					</div>
 				</div>
 				<Footer />
 			</div>