card Expertises modal

frontend/package.json

@@ -20,6 +20,9 @@
     "react-helmet": "^6.1.0",
     "react-helmet-async": "^2.0.5",
     "react-router-dom": "^7.1.1",
+    "react-simple-lightbox": "^1.0.26",
+    "simple-react-lightbox": "^3.6.8",
+    "svgo": "^3.3.2",
     "swiper": "^10.3.1"
   },
   "devDependencies": {

frontend/src/components/Expertises.jsx

@@ -1,5 +1,5 @@
-import React from "react";
+import React, { useState } from "react";
-import { Box, Grid, Typography, Card, CardContent } from "@mui/material";
+import { Box, Grid, Typography, Card, CardContent, Modal } from "@mui/material";
 import pictoMaitriseOeuvre from "../assets/picto-maitrise-oeuvre.avif";
 import pictoStructure from "../assets/picto-structure.avif";
 import pictoElectricite from "../assets/picto-electricite.avif";
@@ -13,14 +13,25 @@ const Expertices = ({
   expertise3Title,
   expertise3Text,
 }) => {
+  const [openModal, setOpenModal] = useState(null);
+
+  const handleOpenModal = (modalId) => {
+    setOpenModal(modalId);
+  };
+
+  const handleCloseModal = () => {
+    setOpenModal(null);
+  };
+
+  const truncateText = (text, maxLength) => {
+    const plainText = text.replace(/<[^>]+>/g, ""); // Supprime les balises HTML
+    return plainText.length > maxLength
+      ? `${plainText.substring(0, maxLength)}...`
+      : plainText;
+  };
+
   return (
-    <Box
+    <Box sx={{ py: 6, px: 4, backgroundColor: "#f9f9f9" }}>
-      sx={{
-        py: 6,
-        px: 4,
-        backgroundColor: "#f9f9f9",
-      }}
-    >
       <Typography
         variant="h2"
         align="center"
@@ -28,13 +39,12 @@ const Expertices = ({
         sx={{
           fontWeight: "bold",
           mb: 4,
-          fontSize: { xs: "2.4rem", md: "2.4rem", lg: "3rem" }, // Responsive
+          fontSize: { xs: "2.4rem", md: "2.4rem", lg: "3rem" },
         }}
       >
         {expertiseTitle}
       </Typography>
       <Grid container spacing={4}>
-
         {/* Expertise 1 */}
         <Grid item xs={12} md={4}>
           <Card
@@ -47,10 +57,9 @@ const Expertices = ({
               backgroundImage: `
               linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), 
               url(${pictoMaitriseOeuvre})`,
-              backgroundPosition: "bottom left",
+              backgroundSize: "40%",
-              backgroundSize:  "50%",
               backgroundRepeat: "no-repeat",
-              
+              backgroundPosition: "center left",
             }}
           >
             <CardContent>
@@ -59,12 +68,29 @@ const Expertices = ({
                 sx={{
                   fontWeight: "bold",
                   mb: 2,
-                  fontSize: { xs: "2rem", md: "2rem", lg: "2rem" }, // Responsive
+                  fontSize: { xs: "2rem", md: "2rem", lg: "2rem" },
                 }}
               >
                 {expertise1Title}
               </Typography>
-              <Typography variant="body1">{expertise1Text}</Typography>
+              <Typography variant="body1">
+                {truncateText(expertise1Text, 70)}
+              </Typography>
+              <button
+                onClick={() => handleOpenModal("maitrise_oeuvre")}
+                style={{
+                  marginTop: "16px",
+                  padding: "8px 16px",
+                  backgroundColor: "#0e467f",
+                  color: "#fff",
+                  border: "none",
+                  borderRadius: "4px",
+                  cursor: "pointer",
+                  textTransform: "none",
+                }}
+              >
+                En savoir plus
+              </button>
             </CardContent>
           </Card>
         </Grid>
@@ -73,16 +99,17 @@ const Expertices = ({
         <Grid item xs={12} md={4}>
           <Card
             sx={{
+              backgroundPosition: "center",
               boxShadow: 3,
               padding: 2,
               textAlign: "center",
               backgroundColor: "#fff",
               backgroundImage: `
-              linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), 
+              linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
               url(${pictoStructure})`,
-              backgroundPosition: "bottom left",
+              backgroundSize: "40%",
-              backgroundSize:  "50%",
               backgroundRepeat: "no-repeat",
+              backgroundPosition: "center left",
             }}
           >
             <CardContent>
@@ -91,12 +118,29 @@ const Expertices = ({
                 sx={{
                   fontWeight: "bold",
                   mb: 2,
-                  fontSize: { xs: "2rem", md: "2rem", lg: "2rem" }, // Responsive
+                  fontSize: { xs: "2rem", md: "2rem", lg: "2rem" },
                 }}
               >
                 {expertise2Title}
               </Typography>
-              <Typography variant="body1">{expertise2Text}</Typography>
+              <Typography variant="body1">
+                {truncateText(expertise2Text, 70)}
+              </Typography>
+              <button
+                onClick={() => handleOpenModal("structure")}
+                style={{
+                  marginTop: "16px",
+                  padding: "8px 16px",
+                  backgroundColor: "#0e467f",
+                  color: "#fff",
+                  border: "none",
+                  borderRadius: "4px",
+                  cursor: "pointer",
+                  textTransform: "none",
+                }}
+              >
+                En savoir plus
+              </button>
             </CardContent>
           </Card>
         </Grid>
@@ -105,16 +149,16 @@ const Expertices = ({
         <Grid item xs={12} md={4}>
           <Card
             sx={{
+              backgroundPosition: "center",
               boxShadow: 3,
               padding: 2,
               textAlign: "center",
               backgroundColor: "#fff",
-              backgroundImage: `
+              backgroundImage: `linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), 
-              linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), 
               url(${pictoElectricite})`,
-              backgroundPosition: "bottom left",
+              backgroundSize: "40%",
-              backgroundSize:  "50%",
               backgroundRepeat: "no-repeat",
+              backgroundPosition: "center left",
             }}
           >
             <CardContent>
@@ -123,16 +167,150 @@ const Expertices = ({
                 sx={{
                   fontWeight: "bold",
                   mb: 2,
-                  fontSize: { xs: "2rem", md: "2rem", lg: "2rem" }, // Responsive
+                  fontSize: { xs: "2rem", md: "2rem", lg: "2rem" },
                 }}
               >
                 {expertise3Title}
               </Typography>
-              <Typography variant="body1">{expertise3Text}</Typography>
+              <Typography variant="body1">
+                {truncateText(expertise3Text, 70)}
+              </Typography>
+              <button
+                onClick={() => handleOpenModal("electricite")}
+                style={{
+                  marginTop: "16px",
+                  padding: "8px 16px",
+                  backgroundColor: "#0e467f",
+                  color: "#fff",
+                  border: "none",
+                  borderRadius: "4px",
+                  cursor: "pointer",
+                  textTransform: "none",
+                }}
+              >
+                En savoir plus
+              </button>
             </CardContent>
           </Card>
         </Grid>
       </Grid>
+
+      {/* Modal 1 */}
+      <Modal open={openModal === "maitrise_oeuvre"} onClose={handleCloseModal}>
+        <Box
+          sx={{
+            padding: 4,
+            borderRadius: "20px",
+            background: "rgba(255, 255, 255, 0.9)",
+            boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2)",
+            backdropFilter: "blur(10px)",
+            maxWidth: 600,
+            margin: "auto",
+            mt: 4,
+            position: "relative",
+          }}
+        >
+          <Box
+            sx={{
+              position: "absolute",
+              top: 16,
+              right: 16,
+              width: 80,
+              height: 80,
+              backgroundImage: `url(${pictoMaitriseOeuvre})`,
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+              borderRadius: "50%",
+            }}
+          />
+          <Typography variant="h4" sx={{ mb: 2, fontWeight: "bold" }}>
+            {expertise1Title}
+          </Typography>
+          <Typography
+            variant="body1"
+            sx={{ color: "#333", lineHeight: 1.6 }}
+            dangerouslySetInnerHTML={{ __html: expertise1Text }}
+          />
+        </Box>
+      </Modal>
+
+      {/* Modal 2 */}
+      <Modal open={openModal === "structure"} onClose={handleCloseModal}>
+        <Box
+          sx={{
+            padding: 4,
+            borderRadius: "20px",
+            background: "rgba(255, 255, 255, 0.9)",
+            boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2)",
+            backdropFilter: "blur(10px)",
+            maxWidth: 600,
+            margin: "auto",
+            mt: 4,
+            position: "relative",
+          }}
+        >
+          <Box
+            sx={{
+              position: "absolute",
+              top: 16,
+              right: 16,
+              width: 80,
+              height: 80,
+              backgroundImage: `url(${pictoStructure})`,
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+              borderRadius: "50%",
+            }}
+          />
+          <Typography variant="h4" sx={{ mb: 2, fontWeight: "bold" }}>
+            {expertise2Title}
+          </Typography>
+          <Typography
+            variant="body1"
+            sx={{ color: "#333", lineHeight: 1.6 }}
+            dangerouslySetInnerHTML={{ __html: expertise2Text }}
+          />
+        </Box>
+      </Modal>
+
+      {/* Modal 3 */}
+      <Modal open={openModal === "electricite"} onClose={handleCloseModal}>
+        <Box
+          sx={{
+            padding: 4,
+            borderRadius: "20px",
+            background: "rgba(255, 255, 255, 0.9)",
+            boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2)",
+            backdropFilter: "blur(10px)",
+            maxWidth: 600,
+            margin: "auto",
+            mt: 4,
+            position: "relative",
+          }}
+        >
+          <Box
+            sx={{
+              position: "absolute",
+              top: 16,
+              right: 16,
+              width: 80,
+              height: 80,
+              backgroundImage: `url(${pictoElectricite})`,
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+              borderRadius: "50%",
+            }}
+          />
+          <Typography variant="h4" sx={{ mb: 2, fontWeight: "bold" }}>
+            {expertise3Title}
+          </Typography>
+          <Typography
+            variant="body1"
+            sx={{ color: "#333", lineHeight: 1.6 }}
+            dangerouslySetInnerHTML={{ __html: expertise3Text }}
+          />
+        </Box>
+      </Modal>
     </Box>
   );
 };

frontend/src/components/Pages/Home.jsx

@@ -157,7 +157,7 @@ const Home = () => {
       {/* Section Désir : Témoignages */}
       <Box sx={{ py: 6, px: 4 }}>
         <Typography
-          variant="h3"
+          variant="h2"
           sx={{
             fontWeight: "bold",
             mb: 2,

frontend/src/main.jsx

@@ -4,6 +4,8 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import { ThemeProvider } from "@mui/material/styles";
 import theme from "./theme";
 import { HelmetProvider } from "react-helmet-async";
+import  SimpleReactLightbox  from "simple-react-lightbox";
+
 
 
 import Home from "./components/Pages/Home.jsx";
@@ -17,6 +19,14 @@ import Header from "./components/Header";
 import FormationWeb from "./components/Pages/FormationWeb";
 import FormationIA from "./components/Pages/FormationIA";
 
+function App() {
+  return (
+    <SimpleReactLightbox>
+      <YourApp />
+    </SimpleReactLightbox>
+  );
+}
+
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     <ThemeProvider theme={theme}>