creat modal template

frontend/src/components/Pages/FormationIA.jsx

@@ -8,29 +8,43 @@ const FormationIA = () => {
     description:
       'Plongez dans le futur ! Notre formation IA vous prépare aux outils modernes d’intelligence artificielle comme Python, TensorFlow et OpenAI API. Apprenez à créer des modèles IA performants.',
     features: [
-      { title: 'Fondamentaux de l’IA', description: 'Concepts, algorithmes et applications.' },
+      {
-      { title: 'Python pour l’IA', description: 'Bibliothèques populaires : TensorFlow, PyTorch.' },
+        title: 'Fondamentaux de l’IA',
-      { title: 'Projets Pratiques', description: 'Créez vos propres modèles IA.' },
+        description: 'Concepts, algorithmes et applications.',
+        modalText: 'Découvrez les bases de l’IA, des algorithmes aux applications concrètes dans divers domaines.',
+        modalImage: 'https://picsum.photos/id/200/800/400.webp',
+      },
+      {
+        title: 'Python pour l’IA',
+        description: 'Bibliothèques populaires : TensorFlow, PyTorch.',
+        modalText: 'Apprenez à utiliser Python et ses bibliothèques pour concevoir des modèles d’IA puissants.',
+        modalImage: 'https://picsum.photos/id/201/800/400.webp',
+      },
+      {
+        title: 'Projets Pratiques',
+        description: 'Créez vos propres modèles IA.',
+        modalText: 'Mettez vos compétences en pratique en développant des projets IA réels.',
+        modalImage: 'https://picsum.photos/id/202/800/400.webp',
+      },
     ],
-    image: 'https://picsum.photos/id/239/1920/1080.webp', // Remplacez par une vraie image
+    image: 'https://picsum.photos/id/239/1920/1080.webp',
     ctaText: 'Découvrir la formation IA',
     ctaLink: '/contact',
-
     carouselItems: [
       {
         title: 'Site E-commerce',
         description: 'Un projet e-commerce performant et moderne.',
-        image: 'https://picsum.photos/id/453/800/400.webp', // Remplacez par une vraie image
+        image: 'https://picsum.photos/id/453/800/400.webp',
       },
       {
         title: 'Portfolio Personnel',
         description: 'Montrez vos compétences avec un portfolio sur mesure.',
-        image: 'https://picsum.photos/id/454/800/400.webp', // Remplacez par une vraie image
+        image: 'https://picsum.photos/id/454/800/400.webp',
       },
       {
         title: 'Blog Dynamique',
         description: 'Créez un blog interactif et optimisé pour le SEO.',
-        image: 'https://picsum.photos/id/455/800/400.webp', // Remplacez par une vraie image
+        image: 'https://picsum.photos/id/455/800/400.webp',
       },
     ],
   };

frontend/src/components/Pages/FormationWeb.jsx

@@ -8,29 +8,38 @@ const FormationWeb = () => {
     description:
       'Notre formation web vous permet de développer vos compétences en développement frontend, backend et design. Rejoignez notre programme pour apprendre HTML, CSS, JavaScript et bien plus.',
     features: [
-      { title: 'Frontend Development', description: 'HTML, CSS, JavaScript, React et plus encore.' },
+      {
-      { title: 'Backend Development', description: 'Node.js, Express, MongoDB et bases de données.' },
+        title: 'Frontend Development',
-      { title: 'Responsive Design', description: 'Apprenez à créer des designs modernes et adaptatifs.' },
+        description: 'HTML, CSS, JavaScript, React et plus encore.',
+        modalText: 'Apprenez à construire des interfaces utilisateurs modernes avec les technologies frontend.',
+        modalImage: 'https://picsum.photos/id/300/800/400.webp',
+      },
+      {
+        title: 'Backend Development',
+        description: 'Node.js, Express, MongoDB et bases de données.',
+        modalText: 'Développez des applications robustes avec des technologies backend performantes.',
+        modalImage: 'https://picsum.photos/id/301/800/400.webp',
+      },
+      {
+        title: 'Responsive Design',
+        description: 'Apprenez à créer des designs modernes et adaptatifs.',
+        modalText: 'Maîtrisez les principes du responsive design pour des expériences utilisateur optimales.',
+        modalImage: 'https://picsum.photos/id/302/800/400.webp',
+      },
     ],
-    image: 'https://via.placeholder.com/1920x1080', // Remplacez par l’URL de votre image
+    image: 'https://picsum.photos/id/1018/1920/1080.webp',
     ctaText: 'En savoir plus',
     ctaLink: '/contact',
-    
     carouselItems: [
       {
-        title: 'Site E-commerce',
+        title: 'Portfolio Modern',
-        description: 'Un projet e-commerce performant et moderne.',
+        description: 'Montrez vos compétences avec un portfolio unique.',
-        image: 'https://via.placeholder.com/800x400', // Remplacez par une vraie image
+        image: 'https://picsum.photos/id/305/800/400.webp',
       },
       {
-        title: 'Portfolio Personnel',
+        title: 'Blog SEO',
-        description: 'Montrez vos compétences avec un portfolio sur mesure.',
+        description: 'Optimisez vos articles pour le référencement.',
-        image: 'https://via.placeholder.com/800x400', // Remplacez par une vraie image
+        image: 'https://picsum.photos/id/306/800/400.webp',
-      },
-      {
-        title: 'Blog Dynamique',
-        description: 'Créez un blog interactif et optimisé pour le SEO.',
-        image: 'https://via.placeholder.com/800x400', // Remplacez par une vraie image
       },
     ],
   };

