install FAQ

frontend/src/components/Pages/Contact.jsx

@@ -36,6 +36,21 @@ const Contact = () => {
   const [successMessage, setSuccessMessage] = useState(false);
   const [openLightbox, setOpenLightbox] = useState(false);
 
+    // FAQ State
+    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);
+    }, []);
+
   useEffect(() => {
     const fetchSEOData = async () => {
       try {
@@ -73,6 +88,19 @@ 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();
@@ -338,7 +366,7 @@ const Contact = () => {
           Besoin d'une assistance immédiate ?
         </Typography>
         <Button
-          href="/aide"
+          onClick={handleToggleFAQ}
           variant="contained"
           sx={{
             textTransform: "none",
@@ -347,10 +375,63 @@ const Contact = () => {
             "&:hover": { backgroundColor: "#0288d1" },
           }}
         >
-          Obtenez de l'aide maintenant
+          {showFAQ ? "Masquer la FAQ" : "Obtenez de l'aide maintenant"}
         </Button>
       </Box>
 
+      {/* Section FAQ */}
+      {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
         sx={{