253 lines
8.6 KiB
TypeScript
253 lines
8.6 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
Paper,
|
|
Box,
|
|
Container,
|
|
Grid,
|
|
Typography,
|
|
Link,
|
|
Divider,
|
|
IconButton,
|
|
Stack,
|
|
useMediaQuery,
|
|
} from '@mui/material';
|
|
import { styled, useTheme } from '@mui/material/styles';
|
|
import {
|
|
Facebook,
|
|
Twitter,
|
|
LinkedIn,
|
|
Instagram,
|
|
YouTube,
|
|
Email,
|
|
LocationOn,
|
|
Copyright,
|
|
} from '@mui/icons-material';
|
|
|
|
// Styled components
|
|
const FooterContainer = styled(Paper)(({ theme }) => ({
|
|
backgroundColor: theme.palette.primary.main,
|
|
color: theme.palette.primary.contrastText,
|
|
padding: theme.spacing(6, 0, 4),
|
|
marginTop: theme.spacing(4),
|
|
borderRadius: 0,
|
|
}));
|
|
|
|
const FooterLink = styled(Link)(({ theme }) => ({
|
|
color: theme.palette.primary.contrastText,
|
|
textDecoration: 'none',
|
|
'&:hover': {
|
|
textDecoration: 'underline',
|
|
color: theme.palette.action.active,
|
|
},
|
|
display: 'block',
|
|
marginBottom: theme.spacing(1),
|
|
}));
|
|
|
|
const FooterHeading = styled(Typography)(({ theme }) => ({
|
|
fontWeight: 600,
|
|
marginBottom: theme.spacing(2),
|
|
color: theme.palette.primary.contrastText,
|
|
}));
|
|
|
|
const ContactItem = styled(Box)(({ theme }) => ({
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
marginBottom: theme.spacing(1.5),
|
|
}));
|
|
|
|
// Footer component
|
|
const Footer = () => {
|
|
const theme = useTheme();
|
|
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
|
|
const currentYear = new Date().getFullYear();
|
|
|
|
return (
|
|
<FooterContainer elevation={0}>
|
|
<Container maxWidth="lg">
|
|
<Grid container spacing={4} justifyContent="space-between">
|
|
{/* About Company */}
|
|
<Grid size={{ xs: 12, md: 3 }}>
|
|
<Box mb={3}>
|
|
<Typography
|
|
variant="h6"
|
|
component="div"
|
|
sx={{
|
|
fontWeight: 700,
|
|
letterSpacing: '.2rem',
|
|
marginBottom: 2,
|
|
}}
|
|
>
|
|
BACKSTORY
|
|
</Typography>
|
|
<Typography variant="body2" sx={{ mb: 2 }}>
|
|
Helping candidates share their professional journey and connect with the right employers through compelling backstories.
|
|
</Typography>
|
|
<Stack direction="row">
|
|
<IconButton
|
|
size="small"
|
|
aria-label="Facebook"
|
|
sx={{
|
|
color: theme.palette.primary.contrastText,
|
|
mr: 1,
|
|
'&:hover': {
|
|
backgroundColor: 'rgba(211, 205, 191, 0.1)',
|
|
color: theme.palette.action.active,
|
|
}
|
|
}}
|
|
onClick={() => window.open('https://facebook.com/', '_blank')}
|
|
>
|
|
<Facebook />
|
|
</IconButton>
|
|
<IconButton
|
|
size="small"
|
|
aria-label="Twitter"
|
|
sx={{
|
|
color: theme.palette.primary.contrastText,
|
|
mr: 1,
|
|
'&:hover': {
|
|
backgroundColor: 'rgba(211, 205, 191, 0.1)',
|
|
color: theme.palette.action.active,
|
|
}
|
|
}}
|
|
onClick={() => window.open('https://twitter.com/', '_blank')}
|
|
>
|
|
<Twitter />
|
|
</IconButton>
|
|
<IconButton
|
|
size="small"
|
|
aria-label="LinkedIn"
|
|
sx={{
|
|
color: theme.palette.primary.contrastText,
|
|
mr: 1,
|
|
'&:hover': {
|
|
backgroundColor: 'rgba(211, 205, 191, 0.1)',
|
|
color: theme.palette.action.active,
|
|
}
|
|
}}
|
|
onClick={() => window.open('https://linkedin.com/', '_blank')}
|
|
>
|
|
<LinkedIn />
|
|
</IconButton>
|
|
<IconButton
|
|
size="small"
|
|
aria-label="Instagram"
|
|
sx={{
|
|
color: theme.palette.primary.contrastText,
|
|
mr: 1,
|
|
'&:hover': {
|
|
backgroundColor: 'rgba(211, 205, 191, 0.1)',
|
|
color: theme.palette.action.active,
|
|
}
|
|
}}
|
|
onClick={() => window.open('https://instagram.com/', '_blank')}
|
|
>
|
|
<Instagram />
|
|
</IconButton>
|
|
<IconButton
|
|
size="small"
|
|
aria-label="YouTube"
|
|
sx={{
|
|
color: theme.palette.primary.contrastText,
|
|
mr: 1,
|
|
'&:hover': {
|
|
backgroundColor: 'rgba(211, 205, 191, 0.1)',
|
|
color: theme.palette.action.active,
|
|
}
|
|
}}
|
|
onClick={() => window.open('https://youtube.com/', '_blank')}
|
|
>
|
|
<YouTube />
|
|
</IconButton>
|
|
</Stack>
|
|
</Box>
|
|
</Grid>
|
|
|
|
{/* Quick Links */}
|
|
<Grid size={{ xs: 12, sm: 6, md: 2 }}>
|
|
<FooterHeading variant="subtitle1">
|
|
For Candidates
|
|
</FooterHeading>
|
|
<FooterLink href="/create-profile">Create Profile</FooterLink>
|
|
<FooterLink href="/backstory-editor">Backstory Editor</FooterLink>
|
|
<FooterLink href="/resume-builder">Resume Builder</FooterLink>
|
|
<FooterLink href="/career-resources">Career Resources</FooterLink>
|
|
<FooterLink href="/interview-tips">Interview Tips</FooterLink>
|
|
</Grid>
|
|
|
|
{/* Quick Links */}
|
|
<Grid size={{ xs: 12, sm: 6, md: 2 }}>
|
|
<FooterHeading variant="subtitle1">
|
|
For Employers
|
|
</FooterHeading>
|
|
<FooterLink href="/post-job">Post a Job</FooterLink>
|
|
<FooterLink href="/search-candidates">Search Candidates</FooterLink>
|
|
<FooterLink href="/company-profile">Company Profile</FooterLink>
|
|
<FooterLink href="/recruiting-tools">Recruiting Tools</FooterLink>
|
|
<FooterLink href="/pricing-plans">Pricing Plans</FooterLink>
|
|
</Grid>
|
|
|
|
{/* Contact */}
|
|
<Grid size={{ xs: 12, sm: 6, md: 2 }}>
|
|
<FooterHeading variant="subtitle1">
|
|
Company
|
|
</FooterHeading>
|
|
<FooterLink href="/about-us">About Us</FooterLink>
|
|
<FooterLink href="/our-team">Our Team</FooterLink>
|
|
<FooterLink href="/blog">Blog</FooterLink>
|
|
<FooterLink href="/press">Press</FooterLink>
|
|
<FooterLink href="/careers">Careers</FooterLink>
|
|
<FooterLink href="/contact-us">Contact Us</FooterLink>
|
|
</Grid>
|
|
|
|
{/* Newsletter */}
|
|
<Grid size={{ xs: 12, sm: 6, md: 3 }}>
|
|
<ContactItem>
|
|
<Email sx={{ mr: 1, fontSize: 20 }} />
|
|
<FooterLink href="mailto:james_backstory@backstory.ketrenos.com">Email</FooterLink>
|
|
</ContactItem>
|
|
{/* <ContactItem>
|
|
<Phone sx={{ mr: 1, fontSize: 20 }} />
|
|
<FooterLink href="tel:+18005551234">+1 (800) 555-1234</FooterLink>
|
|
</ContactItem> */}
|
|
<ContactItem>
|
|
<LocationOn sx={{ mr: 1, fontSize: 20 }} />
|
|
<Typography variant="body2">
|
|
Beaverton, OR 97003
|
|
</Typography>
|
|
</ContactItem>
|
|
</Grid>
|
|
</Grid>
|
|
|
|
<Divider sx={{ my: 4, backgroundColor: 'rgba(211, 205, 191, 0.2)' }} />
|
|
|
|
{/* Bottom Footer */}
|
|
<Grid container spacing={2} alignItems="center">
|
|
<Grid size={{ xs: 12, md: 6 }}>
|
|
<Box display="flex" alignItems="center">
|
|
<Copyright sx={{ fontSize: 16, mr: 1 }} />
|
|
<Typography variant="body2">
|
|
{currentYear} James P. Ketrenos. All rights reserved.
|
|
</Typography>
|
|
</Box>
|
|
</Grid>
|
|
<Grid size={{ xs: 12, md: 6 }}>
|
|
<Stack
|
|
direction={isMobile ? 'column' : 'row'}
|
|
spacing={isMobile ? 1 : 3}
|
|
sx={{ textAlign: { xs: 'left', md: 'right' } }}
|
|
>
|
|
<FooterLink href="/terms" sx={{ mb: 0 }}>Terms of Service</FooterLink>
|
|
<FooterLink href="/privacy" sx={{ mb: 0 }}>Privacy Policy</FooterLink>
|
|
<FooterLink href="/accessibility" sx={{ mb: 0 }}>Accessibility</FooterLink>
|
|
<FooterLink href="/sitemap" sx={{ mb: 0 }}>Sitemap</FooterLink>
|
|
</Stack>
|
|
</Grid>
|
|
</Grid>
|
|
</Container>
|
|
</FooterContainer>
|
|
);
|
|
};
|
|
|
|
export {
|
|
Footer
|
|
}; |