From e734ca68fc3d9d83086ccaf138bc5b182d4777df Mon Sep 17 00:00:00 2001
From: sebvtl728 <sebavtl.arinfo@gmail.com>
Date: Sun, 5 Jan 2025 13:00:48 +0100
Subject: [PATCH] creat component Expertise and integration

---
 frontend/src/components/Expertises.jsx | 116 +++++++++++++++++++++
 frontend/src/components/Pages/Home.jsx | 139 ++++---------------------
 2 files changed, 134 insertions(+), 121 deletions(-)
 create mode 100644 frontend/src/components/Expertises.jsx

diff --git a/frontend/src/components/Expertises.jsx b/frontend/src/components/Expertises.jsx
new file mode 100644
index 0000000..2fb0318
--- /dev/null
+++ b/frontend/src/components/Expertises.jsx
@@ -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;
\ No newline at end of file
diff --git a/frontend/src/components/Pages/Home.jsx b/frontend/src/components/Pages/Home.jsx
index c5385e5..93740f8 100644
--- a/frontend/src/components/Pages/Home.jsx
+++ b/frontend/src/components/Pages/Home.jsx
@@ -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 }}>