update contact & FAQ avec la creation d'un components

frontend/src/components/Faq.jsx

@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from "react";
+import { Box, TextField, Typography, Collapse } from "@mui/material";
+
+const Faq = ({ showFAQ }) => {
+  const [faqSearch, setFaqSearch] = useState("");
+  const [filteredFaqs, setFilteredFaqs] = useState([]);
+
+  const faqs = [
+    {
+      question: "Comment contacter notre service client ?",
+      answer:
+        "Vous pouvez nous appeler au +33 1 23 45 67 89 ou nous écrire via le formulaire de contact.",
+    },
+    {
+      question: "Quels sont vos horaires d'ouverture ?",
+      answer: "Nous sommes ouverts du lundi au vendredi de 9h00 à 18h00.",
+    },
+    {
+      question: "Où êtes-vous situés ?",
+      answer: "Notre adresse est 123 Rue Exemple, Paris, France.",
+    },
+    {
+      question: "Proposez-vous des services personnalisés ?",
+      answer: "Oui, contactez-nous pour discuter de vos besoins spécifiques.",
+    },
+  ];
+
+  useEffect(() => {
+    setFilteredFaqs(faqs);
+  }, []);
+
+  const handleSearch = (e) => {
+    const searchTerm = e.target.value.toLowerCase();
+    setFaqSearch(searchTerm);
+
+    const filtered = faqs.filter((faq) =>
+      faq.question.toLowerCase().includes(searchTerm)
+    );
+    setFilteredFaqs(filtered);
+  };
+
+  return (
+    <Collapse in={showFAQ}>
+      <Box
+        sx={{
+          padding: "40px 20px",
+          backgroundColor: "#f9f9f9",
+          borderRadius: 2,
+          boxShadow: 2,
+          mt: 4,
+        }}
+      >
+        <Typography
+          variant="h4"
+          sx={{
+            fontWeight: "bold",
+            mb: 4,
+            textAlign: "center",
+            color: "#0e467f",
+          }}
+        >
+          FAQ
+        </Typography>
+
+        {/* Barre de recherche */}
+        <TextField
+          placeholder="Rechercher dans la FAQ..."
+          fullWidth
+          variant="outlined"
+          value={faqSearch}
+          onChange={handleSearch}
+          sx={{
+            mb: 4,
+          }}
+        />
+
+        {/* Liste des FAQs */}
+        <Box>
+          {filteredFaqs.length > 0 ? (
+            filteredFaqs.map((faq, index) => (
+              <Box key={index} sx={{ mb: 3 }}>
+                <Typography variant="h6" sx={{ fontWeight: "bold" }}>
+                  {faq.question}
+                </Typography>
+                <Typography variant="body1" sx={{ color: "#666" }}>
+                  {faq.answer}
+                </Typography>
+              </Box>
+            ))
+          ) : (
+            <Typography
+              variant="body1"
+              sx={{ color: "#999", textAlign: "center" }}
+            >
+              Aucun résultat trouvé.
+            </Typography>
+          )}
+        </Box>
+      </Box>
+    </Collapse>
+  );
+};
+
+export default Faq;

frontend/src/components/Pages/Contact.jsx

@@ -18,6 +18,7 @@ import {
 } from "@mui/material";
 import SEO from "../SEO";
 import api from "../../api";
