sebvtl728
85 lines
2.3 KiB
React
85 lines
2.3 KiB
React
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,
|
|
},
|
|
}}
|
|
>
|
|
In3 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; |