103 lines
2.8 KiB
TypeScript
103 lines
2.8 KiB
TypeScript
|
import Box from '@mui/joy/Box';
|
||
|
|
import Button from '@mui/joy/Button';
|
||
|
|
import Input from '@mui/joy/Input';
|
||
|
|
import Typography from '@mui/joy/Typography';
|
||
|
|
import ArrowForward from '@mui/icons-material/ArrowForward';
|
||
|
|
import Star from '@mui/icons-material/Star';
|
||
|
|
import TwoSidedLayout from '../components/TwoSidedLayout';
|
||
|
|
|
||
|
|
export default function HeroLeft02() {
|
||
|
|
return (
|
||
|
|
<TwoSidedLayout>
|
||
|
|
<Typography color="primary" sx={{ fontSize: 'lg', fontWeight: 'lg' }}>
|
||
|
|
The power to do more
|
||
|
|
</Typography>
|
||
|
|
<Typography
|
||
|
|
level="h1"
|
||
|
|
sx={{
|
||
|
|
fontWeight: 'xl',
|
||
|
|
fontSize: 'clamp(1.875rem, 1.3636rem + 2.1818vw, 3rem)',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
A large headlinerer about our product features & services
|
||
|
|
</Typography>
|
||
|
|
<Typography
|
||
|
|
textColor="text.secondary"
|
||
|
|
sx={{ fontSize: 'lg', lineHeight: 'lg' }}
|
||
|
|
>
|
||
|
|
A descriptive secondary text placeholder. Use it to explain your business
|
||
|
|
offer better.
|
||
|
|
</Typography>
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
display: 'flex',
|
||
|
|
gap: 2,
|
||
|
|
my: 2,
|
||
|
|
flexWrap: 'wrap',
|
||
|
|
'& > *': { flex: 'auto' },
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Input size="lg" placeholder="Sign in with email" />
|
||
|
|
<Button size="lg" endDecorator={<ArrowForward fontSize="xl" />}>
|
||
|
|
Get Started
|
||
|
|
</Button>
|
||
|
|
</Box>
|
||
|
|
<Box
|
||
|
|
sx={(theme) => ({
|
||
|
|
display: 'flex',
|
||
|
|
textAlign: 'center',
|
||
|
|
alignSelf: 'stretch',
|
||
|
|
columnGap: 4.5,
|
||
|
|
'& > *': {
|
||
|
|
display: 'flex',
|
||
|
|
flexDirection: 'column',
|
||
|
|
justifyContent: 'center',
|
||
|
|
alignItems: 'center',
|
||
|
|
flexWrap: 'wrap',
|
||
|
|
flex: 1,
|
||
|
|
},
|
||
|
|
[theme.breakpoints.up(834)]: {
|
||
|
|
textAlign: 'left',
|
||
|
|
'& > *': {
|
||
|
|
flexDirection: 'row',
|
||
|
|
gap: 1.5,
|
||
|
|
justifyContent: 'initial',
|
||
|
|
flexWrap: 'nowrap',
|
||
|
|
flex: 'none',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
})}
|
||
|
|
>
|
||
|
|
<div>
|
||
|
|
<Typography
|
||
|
|
endDecorator={<Star fontSize="xl4" sx={{ color: 'warning.300' }} />}
|
||
|
|
sx={{ fontSize: 'xl4', fontWeight: 'lg' }}
|
||
|
|
>
|
||
|
|
4.9
|
||
|
|
</Typography>
|
||
|
|
<Typography textColor="text.secondary">
|
||
|
|
Over <b>5k</b> positive <br /> customer reviews.
|
||
|
|
</Typography>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<Typography sx={{ fontSize: 'xl4', fontWeight: 'lg' }}>2M</Typography>
|
||
|
|
<Typography textColor="text.secondary">
|
||
|
|
Global <br /> Transactions.
|
||
|
|
</Typography>
|
||
|
|
</div>
|
||
|
|
</Box>
|
||
|
|
<Typography
|
||
|
|
level="body-xs"
|
||
|
|
sx={{
|
||
|
|
position: 'absolute',
|
||
|
|
top: '2rem',
|
||
|
|
left: '50%',
|
||
|
|
transform: 'translateX(-50%)',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
HeroLeft02
|
||
|
|
</Typography>
|
||
|
|
</TwoSidedLayout>
|
||
|
|
);
|
||
|
|
}
|