footer add

frontend/src/components/Footer.jsx

@@ -0,0 +1,203 @@
+import React from "react";
+import {
+  Box,
+  Typography,
+  Grid,
+  Link,
+  IconButton,
+} from "@mui/material";
+import {
+  Facebook,
+  Twitter,
+  Instagram,
+  LinkedIn,
+} from "@mui/icons-material";
+
+const Footer = () => {
+  return (
+    <Box
+      sx={{
+        backgroundColor: "#0e467f",
+        color: "white",
+        padding: "40px 20px",
+      }}
+    >
+      <Grid
+        container
+        spacing={4}
+        justifyContent="space-between"
+        alignItems="flex-start"
+      >
+        {/* Section Informations */}
+        <Grid item xs={12} sm={6} md={4}>
+          <Typography
+            variant="h6"
+            component="h2"
+            sx={{ fontWeight: "bold", textAlign: { xs: "center", md: "left" } }}
+          >
+            IN3 Intégrale Ingénierie Internationale
+          </Typography>
+          <Typography
+            variant="body2"
+            sx={{ marginTop: 1, textAlign: { xs: "center", md: "left" } }}
+          >
+            67 Boulevard Winston Churchill,
+            <br />
+            72100 Le Mans, France
+          </Typography>
+          <Typography
+            variant="body2"
+            sx={{ marginTop: 1, textAlign: { xs: "center", md: "left" } }}
+          >
+            <strong>Téléphone :</strong> 02.43.85.09.01
+          </Typography>
+          <Typography
+            variant="body2"
+            sx={{ marginTop: 1, textAlign: { xs: "center", md: "left" } }}
+          >
+            <strong>Email :</strong>{" "}
+            <Link
+              href="mailto:contact@be-in3.com"
+              underline="hover"
+              sx={{ color: "white" }}
+            >
+              contact@be-in3.com
+            </Link>
+          </Typography>
+        </Grid>
+
+        {/* Section Navigation */}
+        <Grid item xs={12} sm={6} md={4}>
+          <Typography
+            variant="h6"
+            component="h2"
+            sx={{
+              fontWeight: "bold",
+              textAlign: "center",
+            }}
+          >
+            Liens Utiles
+          </Typography>
+          <Box
+            sx={{
+              marginTop: 1,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+            }}
+          >
+            <Link
+              href="/expertises"
+              underline="hover"
+              sx={{
+                color: "white",
+                marginBottom: "8px",
+                textAlign: "center",
+              }}
+            >
+              Nos Expertises
+            </Link>
+            <Link
+              href="/contact"
+              underline="hover"
+              sx={{
+                color: "white",
+                marginBottom: "8px",
+                textAlign: "center",
+              }}
+            >
+              Contactez-nous
+            </Link>
+            <Link
+              href="/mentions-legales"
+              underline="hover"
+              sx={{
+                color: "white",
+                marginBottom: "8px",
+                textAlign: "center",
+              }}
+            >
+              Mentions Légales
+            </Link>
+          </Box>
+        </Grid>
+
+        {/* Section Réseaux Sociaux */}
+        <Grid item xs={12} md={4}>
+          <Typography
+            variant="h6"
+            component="h2"
+            sx={{
+              fontWeight: "bold",
+              textAlign: { xs: "center", md: "right" },
+            }}
+          >
+            Suivez-nous
+          </Typography>
+          <Box
+            sx={{
+              marginTop: 1,
+              display: "flex",
+              justifyContent: { xs: "center", md: "flex-end" },
+              gap: 2,
+            }}
+          >
+            <IconButton
+              aria-label="Facebook"
+              href="https://facebook.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              sx={{ color: "white" }}
+            >
+              <Facebook />
+            </IconButton>
+            <IconButton
+              aria-label="Twitter"
+              href="https://twitter.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              sx={{ color: "white" }}
+            >
+              <Twitter />
+            </IconButton>
+            <IconButton
+              aria-label="Instagram"
+              href="https://instagram.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              sx={{ color: "white" }}
+            >
+              <Instagram />
+            </IconButton>
+            <IconButton
+              aria-label="LinkedIn"
+              href="https://linkedin.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              sx={{ color: "white" }}
+            >
+              <LinkedIn />
+            </IconButton>
+          </Box>
+        </Grid>
+      </Grid>
+
+      {/* Copyright */}
+      <Box
+        sx={{
+          borderTop: "1px solid #ffffff",
+          marginTop: "20px",
+          paddingTop: "10px",
+          textAlign: "center",
+        }}
+      >
+        <Typography variant="body2">
+          © {new Date().getFullYear()} IN3 Intégrale Ingénierie Internationale.
+          Tous droits réservés.
+        </Typography>
+      </Box>
+    </Box>
+  );
+};
+
+export default Footer;

