101 lines
3.1 KiB
TypeScript
101 lines
3.1 KiB
TypeScript
import {
|
||
Avatar,
|
||
Box,
|
||
Card,
|
||
CardContent,
|
||
Grid,
|
||
Typography,
|
||
} from "@mui/material";
|
||
import testimonialImg from "../testomonials/b7bef0298c881712fbc6437106d2aaef27c4fad8.jpg";
|
||
|
||
const testimonials = [
|
||
{
|
||
name: "Name",
|
||
role: "Role",
|
||
company: "Company Name & Logo",
|
||
feedback:
|
||
"Lorem ipsum dolor sit amet consectetur. Vitae dictum quam senectus posuere sit justo est turpis interdum. Ut vitae platea et adipiscing nisl.",
|
||
rating: 5,
|
||
},
|
||
{
|
||
name: "John Dae",
|
||
role: "Sr Manager",
|
||
company: "Wells Fargo",
|
||
feedback:
|
||
"Lorem ipsum dolor sit amet consectetur. Vitae dictum quam senectus posuere sit justo est turpis interdum. Ut vitae platea et adipiscing nisl.",
|
||
rating: 5,
|
||
},
|
||
{
|
||
name: "Name",
|
||
role: "Role",
|
||
company: "Company Name & Logo",
|
||
feedback:
|
||
"Lorem ipsum dolor sit amet consectetur. Vitae dictum quam senectus posuere sit justo est turpis interdum. Ut vitae platea et adipiscing nisl.",
|
||
rating: 4,
|
||
},
|
||
];
|
||
|
||
const Testimonials = () => {
|
||
return (
|
||
<Box sx={{ backgroundColor: "#1d2733", color: "#fff", py: 10, px: 3 }}>
|
||
<Box textAlign="center" mb={6}>
|
||
<Typography variant="h4" fontWeight="bold" gutterBottom>
|
||
Testimonials
|
||
</Typography>
|
||
<Typography variant="subtitle1">
|
||
Don’t just take our word for it -- hear directly from our clients
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Grid container spacing={4} justifyContent="center">
|
||
{testimonials.map((t, idx) => (
|
||
<Grid item xs={12} sm={6} md={4} key={idx}>
|
||
<Card
|
||
sx={{
|
||
borderRadius: 3,
|
||
maxWidth: 320,
|
||
margin: "0 auto",
|
||
textAlign: "center",
|
||
py: 3,
|
||
}}
|
||
>
|
||
<Avatar
|
||
src={testimonialImg}
|
||
alt={t.name}
|
||
sx={{ width: 100, height: 100, margin: "0 auto", mb: 2 }}
|
||
/>
|
||
<CardContent>
|
||
<Typography variant="subtitle1" fontWeight="bold">
|
||
{t.name} ,{" "}
|
||
<span style={{ fontWeight: "normal" }}>{t.role}</span>
|
||
</Typography>
|
||
<Typography variant="body2" color="text.secondary" mb={1}>
|
||
{t.company}
|
||
</Typography>
|
||
<Typography variant="body2" color="text.secondary" mb={2}>
|
||
{t.feedback}
|
||
</Typography>
|
||
<Box>
|
||
{Array.from({ length: 5 }).map((_, i) => (
|
||
<span
|
||
key={i}
|
||
style={{
|
||
color: i < t.rating ? "#00FFD1" : "#ccc",
|
||
fontSize: "1.2rem",
|
||
}}
|
||
>
|
||
★
|
||
</span>
|
||
))}
|
||
</Box>
|
||
</CardContent>
|
||
</Card>
|
||
</Grid>
|
||
))}
|
||
</Grid>
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
export default Testimonials;
|