MAJ systel lazyload

frontend/src/components/Faq.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import { Box, TextField, Typography, Collapse, CircularProgress } from "@mui/material";
 import axios from "axios";
 
+
 const Faq = ({ showFAQ }) => {
   const [faqSearch, setFaqSearch] = useState("");
   const [filteredFaqs, setFilteredFaqs] = useState([]);

frontend/src/components/Pages/Contact.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, lazy, Suspense } from "react";
 import {
   Box,
   TextField,
@@ -19,6 +19,7 @@ import {
 import SEO from "../SEO";
 import api from "../../api";
 import Faq from "../Faq";
+const FAQ = lazy(() => import('../Faq'));
 
 const Contact = () => {
   const [metaTitle, setMetaTitle] = useState("Contactez-nous");
@@ -158,6 +159,7 @@ const Contact = () => {
           <Typography
             variant="h1"
             sx={{
+              color: "#000",
               fontWeight: "bold",
               fontSize: { xs: "2rem", md: "3rem", lg: "4rem" },
               mb: 2,
@@ -168,6 +170,7 @@ const Contact = () => {
           <Typography
             variant="body2"
             sx={{
+              color: "#000",
               fontSize: { xs: "1rem", md: "1rem" },
               maxWidth: "600px",
               mx: "auto",
@@ -376,8 +379,9 @@ const Contact = () => {
       </Box>
 
       {/* Section FAQ */}
+      <Suspense fallback={<div>Chargement...</div>}>
       <Faq showFAQ={showFAQ} />
-
+      </Suspense>
       {/* Formulaire de contact */}
       <Box
         sx={{