move ot mantine frontend

frontend/vite-template-master/src/components/ExpertiseSection/ExpertiseSection.module.css

@@ -0,0 +1,3 @@
+.section {
+    margin-top: 80px;
+}

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Button, Text, Title, Container, Stack, Grid, Image, Center } from '@mantine/core';
+import { Carousel } from '@mantine/carousel';
+import classes from './ExpertiseSection.module.css';
+
+interface ExpertiseSectionProps {
+  title: string;
+  content: string;
+  images: { url: string; alt: string }[];
+  viewMoreLink: string;
+  imageOnLeft?: boolean;
+}
+
+const ExpertiseSection: React.FC<ExpertiseSectionProps> = ({
+  title,
+  content,
+  images,
+  viewMoreLink,
+  imageOnLeft = false,
+}) => {
+  const slides = images.map((image) => (
+    <Carousel.Slide key={image.url}>
+      <Image src={image.url} alt={image.alt} style={{ width: '100%', height: 'auto', objectFit: 'cover' }} />
+    </Carousel.Slide>
+  ));
+
+  return (
+    <Container>
+      <Grid className={classes.section}>
+        <Grid.Col order={imageOnLeft ? 2:1} span={{xs: 6, md: 8}} >
+          <Stack>
+            <Title>{title}</Title>
+            <Text size="lg">{content}</Text>
+            {/* <Button component="a" href={viewMoreLink}>
+                View More
+                </Button> */}
+          </Stack>
+        </Grid.Col>
+        <Grid.Col order={imageOnLeft ? 1:2} span={{xs: 6, md: 4}}>
+          <Carousel slideSize={300} align="start" slideGap="md" controlsOffset="xl" controlSize={28} loop withIndicators>
+            {slides}
+          </Carousel>
+        </Grid.Col>
+      </Grid>
+    </Container>
+  );
+};
+
+export default ExpertiseSection;