60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
import { Carousel } from '@mantine/carousel';
|
|
import { Card, Text, Avatar, Group, Stack, Title } from '@mantine/core';
|
|
import Autoplay from 'embla-carousel-autoplay';
|
|
import styles from './Testimonial.module.css';
|
|
|
|
const testimonials = [
|
|
{
|
|
text: "What set Craig apart was his ability to understand our business challenges and deliver a solution that worked for us. He didn't just build a model, he delivered a system our team could actually use.",
|
|
clientName: "Steven Adair",
|
|
role: "Director",
|
|
business: "Managing Utilities Limited",
|
|
},
|
|
];
|
|
|
|
|
|
|
|
function TestimonialsCarousel() {
|
|
const autoplay = Autoplay();
|
|
|
|
return (
|
|
<>
|
|
<Title align="center" mb="xl">
|
|
Testimonials
|
|
</Title>
|
|
<Carousel
|
|
slideSize={'100%'}
|
|
slideGap="md"
|
|
loop
|
|
align="start"
|
|
plugins={[autoplay]}
|
|
onMouseEnter={autoplay.stop}
|
|
onMouseLeave={autoplay.reset}
|
|
withControls
|
|
>
|
|
{testimonials.map((testimonial, index) => (
|
|
<Carousel.Slide key={index}>
|
|
<Card shadow="sm" padding="lg" radius="md" withBorder className={styles.card}>
|
|
<Stack gap="sm">
|
|
<Text size="lg">{testimonial.text}</Text>
|
|
<Group gap="sm">
|
|
<Avatar radius="xl">
|
|
{testimonial.clientName.charAt(0)}
|
|
</Avatar>
|
|
<div>
|
|
<Text size="lg" fw={700}>{testimonial.clientName}</Text>
|
|
<Text size="sm" c="dimmed">
|
|
{testimonial.role}, {testimonial.business}
|
|
</Text>
|
|
</div>
|
|
</Group>
|
|
</Stack>
|
|
</Card>
|
|
</Carousel.Slide>
|
|
))}
|
|
</Carousel>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default TestimonialsCarousel; |