craig/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Craig
2025-04-16 12:14:17 +01:00
parent e06ec3d5df
commit 913c40b9ec
3 changed files with 49 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/vite-template-master/src/components/FooterSocial/FooterSocial.module.css Normal file
View File

@@ -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);
}
}

25
frontend/vite-template-master/src/components/FooterSocial/FooterSocial.tsx Normal file
View File

@@ -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>
);
}

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

@@ -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 />
</>
);
}