footer add

This commit is contained in:
sebvtl728
2025-01-09 21:27:52 +01:00
parent c057878b5d
commit 7c25479236
5 changed files with 218 additions and 12 deletions
+203
View File
@@ -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;
+3 -3
View File
@@ -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 }} />
Formation Video
<WorkIcon sx={{ marginRight: 1}} />
Électricité
</MenuItem>
</Menu>
@@ -3,15 +3,15 @@ import ServicePageTemplate from '../ServicePageTemplate';
const ServiceTrois = () => {
const serviceDetails = {
title: 'Formation IA',
subtitle: 'Dominez lintelligence artificielle.',
title: 'Électricité',
subtitle: 'IN3 est un bureau d’études technique spécialisé dans lingénierie électrique du bâtiment.',
description:
'Plongez dans le futur! Notre formation IA vous prépare aux outils modernes dintelligence artificielle comme Python, TensorFlow et OpenAI API. Apprenez à créer des modèles IA performants.',
features: [
{
title: 'Fondamentaux de lIA',
description: 'Concepts, algorithmes et applications.',
modalText: 'Découvrez les bases de lIA, des algorithmes aux applications concrètes dans divers domaines.',
title: 'Chantier électricité industriel',
description: 'Réalisation dinstallations électriques.',
modalText: 'Réalisation dinstallations é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: [
{
@@ -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