frontend/src/components/ServicePageTemplate.jsx

@@ -1,34 +1,75 @@
-import React from 'react';
+import React, { useState } from "react";
-import { Box, Typography, Button, Grid, Card, CardContent } from '@mui/material';
+import {
-import { Swiper, SwiperSlide } from 'swiper/react';
+  Box,
-import { Navigation, Pagination, Autoplay } from 'swiper/modules';
+  Typography,
-import 'swiper/css';
+  Button,
-import 'swiper/css/navigation';
+  Grid,
-import 'swiper/css/pagination';
+  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',
+          backgroundSize: "cover",
-          backgroundPosition: 'center',
+          backgroundPosition: "center",
-          minHeight: '70vh',
+          minHeight: "70vh",
-          display: 'flex',
+          display: "flex",
-          alignItems: 'center',
+          alignItems: "center",
-          justifyContent: 'center',
+          justifyContent: "center",
-          textAlign: 'center',
+          textAlign: "center",
-          color: 'white',
+          color: "white",
-          padding: '20px',
+          padding: "20px",
         }}
       >
-        <Box sx={{ maxWidth: '800px' }}>
+        <Box sx={{ maxWidth: "800px" }}>
-          <Typography variant="h1" sx={{ fontWeight: 'bold', mb: 2 }}>
+          <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',
+              textTransform: "none",
-              fontWeight: 'bold',
+              fontWeight: "bold",
-              backgroundColor: '#0e467f',
+              backgroundColor: "#0e467f",
-              '&:hover': { backgroundColor: '#00bcd4' },
+              "&: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' }}>
+      <Box sx={{ padding: "40px 20px", textAlign: "center" }}>
-        <Typography variant="h2" sx={{ fontWeight: 'bold', mb: 2 }}>
+        <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' }}>
+      <Box sx={{ backgroundColor: "#ffffff", padding: "40px 20px" }}>
-        <Typography variant="h3" sx={{ fontWeight: 'bold', textAlign: 'center', mb: 4 }}>
+        <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',
+                  textAlign: "center",
-                  padding: '20px',
+                  padding: "20px",
-                  backgroundColor: '#f9f9f9',
+                  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%',
+                      width: "40%",
-                      height: 'auto',
+                      height: "auto",
-                      objectFit: 'cover',
+                      objectFit: "cover",
-                      borderRadius: '8px',
+                      borderRadius: "8px",
-                      marginRight: '20px',
+                      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',
+          backgroundColor: "#0e467f",
-          color: 'white',
+          color: "white",
-          textAlign: 'center',
+          textAlign: "center",
-          padding: '40px 20px',
+          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',
+            textTransform: "none",
-            fontWeight: 'bold',
+            fontWeight: "bold",
-            backgroundColor: '#00bcd4',
+            backgroundColor: "#00bcd4",
-            '&:hover': { backgroundColor: '#0288d1' },
+            "&:hover": { backgroundColor: "#0288d1" },
           }}
         >
           {ctaText}