introducing thematiques component

src/pages/Thematiques.jsx

@@ -0,0 +1,71 @@
+import React from "react";
+
+import Nav from "../components/ui/Nav";
+import AnimatedPage from "../components/AnimatedPage";
+import Footer from "../components/ui/Footer";
+
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/pagination";
+import "swiper/css/navigation";
+import "swiper/css/effect-cards";
+
+import { Keyboard, Pagination, Navigation, EffectCards } from "swiper/modules";
+
+import GameSlide from "../components/Thematiques/GameSlide";
+import { useWordpressCustomData } from "../services/WordpressFetchData";
+
+export default function Thematiques() {
+	const gamesDatas = useWordpressCustomData(`/screen/play/all`);
+	console.log(gamesDatas);
+
+	return (
+		<AnimatedPage className='page-container page-container--thematiques  '>
+			<div className='content-page '>
+				<Nav />
+				<div className='page_title'>
+					<h1>Thémathiques</h1>
+				</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>
+				<Footer />
+			</div>
+		</AnimatedPage>
+	);
+}