updating thematiques page
This commit is contained in:
parent
e947574415
commit
d1dbaf8afc
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user