add about page

frontend/src/components/Pages/About.jsx

@@ -1,12 +1,171 @@
-import React from 'react';
+import React from "react";
+import {
+  Box,
+  Typography,
+  Grid,
+  Card,
+  CardContent,
+  Avatar,
+} from "@mui/material";
+import BusinessIcon from "@mui/icons-material/Business";
+import BuildIcon from "@mui/icons-material/Build";
+import FlashOnIcon from "@mui/icons-material/FlashOn";
+import SecurityIcon from "@mui/icons-material/Security";
+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";
 
 const About = () => {
-    return (
+  const competences = [
-        <div>
+    { icon: <BusinessIcon />, title: "Bureau d’études et Maitrise d’œuvre" },
-            <h1>À propos</h1>
+    { icon: <BuildIcon />, title: "La structure béton / métallique / bois" },
-            <p>Bienvenue sur la page À propos.</p>
+    { icon: <FlashOnIcon />, title: "L’électricité" },
-        </div>
+    { icon: <SecurityIcon />, title: "Sécurité incendie (SSI)" },
-    );
+    { icon: <EngineeringIcon />, title: "Expertises TCE" },
+    { icon: <AssessmentIcon />, title: "Diagnostics technique" },
+  ];
+
+  const team = [
+    {
+      name: "Ingénieur <br> 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",
+      role: "Béton armé, TCE, DAO-CAO, dessinatrice TCE",
+    },
+    { name: "Assistante de <br> gestion", role: "Comptable" },
+  ];
+
+  const infrastructure = [
+    {
+      icon: <ComputerIcon />,
+      title: "CAO-DAO",
+      description: "Autocad & ZWCAD Pro",
+    },
+    {
+      icon: <ComputerIcon />,
+      title: "Modélisation",
+      description: "Sketchup 3D",
+    },
+    {
+      icon: <LibraryBooksIcon />,
+      title: "Calculs techniques",
+      description: "Progiciel interne ou programme du CACT (tango, spot)",
+    },
+  ];
+
+  return (
+    <Box sx={{ padding: "40px 20px" }}>
+      {/* En-tête */}
+      <Typography
+        variant="h2"
+        sx={{ fontWeight: "bold", textAlign: "center", mb: 4 }}
+      >
+        La société IN3
+      </Typography>
+      <Typography
+        variant="h5"
+        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
+        activités du bureau d’études et de la maîtrise d’œuvre.
+      </Typography>
+
+      {/* Compétences */}
+      <Typography
+        variant="h3"
+        sx={{
+          fontWeight: "bold",
+          textAlign: "center",
+          mb: 3,
+        }}
+      >
+        Nos Compétences
+      </Typography>
+      <Grid container spacing={4} justifyContent="center">
+        {competences.map((competence, index) => (
+          <Grid item xs={12} sm={6} md={4} key={index}>
+            <Card sx={{ 
+                textAlign: "center", 
+                padding: 2,
+                "&:hover": {
+                    backgroundColor: "#0e467f", // Fond bleu au hover
+                    color: "#ffffff", // Texte blanc au hover
+                    transform: "scale(1.05)", // Effet zoom léger
+                    boxShadow: 6,
+                  },
+                  "&:hover svg": {
+                    fill: "#ffffff", // Couleur blanche pour les icônes SVG au hover
+                  }, 
+                }}>
+              <CardContent>
+                <Typography variant="h4" sx={{ mb: 1 }}>
+                  {competence.icon}
+                </Typography>
+                <Typography variant="h6" sx={{ fontWeight: "bold" }}>
+                  {competence.title}
+                </Typography>
+              </CardContent>
+            </Card>
+          </Grid>
+        ))}
+      </Grid>
+
+      {/* Équipe */}
+      <Typography
+        variant="h3"
+        sx={{ fontWeight: "bold", textAlign: "center", mt: 6, mb: 3 }}
+      >
+        Notre Équipe
+      </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"
+        sx={{ fontWeight: "bold", textAlign: "center", mt: 6, mb: 3 }}
+      >
+        Notre Infrastructure
+      </Typography>
+      <Grid container spacing={4} justifyContent="center">
+        {infrastructure.map((infra, index) => (
+          <Grid item xs={12} sm={6} md={4} key={index}>
+            <Card sx={{ textAlign: "center", padding: 2 }}>
+              <CardContent>
+                <Typography variant="h4" sx={{ mb: 1 }}>
+                  {infra.icon}
+                </Typography>
+                <Typography variant="h6" sx={{ fontWeight: "bold" }}>
+                  {infra.title}
+                </Typography>
+                <Typography variant="body2">{infra.description}</Typography>
+              </CardContent>
+            </Card>
+          </Grid>
+        ))}
+      </Grid>
+    </Box>
+  );
 };
 
 export default About;