intergration APi pour la page d'accueil

frontend/src/assets/logo-in3-mobil.svg

@@ -7,7 +7,7 @@
   <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;"/>
+    <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: #294A9A;"/>
   </g>
   <g id="texte">
     <rect x="121.45" y="96.06" width="21.31" height="21.31" style="fill:#ffffff;"/>

frontend/src/components/Header.jsx

@@ -141,7 +141,7 @@ const Header = () => {
         >
           <img
             src={Logo}
-            alt="Logo"
+            alt="Bureau d'études Le Mans"
             style={{
               height: "40px",
               width: "auto",

frontend/src/components/Hero.jsx

@@ -31,7 +31,7 @@ const Hero = ({ backgroundImage, useGradient, title, titleColor, text, textColor
                     fontWeight: 'bold',
                     mb: 2,
                     color: titleColor || '#ffffff', // Couleur par défaut
-                    fontSize: { xs: '2rem', md: '3rem', lg: '4rem' }, // Responsive
+                    fontSize: { xs: '3rem', md: '3rem', lg: '4rem' }, // Responsive
                 }}
             >
                 {title}

frontend/src/components/ModernSpinner.jsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { Box, CircularProgress, Typography } from "@mui/material";
+
+const ModernSpinner = () => {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "100vh",
+        backgroundColor: "rgba(14, 70, 127, 0.1)",
+      }}
+    >
+      <CircularProgress
+        size={80}
+        thickness={4}
+        sx={{
+          color: "#0e467f",
+          mb: 3,
+          animation: "spin 2s linear infinite",
+          "@keyframes spin": {
+            "0%": {
+              transform: "rotate(0deg)",
+            },
+            "100%": {
+              transform: "rotate(360deg)",
+            },
+          },
+        }}
+      />
+      <Typography
+        variant="h6"
+        sx={{
+          fontWeight: "bold",
+          color: "#0e467f",
+          textAlign: "center",
+        }}
+      >
+        Chargement des données...
+      </Typography>
+    </Box>
+  );
+};
+
+export default ModernSpinner;

frontend/src/components/Pages/Home.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import Hero from "../Hero";
 import SEO from "../SEO";
 import api from "../../api";
