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 SEO from "../SEO";
|
||||||
import api from "../../api";
|
import api from "../../api";
|
||||||
import ModernSpinner from "../ModernSpinner";
|
import ModernSpinner from "../ModernSpinner";
|
||||||
|
import Expertises from "../Expertises";
|
||||||
import {
|
import {
|
||||||
Box,
|
Box,
|
||||||
Grid,
|
Grid,
|
||||||
@@ -24,19 +25,22 @@ const Home = () => {
|
|||||||
const [metaDescription, setMetaDescription] = useState(
|
const [metaDescription, setMetaDescription] = useState(
|
||||||
"Description par défaut."
|
"Description par défaut."
|
||||||
);
|
);
|
||||||
|
|
||||||
|
//optionally
|
||||||
const [canonicalUrl, setCanonicalUrl] = useState(null);
|
const [canonicalUrl, setCanonicalUrl] = useState(null);
|
||||||
const [isLoading, setIsLoading] = useState(true);
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
const [error, setError] = useState(null);
|
const [error, setError] = useState(null);
|
||||||
|
|
||||||
const [expertiseTitle, setExpertiseTitle] = useState(
|
// ACF Expertise
|
||||||
"Titre Pourquoi Nous Choisir ?"
|
const [expertiseTitle, setExpertiseTitle] = useState("Titre Pourquoi Nous Choisir ?");
|
||||||
);
|
|
||||||
const [expertise1Title, setExpertise1Title] = useState("Titre Expertise 1");
|
const [expertise1Title, setExpertise1Title] = useState("Titre Expertise 1");
|
||||||
const [expertise1Text, setExpertise1Text] = useState("Text Expertise 1");
|
const [expertise1Text, setExpertise1Text] = useState("Text Expertise 1");
|
||||||
const [expertise2Title, setExpertise2Title] = useState("Titre Expertise 2");
|
const [expertise2Title, setExpertise2Title] = useState("Titre Expertise 2");
|
||||||
const [expertise2Text, setExpertise2Text] = useState("Text Expertise 2");
|
const [expertise2Text, setExpertise2Text] = useState("Text Expertise 2");
|
||||||
const [expertise3Title, setExpertise3Title] = useState("Titre Expertise 3");
|
const [expertise3Title, setExpertise3Title] = useState("Titre Expertise 3");
|
||||||
const [expertise3Text, setExpertise3Text] = useState("Text Expertise 3");
|
const [expertise3Text, setExpertise3Text] = useState("Text Expertise 3");
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchPageData = async () => {
|
const fetchPageData = async () => {
|
||||||
try {
|
try {
|
||||||
@@ -69,6 +73,7 @@ const Home = () => {
|
|||||||
} else {
|
} else {
|
||||||
setBackgroundImage(null);
|
setBackgroundImage(null);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Récupération du titre de la deuxième section Expertise
|
// Récupération du titre de la deuxième section Expertise
|
||||||
setExpertiseTitle(acf?.titre_expertise || "Pourquoi Nous Choisir ?");
|
setExpertiseTitle(acf?.titre_expertise || "Pourquoi Nous Choisir ?");
|
||||||
setExpertise1Title(acf?.gdc_expert.titre_expertise_1 || "Expertise 1");
|
setExpertise1Title(acf?.gdc_expert.titre_expertise_1 || "Expertise 1");
|
||||||
@@ -83,6 +88,7 @@ const Home = () => {
|
|||||||
setExpertise3Text(
|
setExpertise3Text(
|
||||||
acf?.gdc_expert.text_expertise_3 || "Text Expertise 3"
|
acf?.gdc_expert.text_expertise_3 || "Text Expertise 3"
|
||||||
);
|
);
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Erreur lors de la récupération des données :", error);
|
console.error("Erreur lors de la récupération des données :", error);
|
||||||
setError("Impossible de charger les données. Veuillez réessayer.");
|
setError("Impossible de charger les données. Veuillez réessayer.");
|
||||||
@@ -138,124 +144,15 @@ const Home = () => {
|
|||||||
textColor={heroTextColor}
|
textColor={heroTextColor}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* <Box textAlign="center" my={4}>
|
<Expertises
|
||||||
<Button
|
expertiseTitle={expertiseTitle}
|
||||||
variant="contained"
|
expertise1Title={expertise1Title}
|
||||||
size="large"
|
expertise1Text={expertise1Text}
|
||||||
sx={{
|
expertise2Title={expertise2Title}
|
||||||
backgroundColor: "#0e467f",
|
expertise2Text={expertise2Text}
|
||||||
color: "#fff",
|
expertise3Title={expertise3Title}
|
||||||
fontWeight: "bold",
|
expertise3Text={expertise3Text}
|
||||||
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>
|
|
||||||
|
|
||||||
{/* Section Désir : Témoignages */}
|
{/* Section Désir : Témoignages */}
|
||||||
<Box sx={{ py: 6, px: 4 }}>
|
<Box sx={{ py: 6, px: 4 }}>
|
||||||
|
|||||||
Reference in New Issue
Block a user