MAJ PAGES SERVICES

2025-02-16 17:59:18 +01:00
parent 31d57e365a
commit 55c3b64733
9 changed files with 5409 additions and 99 deletions
@@ -1,5 +1,16 @@
 import { useState } from "react";
-import { Box, Typography, Button, Grid, Card, CardContent, Modal, Fade, Backdrop, CircularProgress } from "@mui/material";
+import {
+  Box,
+  Typography,
+  Button,
+  Grid,
+  Card,
+  CardContent,
+  Modal,
+  Fade,
+  Backdrop,
+  CircularProgress,
+} from "@mui/material";
 import { Swiper, SwiperSlide } from "swiper/react";
 import { Navigation, Pagination, Autoplay } from "swiper/modules";
 import "swiper/css";
@@ -40,7 +51,13 @@ const ServicePageTemplate = ({
  };

  return (
-    <Box sx={{ backgroundColor: "#f5f5f5", color: "#333", fontFamily: "Arial, sans-serif" }}>
+    <Box
+      sx={{
+        backgroundColor: "#f5f5f5",
+        color: "#333",
+        fontFamily: "Arial, sans-serif",
+      }}
+    >
      {/* ✅ SEO META TAGS */}
      <Helmet>
        <title>{seo?.metaTitle || title}</title>
@@ -59,7 +76,7 @@ const ServicePageTemplate = ({
      {/* Section Hero */}
      <Box
        sx={{
-          mt:5,
+          mt: 5,
          backgroundImage: `url(${image})`,
          backgroundSize: "cover",
          backgroundPosition: "center",
@@ -72,13 +89,27 @@ const ServicePageTemplate = ({
          padding: "20px",
        }}
      >
-        <Box sx={{ 
-          maxWidth: "800px",
-          backgroundColor:"rgba(255, 255, 255, 0.39)",
-          p:5,
-          borderRadius:5
-          }}>
-          <Typography variant="h1" sx={{ fontWeight: "bold", mb: 2, fontSize: { xs: "2rem", md: "3rem", lg: "3rem",whiteSpace: "pre-line" } }}>
+        <Box
+          sx={{
+            maxWidth: "800px",
+            backgroundColor: "rgba(255, 255, 255, 0.39)",
+            p: 5,
+            borderRadius: 5,
+          }}
+        >
+          <Typography
+            variant="h1"
+            sx={{
+              fontWeight: "bold",
+              mb: 2,
+              fontSize: {
+                xs: "2rem",
+                md: "3rem",
+                lg: "3rem",
+                whiteSpace: "pre-line",
+              },
+            }}
+          >
            {title}
          </Typography>
          <Typography variant="body1" sx={{ mb: 4 }}>
@@ -89,7 +120,12 @@ const ServicePageTemplate = ({
            variant="contained"
            color="secondary"
            size="large"
-            sx={{ textTransform: "none", fontWeight: "bold", backgroundColor: "#0e467f", "&:hover": { backgroundColor: "#00bcd4" } }}
+            sx={{
+              textTransform: "none",
+              fontWeight: "bold",
+              backgroundColor: "#0e467f",
+              "&:hover": { backgroundColor: "#00bcd4" },
+            }}
          >
            {ctaText}
          </Button>
@@ -98,17 +134,41 @@ const ServicePageTemplate = ({

      {/* Section numero 1 */}
      <Box sx={{ padding: "40px 20px", textAlign: "center" }}>
-        <Typography variant="h2" sx={{ fontWeight: "bold", mb: 2, fontSize: { xs: "2rem", md: "2rem", lg: "2rem" }, whiteSpace: "pre-line" }}>
+        <Typography
+          variant="h2"
+          sx={{
+            fontWeight: "bold",
+            mb: 2,
+            fontSize: { xs: "2rem", md: "2rem", lg: "2rem" },
+            whiteSpace: "pre-line",
+          }}
+        >
          {interestTitle}
        </Typography>
-        <Typography variant="body1" sx={{ maxWidth: "1000px", margin: "0 auto", mb: 4, whiteSpace: "pre-line" }}>
+        <Typography
+          variant="body1"
+          sx={{
+            maxWidth: "1000px",
+            margin: "0 auto",
+            mb: 4,
+            whiteSpace: "pre-line",
+          }}
+        >
          {description}
        </Typography>
      </Box>

      {/* Section numero 2 */}
      <Box sx={{ backgroundColor: "#ffffff", padding: "40px 20px" }}>
-        <Typography variant="h2" sx={{ fontWeight: "bold", textAlign: "center", mb: 4, fontSize: { xs: "2rem", md: "3rem", lg: "2rem" } }}>
+        <Typography
+          variant="h2"
+          sx={{
+            fontWeight: "bold",
+            textAlign: "center",
+            mb: 4,
+            fontSize: { xs: "2rem", md: "3rem", lg: "2rem" },
+          }}
+        >
          {desirTitle}
        </Typography>

@@ -127,12 +187,27 @@ const ServicePageTemplate = ({
                }}
              >
                <CardContent>
-                  <Typography variant="h3" sx={{ fontWeight: "bold", mb: 2, fontSize: 26,whiteSpace: "pre-line" }}>
+                  <Typography
+                    variant="h3"
+                    sx={{
+                      fontWeight: "bold",
+                      mb: 2,
+                      fontSize: 26,
+                      whiteSpace: "pre-line",
+                    }}
+                  >
                    {feature.title}
                  </Typography>
-                  <Typography variant="body2" sx={{ color: "#555" }}>
-                    {feature.description}
-                  </Typography>
+                  <Typography
+                    variant="body2"
+                    sx={{ color: "#555" }}
+                    dangerouslySetInnerHTML={{
+                      __html:
+                        feature.description.length > 100
+                          ? `${feature.description.substring(0, 100)}...`
+                          : feature.description,
+                    }}
+                  />
                </CardContent>
              </Card>
            </Grid>
@@ -141,25 +216,58 @@ const ServicePageTemplate = ({
      </Box>

      {/* Modal */}
-      <Modal open={openModal} onClose={handleCloseModal} closeAfterTransition BackdropComponent={Backdrop} BackdropProps={{ timeout: 500 }}>
+      <Modal
+        open={openModal}
+        onClose={handleCloseModal}
+        closeAfterTransition
+        BackdropComponent={Backdrop}
+        BackdropProps={{ timeout: 500 }}
+      >
        <Fade in={openModal}>
-          <Box sx={{ position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", width: "90%", maxWidth: "600px", p: 4, textAlign: "center", background: "white", borderRadius: 2, boxShadow: 3 }}>
+          <Box
+            sx={{
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+              width: "90%",
+              maxWidth: "600px",
+              p: 4,
+              textAlign: "center",
+              background: "white",
+              borderRadius: 2,
+              boxShadow: 3,
+            }}
+          >
            {loadingImage && <CircularProgress sx={{ mb: 2 }} />}
-            <img src={modalContent.image} alt={modalContent.title} style={{ width: "100%", borderRadius: "8px", display: loadingImage ? "none" : "block" }} onLoad={() => setLoadingImage(false)} />
+            <img
+              src={modalContent.image}
+              alt={modalContent.title}
+              style={{
+                width: "100%",
+                borderRadius: "8px",
+                display: loadingImage ? "none" : "block",
+              }}
+              onLoad={() => setLoadingImage(false)}
+            />
            <Typography variant="h3" sx={{ fontWeight: "bold", mb: 2 }}>
              {modalContent.title}
            </Typography>
-            <Typography variant="body1" sx={{ mb: 4 }}>
-              {modalContent.text}
+            <Typography variant="body1" sx={{ mb: 4 }} dangerouslySetInnerHTML={{ __html: modalContent.text }} >
+              
            </Typography>
-            <Button onClick={handleCloseModal} variant="contained" color="secondary">
+            <Button
+              onClick={handleCloseModal}
+              variant="contained"
+              color="secondary"
+            >
              Retour
            </Button>
          </Box>
        </Fade>
      </Modal>
-    {/* Carousel Section */}
-    {carouselItems && carouselItems.length > 0 && (
+      {/* Carousel Section */}
+      {carouselItems && carouselItems.length > 0 && (
        <Box
          sx={{
            padding: "40px 20px",
@@ -167,11 +275,11 @@ const ServicePageTemplate = ({
            backgroundColor: "#f9f9f9",
          }}
        >
-          <Typography variant="h2" 
-            sx={{ 
+          <Typography
+            variant="h2"
+            sx={{
              marginBottom: 4,
-              fontSize: { xs: '2rem', md: '3rem', lg: '3rem' }, // Responsive
- 
+              fontSize: { xs: "2rem", md: "3rem", lg: "3rem" }, // Responsive
            }}
          >
            Découvrez nos réalisations
@@ -208,10 +316,11 @@ const ServicePageTemplate = ({
                    }}
                  />
                  <CardContent>
-                    <Typography variant="h3" 
-                      sx={{ 
+                    <Typography
+                      variant="h3"
+                      sx={{
                        fontWeight: "bold",
-                        fontSize: { xs: '1.2rem', md: '2rem', lg: '2.5rem' }, // Responsive 
+                        fontSize: { xs: "1.2rem", md: "2rem", lg: "2.5rem" }, // Responsive
                      }}
                    >
                      {item.title}
@@ -224,7 +333,6 @@ const ServicePageTemplate = ({
          </Swiper>
        </Box>
      )}
-
    </Box>
  );
 };
@@ -236,11 +344,24 @@ ServicePageTemplate.propTypes = {
  interestTitle: PropTypes.string.isRequired,
  description: PropTypes.string.isRequired,
  desirTitle: PropTypes.string.isRequired,
-  features: PropTypes.arrayOf(PropTypes.shape({ title: PropTypes.string.isRequired, description: PropTypes.string.isRequired, modalText: PropTypes.string, modalImage: PropTypes.string })).isRequired,
+  features: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string.isRequired,
+      description: PropTypes.string.isRequired,
+      modalText: PropTypes.string,
+      modalImage: PropTypes.string,
+    })
+  ).isRequired,
  image: PropTypes.string.isRequired,
  ctaText: PropTypes.string.isRequired,
  ctaLink: PropTypes.string.isRequired,
-  carouselItems: PropTypes.arrayOf(PropTypes.shape({ title: PropTypes.string.isRequired, description: PropTypes.string.isRequired, image: PropTypes.string.isRequired })),
+  carouselItems: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string.isRequired,
+      description: PropTypes.string.isRequired,
+      image: PropTypes.string.isRequired,
+    })
+  ),
  seo: PropTypes.object, // ✅ Ajout du SEO en option
 };

@@ -250,4 +371,4 @@ ServicePageTemplate.defaultProps = {
  seo: {}, // ✅ SEO par défaut vide
 };

-export default ServicePageTemplate;
+export default ServicePageTemplate;