update About

frontend/src/components/Pages/About.jsx

@@ -15,28 +15,67 @@ import EngineeringIcon from "@mui/icons-material/Engineering";
 import AssessmentIcon from "@mui/icons-material/Assessment";
 import ComputerIcon from "@mui/icons-material/Computer";
 import LibraryBooksIcon from "@mui/icons-material/LibraryBooks";
+import MoneyIcon from "@mui/icons-material/Money";
+import PrintIcon from "@mui/icons-material/Print";
+import StraightenIcon from "@mui/icons-material/Straighten";
+import SettingsInputAntenna from "@mui/icons-material/SettingsInputAntenna";
+import BookIcon from "@mui/icons-material/Book";
 
 const About = () => {
   const competences = [
-    { icon: <BusinessIcon />, title: "Bureau d’études et Maitrise d’œuvre" },
+    {
-    { icon: <BuildIcon />, title: "La structure béton / métallique / bois" },
+      icon: <BusinessIcon />,
-    { icon: <FlashOnIcon />, title: "L’électricité" },
+      title: "Bureau d’études et Maitrise d’œuvre",
-    { icon: <SecurityIcon />, title: "Sécurité incendie (SSI)" },
+      link: "/services/maitrise-oeuvre",
-    { icon: <EngineeringIcon />, title: "Expertises TCE" },
+    },
-    { icon: <AssessmentIcon />, title: "Diagnostics technique" },
+    {
+      icon: <BuildIcon />,
+      title: "La structure béton / métallique / bois",
+      link: "/services/structure-beton-charpente-metallique-bois",
+    },
+    {
+      icon: <FlashOnIcon />,
+      title: "L’électricité",
+      link: "/services/electricite",
+    },
+    {
+      icon: <SecurityIcon />,
+      title: "Sécurité incendie (SSI)",
+      link: "/services/securite-incendie",
+    },
+    {
+      icon: <EngineeringIcon />,
+      title: "Expertises TCE",
+      link: "/services/expertises-tce",
+    },
+    {
+      icon: <AssessmentIcon />,
+      title: "Diagnostics technique",
+      link: "/services/diagnostics-technique",
+    },
   ];
 
   const team = [
     {
-      name: "Ingénieur <br> consultant Génie Civil",
+      name: "Ingénieur consultant Génie Civil",
       role: "Spécialiste Structures en béton armé, charpentes bois et métalliques",
     },
-    { name: "Ingénieur <br> Électricité", role: "Expert bâtiment TCE" },
     {
-      name: "Technicienne <br> spécialiste Structures",
+      name: "Ingénieur Électricité",
+      role: "courant Forts et Faibles, expert bâtiment TCE",
+    },
+    {
+      name: "Technicienne spécialiste Structures",
       role: "Béton armé, TCE, DAO-CAO, dessinatrice TCE",
     },
-    { name: "Assistante de <br> gestion", role: "Comptable" },
+    {
+      name: "Assistante de gestion",
+      role: "Comptable",
+    },
+    {
+      name: "consultants",
+      role: "spécialités tel que thermique, SSI",
+    },
   ];
 
   const infrastructure = [
@@ -55,20 +94,62 @@ const About = () => {
       title: "Calculs techniques",
       description: "Progiciel interne ou programme du CACT (tango, spot)",
     },
+    {
+      icon: <MoneyIcon />,
+      title: "Logiciel de comptabilité",
+      description: "EBP",
+    },
+  ];
+
+  const materiel = [
+    {
+      icon: <ComputerIcon />,
+      title: "Parc informatique",
+    },
+    {
+      icon: <PrintIcon />,
+      title: "Traceur plans",
+    },
+    {
+      icon: <StraightenIcon />,
+      title: "Pied à coulisse",
+    },
+    {
+      icon: <SettingsInputAntenna />,
+      title: "détecteurs de métaux",
+    },
+    {
+      icon: <BookIcon />,
+      title: "Bibliothèques techniques (DTU…)",
+    },
+    {
+      icon: <BookIcon />,
+      title: "Bibliothèques commerciales",
+    },
   ];
 
   return (
     <Box sx={{ padding: "40px 20px" }}>
       {/* En-tête */}
       <Typography
-        variant="h2"
+        variant="h1"
-        sx={{ fontWeight: "bold", textAlign: "center", mb: 4 }}
+        sx={{
+          fontSize: { xs: "3rem", md: "3rem", lg: "3rem" },
+          fontWeight: "bold",
+          textAlign: "center",
+          mb: 4,
+        }}
       >
         La société IN3
       </Typography>
       <Typography
-        variant="h5"
+        variant="body2"
-        sx={{ textAlign: "center", mb: 6, maxWidth: "800px", mx: "auto" }}
+        sx={{
+          textAlign: "center",
+          mb: 6,
+          maxWidth: "800px",
+          mx: "auto",
+        }}
       >
         Depuis 2001, Monsieur Stéphane Seillé gère la société qu’il a créée au
         Mans (Sarthe). L’entreprise a su développer son expertise autour des
@@ -77,8 +158,9 @@ const About = () => {
 
       {/* Compétences */}
       <Typography
-        variant="h3"
+        variant="h2"
         sx={{
+          fontSize: { xs: "2rem", md: "2rem", lg: "2rem" },
           fontWeight: "bold",
           textAlign: "center",
           mb: 3,
@@ -89,60 +171,103 @@ const About = () => {
       <Grid container spacing={4} justifyContent="center">
         {competences.map((competence, index) => (
           <Grid item xs={12} sm={6} md={4} key={index}>
-            <Card sx={{ 
+            <a href={competence.link} style={{ textDecoration: "none" }}>
-                textAlign: "center", 
+              <Card
-                padding: 2,
+                sx={{
-                "&:hover": {
+                  cursor: "pointer",
-                    backgroundColor: "#0e467f", // Fond bleu au hover
+                  textAlign: "center",
-                    color: "#ffffff", // Texte blanc au hover
+                  padding: 2,
-                    transform: "scale(1.05)", // Effet zoom léger
+                  transition: "all 0.3s ease-in-out",
+                  "&:hover": {
+                    backgroundColor: "#0e467f",
+                    color: "#ffffff",
+                    transform: "scale(1.05)",
                     boxShadow: 6,
                   },
-                  "&:hover svg": {
+                  "&:hover svg": { fill: "#ffffff" },
-                    fill: "#ffffff", // Couleur blanche pour les icônes SVG au hover
+                }}
-                  }, 
+              >
-                }}>
+                <CardContent>
-              <CardContent>
+                  <Typography variant="span" sx={{ mb: 1 }}>
-                <Typography variant="h4" sx={{ mb: 1 }}>
+                    {competence.icon}
-                  {competence.icon}
+                  </Typography>
-                </Typography>
+                  <Typography
-                <Typography variant="h6" sx={{ fontWeight: "bold" }}>
+                    variant="h3"
-                  {competence.title}
+                    sx={{
-                </Typography>
+                      fontSize: { xs: "1.1rem", md: "1.1rem", lg: "1.1rem" },
-              </CardContent>
+                      fontWeight: "bold",
-            </Card>
+                    }}
+                  >
+                    {competence.title}
+                  </Typography>
+                </CardContent>
+              </Card>
+            </a>
           </Grid>
         ))}
       </Grid>
 
-      {/* Équipe */}
+      {/* Équipe - Maintenant sur 2 colonnes */}
       <Typography
-        variant="h3"
+        sx={{
-        sx={{ fontWeight: "bold", textAlign: "center", mt: 6, mb: 3 }}
+          background: "linear-gradient(to bottom, #0e467f, transparent)",
+        }}
       >
-        Notre Équipe
+        <Typography
+          variant="h2"
+          sx={{
+            fontWeight: "bold",
+            textAlign: "center",
+            mt: 6,
+            mb: 3,
+            color: "#ffffff",
+            pt: 2,
+          }}
+        >
+          Notre Équipe
+        </Typography>
+        <Typography
+          variant="body1"
+          sx={{ textAlign: "center", mt: 1, mb: 3, color: "#ffffff", pt: 2 }}
+        >
+          L’équipe d’IN3 est composée de collaborateurs experts dans leurs
+          domaines :
+        </Typography>
+        <Grid container spacing={4} justifyContent="center">
+          {team.map((member, index) => (
+            <Grid item xs={12} sm={6} key={index}>
+              <Card
+                sx={{
+                  textAlign: "center",
+                  p: 2,
+                  margin: 2,
+                  height: "100",
+                  mb: 2,
+                }}
+              >
+                <CardContent>
+                  <Avatar sx={{ width: 56, height: 56, margin: "auto" }} />
+                  <Typography
+                    variant="h3"
+                    sx={{
+                      fontSize: { xs: "1.1rem", md: "1.1rem", lg: "1.1rem" },
+                      fontWeight: "bold",
+                      mt: 2,
+                    }}
+                  >
+                    {member.name}
+                  </Typography>
+                  <Typography variant="body2">{member.role}</Typography>
+                </CardContent>
+              </Card>
+            </Grid>
+          ))}
+        </Grid>
       </Typography>
-      <Grid container spacing={4} justifyContent="center">
-        {team.map((member, index) => (
-          <Grid item xs={12} sm={6} md={3} key={index}>
-            <Card sx={{ textAlign: "center", padding: 2 }}>
-              <CardContent>
-                <Avatar sx={{ width: 56, height: 56, margin: "auto" }} />
-                <Typography
-                  variant="h6"
-                  sx={{ fontWeight: "bold", mt: 2 }}
-                  dangerouslySetInnerHTML={{ __html: member.name }}
-                />
-                <Typography variant="body2">{member.role}</Typography>
-              </CardContent>
-            </Card>
-          </Grid>
-        ))}
-      </Grid>
 
       {/* Infrastructure */}
       <Typography
-        variant="h3"
+        variant="h2"
         sx={{ fontWeight: "bold", textAlign: "center", mt: 6, mb: 3 }}
       >
         Notre Infrastructure
@@ -152,10 +277,16 @@ const About = () => {
           <Grid item xs={12} sm={6} md={4} key={index}>
             <Card sx={{ textAlign: "center", padding: 2 }}>
               <CardContent>
-                <Typography variant="h4" sx={{ mb: 1 }}>
+                <Typography variant="span" sx={{ mb: 1 }}>
                   {infra.icon}
                 </Typography>
-                <Typography variant="h6" sx={{ fontWeight: "bold" }}>
+                <Typography
+                  variant="h3"
+                  sx={{
+                    fontSize: { xs: "1.1rem", md: "1.1rem", lg: "1.1rem" },
+                    fontWeight: "bold",
+                  }}
+                >
                   {infra.title}
                 </Typography>
                 <Typography variant="body2">{infra.description}</Typography>
@@ -164,6 +295,50 @@ const About = () => {
           </Grid>
         ))}
       </Grid>
+
+      <Typography
+        sx={{
+          background: "linear-gradient(to top, #6d6e6f, transparent)",
+
+        }}
+      >
+        <Typography
+          variant="h3"
+          sx={{
+            fontSize: { xs: "2rem", md: "2rem", lg: "2rem" },
+            fontWeight: "bold",
+            textAlign: "center",
+            mt: 6,
+            mb: 3,
+            p: 2,
+          }}
+        >
+          Nous sommes équipés de matériel de dernière génération :
+        </Typography>
+        <Grid container spacing={4} justifyContent="center">
+          {materiel.map((infra, index) => (
+            <Grid item xs={12} sm={6} md={4} key={index}>
+              <Card sx={{ textAlign: "center", p: 2, margin: 2 }}>
+                <CardContent>
+                  <Typography variant="span" sx={{ mb: 1 }}>
+                    {infra.icon}
+                  </Typography>
+                  <Typography
+                    variant="h3"
+                    sx={{
+                      fontSize: { xs: "1.1rem", md: "1.1rem", lg: "1.1rem" },
+                      fontWeight: "bold",
+                    }}
+                  >
+                    {infra.title}
+                  </Typography>
+                  <Typography variant="body2">{infra.description}</Typography>
+                </CardContent>
+              </Card>
+            </Grid>
+          ))}
+        </Grid>
+      </Typography>
     </Box>
   );
 };