footer add

2025-01-09 21:27:52 +01:00
parent c057878b5d
commit 7c25479236
5 changed files with 218 additions and 12 deletions
@@ -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;