maj template page and pages

frontend/package-lock.json

@@ -19,6 +19,7 @@
         "react-helmet-async": "^2.0.5",
         "react-router-dom": "^7.1.1",
         "react-simple-lightbox": "^1.0.26",
+        "react-toastify": "^11.0.3",
         "simple-react-lightbox": "^3.6.8",
         "svgo": "^3.3.2",
         "swiper": "^10.3.1"
@@ -3392,6 +3393,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/cosmiconfig/node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/create-ecdh": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
@@ -9986,6 +9996,19 @@
         "react": "^16.8.3 || ^17 || ^18"
       }
     },
+    "node_modules/react-toastify": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.0.3.tgz",
+      "integrity": "sha512-cbPtHJPfc0sGqVwozBwaTrTu1ogB9+BLLjd4dDXd863qYLj7DGrQ2sg5RAChjFUB4yc3w8iXOtWcJqPK/6xqRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19",
+        "react-dom": "^18 || ^19"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -12865,15 +12888,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/yaml": {
-      "version": "1.10.2",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-      "license": "ISC",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/yargs": {
       "version": "17.7.2",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",

frontend/package.json

@@ -21,6 +21,7 @@
     "react-helmet-async": "^2.0.5",
     "react-router-dom": "^7.1.1",
     "react-simple-lightbox": "^1.0.26",
+    "react-toastify": "^11.0.3",
     "simple-react-lightbox": "^3.6.8",
     "svgo": "^3.3.2",
     "swiper": "^10.3.1"

frontend/src/components/EditPost.jsx

@@ -1,33 +1,135 @@
-import { useState } from "react";
-import { updatePost } from "../wordpress";
+import { useState, useEffect } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { getPostById, updatePost, uploadImage } from "../wordpress";
+import { getToken } from "../auth";
+import {
+  Box, Container, Typography, TextField, Button, Paper, Input, IconButton
+} from "@mui/material";
+import { ArrowBack, Publish } from "@mui/icons-material";
 
