card Expertises modal

2025-01-06 21:29:04 +01:00
parent b0fa21ba35
commit f0565bbb78
5 changed files with 6547 additions and 103 deletions
@@ -1,5 +1,5 @@
-import React from "react";
-import { Box, Grid, Typography, Card, CardContent } from "@mui/material";
+import React, { useState } from "react";
+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
-      sx={{
-        py: 6,
-        px: 4,
-        backgroundColor: "#f9f9f9",
-      }}
-    >
+    <Box 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:  "50%",
+              backgroundSize: "40%",
              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:  "50%",
+              backgroundSize: "40%",
              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: `
-              linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), 
+              backgroundImage: `linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), 
              url(${pictoElectricite})`,
-              backgroundPosition: "bottom left",
-              backgroundSize:  "50%",
+              backgroundSize: "40%",
              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>
  );
 };
@@ -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,
@@ -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}>