zucchetti-sa5/themes/onepirate/modules/views/ProductHowItWorks.tsx
Arnaud Fauconnet 328a760eb8 added theme
2022-10-28 11:41:58 +02:00

123 lines
3.4 KiB
TypeScript

import * as React from 'react';
import { Theme } from '@mui/material/styles';
import { SxProps } from '@mui/system';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import Container from '@mui/material/Container';
import Button from '../components/Button';
import Typography from '../components/Typography';
const item: SxProps<Theme> = {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
px: 5,
};
const number = {
fontSize: 24,
fontFamily: 'default',
color: 'secondary.main',
fontWeight: 'medium',
};
const image = {
height: 55,
my: 4,
};
function ProductHowItWorks() {
return (
<Box
component="section"
sx={{ display: 'flex', bgcolor: 'secondary.light', overflow: 'hidden' }}
>
<Container
sx={{
mt: 10,
mb: 15,
position: 'relative',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<Box
component="img"
src="/static/themes/onepirate/productCurvyLines.png"
alt="curvy lines"
sx={{
pointerEvents: 'none',
position: 'absolute',
top: -180,
opacity: 0.7,
}}
/>
<Typography variant="h4" marked="center" component="h2" sx={{ mb: 14 }}>
How it works
</Typography>
<div>
<Grid container spacing={5}>
<Grid item xs={12} md={4}>
<Box sx={item}>
<Box sx={number}>1.</Box>
<Box
component="img"
src="/static/themes/onepirate/productHowItWorks1.svg"
alt="suitcase"
sx={image}
/>
<Typography variant="h5" align="center">
Appointment every Wednesday 9am.
</Typography>
</Box>
</Grid>
<Grid item xs={12} md={4}>
<Box sx={item}>
<Box sx={number}>2.</Box>
<Box
component="img"
src="/static/themes/onepirate/productHowItWorks2.svg"
alt="graph"
sx={image}
/>
<Typography variant="h5" align="center">
First come, first served. Our offers are in limited quantities, so
be quick.
</Typography>
</Box>
</Grid>
<Grid item xs={12} md={4}>
<Box sx={item}>
<Box sx={number}>3.</Box>
<Box
component="img"
src="/static/themes/onepirate/productHowItWorks3.svg"
alt="clock"
sx={image}
/>
<Typography variant="h5" align="center">
{'New offers every week. New experiences, new surprises. '}
{'Your Sundays will no longer be alike.'}
</Typography>
</Box>
</Grid>
</Grid>
</div>
<Button
color="secondary"
size="large"
variant="contained"
component="a"
href="/premium-themes/onepirate/sign-up/"
sx={{ mt: 8 }}
>
Get started
</Button>
</Container>
</Box>
);
}
export default ProductHowItWorks;