MAJ accordeon auto page home

frontend/src/components/ConstructSection.jsx

@@ -39,9 +39,15 @@ const ConstructSection = ({
           // 2️⃣ Si localStorage est vide, récupérer les missions depuis WordPress
           const response = await api.get("wp/v2/pages/13?_fields=acf");
 
-          if (response.data.acf?.mission && Array.isArray(response.data.acf.mission)) {
+          if (
+            response.data.acf?.mission &&
+            Array.isArray(response.data.acf.mission)
+          ) {
             setMissions(response.data.acf.mission);
-            localStorage.setItem("missions", JSON.stringify(response.data.acf.mission)); // Sauvegarde en local
+            localStorage.setItem(
+              "missions",
+              JSON.stringify(response.data.acf.mission)
+            ); // Sauvegarde en local
             console.log("✅ Missions chargées depuis WordPress !");
           } else {
             // 3️⃣ Si aucune mission dans WordPress, utiliser des valeurs par défaut
@@ -52,7 +58,9 @@ const ConstructSection = ({
             ];
             setMissions(defaultMissions);
             localStorage.setItem("missions", JSON.stringify(defaultMissions));
-            console.log("⚠️ Aucune mission trouvée, valeurs par défaut utilisées !");
+            console.log(
+              "⚠️ Aucune mission trouvée, valeurs par défaut utilisées !"
+            );
           }
         }
       } catch (error) {
@@ -73,7 +81,8 @@ const ConstructSection = ({
   // ✅ Gestion des changements depuis d'autres onglets/navigateurs
   useEffect(() => {
     const handleStorageChange = () => {
-      const updatedMissions = JSON.parse(localStorage.getItem("missions")) || [];
+      const updatedMissions =
+        JSON.parse(localStorage.getItem("missions")) || [];
       setMissions(updatedMissions);
     };
 
@@ -95,22 +104,63 @@ const ConstructSection = ({
         {/* Left Column */}
         <Grid item xs={12} md={6}>
           <Box>
-            <Typography variant="h2" sx={{ fontWeight: "bold", fontSize: { xs: "2rem", md: "2.4rem", lg: "3rem" } }}>
+            <Typography
+              variant="h2"
+              sx={{
+                fontWeight: "bold",
+                fontSize: { xs: "2rem", md: "2.4rem", lg: "3rem" },
+              }}
+            >
               {constructTitle}{" "}
-              <Typography component="span" sx={{ fontSize: { xs: "2rem", md: "2rem", lg: "2rem" }, color: "#0e467f", fontWeight: "bold" }}>
+              <Typography
+                component="span"
+                sx={{
+                  fontSize: { xs: "2rem", md: "2rem", lg: "2rem" },
+                  color: "#0e467f",
+                  fontWeight: "bold",
+                }}
+              >
                 {constructSubtitle}
               </Typography>
             </Typography>
 
-            <Typography variant="body1" sx={{ mt: 2, fontWeight: "bold", color: "#0e467f" }}>
+            <Typography
+              variant="body1"
+              sx={{ mt: 2, fontWeight: "bold", color: "#0e467f" }}
+            >
               Secteurs : {constructSector}
             </Typography>
 
-            <Typography variant="body1" sx={{ mt: 2, fontSize: { xs: "1rem", md: "1.2rem" }, lineHeight: 1.6, color: "#666" }} dangerouslySetInnerHTML={{ __html: constructText }} />
+            <Typography
+              variant="body1"
+              sx={{
+                mt: 2,
+                fontSize: { xs: "1rem", md: "1.2rem" },
+                lineHeight: 1.6,
+                color: "#666",
+              }}
+              dangerouslySetInnerHTML={{ __html: constructText }}
+            />
 
-            <Card sx={{ mt: 4, backgroundColor: "#0e467f", color: "#fff", borderRadius: "12px", boxShadow: "0 8px 20px rgba(0, 0, 0, 0.1)" }}>
+            <Card
+              sx={{
+                mt: 4,
+                backgroundColor: "#0e467f",
+                color: "#fff",
+                borderRadius: "12px",
+                boxShadow: "0 8px 20px rgba(0, 0, 0, 0.1)",
+              }}
+            >
               <CardContent>
-                <Typography variant="body1" sx={{ fontSize: "1.1rem", lineHeight: 1.6, textAlign: "center" }} dangerouslySetInnerHTML={{ __html: constructNoteText }} />
+                <Typography
+                  variant="body1"
+                  sx={{
+                    fontSize: "1.1rem",
+                    lineHeight: 1.6,
+                    textAlign: "center",
+                  }}
+                  dangerouslySetInnerHTML={{ __html: constructNoteText }}
+                />
               </CardContent>
             </Card>
           </Box>
@@ -118,10 +168,29 @@ const ConstructSection = ({
 
         {/* Right Column */}
         <Grid item xs={12} md={6}>
-          <Box sx={{ backgroundColor: "#fff", padding: 3 }}>
+          <Box
+            sx={{
+              position: "relative",
+              height: "400px",
+              backgroundImage: `url('https://picsum.photos/id/52/600/400.webp')`, // Replace with the image URL or dynamic data
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+              padding: 3,
+              borderRadius: "15px",
+            }}
+          >
             {/* ✅ Correction de la duplication du titre */}
             {missionTitle && (
-              <Typography variant="h3" sx={{ fontWeight: "bold", textAlign: "center", mt: 3, mb: 2, color: "#0e467f" }}>
+              <Typography
+                variant="h3"
+                sx={{
+                  fontWeight: "bold",
+                  textAlign: "center",
+                  mt: 3,
+                  mb: 2,
+                  color: "#0e467f",
+                }}
+              >
                 {missionTitle}
               </Typography>
             )}
@@ -129,9 +198,21 @@ const ConstructSection = ({
             {/* ✅ Accordéon dynamique */}
             {missions.length > 0 ? (
               missions.map((mission, index) => (
-                <Accordion key={index} expanded={expanded === `panel${index}`} onChange={handleAccordionChange(`panel${index}`)}>
+                <Accordion
+                  key={index}
+                  expanded={expanded === `panel${index}`}
+                  onChange={handleAccordionChange(`panel${index}`)}
+                >
                   <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-                    <Typography variant="h6">{mission.title}</Typography>
+                    <Typography
+                      variant="h3"
+                      sx={{
+                        fontWeight: "bold",
+                        fontSize: { xs: "1rem", md: "1.2rem", lg: "1.5rem" },
+                      }}
+                    >
+                      {mission.title}
+                    </Typography>
                   </AccordionSummary>
                   <AccordionDetails>
                     <Typography>{mission.details}</Typography>
@@ -147,7 +228,22 @@ const ConstructSection = ({
             {/* Background Image et Items */}
             <Box sx={{ position: "relative", height: "auto", mt: 3 }}>
               {missionItems?.map((item, index) => (
-                <Box key={index} sx={{ position: "absolute", top: item.top, left: item.left, transform: "translate(-50%, -50%)", backgroundColor: "#0e467f", color: "#fff", padding: "6px 12px", borderRadius: "20px", fontSize: "0.9rem", fontWeight: "bold", textAlign: "center" }}>
+                <Box
+                  key={index}
+                  sx={{
+                    position: "absolute",
+                    top: item.top,
+                    left: item.left,
+                    transform: "translate(-50%, -50%)",
+                    backgroundColor: "#0e467f",
+                    color: "#fff",
+                    padding: "6px 12px",
+                    borderRadius: "20px",
+                    fontSize: "0.9rem",
+                    fontWeight: "bold",
+                    textAlign: "center",
+                  }}
+                >
                   {item.label}
                 </Box>
               ))}

frontend/src/components/Pages/GestionPageAccueil.jsx

@@ -85,24 +85,24 @@ const GestionPageAccueil = () => {
   }, []);
 
   // ✅ Mise à jour des champs ACF
-const handleSave = async () => {
-  try {
-    const newData = {
-      hero_title: heroTitle, // ✅ Enregistre le H1
-      hero_text: heroText,   // ✅ Enregistre le texte du Hero
-      mission: missions,     // ✅ Enregistre les missions
-    };
+  const handleSave = async () => {
+    try {
+      const newData = {
+        hero_title: heroTitle, // ✅ Enregistre le H1
+        hero_text: heroText, // ✅ Enregistre le texte du Hero
+        mission: missions, // ✅ Enregistre les missions
+      };
 
-    await updateHomePageACF(13, newData);
-    localStorage.setItem("missions", JSON.stringify(missions)); // ✅ Sauvegarde locale
+      await updateHomePageACF(13, newData);
+      localStorage.setItem("missions", JSON.stringify(missions)); // ✅ Sauvegarde locale
 
-    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.");
-  }
-};
+      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) => {
@@ -134,17 +134,17 @@ const handleSave = async () => {
   }, [missions]);
 
   // ✅ Fonction pour sauvegarder les missions dans WordPress
-const saveMissionsToWordPress = async (missions) => {
-  try {
-    const newData = { missions }; // Sauvegarde dans ACF
-    await updateHomePageACF(13, newData);
+  const saveMissionsToWordPress = async (missions) => {
+    try {
+      const newData = { missions }; // Sauvegarde dans ACF
+      await updateHomePageACF(13, newData);
 
-    localStorage.setItem("missions", JSON.stringify(missions)); // Sauvegarde locale
-    console.log("✅ Missions enregistrées dans WordPress et localStorage !");
-  } catch (error) {
-    console.error("❌ Erreur lors de l'enregistrement des missions :", error);
-  }
-};
+      localStorage.setItem("missions", JSON.stringify(missions)); // Sauvegarde locale
+      console.log("✅ Missions enregistrées dans WordPress et localStorage !");
+    } catch (error) {
+      console.error("❌ Erreur lors de l'enregistrement des missions :", error);
+    }
+  };
 
   // ✅ Ajouter une mission
   const addMission = () => {
@@ -263,41 +263,6 @@ const saveMissionsToWordPress = async (missions) => {
               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>
           </>
         )}
 
@@ -352,6 +317,42 @@ const saveMissionsToWordPress = async (missions) => {
             ➕ Ajouter une mission
           </Button>
         </Paper>
+        <Paper elevation={3} sx={{ marginTop: "30px", padding: "20px" }}>
+          {/* ✅ 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>
       </Paper>
     </Container>
   );