135 lines
3.3 KiB
TypeScript
135 lines
3.3 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>
|
||
);
|
||
}
|