MAJ Article

frontend/package-lock.json

@@ -19,7 +19,6 @@
         "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"
@@ -3393,15 +3392,6 @@
         "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",
@@ -9996,19 +9986,6 @@
         "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",
@@ -12888,6 +12865,15 @@
         "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,7 +21,6 @@
     "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/PostDetails.jsx

@@ -0,0 +1,67 @@
+import React, { 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 { id } = useParams();
+  const [post, setPost] = useState(null);
+  const [image, setImage] = useState(null);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const fetchPost = async () => {
+      try {
+        const response = await api.get(`wp/v2/posts/${id}?_fields=title,content,featured_media,date`);
+        setPost(response.data);
+
+        // Récupération de l'image
+        if (response.data.featured_media) {
+          const mediaResponse = await api.get(`wp/v2/media/${response.data.featured_media}`);
+          setImage(mediaResponse.data.source_url);
+        }
+      } catch (error) {
+        console.error("Erreur lors de la récupération de l'article :", error);
+      }
+    };
+
+    fetchPost();
+  }, [id]);
+
+  if (!post) {
+    return <CircularProgress sx={{ display: "block", margin: "auto", mt: 5 }} />;
+  }
+
+  return (
+    <Box sx={{ padding: "40px 20px",display:"flex", flexDirection:"column" }}>
+      <Button onClick={() => navigate(-1)} variant="outlined" sx={{ mt:5, mb: 3, maxWidth:"200px" }}>
+        ⬅ Retour
+      </Button>
+
+      <Typography variant="h1" sx={{ 
+        fontWeight: "bold", 
+        textAlign: "center", 
+        mb: 4,
+        fontSize: { xs: '3rem', md: '3rem', lg: '3rem' }, // Responsive 
+        }}>
+        {post.title.rendered}
+      </Typography>
+
+      <Box sx={{ display:"flex", alignItems:"center", justifyContent:"center", padding: "40px 20px",margin:"auto" }}>
+      {image && (
+        <Box
+          component="img"
+          src={image}
+          alt={post.title.rendered}
+          sx={{ width: "33%", 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/EditPost.jsx

@@ -1,135 +1,33 @@
-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";
+import { useState } from "react";
+import { updatePost } from "../wordpress";
 
-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);
+function EditPost({ post }) {
+  const [title, setTitle] = useState(post.title.rendered);
+  const [content, setContent] = useState(post.content.rendered);
 
-  // ✅ 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.");
+  const handleUpdate = async () => {
+    const success = await updatePost(post.id, title, content);
+    if (success) {
+      alert("Article mis à jour !");
+    } else {
+      alert("Échec de la mise à jour.");
     }
   };
 
-  if (loading) return <Typography>Chargement...</Typography>;
-
   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 }}>
-          <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>
+    <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>
   );
 }
 

frontend/src/components/Expertises.jsx

@@ -49,6 +49,7 @@ const Expertices = ({
         <Grid item xs={12} md={4}>
           <Card
             sx={{
+              backgroundPosition: "center",
               boxShadow: 3,
               padding: 2,
               textAlign: "center",
@@ -98,6 +99,7 @@ const Expertices = ({
         <Grid item xs={12} md={4}>
           <Card
             sx={{
+              backgroundPosition: "center",
               boxShadow: 3,
               padding: 2,
               textAlign: "center",
@@ -147,6 +149,7 @@ 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 { useState } from "react";
+import React, { useState } from "react";
 import {
   AppBar,
   Toolbar,
@@ -179,7 +179,7 @@ const Header = () => {
             </MenuItem>
             <MenuItem
               component={Link}
-              to="/services/electricite"
+              to="/services/formation-video"
               onClick={handleMenuClose}
             >
               <WorkIcon sx={{ marginRight: 1}} />
@@ -350,26 +350,25 @@ const Header = () => {
                 <WorkIcon sx={{ marginRight: 0.5 }} />
                 <ListItemText primary="Prestation maitrise oeuvre" />
               </ListItem>
-
               <ListItem
                 button
                 component={Link}
-                to="/services/structure-beton-charpente-metallique-bois"
-                selected={location.pathname.includes("/services/structure-beton-charpente-metallique-bois")}
+                to="/services/formation-ia"
+                selected={location.pathname.includes("/services/formation-ia")}
               >
                 <WorkIcon sx={{ marginRight: 0.5 }} />
-                <ListItemText primary="Structure beton..." />
+                <ListItemText primary="Formation IA" />
               </ListItem>
               <ListItem
                 button
                 component={Link}
-                to="/services/electricite"
+                to="/services/formation-video"
                 selected={location.pathname.includes(
-                  "/services/electricite"
+                  "/services/formation-video"
                 )}
               >
                 <WorkIcon sx={{ marginRight: 0.5 }} />
-                <ListItemText primary="Electricité..." />
+                <ListItemText primary="Formation Video" />
               </ListItem>
               <ListItem
                 button

frontend/src/components/Pages/Contact.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, Suspense } from "react";
+import React, { useState, useEffect, lazy, 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,9 +356,10 @@ const Contact = () => {
         <Typography
           variant="h2"
           sx={{
-            fontSize: { xs: "2rem", md: "2rem", lg: "2rem" }, // Responsive
+            fontSize: { xs: "2rem", md: "2rem", lg: "3rem" }, // Responsive
             fontWeight: "bold",
             mb: 2,
+            fontSize: { xs: "1.5rem", md: "2rem" },
           }}
         >
           Besoin d'une assistance immédiate ?

frontend/src/components/Pages/CreatePost.jsx

@@ -1,133 +1,54 @@
-import { useState, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import { useState } from "react";
 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 navigate = useNavigate();
+    const [title, setTitle] = useState("");
+    const [content, setContent] = useState("");
+    const [file, setFile] = useState(null);
 
-  // ✅ Vérification de l'authentification : Redirection vers /login si l'utilisateur n'est pas connecté
-  useEffect(() => {
-    if (!getToken()) {
-      navigate("/admin/login");
-    }
-  }, [navigate]);
+    const handleSubmit = async (e) => {
+        e.preventDefault();
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
+        try {
+            console.log("📢 Tentative d'upload de l'image...");
+            const imageId = await uploadImage(file);
 
-    try {
-      console.log("📢 Tentative d'upload de l'image...");
-      const imageId = await uploadImage(file);
+            console.log("📢 Création du post avec l'image mise en avant...");
+            await createPost(title, content, imageId);
 
-      console.log("📢 Création du post avec l'image mise en avant...");
-      await createPost(title, content, imageId);
+            alert("✅ Post créé avec succès !");
+        } catch (error) {
+            alert("❌ Erreur lors de la création du post.");
+        }
+    };
 
-      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>
-  );
+    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>
+    );
 }
 
 export default CreatePost;

frontend/src/components/Pages/Dashboard.jsx

@@ -1,6 +1,4 @@
-import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import { getToken, logout } from "../../auth"; // Importation de la fonction logout
 import {
   Box,
   Typography,
@@ -8,27 +6,12 @@ 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
@@ -52,69 +35,19 @@ 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, mt: 4 }}>
+        <Typography variant="h4" sx={{ fontWeight: "bold", mb: 4 }}>
           <DashboardIcon sx={{ fontSize: 40, color: "#0e467f", mr: 1 }} />
           Tableau de Bord
         </Typography>
 
         {/* Cartes du Dashboard */}
         <Grid container spacing={3} justifyContent="center">
-          {/* ✅ Gestion Page d'Accueil - Première carte */}
-          <Grid item xs={12} sm={6}>
+          <Grid item xs={12} sm={6} md={4}>
             <Card
-              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")}
+              onClick={() => navigate("/posts")}
               sx={{
                 cursor: "pointer",
                 textAlign: "center",

frontend/src/components/Pages/GestionArticles.jsx

@@ -1,165 +0,0 @@
-// ✅ 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

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

frontend/src/components/Pages/Login.jsx

@@ -1,6 +1,5 @@
 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,
@@ -17,13 +16,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 !");
     }
@@ -32,6 +31,7 @@ function TestLogin() {
   const handleLogout = () => {
     logout();
     setToken(null);
+    // alert("Déconnexion réussie !");
   };
 
   return (
@@ -66,24 +66,14 @@ function TestLogin() {
             </Typography>
 
             {token ? (
-              <>
-                <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>
-              </>
+              <Button
+                variant="contained"
+                color="error"
+                onClick={handleLogout}
+                sx={{ mt: 3, width: "100%" }}
+              >
+                Déconnexion
+              </Button>
             ) : (
               <form onSubmit={handleLogin}>
                 <TextField

frontend/src/components/Pages/Post.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import React, { 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";
@@ -10,7 +10,7 @@ const Posts = () => {
   useEffect(() => {
     const fetchPosts = async () => {
       try {
-        const response = await api.get("wp/v2/posts?_fields=id,slug,title,excerpt,content,featured_media");
+        const response = await api.get("wp/v2/posts?_fields=id,title,excerpt,featured_media");
         const postsData = response.data;
 
         // Récupérer les images en vedette
@@ -38,23 +38,15 @@ const Posts = () => {
     fetchPosts();
   }, []);
 
-  // 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
+  // Fonction pour tronquer le texte à 70 caractères
   const truncateText = (text, maxLength) => {
-    const strippedText = stripHtmlTags(text
-      .replace(/<[^>]*>/g, "") // Supprime les balises HTML
-      .replace(/&nbsp;/g, " ") // Remplace les espaces non bris
-    ); // Nettoyage HTML
+    const strippedText = text.replace(/(<([^>]+)>)/gi, ""); // Suppression des balises 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 }}>
+      <Typography variant="h2" sx={{ fontWeight: "bold", textAlign: "center", mb: 4 }}>
         Nos Articles
       </Typography>
 
@@ -66,7 +58,7 @@ const Posts = () => {
                 cursor: "pointer",
                 "&:hover": { backgroundColor: "#0e467f", color: "white", transform: "scale(1.05)", boxShadow: 6 },
               }}
-              onClick={() => navigate(`/post/${post.slug}`)}
+              onClick={() => navigate(`/post/${post.id}`)}
             >
               {post.image && (
                 <CardMedia component="img" height="200" image={post.image} alt={post.title.rendered} />
@@ -76,7 +68,7 @@ const Posts = () => {
                   {post.title.rendered}
                 </Typography>
                 <Typography variant="body2" sx={{ mt: 1 }}>
-                  {truncateText(post.excerpt.rendered || post.content.rendered, 100)}
+                  {truncateText(post.excerpt.rendered, 100)}
                 </Typography>
                 <Button variant="outlined" sx={{ mt: 2, color: "white", borderColor: "white" }}>
                   Lire plus

frontend/src/components/Pages/PostList.jsx

@@ -1,89 +1,27 @@
 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() {
-            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);
-            }
+            const data = await fetchPosts();
+            setPosts(data);
         }
         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 (
-        <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>
+        <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>
     );
 }
-
-export default PostList;
+export default PostList;

frontend/src/components/Pages/ServiceDeux.jsx

@@ -1,62 +1,50 @@
-import React from "react";
-import ServicePageTemplate from "../ServicePageTemplate";
+import React from 'react';
+import ServicePageTemplate from '../ServicePageTemplate';
 
 const ServiceDeux = () => {
   const serviceDetails = {
-    // 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
-    
+    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.',
     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,69 +1,52 @@
-import React from "react";
-import ServicePageTemplate from "../ServicePageTemplate";
+import React from 'react';
+import ServicePageTemplate from '../ServicePageTemplate';
 
 const ServiceTrois = () => {
   const serviceDetails = {
-    // 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",
-
+    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.',
     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: "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: '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: "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",
+        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: '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,76 +1,50 @@
-import React from "react";
-import ServicePageTemplate from "../ServicePageTemplate";
+import React from 'react';
+import ServicePageTemplate from '../ServicePageTemplate';
 
 const ServiceUn = () => {
   const serviceDetails = {
-    // 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
+    title: 'Prestation-maitrise-oeuvre',
+    subtitle: 'Apprenez à maîtriser les technologies du web.',
     description:
-      "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
-
+      '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.',
     features: [
       {
-        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: '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: "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: '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: "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",
+        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',
       },
     ],
-
+    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} />;
 };
 
-export default ServiceUn;
+export default ServiceUn;

frontend/src/components/PostDetails.jsx

@@ -1,84 +1,64 @@
-import { useState, useEffect } from "react";
+import React, { 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 { id } = useParams();
   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`);
+        const response = await api.get(`wp/v2/posts/${id}?_fields=title,content,featured_media,date`);
+        setPost(response.data);
 
-        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 !");
+        // Récupération de l'image
+        if (response.data.featured_media) {
+          const mediaResponse = await api.get(`wp/v2/media/${response.data.featured_media}`);
+          setImage(mediaResponse.data.source_url);
         }
       } catch (error) {
-        console.error("❌ Erreur lors de la récupération de l'article :", error);
+        console.error("Erreur lors de la récupération de l'article :", error);
       }
     };
 
     fetchPost();
-  }, [slug]); // ✅ Dépendance correcte
+  }, [id]);
 
   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" }}>
+    <Box sx={{ padding: "40px 20px",display:"flex", flexDirection:"column" }}>
+      <Button onClick={() => navigate(-1)} variant="outlined" 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" },
-        }}
-      >
+      <Typography variant="h1" sx={{ 
+        fontWeight: "bold", 
+        textAlign: "center", 
+        mb: 4,
+        fontSize: { xs: '3rem', md: '3rem', lg: '3rem' }, // Responsive 
+        }}>
         {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 sx={{ display:"flex", alignItems:"center", justifyContent:"center", padding: "40px 20px",margin:"auto" }}>
+      {image && (
+        <Box
+          component="img"
+          src={image}
+          alt={post.title.rendered}
+          sx={{ width: "33%", maxHeight: "400px", objectFit: "cover", borderRadius: "8px", mb: 3 }}
+        />
+      )}
+
+
+      <Typography variant="body1" sx={{ maxWidth: "800px", mx: "auto" }} dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
       </Box>
     </Box>
   );

frontend/src/components/ServicePageTemplate.jsx

@@ -1,37 +1,40 @@
-import { useState } from "react";
-import { Box, Typography, Button, Grid, Card, CardContent, Modal, Fade, Backdrop, CircularProgress } from "@mui/material";
+import React, { useState } from "react";
+import {
+  Box,
+  Typography,
+  Button,
+  Grid,
+  Card,
+  CardContent,
+  Modal,
+  Fade,
+  Backdrop,
+} 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: feature.modalImage || "https://picsum.photos/id/43/800/400.webp", // Image par défaut
     });
-    setLoadingImage(true);
     setOpenModal(true);
   };
 
@@ -40,26 +43,16 @@ const ServicePageTemplate = ({
   };
 
   return (
-    <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={{
+        backgroundColor: "#f5f5f5",
+        color: "#333",
+        fontFamily: "Arial, sans-serif",
+      }}
+    >
+      {/* Section Attention */}
       <Box
         sx={{
-          mt:5,
           backgroundImage: `url(${image})`,
           backgroundSize: "cover",
           backgroundPosition: "center",
@@ -68,66 +61,121 @@ const ServicePageTemplate = ({
           alignItems: "center",
           justifyContent: "center",
           textAlign: "center",
-          color: "black",
+          color: "white",
           padding: "20px",
         }}
       >
-        <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" } }}>
+        <Box sx={{ maxWidth: "800px" }}>
+          <Typography 
+            variant="h1" 
+            sx={{ 
+              fontWeight: "bold", 
+              mb: 2, 
+              fontSize: { xs: '2rem', md: '3rem', lg: '4rem' }, // Responsive
+            }}
+          >
             {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 numero 1 */}
+      {/* Section Interest */}
       <Box sx={{ padding: "40px 20px", textAlign: "center" }}>
-        <Typography variant="h2" sx={{ fontWeight: "bold", mb: 2, fontSize: { xs: "2rem", md: "2rem", lg: "2rem" }, whiteSpace: "pre-line" }}>
-          {interestTitle}
+        <Typography variant="h2" 
+          sx={{ 
+            fontWeight: "bold", 
+            mb: 2,
+            fontSize: { xs: '2rem', md: '3rem', lg: '3rem' }, // Responsive
+          }}
+        >
+          Pourquoi choisir notre formation ?
         </Typography>
-        <Typography variant="body1" sx={{ maxWidth: "1000px", margin: "0 auto", mb: 4, whiteSpace: "pre-line" }}>
+
+        <Typography
+          variant="body1"
+          sx={{ maxWidth: "800px", margin: "0 auto", mb: 4 }}
+        >
           {description}
         </Typography>
       </Box>
 
-      {/* Section numero 2 */}
+      {/* Section Desire */}
       <Box sx={{ backgroundColor: "#ffffff", padding: "40px 20px" }}>
-        <Typography variant="h2" sx={{ fontWeight: "bold", textAlign: "center", mb: 4, fontSize: { xs: "2rem", md: "3rem", lg: "2rem" } }}>
-          {desirTitle}
+        <Typography
+          variant="h2"
+            sx={{ 
+              fontWeight: "bold", 
+              textAlign: "center", 
+              mb: 4,
+              fontSize: { xs: '2rem', md: '3rem', lg: '3rem' }, // Responsive
+ 
+            }}
+        >
+          Ce que nous offrons
         </Typography>
 
         <Grid container spacing={4} justifyContent="center">
           {features.map((feature, index) => (
             <Grid item xs={12} md={4} key={index}>
               <Card
-                onClick={() => handleCardClick(feature)}
                 sx={{
-                  cursor: "pointer",
+                  boxShadow: 2,
+                  borderRadius: 2,
                   textAlign: "center",
                   padding: "20px",
                   backgroundColor: "#f9f9f9",
-                  transition: "0.3s",
-                  "&:hover": { transform: "scale(1.05)", boxShadow: 5 },
+                  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,
+                  },
                 }}
+                onClick={() => handleCardClick(feature)}
               >
                 <CardContent>
-                  <Typography variant="h3" sx={{ fontWeight: "bold", mb: 2, fontSize: 26,whiteSpace: "pre-line" }}>
+                  <Typography
+                    variant="h3"
+                    sx={{
+                      fontWeight: "bold",
+                      mb: 2,
+                      fontSize: 26,
+                    }}
+                  >
                     {feature.title}
                   </Typography>
                   <Typography variant="body2" sx={{ color: "#555" }}>
@@ -141,25 +189,71 @@ 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, 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)} />
+          <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",
+              }}
+            />
             <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">
-              Retour
+            <Button
+              onClick={handleCloseModal}
+              variant="contained"
+              color="secondary"
+              sx={{
+                textTransform: "none",
+                fontWeight: "bold",
+                backgroundColor: "#f44336",
+                "&:hover": { backgroundColor: "#d32f2f" },
+              }}
+            >
+              Quitter
             </Button>
           </Box>
         </Fade>
       </Modal>
-    {/* Carousel Section */}
-    {carouselItems && carouselItems.length > 0 && (
+
+      {/* Carousel Section */}
+      {carouselItems && carouselItems.length > 0 && (
         <Box
           sx={{
             padding: "40px 20px",
@@ -225,29 +319,47 @@ 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;
+export default ServicePageTemplate;

frontend/src/components/Testi.jsx

@@ -11,81 +11,75 @@ 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}
-        sx={{
-          background: "linear-gradient(to right, #002F6C, #0E467F)",
-          color: "white",
-          padding: "40px",
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-        }}
-      >
-        <Typography
-          variant="h3"
+        {/* 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}
           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,
-            },
+            background: "linear-gradient(to right, #002F6C, #0E467F)",
+            color: "white",
+            padding: "40px",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
           }}
         >
-          In3 a transformé notre vision en réalité avec une approche passionnée
-          et professionnelle.
-        </Typography>
+          <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>
 
-        <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 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>
-        </Box>
-      </Grid>
+        </Grid>
     </Box>
   );
 };
 
-export default TestimonialSection;
+export default TestimonialSection;

frontend/src/main.jsx

@@ -6,10 +6,6 @@ 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
 const Home = lazy(() => import('./components/Pages/Home.jsx'));
@@ -19,10 +15,6 @@ 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'));
-const PostList = lazy(() => import("./components/Pages/PostList"));
-const Login = lazy(() => import("./components/Pages/Login"));
-const Dashboard = lazy(() => import("./components/Pages/Dashboard"));
 
 // Import des services
 import ServiceUn from "./components/Pages/ServiceUn.jsx";
@@ -41,7 +33,7 @@ function YourApp() {
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/posts" element={<Post />} />
-          <Route path="/admin/edit-post/:id" element={<EditPost />} />
+          <Route path="/post/:id" element={<PostDetails />} />
           <Route path="/bureauEtude" element={<BureauEtude />} />
           <Route path="/about" element={<About />} />
           <Route path="/contact" element={<Contact />} />
@@ -49,14 +41,7 @@ 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/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="/services/formation-video" element={<ServiceTrois />} />
           <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 pour l'authentification
+import { getToken } from "./auth"; // 🔥 Import du token depuis auth.js
 
 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();
+    const token = getToken(); // 🔥 Récupération automatique du token
     if (!token) {
-        console.error("❌ Aucun token trouvé !");
+        console.error("❌ Aucun token trouvé ! L'utilisateur doit se reconnecter.");
         throw new Error("Utilisateur non authentifié.");
     }
 
@@ -19,31 +19,28 @@ export async function uploadImage(file) {
 
     const formData = new FormData();
     formData.append("file", file);
-    formData.append("title", file.name);
+    formData.append("title", "Nouvelle image");
     formData.append("status", "publish");
 
     try {
-        const response = await axios.post(`${API_URL}/media`, formData, {
-            headers: {
-                "Authorization": `Basic ${token}`, // ✅ Garder `Basic` si ça fonctionnait avant
-                "Content-Type": "multipart/form-data"
+        const response = await axios.post(
+            `${API_URL}/media`,
+            formData,
+            {
+                headers: {
+                    "Authorization": `Basic ${token}`, // 🔥 Authentification Basic
+                }
             }
-        });
+        );
 
         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?.data || error.message);
+        console.error("❌ Erreur d'upload :", error.response ? 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
@@ -52,163 +49,33 @@ export async function fetchPosts() {
  * @returns {Promise<Object>} - Le post créé
  */
 export async function createPost(title, content, imageId) {
-    const token = getToken();
+    const token = getToken(); // 🔥 Récupération automatique du token
     if (!token) {
-        console.error("❌ Aucun token trouvé !");
+        console.error("❌ Aucun token trouvé ! L'utilisateur doit se reconnecter.");
         throw new Error("Utilisateur non authentifié.");
     }
 
     try {
-        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"
+        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"
+                }
             }
-        });
+        );
 
         console.log("✅ Post créé avec succès :", response.data);
         return response.data;
     } catch (error) {
-        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);
+        console.error("❌ Erreur lors de la création du post :", error.response ? error.response.data : error.message);
         throw error;
     }
 }

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

@@ -269,24 +269,4 @@ function custom_cors_headers() {
     header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
     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,
-        ]
-    );
-});
+add_action('init', 'custom_cors_headers');