From 8bbc9955b1613390d445af541e971b18528391bd Mon Sep 17 00:00:00 2001
From: sebvtl728 <sebavtl.arinfo@gmail.com>
Date: Sat, 4 Jan 2025 14:37:53 +0100
Subject: [PATCH] Maj Header and add logo svg

---
 .DS_Store                              | Bin 0 -> 6148 bytes
 frontend/src/assets/logo-in3-mobil.svg |  22 ++
 frontend/src/assets/logo-in3.svg       |  22 ++
 frontend/src/components/Header.jsx     |  75 +++++-
 frontend/src/components/Pages/Home.jsx | 319 ++++++++++++++++++-------
 5 files changed, 341 insertions(+), 97 deletions(-)
 create mode 100644 .DS_Store
 create mode 100644 frontend/src/assets/logo-in3-mobil.svg
 create mode 100644 frontend/src/assets/logo-in3.svg

diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..649816c8d6dd015a31f7bd82c3ecf8100678041b
GIT binary patch
literal 6148
zcmeHK%}T>S5Z-O8-BN@e6nb3nTCjf<#7n641&ruHr6we5FlI}V+CwSitS{t~_&m<+
zZopy>o<!^nY`)p~+1>dd`@<OH<9X0yti>1;&=5H)8wAZ8T@@RQ$n_XG3t7Sff04~L
z4D=UGxOTzrS;`cw{LA|NSoz?4_h)gG<=yTFuT*P0yLC|)O>yf!s)d_-`8*qY={5E)
zl#2aQ_x#H!TufX0rz*+4C<#-Y5CtKG++0OTpcZ2_Pl8P6y2c?IqA_i?m&;yn)RBW>
zf7Ox8<9@dzhl9~-)er}VM<?ggr}#NhuZBzxyldIBSi&19-|BjC(<D~O1Nh3kGM<na
zAO?s5Vqkk1uxEg1ZcoWnDKS6{{Ez|MA0#wH$6{enZyoT#>ofXmh$x`rTLMv9bSxGI
z!2`lgDxgW__KCqwI@qO+b1W7HO*-RxW*EoLTs~g7o*nE`hcoUNq%Sc*46HLyHQg4T
z|7Y;aY<%Rer%;a=AO`*!1H3kICu1neo~_@?!?RXGyMu;;aRn+Mps!s5po9BJTRV+k
bq7HG6#lj$tf_9w_NEZQ32z`iwUtr)9`fN=T

literal 0
HcmV?d00001

diff --git a/frontend/src/assets/logo-in3-mobil.svg b/frontend/src/assets/logo-in3-mobil.svg
new file mode 100644
index 0000000..b6e3340
--- /dev/null
+++ b/frontend/src/assets/logo-in3-mobil.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_3" data-name="Calque 3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 372.1 345.53">
+  <g id="Calque_1" data-name="Calque 1">
+    <polyline points="315.48 135.3 358.16 181.43 306.75 228.68" style="fill: none; stroke: #d54f32; stroke-miterlimit: 10;"/>
+  </g>
+  <path d="M158.52,326.33l-28.91-33.06h91.41s-37.52,34.43-37.52,34.43c-7.24,6.64-18.52,6.02-24.98-1.37Z" style="fill: #d54f32;"/>
+  <path d="M285.06,112.42c2.78,20.08-11.44,24.91-11.44,24.91,0,0,11.9,3.8,11.84,20.25.06,10.96,2.04,27.87-23.11,27.45-22.05-.37-20.36-24.65-20.36-24.65h11.67c0,5.59.5,9.88,3.59,13.27,3.09,3.39,16.46,6.09,16.87-13.07s-13.38-17.76-13.38-17.76v-10.98c13.27-.1,13.24-11.4,13.24-11.4,0,0,2.12-15.89-10.24-15.89s-10.42,15.89-10.42,15.89l-11.37.33c-.83-22.45,13.2-24.75,13.2-24.75,0,0,6.94-2.12,14.16-1.01l-50.33-55.66c-5.8-6.42-15.7-6.92-22.12-1.12L45.22,175.37c-6.71,6.07-7.23,16.43-1.16,23.14l61.52,68.05h144.35l96.01-86.81-60.87-67.32ZM142.56,248.84h-20.65v-114.07h20.65v114.07ZM231.05,248.84h-20.65v-90.35c-.82-4.56-2.71-7.47-5.64-8.64-5.81-2.34-14.22,2.83-18.72,6.12l-.2.15v92.72h-20.65v-114.07h20.65v10.84l.83-.75c3.33-2.96,10.42-8.37,20.61-11.38,1.61-.47,3.32-.71,5.07-.71h1.66c9.4,0,17.04,7.64,17.04,17.04v99.03Z" style="fill: #d54f32;"/>
+  <g id="Calque_4" data-name="Calque 4">
+    <path d="M257.59,120.12s-1.94-15.89,10.42-15.89,10.24,15.89,10.24,15.89c0,0,.03,11.3-13.24,11.4v10.98s13.79-1.4,13.38,17.76-13.78,16.46-16.87,13.07-3.59-7.68-3.59-13.27h-11.67s-1.69,24.28,20.36,24.65c25.15.42,23.17-16.49,23.11-27.45.06-16.45-11.84-20.25-11.84-20.25,0,0,15.27-5.19,11.08-27.14s-29.54-14.17-29.54-14.17c0,0-14.03,2.3-13.2,24.75l11.37-.33Z" style="fill: #525a7f;"/>
+    <path d="M261.89,120.12s-1.94-15.89,10.42-15.89,10.24,15.89,10.24,15.89c0,0,.03,11.3-13.24,11.4v10.98s13.79-1.4,13.38,17.76-13.78,16.46-16.87,13.07-3.59-7.68-3.59-13.27h-11.67s-1.69,24.28,20.36,24.65c25.15.42,23.17-16.49,23.11-27.45.06-16.45-11.84-20.25-11.84-20.25,0,0,15.27-5.19,11.08-27.14s-29.54-14.17-29.54-14.17c0,0-14.03,2.3-13.2,24.75l11.37-.33Z" style="fill: #ffffff;"/>
+  </g>
+  <g id="texte">
+    <rect x="121.45" y="96.06" width="21.31" height="21.31" style="fill:#ffffff;"/>
+    <text transform="translate(24.58 175.83) rotate(-42.02) scale(.55 .77)" style="fill: #294A9A; font-family: HelveticaNeue-Bold, &apos;Helvetica Neue&apos;; font-size: 33.01px; font-weight: 700; letter-spacing: .02em;"><tspan x="0" y="0">in</tspan></text>
+    <text transform="translate(36.65 164.95) rotate(-42.02) scale(.52 .77)" style="fill: #294A9A; font-family: HelveticaNeue-Medium, &apos;Helvetica Neue&apos;; font-size: 25px; font-weight: 500; letter-spacing: 0em;"><tspan x="0" y="0">tégrale</tspan></text>
+    <text transform="translate(75.8 129.73) rotate(-42.02) scale(.55 .77)" style="fill: #294A9A; font-family: HelveticaNeue-Bold, &apos;Helvetica Neue&apos;; font-size: 33.01px; font-weight: 700; letter-spacing: .02em;"><tspan x="0" y="0">in</tspan></text>
+    <text transform="translate(87.87 118.85) rotate(-42.02) scale(.52 .77)" style="fill: #294A9A; font-family: HelveticaNeue-Medium, &apos;Helvetica Neue&apos;; font-size: 25px; font-weight: 500; letter-spacing: 0em;"><tspan x="0" y="0">génierie</tspan></text>
+    <text transform="translate(133.58 77.75) rotate(-42.11) scale(.55 .77)" style="fill: #294A9A; font-family: HelveticaNeue-Bold, &apos;Helvetica Neue&apos;; font-size: 33.01px; font-weight: 700; letter-spacing: .02em;"><tspan x="0" y="0">in</tspan></text>
+    <text transform="translate(145.64 66.85) rotate(-42.11) scale(.52 .77)" style="fill: #294A9A; font-family: HelveticaNeue-Medium, &apos;Helvetica Neue&apos;; font-size: 25px; font-weight: 500;"><tspan x="0" y="0" style="letter-spacing: 0em;">te</tspan><tspan x="22.22" y="0" style="letter-spacing: .02em;">r</tspan><tspan x="31.47" y="0">nationale</tspan></text>
+    <text transform="translate(52.94 285.9) scale(.52 .77)" style="fill: #294A9A; font-family: HelveticaNeue-Bold, &apos;Helvetica Neue&apos;; font-size: 25px; font-weight: 700;"><tspan x="0" y="0" style="letter-spacing: .09em;">Bu</tspan><tspan x="36.77" y="0" style="letter-spacing: .07em;">r</tspan><tspan x="48.22" y="0" style="letter-spacing: .09em;">eau d’études &amp; Maîtrise d’oeuv</tspan><tspan x="481.07" y="0" style="letter-spacing: .07em;">r</tspan><tspan x="492.52" y="0" style="letter-spacing: .09em;">e</tspan></text>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/assets/logo-in3.svg b/frontend/src/assets/logo-in3.svg
new file mode 100644
index 0000000..d2f779b
--- /dev/null
+++ b/frontend/src/assets/logo-in3.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_3" data-name="Calque 3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 372.1 345.53">
+  <g id="Calque_1" data-name="Calque 1">
+    <polyline points="315.48 135.3 358.16 181.43 306.75 228.68" style="fill: none; stroke: #d54f32; stroke-miterlimit: 10;"/>
+  </g>
+  <path d="M158.52,326.33l-28.91-33.06h91.41s-37.52,34.43-37.52,34.43c-7.24,6.64-18.52,6.02-24.98-1.37Z" style="fill: #d54f32;"/>
+  <path d="M285.06,112.42c2.78,20.08-11.44,24.91-11.44,24.91,0,0,11.9,3.8,11.84,20.25.06,10.96,2.04,27.87-23.11,27.45-22.05-.37-20.36-24.65-20.36-24.65h11.67c0,5.59.5,9.88,3.59,13.27,3.09,3.39,16.46,6.09,16.87-13.07s-13.38-17.76-13.38-17.76v-10.98c13.27-.1,13.24-11.4,13.24-11.4,0,0,2.12-15.89-10.24-15.89s-10.42,15.89-10.42,15.89l-11.37.33c-.83-22.45,13.2-24.75,13.2-24.75,0,0,6.94-2.12,14.16-1.01l-50.33-55.66c-5.8-6.42-15.7-6.92-22.12-1.12L45.22,175.37c-6.71,6.07-7.23,16.43-1.16,23.14l61.52,68.05h144.35l96.01-86.81-60.87-67.32ZM142.56,248.84h-20.65v-114.07h20.65v114.07ZM231.05,248.84h-20.65v-90.35c-.82-4.56-2.71-7.47-5.64-8.64-5.81-2.34-14.22,2.83-18.72,6.12l-.2.15v92.72h-20.65v-114.07h20.65v10.84l.83-.75c3.33-2.96,10.42-8.37,20.61-11.38,1.61-.47,3.32-.71,5.07-.71h1.66c9.4,0,17.04,7.64,17.04,17.04v99.03Z" style="fill: #d54f32;"/>
+  <g id="Calque_4" data-name="Calque 4">
+    <path d="M257.59,120.12s-1.94-15.89,10.42-15.89,10.24,15.89,10.24,15.89c0,0,.03,11.3-13.24,11.4v10.98s13.79-1.4,13.38,17.76-13.78,16.46-16.87,13.07-3.59-7.68-3.59-13.27h-11.67s-1.69,24.28,20.36,24.65c25.15.42,23.17-16.49,23.11-27.45.06-16.45-11.84-20.25-11.84-20.25,0,0,15.27-5.19,11.08-27.14s-29.54-14.17-29.54-14.17c0,0-14.03,2.3-13.2,24.75l11.37-.33Z" style="fill: #525a7f;"/>
+    <path d="M261.89,120.12s-1.94-15.89,10.42-15.89,10.24,15.89,10.24,15.89c0,0,.03,11.3-13.24,11.4v10.98s13.79-1.4,13.38,17.76-13.78,16.46-16.87,13.07-3.59-7.68-3.59-13.27h-11.67s-1.69,24.28,20.36,24.65c25.15.42,23.17-16.49,23.11-27.45.06-16.45-11.84-20.25-11.84-20.25,0,0,15.27-5.19,11.08-27.14s-29.54-14.17-29.54-14.17c0,0-14.03,2.3-13.2,24.75l11.37-.33Z" style="fill: #ffffff;"/>
+  </g>
+  <g id="texte">
+    <rect x="121.45" y="96.06" width="21.31" height="21.31" style="fill:#ffffff;"/>
+    <text transform="translate(24.58 175.83) rotate(-42.02) scale(.55 .77)" style="fill: #ffffff; font-family: HelveticaNeue-Bold, &apos;Helvetica Neue&apos;; font-size: 33.01px; font-weight: 700; letter-spacing: .02em;"><tspan x="0" y="0">in</tspan></text>
+    <text transform="translate(36.65 164.95) rotate(-42.02) scale(.52 .77)" style="fill: #ffffff; font-family: HelveticaNeue-Medium, &apos;Helvetica Neue&apos;; font-size: 25px; font-weight: 500; letter-spacing: 0em;"><tspan x="0" y="0">tégrale</tspan></text>
+    <text transform="translate(75.8 129.73) rotate(-42.02) scale(.55 .77)" style="fill: #ffffff; font-family: HelveticaNeue-Bold, &apos;Helvetica Neue&apos;; font-size: 33.01px; font-weight: 700; letter-spacing: .02em;"><tspan x="0" y="0">in</tspan></text>
+    <text transform="translate(87.87 118.85) rotate(-42.02) scale(.52 .77)" style="fill: #ffffff; font-family: HelveticaNeue-Medium, &apos;Helvetica Neue&apos;; font-size: 25px; font-weight: 500; letter-spacing: 0em;"><tspan x="0" y="0">génierie</tspan></text>
+    <text transform="translate(133.58 77.75) rotate(-42.11) scale(.55 .77)" style="fill: #ffffff; font-family: HelveticaNeue-Bold, &apos;Helvetica Neue&apos;; font-size: 33.01px; font-weight: 700; letter-spacing: .02em;"><tspan x="0" y="0">in</tspan></text>
+    <text transform="translate(145.64 66.85) rotate(-42.11) scale(.52 .77)" style="fill: #ffffff; font-family: HelveticaNeue-Medium, &apos;Helvetica Neue&apos;; font-size: 25px; font-weight: 500;"><tspan x="0" y="0" style="letter-spacing: 0em;">te</tspan><tspan x="22.22" y="0" style="letter-spacing: .02em;">r</tspan><tspan x="31.47" y="0">nationale</tspan></text>
+    <text transform="translate(52.94 285.9) scale(.52 .77)" style="fill: #ffffff; font-family: HelveticaNeue-Bold, &apos;Helvetica Neue&apos;; font-size: 25px; font-weight: 700;"><tspan x="0" y="0" style="letter-spacing: .09em;">Bu</tspan><tspan x="36.77" y="0" style="letter-spacing: .07em;">r</tspan><tspan x="48.22" y="0" style="letter-spacing: .09em;">eau d’études &amp; Maîtrise d’oeuv</tspan><tspan x="481.07" y="0" style="letter-spacing: .07em;">r</tspan><tspan x="492.52" y="0" style="letter-spacing: .09em;">e</tspan></text>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx
index 73d95fc..4361000 100644
--- a/frontend/src/components/Header.jsx
+++ b/frontend/src/components/Header.jsx
@@ -24,6 +24,8 @@ import ArticleIcon from "@mui/icons-material/Article";
 import InfoIcon from "@mui/icons-material/Info";
 import ContactMailIcon from "@mui/icons-material/ContactMail";
 import WorkIcon from "@mui/icons-material/Work";
+import Logo from "../assets/logo-in3.svg";
+import LogoM from "../assets/logo-in3-mobil.svg";
 
 const Header = () => {
   const [drawerOpen, setDrawerOpen] = useState(false);
@@ -64,7 +66,7 @@ const Header = () => {
   const commonButtonStyles = {
     transition: "color 0.3s",
     position: "relative",
-    "&:hover": { color: "#00bcd4" },
+    "&:hover": { color: " #00bcd4" },
     "&:after": {
       content: '""',
       position: "absolute",
@@ -72,7 +74,7 @@ const Header = () => {
       height: "2px",
       bottom: 0,
       left: 0,
-      backgroundColor: "#00bcd4",
+      backgroundColor: " #00bcd4",
       transition: "width 0.3s",
     },
     "&:hover:after": {
@@ -86,7 +88,7 @@ const Header = () => {
       color="transparent"
       elevation={0}
       sx={{
-        background: "linear-gradient(to right, #0e467f, #00bcd4)",
+        background: "linear-gradient(to right, #294A9A, #3158b3)",
         color: "white",
         transition: "all 0.3s ease",
       }}
@@ -98,13 +100,16 @@ const Header = () => {
           color="inherit"
           aria-label="menu"
           onClick={toggleDrawer(true)}
-          sx={{ display: { xs: "block", md: "none" } }}
+          sx={{ 
+            display: { xs: "block", md: "none" },
+            color: " #ffffff"
+           }}
         >
           <MenuIcon />
         </IconButton>
 
         {/* Logo as Home Link */}
-        <Typography
+        {/* <Typography
           variant="h6"
           component={Link}
           to="/"
@@ -120,7 +125,29 @@ const Header = () => {
           }}
         >
           Mon Site React
-        </Typography>
+        </Typography> */}
+
+                {/* Logo */}
+                <Box
+          component={Link}
+          to="/"
+          sx={{
+            flexGrow: 1,
+            textAlign: { xs: "center", md: "left" },
+            alignItems: "center",
+            textDecoration: "none",
+            gap: 1,
+          }}
+        >
+          <img
+            src={Logo}
+            alt="Logo"
+            style={{
+              height: "40px",
+              width: "auto",
+            }}
+          />
+        </Box>
 
         {/* Navigation Links */}
         <Box sx={{ display: { xs: "none", md: "flex" }, gap: 2 }}>
@@ -189,7 +216,7 @@ const Header = () => {
                 ...commonButtonStyles,
               }}
             >
-              Articles
+              Réalisations
             </Button>
           <Button
             component={Link}
@@ -253,10 +280,10 @@ const Header = () => {
                   borderColor: "white",
                 },
                 "&:hover fieldset": {
-                  borderColor: "#00bcd4",
+                  borderColor: " #00bcd4",
                 },
                 "&.Mui-focused fieldset": {
-                  borderColor: "#00bcd4",
+                  borderColor: " #00bcd4",
                 },
               },
             }}
@@ -270,12 +297,14 @@ const Header = () => {
           </IconButton>
         </Box>
 
+
+
         {/* Drawer for mobile */}
         <Drawer anchor="left" open={drawerOpen} onClose={toggleDrawer(false)}>
           <Box
             sx={{
               width: 250,
-              backgroundColor: "#f5f5f5",
+              backgroundColor: " #f5f5f5",
               height: "100%",
               padding: 2,
             }}
@@ -283,6 +312,25 @@ const Header = () => {
             onClick={toggleDrawer(false)}
             onKeyDown={toggleDrawer(false)}
           >
+            <Box
+          
+          sx={{
+            display:"block",
+            textAlign: "center",
+            
+            
+          
+          }}
+        >
+          <img
+            src={LogoM}
+            alt="Logo"
+            style={{
+              height: "40px",
+              width: "auto",
+            }}
+          />
+        </Box>
             <Typography
               variant="h6"
               sx={{ textAlign: "center", marginBottom: 2 }}
@@ -297,7 +345,10 @@ const Header = () => {
                 to="/"
                 selected={location.pathname === "/"}
               >
-                <HomeIcon sx={{ marginRight: 1 }} />
+                <HomeIcon sx={{ 
+                    marginRight: 1, 
+                  }}
+                />
                 <ListItemText primary="Accueil" />
               </ListItem>
               <ListItem
@@ -334,7 +385,7 @@ const Header = () => {
                 selected={location.pathname === "/posts"}
               >
                 <ArticleIcon sx={{ marginRight: 1 }} />
-                <ListItemText primary="Articles" />
+                <ListItemText primary="Réalisations" />
               </ListItem>
               <ListItem
                 button
diff --git a/frontend/src/components/Pages/Home.jsx b/frontend/src/components/Pages/Home.jsx
index 6a9244d..a5c7bc4 100644
--- a/frontend/src/components/Pages/Home.jsx
+++ b/frontend/src/components/Pages/Home.jsx
@@ -1,99 +1,248 @@
-import React, { useState, useEffect } from 'react';
-import Hero from '../Hero';
-import SEO from '../SEO';
-import api from '../../api'; // Instance Axios configurée
+import React, { useState, useEffect } from "react";
+import Hero from "../Hero";
+import SEO from "../SEO";
+import api from "../../api";
+import {
+  Box,
+  Grid,
+  Typography,
+  Button,
+  Card,
+  CardContent,
+} from "@mui/material";
 
 const Home = () => {
-    const [backgroundImage, setBackgroundImage] = useState(null);
-    const [useGradient, setUseGradient] = useState(false);
-    const [heroTitle, setHeroTitle] = useState('Titre par défaut');
-    const [heroTitleColor, setHeroTitleColor] = useState('#ffffff');
-    const [heroText, setHeroText] = useState('Texte par défaut');
-    const [heroTextColor, setHeroTextColor] = useState('#ffffff');
-    const [metaTitle, setMetaTitle] = useState('Titre par défaut');
-    const [metaDescription, setMetaDescription] = useState('Description par défaut.');
-    const [isLoading, setIsLoading] = useState(true); // État de chargement
-    const [error, setError] = useState(null); // État des erreurs
+  const [backgroundImage, setBackgroundImage] = useState(null);
+  const [useGradient, setUseGradient] = useState(false);
+  const [heroTitle, setHeroTitle] = useState("Titre par défaut");
+  const [heroTitleColor, setHeroTitleColor] = useState("#ffffff");
+  const [heroText, setHeroText] = useState("Texte par défaut");
+  const [heroTextColor, setHeroTextColor] = useState("#ffffff");
+  const [metaTitle, setMetaTitle] = useState("Titre par défaut");
+  const [metaDescription, setMetaDescription] = useState("Description par défaut.");
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
 
-    useEffect(() => {
-        const fetchPageData = async () => {
-            try {
-                setIsLoading(true);
-                setError(null);
+  useEffect(() => {
+    const fetchPageData = async () => {
+      try {
+        setIsLoading(true);
+        setError(null);
 
-                const response = await api.get('wp/v2/pages/13?_fields=acf,rank_math_title,rank_math_description');
-                const { acf, rank_math_title, rank_math_description } = response.data;
+        const response = await api.get("wp/v2/pages/13?_fields=acf,rank_math_title,rank_math_description");
+        const { acf, rank_math_title, rank_math_description } = response.data;
 
-                // Métadonnées SEO
-                setMetaTitle(rank_math_title || 'Titre par défaut');
-                setMetaDescription(rank_math_description || 'Description par défaut.');
+        // Métadonnées SEO
+        setMetaTitle(rank_math_title || "Titre par défaut");
+        setMetaDescription(rank_math_description || "Description par défaut.");
 
-                // Données Hero
-                setUseGradient(acf?.enable_gradient ?? false);
-                setHeroTitle(acf?.hero_title || 'Titre par défaut');
-                setHeroTitleColor(acf?.hero_title_color || '#ffffff');
-                setHeroText(acf?.hero_text || 'Texte par défaut');
-                setHeroTextColor(acf?.hero_text_color || '#ffffff');
+        // Données Hero
+        setUseGradient(acf?.enable_gradient ?? false);
+        setHeroTitle(acf?.hero_title || "Titre par défaut");
+        setHeroTitleColor(acf?.hero_title_color || "#ffffff");
+        setHeroText(acf?.hero_text || "Texte par défaut");
+        setHeroTextColor(acf?.hero_text_color || "#ffffff");
 
-                // Image de fond
-                if (acf?.img_hero) {
-                    const mediaResponse = await api.get(`wp/v2/media/${acf.img_hero}`);
-                    setBackgroundImage(mediaResponse.data.source_url);
-                } else {
-                    setBackgroundImage(null);
-                }
-            } 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.');
-            } finally {
-                setIsLoading(false);
-            }
-        };
+        // Image de fond
+        if (acf?.img_hero) {
+          const mediaResponse = await api.get(`wp/v2/media/${acf.img_hero}`);
+          setBackgroundImage(mediaResponse.data.source_url);
+        } else {
+          setBackgroundImage(null);
+        }
+      } 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.");
+      } finally {
+        setIsLoading(false);
+      }
+    };
 
-        fetchPageData();
-    }, []);
-
-    if (isLoading) {
-        return (
-            <div style={{ textAlign: 'center', padding: '50px' }}>
-                <p>Chargement des données...</p>
-            </div>
-        );
-    }
-
-    if (error) {
-        return (
-            <div style={{ textAlign: 'center', padding: '50px' }}>
-                <p style={{ color: 'red' }}>{error}</p>
-            </div>
-        );
-    }
+    fetchPageData();
+  }, []);
 
+  if (isLoading) {
     return (
-        <div>
-            {/* SEO */}
-            <SEO title={metaTitle} description={metaDescription} />
-
-            {/* Hero */}
-            <Hero
-                backgroundImage={backgroundImage}
-                useGradient={useGradient}
-                title={heroTitle}
-                titleColor={heroTitleColor}
-                text={heroText}
-                textColor={heroTextColor}
-            />
-
-            {/* Contenu */}
-            <div style={{ padding: '20px', textAlign: 'center' }}>
-                <h2>À propos de notre site</h2>
-                <p>
-                    Bienvenue sur notre site ! Découvrez nos articles, explorez des sujets passionnants, 
-                    et profitez d'une expérience unique. Nous sommes heureux de vous accueillir.
-                </p>
-            </div>
-        </div>
+      <div style={{ textAlign: "center", padding: "50px" }}>
+        <p>Chargement des données...</p>
+      </div>
     );
+  }
+
+  if (error) {
+    return (
+      <div style={{ textAlign: "center", padding: "50px" }}>
+        <p style={{ color: "red" }}>{error}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {/* SEO */}
+      <SEO title={metaTitle} description={metaDescription} />
+
+      {/* Section Héros */}
+      <Hero
+        backgroundImage={backgroundImage}
+        useGradient={useGradient}
+        title={heroTitle}
+        titleColor={heroTitleColor}
+        text={heroText}
+        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 }}>
+          Pourquoi Nous Choisir ?
+        </Typography>
+        <Grid container spacing={4}>
+          <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 }}>
+                  Expertise
+                </Typography>
+                <Typography variant="body1">
+                  Profitez de notre expertise et de nos solutions innovantes adaptées à vos besoins.
+                </Typography>
+              </CardContent>
+            </Card>
+          </Grid>
+          <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 }}>
+                  Confiance
+                </Typography>
+                <Typography variant="body1">
+                  Une équipe dédiée et à l'écoute pour garantir votre satisfaction.
+                </Typography>
+              </CardContent>
+            </Card>
+          </Grid>
+          <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 }}>
+                  Résultats
+                </Typography>
+                <Typography variant="body1">
+                  Des résultats concrets pour vos projets, avec des retours mesurables.
+                </Typography>
+              </CardContent>
+            </Card>
+          </Grid>
+        </Grid>
+      </Box>
+
+      {/* Section Désir : Témoignages */}
+      <Box sx={{ py: 6, px: 4 }}>
+        <Typography variant="h3" align="center" gutterBottom sx={{ fontWeight: "bold", mb: 4 }}>
+          Ce que disent nos clients
+        </Typography>
+        <Grid container spacing={4}>
+          <Grid item xs={12} md={6}>
+            <Card
+              sx={{
+                boxShadow: 3,
+                padding: 2,
+                backgroundColor: "#f9f9f9",
+              }}
+            >
+              <CardContent>
+                <Typography variant="body1" sx={{ fontStyle: "italic" }}>
+                  "Un service exceptionnel, une équipe formidable !"
+                </Typography>
+                <Typography variant="body2" sx={{ mt: 2, textAlign: "right", fontWeight: "bold" }}>
+                  - Client 1
+                </Typography>
+              </CardContent>
+            </Card>
+          </Grid>
+          <Grid item xs={12} md={6}>
+            <Card
+              sx={{
+                boxShadow: 3,
+                padding: 2,
+                backgroundColor: "#f9f9f9",
+              }}
+            >
+              <CardContent>
+                <Typography variant="body1" sx={{ fontStyle: "italic" }}>
+                  "Des résultats impressionnants pour notre projet."
+                </Typography>
+                <Typography variant="body2" sx={{ mt: 2, textAlign: "right", fontWeight: "bold" }}>
+                  - Client 2
+                </Typography>
+              </CardContent>
+            </Card>
+          </Grid>
+        </Grid>
+      </Box>
+
+      {/* Section Action */}
+      <Box sx={{ py: 6, px: 4, backgroundColor: "#0e467f", color: "#fff" }}>
+        <Typography variant="h3" align="center" gutterBottom sx={{ fontWeight: "bold", mb: 4 }}>
+          Prêt à Commencer ?
+        </Typography>
+        <Box textAlign="center">
+          <Button
+            variant="contained"
+            size="large"
+            sx={{
+              backgroundColor: "#fff",
+              color: "#0e467f",
+              fontWeight: "bold",
+              textTransform: "none",
+              "&:hover": { backgroundColor: "#e0e0e0" },
+            }}
+            href="/contact"
+          >
+            Contactez-nous dès aujourd'hui
+          </Button>
+        </Box>
+      </Box>
+    </div>
+  );
 };
 
 export default Home;
\ No newline at end of file