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>
|
||
)
|
||
} |