113 lines
2.5 KiB
TypeScript
113 lines
2.5 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>
|
||
);
|
||
}
|