+import Faq from "../Faq";
 
 const Contact = () => {
   const [metaTitle, setMetaTitle] = useState("Contactez-nous");
@@ -36,20 +37,12 @@ const Contact = () => {
   const [successMessage, setSuccessMessage] = useState(false);
   const [openLightbox, setOpenLightbox] = useState(false);
 
-    // FAQ State
+  const [showFAQ, setShowFAQ] = useState(false); // État pour afficher/masquer la FAQ
-    const [showFAQ, setShowFAQ] = useState(false);
-    const [faqSearch, setFaqSearch] = useState("");
-    const [filteredFaqs, setFilteredFaqs] = useState([]);
-    const faqs = [
-      { question: "Comment contacter notre service client ?", answer: "Vous pouvez nous appeler au +33 1 23 45 67 89 ou nous écrire via le formulaire de contact." },
-      { question: "Quels sont vos horaires d'ouverture ?", answer: "Nous sommes ouverts du lundi au vendredi de 9h00 à 18h00." },
-      { question: "Où êtes-vous situés ?", answer: "Notre adresse est 123 Rue Exemple, Paris, France." },
-      { question: "Proposez-vous des services personnalisés ?", answer: "Oui, contactez-nous pour discuter de vos besoins spécifiques." },
-    ];
 
-    useEffect(() => {
+
-      setFilteredFaqs(faqs);
+  const handleToggleFAQ = () => {
-    }, []);
+    setShowFAQ((prev) => !prev);
+  };
 
   useEffect(() => {
     const fetchSEOData = async () => {
@@ -61,7 +54,10 @@ const Contact = () => {
         setMetaTitle(rank_math_title || "Contactez-nous");
         setMetaDescription(rank_math_description || "Contactez notre équipe.");
       } catch (error) {
-        console.error("Erreur lors de la récupération des données SEO :", error);
+        console.error(
+          "Erreur lors de la récupération des données SEO :",
+          error
+        );
       }
     };
 
@@ -76,7 +72,8 @@ const Contact = () => {
     if (!formData.subject) newErrors.subject = "Le sujet est requis.";
     if (!formData.message) newErrors.message = "Le message est requis.";
     if (!formData.consent)
-      newErrors.consent = "Vous devez accepter la politique de confidentialité.";
+      newErrors.consent =
+        "Vous devez accepter la politique de confidentialité.";
     return newErrors;
   };
 
@@ -88,19 +85,6 @@ const Contact = () => {
     });
   };
 
-  const handleSearch = (e) => {
-    const searchTerm = e.target.value.toLowerCase();
-    setFaqSearch(searchTerm);
-    const filtered = faqs.filter((faq) =>
-      faq.question.toLowerCase().includes(searchTerm)
-    );
-    setFilteredFaqs(filtered);
-  };
-
-  const handleToggleFAQ = () => {
-    setShowFAQ((prev) => !prev);
-  };
-
   const handleSubmit = async (e) => {
     e.preventDefault();
     const validationErrors = validate();
@@ -209,7 +193,6 @@ const Contact = () => {
                 justifyContent: "space-between",
                 alignItems: "center",
                 height: "80%",
-                
               }}
             >
               <Box>
@@ -224,13 +207,14 @@ const Contact = () => {
                   Nos coordonnées
                 </Typography>
                 <Typography variant="body1">
-                  <strong>Adresse :</strong> 123 Rue Exemple, Paris, France
+                  <strong>Adresse :</strong>67 Bd Winston Churchill, Le Mans,
+                  France
                 </Typography>
                 <Typography variant="body1">
-                  <strong>Téléphone :</strong> +33 1 23 45 67 89
+                  <strong>Téléphone :</strong> 02.43.85.09.01
                 </Typography>
                 <Typography variant="body1">
-                  <strong>Email :</strong> contact@exemple.com
+                  <strong>Email :</strong> contact@be-in3.com
                 </Typography>
               </Box>
               <Box
@@ -266,7 +250,6 @@ const Contact = () => {
                   src="https://picsum.photos/id/442/300.webp"
                   alt="Carte"
                   style={{ width: "100%", height: "100%", objectFit: "cover" }}
-                  
                 />
               </Box>
             </Card>
@@ -290,19 +273,22 @@ const Contact = () => {
                     fontWeight: "bold",
                     color: "#0e467f",
                     mb: 2,
-                    textAlign: "center",
+                    textAlign: "left",
                   }}
                 >
                   Horaires d'ouverture
                 </Typography>
                 <Typography variant="body1">
-                  <strong>Lundi - Vendredi :</strong> 9h00 - 18h00
+                  <strong>Lundi - Mardi :</strong> 9h00 - 16h00
                 </Typography>
                 <Typography variant="body1">
-                  <strong>Samedi :</strong> 10h00 - 14h00
+                  <strong>Mercredi :</strong> 09h00 - 12h00
                 </Typography>
                 <Typography variant="body1">
-                  <strong>Dimanche :</strong> Fermé
+                  <strong>Jeudi - Vendredi :</strong> 09h00 - 17h00
+                </Typography>
+                <Typography variant="body1">
+                  <strong>Samedi - Dimanche :</strong> Fermé
                 </Typography>
               </CardContent>
             </Card>
@@ -334,7 +320,7 @@ const Contact = () => {
             }}
           >
             <iframe
-              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.9998319324044!2d2.2922928156738935!3d48.85884407928788!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66fdf78ccf6fd%3A0x10793db0b6d65f9b!2sEiffel+Tower!5e0!3m2!1sen!2sfr!4v1618237600000!5m2!1sen!2sfr"
+              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2670.1862696285393!2d0.22040227623964043!3d47.990787261369235!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e28ec5f984044d%3A0xa3a21789f4a4eaa6!2sIN3%20Int%C3%A9grale%20Ing%C3%A9nierie%20Internationale%20Bureau%20D&#39;%C3%A9tudes%20Ing%C3%A9nieries%20Ma%C3%AEtrise%20d&#39;oeuvre!5e0!3m2!1sfr!2sfr!4v1736328111099!5m2!1sfr!2sfr%22%20width=%22600%22%20height=%22450%22%20style=%22border:0;%22%20allowfullscreen=%22%22%20loading=%22lazy%22%20referrerpolicy=%22no-referrer-when-downgrade%22"
               width="100%"
               height="400"
               title="Carte interactive"
@@ -375,62 +361,12 @@ const Contact = () => {
             "&:hover": { backgroundColor: "#0288d1" },
           }}
         >
-          {showFAQ ? "Masquer la FAQ" : "Obtenez de l'aide maintenant"}
+          {showFAQ ? "Masquer la FAQ" : "Afficher la FAQ"}
         </Button>
       </Box>
 
       {/* Section FAQ */}
-      {showFAQ && (
+      <Faq showFAQ={showFAQ} />
-        <Box
-          sx={{
-            padding: "40px 20px",
-            backgroundColor: "#f9f9f9",
-            borderRadius: 2,
-            boxShadow: 2,
-            mt: 4,
-          }}
-        >
-          <Typography
-            variant="h4"
-            sx={{
-              fontWeight: "bold",
-              mb: 4,
-              textAlign: "center",
-              color: "#0e467f",
-            }}
-          >
-            FAQ
-          </Typography>
-          <TextField
-            placeholder="Rechercher dans la FAQ..."
-            fullWidth
-            variant="outlined"
-            value={faqSearch}
-            onChange={handleSearch}
-            sx={{
-              mb: 4,
-            }}
-          />
-          <Box>
-            {filteredFaqs.length > 0 ? (
-              filteredFaqs.map((faq, index) => (
-                <Box key={index} sx={{ mb: 3 }}>
-                  <Typography variant="h6" sx={{ fontWeight: "bold" }}>
-                    {faq.question}
-                  </Typography>
-                  <Typography variant="body1" sx={{ color: "#666" }}>
-                    {faq.answer}
-                  </Typography>
-                </Box>
-              ))
-            ) : (
-              <Typography variant="body1" sx={{ color: "#999", textAlign: "center" }}>
-                Aucun résultat trouvé.
-              </Typography>
-            )}
-          </Box>
-        </Box>
-      )}
 
       {/* Formulaire de contact */}
       <Box
@@ -446,7 +382,12 @@ const Contact = () => {
       >
         <Typography
           variant="h4"
-          sx={{ mb: 4, textAlign: "center", fontWeight: "bold", color: "#0e467f" }}
+          sx={{
+            mb: 4,
+            textAlign: "center",
+            fontWeight: "bold",
+            color: "#0e467f",
+          }}
         >
           Formulaire de contact
         </Typography>