move ot mantine frontend

frontend/vite-template-master/src/components/Testimonial/Testimonial.tsx

@@ -0,0 +1,60 @@
+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;