Skip to content

Commit

Permalink
feat(landing): improve design of landing page
Browse files Browse the repository at this point in the history
  • Loading branch information
@jackstenglein
jackstenglein committed Apr 23, 2024
1 parent a0aed3e commit 6cbf00a
Show file tree
Hide file tree
Showing 6 changed files with 563 additions and 74 deletions.
3 changes: 2 additions & 1 deletion frontend/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

53 changes: 53 additions & 0 deletions frontend/src/landing/JoinToday.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import { Button, Stack, Typography } from '@mui/material';
import { useLocation, useNavigate } from 'react-router-dom';

const JoinToday = () => {
const navigate = useNavigate();
const locationState = useLocation().state;

return (
<Stack width={1} alignItems='center' mt={5} textAlign='center'>
<Typography variant='h2'>
Join the{' '}
<Typography variant='h2' color='dojoOrange.main' component='span'>
ChessDojo
</Typography>{' '}
training program today
</Typography>
<Typography variant='h4' mb={3} textAlign='center'>
Try it for free! No credit card required.
</Typography>

<Stack direction='row' spacing={3} justifyContent='center'>
<Button
variant='contained'
onClick={() => navigate('/signup', { state: locationState })}
sx={{
fontSize: '1rem',
textTransform: 'none',
fontWeight: '600',
py: 1.5,
px: 2.5,
}}
>
Sign Up for Free
</Button>
<Button
variant='outlined'
onClick={() => navigate('/signin', { state: locationState })}
sx={{
fontSize: '1rem',
textTransform: 'none',
fontWeight: '600',
py: 1.5,
px: 2.5,
}}
>
Sign In
</Button>
</Stack>
</Stack>
);
};

export default JoinToday;
173 changes: 100 additions & 73 deletions frontend/src/landing/LandingPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,27 @@
import { Button, Container, Grid, Stack, Typography } from '@mui/material';
import {
Box,
Button,
Container,
Stack,
Typography,
useMediaQuery,
useTheme,
} from '@mui/material';
import Grid2 from '@mui/material/Unstable_Grid2/Grid2';
import { Navigate, useLocation, useNavigate } from 'react-router-dom';

import { AuthStatus, useAuth } from '../auth/Auth';
import LoadingPage from '../loading/LoadingPage';
import JoinToday from './JoinToday';
import Sensei from './Sensei';
import Testimonials from './Testimonials';
import WhatsIncluded from './WhatsIncluded';

