Optimisation Expertises

frontend/src/components/Expertises.jsx

@@ -1,8 +1,78 @@
-import React, { useState } from "react";
+import { 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";
+import PropTypes from "prop-types";
+
+// Style commun pour le contenu du modal
+const modalStyle = {
+  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",
+};
+
+// Style commun pour l'icône affichée en haut à droite dans le modal
+const iconStyle = {
+  position: "absolute",
+  top: 16,
+  right: 16,
+  width: 80,
+  height: 80,
+  backgroundSize: "cover",
+  backgroundPosition: "center",
+  borderRadius: "50%",
+};
+
+// Style commun pour les boutons "En savoir plus" et "Retour"
+const buttonStyle = {
+  marginTop: "16px",
+  padding: "8px 16px",
+  backgroundColor: "#0e467f",
+  color: "#fff",
+  border: "none",
+  borderRadius: "4px",
+  cursor: "pointer",
+  textTransform: "none",
+};
+
+// Fonction pour générer le style de la carte en fonction de l'image de fond
+const cardStyle = (image) => ({
+  boxShadow: 3,
+  padding: 2,
+  textAlign: "center",
+  backgroundColor: "#fff",
+  backgroundImage: `linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url(${image})`,
+  backgroundSize: "40%",
+  backgroundRepeat: "no-repeat",
+  backgroundPosition: "center left",
+});
+
+// Composant Modal réutilisable
+const ExpertiseModal = ({ modalId, image, title, text, openModal, handleClose }) => (
+  <Modal open={openModal === modalId} onClose={handleClose}>
+    <Box sx={modalStyle}>
+      <Box sx={{ ...iconStyle, backgroundImage: `url(${image})` }} />
+      <Typography variant="h4" sx={{ mb: 2, fontWeight: "bold" }}>
+        {title}
+      </Typography>
+      <Typography
+        variant="body1"
+        sx={{ color: "#333", lineHeight: 1.6 }}
+        dangerouslySetInnerHTML={{ __html: text }}
+      />
+      <button onClick={handleClose} style={buttonStyle}>
+        Retour
+      </button>
+    </Box>
+  </Modal>
+);
 
 const Expertices = ({
   expertiseTitle,
@@ -15,16 +85,12 @@ const Expertices = ({
 }) => {
   const [openModal, setOpenModal] = useState(null);
 
-  const handleOpenModal = (modalId) => {
+  const handleOpenModal = (modalId) => setOpenModal(modalId);
-    setOpenModal(modalId);
+  const handleCloseModal = () => setOpenModal(null);
-  };
-
-  const handleCloseModal = () => {
-    setOpenModal(null);
-  };
 
+  // Fonction qui supprime les balises HTML et tronque le texte s'il est trop long
   const truncateText = (text, maxLength) => {
-    const plainText = text.replace(/<[^>]+>/g, ""); // Supprime les balises HTML
+    const plainText = text.replace(/<[^>]+>/g, "");
     return plainText.length > maxLength
       ? `${plainText.substring(0, maxLength)}...`
       : plainText;
@@ -47,20 +113,7 @@ const Expertices = ({
       <Grid container spacing={4}>
         {/* Expertise 1 */}
         <Grid item xs={12} md={4}>
-          <Card
+          <Card sx={cardStyle(pictoMaitriseOeuvre)}>
-            sx={{
-              boxShadow: 3,
-              padding: 2,
-              textAlign: "center",
-              backgroundColor: "#fff",
-              backgroundImage: `
-              linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), 
-              url(${pictoMaitriseOeuvre})`,
-              backgroundSize: "40%",
-              backgroundRepeat: "no-repeat",
-              backgroundPosition: "center left",
-            }}
-          >
             <CardContent>
               <Typography
                 variant="h3"
@@ -77,16 +130,7 @@ const Expertices = ({
               </Typography>
               <button
                 onClick={() => handleOpenModal("maitrise_oeuvre")}
-                style={{
+                style={buttonStyle}
-                  marginTop: "16px",
-                  padding: "8px 16px",
-                  backgroundColor: "#0e467f",
-                  color: "#fff",
-                  border: "none",
-                  borderRadius: "4px",
-                  cursor: "pointer",
-                  textTransform: "none",
-                }}
               >
                 En savoir plus
               </button>
@@ -96,20 +140,7 @@ const Expertices = ({
 
         {/* Expertise 2 */}
         <Grid item xs={12} md={4}>
-          <Card
+          <Card sx={cardStyle(pictoStructure)}>
-            sx={{
-              boxShadow: 3,
-              padding: 2,
-              textAlign: "center",
-              backgroundColor: "#fff",
-              backgroundImage: `
-              linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
-              url(${pictoStructure})`,
-              backgroundSize: "40%",
-              backgroundRepeat: "no-repeat",
-              backgroundPosition: "center left",
-            }}
-          >
             <CardContent>
               <Typography
                 variant="h3"
@@ -126,16 +157,7 @@ const Expertices = ({
               </Typography>
               <button
                 onClick={() => handleOpenModal("structure")}
-                style={{
+                style={buttonStyle}
-                  marginTop: "16px",
-                  padding: "8px 16px",
-                  backgroundColor: "#0e467f",
-                  color: "#fff",
-                  border: "none",
-                  borderRadius: "4px",
-                  cursor: "pointer",
-                  textTransform: "none",
-                }}
               >
                 En savoir plus
               </button>
@@ -145,19 +167,7 @@ const Expertices = ({
 
         {/* Expertise 3 */}
         <Grid item xs={12} md={4}>
-          <Card
+          <Card sx={cardStyle(pictoElectricite)}>
-            sx={{
-              boxShadow: 3,
-              padding: 2,
-              textAlign: "center",
-              backgroundColor: "#fff",
-              backgroundImage: `linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), 
-              url(${pictoElectricite})`,
-              backgroundSize: "40%",
-              backgroundRepeat: "no-repeat",
-              backgroundPosition: "center left",
-            }}
-          >
             <CardContent>
               <Typography
                 variant="h3"
@@ -174,16 +184,7 @@ const Expertices = ({
               </Typography>
               <button
                 onClick={() => handleOpenModal("electricite")}
-                style={{
+                style={buttonStyle}
-                  marginTop: "16px",
-                  padding: "8px 16px",
-                  backgroundColor: "#0e467f",
-                  color: "#fff",
-                  border: "none",
-                  borderRadius: "4px",
-                  cursor: "pointer",
-                  textTransform: "none",
-                }}
               >
                 En savoir plus
               </button>
@@ -192,124 +193,44 @@ const Expertices = ({
         </Grid>
       </Grid>
 
-      {/* Modal 1 */}
+      {/* Modaux */}
-      <Modal open={openModal === "maitrise_oeuvre"} onClose={handleCloseModal}>
+      <ExpertiseModal
-        <Box
+        modalId="maitrise_oeuvre"
-          sx={{
+        image={pictoMaitriseOeuvre}
-            padding: 4,
+        title={expertise1Title}
-            borderRadius: "20px",
+        text={expertise1Text}
-            background: "rgba(255, 255, 255, 0.9)",
+        openModal={openModal}
-            boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2)",
+        handleClose={handleCloseModal}
-            backdropFilter: "blur(10px)",
+      />
-            maxWidth: 600,
+      <ExpertiseModal
-            margin: "auto",
+        modalId="structure"
-            mt: 4,
+        image={pictoStructure}
-            position: "relative",
+        title={expertise2Title}
-          }}
+        text={expertise2Text}
-        >
+        openModal={openModal}
-          <Box
+        handleClose={handleCloseModal}
-            sx={{
+      />
-              position: "absolute",
+      <ExpertiseModal
-              top: 16,
+        modalId="electricite"
-              right: 16,
+        image={pictoElectricite}
-              width: 80,
+        title={expertise3Title}
-              height: 80,
+        text={expertise3Text}
-              backgroundImage: `url(${pictoMaitriseOeuvre})`,
+        openModal={openModal}
-              backgroundSize: "cover",
+        handleClose={handleCloseModal}
-              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>
   );
 };
 
+Expertices.propTypes = {
+  expertiseTitle: PropTypes.string.isRequired,
+  expertise1Title: PropTypes.string.isRequired,
+  expertise1Text: PropTypes.string.isRequired,
+  expertise2Title: PropTypes.string.isRequired,
+  expertise2Text: PropTypes.string.isRequired,
+  expertise3Title: PropTypes.string.isRequired,
+  expertise3Text: PropTypes.string.isRequired,
+  
+};
+
 export default Expertices;

frontend/src/components/Pages/ServiceDeux.jsx

@@ -5,7 +5,7 @@ const ServiceDeux = () => {
   const serviceDetails = {
     // Hero
     title: "Structure béton charpente métallique & bois",
-    subtitle: "Dominez l’intelligence artificielle.",
+    subtitle: "Solidité, Résistance, Durabilité",
 
     image: "https://picsum.photos/id/240/1920/1080.webp",
     ctaText: "En savoir plus !",