creat modal template

frontend/src/components/ServicePageTemplate.jsx

@@ -1,34 +1,75 @@
-import React from 'react';
-import { Box, Typography, Button, Grid, Card, CardContent } from '@mui/material';
-import { Swiper, SwiperSlide } from 'swiper/react';
-import { Navigation, Pagination, Autoplay } from 'swiper/modules';
-import 'swiper/css';
-import 'swiper/css/navigation';
-import 'swiper/css/pagination';
+import React, { useState } from "react";
+import {
+  Box,
+  Typography,
+  Button,
+  Grid,
+  Card,
+  CardContent,
+  Modal,
+  Fade,
+  Backdrop,
+} from "@mui/material";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Navigation, Pagination, Autoplay } from "swiper/modules";
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+
+const ServicePageTemplate = ({
+  title,
+  subtitle,
+  description,
+  features,
+  image,
+  ctaText,
+  ctaLink,
+  carouselItems,
+}) => {
+  const [openModal, setOpenModal] = useState(false);
+  const [modalContent, setModalContent] = useState({});
+
+  const handleCardClick = (feature) => {
+    setModalContent({
+      title: feature.title,
+      text: feature.modalText || "Texte non disponible.",
+      image: feature.modalImage || "https://picsum.photos/id/43/800/400.webp", // Image par défaut
+    });
+    setOpenModal(true);
+  };
+
+  const handleCloseModal = () => {
+    setOpenModal(false);
+  };
 
-const ServicePageTemplate = ({ title, subtitle, description, features, image, ctaText, ctaLink, carouselItems }) => {
   return (
-    <Box sx={{ backgroundColor: '#f5f5f5', color: '#333', fontFamily: 'Arial, sans-serif' }}>
+    <Box
+      sx={{
+        backgroundColor: "#f5f5f5",
+        color: "#333",
+        fontFamily: "Arial, sans-serif",
+      }}
+    >
       {/* Section Attention */}
       <Box
         sx={{
           backgroundImage: `url(${image})`,
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-          minHeight: '70vh',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          textAlign: 'center',
-          color: 'white',
-          padding: '20px',
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          minHeight: "70vh",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          textAlign: "center",
+          color: "white",
+          padding: "20px",
         }}
       >
-        <Box sx={{ maxWidth: '800px' }}>
-          <Typography variant="h1" sx={{ fontWeight: 'bold', mb: 2 }}>
+        <Box sx={{ maxWidth: "800px" }}>
+          <Typography variant="h1" sx={{ fontWeight: "bold", mb: 2 }}>
             {title}
           </Typography>
-          <Typography variant="h6" sx={{ mb: 4 }}>
+          <Typography variant="body1" sx={{ mb: 4 }}>
             {subtitle}
           </Typography>
           <Button
@@ -37,10 +78,10 @@ const ServicePageTemplate = ({ title, subtitle, description, features, image, ct
             color="secondary"
             size="large"
             sx={{
-              textTransform: 'none',
-              fontWeight: 'bold',
-              backgroundColor: '#0e467f',
-              '&:hover': { backgroundColor: '#00bcd4' },
+              textTransform: "none",
+              fontWeight: "bold",
+              backgroundColor: "#0e467f",
+              "&:hover": { backgroundColor: "#00bcd4" },
             }}
           >
             {ctaText}
@@ -49,18 +90,24 @@ const ServicePageTemplate = ({ title, subtitle, description, features, image, ct
       </Box>
 
       {/* Section Interest */}
-      <Box sx={{ padding: '40px 20px', textAlign: 'center' }}>
-        <Typography variant="h2" sx={{ fontWeight: 'bold', mb: 2 }}>
+      <Box sx={{ padding: "40px 20px", textAlign: "center" }}>
+        <Typography variant="h2" sx={{ fontWeight: "bold", mb: 2 }}>
           Pourquoi choisir ce service ?
         </Typography>
-        <Typography variant="body1" sx={{ maxWidth: '800px', margin: '0 auto', mb: 4 }}>
+        <Typography
+          variant="body1"
+          sx={{ maxWidth: "800px", margin: "0 auto", mb: 4 }}
+        >
           {description}
         </Typography>
       </Box>
 
       {/* Section Desire */}
-      <Box sx={{ backgroundColor: '#ffffff', padding: '40px 20px' }}>
-        <Typography variant="h3" sx={{ fontWeight: 'bold', textAlign: 'center', mb: 4 }}>
+      <Box sx={{ backgroundColor: "#ffffff", padding: "40px 20px" }}>
+        <Typography
+          variant="h2"
+          sx={{ fontWeight: "bold", textAlign: "center", mb: 4 }}
+        >
           Ce que nous offrons
         </Typography>
         <Grid container spacing={4} justifyContent="center">
@@ -70,13 +117,23 @@ const ServicePageTemplate = ({ title, subtitle, description, features, image, ct
                 sx={{
                   boxShadow: 2,
                   borderRadius: 2,
-                  textAlign: 'center',
-                  padding: '20px',
-                  backgroundColor: '#f9f9f9',
+                  textAlign: "center",
+                  padding: "20px",
+                  backgroundColor: "#f9f9f9",
+                  cursor: "pointer",
+                  transition: "transform 0.3s ease, box-shadow 0.3s ease",
+                  "&:hover": {
+                    transform: "scale(1.05)",
+                    boxShadow: 5,
+                  },
                 }}
+                onClick={() => handleCardClick(feature)}
               >
                 <CardContent>
-                  <Typography variant="h6" sx={{ fontWeight: 'bold', mb: 2 }}>
+                  <Typography
+                    variant="h3"
+                    sx={{ fontWeight: "bold", mb: 2, fontSize: 26 }}
+                  >
                     {feature.title}
                   </Typography>
                   <Typography variant="body2">{feature.description}</Typography>
@@ -87,9 +144,79 @@ const ServicePageTemplate = ({ title, subtitle, description, features, image, ct
         </Grid>
       </Box>
 
+      {/* Modal */}
+      <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,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              textAlign: "center",
+              background: "rgba(10, 41, 79, 0.21)",
+              boxShadow: "0 4px 30px rgba(0, 0, 0, 0.1)",
+              backdropFilter: "blur(10px)",
+              borderRadius: 2,
+              border: "1px solid rgba(255, 255, 255, 0.3)",
+              color: " #ffffff",
+            }}
+          >
+            <img
+              src={modalContent.image}
+              alt={modalContent.title}
+              style={{
+                width: "100%",
+                borderRadius: "8px",
+                marginBottom: "20px",
+              }}
+            />
+            <Typography variant="h5" sx={{ fontWeight: "bold", mb: 2 }}>
+              {modalContent.title}
+            </Typography>
+            <Typography variant="body1" sx={{ mb: 4 }}>
+              {modalContent.text}
+            </Typography>
+            <Button
+              onClick={handleCloseModal}
+              variant="contained"
+              color="secondary"
+              sx={{
+                textTransform: "none",
+                fontWeight: "bold",
+                backgroundColor: "#f44336",
+                "&:hover": { backgroundColor: "#d32f2f" },
+              }}
+            >
+              Quitter
+            </Button>
+          </Box>
+        </Fade>
+      </Modal>
+
       {/* Carousel Section */}
       {carouselItems && carouselItems.length > 0 && (
-        <Box sx={{ padding: '40px 20px', textAlign: 'center', backgroundColor: '#f9f9f9' }}>
+        <Box
+          sx={{
+            padding: "40px 20px",
+            textAlign: "center",
+            backgroundColor: "#f9f9f9",
+          }}
+        >
           <Typography variant="h4" sx={{ marginBottom: 4 }}>
             Découvrez nos réalisations
           </Typography>
@@ -104,20 +231,27 @@ const ServicePageTemplate = ({ title, subtitle, description, features, image, ct
           >
             {carouselItems.map((item, index) => (
               <SwiperSlide key={index}>
-                <Card sx={{ display: 'flex', alignItems: 'center', padding: '20px', boxShadow: 3 }}>
+                <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',
+                      width: "40%",
+                      height: "auto",
+                      objectFit: "cover",
+                      borderRadius: "8px",
+                      marginRight: "20px",
                     }}
                   />
                   <CardContent>
-                    <Typography variant="h6" sx={{ fontWeight: 'bold' }}>
+                    <Typography variant="h6" sx={{ fontWeight: "bold" }}>
                       {item.title}
                     </Typography>
                     <Typography variant="body2">{item.description}</Typography>
@@ -132,17 +266,18 @@ const ServicePageTemplate = ({ title, subtitle, description, features, image, ct
       {/* Section Action */}
       <Box
         sx={{
-          backgroundColor: '#0e467f',
-          color: 'white',
-          textAlign: 'center',
-          padding: '40px 20px',
+          backgroundColor: "#0e467f",
+          color: "white",
+          textAlign: "center",
+          padding: "40px 20px",
         }}
       >
-        <Typography variant="h2" sx={{ fontWeight: 'bold', mb: 2 }}>
+        <Typography variant="h2" sx={{ fontWeight: "bold", mb: 2 }}>
           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é.
+          Rejoignez-nous dès aujourd’hui et profitez de nos services pour
+          booster votre activité.
         </Typography>
         <Button
           href={ctaLink}
@@ -150,10 +285,10 @@ const ServicePageTemplate = ({ title, subtitle, description, features, image, ct
           color="secondary"
           size="large"
           sx={{
-            textTransform: 'none',
-            fontWeight: 'bold',
-            backgroundColor: '#00bcd4',
-            '&:hover': { backgroundColor: '#0288d1' },
+            textTransform: "none",
+            fontWeight: "bold",
+            backgroundColor: "#00bcd4",
+            "&:hover": { backgroundColor: "#0288d1" },
           }}
         >
           {ctaText}
@@ -163,4 +298,4 @@ const ServicePageTemplate = ({ title, subtitle, description, features, image, ct
   );
 };
 
-export default ServicePageTemplate;
+export default ServicePageTemplate;