Maj Header and add logo 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 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;