frontend/src/components/Header.jsx

@@ -174,15 +174,15 @@ const Header = () => {
               onClick={handleMenuClose}
             >
               <WorkIcon sx={{ marginRight: 1 }} />
-              Formation IA
+              Structure béton | charpente métallique / bois
             </MenuItem>
             <MenuItem
               component={Link}
               to="/services/formation-video"
               onClick={handleMenuClose}
             >
-              <WorkIcon sx={{ marginRight: 1 }} />
+              <WorkIcon sx={{ marginRight: 1}} />
-              Formation Video
+              Électricité
             </MenuItem>
           </Menu>
 

frontend/src/components/Pages/ServiceTrois.jsx

@@ -3,15 +3,15 @@ import ServicePageTemplate from '../ServicePageTemplate';
 
 const ServiceTrois = () => {
   const serviceDetails = {
-    title: 'Formation IA',
+    title: 'Électricité',
-    subtitle: 'Dominez l’intelligence artificielle.',
+    subtitle: 'IN3 est un bureau d’études technique spécialisé dans l’ingénierie électrique du bâtiment.',
     description:
       'Plongez dans le futur ! Notre formation IA vous prépare aux outils modernes d’intelligence artificielle comme Python, TensorFlow et OpenAI API. Apprenez à créer des modèles IA performants.',
     features: [
       {
-        title: 'Fondamentaux de l’IA',
+        title: 'Chantier électricité industriel',
-        description: 'Concepts, algorithmes et applications.',
+        description: 'Réalisation d’installations électriques.',
-        modalText: 'Découvrez les bases de l’IA, des algorithmes aux applications concrètes dans divers domaines.',
+        modalText: 'Réalisation d’installations électriques pour des sites industriels, incluant le câblage, la pose d’équipements, et la mise en conformité selon les normes en vigueur..',
         modalImage: 'https://picsum.photos/id/200/800/400.webp',
       },
       {
@@ -28,7 +28,7 @@ const ServiceTrois = () => {
       },
     ],
     image: 'https://picsum.photos/id/239/1920/1080.webp',
-    ctaText: 'Découvrir la formation IA',
+    ctaText: 'En savoir plus !',
     ctaLink: '/contact',
     carouselItems: [
       {

frontend/src/components/ServicePageTemplate.jsx

@@ -94,7 +94,7 @@ const ServicePageTemplate = ({
             sx={{
               textTransform: "none",
               fontWeight: "bold",
-              backgroundColor: "#0e467f",
+              backgroundColor: " #0e467f",
               "&:hover": { backgroundColor: "#00bcd4" },
             }}
           >
@@ -212,12 +212,12 @@ const ServicePageTemplate = ({
               flexDirection: "column",
               alignItems: "center",
               textAlign: "center",
-              background: "rgba(10, 41, 79, 0.21)",
+              background: "rgb(255, 255, 255)",
               boxShadow: "0 4px 30px rgba(0, 0, 0, 0.1)",
               backdropFilter: "blur(10px)",
               borderRadius: 2,
               border: "1px solid rgba(255, 255, 255, 0.3)",
-              color: " #ffffff",
+              color: "rgb(0, 0, 0)",
             }}
           >
             <img

frontend/src/main.jsx

@@ -18,6 +18,8 @@ import Post from "./components/Pages/Post";
 // import Contact from "./components/Pages/Contact";
 import Search from "./components/Pages/Search"; // Nouveau composant pour la recherche
 import Header from "./components/Header";
+import Footer from './components/Footer';
+
 
 // Import des services
 import ServiceUn from "./components/Pages/ServiceUn.jsx";
@@ -49,6 +51,7 @@ ReactDOM.createRoot(document.getElementById("root")).render(
             <Route path="/services/formation-ia" element={<ServiceDeux />} />
             <Route path="/services/formation-video" element={<ServiceTrois />} />
           </Routes>
+          <Footer />
         </Router>
       </HelmetProvider>
     </ThemeProvider>