import image cloudinary

frontend/src/components/Pages/GestionPageAccueil.jsx

@@ -19,6 +19,7 @@ const GestionPageAccueil = () => {
   const [heroTitle, setHeroTitle] = useState("");
   const [heroText, setHeroText] = useState("");
   const [heroImage, setHeroImage] = useState(null);
+  const [heroImageCloudinaryUrl, setHeroImageCloudinaryUrl] = useState("");
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [successMessage, setSuccessMessage] = useState("");
@@ -69,11 +70,15 @@ const GestionPageAccueil = () => {
 
         // ✅ Image Hero
         if (data.acf?.img_hero) {
-          const mediaResponse = await fetch(
+          if (data.acf?.img_hero_url) {
-            `https://preprod.octopusdesign.fr/api-octopus/server/wp-json/wp/v2/media/${data.acf.img_hero}`
+            setHeroImage(data.acf.img_hero_url);
-          );
+          } else {
-          const mediaData = await mediaResponse.json();
+            const mediaResponse = await fetch(
-          setHeroImage(mediaData.source_url);
+              `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);
+          }
         }
 
         // ✅ GDC Construct
@@ -110,6 +115,7 @@ const GestionPageAccueil = () => {
       const newData = {
         hero_title: heroTitle,
         hero_text: heroText,
+        img_hero_url: heroImageCloudinaryUrl || undefined,
         mission: missions,
         gdc_construct: {
           construct_title: constructTitle,
@@ -246,6 +252,33 @@ const GestionPageAccueil = () => {
               <input type="file" hidden onChange={handleImageUpload} />
             </Button>
 
+            <TextField
+              label="Ou URL Cloudinary"
+              fullWidth
+              variant="outlined"
+              value={heroImageCloudinaryUrl}
+              onChange={(e) => setHeroImageCloudinaryUrl(e.target.value)}
+              sx={{ mb: 2, backgroundColor: "#fff", borderRadius: "5px" }}
+              placeholder="https://res.cloudinary.com/..."
+            />
+            <Button
+              variant="outlined"
+              color="primary"
+              fullWidth
+              sx={{ mb: 2 }}
+              onClick={async () => {
+                if (heroImageCloudinaryUrl.trim()) {
+                  setHeroImage(heroImageCloudinaryUrl.trim());
+                  await updateHomePageACF(13, {
+                    img_hero_url: heroImageCloudinaryUrl.trim(),
+                  });
+                  setSuccessMessage("✅ Image Cloudinary appliquée !");
+                }
+              }}
+            >
+              🌐 Utiliser l'image Cloudinary
+            </Button>
+
             <TextField
               label="Titre Héros"
               fullWidth
@@ -367,9 +400,7 @@ const GestionPageAccueil = () => {
             }}
           />
 
-          <Typography sx={{ mb: 1, fontWeight: "bold" }}>
+          <Typography sx={{ mb: 1, fontWeight: "bold" }}>Notes</Typography>
-            Notes
-          </Typography>
           <ReactQuill
             theme="snow"
             value={constructNote}
@@ -397,7 +428,7 @@ const GestionPageAccueil = () => {
               onChange={(e) => setexpertiseTitle(e.target.value)}
               sx={{ mb: 2 }}
             />
-            </Paper>
+          </Paper>
 
           <Paper elevation={3} sx={{ marginTop: "30px", padding: "20px" }}>
             <TextField

frontend/src/components/Pages/Home.jsx

@@ -5,10 +5,17 @@ import api from "../../api";
 import ModernSpinner from "../SpinnerModerne";
 import Expertises from "../Expertises";
 import ConstructSection from "../ConstructSection";
-import { Box, Grid, Typography, Button, Card, CardContent } from "@mui/material";
+import {
+  Box,
+  Grid,
+  Typography,
+  Button,
+  Card,
+  CardContent,
+} from "@mui/material";
 import Logo from "../../assets/centre-formation-logo.avif";
 import Testi from "../Testi";
-import '../../assets/style.css';
+import "../../assets/style.css";
 
 const Home = () => {
   const [pageData, setPageData] = useState(null);
@@ -23,14 +30,22 @@ const Home = () => {
         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&_=${new Date().getTime()}`
+        );
         const pageContent = response.data;
         setPageData(pageContent);
 
-        // Récupération de l'image Hero
+        // Récupération de l'image Hero (Cloudinary ou WordPress)
-        const heroImageId = pageContent.acf?.img_hero;
+        if (
-        if (heroImageId) {
+          pageContent.acf?.img_hero_url &&
-          const mediaResponse = await api.get(`wp/v2/media/${heroImageId}?_=${new Date().getTime()}`);
+          pageContent.acf.img_hero_url.startsWith("http")
+        ) {
+          setHeroImage(pageContent.acf.img_hero_url);
+        } else if (pageContent.acf?.img_hero) {
+          const mediaResponse = await api.get(
+            `wp/v2/media/${pageContent.acf.img_hero}?_=${new Date().getTime()}`
+          );
           setHeroImage(mediaResponse.data.source_url);
         } else {
           setHeroImage(null);
@@ -44,7 +59,7 @@ const Home = () => {
     };
 
     fetchPageData();
-}, []);
+  }, []);
 
   if (isLoading) {
     return (
@@ -64,8 +79,6 @@ const Home = () => {
     );
   }
 
-  
-
   const { acf, rank_math_title, rank_math_description } = pageData || {};
 
   return (
@@ -74,9 +87,15 @@ const Home = () => {
       <SEO
         postId={13} // ID WordPress valide
         defaultTitle={rank_math_title || "centre de formation "}
-        defaultDescription={rank_math_description || "formation et reconversion professionnelle dans les métiers du numérique"}
+        defaultDescription={
+          rank_math_description ||
+          "formation et reconversion professionnelle dans les métiers du numérique"
+        }
         defaultCanonicalUrl={acf?.canonical_url || window.location.href}
-        defaultOgImage={heroImage || "https://preprod.octopusdesign.fr/api-octopus/server/wp-content/uploads/2025/01/Construction-logements-au-Mans-01.avif"}
+        defaultOgImage={
+          heroImage ||
+          "https://preprod.octopusdesign.fr/api-octopus/server/wp-content/uploads/2025/01/Construction-logements-au-Mans-01.avif"
+        }
       />
 
       {/* Section Héros */}
@@ -91,7 +110,9 @@ const Home = () => {
 
       {/* Section Construisons */}
       <ConstructSection
-        constructTitle={acf?.gdc_construct?.construct_title || "Construisons vos projets"}
+        constructTitle={
+          acf?.gdc_construct?.construct_title || "Construisons vos projets"
+        }
         constructSubtitle={acf?.gdc_construct?.construct_subtitle || "ensemble"}
         constructText={acf?.gdc_construct?.construct_text || "Texte par défaut"}
         constructSector={acf?.gdc_construct?.construct_sector || "Secteurs"}
@@ -102,7 +123,9 @@ const Home = () => {
 
       {/* Section Expertises */}
       <Expertises
-        expertiseTitle={acf?.titre_expertise.titre_expertise || "Pourquoi Nous Choisir ?"}
+        expertiseTitle={
+          acf?.titre_expertise.titre_expertise || "Pourquoi Nous Choisir ?"
+        }
         expertise1Title={acf?.gdc_expert?.titre_expertise_1 || "Expertise 1"}
         expertise1Text={acf?.gdc_expert?.text_expertise_1 || "Text Expertise 1"}
         expertise2Title={acf?.gdc_expert?.titre_expertise_2 || "Expertise 2"}
@@ -111,16 +134,27 @@ const Home = () => {
         expertise3Text={acf?.gdc_expert?.text_expertise_3 || "Text Expertise 3"}
       />
 
-      
-
       {/* Section Témoignages */}
-      <Typography variant="h2" sx={{ fontWeight: "bold", mb: 2, textAlign: "center", fontSize: { xs: "2rem", md: "2rem", lg: "3rem" } }}>
+      <Typography
-          Ce que disent nos clients
+        variant="h2"
-        </Typography>
+        sx={{
+          fontWeight: "bold",
+          mb: 2,
+          textAlign: "center",
+          fontSize: { xs: "2rem", md: "2rem", lg: "3rem" },
+        }}
+      >
+        Ce que disent nos clients
+      </Typography>
       <Testi />
       {/* Section Action */}
       <Box sx={{ py: 6, px: 4, backgroundColor: "#0e467f", color: "#fff" }}>
-        <Typography variant="h2" align="center" gutterBottom sx={{ fontWeight: "bold", mb: 4 }}>
+        <Typography
+          variant="h2"
+          align="center"
+          gutterBottom
+          sx={{ fontWeight: "bold", mb: 4 }}
+        >
           Prêt à Commencer ?
         </Typography>
         <Box textAlign="center">
@@ -143,7 +177,15 @@ const Home = () => {
 
       {/* Section Témoignages */}
       <Box sx={{ py: 6, px: 4 }}>
-        <Typography variant="h2" sx={{ fontWeight: "bold", mb: 2, textAlign: "center", fontSize: { xs: "2rem", md: "2rem", lg: "3rem" } }}>
+        <Typography
+          variant="h2"
+          sx={{
+            fontWeight: "bold",
+            mb: 2,
+            textAlign: "center",
+            fontSize: { xs: "2rem", md: "2rem", lg: "3rem" },
+          }}
+        >
           Nos partenaires
         </Typography>
         <Grid container spacing={4}>
@@ -153,7 +195,10 @@ const Home = () => {
                 <Typography variant="body1" sx={{ fontStyle: "italic" }}>
                   Un service exceptionnel, une équipe formidable
                 </Typography>
-                <Typography variant="body2" sx={{ mt: 2, textAlign: "right", fontWeight: "bold" }}>
+                <Typography
+                  variant="body2"
+                  sx={{ mt: 2, textAlign: "right", fontWeight: "bold" }}
+                >
                   - zertides
                 </Typography>
               </CardContent>
@@ -165,7 +210,10 @@ const Home = () => {
                 <Typography variant="body1" sx={{ fontStyle: "italic" }}>
                   Des résultats impressionnants pour notre projet.
                 </Typography>
-                <Typography variant="body2" sx={{ mt: 2, textAlign: "right", fontWeight: "bold" }}>
+                <Typography
+                  variant="body2"
+                  sx={{ mt: 2, textAlign: "right", fontWeight: "bold" }}
+                >
                   - Client 2
                 </Typography>
               </CardContent>
@@ -177,4 +225,4 @@ const Home = () => {
   );
 };
 
-export default Home;
+export default Home;