Add FooterSocial component: implement social media links with responsive styling for enhanced footer experience.

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

@@ -0,0 +1,22 @@
+.footer {
+    margin-top: 120px;
+    border-top: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+  }
+  
+  .inner {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: var(--mantine-spacing-xl);
+    padding-bottom: var(--mantine-spacing-xl);
+  
+    @media (max-width: $mantine-breakpoint-xs) {
+      flex-direction: column;
+    }
+  }
+  
+  .links {
+    @media (max-width: $mantine-breakpoint-xs) {
+      margin-top: var(--mantine-spacing-md);
+    }
+  }

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

@@ -0,0 +1,25 @@
+import { FaGithub, FaLinkedin } from 'react-icons/fa';
+import { SiGitea } from 'react-icons/si';
+import { ActionIcon, Container, Group, Text } from '@mantine/core';
+import classes from './FooterSocial.module.css';
+
+export function FooterSocial() {
+  return (
+    <div className={classes.footer}>
+      <Container className={classes.inner}>
+        <Text>Craig Macfadyen</Text>
+        <Group gap={0} className={classes.links} justify="flex-end" wrap="nowrap">
+          <ActionIcon component="a" target='_blank' href="https://github.com/cdmacfadyen" size="lg" color="gray" variant="subtle">
+            <FaGithub size={18} />
+          </ActionIcon>
+          <ActionIcon component="a" target='_blank' href="https://gitea.craigmacfadyen.co.uk" size="lg" color="gray" variant="subtle">
+            <SiGitea size={18} />
+          </ActionIcon>
+          <ActionIcon component="a" target='_blank' href="https://www.linkedin.com/in/craig-macfadyen-9a2041197/" size="lg" color="gray" variant="subtle">
+            <FaLinkedin size={18} />
+          </ActionIcon>
+        </Group>
+      </Container>
+    </div>
+  );
+}

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

@@ -4,6 +4,7 @@ import { HeaderSimple } from '@/components/HeaderSimple/HeaderSimple';
 import { HeroTitle } from '@/components/HeroTitle/HeroTitle';
 import Testimonial from '@/components/Testimonial/Testimonial';
 import { FeaturesCards } from '@/components/FeatureCards/FeatureCards';
+import { FooterSocial } from '@/components/FooterSocial/FooterSocial';
 
 export function HomePage() {
   return (
@@ -15,6 +16,7 @@ export function HomePage() {
         <Testimonial />
       </Container>
       <Contact />
+      <FooterSocial />
     </>
   );
 }