Octopusdesign/Octopus-React-Wp
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Maj Api and create contact page

Browse Source
This commit is contained in:
sebvtl728
2025-01-03 13:10:09 +01:00
parent 8fcd728887
commit 037cffaa0a
7 changed files with 994 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ServicePageTemplate.jsx
+145 -25
View File
@@ -15,7 +15,6 @@ import { Navigation, Pagination, Autoplay } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import { useIsTouchDevice } from "./hooks/useIsTouchDevice"; // Import du hook
const ServicePageTemplate = ({
title,
@@ -29,7 +28,6 @@ const ServicePageTemplate = ({
}) => {
const [openModal, setOpenModal] = useState(false);
const [modalContent, setModalContent] = useState({});
const isTouchDevice = useIsTouchDevice(); // Détection des écrans tactiles
const handleCardClick = (feature) => {
setModalContent({
@@ -68,18 +66,25 @@ const ServicePageTemplate = ({
}}
>
<Box sx={{ maxWidth: "800px" }}>
<Typography
variant="h1"
sx={{
fontWeight: "bold",
mb: 2,
fontSize: { xs: "2rem", md: "3rem", lg: "4rem" },
<Typography
variant="h1"
sx={{
fontWeight: "bold",
mb: 2,
fontSize: { xs: '2rem', md: '3rem', lg: '4rem' }, // Responsive
}}
>
{title}
</Typography>
<Typography variant="body1" sx={{ mb: 4 }}>
<Typography
variant="body1"
sx={{
mb: 4
}}
>
{subtitle}
</Typography>
<Button
href={ctaLink}
@@ -100,16 +105,16 @@ const ServicePageTemplate = ({
{/* Section Interest */}
<Box sx={{ padding: "40px 20px", textAlign: "center" }}>
<Typography
variant="h2"
sx={{
fontWeight: "bold",
<Typography variant="h2"
sx={{
fontWeight: "bold",
mb: 2,
fontSize: { xs: "2rem", md: "3rem", lg: "3rem" },
fontSize: { xs: '2rem', md: '3rem', lg: '3rem' }, // Responsive
}}
>
Pourquoi choisir ce service ?
Pourquoi choisir notre formation ?
</Typography>
<Typography
variant="body1"
sx={{ maxWidth: "800px", margin: "0 auto", mb: 4 }}
@@ -122,15 +127,17 @@ const ServicePageTemplate = ({
<Box sx={{ backgroundColor: "#ffffff", padding: "40px 20px" }}>
<Typography
variant="h2"
sx={{
fontWeight: "bold",
textAlign: "center",
mb: 4,
fontSize: { xs: "2rem", md: "3rem", lg: "3rem" },
}}
sx={{
fontWeight: "bold",
textAlign: "center",
mb: 4,
fontSize: { xs: '2rem', md: '3rem', lg: '3rem' }, // Responsive
}}
>
Ce que nous offrons
</Typography>
<Grid container spacing={4} justifyContent="center">
{features.map((feature, index) => (
<Grid item xs={12} md={4} key={index}>
@@ -144,11 +151,17 @@ const ServicePageTemplate = ({
cursor: "pointer",
transition: "transform 0.3s ease, box-shadow 0.3s ease",
"&:hover": {
transform: isTouchDevice ? "none" : "scale(1.05)",
boxShadow: isTouchDevice ? 2 : 5,
transform: {
xs: "none", // Pas d'hover sur mobile
md: "scale(1.05)", // Hover sur desktop uniquement
},
boxShadow: {
xs: 2, // Pas d'effet de hover sur mobile
md: 5, // Augmentation de l'ombre sur desktop
},
},
"&:active": {
transform: "scale(0.98)",
transform: "scale(0.98)", // Effet de clic pour le tactile
boxShadow: 3,
},
}}
@@ -238,8 +251,115 @@ const ServicePageTemplate = ({
</Box>
</Fade>
</Modal>
{/* Carousel Section */}
{carouselItems && carouselItems.length > 0 && (
<Box
sx={{
padding: "40px 20px",
textAlign: "center",
backgroundColor: "#f9f9f9",
}}
>
<Typography variant="h2"
sx={{
marginBottom: 4,
fontSize: { xs: '2rem', md: '3rem', lg: '3rem' }, // Responsive
}}
>
Découvrez nos réalisations
</Typography>
<Swiper
modules={[Navigation, Pagination, Autoplay]}
spaceBetween={20}
slidesPerView={1}
navigation
pagination={{ clickable: true }}
autoplay={{ delay: 3000 }}
loop
>
{carouselItems.map((item, index) => (
<SwiperSlide key={index}>
<Card
sx={{
display: "flex",
alignItems: "center",
padding: "20px",
boxShadow: 3,
}}
>
<img
src={item.image}
alt={item.title}
style={{
width: "40%",
height: "auto",
objectFit: "cover",
borderRadius: "8px",
marginRight: "20px",
}}
/>
<CardContent>
<Typography variant="h3"
sx={{
fontWeight: "bold",
fontSize: { xs: '1.2rem', md: '2rem', lg: '2.5rem' }, // Responsive
}}
>
{item.title}
</Typography>
<Typography variant="body2">{item.description}</Typography>
</CardContent>
</Card>
</SwiperSlide>
))}
</Swiper>
</Box>
)}
{/* Section Action */}
<Box
sx={{
backgroundColor: "#0e467f",
color: "white",
textAlign: "center",
padding: "40px 20px",
}}
>
<Typography variant="h2"
sx={{
fontWeight: "bold",
mb: 2,
fontSize: { xs: '2rem', md: '3rem', lg: '3rem' }, // Responsive
}}
>
Prêt à démarrer ?
</Typography>
<Typography variant="body1" sx={{ mb: 4 }}>
Rejoignez-nous dès aujourd’hui et profitez de nos services pour
booster votre activité.
</Typography>
<Button
href={ctaLink}
variant="contained"
color="secondary"
size="large"
sx={{
textTransform: "none",
fontWeight: "bold",
backgroundColor: "#00bcd4",
"&:hover": { backgroundColor: "#0288d1" },
}}
>
{ctaText}
</Button>
</Box>
</Box>
);
};
export default ServicePageTemplate;
export default ServicePageTemplate;