update contact & FAQ avec la creation d'un components
This commit is contained in:
sebvtl728
@@ -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);
|
||||
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." },
|
||||
];
|
||||
const [showFAQ, setShowFAQ] = useState(false); // État pour afficher/masquer la FAQ
|
||||
|
||||
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
|
||||
@@ -244,10 +228,10 @@ const Contact = () => {
|
||||
overflow: "hidden",
|
||||
boxShadow: 3,
|
||||
"&:hover": {
|
||||
transform: "scale(1.10)",
|
||||
boxShadow: 4,
|
||||
transition: "transform 0.3s, box-shadow 0.3s",
|
||||
},
|
||||
transform: "scale(1.10)",
|
||||
boxShadow: 4,
|
||||
transition: "transform 0.3s, box-shadow 0.3s",
|
||||
},
|
||||
"&:hover::before": {
|
||||
content: '"Cliquez pour agrandir"',
|
||||
position: "absolute",
|
||||
@@ -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'%C3%A9tudes%20Ing%C3%A9nieries%20Ma%C3%AEtrise%20d'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 && (
|
||||
<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>
|
||||
)}
|
||||
<Faq showFAQ={showFAQ} />
|
||||
|
||||
{/* 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>
|
||||
@@ -549,4 +490,4 @@ const Contact = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default Contact;
|
||||
export default Contact;
|
||||
|
||||
Reference in New Issue
Block a user