add hook for devices

frontend/src/components/ServicePageTemplate.jsx

@@ -15,6 +15,7 @@ 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,
@@ -28,6 +29,7 @@ const ServicePageTemplate = ({
 }) => {
   const [openModal, setOpenModal] = useState(false);
   const [modalContent, setModalContent] = useState({});
+  const isTouchDevice = useIsTouchDevice(); // Détection des écrans tactiles
 
   const handleCardClick = (feature) => {
     setModalContent({
@@ -71,20 +73,13 @@ const ServicePageTemplate = ({
             sx={{
               fontWeight: "bold",
               mb: 2,
-              fontSize: { xs: '2rem', md: '3rem', lg: '4rem' }, // Responsive
+              fontSize: { xs: "2rem", md: "3rem", lg: "4rem" },
             }}
           >
             {title}
-
           </Typography>
-          <Typography 
+          <Typography variant="body1" sx={{ mb: 4 }}>
-            variant="body1" 
-            sx={{ 
-              mb: 4 
-            }}
-          >
             {subtitle}
-
           </Typography>
           <Button
             href={ctaLink}
@@ -105,16 +100,16 @@ const ServicePageTemplate = ({
 
       {/* Section Interest */}
       <Box sx={{ padding: "40px 20px", textAlign: "center" }}>
-        <Typography variant="h2" 
+        <Typography
+          variant="h2"
           sx={{
             fontWeight: "bold",
             mb: 2,
-            fontSize: { xs: '2rem', md: '3rem', lg: '3rem' }, // Responsive
+            fontSize: { xs: "2rem", md: "3rem", lg: "3rem" },
           }}
         >
           Pourquoi choisir ce service ?
         </Typography>
-
         <Typography
           variant="body1"
           sx={{ maxWidth: "800px", margin: "0 auto", mb: 4 }}
@@ -127,17 +122,15 @@ const ServicePageTemplate = ({
       <Box sx={{ backgroundColor: "#ffffff", padding: "40px 20px" }}>
         <Typography
           variant="h2"
-            sx={{ 
+          sx={{
-              fontWeight: "bold", 
+            fontWeight: "bold",
-              textAlign: "center", 
+            textAlign: "center",
-              mb: 4,
+            mb: 4,
-              fontSize: { xs: '2rem', md: '3rem', lg: '3rem' }, // Responsive
+            fontSize: { xs: "2rem", md: "3rem", lg: "3rem" },
- 
+          }}
-            }}
         >
           Ce que nous offrons
         </Typography>
-
         <Grid container spacing={4} justifyContent="center">
           {features.map((feature, index) => (
             <Grid item xs={12} md={4} key={index}>
@@ -151,17 +144,11 @@ const ServicePageTemplate = ({
                   cursor: "pointer",
                   transition: "transform 0.3s ease, box-shadow 0.3s ease",
                   "&:hover": {
-                    transform: {
+                    transform: isTouchDevice ? "none" : "scale(1.05)",
-                      xs: "none", // Pas d'hover sur mobile
+                    boxShadow: isTouchDevice ? 2 : 5,
-                      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)", // Effet de clic pour le tactile
+                    transform: "scale(0.98)",
                     boxShadow: 3,
                   },
                 }}
@@ -251,113 +238,6 @@ 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>
   );
 };

frontend/src/components/hooks/useIsTouchDevice.jsx

@@ -0,0 +1,14 @@
+import { useEffect, useState } from "react";
+
+export const useIsTouchDevice = () => {
+  const [isTouchDevice, setIsTouchDevice] = useState(false);
+
+  useEffect(() => {
+    const checkTouchDevice = () => {
+      setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
+    };
+    checkTouchDevice();
+  }, []);
+
+  return isTouchDevice;
+};