538 lines
17 KiB
TypeScript
538 lines
17 KiB
TypeScript
import React from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import {
|
|
Box,
|
|
Button,
|
|
ButtonProps,
|
|
Container,
|
|
Paper,
|
|
Typography,
|
|
Stack,
|
|
Card,
|
|
CardContent,
|
|
CardActions,
|
|
} from '@mui/material';
|
|
import { styled } from '@mui/material/styles';
|
|
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
|
|
import PersonSearchIcon from '@mui/icons-material/PersonSearch';
|
|
import WorkHistoryIcon from '@mui/icons-material/WorkHistory';
|
|
import QuestionAnswerIcon from '@mui/icons-material/QuestionAnswer';
|
|
import DescriptionIcon from '@mui/icons-material/Description';
|
|
import professionalConversationPng from './Conversation.png';
|
|
import { ComingSoon } from 'components/ui/ComingSoon';
|
|
|
|
// Placeholder for Testimonials component
|
|
const Testimonials = () => {
|
|
return (
|
|
<Paper elevation={0} sx={{ p: 2, my: 4 }}>
|
|
Testimonials Component (Quotes, Success Stories)
|
|
</Paper>
|
|
);
|
|
};
|
|
|
|
// Styled components
|
|
const HeroSection = styled(Box)(({ theme }) => ({
|
|
padding: theme.spacing(8, 0),
|
|
backgroundColor: theme.palette.primary.main,
|
|
color: theme.palette.primary.contrastText,
|
|
[theme.breakpoints.down('md')]: {
|
|
padding: theme.spacing(6, 0),
|
|
},
|
|
}));
|
|
|
|
interface HeroButtonProps extends ButtonProps {
|
|
children?: string;
|
|
}
|
|
const HeroButton = (props: HeroButtonProps) => {
|
|
const { children, onClick, ...rest } = props;
|
|
|
|
const navigate = useNavigate();
|
|
|
|
const handleClick = () => {
|
|
const path = children?.replace(/ /g, '-').toLocaleLowerCase() || '/';
|
|
navigate(path);
|
|
};
|
|
|
|
const HeroStyledButton = styled(Button)(({ theme }) => ({
|
|
marginTop: theme.spacing(2),
|
|
padding: theme.spacing(1, 3),
|
|
fontWeight: 500,
|
|
backgroundColor: theme.palette.action.active,
|
|
color: theme.palette.background.paper,
|
|
'&:hover': {
|
|
backgroundColor: theme.palette.action.active,
|
|
opacity: 0.9,
|
|
},
|
|
}));
|
|
return <HeroStyledButton onClick={onClick ? onClick : handleClick} {...rest}>
|
|
{children}
|
|
</HeroStyledButton>
|
|
}
|
|
|
|
|
|
interface ActionButtonProps extends ButtonProps {
|
|
children?: string;
|
|
}
|
|
const ActionButton = (props: ActionButtonProps) => {
|
|
const { children, onClick, ...rest } = props;
|
|
|
|
const navigate = useNavigate();
|
|
|
|
const handleClick = () => {
|
|
const path = children?.replace(/ /g, '-').toLocaleLowerCase() || '/';
|
|
navigate(path);
|
|
};
|
|
|
|
return <Button onClick={onClick ? onClick : handleClick} {...rest}>
|
|
{children}
|
|
</Button>
|
|
}
|
|
|
|
const FeatureIcon = styled(Box)(({ theme }) => ({
|
|
backgroundColor: theme.palette.action.active,
|
|
color: theme.palette.background.paper,
|
|
borderRadius: '50%',
|
|
padding: theme.spacing(2),
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
marginBottom: theme.spacing(2),
|
|
width: 64,
|
|
height: 64,
|
|
}));
|
|
|
|
// Feature Card Component
|
|
const FeatureCard = ({
|
|
icon,
|
|
title,
|
|
description
|
|
}: {
|
|
icon: React.ReactNode;
|
|
title: string;
|
|
description: string;
|
|
}) => {
|
|
return (
|
|
<Card sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
|
|
<CardContent sx={{ flexGrow: 1 }}>
|
|
<Box display="flex" justifyContent="center" mb={2}>
|
|
{icon}
|
|
</Box>
|
|
<Typography variant="h5" component="h3" gutterBottom align="center">
|
|
{title}
|
|
</Typography>
|
|
<Typography variant="body1" color="text.secondary">
|
|
{description}
|
|
</Typography>
|
|
</CardContent>
|
|
<CardActions sx={{ justifyContent: 'center', pb: 2 }}>
|
|
<Button size="small" endIcon={<ArrowForwardIcon />}>
|
|
Learn more
|
|
</Button>
|
|
</CardActions>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
const HomePage = () => {
|
|
const testimonials = false;
|
|
|
|
return (<Box sx={{display: "flex", flexDirection: "column"}}>
|
|
{/* Hero Section */}
|
|
<HeroSection>
|
|
<Container>
|
|
<Box sx={{
|
|
display: 'flex',
|
|
flexDirection: { xs: 'column', md: 'row' },
|
|
gap: 4,
|
|
alignItems: 'center',
|
|
flexGrow: 1,
|
|
maxWidth: "1024px"
|
|
}}>
|
|
<Box sx={{ flex: 1, flexGrow: 1 }}>
|
|
<Typography
|
|
variant="h2"
|
|
component="h1"
|
|
sx={{
|
|
fontWeight: 700,
|
|
fontSize: { xs: '2rem', md: '3rem' },
|
|
mb: 2,
|
|
color: "white"
|
|
}}
|
|
>
|
|
Your complete professional story, beyond a single page
|
|
</Typography>
|
|
<Typography variant="h5" sx={{ mb: 3, fontWeight: 400 }}>
|
|
Let potential employers discover the depth of your experience through interactive Q&A and tailored resumes
|
|
</Typography>
|
|
<Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
|
|
<HeroButton
|
|
variant="contained"
|
|
size="large"
|
|
>
|
|
Get Started as Candidate
|
|
</HeroButton>
|
|
<HeroButton
|
|
variant="outlined"
|
|
size="large"
|
|
sx={{
|
|
backgroundColor: 'transparent',
|
|
border: '2px solid',
|
|
borderColor: 'action.active'
|
|
}}
|
|
>
|
|
Recruit Talent
|
|
</HeroButton>
|
|
</Stack>
|
|
</Box>
|
|
<Box sx={{ justifyContent: "center", display: { xs: 'none', md: 'block' } }}>
|
|
<Box
|
|
component="img"
|
|
src={professionalConversationPng}
|
|
alt="Professional conversation"
|
|
sx={{
|
|
width: '100%',
|
|
maxWidth: 200,
|
|
height: 'auto',
|
|
borderRadius: 2,
|
|
boxShadow: 3,
|
|
}}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
</Container>
|
|
</HeroSection>
|
|
|
|
{/* How It Works Section */}
|
|
<Container sx={{ py: 8 }}>
|
|
<Typography
|
|
variant="h3"
|
|
component="h2"
|
|
align="center"
|
|
gutterBottom
|
|
sx={{ mb: 6, fontWeight: 600 }}
|
|
>
|
|
How Backstory Works
|
|
</Typography>
|
|
|
|
<Box sx={{ display: 'flex', flexDirection: { xs: 'column', md: 'row' }, gap: 4 }}>
|
|
<Box sx={{ flex: 1 }}>
|
|
<Typography variant="h4" component="h3" gutterBottom sx={{ color: 'primary.main' }}>
|
|
For Job Seekers
|
|
</Typography>
|
|
<Box sx={{ my: 3 }}>
|
|
<Typography variant="body1" paragraph>
|
|
Backstory helps you tell your complete professional story, highlight your achievements, and showcase your skills beyond what fits on a traditional resume.
|
|
</Typography>
|
|
</Box>
|
|
|
|
<Stack spacing={3}>
|
|
<Box display="flex" alignItems="center">
|
|
<Box sx={{
|
|
backgroundColor: 'primary.main',
|
|
color: 'primary.contrastText',
|
|
borderRadius: '50%',
|
|
width: 40,
|
|
height: 40,
|
|
minWidth: 40,
|
|
minHeight: 40,
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
mr: 2,
|
|
fontWeight: 'bold'
|
|
}}>
|
|
1
|
|
</Box>
|
|
<Typography variant="body1">
|
|
Upload your complete work history, projects, and achievements
|
|
</Typography>
|
|
</Box>
|
|
|
|
<Box display="flex" alignItems="center">
|
|
<Box sx={{
|
|
backgroundColor: 'primary.main',
|
|
color: 'primary.contrastText',
|
|
borderRadius: '50%',
|
|
width: 40,
|
|
height: 40,
|
|
minWidth: 40,
|
|
minHeight: 40,
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
mr: 2,
|
|
fontWeight: 'bold'
|
|
}}>
|
|
2
|
|
</Box>
|
|
<Typography variant="body1">
|
|
Configure your AI assistant to answer questions about your experience
|
|
</Typography>
|
|
</Box>
|
|
|
|
<Box display="flex" alignItems="center">
|
|
<Box sx={{
|
|
backgroundColor: 'primary.main',
|
|
color: 'primary.contrastText',
|
|
borderRadius: '50%',
|
|
width: 40,
|
|
height: 40,
|
|
minWidth: 40,
|
|
minHeight: 40,
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
mr: 2,
|
|
fontWeight: 'bold'
|
|
}}>
|
|
3
|
|
</Box>
|
|
<Typography variant="body1">
|
|
Generate targeted resumes based on specific job descriptions
|
|
</Typography>
|
|
</Box>
|
|
</Stack>
|
|
|
|
<ActionButton
|
|
variant="contained"
|
|
color="secondary"
|
|
sx={{ mt: 4 }}
|
|
endIcon={<ArrowForwardIcon />}
|
|
>
|
|
Create Your Profile
|
|
</ActionButton>
|
|
</Box>
|
|
|
|
<ComingSoon>
|
|
<Box sx={{ flex: 1 }}>
|
|
<Typography variant="h4" component="h3" gutterBottom sx={{ color: 'primary.main' }}>
|
|
For Employers
|
|
</Typography>
|
|
<Box sx={{ my: 3 }}>
|
|
<Typography variant="body1" paragraph>
|
|
Discover candidates with the perfect skills and experience for your positions by engaging in meaningful Q&A to learn more about their background.
|
|
</Typography>
|
|
</Box>
|
|
|
|
<Stack spacing={3}>
|
|
<Box display="flex" alignItems="center">
|
|
<Box sx={{
|
|
backgroundColor: 'secondary.main',
|
|
color: 'secondary.contrastText',
|
|
borderRadius: '50%',
|
|
width: 40,
|
|
height: 40,
|
|
minWidth: 40,
|
|
minHeight: 40,
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
mr: 2,
|
|
fontWeight: 'bold'
|
|
}}>
|
|
1
|
|
</Box>
|
|
<Typography variant="body1">
|
|
Search the candidate pool based on skills, experience, and location
|
|
</Typography>
|
|
</Box>
|
|
|
|
<Box display="flex" alignItems="center">
|
|
<Box sx={{
|
|
backgroundColor: 'secondary.main',
|
|
color: 'secondary.contrastText',
|
|
borderRadius: '50%',
|
|
width: 40,
|
|
height: 40,
|
|
minWidth: 40,
|
|
minHeight: 40,
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
mr: 2,
|
|
fontWeight: 'bold'
|
|
}}>
|
|
2
|
|
</Box>
|
|
<Typography variant="body1">
|
|
Ask personalized questions about candidates' experience and skills
|
|
</Typography>
|
|
</Box>
|
|
|
|
<Box display="flex" alignItems="center">
|
|
<Box sx={{
|
|
backgroundColor: 'secondary.main',
|
|
color: 'secondary.contrastText',
|
|
borderRadius: '50%',
|
|
width: 40,
|
|
height: 40,
|
|
minWidth: 40,
|
|
minHeight: 40,
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
mr: 2,
|
|
fontWeight: 'bold'
|
|
}}>
|
|
3
|
|
</Box>
|
|
<Typography variant="body1">
|
|
Generate targeted resumes that match your job requirements
|
|
</Typography>
|
|
</Box>
|
|
</Stack>
|
|
|
|
<ActionButton
|
|
variant="contained"
|
|
color="secondary"
|
|
sx={{ mt: 4 }}
|
|
endIcon={<ArrowForwardIcon />}
|
|
>
|
|
Start Recruiting
|
|
</ActionButton>
|
|
</Box>
|
|
</ComingSoon>
|
|
</Box>
|
|
</Container>
|
|
|
|
{/* Features Section */}
|
|
<Box sx={{ backgroundColor: 'background.paper', py: 8 }}>
|
|
<Container>
|
|
<Typography
|
|
variant="h3"
|
|
component="h2"
|
|
align="center"
|
|
gutterBottom
|
|
sx={{ mb: 6, fontWeight: 600 }}
|
|
>
|
|
Key Features
|
|
</Typography>
|
|
|
|
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
|
|
<Box sx={{ flex: '1 1 250px', minWidth: { xs: '100%', sm: 'calc(50% - 16px)', md: 'calc(25% - 16px)' } }}>
|
|
<FeatureCard
|
|
icon={
|
|
<FeatureIcon>
|
|
<PersonSearchIcon fontSize="large" />
|
|
</FeatureIcon>
|
|
}
|
|
title="AI-Powered Search"
|
|
description="Find the perfect candidates based on skills, experience, and fit for your specific requirements."
|
|
/>
|
|
</Box>
|
|
<Box sx={{ flex: '1 1 250px', minWidth: { xs: '100%', sm: 'calc(50% - 16px)', md: 'calc(25% - 16px)' } }}>
|
|
<FeatureCard
|
|
icon={
|
|
<FeatureIcon>
|
|
<WorkHistoryIcon fontSize="large" />
|
|
</FeatureIcon>
|
|
}
|
|
title="Complete Backstory"
|
|
description="Share your full professional journey beyond the limitations of a traditional resume."
|
|
/>
|
|
</Box>
|
|
<Box sx={{ flex: '1 1 250px', minWidth: { xs: '100%', sm: 'calc(50% - 16px)', md: 'calc(25% - 16px)' } }}>
|
|
<FeatureCard
|
|
icon={
|
|
<FeatureIcon>
|
|
<QuestionAnswerIcon fontSize="large" />
|
|
</FeatureIcon>
|
|
}
|
|
title="Interactive Q&A"
|
|
description="Ask detailed questions about a candidate's experience and get immediate answers."
|
|
/>
|
|
</Box>
|
|
<Box sx={{ flex: '1 1 250px', minWidth: { xs: '100%', sm: 'calc(50% - 16px)', md: 'calc(25% - 16px)' } }}>
|
|
<FeatureCard
|
|
icon={
|
|
<FeatureIcon>
|
|
<DescriptionIcon fontSize="large" />
|
|
</FeatureIcon>
|
|
}
|
|
title="Custom Resumes"
|
|
description="Generate tailored resumes optimized for specific job descriptions with one click."
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
</Container>
|
|
</Box>
|
|
|
|
{/* Testimonials Section */}
|
|
{testimonials &&
|
|
<Container sx={{ py: 8 }}>
|
|
<Typography
|
|
variant="h3"
|
|
component="h2"
|
|
align="center"
|
|
gutterBottom
|
|
sx={{ mb: 2, fontWeight: 600 }}
|
|
>
|
|
Success Stories
|
|
</Typography>
|
|
<Typography
|
|
variant="body1"
|
|
align="center"
|
|
sx={{ mb: 6, maxWidth: 800, mx: 'auto' }}
|
|
>
|
|
See how Backstory has transformed the hiring process for both candidates and employers.
|
|
</Typography>
|
|
|
|
<Testimonials />
|
|
</Container>
|
|
}
|
|
|
|
{/* CTA Section */}
|
|
<Box sx={{
|
|
backgroundColor: 'primary.main',
|
|
color: 'primary.contrastText',
|
|
py: 8
|
|
}}>
|
|
<Container>
|
|
<Box sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
textAlign: 'center',
|
|
maxWidth: 800,
|
|
mx: 'auto'
|
|
}}>
|
|
<Typography variant="h3" component="h2" gutterBottom sx={{ color: "white" }}>
|
|
Ready to transform your hiring process?
|
|
</Typography>
|
|
<Typography variant="h6" sx={{ mb: 4 }}>
|
|
Join Backstory today and discover a better way to connect talent with opportunity.
|
|
</Typography>
|
|
<Stack
|
|
direction={{ xs: 'column', sm: 'row' }}
|
|
spacing={2}
|
|
justifyContent="center"
|
|
>
|
|
<HeroButton
|
|
variant="contained"
|
|
size="large"
|
|
>
|
|
Sign Up as Candidate
|
|
</HeroButton>
|
|
<HeroButton
|
|
variant="outlined"
|
|
size="large"
|
|
sx={{
|
|
backgroundColor: 'transparent',
|
|
border: '2px solid',
|
|
borderColor: 'action.active'
|
|
}}
|
|
>
|
|
Sign Up as Employer
|
|
</HeroButton>
|
|
</Stack>
|
|
</Box>
|
|
</Container>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export {
|
|
HomePage
|
|
};
|
|
|