update Home add Testi

frontend/src/components/Pages/Home.jsx

@@ -5,8 +5,9 @@ import api from "../../api";
 import ModernSpinner from "../SpinnerModerne";
 import Expertises from "../Expertises";
 import ConstructSection from "../ConstructSection";
-import { Box, Grid, Typography, Button, Card, CardContent } from "@mui/material";
+import { Box, Grid, Typography, Button, Card, CardContent, Avatar } from "@mui/material";
 import Logo from "../../assets/logo-in3-mobil.svg";
+import Testi from "../Testi";
 
 const Home = () => {
   const [pageData, setPageData] = useState(null);
@@ -61,6 +62,8 @@ const Home = () => {
     );
   }
 
+  
+
   const { acf, rank_math_title, rank_math_description } = pageData || {};
 
   return (
@@ -106,6 +109,8 @@ const Home = () => {
         expertise3Text={acf?.gdc_expert?.text_expertise_3 || "Text Expertise 3"}
       />
 
+      
+
       {/* Section Témoignages */}
       <Box sx={{ py: 6, px: 4 }}>
         <Typography variant="h2" sx={{ fontWeight: "bold", mb: 2, textAlign: "center", fontSize: { xs: "2rem", md: "2rem", lg: "3rem" } }}>
@@ -161,6 +166,7 @@ const Home = () => {
           </Button>
         </Box>
       </Box>
+      <Testi />
     </div>
   );
 };

frontend/src/components/Testi.jsx

@@ -0,0 +1,85 @@
+import React from "react";
+import { Box, Typography, Grid, Avatar } from "@mui/material";
+
+const TestimonialSection = () => {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "50px 20px",
+      }}
+    >
+
+        {/* Image à gauche */}
+        <Grid item xs={12} md={6}>
+          <Box
+            component="img"
+            src="https://picsum.photos/600/600.webp"
+            alt="Illustration"
+            sx={{
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              borderRadius: { xs: "15px 15px 0 0", md: "15px 0 0 15px" },
+            }}
+          />
+        </Grid>
+
+        {/* Contenu Témoignage */}
+        <Grid
+          item
+          xs={12}
+          md={6}
+          sx={{
+            background: "linear-gradient(to right, #002F6C, #0E467F)",
+            color: "white",
+            padding: "40px",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+          }}
+        >
+          <Typography
+            variant="h4"
+            sx={{
+              fontWeight: "bold",
+              mb: 2,
+              fontStyle: "italic",
+              position: "relative",
+              "&::before": {
+                content: '"“"',
+                fontSize: "50px",
+                position: "absolute",
+                top: "-10px",
+                left: "-5px",
+                opacity: 0.3,
+              },
+            }}
+          >
+            Innovatech a transformé notre vision en réalité avec une approche
+            passionnée et professionnelle.
+          </Typography>
+
+          <Box sx={{ display: "flex", alignItems: "center", mt: 3 }}>
+            <Avatar
+              alt="Marie Dupont"
+              src="https://picsum.photos/100.webp"
+              sx={{ width: 56, height: 56, marginRight: 2 }}
+            />
+            <Box>
+              <Typography variant="h6" sx={{ fontWeight: "bold" }}>
+                Marie Dupont
+              </Typography>
+              <Typography variant="body2">
+                Directrice Créative chez TechVision
+              </Typography>
+            </Box>
+          </Box>
+        </Grid>
+    </Box>
+  );
+};
+
+export default TestimonialSection;