-function EditPost({ post }) {
-  const [title, setTitle] = useState(post.title.rendered);
-  const [content, setContent] = useState(post.content.rendered);
+function EditPost() {
+  const { id } = useParams(); // ✅ Récupère l'ID de l'article depuis l'URL
+  const navigate = useNavigate();
+  const [title, setTitle] = useState("");
+  const [content, setContent] = useState("");
+  const [file, setFile] = useState(null);
+  const [loading, setLoading] = useState(true);
 
-  const handleUpdate = async () => {
-    const success = await updatePost(post.id, title, content);
-    if (success) {
-      alert("Article mis à jour !");
-    } else {
-      alert("Échec de la mise à jour.");
+  // ✅ Vérification de l'authentification
+  useEffect(() => {
+    if (!getToken()) {
+      navigate("/admin/login");
+    }
+  }, [navigate]);
+
+  // ✅ Récupérer les données de l'article
+  useEffect(() => {
+    const fetchPost = async () => {
+      try {
+        const post = await getPostById(id);
+        setTitle(post.title.rendered);
+        setContent(post.content.rendered.replace(/(<([^>]+)>)/gi, "")); // Enlever le HTML
+        setLoading(false);
+      } catch (error) {
+        console.error("Erreur chargement article :", error);
+        navigate("/admin/gestion-articles"); // Redirige si erreur
+      }
+    };
+
+    fetchPost();
+  }, [id, navigate]);
+
+  const handleUpdate = async (e) => {
+    e.preventDefault();
+    try {
+      const updatedPost = await updatePost(id, title, content, file);
+      alert("✅ Article mis à jour avec succès !");
+      navigate("/admin/gestion-articles"); // Redirige après modification
+    } catch (error) {
+      alert("❌ Erreur lors de la mise à jour de l'article.");
     }
   };
 
+  if (loading) return <Typography>Chargement...</Typography>;
+
   return (
-    <div>
-      <h1>Modifier l’article</h1>
-      <input
-        type="text"
-        value={title}
-        onChange={(e) => setTitle(e.target.value)}
-      />
-      <textarea
-        value={content}
-        onChange={(e) => setContent(e.target.value)}
-      />
-      <button onClick={handleUpdate}>Mettre à jour</button>
-    </div>
+    <Box
+      sx={{
+        minHeight: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundImage: "url('https://source.unsplash.com/1600x900/?office,writing')",
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+      }}
+    >
+      <Container maxWidth="sm">
+        <Paper elevation={6} sx={{ padding: 4, borderRadius: 3 }}>
+          <Button
+            startIcon={<ArrowBack />}
+            variant="outlined"
+            color="secondary"
+            onClick={() => navigate("/admin/gestion-articles")}
+            sx={{ mb: 2 }}
+          >
+            Retour à la gestion des articles
+          </Button>
+
+          <Typography variant="h4" sx={{ fontWeight: "bold", textAlign: "center", mb: 3 }}>
+            Modifier l'article
+          </Typography>
+
+          <form onSubmit={handleUpdate}>
+            <TextField
+              label="Titre de l'article"
+              fullWidth
+              margin="normal"
+              variant="outlined"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              required
+            />
+
+            <TextField
+              label="Contenu"
+              fullWidth
+              margin="normal"
+              variant="outlined"
+              multiline
+              rows={4}
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
+              required
+            />
+
+            {/* Upload de l'image */}
+            <Box sx={{ mt: 2 }}>
+              <Typography variant="body1" sx={{ fontWeight: "bold", mb: 1 }}>
+                Nouvelle image (facultatif) :
+              </Typography>
+              <Input
+                type="file"
+                accept="image/*"
+                onChange={(e) => setFile(e.target.files[0])}
+                sx={{ display: "block", mb: 2 }}
+              />
+            </Box>
+
+            <Button
+              type="submit"
+              variant="contained"
+              color="primary"
+              fullWidth
+              startIcon={<Publish />}
+              sx={{ mt: 3 }}
+            >
+              Mettre à jour
+            </Button>
+          </form>
+        </Paper>
+      </Container>
+    </Box>
   );
 }
 

frontend/src/components/Expertises.jsx

@@ -49,7 +49,6 @@ const Expertices = ({
         <Grid item xs={12} md={4}>
           <Card
             sx={{
-              backgroundPosition: "center",
               boxShadow: 3,
               padding: 2,
               textAlign: "center",
@@ -99,7 +98,6 @@ const Expertices = ({
         <Grid item xs={12} md={4}>
           <Card
             sx={{
-              backgroundPosition: "center",
               boxShadow: 3,
               padding: 2,
               textAlign: "center",
@@ -149,7 +147,6 @@ const Expertices = ({
         <Grid item xs={12} md={4}>
           <Card
             sx={{
-              backgroundPosition: "center",
               boxShadow: 3,
               padding: 2,
               textAlign: "center",

frontend/src/components/Header.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import {
   AppBar,
   Toolbar,
@@ -179,7 +179,7 @@ const Header = () => {
             </MenuItem>
             <MenuItem
               component={Link}
-              to="/services/formation-video"
+              to="/services/electricite"
               onClick={handleMenuClose}
             >
               <WorkIcon sx={{ marginRight: 1}} />
@@ -350,25 +350,26 @@ const Header = () => {
                 <WorkIcon sx={{ marginRight: 0.5 }} />
                 <ListItemText primary="Prestation maitrise oeuvre" />
               </ListItem>
+
               <ListItem
                 button
                 component={Link}
-                to="/services/formation-ia"
-                selected={location.pathname.includes("/services/formation-ia")}
+                to="/services/structure-beton-charpente-metallique-bois"
+                selected={location.pathname.includes("/services/structure-beton-charpente-metallique-bois")}
               >
                 <WorkIcon sx={{ marginRight: 0.5 }} />
-                <ListItemText primary="Formation IA" />
+                <ListItemText primary="Structure beton..." />
               </ListItem>
               <ListItem
                 button
                 component={Link}
-                to="/services/formation-video"
+                to="/services/electricite"
                 selected={location.pathname.includes(
-                  "/services/formation-video"
+                  "/services/electricite"
                 )}
               >
                 <WorkIcon sx={{ marginRight: 0.5 }} />
-                <ListItemText primary="Formation Video" />
+                <ListItemText primary="Electricité..." />
               </ListItem>
               <ListItem
                 button

frontend/src/components/Pages/Contact.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, lazy, Suspense } from "react";
+import React, { useState, useEffect, Suspense } from "react";
 import {
   Box,
   TextField,
@@ -19,7 +19,7 @@ import {
 import SEO from "../SEO";
 import api from "../../api";
 import Faq from "../Faq";
-const FAQ = lazy(() => import('../Faq'));
+
 
 const Contact = () => {
   const [metaTitle, setMetaTitle] = useState("Contactez-nous");
@@ -356,10 +356,9 @@ const Contact = () => {
         <Typography
           variant="h2"
           sx={{
-            fontSize: { xs: "2rem", md: "2rem", lg: "3rem" }, // Responsive
+            fontSize: { xs: "2rem", md: "2rem", lg: "2rem" }, // Responsive
             fontWeight: "bold",
             mb: 2,
-            fontSize: { xs: "1.5rem", md: "2rem" },
           }}
         >
           Besoin d'une assistance immédiate ?

frontend/src/components/Pages/CreatePost.jsx

@@ -1,54 +1,133 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
 import { uploadImage, createPost } from "../../wordpress";
+import { getToken } from "../../auth";
+import {
+  Box,
+  Container,
+  Typography,
+  TextField,
+  Button,
+  Paper,
+  Input,
+  IconButton,
+} from "@mui/material";
+import { ArrowBack, Publish } from "@mui/icons-material";
 
 function CreatePost() {
-    const [title, setTitle] = useState("");
-    const [content, setContent] = useState("");
-    const [file, setFile] = useState(null);
+  const [title, setTitle] = useState("");
+  const [content, setContent] = useState("");
+  const [file, setFile] = useState(null);
+  const navigate = useNavigate();
 
-    const handleSubmit = async (e) => {
-        e.preventDefault();
+  // ✅ Vérification de l'authentification : Redirection vers /login si l'utilisateur n'est pas connecté
+  useEffect(() => {
+    if (!getToken()) {
+      navigate("/admin/login");
+    }
+  }, [navigate]);
 
-        try {
-            console.log("📢 Tentative d'upload de l'image...");
-            const imageId = await uploadImage(file);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
 
-            console.log("📢 Création du post avec l'image mise en avant...");
-            await createPost(title, content, imageId);
+    try {
+      console.log("📢 Tentative d'upload de l'image...");
+      const imageId = await uploadImage(file);
 
-            alert("✅ Post créé avec succès !");
-        } catch (error) {
-            alert("❌ Erreur lors de la création du post.");
-        }
-    };
+      console.log("📢 Création du post avec l'image mise en avant...");
+      await createPost(title, content, imageId);
 
-    return (
-        <div>
-            <h2>Créer un post</h2>
-            <form onSubmit={handleSubmit}>
-                <input
-                    type="text"
-                    placeholder="Titre du post"
-                    value={title}
-                    onChange={(e) => setTitle(e.target.value)}
-                    required
-                />
-                <textarea
-                    placeholder="Contenu du post"
-                    value={content}
-                    onChange={(e) => setContent(e.target.value)}
-                    required
-                />
-                <input
-                    type="file"
-                    accept="image/*"
-                    onChange={(e) => setFile(e.target.files[0])}
-                    required
-                />
-                <button type="submit">Publier</button>
-            </form>
-        </div>
-    );
+      alert("✅ Post créé avec succès !");
+      navigate("/admin/gestion-articles"); // Redirection après la création
+    } catch (error) {
+      alert("❌ Erreur lors de la création du post.");
+    }
+  };
+
+  return (
+    <Box
+      sx={{
+        minHeight: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundImage: "url('https://source.unsplash.com/1600x900/?office,writing')",
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+      }}
+    >
+      <Container maxWidth="sm">
+        <Paper elevation={6} sx={{ padding: 4, borderRadius: 3 }}>
+          {/* ✅ Bouton Retour à la Gestion des Articles */}
+          <Button
+            startIcon={<ArrowBack />}
+            variant="outlined"
+            color="secondary"
+            onClick={() => navigate("/admin/gestion-articles")}
+            sx={{ mb: 2 }}
+          >
+            Retour à la gestion des articles
+          </Button>
+
+          {/* ✅ Titre de la page */}
+          <Typography variant="h4" sx={{ fontWeight: "bold", textAlign: "center", mb: 3 }}>
+            Créer un article
+          </Typography>
+
+          {/* ✅ Formulaire */}
+          <form onSubmit={handleSubmit}>
+            <TextField
+              label="Titre de l'article"
+              fullWidth
+              margin="normal"
+              variant="outlined"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              required
+            />
+
+            <TextField
+              label="Contenu"
+              fullWidth
+              margin="normal"
+              variant="outlined"
+              multiline
+              rows={4}
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
+              required
+            />
+
+            {/* ✅ Upload de l'image */}
+            <Box sx={{ mt: 2 }}>
+              <Typography variant="body1" sx={{ fontWeight: "bold", mb: 1 }}>
+                Image en vedette :
+              </Typography>
+              <Input
+                type="file"
+                accept="image/*"
+                onChange={(e) => setFile(e.target.files[0])}
+                required
+                sx={{ display: "block", mb: 2 }}
+              />
+            </Box>
+
+            {/* ✅ Bouton Publier */}
+            <Button
+              type="submit"
+              variant="contained"
+              color="primary"
+              fullWidth
+              startIcon={<Publish />}
+              sx={{ mt: 3 }}
+            >
+              Publier l'article
+            </Button>
+          </form>
+        </Paper>
+      </Container>
+    </Box>
+  );
 }
 
 export default CreatePost;

frontend/src/components/Pages/Dashboard.jsx

@@ -1,4 +1,6 @@
+import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
+import { getToken, logout } from "../../auth"; // Importation de la fonction logout
 import {
   Box,
   Typography,
@@ -6,12 +8,27 @@ import {
   Card,
   CardContent,
   IconButton,
+  Button,
 } from "@mui/material";
+import LogoutIcon from "@mui/icons-material/Logout"; // Icône de déconnexion
 import ArticleIcon from "@mui/icons-material/Article";
 import DashboardIcon from "@mui/icons-material/Dashboard";
+import HomeIcon from "@mui/icons-material/Home"; // Icône pour la gestion page d'accueil
 
 function Dashboard() {
   const navigate = useNavigate();
+  const token = getToken();
+
+  useEffect(() => {
+    if (!token) {
+      navigate("/admin/login"); // Redirige vers la page de connexion si non authentifié
+    }
+  }, [token, navigate]);
+
+  const handleLogout = () => {
+    logout(); // Déconnecte l'utilisateur
+    navigate("/admin/login"); // Redirige vers la page de connexion
+  };
 
   return (
     <Box
@@ -35,19 +52,69 @@ function Dashboard() {
           borderRadius: 3,
           boxShadow: 6,
           textAlign: "center",
+          position: "relative",
         }}
       >
+        {/* Bouton de déconnexion placé en haut à gauche */}
+        <Button
+          variant="contained"
+          color="error"
+          startIcon={<LogoutIcon />}
+          onClick={handleLogout}
+          sx={{
+            position: "absolute",
+            top: 10,
+            left: 10,
+            backgroundColor: "#d32f2f",
+            "&:hover": { backgroundColor: "#b71c1c" },
+            fontSize: "0.875rem",
+            padding: "6px 12px",
+          }}
+        />
+
         {/* En-tête */}
-        <Typography variant="h4" sx={{ fontWeight: "bold", mb: 4 }}>
+        <Typography variant="h4" sx={{ fontWeight: "bold", mb: 4, mt: 4 }}>
           <DashboardIcon sx={{ fontSize: 40, color: "#0e467f", mr: 1 }} />
           Tableau de Bord
         </Typography>
 
         {/* Cartes du Dashboard */}
         <Grid container spacing={3} justifyContent="center">
-          <Grid item xs={12} sm={6} md={4}>
+          {/* ✅ Gestion Page d'Accueil - Première carte */}
+          <Grid item xs={12} sm={6}>
             <Card
-              onClick={() => navigate("/posts")}
+              onClick={() => navigate("/admin/Gestion-Page-Accueil")}
+              sx={{
+                cursor: "pointer",
+                textAlign: "center",
+                padding: 2,
+                transition: "0.3s",
+                "&:hover": {
+                  backgroundColor: "#0e467f",
+                  color: "#ffffff",
+                  transform: "scale(1.05)",
+                  boxShadow: 8,
+                },
+                "&:hover svg": {
+                  fill: "#ffffff",
+                },
+              }}
+            >
+              <CardContent>
+                <IconButton sx={{ fontSize: 40, color: "#0e467f" }}>
+                  <HomeIcon fontSize="inherit" />
+                </IconButton>
+                <Typography variant="h6" sx={{ fontWeight: "bold" }}>
+                  Gestion Page d'Accueil
+                </Typography>
+              </CardContent>
+            </Card>
+          </Grid>
+
+          {/* ✅ Gérer les Articles - Deuxième carte */}
+          <Grid item xs={12} sm={6}>
+            <Card
+              onClick={() => navigate("/admin/gestion-articles")}
               sx={{
                 cursor: "pointer",
                 textAlign: "center",

frontend/src/components/Pages/GestionArticles.jsx

@@ -0,0 +1,165 @@
+// ✅ Importations nécessaires
+import React, { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import {
+  Box, Typography, Button, Table, TableBody, TableCell,
+  TableContainer, TableHead, TableRow, Paper, TextField, Avatar
+} from "@mui/material";
+import { Add, ArrowBack, Edit, Delete } from "@mui/icons-material";
+import api from "../../api";
+import { getToken } from "../../auth";
+import { deletePost } from "../../wordpress";
+
+const GestionArticles = () => {
+  const [posts, setPosts] = useState([]);
+  const [searchTerm, setSearchTerm] = useState("");
+  const navigate = useNavigate();
+
+  // ✅ Vérifier si l'utilisateur est connecté
+  useEffect(() => {
+    if (!getToken()) {
+      navigate("/admin/login");
+    }
+  }, [navigate]);
+
+  // ✅ Récupérer les articles et leurs images associées
+  useEffect(() => {
+    const fetchPosts = async () => {
+      try {
+        const response = await api.get("wp/v2/posts?_fields=id,title,excerpt,featured_media");
+        const postsData = response.data;
+
+        const postsWithImages = await Promise.all(
+          postsData.map(async (post) => {
+            if (post.featured_media) {
+              try {
+                const mediaResponse = await api.get(`wp/v2/media/${post.featured_media}`);
+                return { ...post, image: mediaResponse.data.source_url, imageId: post.featured_media };
+              } catch (error) {
+                console.error(`❌ Erreur chargement image article ${post.id}:`, error);
+                return { ...post, image: null, imageId: null };
+              }
+            }
+            return { ...post, image: null, imageId: null };
+          })
+        );
+
+        setPosts(postsWithImages);
+      } catch (error) {
+        console.error("❌ Erreur chargement des articles :", error);
+      }
+    };
+
+    fetchPosts();
+  }, []);
+
+  // ✅ Supprimer un article et son image associée
+  const handleDeletePost = async (postId, imageId) => {
+    if (window.confirm("Es-tu sûr de vouloir supprimer cet article ?")) {
+        try {
+            await deletePost(postId, imageId); // ✅ Appel de la fonction deletePost
+            setPosts(posts.filter((post) => post.id !== postId)); // ✅ Met à jour la liste après suppression
+            alert("✅ Article supprimé avec succès !");
+        } catch (error) {
+            console.error("❌ Erreur suppression article :", error);
+            alert("⚠ Erreur : impossible de supprimer l'article.");
+        }
+    }
+};
+
+  // ✅ Filtrage des articles
+  const filteredPosts = posts.filter((post) =>
+    post.title.rendered.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    post.excerpt.rendered.replace(/(<([^>]+)>)/gi, "").replace(/&nbsp;/g, " ").toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  return (
+    <Box sx={{ padding: "40px 20px" }}>
+      {/* ✅ En-tête avec retour et création */}
+      <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 4, mt:5 }}>
+        <Button startIcon={<ArrowBack />} variant="outlined" color="secondary" onClick={() => navigate("/admin/dashboard")}>
+          Retour au Dashboard
+        </Button>
+        <Typography variant="h4" sx={{ fontWeight: "bold", textAlign: "center", flexGrow: 1 }}>
+          Gestion des Articles
+        </Typography>
+        <Button startIcon={<Add />} variant="contained" color="primary" onClick={() => navigate("/admin/create-post")}>
+          Créer un article
+        </Button>
+      </Box>
+
+      {/* ✅ Recherche */}
+      <TextField
+        label="Rechercher un article..."
+        variant="outlined"
+        fullWidth
+        value={searchTerm}
+        onChange={(e) => setSearchTerm(e.target.value)}
+        sx={{ mb: 3 }}
+      />
+
+      {/* ✅ Tableau des articles */}
+      <TableContainer component={Paper}>
+        <Table>
+          <TableHead sx={{ backgroundColor: "#0e467f" }}>
+            <TableRow>
+              <TableCell sx={{ color: "white", fontWeight: "bold" }}>Image</TableCell>
+              <TableCell sx={{ color: "white", fontWeight: "bold" }}>Titre</TableCell>
+              <TableCell sx={{ color: "white", fontWeight: "bold" }}>Résumé</TableCell>
+              <TableCell sx={{ color: "white", fontWeight: "bold", textAlign: "center" }}>Actions</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {filteredPosts.length > 0 ? (
+              filteredPosts.map((post) => (
+                <TableRow key={post.id}>
+                  {/* ✅ Image en vedette */}
+                  <TableCell>
+                    <Avatar
+                      src={post.image || "https://via.placeholder.com/100"}
+                      variant="rounded"
+                      sx={{ width: 80, height: 80 }}
+                    />
+                  </TableCell>
+                  {/* ✅ Titre de l'article */}
+                  <TableCell sx={{ fontWeight: "bold" }}>{post.title.rendered}</TableCell>
+                  {/* ✅ Résumé avec 100 caractères max */}
+                  <TableCell>
+                    {post.excerpt.rendered.replace(/(<([^>]+)>)/gi, "").replace(/&nbsp;/g, " ").substring(0, 100)}...
+                  </TableCell>
+                  {/* ✅ Boutons Modifier et Supprimer */}
+                  <TableCell sx={{ textAlign: "center" }}>
+                    <Button startIcon={<Edit />} 
+                    variant="outlined" 
+                    color="warning" 
+                    sx={{ mr: 1 }} 
+                    onClick={() => navigate(`/admin/edit-post/${post.id}`)}
+                    >
+                      Modifier
+                    </Button>
+                    <Button
+                      startIcon={<Delete />}
+                      variant="outlined"
+                      color="error"
+                      onClick={() => handleDeletePost(post.id, post.imageId)}
+                    >
+                      Supprimer
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={4} sx={{ textAlign: "center", py: 2 }}>
+                  Aucun article trouvé.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </Box>
+  );
+};
+
+export default GestionArticles;

frontend/src/components/Pages/GestionPageAccueil.jsx

@@ -0,0 +1,224 @@
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { updateHomePageACF, uploadImage } from "../../wordpress";
+import { getToken } from "../../auth";
+import {
+  Typography,
+  TextField,
+  Button,
+  Container,
+  Paper,
+  Box,
+  CircularProgress,
+} from "@mui/material";
+
+const GestionPageAccueil = () => {
+  const navigate = useNavigate();
+  const [heroTitle, setHeroTitle] = useState("");
+  const [heroText, setHeroText] = useState("");
+  const [heroImage, setHeroImage] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [successMessage, setSuccessMessage] = useState("");
+
+  // ✅ Vérification de l'authentification (Redirection si non connecté)
+  useEffect(() => {
+    if (!getToken()) {
+      navigate("/admin/login");
+    }
+  }, [navigate]);
+
+  // ✅ Chargement des données ACF depuis WordPress
+  useEffect(() => {
+    const fetchPageData = async () => {
+      try {
+        const response = await fetch(
+          "https://preprod.octopusdesign.fr/api-octopus/server/wp-json/wp/v2/pages/13?_fields=acf",
+          {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        if (!response.ok) {
+          throw new Error("Erreur de chargement des données");
+        }
+
+        const data = await response.json();
+        setHeroTitle(data.acf?.hero_title || "");
+        setHeroText(data.acf?.hero_text || "");
+
+        // ✅ Récupération de l'image Hero
+        if (data.acf?.img_hero) {
+          const mediaResponse = await fetch(
+            `https://preprod.octopusdesign.fr/api-octopus/server/wp-json/wp/v2/media/${data.acf.img_hero}`
+          );
+          const mediaData = await mediaResponse.json();
+          setHeroImage(mediaData.source_url);
+        }
+
+        setLoading(false);
+      } catch (error) {
+        console.error("❌ Erreur chargement ACF :", error);
+        setError("Impossible de charger les données.");
+        setLoading(false);
+      }
+    };
+
+    fetchPageData();
+  }, []);
+
+  // ✅ Mise à jour des champs ACF
+  const handleSave = async () => {
+    try {
+      const newData = {
+        hero_title: heroTitle,
+        hero_text: heroText,
+      };
+
+      console.log("📢 Données envoyées pour mise à jour ACF :", newData);
+      await updateHomePageACF(13, newData);
+
+      setSuccessMessage("✅ Modifications enregistrées avec succès !");
+      setTimeout(() => setSuccessMessage(""), 3000);
+    } catch (error) {
+      console.error("❌ Erreur mise à jour :", error);
+      setError("⚠ Impossible de mettre à jour les champs ACF.");
+    }
+  };
+
+  // ✅ Gérer le téléversement d’une nouvelle image Hero
+  const handleImageUpload = async (event) => {
+    const file = event.target.files[0];
+    if (file) {
+      try {
+        const imageId = await uploadImage(file);
+        setHeroImage(URL.createObjectURL(file)); // Affichage immédiat
+        await updateHomePageACF(13, { img_hero: imageId });
+        setSuccessMessage("✅ Image mise à jour !");
+      } catch (error) {
+        console.error("❌ Erreur lors de l'upload :", error);
+        setError("❌ Échec de l'upload de l'image.");
+      }
+    }
+  };
+
+  return (
+    <Container maxWidth="md" sx={{ mt: 16, mb:5 }}>
+      <Paper elevation={6} sx={{ padding: 4, borderRadius: 3, backgroundColor: "#f8f9fa" }}>
+        {/* ✅ En-tête */}
+        <Typography variant="h4" sx={{ fontWeight: "bold", textAlign: "center", mb: 3, color: "#0e467f" }}>
+          🏠 Gestion de la Page d'Accueil
+        </Typography>
+
+        {/* ✅ Affichage du statut de chargement */}
+        {loading ? (
+          <Box display="flex" justifyContent="center" alignItems="center">
+            <CircularProgress />
+          </Box>
+        ) : error ? (
+          <Typography textAlign="center" color="error">
+            {error}
+          </Typography>
+        ) : (
+          <>
+            {/* ✅ Message de succès */}
+            {successMessage && (
+              <Box
+                sx={{
+                  backgroundColor: "#d4edda",
+                  color: "#155724",
+                  padding: "12px",
+                  borderRadius: "8px",
+                  marginBottom: "16px",
+                  textAlign: "center",
+                  boxShadow: "0px 2px 10px rgba(0,0,0,0.1)",
+                }}
+              >
+                <Typography variant="body1" fontWeight="bold">
+                  {successMessage}
+                </Typography>
+              </Box>
+            )}
+
+            {/* ✅ Affichage de l'image actuelle */}
+            {heroImage && (
+              <Box sx={{ textAlign: "center", mb: 2 }}>
+                <img
+                  src={heroImage}
+                  alt="Hero"
+                  style={{
+                    width: "100%",
+                    maxHeight: "250px",
+                    objectFit: "cover",
+                    borderRadius: "8px",
+                  }}
+                />
+              </Box>
+            )}
+
+            {/* ✅ Bouton pour changer l'image */}
+            <Button variant="contained" component="label" fullWidth sx={{ mb: 2 }}>
+              📸 Modifier l'Image Hero
+              <input type="file" hidden onChange={handleImageUpload} />
+            </Button>
+
+            {/* ✅ Formulaire de modification */}
+            <TextField
+              label="Titre Héros"
+              fullWidth
+              variant="outlined"
+              value={heroTitle}
+              onChange={(e) => setHeroTitle(e.target.value)}
+              sx={{ mb: 2, backgroundColor: "#fff", borderRadius: "5px" }}
+            />
+
+            <TextField
+              label="Texte Héros"
+              fullWidth
+              variant="outlined"
+              value={heroText}
+              onChange={(e) => setHeroText(e.target.value)}
+              sx={{ mb: 2, backgroundColor: "#fff", borderRadius: "5px" }}
+              multiline
+              rows={3}
+            />
+
+            {/* ✅ Bouton d'enregistrement */}
+            <Button
+              variant="contained"
+              color="primary"
+              fullWidth
+              sx={{
+                mt: 3,
+                fontSize: "1.1rem",
+                fontWeight: "bold",
+                color:"#ffffff",
+                backgroundColor: "#0e467f",
+                "&:hover": { backgroundColor: "#093a6b" },
+              }}
+              onClick={handleSave}
+            >
+              💾 Enregistrer les modifications
+            </Button>
+
+            {/* ✅ Bouton retour au Dashboard */}
+            <Button
+              variant="outlined"
+              color="secondary"
+              fullWidth
+              sx={{ mt: 2, fontSize: "1rem", fontWeight: "bold", borderColor: "#0e467f", color: "#0e467f" }}
+              onClick={() => navigate("/admin/dashboard")}
+            >
+              ⬅ Retour au Dashboard
+            </Button>
+          </>
+        )}
+      </Paper>
+    </Container>
+  );
+};
+
+export default GestionPageAccueil;

frontend/src/components/Pages/Home.jsx

@@ -21,14 +21,15 @@ const Home = () => {
         setIsLoading(true);
         setError(null);
 
-        const response = await api.get("wp/v2/pages/13?_fields=acf,rank_math_title,rank_math_description");
+        // 🔥 Ajout d'un timestamp pour éviter la mise en cache
+        const response = await api.get(`wp/v2/pages/13?_fields=acf,rank_math_title,rank_math_description&_=${new Date().getTime()}`);
         const pageContent = response.data;
         setPageData(pageContent);
 
-        // Vérification et récupération de l'image Hero depuis l'API media de WordPress
+        // Récupération de l'image Hero
         const heroImageId = pageContent.acf?.img_hero;
         if (heroImageId) {
-          const mediaResponse = await api.get(`wp/v2/media/${heroImageId}`);
+          const mediaResponse = await api.get(`wp/v2/media/${heroImageId}?_=${new Date().getTime()}`);
           setHeroImage(mediaResponse.data.source_url);
         } else {
           setHeroImage(null);
@@ -42,7 +43,7 @@ const Home = () => {
     };
 
     fetchPageData();
-  }, []);
+}, []);
 
   if (isLoading) {
     return (

frontend/src/components/Pages/Login.jsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { loginWithAppPassword, getToken, logout } from "../../auth";
+import { useNavigate } from "react-router-dom"; // Import de useNavigate pour la redirection
 import {
   Box,
   Button,
@@ -16,13 +17,13 @@ function TestLogin() {
   const [username, setUsername] = useState("");
   const [appPassword, setAppPassword] = useState("");
   const [token, setToken] = useState(getToken());
+  const navigate = useNavigate(); // Hook pour la navigation
 
   const handleLogin = async (e) => {
     e.preventDefault();
     const newToken = await loginWithAppPassword(username, appPassword);
     if (newToken) {
       setToken(newToken);
-      // alert("Connexion réussie !");
     } else {
       alert("Échec de la connexion !");
     }
@@ -31,7 +32,6 @@ function TestLogin() {
   const handleLogout = () => {
     logout();
     setToken(null);
-    // alert("Déconnexion réussie !");
   };
 
   return (
@@ -66,14 +66,24 @@ function TestLogin() {
             </Typography>
 
             {token ? (
-              <Button
-                variant="contained"
-                color="error"
-                onClick={handleLogout}
-                sx={{ mt: 3, width: "100%" }}
-              >
-                Déconnexion
-              </Button>
+              <>
+                <Button
+                  variant="contained"
+                  color="primary"
+                  onClick={() => navigate("/admin/dashboard")}
+                  sx={{ mt: 3, width: "100%" }}
+                >
+                  Accéder au tableau de bord
+                </Button>
+                <Button
+                  variant="contained"
+                  color="error"
+                  onClick={handleLogout}
+                  sx={{ mt: 2, width: "100%" }}
+                >
+                  Déconnexion
+                </Button>
+              </>
             ) : (
               <form onSubmit={handleLogin}>
                 <TextField

frontend/src/components/Pages/Post.jsx

@@ -1,64 +1,93 @@
-import React, { useEffect, useState } from 'react';
-import { Grid, Card, CardContent, CardMedia, Typography, Box } from '@mui/material';
-import api from '../../api'; // Adaptez le chemin vers l'instance Axios
+import { useState, useEffect } from "react";
+import { Box, Typography, Grid, Card, CardContent, CardMedia, Button } from "@mui/material";
+import { useNavigate } from "react-router-dom";
+import api from "../../api";
 
+const Posts = () => {
+  const [posts, setPosts] = useState([]);
+  const navigate = useNavigate();
 
+  useEffect(() => {
+    const fetchPosts = async () => {
+      try {
+        const response = await api.get("wp/v2/posts?_fields=id,slug,title,excerpt,content,featured_media");
+        const postsData = response.data;
 
-const Post = () => {
-    const [posts, setPosts] = useState([]);
+        // Récupérer les images en vedette
+        const postsWithImages = await Promise.all(
+          postsData.map(async (post) => {
+            if (post.featured_media) {
+              try {
+                const mediaResponse = await api.get(`wp/v2/media/${post.featured_media}`);
+                return { ...post, image: mediaResponse.data.source_url };
+              } catch (error) {
+                console.error(`Erreur lors de la récupération de l'image pour l'article ${post.id}:`, error);
+                return { ...post, image: null };
+              }
+            }
+            return { ...post, image: null };
+          })
+        );
 
-    useEffect(() => {
-        api.get('wp/v2/posts?_embed')
-            .then((response) => {
-                setPosts(response.data);
-            })
-            .catch((error) => {
-                console.error('Erreur lors de la récupération des articles :', error);
-            });
-    }, []);
+        setPosts(postsWithImages);
+      } catch (error) {
+        console.error("Erreur lors de la récupération des articles :", error);
+      }
+    };
 
-    return (
+    fetchPosts();
+  }, []);
 
-        <Box sx={{ padding: 4 }}>
-            <Typography variant="h3" sx={{ marginBottom: 4, textAlign: 'center' }}>
-                Nos réalisations
-            </Typography>
-            <Grid container spacing={4}>
-                {posts.map((post) => (
-                    <Grid item xs={12} sm={6} md={4} key={post.id}>
-                        <Card sx={{ maxWidth: 345,
-                                    boxShadow: 3,
-                                    transition: 'transform 0.3s ease, box-shadow 0.3s ease',
-                                    '&:hover': {
-                                    transform: 'scale(1.05)',
-                                    boxShadow: 6, 
-                                    },
-                                }}>
-                            {/* Image de l'article */}
-                            {post._embedded?.['wp:featuredmedia']?.[0]?.source_url && (
-                                <CardMedia
-                                    component="img"
-                                    height="200"
-                                    image={post._embedded['wp:featuredmedia'][0].source_url}
-                                    alt={post.title.rendered}
-                                />
-                            )}
-                            <CardContent>
-                                <Typography variant="h5" component="div" gutterBottom>
-                                    {post.title.rendered}
-                                </Typography>
-                                <Typography
-                                    variant="body2"
-                                    color="text.secondary"
-                                    dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}
-                                />
-                            </CardContent>
-                        </Card>
-                    </Grid>
-                ))}
-            </Grid>
-        </Box>
-    );
+  // Fonction pour nettoyer le HTML et récupérer un texte brut
+  const stripHtmlTags = (html) => {
+    return html.replace(/(<([^>]+)>)/gi, ""); // Supprime toutes les balises HTML
+  };
+
+  // Fonction pour tronquer un texte à 100 caractères max
+  const truncateText = (text, maxLength) => {
+    const strippedText = stripHtmlTags(text
+      .replace(/<[^>]*>/g, "") // Supprime les balises HTML
+      .replace(/&nbsp;/g, " ") // Remplace les espaces non bris
+    ); // Nettoyage HTML
+    return strippedText.length > maxLength ? `${strippedText.substring(0, maxLength)}...` : strippedText;
+  };
+
+  return (
+    <Box sx={{ padding: "40px 20px" }}>
+      <Typography variant="h2" sx={{ fontWeight: "bold", textAlign: "center", mb: 4, mt:5 }}>
+        Nos Articles
+      </Typography>
+
+      <Grid container spacing={4} justifyContent="center">
+        {posts.map((post) => (
+          <Grid item xs={12} sm={6} md={4} key={post.id}>
+            <Card
+              sx={{
+                cursor: "pointer",
+                "&:hover": { backgroundColor: "#0e467f", color: "white", transform: "scale(1.05)", boxShadow: 6 },
+              }}
+              onClick={() => navigate(`/post/${post.slug}`)}
+            >
+              {post.image && (
+                <CardMedia component="img" height="200" image={post.image} alt={post.title.rendered} />
+              )}
+              <CardContent>
+                <Typography variant="h5" sx={{ fontWeight: "bold" }}>
+                  {post.title.rendered}
+                </Typography>
+                <Typography variant="body2" sx={{ mt: 1 }}>
+                  {truncateText(post.excerpt.rendered || post.content.rendered, 100)}
+                </Typography>
+                <Button variant="outlined" sx={{ mt: 2, color: "white", borderColor: "white" }}>
+                  Lire plus
+                </Button>
+              </CardContent>
+            </Card>
+          </Grid>
+        ))}
+      </Grid>
+    </Box>
+  );
 };
 
-export default Post;
+export default Posts;

frontend/src/components/Pages/PostList.jsx

@@ -1,27 +1,89 @@
 import { useEffect, useState } from "react";
 import { fetchPosts, deletePost } from "../../wordpress";
+import { Box, Typography, Button, CircularProgress, Paper, Grid } from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 function PostList() {
     const [posts, setPosts] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
 
     useEffect(() => {
         async function loadPosts() {
-            const data = await fetchPosts();
-            setPosts(data);
+            try {
+                const data = await fetchPosts();
+                setPosts(data);
+            } catch (err) {
+                setError("⚠️ Impossible de récupérer les articles.");
+                console.error("Erreur lors de la récupération des articles :", err);
+            } finally {
+                setLoading(false);
+            }
         }
         loadPosts();
     }, []);
 
+    const handleDelete = async (postId) => {
+        if (window.confirm("❌ Es-tu sûr de vouloir supprimer cet article ?")) {
+            try {
+                await deletePost(postId);
+                setPosts(posts.filter((post) => post.id !== postId));
+                toast.success("✅ Article supprimé avec succès !");
+            } catch (err) {
+                console.error("Erreur suppression :", err);
+                toast.error("⚠️ Erreur lors de la suppression.");
+            }
+        }
+    };
+
     return (
-        <div className="post-list">
-            <h2>Liste des Articles</h2>
-            {posts.map((post) => (
-                <div key={post.id} className="post-item">
-                    <h3>{post.title.rendered}</h3>
-                    <button onClick={() => deletePost(post.id)}>Supprimer</button>
-                </div>
-            ))}
-        </div>
+        <Box sx={{ maxWidth: "900px", margin: "auto", mt: 5 }}>
+            <Typography variant="h4" sx={{ fontWeight: "bold", textAlign: "center", mb: 3 }}>
+                📋 Liste des Articles
+            </Typography>
+
+            {loading && (
+                <Box sx={{ textAlign: "center", mt: 4 }}>
+                    <CircularProgress />
+                </Box>
+            )}
+
+            {error && (
+                <Typography color="error" textAlign="center" sx={{ mb: 3 }}>
+                    {error}
+                </Typography>
+            )}
+
+            {!loading && posts.length === 0 && (
+                <Typography textAlign="center" sx={{ mt: 3 }}>
+                    Aucun article trouvé.
+                </Typography>
+            )}
+
+            <Grid container spacing={3}>
+                {posts.map((post) => (
+                    <Grid item xs={12} sm={6} md={4} key={post.id}>
+                        <Paper sx={{ padding: 3, boxShadow: 3, textAlign: "center" }}>
+                            <Typography variant="h6" sx={{ fontWeight: "bold", mb: 2 }}>
+                                {post.title.rendered}
+                            </Typography>
+                            <Button
+                                variant="contained"
+                                color="error"
+                                startIcon={<DeleteIcon />}
+                                onClick={() => handleDelete(post.id)}
+                                sx={{ fontWeight: "bold" }}
+                            >
+                                Supprimer
+                            </Button>
+                        </Paper>
+                    </Grid>
+                ))}
+            </Grid>
+        </Box>
     );
 }
+
 export default PostList;

frontend/src/components/Pages/ServiceDeux.jsx

@@ -1,50 +1,62 @@
-import React from 'react';
-import ServicePageTemplate from '../ServicePageTemplate';
+import React from "react";
+import ServicePageTemplate from "../ServicePageTemplate";
 
 const ServiceDeux = () => {
   const serviceDetails = {
-    title: 'Structure béton charpente métallique & bois',
-    subtitle: 'Dominez l’intelligence artificielle.',
-    description:
-      'Plongez dans le futur ! Notre formation IA vous prépare aux outils modernes d’intelligence artificielle comme Python, TensorFlow et OpenAI API. Apprenez à créer des modèles IA performants.',
+    // Hero
+    title: "Structure béton charpente métallique & bois",
+    subtitle: "Dominez l’intelligence artificielle.",
+
+    image: "https://picsum.photos/id/239/1920/1080.webp",
+    ctaText: "Découvrir la formation IA",
+    ctaLink: "/contact",
+    
+    // section 1
+    interestTitle: "Béton ou Charpente :\n Quel Matériau Choisir pour une Construction Durable ?", // ✅ Modifiable individuellement
+    description: "Le béton est le matériau de construction le plus répandu dans le monde. \nIl est présent dans tous les secteurs de la construction.\n\n Longtemps associé à l’image négative des grands ensembles, gris et vieillissants, le béton a réalisé des progrès spectaculaires ces dernières années, tant au niveau de ses performances techniques que des aspects esthétiques. \n\nIl commence même à entrer dans les foyers comme produit de décoration !\nUne charpente est un assemblage de pièces de bois et/ou de métal, servant à soutenir ou couvrir des constructions et faisant partie de la toiture.",
+    
+    // section 2
+    desirTitle: "Ce que nous offrons",// ✅ Modifiable individuellement
+    
     features: [
       {
-        title: 'Fondamentaux de l’IA',
-        description: 'Concepts, algorithmes et applications.',
-        modalText: 'Découvrez les bases de l’IA, des algorithmes aux applications concrètes dans divers domaines.',
-        modalImage: 'https://picsum.photos/id/200/800/400.webp',
+        title: "Fondamentaux de l’IA",
+        description: "Concepts, algorithmes et applications.",
+        modalText:
+          "Découvrez les bases de l’IA, des algorithmes aux applications concrètes dans divers domaines.",
+        modalImage: "https://picsum.photos/id/200/800/400.webp",
       },
       {
-        title: 'Python pour l’IA',
-        description: 'Bibliothèques populaires : TensorFlow, PyTorch.',
-        modalText: 'Apprenez à utiliser Python et ses bibliothèques pour concevoir des modèles d’IA puissants.',
-        modalImage: 'https://picsum.photos/id/201/800/400.webp',
+        title: "Python pour l’IA",
+        description: "Bibliothèques populaires : TensorFlow, PyTorch.",
+        modalText:
+          "Apprenez à utiliser Python et ses bibliothèques pour concevoir des modèles d’IA puissants.",
+        modalImage: "https://picsum.photos/id/201/800/400.webp",
       },
       {
-        title: 'Projets Pratiques',
-        description: 'Créez vos propres modèles IA.',
-        modalText: 'Mettez vos compétences en pratique en développant des projets IA réels.',
-        modalImage: 'https://picsum.photos/id/202/800/400.webp',
+        title: "Projets Pratiques",
+        description: "Créez vos propres modèles IA.",
+        modalText:
+          "Mettez vos compétences en pratique en développant des projets IA réels.",
+        modalImage: "https://picsum.photos/id/202/800/400.webp",
       },
     ],
-    image: 'https://picsum.photos/id/239/1920/1080.webp',
-    ctaText: 'Découvrir la formation IA',
-    ctaLink: '/contact',
+
     carouselItems: [
       {
-        title: 'Site E-commerce',
-        description: 'Un projet e-commerce performant et moderne.',
-        image: 'https://picsum.photos/id/453/800/400.webp',
+        title: "Site E-commerce",
+        description: "Un projet e-commerce performant et moderne.",
+        image: "https://picsum.photos/id/453/800/400.webp",
       },
       {
-        title: 'Portfolio Personnel',
-        description: 'Montrez vos compétences avec un portfolio sur mesure.',
-        image: 'https://picsum.photos/id/454/800/400.webp',
+        title: "Portfolio Personnel",
+        description: "Montrez vos compétences avec un portfolio sur mesure.",
+        image: "https://picsum.photos/id/454/800/400.webp",
       },
       {
-        title: 'Blog Dynamique',
-        description: 'Créez un blog interactif et optimisé pour le SEO.',
-        image: 'https://picsum.photos/id/455/800/400.webp',
+        title: "Blog Dynamique",
+        description: "Créez un blog interactif et optimisé pour le SEO.",
+        image: "https://picsum.photos/id/455/800/400.webp",
       },
     ],
   };

frontend/src/components/Pages/ServiceTrois.jsx

@@ -1,52 +1,69 @@
-import React from 'react';
-import ServicePageTemplate from '../ServicePageTemplate';
+import React from "react";
+import ServicePageTemplate from "../ServicePageTemplate";
 
 const ServiceTrois = () => {
   const serviceDetails = {
-    title: 'Électricité',
-    subtitle: 'IN3 est un bureau d’études technique spécialisé dans l’ingénierie électrique du bâtiment.',
-    description:
-      'Plongez dans le futur ! Notre formation IA vous prépare aux outils modernes d’intelligence artificielle comme Python, TensorFlow et OpenAI API. Apprenez à créer des modèles IA performants.',
+    // Hero
+    title: "Électricité", // ✅ Modifiable individuellement
+    subtitle: "IN3 est un bureau d’études technique spécialisé dans l’ingénierie électrique du bâtiment.",
+
+    image: "https://picsum.photos/id/1018/1920/1080.webp",
+    ctaText: "En savoir plus",
+    ctaLink: "/contact",
+
+    // Section 1
+    interestTitle: "Comment réussir vos installations électriques \navec une assistance experte en maîtrise d’ouvrage ?",
+    description: "Notre activité est l’assistance aux maîtres d’ouvrage à la réalisation des installations électriques courants forts et courants faibles.\n Définition des besoins / Audit si installations existantes Estimation du coût des ouvrages.\n \n  Plans d’implantation du matériel et des canalisations schémas électriques unifilaires.\n Analyse des offres et assistance technique au choix de l’entreprise d’électricité.",
+
+    // Section 2
+    desirTitle: "Réalisation et assistance électrique",
+
     features: [
       {
-        title: 'Chantier électricité industriel',
-        description: 'Réalisation d’installations électriques.',
-        modalText: 'Réalisation d’installations électriques pour des sites industriels, incluant le câblage, la pose d’équipements, et la mise en conformité selon les normes en vigueur..',
-        modalImage: 'https://picsum.photos/id/200/800/400.webp',
+        title: "Chantier électricité industriel",
+        description: "Réalisation d’installations électriques.",
+        modalText: "Réalisation d’installations électriques pour des sites industriels, incluant le câblage, la pose d’équipements, et la mise en conformité selon les normes en vigueur.",
+        modalImage: "https://picsum.photos/id/200/800/400.webp",
       },
       {
-        title: 'Python pour l’IA',
-        description: 'Bibliothèques populaires : TensorFlow, PyTorch.',
-        modalText: 'Apprenez à utiliser Python et ses bibliothèques pour concevoir des modèles d’IA puissants.',
-        modalImage: 'https://picsum.photos/id/201/800/400.webp',
+        title: "Dossier de Consultation",
+        description: "Réalisation du Dossier de Consultation des entreprises (DCE)",
+        modalText: "Réalisation du Dossier de Consultation des entreprises (DCE) cahier des clauses techniques particulières (CCTP) bordereau de décomposition du prix global et forfaitaire (DPGF, servant de base à tous les devis).",
+        modalImage: "https://picsum.photos/id/201/800/400.webp",
       },
       {
-        title: 'Projets Pratiques',
-        description: 'Créez vos propres modèles IA.',
-        modalText: 'Mettez vos compétences en pratique en développant des projets IA réels.',
-        modalImage: 'https://picsum.photos/id/202/800/400.webp',
+        title: "L'électricité & Suivi de chantier",
+        description: "Assistance à l’entreprise et vérification des documents",
+        modalText: "Assistance à l’entreprise et vérification des documents d’exécution. Réception des ouvrages exécutés. Nous pouvons également assister l’entreprise titulaire du marché à la réalisation des documents d’exécution (plans d’implantation, schématique électrique, notes de calculs réglementaires, …)",
+        modalImage: "https://picsum.photos/id/202/800/400.webp",
       },
     ],
-    image: 'https://picsum.photos/id/239/1920/1080.webp',
-    ctaText: 'En savoir plus !',
-    ctaLink: '/contact',
+
     carouselItems: [
       {
-        title: 'Site E-commerce',
-        description: 'Un projet e-commerce performant et moderne.',
-        image: 'https://picsum.photos/id/453/800/400.webp',
+        title: "Site E-commerce",
+        description: "Un projet e-commerce performant et moderne.",
+        image: "https://picsum.photos/id/453/800/400.webp",
       },
       {
-        title: 'Portfolio Personnel',
-        description: 'Montrez vos compétences avec un portfolio sur mesure.',
-        image: 'https://picsum.photos/id/454/800/400.webp',
+        title: "Portfolio Personnel",
+        description: "Montrez vos compétences avec un portfolio sur mesure.",
+        image: "https://picsum.photos/id/454/800/400.webp",
       },
       {
-        title: 'Blog Dynamique',
-        description: 'Créez un blog interactif et optimisé pour le SEO.',
-        image: 'https://picsum.photos/id/455/800/400.webp',
+        title: "Blog Dynamique",
+        description: "Créez un blog interactif et optimisé pour le SEO.",
+        image: "https://picsum.photos/id/455/800/400.webp",
       },
     ],
+
+    // ✅ Métadonnées SEO
+    seo: {
+      metaTitle: "Électricité | Expertise en ingénierie électrique",
+      metaDescription: "Découvrez notre expertise en ingénierie électrique et maîtrisez l'installation et la gestion des systèmes électriques.",
+      keywords: "électricité, ingénierie électrique, installation électrique, suivi de chantier",
+      ogImage: "https://picsum.photos/1200/630",
+    },
   };
 
   return <ServicePageTemplate {...serviceDetails} />;

frontend/src/components/Pages/ServiceUn.jsx

@@ -1,47 +1,73 @@
-import React from 'react';
-import ServicePageTemplate from '../ServicePageTemplate';
+import React from "react";
+import ServicePageTemplate from "../ServicePageTemplate";
 
 const ServiceUn = () => {
   const serviceDetails = {
-    title: 'Prestation-maitrise-oeuvre',
-    subtitle: 'Apprenez à maîtriser les technologies du web.',
+    // Hero
+    title:
+      "Pourquoi faire appel à un  \n bureau d’études pour concevoir  \n ou rénover votre bâtiment ?", // ✅ Modifiable individuellement
+    subtitle:
+      "Notre bureau d’études in3 au Mans conçoit des bâtiments à construire ou à rénover selon le programme fourni par le maître de l’ouvrage, de diriger l’exécution des marchés de travaux, de proposer le règlement des travaux et leur réception. Nos missions sont les suivantes :", // ✅ Modifiable individuellement
+
+    image: "https://picsum.photos/id/1018/1920/1080.webp",
+    ctaText: "En savoir plus",
+    ctaLink: "/contact",
+
+    // section 1
+    interestTitle:
+      "Comment le maître d’œuvre garantit-il \n la réussite de votre projet de construction ?", // ✅ Modifiable individuellement
     description:
-      'Notre formation web vous permet de développer vos compétences en développement frontend, backend et design. Rejoignez notre programme pour apprendre HTML, CSS, JavaScript et bien plus.',
+      "Véritable bras droit du maître d’ouvrage, nous lui proposons une solution technique et esthétique qui permet de réaliser son programme, dans l’enveloppe budgétaire et les délais qui lui sont assignés. Une fois son projet validé par le maître d’ouvrage, le maître d’œuvre est responsable du bon déroulement des travaux et joue un rôle de conseil dans le choix des entreprises qui vont les réaliser. Le choix de l’entrepreneur (ou des entrepreneurs) se fait à partir d’une consultation formalisée où, sur la base d’un cahier des charges (notamment le Cahier des Clauses Techniques Particulières), le titulaire faisant l’offre la plus adaptée, est choisi par le maître d’ouvrage sur proposition du maître d’œuvre compte tenu d’éléments matériels concrets.", // ✅ Modifiable individuellement
+
+    // section 2
+    desirTitle: "Titre Désir", // ✅ Modifiable individuellement
+
     features: [
       {
-        title: 'Frontend Development',
-        description: 'HTML, CSS, JavaScript, React et plus encore.',
-        modalText: 'Apprenez à construire des interfaces utilisateurs modernes avec les technologies frontend.',
-        modalImage: 'https://picsum.photos/id/300/800/400.webp',
+        title: "diagnostic \n (DIA)",
+        description: "Les études de diagnostic (DIA)...",
+        modalText:
+          "Les études de diagnostic (DIA), pour le cas de travaux sur un bâtiment existant)",
+        modalImage: "https://picsum.photos/id/300/800/400.webp",
       },
       {
-        title: 'Backend Development',
-        description: 'Node.js, Express, MongoDB et bases de données.',
-        modalText: 'Développez des applications robustes avec des technologies backend performantes.',
-        modalImage: 'https://picsum.photos/id/301/800/400.webp',
+        title: "Les Études d’Esquisse \n (ESQ)",
+        description: "Comprendre leur Importance dans un Projet Architectural",
+        modalText:
+          "L’objectif principal de cette phase est de poser les bases du projet en définissant les grandes lignes de l’implantation, de l’organisation des espaces et de l’esthétique du bâtiment. Cela inclut : L’analyse du site : étude de l’environnement, des accès, de l’orientation et des contraintes liées au terrain. L’évaluation des besoins du maître d’ouvrage : prise en compte des attentes fonctionnelles et esthétiques. La proposition de plusieurs variantes : différentes approches sont étudiées pour identifier la meilleure solution. Une estimation préliminaire des coûts : pour vérifier l’adéquation entre les ambitions du projet et le budget disponible.",
+        modalImage: "https://picsum.photos/id/301/800/400.webp",
       },
       {
-        title: 'Responsive Design',
-        description: 'Apprenez à créer des designs modernes et adaptatifs.',
-        modalText: 'Maîtrisez les principes du responsive design pour des expériences utilisateur optimales.',
-        modalImage: 'https://picsum.photos/id/302/800/400.webp',
+        title: "Pourquoi réaliser une étude d’avant-projet ?",
+        description: "Les Études d’Avant-Projet (AVP)...",
+        modalText:
+          "L’AVP a pour objectif de définir les grandes lignes du projet en s’appuyant sur une analyse approfondie des besoins, des contraintes et des attentes des parties prenantes. Elle permet de : Clarifier les objectifs : Identifier précisément les résultats attendus et les enjeux du projet. Évaluer la faisabilité : Étudier la viabilité technique, économique et réglementaire. Définir les solutions possibles : Comparer différentes approches et choisir la meilleure. Établir une première estimation des coûts et délais : Anticiper les ressources nécessaires et éviter les imprévus.",
+        modalImage: "https://picsum.photos/id/302/800/400.webp",
       },
     ],
-    image: 'https://picsum.photos/id/1018/1920/1080.webp',
-    ctaText: 'En savoir plus',
-    ctaLink: '/contact',
+
     carouselItems: [
       {
-        title: 'Portfolio Modern',
-        description: 'Montrez vos compétences avec un portfolio unique.',
-        image: 'https://picsum.photos/id/305/800/400.webp',
+        title: "Portfolio Modern",
+        description: "Montrez vos compétences avec un portfolio unique.",
+        image: "https://picsum.photos/id/305/800/400.webp",
       },
       {
-        title: 'Blog SEO',
-        description: 'Optimisez vos articles pour le référencement.',
-        image: 'https://picsum.photos/id/306/800/400.webp',
+        title: "Blog SEO",
+        description: "Optimisez vos articles pour le référencement.",
+        image: "https://picsum.photos/id/306/800/400.webp",
       },
     ],
+    // ✅ Métadonnées SEO
+    seo: {
+      metaTitle:
+        "Pourquoi faire appel à un bureau d’études pour votre construction ou rénovation ? | in3",
+      metaDescription:
+        "Optimisez votre projet de construction ou de rénovation avec notre bureau d’études in3. Expertise, maîtrise d’œuvre et solutions adaptées pour garantir la réussite de votre chantier.",
+      keywords:
+        "bureau d'études, construction, rénovation, maîtrise d’œuvre, étude avant-projet, diagnostic DIA, architecture, travaux, bâtiment",
+      ogImage: "https://picsum.photos/id/1018/1920/1080.webp",
+    },
   };
 
   return <ServicePageTemplate {...serviceDetails} />;

frontend/src/components/PostDetails.jsx

@@ -0,0 +1,87 @@
+import { useState, useEffect } from "react";
+import { Box, Typography, Button, CircularProgress } from "@mui/material";
+import { useParams, useNavigate } from "react-router-dom";
+import api from "../api";
+
+const PostDetails = () => {
+  const { slug } = useParams(); // ✅ Utilisation correcte du slug
+  const [post, setPost] = useState(null);
+  const [image, setImage] = useState(null);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const fetchPost = async () => {
+      if (!slug) {
+        console.error("❌ Erreur : aucun slug fourni !");
+        return;
+      }
+
+      try {
+        console.log(`📢 Requête API pour le slug : ${slug}`);
+        
+        // ✅ Requête API correcte
+        const response = await api.get(`wp/v2/posts?slug=${slug}&_fields=id,title,content,featured_media,date`);
+
+        if (response.data.length > 0) {
+          const article = response.data[0]; // ✅ Récupération du premier article trouvé
+          setPost(article);
+          console.log("✅ Article trouvé :", article);
+
+          // ✅ Récupération de l'image en vedette si elle existe
+          if (article.featured_media) {
+            console.log(`📢 Récupération de l'image ID : ${article.featured_media}`);
+            const mediaResponse = await api.get(`wp/v2/media/${article.featured_media}`);
+            setImage(mediaResponse.data.source_url);
+          }
+        } else {
+          console.error("❌ Aucun article trouvé avec ce slug !");
+        }
+      } catch (error) {
+        console.error("❌ Erreur lors de la récupération de l'article :", error);
+      }
+    };
+
+    fetchPost();
+  }, [slug]); // ✅ Dépendance correcte
+
+  if (!post) {
+    return <CircularProgress sx={{ display: "block", margin: "auto", mt: 5 }} />;
+  }
+
+  return (
+    <Box sx={{ padding: "40px 20px", display: "flex", flexDirection: "column" }}>
+      {/* ✅ Bouton Retour */}
+      <Button onClick={() => navigate(-1)} variant="contained" sx={{ mt: 5, mb: 3, maxWidth: "200px" }}>
+        ⬅ Retour
+      </Button>
+
+      {/* ✅ Titre de l'article */}
+      <Typography
+        variant="h1"
+        sx={{
+          fontWeight: "bold",
+          textAlign: "center",
+          mb: 4,
+          fontSize: { xs: "3rem", md: "3rem", lg: "3rem" },
+        }}
+      >
+        {post.title.rendered}
+      </Typography>
+
+      {/* ✅ Image + Contenu */}
+      <Box sx={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "40px 20px", margin: "auto" }}>
+        {image && (
+          <Box
+            component="img"
+            src={image}
+            alt={post.title.rendered}
+            sx={{ width: "100%", maxHeight: "400px", objectFit: "cover", borderRadius: "8px", mb: 3 }}
+          />
+        )}
+        <Typography variant="body1" sx={{ maxWidth: "800px", mx: "auto" }} dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
+      </Box>
+    </Box>
+  );
+};
+
+export default PostDetails;

frontend/src/components/ServicePageTemplate.jsx

@@ -1,40 +1,37 @@
-import React, { useState } from "react";
-import {
-  Box,
-  Typography,
-  Button,
-  Grid,
-  Card,
-  CardContent,
-  Modal,
-  Fade,
-  Backdrop,
-} from "@mui/material";
+import { useState } from "react";
+import { Box, Typography, Button, Grid, Card, CardContent, Modal, Fade, Backdrop, CircularProgress } from "@mui/material";
 import { Swiper, SwiperSlide } from "swiper/react";
 import { Navigation, Pagination, Autoplay } from "swiper/modules";
 import "swiper/css";
 import "swiper/css/navigation";
 import "swiper/css/pagination";
+import PropTypes from "prop-types";
+import { Helmet } from "react-helmet-async";
 
 const ServicePageTemplate = ({
   title,
   subtitle,
+  interestTitle,
   description,
+  desirTitle,
   features,
   image,
   ctaText,
   ctaLink,
   carouselItems,
+  seo, // ✅ Ajout de l'objet SEO
 }) => {
   const [openModal, setOpenModal] = useState(false);
   const [modalContent, setModalContent] = useState({});
+  const [loadingImage, setLoadingImage] = useState(true);
 
   const handleCardClick = (feature) => {
     setModalContent({
       title: feature.title,
       text: feature.modalText || "Texte non disponible.",
-      image: feature.modalImage || "https://picsum.photos/id/43/800/400.webp", // Image par défaut
+      image: feature.modalImage || "https://picsum.photos/id/43/800/400.webp",
     });
+    setLoadingImage(true);
     setOpenModal(true);
   };
 
@@ -43,16 +40,26 @@ const ServicePageTemplate = ({
   };
 
   return (
-    <Box
-      sx={{
-        backgroundColor: "#f5f5f5",
-        color: "#333",
-        fontFamily: "Arial, sans-serif",
-      }}
-    >
-      {/* Section Attention */}
+    <Box sx={{ backgroundColor: "#f5f5f5", color: "#333", fontFamily: "Arial, sans-serif" }}>
+      {/* ✅ SEO META TAGS */}
+      <Helmet>
+        <title>{seo?.metaTitle || title}</title>
+        <meta name="description" content={seo?.metaDescription || ""} />
+        <meta name="keywords" content={seo?.keywords || ""} />
+        <meta property="og:title" content={seo?.metaTitle || title} />
+        <meta property="og:description" content={seo?.metaDescription || ""} />
+        <meta property="og:image" content={seo?.ogImage || image} />
+        <meta property="og:type" content="website" />
+        <meta name="twitter:title" content={seo?.metaTitle || title} />
+        <meta name="twitter:description" content={seo?.metaDescription || ""} />
+        <meta name="twitter:image" content={seo?.ogImage || image} />
+        <meta name="twitter:card" content="summary_large_image" />
+      </Helmet>
+
+      {/* Section Hero */}
       <Box
         sx={{
+          mt:5,
           backgroundImage: `url(${image})`,
           backgroundSize: "cover",
           backgroundPosition: "center",
@@ -61,121 +68,66 @@ const ServicePageTemplate = ({
           alignItems: "center",
           justifyContent: "center",
           textAlign: "center",
-          color: "white",
+          color: "black",
           padding: "20px",
         }}
       >
-        <Box sx={{ maxWidth: "800px" }}>
-          <Typography 
-            variant="h1" 
-            sx={{ 
-              fontWeight: "bold", 
-              mb: 2, 
-              fontSize: { xs: '2rem', md: '3rem', lg: '4rem' }, // Responsive
-            }}
-          >
+        <Box sx={{ 
+          maxWidth: "800px",
+          backgroundColor:"rgba(255, 255, 255, 0.39)",
+          p:5,
+          borderRadius:5
+          }}>
+          <Typography variant="h1" sx={{ fontWeight: "bold", mb: 2, fontSize: { xs: "2rem", md: "3rem", lg: "3rem",whiteSpace: "pre-line" } }}>
             {title}
-
           </Typography>
-          <Typography 
-            variant="body1" 
-            sx={{ 
-              mb: 4 
-            }}
-          >
+          <Typography variant="body1" sx={{ mb: 4 }}>
             {subtitle}
-
           </Typography>
           <Button
             href={ctaLink}
             variant="contained"
             color="secondary"
             size="large"
-            sx={{
-              textTransform: "none",
-              fontWeight: "bold",
-              backgroundColor: " #0e467f",
-              "&:hover": { backgroundColor: "#00bcd4" },
-            }}
+            sx={{ textTransform: "none", fontWeight: "bold", backgroundColor: "#0e467f", "&:hover": { backgroundColor: "#00bcd4" } }}
           >
             {ctaText}
           </Button>
         </Box>
       </Box>
 
-      {/* Section Interest */}
+      {/* Section numero 1 */}
       <Box sx={{ padding: "40px 20px", textAlign: "center" }}>
-        <Typography variant="h2" 
-          sx={{ 
-            fontWeight: "bold", 
-            mb: 2,
-            fontSize: { xs: '2rem', md: '3rem', lg: '3rem' }, // Responsive
-          }}
-        >
-          Pourquoi choisir notre formation ?
+        <Typography variant="h2" sx={{ fontWeight: "bold", mb: 2, fontSize: { xs: "2rem", md: "2rem", lg: "2rem" }, whiteSpace: "pre-line" }}>
+          {interestTitle}
         </Typography>
-
-        <Typography
-          variant="body1"
-          sx={{ maxWidth: "800px", margin: "0 auto", mb: 4 }}
-        >
+        <Typography variant="body1" sx={{ maxWidth: "1000px", margin: "0 auto", mb: 4, whiteSpace: "pre-line" }}>
           {description}
         </Typography>
       </Box>
 
-      {/* Section Desire */}
+      {/* Section numero 2 */}
       <Box sx={{ backgroundColor: "#ffffff", padding: "40px 20px" }}>
-        <Typography
-          variant="h2"
-            sx={{ 
-              fontWeight: "bold", 
-              textAlign: "center", 
-              mb: 4,
-              fontSize: { xs: '2rem', md: '3rem', lg: '3rem' }, // Responsive
- 
-            }}
-        >
-          Ce que nous offrons
+        <Typography variant="h2" sx={{ fontWeight: "bold", textAlign: "center", mb: 4, fontSize: { xs: "2rem", md: "3rem", lg: "2rem" } }}>
+          {desirTitle}
         </Typography>
 
         <Grid container spacing={4} justifyContent="center">
           {features.map((feature, index) => (
             <Grid item xs={12} md={4} key={index}>
               <Card
+                onClick={() => handleCardClick(feature)}
                 sx={{
-                  boxShadow: 2,
-                  borderRadius: 2,
+                  cursor: "pointer",
                   textAlign: "center",
                   padding: "20px",
                   backgroundColor: "#f9f9f9",
-                  cursor: "pointer",
-                  transition: "transform 0.3s ease, box-shadow 0.3s ease",
-                  "&:hover": {
-                    transform: {
-                      xs: "none", // Pas d'hover sur mobile
-                      md: "scale(1.05)", // Hover sur desktop uniquement
-                    },
-                    boxShadow: {
-                      xs: 2, // Pas d'effet de hover sur mobile
-                      md: 5, // Augmentation de l'ombre sur desktop
-                    },
-                  },
-                  "&:active": {
-                    transform: "scale(0.98)", // Effet de clic pour le tactile
-                    boxShadow: 3,
-                  },
+                  transition: "0.3s",
+                  "&:hover": { transform: "scale(1.05)", boxShadow: 5 },
                 }}
-                onClick={() => handleCardClick(feature)}
               >
                 <CardContent>
-                  <Typography
-                    variant="h3"
-                    sx={{
-                      fontWeight: "bold",
-                      mb: 2,
-                      fontSize: 26,
-                    }}
-                  >
+                  <Typography variant="h3" sx={{ fontWeight: "bold", mb: 2, fontSize: 26,whiteSpace: "pre-line" }}>
                     {feature.title}
                   </Typography>
                   <Typography variant="body2" sx={{ color: "#555" }}>
@@ -189,71 +141,25 @@ const ServicePageTemplate = ({
       </Box>
 
       {/* Modal */}
-      <Modal
-        open={openModal}
-        onClose={handleCloseModal}
-        closeAfterTransition
-        BackdropComponent={Backdrop}
-        BackdropProps={{
-          timeout: 500,
-        }}
-      >
+      <Modal open={openModal} onClose={handleCloseModal} closeAfterTransition BackdropComponent={Backdrop} BackdropProps={{ timeout: 500 }}>
         <Fade in={openModal}>
-          <Box
-            sx={{
-              position: "absolute",
-              top: "50%",
-              left: "50%",
-              transform: "translate(-50%, -50%)",
-              width: "90%",
-              maxWidth: "600px",
-              p: 4,
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              textAlign: "center",
-              background: "rgb(255, 255, 255)",
-              boxShadow: "0 4px 30px rgba(0, 0, 0, 0.1)",
-              backdropFilter: "blur(10px)",
-              borderRadius: 2,
-              border: "1px solid rgba(255, 255, 255, 0.3)",
-              color: "rgb(0, 0, 0)",
-            }}
-          >
-            <img
-              src={modalContent.image}
-              alt={modalContent.title}
-              style={{
-                width: "100%",
-                borderRadius: "8px",
-                marginBottom: "20px",
-              }}
-            />
+          <Box sx={{ position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", width: "90%", maxWidth: "600px", p: 4, textAlign: "center", background: "white", borderRadius: 2, boxShadow: 3 }}>
+            {loadingImage && <CircularProgress sx={{ mb: 2 }} />}
+            <img src={modalContent.image} alt={modalContent.title} style={{ width: "100%", borderRadius: "8px", display: loadingImage ? "none" : "block" }} onLoad={() => setLoadingImage(false)} />
             <Typography variant="h3" sx={{ fontWeight: "bold", mb: 2 }}>
               {modalContent.title}
             </Typography>
             <Typography variant="body1" sx={{ mb: 4 }}>
               {modalContent.text}
             </Typography>
-            <Button
-              onClick={handleCloseModal}
-              variant="contained"
-              color="secondary"
-              sx={{
-                textTransform: "none",
-                fontWeight: "bold",
-                backgroundColor: "#f44336",
-                "&:hover": { backgroundColor: "#d32f2f" },
-              }}
-            >
-              Quitter
+            <Button onClick={handleCloseModal} variant="contained" color="secondary">
+              Retour
             </Button>
           </Box>
         </Fade>
       </Modal>
-
-      {/* Carousel Section */}
-      {carouselItems && carouselItems.length > 0 && (
+    {/* Carousel Section */}
+    {carouselItems && carouselItems.length > 0 && (
         <Box
           sx={{
             padding: "40px 20px",
@@ -319,47 +225,29 @@ const ServicePageTemplate = ({
         </Box>
       )}
 
-      {/* Section Action */}
-      <Box
-        sx={{
-          backgroundColor: "#0e467f",
-          color: "white",
-          textAlign: "center",
-          padding: "40px 20px",
-        }}
-      >
-        <Typography variant="h2" 
-          sx={{ 
-            fontWeight: "bold", 
-            mb: 2,
-            fontSize: { xs: '2rem', md: '3rem', lg: '3rem' }, // Responsive
- 
-          }}
-        >
-          Prêt à démarrer ?
-        </Typography>
-
-        <Typography variant="body1" sx={{ mb: 4 }}>
-          Rejoignez-nous dès aujourd’hui et profitez de nos services pour
-          booster votre activité.
-        </Typography>
-        <Button
-          href={ctaLink}
-          variant="contained"
-          color="secondary"
-          size="large"
-          sx={{
-            textTransform: "none",
-            fontWeight: "bold",
-            backgroundColor: "#00bcd4",
-            "&:hover": { backgroundColor: "#0288d1" },
-          }}
-        >
-          {ctaText}
-        </Button>
-      </Box>
     </Box>
   );
 };
 
+// ✅ Définition des types des props avec PropTypes
+ServicePageTemplate.propTypes = {
+  title: PropTypes.string.isRequired,
+  subtitle: PropTypes.string.isRequired,
+  interestTitle: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  desirTitle: PropTypes.string.isRequired,
+  features: PropTypes.arrayOf(PropTypes.shape({ title: PropTypes.string.isRequired, description: PropTypes.string.isRequired, modalText: PropTypes.string, modalImage: PropTypes.string })).isRequired,
+  image: PropTypes.string.isRequired,
+  ctaText: PropTypes.string.isRequired,
+  ctaLink: PropTypes.string.isRequired,
+  carouselItems: PropTypes.arrayOf(PropTypes.shape({ title: PropTypes.string.isRequired, description: PropTypes.string.isRequired, image: PropTypes.string.isRequired })),
+  seo: PropTypes.object, // ✅ Ajout du SEO en option
+};
+
+// ✅ Valeurs par défaut
+ServicePageTemplate.defaultProps = {
+  carouselItems: [],
+  seo: {}, // ✅ SEO par défaut vide
+};
+
 export default ServicePageTemplate;

frontend/src/components/Testi.jsx

@@ -11,73 +11,79 @@ const TestimonialSection = () => {
         padding: "50px 20px",
       }}
     >
-
-        {/* Image à gauche */}
-        <Grid item xs={12} md={6}>
-          <Box
-            component="img"
-            src="https://picsum.photos/600/600.webp"
-            alt="Illustration"
-            sx={{
-              width: "100%",
-              height: "100%",
-              objectFit: "cover",
-              borderRadius: { xs: "15px 15px 0 0", md: "15px 0 0 15px" },
-            }}
-          />
-        </Grid>
-
-        {/* Contenu Témoignage */}
-        <Grid
-          item
-          xs={12}
-          md={6}
+      {/* Image à gauche */}
+      <Grid item xs={12} md={6}>
+        <Box
+          component="img"
+          src="https://picsum.photos/600/600.webp"
+          alt="Illustration"
           sx={{
-            background: "linear-gradient(to right, #002F6C, #0E467F)",
-            color: "white",
-            padding: "40px",
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "center",
+            width: "100%",
+            height: "100%",
+            objectFit: "cover",
+            borderRadius: { xs: "15px 15px 0 0", md: "15px 0 0 15px" },
+          }}
+        />
+      </Grid>
+
+      {/* Contenu Témoignage */}
+      <Grid
+        item
+        xs={12}
+        md={6}
+        sx={{
+          background: "linear-gradient(to right, #002F6C, #0E467F)",
+          color: "white",
+          padding: "40px",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+        }}
+      >
+        <Typography
+          variant="h3"
+          sx={{
+            fontSize: { xs: "2rem", md: "2rem", lg: "2rem" }, // Responsive
+            fontWeight: "bold",
+            mb: 2,
+            fontStyle: "italic",
+            position: "relative",
+            "&::before": {
+              content: '"“"',
+              fontSize: "50px",
+              position: "absolute",
+              top: "-10px",
+              left: "-5px",
+              opacity: 0.3,
+            },
           }}
         >
-          <Typography
-            variant="h4"
-            sx={{
-              fontWeight: "bold",
-              mb: 2,
-              fontStyle: "italic",
-              position: "relative",
-              "&::before": {
-                content: '"“"',
-                fontSize: "50px",
-                position: "absolute",
-                top: "-10px",
-                left: "-5px",
-                opacity: 0.3,
-              },
-            }}
-          >
-            In3 a transformé notre vision en réalité avec une approche
-            passionnée et professionnelle.
-          </Typography>
+          In3 a transformé notre vision en réalité avec une approche passionnée
+          et professionnelle.
+        </Typography>
 
-          <Box sx={{ display: "flex", alignItems: "center", mt: 3 }}>
-            <Avatar
-              alt="Marie Dupont"
-              src="https://picsum.photos/100.webp"
-              sx={{ width: 56, height: 56, marginRight: 2 }}
-            />
-            <Box>
-              <Typography variant="h6" sx={{ fontWeight: "bold" }}>
-                Marie Dupont
-              </Typography>
-              <Typography variant="body2">
-                Directrice Créative chez TechVision
-              </Typography>
-            </Box>
+        <Box sx={{ display: "flex", alignItems: "center", mt: 3 }}>
+          <Avatar
+            alt="Marie Dupont"
+            src="https://picsum.photos/100.webp"
+            sx={{ width: 56, height: 56, marginRight: 2 }}
+          />
+          <Box>
+            <Typography
+              variant="span"
+              sx={{
+                fontWeight: "bold",
+                
+              }}
+            >
+              Marie Dupont
+            </Typography>
+            <Typography variant="body2">
+              Directrice Créative chez TechVision
+            </Typography>
           </Box>
-        </Grid>
+        </Box>
+      </Grid>
     </Box>
   );
 };

frontend/src/main.jsx

@@ -6,6 +6,9 @@ import theme from "./theme";
 import { HelmetProvider } from "react-helmet-async";
 import SimpleReactLightbox from "simple-react-lightbox";
 import NotFound from "./components/Pages/NotFound.jsx";
+import GestionArticles from "./components/Pages/GestionArticles";
+import EditPost from "./components/EditPost";
+import GestionPageAccueil from "./components/Pages/GestionPageAccueil";
 
 
 // Lazy loading des pages
@@ -13,6 +16,7 @@ const Home = lazy(() => import('./components/Pages/Home.jsx'));
 const About = lazy(() => import('./components/Pages/About'));
 const Contact = lazy(() => import('./components/Pages/Contact'));
 const Post = lazy(() => import('./components/Pages/Post'));
+const PostDetails = lazy(() => import('./components/PostDetails')) ;
 const Search = lazy(() => import('./components/Pages/Search')); // Nouveau composant pour la recherche
 const BureauEtude = lazy(() => import('./components/Pages/BureauEtude'));
 const CreatePost = lazy(() => import('./components/Pages/CreatePost'));
@@ -37,6 +41,7 @@ function YourApp() {
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/posts" element={<Post />} />
+          <Route path="/admin/edit-post/:id" element={<EditPost />} />
           <Route path="/bureauEtude" element={<BureauEtude />} />
           <Route path="/about" element={<About />} />
           <Route path="/contact" element={<Contact />} />
@@ -44,11 +49,14 @@ function YourApp() {
           {/* Routes pour les services */}
           <Route path="/services/prestation-maitrise-oeuvre" element={<ServiceUn />} />
           <Route path="/services/structure-beton-charpente-metallique-bois" element={<ServiceDeux />} />
-          <Route path="/services/formation-video" element={<ServiceTrois />} />
-          <Route path="/create-post" element={<CreatePost />} />
+          <Route path="/services/electricite" element={<ServiceTrois />} />
+          <Route path="/admin/create-post" element={<CreatePost />} />
+          <Route path="/post/:slug" element={<PostDetails />} />
           <Route path="/admin/posts" element={<PostList />} />
           <Route path="/admin/login" element={<Login />} />
           <Route path="/admin/dashboard" element={<Dashboard />} />
+          <Route path="/admin/gestion-articles" element={<GestionArticles />} />
+          <Route path="/admin/gestion-page-accueil" element={<GestionPageAccueil />} />
           <Route path="*" element={<NotFound />} />
         </Routes>
         <Footer />

frontend/src/wordpress.js

@@ -1,5 +1,5 @@
 import axios from "axios";
-import { getToken } from "./auth"; // 🔥 Import du token depuis auth.js
+import { getToken } from "./auth"; // 🔥 Import du token pour l'authentification
 
 const API_URL = "https://preprod.octopusdesign.fr/api-octopus/server/wp-json/wp/v2";
 
@@ -9,9 +9,9 @@ const API_URL = "https://preprod.octopusdesign.fr/api-octopus/server/wp-json/wp/
  * @returns {Promise<number>} - L'ID de l'image uploadée
  */
 export async function uploadImage(file) {
-    const token = getToken(); // 🔥 Récupération automatique du token
+    const token = getToken();
     if (!token) {
-        console.error("❌ Aucun token trouvé ! L'utilisateur doit se reconnecter.");
+        console.error("❌ Aucun token trouvé !");
         throw new Error("Utilisateur non authentifié.");
     }
 
@@ -19,28 +19,31 @@ export async function uploadImage(file) {
 
     const formData = new FormData();
     formData.append("file", file);
-    formData.append("title", "Nouvelle image");
+    formData.append("title", file.name);
     formData.append("status", "publish");
 
     try {
-        const response = await axios.post(
-            `${API_URL}/media`,
-            formData,
-            {
-                headers: {
-                    "Authorization": `Basic ${token}`, // 🔥 Authentification Basic
-                }
+        const response = await axios.post(`${API_URL}/media`, formData, {
+            headers: {
+                "Authorization": `Basic ${token}`, // ✅ Garder `Basic` si ça fonctionnait avant
+                "Content-Type": "multipart/form-data"
             }
-        );
+        });
 
         console.log("✅ Image uploadée avec succès :", response.data);
-        return response.data.id; // Retourne l'ID de l'image
+        return response.data.id; // ✅ Retourne l'ID de l'image
     } catch (error) {
-        console.error("❌ Erreur d'upload :", error.response ? error.response.data : error.message);
+        console.error("❌ Erreur d'upload :", error.response?.data || error.message);
         throw error;
     }
 }
 
+export async function fetchPosts() {
+    const response = await fetch("https://preprod.octopusdesign.fr/api-octopus/server/wp-json/wp/v2/posts");
+    if (!response.ok) throw new Error("Erreur lors de la récupération des articles");
+    return await response.json();
+}
+
 /**
  * 🔹 Crée un post WordPress avec une image mise en avant
  * @param {string} title - Le titre du post
@@ -49,33 +52,163 @@ export async function uploadImage(file) {
  * @returns {Promise<Object>} - Le post créé
  */
 export async function createPost(title, content, imageId) {
-    const token = getToken(); // 🔥 Récupération automatique du token
+    const token = getToken();
     if (!token) {
-        console.error("❌ Aucun token trouvé ! L'utilisateur doit se reconnecter.");
+        console.error("❌ Aucun token trouvé !");
         throw new Error("Utilisateur non authentifié.");
     }
 
     try {
-        const response = await axios.post(
-            `${API_URL}/posts`,
-            {
-                title: title,
-                content: content,
-                status: "publish",
-                featured_media: imageId, // 🔥 Associer l'image mise en avant
-            },
-            {
-                headers: {
-                    "Authorization": `Basic ${token}`,
-                    "Content-Type": "application/json"
-                }
+        const response = await axios.post(`${API_URL}/posts`, {
+            title,
+            content,
+            status: "publish",
+            featured_media: imageId,
+        }, {
+            headers: {
+                "Authorization": `Basic ${token}`, // ✅ Garder `Basic` si ça fonctionnait avant
+                "Content-Type": "application/json"
             }
-        );
+        });
 
         console.log("✅ Post créé avec succès :", response.data);
         return response.data;
     } catch (error) {
-        console.error("❌ Erreur lors de la création du post :", error.response ? error.response.data : error.message);
+        console.error("❌ Erreur création post :", error.response?.data || error.message);
+        throw error;
+    }
+}
+
+/**
+ * 🔹 Récupère un article WordPress par son ID
+ * @param {number} postId - L'ID du post à récupérer
+ * @returns {Promise<Object>} - Données du post récupéré
+ */
+export async function getPostById(postId) {
+    try {
+        const response = await axios.get(`${API_URL}/posts/${postId}`);
+        console.log("✅ Article récupéré :", response.data);
+        return response.data;
+    } catch (error) {
+        console.error("❌ Erreur récupération article :", error.response?.data || error.message);
+        throw error;
+    }
+}
+
+/**
+ * 🔹 Met à jour un article WordPress
+ * @param {number} postId - L'ID de l'article à modifier
+ * @param {string} title - Le nouveau titre
+ * @param {string} content - Le nouveau contenu
+ * @returns {Promise<Object>} - L'article mis à jour
+ */
+export async function updatePost(postId, title, content) {
+    const token = getToken();
+    if (!token) {
+        console.error("❌ Aucun token trouvé !");
+        throw new Error("Utilisateur non authentifié.");
+    }
+
+    try {
+        const response = await axios.post(`${API_URL}/posts/${postId}`, { // ✅ Rester sur `POST`
+            title,
+            content,
+            status: "publish",
+        }, {
+            headers: {
+                "Authorization": `Basic ${token}`, // ✅ Garder `Basic` si ça fonctionnait avant
+                "Content-Type": "application/json"
+            }
+        });
+
+        console.log("✅ Article mis à jour avec succès :", response.data);
+        return response.data;
+    } catch (error) {
+        console.error("❌ Erreur mise à jour article :", error.response?.data || error.message);
+        throw error;
+    }
+}
+
+/**
+ * 🔹 Supprime un article WordPress et son image associée
+ * @param {number} postId - L'ID de l'article à supprimer
+ * @param {number} imageId - L'ID de l'image en vedette à supprimer (facultatif)
+ * @returns {Promise<void>}
+ */
+export async function deletePost(postId, imageId) {
+    const token = getToken();
+    if (!token) {
+        console.error("❌ Aucun token trouvé !");
+        throw new Error("Utilisateur non authentifié.");
+    }
+
+    try {
+        console.log(`📢 Suppression article ID: ${postId}...`);
+        
+        // ✅ Suppression du post
+        await axios.delete(`${API_URL}/posts/${postId}?force=true`, {
+            headers: {
+                "Authorization": `Basic ${token}`, // ✅ Garder `Basic` si ça fonctionnait avant
+                "Content-Type": "application/json"
+            }
+        });
+
+        console.log(`✅ Article ${postId} supprimé.`);
+
+        // ✅ Suppression de l'image associée si elle existe
+        if (imageId) {
+            console.log(`📢 Suppression image ID: ${imageId}...`);
+            await axios.delete(`${API_URL}/media/${imageId}?force=true`, {
+                headers: {
+                    "Authorization": `Basic ${token}`, // ✅ Garder `Basic` si ça fonctionnait avant
+                    "Content-Type": "application/json"
+                }
+            });
+            console.log(`✅ Image ${imageId} supprimée.`);
+        }
+    } catch (error) {
+        console.error("❌ Erreur suppression :", error.response?.data || error.message);
+        throw error;
+    }
+}
+
+/**
+ * 🔹 Met à jour les champs ACF d'une page WordPress
+ * @param {number} pageId - L'ID de la page à modifier
+ * @param {object} acfData - Les données des champs ACF à mettre à jour
+ */
+export async function updateHomePageACF(pageId, newData) {
+    const token = getToken();
+    if (!token) {
+        console.error("❌ Aucun token trouvé !");
+        throw new Error("Utilisateur non authentifié.");
+    }
+
+    try {
+        console.log(`📢 Tentative de mise à jour des ACF pour la page ${pageId}...`, newData);
+
+        const response = await fetch(
+            `https://preprod.octopusdesign.fr/api-octopus/server/wp-json/wp/v2/pages/${pageId}`,
+            {
+                method: "PUT",
+                headers: {
+                    "Authorization": `Basic ${token}`,
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({ acf: newData }),
+            }
+        );
+
+        const responseData = await response.json();
+
+        if (!response.ok) {
+            throw new Error(`Erreur API: ${JSON.stringify(responseData)}`);
+        }
+
+        console.log("✅ Mise à jour réussie :", responseData);
+        return responseData;
+    } catch (error) {
+        console.error("❌ Erreur mise à jour ACF :", error);
         throw error;
     }
 }

server/wp-content/themes/hello-elementor-child/functions.php

@@ -270,3 +270,23 @@ function custom_cors_headers() {
     header("Access-Control-Allow-Headers: Content-Type, Authorization");
 }
 add_action('init', 'custom_cors_headers');
+
+// 🔹 Autoriser la modification des champs ACF via l'API REST
+add_action('rest_api_init', function () {
+    register_rest_field(
+        'page', // Type de post
+        'acf',  // Champ ACF
+        [
+            'get_callback'    => function ($object) {
+                return get_fields($object['id']); // ✅ Vérifie que l'ID est correct
+            },
+            'update_callback' => function ($value, $object) {
+                foreach ($value as $field_key => $field_value) {
+                    update_field($field_key, $field_value, $object->ID); // ✅ Correction ici
+                }
+                return true;
+            },
+            'schema' => null,
+        ]
+    );
+});