130 lines
5.4 KiB
TypeScript
130 lines
5.4 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";
|
||
import {useMediaQuery, useTheme} from "@mui/material";
|
||
|
||
|
||
// 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() {
|
||
const theme = useTheme();
|
||
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
||
const isTablet = useMediaQuery(theme.breakpoints.down(1000))
|
||
return(
|
||
<SectionStyled tag={'section'} bg={'#7E2AEA'} mwidth={'1160px'}
|
||
sxsect={{
|
||
minHeight: '350px',
|
||
}}
|
||
sxcont={{
|
||
display: 'flex',
|
||
flexWrap: 'wrap',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
padding: isMobile ? '85px 16px 50px 16px' : isTablet ? "0 40px" : 0,
|
||
}}>
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
|
||
}}
|
||
>
|
||
<Typography variant='h1' color={'#FFFFFF'}
|
||
sx={{
|
||
fontSize: isMobile ? '24px' : '36px',
|
||
fontWeight: '500',
|
||
lineHeight: '43px',
|
||
}}
|
||
>
|
||
Остались вопросы?
|
||
</Typography>
|
||
{isMobile &&
|
||
<Typography color={'#FFFFFF'} fontSize={'18px'} marginTop={'20px'}>
|
||
Сервисы помогают предпринимателям, маркетологам и агентствам сделать
|
||
интернет-маркетинг прозрачным и эффективным. С нами не придется тратить
|
||
рекламный бюджет впустую и терять клиентов на сайте.
|
||
</Typography>
|
||
}
|
||
<BoxButtons
|
||
sx={{
|
||
display: 'flex',
|
||
flexWrap: 'wrap',
|
||
paddingTop: '25px',
|
||
}}
|
||
>
|
||
<Button variant="outlined"
|
||
sx={{
|
||
width: '180px',
|
||
marginTop: isMobile ? '25px' : '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: isMobile ? '20px' : '40px',
|
||
marginLeft: isMobile ? 0 : '22px',
|
||
backgroundColor: '#FFFFFF',
|
||
color: '#252734',
|
||
textTransform: 'none',
|
||
fontWeight: '400',
|
||
fontSize: '18px',
|
||
lineHeight: '24px',
|
||
padding: '10px 40px',
|
||
borderRadius: '8px',
|
||
}}
|
||
>
|
||
Подробнее
|
||
</Button>
|
||
</BoxButtons>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
justifyContent: 'end',
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: isMobile ? "none" : "flex",
|
||
minHeight: '139px',
|
||
maxWidth: '460px',
|
||
}}
|
||
>
|
||
<Typography color={'#FFFFFF'} fontSize={'18px'}>
|
||
Сервисы помогают предпринимателям, маркетологам и агентствам сделать
|
||
интернет-маркетинг прозрачным и эффективным. С нами не придется тратить
|
||
рекламный бюджет впустую и терять клиентов на сайте.
|
||
</Typography>
|
||
</Box>
|
||
</Box>
|
||
</SectionStyled>
|
||
)
|
||
} |