105 lines
3.8 KiB
TypeScript
105 lines
3.8 KiB
TypeScript
|
import React from 'react';
|
|||
|
|
import Box from '@mui/material/Box';
|
|||
|
|
import {Typography} from "@mui/material";
|
|||
|
|
import Button from "@mui/material/Button";
|
|||
|
|
import SectionStyled from './SectionStyled';
|
|||
|
|
import {styled} from "@mui/material/styles";
|
|||
|
|
|
|||
|
|
const BoxServies = styled('div')(({ theme }) => ({
|
|||
|
|
[theme.breakpoints.down('md')]: {
|
|||
|
|
textAlign: 'center',
|
|||
|
|
width: '100%',
|
|||
|
|
},
|
|||
|
|
}));
|
|||
|
|
|
|||
|
|
const buttonTemplates = ['Услуги', 'Развлечения', 'Строительство и ремонт', 'E-commerce']
|
|||
|
|
|
|||
|
|
function Servises () {
|
|||
|
|
return (
|
|||
|
|
<BoxServies
|
|||
|
|
sx={{
|
|||
|
|
width: '360px',
|
|||
|
|
height: '262px',
|
|||
|
|
backgroundColor: '#ffffff',
|
|||
|
|
borderRadius: '12px',
|
|||
|
|
marginBottom: '10px',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
width: '360',
|
|||
|
|
height: '180px',
|
|||
|
|
backgroundColor: '#c8dade',
|
|||
|
|
borderRadius: '12px 12px 0 0',
|
|||
|
|
}}
|
|||
|
|
> </Box>
|
|||
|
|
<Box padding={'20px 54px 20px 20px'}>
|
|||
|
|
<Typography fontSize={'18px'} lineHeight={'21.33px'} fontWeight={'500'}>Вдохновляющие фото и видео для свадьбы</Typography>
|
|||
|
|
</Box>
|
|||
|
|
</BoxServies>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function Component () {
|
|||
|
|
const [select, setSelect] = React.useState(0)
|
|||
|
|
return (
|
|||
|
|
<SectionStyled tag={'section'} bg={'#f2f3f7'} mwidth={'1160px'}
|
|||
|
|
sxsect={{height: '630px'}}
|
|||
|
|
sxcont={{
|
|||
|
|
display: 'flex',
|
|||
|
|
flexDirection: 'column',
|
|||
|
|
padding: '50px 10px 60px 10px',
|
|||
|
|
gap: "30px"
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
minHeight: '109px',
|
|||
|
|
display: 'flex',
|
|||
|
|
flexDirection: 'column',
|
|||
|
|
justifyContent: 'space-between',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Typography variant='h6' fontSize={'36px'} lineHeight={'42.66px'} fontWeight={'500'}>Начните с готового шаблона</Typography>
|
|||
|
|
<Typography maxWidth={'354px'} fontSize={'18px'} lineHeight={'21.33px'} fontWeight={'500'}>73 готовых шаблонов разных ниш, постоянно пополняем</Typography>
|
|||
|
|
</Box>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
width: '53%',
|
|||
|
|
display: 'flex',
|
|||
|
|
justifyContent: 'space-between',
|
|||
|
|
flexWrap: 'wrap',
|
|||
|
|
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{buttonTemplates.map( (element, index) => (
|
|||
|
|
<Button key={index}
|
|||
|
|
// to={element[0]}
|
|||
|
|
onClick={() => {
|
|||
|
|
setSelect(index)
|
|||
|
|
}}
|
|||
|
|
variant="text"
|
|||
|
|
sx={{
|
|||
|
|
fontSize: "16px",
|
|||
|
|
fontWeight: 500,
|
|||
|
|
textDecoration: select === index ? "underline" : "none",
|
|||
|
|
textUnderlineOffset: select === index ? "7px" : "",
|
|||
|
|
color: select === index ? '#7E2AEA' : 'black',
|
|||
|
|
textTransform: 'none',
|
|||
|
|
}}>{element} </Button>
|
|||
|
|
))}
|
|||
|
|
</Box>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
display: 'flex',
|
|||
|
|
justifyContent: 'space-between',
|
|||
|
|
flexWrap: 'wrap',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Servises/>
|
|||
|
|
<Servises/>
|
|||
|
|
<Servises/>
|
|||
|
|
</Box>
|
|||
|
|
</SectionStyled>
|
|||
|
|
)
|
|||
|
|
}
|