Maj Header and add logo svg

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>

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>

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

frontend/src/components/Pages/Home.jsx

@@ -1,99 +1,248 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
-import Hero from '../Hero';
+import Hero from "../Hero";
-import SEO from '../SEO';
+import SEO from "../SEO";
-import api from '../../api'; // Instance Axios configurée
+import api from "../../api";
+import {
+  Box,
+  Grid,
+  Typography,
+  Button,
+  Card,
+  CardContent,
+} from "@mui/material";
 
 const Home = () => {
-    const [backgroundImage, setBackgroundImage] = useState(null);
+  const [backgroundImage, setBackgroundImage] = useState(null);
-    const [useGradient, setUseGradient] = useState(false);
+  const [useGradient, setUseGradient] = useState(false);
-    const [heroTitle, setHeroTitle] = useState('Titre par défaut');
+  const [heroTitle, setHeroTitle] = useState("Titre par défaut");
-    const [heroTitleColor, setHeroTitleColor] = useState('#ffffff');
+  const [heroTitleColor, setHeroTitleColor] = useState("#ffffff");
-    const [heroText, setHeroText] = useState('Texte par défaut');
+  const [heroText, setHeroText] = useState("Texte par défaut");
-    const [heroTextColor, setHeroTextColor] = useState('#ffffff');
+  const [heroTextColor, setHeroTextColor] = useState("#ffffff");
-    const [metaTitle, setMetaTitle] = useState('Titre par défaut');
+  const [metaTitle, setMetaTitle] = useState("Titre par défaut");
-    const [metaDescription, setMetaDescription] = useState('Description par défaut.');
+  const [metaDescription, setMetaDescription] = useState("Description par défaut.");
-    const [isLoading, setIsLoading] = useState(true); // État de chargement
+  const [isLoading, setIsLoading] = useState(true);
-    const [error, setError] = useState(null); // État des erreurs
+  const [error, setError] = useState(null);
 
-    useEffect(() => {
+  useEffect(() => {
-        const fetchPageData = async () => {
+    const fetchPageData = async () => {
-            try {
+      try {
-                setIsLoading(true);
+        setIsLoading(true);
-                setError(null);
+        setError(null);
 
-                const response = await api.get('wp/v2/pages/13?_fields=acf,rank_math_title,rank_math_description');
+        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 { acf, rank_math_title, rank_math_description } = response.data;
 
-                // Métadonnées SEO
+        // Métadonnées SEO
-                setMetaTitle(rank_math_title || 'Titre par défaut');
+        setMetaTitle(rank_math_title || "Titre par défaut");
-                setMetaDescription(rank_math_description || 'Description par défaut.');
+        setMetaDescription(rank_math_description || "Description par défaut.");
 
-                // Données Hero
+        // Données Hero
-                setUseGradient(acf?.enable_gradient ?? false);
+        setUseGradient(acf?.enable_gradient ?? false);
-                setHeroTitle(acf?.hero_title || 'Titre par défaut');
+        setHeroTitle(acf?.hero_title || "Titre par défaut");
-                setHeroTitleColor(acf?.hero_title_color || '#ffffff');
+        setHeroTitleColor(acf?.hero_title_color || "#ffffff");
-                setHeroText(acf?.hero_text || 'Texte par défaut');
+        setHeroText(acf?.hero_text || "Texte par défaut");
-                setHeroTextColor(acf?.hero_text_color || '#ffffff');
+        setHeroTextColor(acf?.hero_text_color || "#ffffff");
 
-                // Image de fond
+        // Image de fond
-                if (acf?.img_hero) {
+        if (acf?.img_hero) {
-                    const mediaResponse = await api.get(`wp/v2/media/${acf.img_hero}`);
+          const mediaResponse = await api.get(`wp/v2/media/${acf.img_hero}`);
-                    setBackgroundImage(mediaResponse.data.source_url);
+          setBackgroundImage(mediaResponse.data.source_url);
-                } else {
+        } else {
-                    setBackgroundImage(null);
+          setBackgroundImage(null);
-                }
+        }
-            } 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.");
-            } finally {
+      } finally {
-                setIsLoading(false);
+        setIsLoading(false);
-            }
+      }
-        };
+    };
 
-        fetchPageData();
+    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>
-        );
-    }
 
+  if (isLoading) {
     return (
-        <div>
+      <div style={{ textAlign: "center", padding: "50px" }}>
-            {/* SEO */}
+        <p>Chargement des données...</p>
-            <SEO title={metaTitle} description={metaDescription} />
+      </div>
-
-            {/* 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>
     );
+  }
+
+  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;