add bureauEtude
This commit is contained in:
sebvtl728
@@ -213,6 +213,19 @@ const Header = () => {
|
||||
>
|
||||
À Propos
|
||||
</Button>
|
||||
<Button
|
||||
component={Link}
|
||||
to="/bureauEtude"
|
||||
color="inherit"
|
||||
sx={{
|
||||
fontWeight: location.pathname === "/bureauEtude" ? "bold" : "normal",
|
||||
textDecoration:
|
||||
location.pathname === "/bureauEtude" ? "underline" : "none",
|
||||
...commonButtonStyles,
|
||||
}}
|
||||
>
|
||||
Bureau d'étude
|
||||
</Button>
|
||||
<Button
|
||||
component={Link}
|
||||
to="/contact"
|
||||
|
||||
@@ -0,0 +1,197 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Grid,
|
||||
Card,
|
||||
CardContent,
|
||||
Button,
|
||||
} from "@mui/material";
|
||||
import api from "../../api";
|
||||
|
||||
const BureauEtudes = () => {
|
||||
const [pageData, setPageData] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchPageData = async () => {
|
||||
try {
|
||||
const response = await api.get("wp/v2/pages/272?_fields=acf"); // Remplace XXX par l'ID WordPress de la page
|
||||
setPageData(response.data.acf);
|
||||
} catch (error) {
|
||||
console.error(
|
||||
"Erreur lors de la récupération des données ACF :",
|
||||
error
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
fetchPageData();
|
||||
}, []);
|
||||
|
||||
if (!pageData) {
|
||||
return <Typography>Chargement...</Typography>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Box sx={{}}>
|
||||
{/* Section Héros avec Image de Fond */}
|
||||
<Box
|
||||
sx={{
|
||||
backgroundImage: "url('https://picsum.photos/1920/600.webp')",
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
minHeight: "60vh",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
color: "white",
|
||||
textAlign: "center",
|
||||
px: 4,
|
||||
}}
|
||||
>
|
||||
|
||||
{/* Présentation Générale */}
|
||||
<Box sx={{ mt: 6, textAlign: "center", px: 4 }}>
|
||||
<Typography variant="h1" sx={{
|
||||
fontSize: { xs: "3rem", md: "3rem", lg: "3.5rem" }, // Responsive
|
||||
fontWeight: "bold",
|
||||
mb: 2,
|
||||
}}>
|
||||
Notre Bureau d'Études
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ maxWidth: "900px", mx: "auto" }}>
|
||||
{pageData.introduction}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
{/* Domaines d'Intervention */}
|
||||
<Box sx={{ mt: 6, px: 4 }}>
|
||||
<Typography variant="h2" sx={{
|
||||
fontSize: { xs: "2.5rem", md: "2.5rem", lg: "2.5rem" }, // Responsive
|
||||
fontWeight: "bold",
|
||||
textAlign: "center",
|
||||
mb: 3 }}>
|
||||
Nos Domaines d'Intervention
|
||||
</Typography>
|
||||
<Grid container spacing={4} justifyContent="center">
|
||||
{pageData.liste_des_competences?.map((competence, index) => (
|
||||
<Grid item xs={12} sm={6} md={4} key={index}>
|
||||
<Card
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
padding: 3,
|
||||
transition: "transform 0.3s, box-shadow 0.3s",
|
||||
"&:hover": {
|
||||
transform: "scale(1.05)",
|
||||
boxShadow: "0px 10px 20px rgba(0, 0, 0, 0.2)",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<CardContent>
|
||||
<Typography variant="h3" sx={{
|
||||
fontWeight: "bold",
|
||||
mb: 1,
|
||||
fontSize: { xs: "1.8rem", md: "1.8rem", lg: "1.8rem" }, // Responsive
|
||||
}}>
|
||||
{competence.comp_titre}
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{
|
||||
textAlign:"center"
|
||||
}}>{competence.comp_description}</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
{/* Compétences Spécifiques */}
|
||||
<Box sx={{ mt: 6, textAlign: "center", px: 4 }}>
|
||||
<Typography variant="h2" sx={{
|
||||
fontSize: { xs: "2.5rem", md: "2.5rem", lg: "2.5rem" }, // Responsive
|
||||
fontWeight: "bold",
|
||||
mb: 3
|
||||
}}>
|
||||
Nos Compétences
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{ maxWidth: "900px", mx: "auto" }}>
|
||||
{pageData.methodologie}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Engagement et Accompagnement */}
|
||||
<Box
|
||||
sx={{
|
||||
mt: 6,
|
||||
py: 6,
|
||||
px: 4,
|
||||
textAlign: "center",
|
||||
background: "linear-gradient(to bottom, #0e467f, #ffffff)",
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
<Typography variant="h2" sx={{
|
||||
fontSize: { xs: "2.5rem", md: "2.5rem", lg: "2.5rem" }, // Responsive
|
||||
fontWeight: "bold",
|
||||
mb: 3
|
||||
}}>
|
||||
Engagement et Accompagnement
|
||||
</Typography>
|
||||
<Grid container spacing={4} justifyContent="center">
|
||||
{pageData.expertises_specifiques?.map((expertise, index) => (
|
||||
<Grid item xs={12} sm={6} md={4} key={index}>
|
||||
<Card
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
padding: 3,
|
||||
backgroundColor: "rgba(255, 255, 255, 0.1)",
|
||||
backdropFilter: "blur(10px)",
|
||||
transition: "transform 0.3s, box-shadow 0.3s",
|
||||
"&:hover": {
|
||||
transform: "scale(1.05)",
|
||||
boxShadow: "0px 10px 20px rgba(255, 255, 255, 0.2)",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<CardContent>
|
||||
<Typography variant="h3" sx={{
|
||||
fontSize: { xs: "1.8rem", md: "1.8rem", lg: "1.8rem" }, // Responsive
|
||||
fontWeight: "bold",
|
||||
mb: 1 }}>
|
||||
{expertise.expertise_nom}
|
||||
</Typography>
|
||||
<Typography variant="body2">{expertise.expertise_details}</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
{/* Call-To-Action */}
|
||||
<Box sx={{ mt: 6, textAlign: "center", mb: 6 }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
href="/contact"
|
||||
sx={{
|
||||
padding: "12px 24px",
|
||||
fontSize: "1.2rem",
|
||||
fontWeight: "bold",
|
||||
borderRadius: "8px",
|
||||
transition: "background-color 0.3s, transform 0.3s",
|
||||
"&:hover": {
|
||||
backgroundColor: "#0a3b6b",
|
||||
transform: "scale(1.05)",
|
||||
},
|
||||
}}
|
||||
>
|
||||
Nous Contacter
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default BureauEtudes;
|
||||
Reference in New Issue
Block a user