105 lines
3.1 KiB
TypeScript
105 lines
3.1 KiB
TypeScript
import React from 'react';
|
||
import Box from '@mui/material/Box';
|
||
import {Typography} from "@mui/material";
|
||
import SectionStyled from './SectionStyled';
|
||
import {styled} from "@mui/material/styles";
|
||
|
||
const BoxCardBlog = styled('div')(({ theme }) => ({
|
||
[theme.breakpoints.down('md')]: {
|
||
width: '100%',
|
||
maxWidth: 'none',
|
||
},
|
||
}));
|
||
|
||
function CardBlog () {
|
||
return(
|
||
<BoxCardBlog
|
||
sx={{
|
||
width: '360px',
|
||
height: '292px',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
backgroundColor: '#ffffff',
|
||
borderRadius: '12px',
|
||
marginBottom: '10px',
|
||
|
||
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
width: '100%',
|
||
height: '62%',
|
||
backgroundColor: '#C8DADE',
|
||
borderTopLeftRadius: '12px',
|
||
borderTopRightRadius: '12px',
|
||
}}
|
||
>
|
||
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
padding: '16px 20px',
|
||
maxWidth: '100%',
|
||
}}
|
||
>
|
||
<Typography color={"#4D4D4D"} fontSize={"16px"}>01.09.2022</Typography>
|
||
<Typography variant='h6' fontSize='18px' color={"#4D4D4D"} maxWidth={"300px"}>Как продвигать квиз за 10 000 ₽ в месяц</Typography>
|
||
</Box>
|
||
</BoxCardBlog>
|
||
)
|
||
}
|
||
|
||
export default function Component() {
|
||
return(
|
||
<SectionStyled tag={'section'} bg={'#f2f3f7'} mwidth={'1160px'}
|
||
sxsect={{
|
||
minHeight: '596px',
|
||
}}
|
||
sxcont={{
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
padding: '10px',
|
||
}}>
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
alignItems: 'flex-start',
|
||
width: '100%',
|
||
flexDirection: 'column',
|
||
|
||
}}
|
||
|
||
>
|
||
<Typography variant='h4' fontWeight={'500'}>Блог</Typography>
|
||
<Box
|
||
sx={{
|
||
maxWidth: '361px',
|
||
}}
|
||
>
|
||
<Typography
|
||
sx={{fontSize: '18px',}}
|
||
>
|
||
Кейсы, дайджесты и отборные рекомендации
|
||
</Typography>
|
||
</Box>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
flexWrap: 'wrap',
|
||
width: '100%',
|
||
marginTop: '40px',
|
||
}}
|
||
>
|
||
<CardBlog/>
|
||
<CardBlog/>
|
||
<CardBlog/>
|
||
</Box>
|
||
</SectionStyled>
|
||
)
|
||
} |