+import ModernSpinner from "../ModernSpinner";
 import {
   Box,
   Grid,
@@ -10,6 +11,7 @@ import {
   Card,
   CardContent,
 } from "@mui/material";
+import Logo from "../../assets/logo-in3-mobil.svg";
 
 const Home = () => {
   const [backgroundImage, setBackgroundImage] = useState(null);
@@ -19,26 +21,43 @@ const Home = () => {
   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 [metaDescription, setMetaDescription] = useState(
+    "Description par défaut."
+  );
+  const [canonicalUrl, setCanonicalUrl] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
 
+  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 {
         setIsLoading(true);
         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;
 
         // Métadonnées SEO
         setMetaTitle(rank_math_title || "Titre par défaut");
         setMetaDescription(rank_math_description || "Description par défaut.");
 
+        // Récupération de l'URL canonique
+        setCanonicalUrl(acf?.canonical_url || window.location.href);
+
         // Données Hero
         setUseGradient(acf?.enable_gradient ?? false);
-        setHeroTitle(acf?.hero_title || "Titre par défaut");
+        setHeroTitle(acf?.hero_title || "Titre principal");
         setHeroTitleColor(acf?.hero_title_color || "#ffffff");
         setHeroText(acf?.hero_text || "Texte par défaut");
         setHeroTextColor(acf?.hero_text_color || "#ffffff");
@@ -50,6 +69,20 @@ 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");
+        setExpertise1Text(
+          acf?.gdc_expert.text_expertise_1 || "Text Expertise 1"
+        );
+        setExpertise2Title(acf?.gdc_expert.titre_expertise_2 || "Expertise 2");
+        setExpertise2Text(
+          acf?.gdc_expert.text_expertise_2 || "Text Expertise 2"
+        );
+        setExpertise3Title(acf?.gdc_expert.titre_expertise_3 || "Expertise 3");
+        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.");
@@ -64,6 +97,7 @@ const Home = () => {
   if (isLoading) {
     return (
       <div style={{ textAlign: "center", padding: "50px" }}>
+        <ModernSpinner /> // Utilisation du spinner moderne
         <p>Chargement des données...</p>
       </div>
     );
@@ -72,6 +106,14 @@ const Home = () => {
   if (error) {
     return (
       <div style={{ textAlign: "center", padding: "50px" }}>
+        <img
+          src={Logo}
+          alt="Logo"
+          style={{
+            height: "200px",
+            width: "auto",
+          }}
+        />
         <p style={{ color: "red" }}>{error}</p>
       </div>
     );
@@ -80,7 +122,11 @@ const Home = () => {
   return (
     <div>
       {/* SEO */}
-      <SEO title={metaTitle} description={metaDescription} />
+      <SEO
+        title={metaTitle}
+        description={metaDescription}
+        canonicalUrl={canonicalUrl}
+      />
 
       {/* Section Héros */}
       <Hero
@@ -91,6 +137,7 @@ const Home = () => {
         text={heroText}
         textColor={heroTextColor}
       />
+
       {/* <Box textAlign="center" my={4}>
         <Button
           variant="contained"
@@ -109,11 +156,27 @@ const Home = () => {
       </Box> */}
 
       {/* Section Intérêt : Nos Services */}
-      <Box sx={{ py: 6, px: 4, backgroundColor: "#f9f9f9" }}>
+      <Box
-        <Typography variant="h2" align="center" gutterBottom sx={{ fontWeight: "bold", mb: 4 }}>
+        sx={{
-          Pourquoi Nous Choisir ?
+          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={{
@@ -124,15 +187,22 @@ const Home = () => {
               }}
             >
               <CardContent>
-                <Typography variant="h3" sx={{ fontWeight: "bold", mb: 2 }}>
+                <Typography
-                  Expertise
+                  variant="h3"
-                </Typography>
+                  sx={{
-                <Typography variant="body1">
+                    fontWeight: "bold",
-                  Profitez de notre expertise et de nos solutions innovantes adaptées à vos besoins.
+                    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={{
@@ -143,15 +213,22 @@ const Home = () => {
               }}
             >
               <CardContent>
-                <Typography variant="h3" sx={{ fontWeight: "bold", mb: 2 }}>
+                <Typography
-                  Confiance
+                  variant="h3"
-                </Typography>
+                  sx={{
-                <Typography variant="body1">
+                    fontWeight: "bold",
-                  Une équipe dédiée et à l'écoute pour garantir votre satisfaction.
+                    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={{
@@ -162,12 +239,18 @@ const Home = () => {
               }}
             >
               <CardContent>
-                <Typography variant="h3" sx={{ fontWeight: "bold", mb: 2 }}>
+                <Typography
-                  Résultats
+                  variant="h3"
-                </Typography>
+                  sx={{
-                <Typography variant="body1">
+                    fontWeight: "bold",
-                  Des résultats concrets pour vos projets, avec des retours mesurables.
+                    mb: 2,
+                    fontSize: { xs: "2rem", md: "2rem", lg: "2rem" }, // Responsive
+                  }}
+                >
+                  {" "}
+                  {expertise3Title}{" "}
                 </Typography>
+                <Typography variant="body1">{expertise3Text} </Typography>
               </CardContent>
             </Card>
           </Grid>
@@ -176,7 +259,15 @@ const Home = () => {
 
       {/* Section Désir : Témoignages */}
       <Box sx={{ py: 6, px: 4 }}>
-        <Typography variant="h3" align="center" gutterBottom sx={{ fontWeight: "bold", mb: 4 }}>
+        <Typography
+          variant="h3"
+          sx={{
+            fontWeight: "bold",
+            mb: 2,
+            textAlign: "center",
+            fontSize: { xs: "2rem", md: "2rem", lg: "3rem" }, // Responsive
+          }}
+        >
           Ce que disent nos clients
         </Typography>
         <Grid container spacing={4}>
@@ -192,7 +283,10 @@ const Home = () => {
                 <Typography variant="body1" sx={{ fontStyle: "italic" }}>
                   "Un service exceptionnel, une équipe formidable !"
                 </Typography>
-                <Typography variant="body2" sx={{ mt: 2, textAlign: "right", fontWeight: "bold" }}>
+                <Typography
+                  variant="body2"
+                  sx={{ mt: 2, textAlign: "right", fontWeight: "bold" }}
+                >
                   - Client 1
                 </Typography>
               </CardContent>
@@ -210,7 +304,10 @@ const Home = () => {
                 <Typography variant="body1" sx={{ fontStyle: "italic" }}>
                   "Des résultats impressionnants pour notre projet."
                 </Typography>
-                <Typography variant="body2" sx={{ mt: 2, textAlign: "right", fontWeight: "bold" }}>
+                <Typography
+                  variant="body2"
+                  sx={{ mt: 2, textAlign: "right", fontWeight: "bold" }}
+                >
                   - Client 2
                 </Typography>
               </CardContent>
@@ -221,7 +318,12 @@ const Home = () => {
 
       {/* Section Action */}
       <Box sx={{ py: 6, px: 4, backgroundColor: "#0e467f", color: "#fff" }}>
-        <Typography variant="h3" align="center" gutterBottom sx={{ fontWeight: "bold", mb: 4 }}>
+        <Typography
+          variant="h2"
+          align="center"
+          gutterBottom
+          sx={{ fontWeight: "bold", mb: 4 }}
+        >
           Prêt à Commencer ?
         </Typography>
         <Box textAlign="center">
@@ -245,4 +347,4 @@ const Home = () => {
   );
 };
 
-export default Home;
+export default Home;

frontend/src/components/Pages/Post.jsx

@@ -20,7 +20,7 @@ const Post = () => {
         
         <Box sx={{ padding: 4 }}>
             <Typography variant="h3" sx={{ marginBottom: 4, textAlign: 'center' }}>
-                Liste des Articles
+                Nos réalisations
             </Typography>
             <Grid container spacing={4}>
                 {posts.map((post) => (

frontend/src/components/SEO.jsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { Helmet } from 'react-helmet-async';
 
-const SEO = ({ title, description }) => {
+const SEO = ({ title, description, canonicalUrl }) => {
     return (
         <Helmet>
             {/* Title et Description */}
             <title>{title || 'Titre par défaut'}</title>
             <meta name="description" content={description || 'Description par défaut.'} />
+            {canonicalUrl && <link rel="canonical" href={canonicalUrl} />}
 
             {/* Preconnect */}
             <link rel="preconnect" href="https://octopusdesign.fr" />