122 lines
4.5 KiB
TypeScript
122 lines
4.5 KiB
TypeScript
|
import React from 'react';
|
|||
|
|
import Box from "@mui/material/Box";
|
|||
|
|
import Typography from '@mui/material/Typography';
|
|||
|
|
import Button from "@mui/material/Button";
|
|||
|
|
import SectionStyled from './SectionStyled';
|
|||
|
|
import {styled} from "@mui/material/styles";
|
|||
|
|
|
|||
|
|
const BoxQuestions = styled('div')(({ theme }) => ({
|
|||
|
|
[theme.breakpoints.down('lg')]: {
|
|||
|
|
alignItems: 'center',
|
|||
|
|
width: '100%',
|
|||
|
|
},
|
|||
|
|
}));
|
|||
|
|
|
|||
|
|
const BoxSpan = styled('div')(({ theme }) => ({
|
|||
|
|
[theme.breakpoints.down('lg')]: {
|
|||
|
|
alignItems: 'center',
|
|||
|
|
justifyContent: 'center',
|
|||
|
|
textAlign: 'center',
|
|||
|
|
paddingTop: '20px',
|
|||
|
|
width: '100%',
|
|||
|
|
},
|
|||
|
|
}));
|
|||
|
|
|
|||
|
|
const BoxButtons = styled('div')(({ theme }) => ({
|
|||
|
|
[theme.breakpoints.down('xs')]: {
|
|||
|
|
justifyContent: 'center',
|
|||
|
|
}
|
|||
|
|
}));
|
|||
|
|
|
|||
|
|
export default function Component() {
|
|||
|
|
return(
|
|||
|
|
<SectionStyled tag={'section'} bg={'#7E2AEA'} mwidth={'1160px'}
|
|||
|
|
sxsect={{
|
|||
|
|
minHeight: '350px',
|
|||
|
|
}}
|
|||
|
|
sxcont={{
|
|||
|
|
display: 'flex',
|
|||
|
|
flexWrap: 'wrap',
|
|||
|
|
justifyContent: 'space-between',
|
|||
|
|
alignItems: 'center',
|
|||
|
|
padding: '0 10px',
|
|||
|
|
}}>
|
|||
|
|
<BoxQuestions
|
|||
|
|
sx={{
|
|||
|
|
display: 'flex',
|
|||
|
|
flexDirection: 'column',
|
|||
|
|
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Typography variant='h1' color={'#FFFFFF'}
|
|||
|
|
sx={{
|
|||
|
|
fontSize: '36px',
|
|||
|
|
fontWeight: '500',
|
|||
|
|
lineHeight: '43px',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
Остались вопросы?
|
|||
|
|
</Typography>
|
|||
|
|
<BoxButtons
|
|||
|
|
sx={{
|
|||
|
|
display: 'flex',
|
|||
|
|
flexWrap: 'wrap',
|
|||
|
|
paddingTop: '25px',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Button variant="outlined"
|
|||
|
|
sx={{
|
|||
|
|
width: '180px',
|
|||
|
|
marginTop: '40px',
|
|||
|
|
border: '1px solid #ffffff',
|
|||
|
|
color: '#ffffff',
|
|||
|
|
backgroundColor: "transparent",
|
|||
|
|
textTransform: 'none',
|
|||
|
|
fontWeight: '400',
|
|||
|
|
fontSize: '18px',
|
|||
|
|
lineHeight: '24px',
|
|||
|
|
padding: '10px 40px',
|
|||
|
|
borderRadius: '8px',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
Подробнее
|
|||
|
|
</Button>
|
|||
|
|
<Button variant="contained"
|
|||
|
|
sx={{
|
|||
|
|
width: '180px',
|
|||
|
|
marginTop: '40px',
|
|||
|
|
marginLeft: '22px',
|
|||
|
|
backgroundColor: '#FFFFFF',
|
|||
|
|
color: '#252734',
|
|||
|
|
textTransform: 'none',
|
|||
|
|
fontWeight: '400',
|
|||
|
|
fontSize: '18px',
|
|||
|
|
lineHeight: '24px',
|
|||
|
|
padding: '10px 40px',
|
|||
|
|
borderRadius: '8px',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
Подробнее
|
|||
|
|
</Button>
|
|||
|
|
</BoxButtons>
|
|||
|
|
</BoxQuestions>
|
|||
|
|
<BoxSpan
|
|||
|
|
sx={{
|
|||
|
|
display: 'flex',
|
|||
|
|
justifyContent: 'end',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
minHeight: '139px',
|
|||
|
|
maxWidth: '460px',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Typography color={'#FFFFFF'} fontSize={'18px'}>
|
|||
|
|
Сервисы помогают предпринимателям, маркетологам и агентствам сделать интернет-маркетинг прозрачным и эффективным. С нами не придется тратить рекламный бюджет впустую и терять клиентов на сайте.
|
|||
|
|
</Typography>
|
|||
|
|
</Box>
|
|||
|
|
</BoxSpan>
|
|||
|
|
</SectionStyled>
|
|||
|
|
)
|
|||
|
|
}
|