const LandingPage = () => {
const auth = useAuth();
const navigate = useNavigate();
const locationState = useLocation().state;
const theme = useTheme();
const isMd = useMediaQuery(theme.breakpoints.up('md'));

if (auth.status === AuthStatus.Loading) {
return <LoadingPage />;
Expand All @@ -18,83 +32,96 @@ const LandingPage = () => {
}

return (
<Container data-cy='landing-page' maxWidth={false} sx={{ py: 5 }}>
<Grid container rowSpacing={4} columnSpacing={2}>
<Grid item xs={12} md={6} justifyContent='center'>
<Stack
height={1}
justifyContent='center'
alignItems='center'
spacing={6}
>
<Stack alignItems='center' spacing={2}>
<Typography variant='h2' textAlign='center' data-cy='title'>
ChessDojo
</Typography>
<Typography
variant='h5'
textAlign='center'
data-cy='subtitle'
>
The ChessDojo{' '}
<Container data-cy='landing-page' sx={{ py: 5 }} maxWidth='xl'>
<Box sx={{ height: 'calc(100vh - var(--navbar-height) - 200px)' }}>
<Grid2 container rowSpacing={4} columnSpacing={2}>
<Grid2 xs={12} md={6} justifyContent='center'>
<Stack
height={1}
justifyContent='center'
alignItems='center'
spacing={6}
>
<Stack alignItems='center' spacing={2}>
<Typography
variant='h2'
textAlign='center'
data-cy='title'
>
ChessDojo
</Typography>
<Typography
variant='h5'
color='dojoOrange.main'
component='span'
textAlign='center'
data-cy='subtitle'
>
Training Program
</Typography>{' '}
offers structured training plans for all levels 0-2500,
along with an active and supportive community
</Typography>
</Stack>
The ChessDojo{' '}
<Typography
variant='h5'
color='dojoOrange.main'
component='span'
>
Training Program
</Typography>{' '}
offers structured training plans for all levels
0-2500, along with an active and supportive community
</Typography>
</Stack>

<Stack direction='row' spacing={3}>
<Button
variant='contained'
onClick={() =>
navigate('/signup', { state: locationState })
}
sx={{
fontSize: '1rem',
textTransform: 'none',
fontWeight: '600',
py: 1.5,
px: 2.5,
}}
>
Sign Up for Free
</Button>
<Button
variant='outlined'
onClick={() =>
navigate('/signin', { state: locationState })
}
sx={{
fontSize: '1rem',
textTransform: 'none',
fontWeight: '600',
py: 1.5,
px: 2.5,
}}
>
Sign In
</Button>
<Stack direction='row' spacing={3}>
<Button
variant='contained'
onClick={() =>
navigate('/signup', { state: locationState })
}
sx={{
fontSize: '1rem',
textTransform: 'none',
fontWeight: '600',
py: 1.5,
px: 2.5,
}}
>
Sign Up for Free
</Button>
<Button
variant='outlined'
onClick={() =>
navigate('/signin', { state: locationState })
}
sx={{
fontSize: '1rem',
textTransform: 'none',
fontWeight: '600',
py: 1.5,
px: 2.5,
}}
>
Sign In
</Button>
</Stack>
</Stack>
</Stack>
</Grid>
</Grid2>

{isMd && (
<Grid2 xs={12} md={6}>
<Stack height={1} justifyContent='center' alignItems='center'>
<img
alt=''
src='https://static.wixstatic.com/media/cfd2ae_25636fbb6a6c4d07b3559de681014ec4~mv2.gif'
width='100%'
style={{ borderRadius: '6px' }}
/>
</Stack>
</Grid2>
)}
</Grid2>
</Box>

<Grid item xs={12} md={6}>
<Stack height={1} justifyContent='center' alignItems='center'>
<img
alt=''
src='https://static.wixstatic.com/media/cfd2ae_25636fbb6a6c4d07b3559de681014ec4~mv2.gif'
width='100%'
style={{ borderRadius: '6px' }}
/>
</Stack>
</Grid>
</Grid>
<WhatsIncluded />
<Sensei />
<Testimonials />
<JoinToday />
</Container>
);
};
Expand Down
69 changes: 69 additions & 0 deletions frontend/src/landing/Sensei.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import { Card, CardContent, CardMedia, Stack, Typography } from '@mui/material';
import Grid2 from '@mui/material/Unstable_Grid2/Grid2';

const senseis = [
{
name: 'Jesse Kraai',
title: 'Grandmaster',
description:
'GM Kraai has been playing and teaching chess since before you were born. Playing in seven US championships helped him elevate his game to GM in 2007. He won the Denker tournament of High School Champions in 1989 and 1990 and the Irwin tournament of Senior Champions in 2023. He is currently using the Dojo Training Program with the dream of winning the US Senior Closed in 2024.',
image: 'https://chess-dojo-images.s3.amazonaws.com/landing-page/Jesse+Presentation_edited.jpg',
},
{
name: 'Kostya Kavutskiy',
title: 'International Master',
description:
'Kostya comes from a Ukrainian chess family and has been playing and teaching the game since he was a pup. Since attaining the IM title in 2016, he has struggled to find the time for his own study while also coaching. He is a FIDE trainer and has coached at the World Youth and Pan-American Youth Championships, earning several gold medals for the US national team. Like many of us he needs a structure and a plan! Kostya is committed to following the Dojo Training Program to the GM title, and we are rooting for him!',
image: 'https://chess-dojo-images.s3.amazonaws.com/landing-page/Kostya+Board_edited.jpg',
},
{
name: 'David Pruess',
title: 'International Master',
description:
'David is a chess maximalist, never shying away from what he believes is the most principled path forward. With this madman approach, he attained the rank of International Master in 2003 and then in 2006 he won the prestigious Samford Chess Fellowship. He has all three Grandmaster norms and just needs to cross 2500 to reach the title. David helped design the ChessDojo Training Program with the dream that he could cross that difficult 2500 barrier using its guidance and structure.',
image: 'https://chess-dojo-images.s3.amazonaws.com/landing-page/David+Pruess_edited.jpg',
},
];

const Sensei = () => {
return (
<Stack width={1} alignItems='center' mt={3}>
<Typography variant='h2' textAlign='center'>
ChessDojo{' '}
<Typography variant='h2' color='dojoOrange.main' component='span'>
Sensei
</Typography>
</Typography>
<Typography variant='h4' mb={3} textAlign='center'>
World-class teachers who have been in your shoes
</Typography>

<Grid2
container
sx={{ width: 1 }}
rowGap={2}
columnSpacing={3}
justifyContent='center'
>
{senseis.map((sensei) => (
<Grid2 key={sensei.name} xs={12} sm={4} lg={3}>
<Card sx={{ height: 1 }}>
<CardMedia image={sensei.image} sx={{ aspectRatio: 1 }} />
<CardContent>
<Typography variant='h5'>{sensei.name}</Typography>
<Typography variant='subtitle1' gutterBottom>
{sensei.title}
</Typography>
<Typography color='text.secondary'>
{sensei.description}
</Typography>
</CardContent>
</Card>
</Grid2>
))}
</Grid2>
</Stack>
);
};

export default Sensei;
Loading

0 comments on commit 6cbf00a

Please sign in to comment.