Remove ExpertiseSection component and styles; add FeatureCards component and associated styles to enhance the homepage with a new expertise showcase.

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

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

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

@@ -1,61 +0,0 @@
-import React from 'react';
-import { Carousel } from '@mantine/carousel';
-import { Container, Grid, Image, Stack, Text, Title } from '@mantine/core';
-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: _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;

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

@@ -0,0 +1,39 @@
+.title {
+    font-size: 34px;
+    font-weight: 900;
+  
+    @media (max-width: $mantine-breakpoint-sm) {
+      font-size: 24px;
+    }
+  }
+  
+  .description {
+    max-width: 600px;
+    margin: auto;
+  
+    &::after {
+      content: '';
+      display: block;
+      background-color: var(--mantine-color-blue-filled);
+      width: 45px;
+      height: 2px;
+      margin-top: var(--mantine-spacing-sm);
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+  
+  .card {
+    border: 1px solid light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
+  }
+  
+  .cardTitle {
+    &::after {
+      content: '';
+      display: block;
+      background-color: var(--mantine-color-blue-filled);
+      width: 45px;
+      height: 2px;
+      margin-top: var(--mantine-spacing-sm);
+    }
+  }

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

@@ -0,0 +1,72 @@
+import { FaCookieBite, FaGaugeHigh, FaUser } from 'react-icons/fa6';
+import {
+  Badge,
+  Card,
+  Container,
+  Group,
+  SimpleGrid,
+  Text,
+  Title,
+  useMantineTheme,
+} from '@mantine/core';
+import classes from "./FeatureCards.module.css";
+
+const mockdata = [
+  {
+    title: 'Computer Vision',
+    description:
+      'I have experience in building computer vision models for a range of applications, from object detection to image segmentation.',
+    icon: FaGaugeHigh,
+  },
+  {
+    title: 'Natural Language Processing',
+    description:
+      'I have experience in building natural language processing models for a range of applications, from sentiment analysis to text classification.',
+    icon: FaUser,
+  },
+  {
+    title: 'Data Science',
+    description:
+      "Sometimes you just need a simple model and some nice graphs. I can help you understand your data and build a model that works for you.",
+    icon: FaCookieBite,
+  },
+];
+
+export function FeaturesCards() {
+  const theme = useMantineTheme();
+  const features = mockdata.map((feature) => (
+    <Card key={feature.title} shadow="md" radius="md" className={classes.card} padding="xl">
+      <feature.icon size={50} color={theme.colors.blue[6]} />
+      <Text fz="lg" fw={500} className={classes.cardTitle} mt="md">
+        {feature.title}
+      </Text>
+      <Text fz="sm" c="dimmed" mt="sm">
+        {feature.description}
+      </Text>
+    </Card>
+  ));
+
+  return (
+    <Container size="lg" py="xl">
+      <Group justify="center">
+        <Badge variant="filled" size="lg">
+          My Expertise
+        </Badge>
+      </Group>
+
+      <Title order={2} className={classes.title} ta="center" mt="sm">
+        What can I bring to your business?
+      </Title>
+
+      <Text c="dimmed" className={classes.description} ta="center" mt="md">
+        I've worked with a range of businesses, from startups to established companies, and I've 
+        learned a lot about what works and what doesn't. I work across the full Machine Learning stack, from 
+        data collection to model deployment.
+      </Text>
+
+      <SimpleGrid cols={{ base: 1, md: 3 }} spacing="xl" mt="50px">
+        {features}
+      </SimpleGrid>
+    </Container>
+  );
+}

frontend/vite-template-master/src/pages/Home.page.tsx

@@ -1,31 +1,16 @@
 import { Container } from '@mantine/core';
-import openWebUIGif from '@/assets/open-webui.gif';
-import outputGif from '@/assets/output.gif';
 import { Contact } from '@/components/ContactUs/Contact';
-import ExpertiseSection from '@/components/ExpertiseSection/ExpertiseSection';
 import { HeaderSimple } from '@/components/HeaderSimple/HeaderSimple';
 import { HeroTitle } from '@/components/HeroTitle/HeroTitle';
 import Testimonial from '@/components/Testimonial/Testimonial';
+import { FeaturesCards } from '@/components/FeatureCards/FeatureCards';
 
 export function HomePage() {
   return (
     <>
       <HeaderSimple />
       <HeroTitle />
-      <ExpertiseSection
-        title="Computer Vision"
-        content="Expertise in developing and deploying computer vision models for various applications, including object detection, image classification, and more. Ask me about state-of-the-art real-time models for your business."
-        images={[{ url: outputGif, alt: 'Video Segmentation with SAM2.' }]}
-        viewMoreLink="/computer-vision"
-        imageOnLeft
-      />
-      <ExpertiseSection
-        title="Natural Language Processing"
-        content="Building NLP models for tasks such as sentiment analysis, text classification, and language generation. If you need a chatbot for your business and care about privacy, or a simple text classification algorithm to understand your data, I can help."
-        images={[{ url: openWebUIGif, alt: 'Locally hosted LLM using oLLama and OpenWebUI.' }]}
-        viewMoreLink="/nlp"
-        imageOnLeft={false}
-      />
+      <FeaturesCards />
       <Container mt={20}>
         <Testimonial />
       </Container>