creat component Expertise and integration
This commit is contained in:
sebvtl728
@@ -0,0 +1,116 @@
|
||||
import React from "react";
|
||||
import { Box, Grid, Typography, Card, CardContent } from "@mui/material";
|
||||
|
||||
const Expertices = ({
|
||||
expertiseTitle,
|
||||
expertise1Title,
|
||||
expertise1Text,
|
||||
expertise2Title,
|
||||
expertise2Text,
|
||||
expertise3Title,
|
||||
expertise3Text,
|
||||
}) => {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
py: 6,
|
||||
px: 4,
|
||||
backgroundColor: "#f9f9f9",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h2"
|
||||
align="center"
|
||||
gutterBottom
|
||||
sx={{
|
||||
fontWeight: "bold",
|
||||
mb: 4,
|
||||
fontSize: { xs: "2.4rem", md: "2.4rem", lg: "3rem" }, // Responsive
|
||||
}}
|
||||
>
|
||||
{expertiseTitle}
|
||||
</Typography>
|
||||
<Grid container spacing={4}>
|
||||
{/* Expertise 1 */}
|
||||
<Grid item xs={12} md={4}>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: 3,
|
||||
padding: 2,
|
||||
textAlign: "center",
|
||||
backgroundColor: "#fff",
|
||||
}}
|
||||
>
|
||||
<CardContent>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{
|
||||
fontWeight: "bold",
|
||||
mb: 2,
|
||||
fontSize: { xs: "2rem", md: "2rem", lg: "2rem" }, // Responsive
|
||||
}}
|
||||
>
|
||||
{expertise1Title}
|
||||
</Typography>
|
||||
<Typography variant="body1">{expertise1Text}</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
|
||||
{/* Expertise 2 */}
|
||||
<Grid item xs={12} md={4}>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: 3,
|
||||
padding: 2,
|
||||
textAlign: "center",
|
||||
backgroundColor: "#fff",
|
||||
}}
|
||||
>
|
||||
<CardContent>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{
|
||||
fontWeight: "bold",
|
||||
mb: 2,
|
||||
fontSize: { xs: "2rem", md: "2rem", lg: "2rem" }, // Responsive
|
||||
}}
|
||||
>
|
||||
{expertise2Title}
|
||||
</Typography>
|
||||
<Typography variant="body1">{expertise2Text}</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
|
||||
{/* Expertise 3 */}
|
||||
<Grid item xs={12} md={4}>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: 3,
|
||||
padding: 2,
|
||||
textAlign: "center",
|
||||
backgroundColor: "#fff",
|
||||
}}
|
||||
>
|
||||
<CardContent>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{
|
||||
fontWeight: "bold",
|
||||
mb: 2,
|
||||
fontSize: { xs: "2rem", md: "2rem", lg: "2rem" }, // Responsive
|
||||
}}
|
||||
>
|
||||
{expertise3Title}
|
||||
</Typography>
|
||||
<Typography variant="body1">{expertise3Text}</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Expertices;
|
||||
@@ -3,6 +3,7 @@ import Hero from "../Hero";
|
||||
import SEO from "../SEO";
|
||||
import api from "../../api";
|
||||
import ModernSpinner from "../ModernSpinner";
|
||||
import Expertises from "../Expertises";
|
||||
import {
|
||||
Box,
|
||||
Grid,
|
||||
@@ -24,19 +25,22 @@ const Home = () => {
|
||||
const [metaDescription, setMetaDescription] = useState(
|
||||
"Description par défaut."
|
||||
);
|
||||
|
||||
//optionally
|
||||
const [canonicalUrl, setCanonicalUrl] = useState(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
const [expertiseTitle, setExpertiseTitle] = useState(
|
||||
"Titre Pourquoi Nous Choisir ?"
|
||||
);
|
||||
// ACF Expertise
|
||||
const [expertiseTitle, setExpertiseTitle] = useState("Titre Pourquoi Nous Choisir ?");
|
||||
const [expertise1Title, setExpertise1Title] = useState("Titre Expertise 1");
|
||||
const [expertise1Text, setExpertise1Text] = useState("Text Expertise 1");
|
||||
const [expertise2Title, setExpertise2Title] = useState("Titre Expertise 2");
|
||||
const [expertise2Text, setExpertise2Text] = useState("Text Expertise 2");
|
||||
const [expertise3Title, setExpertise3Title] = useState("Titre Expertise 3");
|
||||
const [expertise3Text, setExpertise3Text] = useState("Text Expertise 3");
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const fetchPageData = async () => {
|
||||
try {
|
||||
@@ -69,6 +73,7 @@ const Home = () => {
|
||||
} else {
|
||||
setBackgroundImage(null);
|
||||
}
|
||||
|
||||
// Récupération du titre de la deuxième section Expertise
|
||||
setExpertiseTitle(acf?.titre_expertise || "Pourquoi Nous Choisir ?");
|
||||
setExpertise1Title(acf?.gdc_expert.titre_expertise_1 || "Expertise 1");
|
||||
@@ -83,6 +88,7 @@ const Home = () => {
|
||||
setExpertise3Text(
|
||||
acf?.gdc_expert.text_expertise_3 || "Text Expertise 3"
|
||||
);
|
||||
|
||||
} catch (error) {
|
||||
console.error("Erreur lors de la récupération des données :", error);
|
||||
setError("Impossible de charger les données. Veuillez réessayer.");
|
||||
@@ -138,124 +144,15 @@ const Home = () => {
|
||||
textColor={heroTextColor}
|
||||
/>
|
||||
|
||||
{/* <Box textAlign="center" my={4}>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="large"
|
||||
sx={{
|
||||
backgroundColor: "#0e467f",
|
||||
color: "#fff",
|
||||
fontWeight: "bold",
|
||||
textTransform: "none",
|
||||
"&:hover": { backgroundColor: "#08508b" },
|
||||
}}
|
||||
href="/contact"
|
||||
>
|
||||
Nous Contacter
|
||||
</Button>
|
||||
</Box> */}
|
||||
|
||||
{/* Section Intérêt : Nos Services */}
|
||||
<Box
|
||||
sx={{
|
||||
py: 6,
|
||||
px: 4,
|
||||
backgroundColor: "#f9f9f9",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h2"
|
||||
align="center"
|
||||
gutterBottom
|
||||
sx={{
|
||||
fontWeight: "bold",
|
||||
mb: 4,
|
||||
fontSize: { xs: "2.4rem", md: "2.4rem", lg: "3rem" }, // Responsive
|
||||
}}
|
||||
>
|
||||
{expertiseTitle}{" "}
|
||||
</Typography>
|
||||
<Grid container spacing={4}>
|
||||
{/* Expertise 1 */}
|
||||
<Grid item xs={12} md={4}>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: 3,
|
||||
padding: 2,
|
||||
textAlign: "center",
|
||||
backgroundColor: "#fff",
|
||||
}}
|
||||
>
|
||||
<CardContent>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{
|
||||
fontWeight: "bold",
|
||||
mb: 2,
|
||||
fontSize: { xs: "2rem", md: "2rem", lg: "2rem" }, // Responsive
|
||||
}}
|
||||
>
|
||||
{expertise1Title}{" "}
|
||||
</Typography>
|
||||
<Typography variant="body1">{expertise1Text} </Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
|
||||
{/* Expertise 2 */}
|
||||
<Grid item xs={12} md={4}>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: 3,
|
||||
padding: 2,
|
||||
textAlign: "center",
|
||||
backgroundColor: "#fff",
|
||||
}}
|
||||
>
|
||||
<CardContent>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{
|
||||
fontWeight: "bold",
|
||||
mb: 2,
|
||||
fontSize: { xs: "2rem", md: "2rem", lg: "2rem" }, // Responsive
|
||||
}}
|
||||
>
|
||||
{expertise2Title}{" "}
|
||||
</Typography>
|
||||
<Typography variant="body1">{expertise2Text} </Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
|
||||
{/* Expertise 3 */}
|
||||
<Grid item xs={12} md={4}>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: 3,
|
||||
padding: 2,
|
||||
textAlign: "center",
|
||||
backgroundColor: "#fff",
|
||||
}}
|
||||
>
|
||||
<CardContent>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{
|
||||
fontWeight: "bold",
|
||||
mb: 2,
|
||||
fontSize: { xs: "2rem", md: "2rem", lg: "2rem" }, // Responsive
|
||||
}}
|
||||
>
|
||||
{" "}
|
||||
{expertise3Title}{" "}
|
||||
</Typography>
|
||||
<Typography variant="body1">{expertise3Text} </Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
<Expertises
|
||||
expertiseTitle={expertiseTitle}
|
||||
expertise1Title={expertise1Title}
|
||||
expertise1Text={expertise1Text}
|
||||
expertise2Title={expertise2Title}
|
||||
expertise2Text={expertise2Text}
|
||||
expertise3Title={expertise3Title}
|
||||
expertise3Text={expertise3Text}
|
||||
/>
|
||||
|
||||
{/* Section Désir : Témoignages */}
|
||||
<Box sx={{ py: 6, px: 4 }}>
|
||||
|
||||
Reference in New Issue
Block a user