updating thematiques page

src/assets/css/pages/Thematiques.scss

@@ -1,11 +1,87 @@
 .page-container--thematiques {
-	.swiper-container {
+	@apply opacity-25;
-		@apply mt-20 w-full;
+
-		.swiper-slide {
+	--swiper-pagination-bullet-horizontal-gap: 8px;
-			@apply bg-green-300 h-auto py-32;
+
+	.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;
+		}
 	}
 }

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,8 +24,10 @@ export default function Thematiques() {
 		<AnimatedPage className='page-container page-container--thematiques  '>
 			<div className='content-page '>
 				<Nav />
-				<div className='page_title'>
+				<div className='inner-content'>
-					<h1>Thémathiques</h1>
+					<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'>
@@ -41,29 +44,32 @@ export default function Thematiques() {
 								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>
+							{gamesDatas &&
-						<SwiperSlide>Slide 2</SwiperSlide>
+								gamesDatas.map((game, index) => (
-						<SwiperSlide>Slide 2</SwiperSlide>
+									<SwiperSlide key={index} className='game-slide'>
-						<SwiperSlide>Slide 3</SwiperSlide>
+										<div className='game-slide__cover'>
-						<SwiperSlide>Slide 4</SwiperSlide>
+											<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>
 		</AnimatedPage>