137 lines
4.2 KiB
TypeScript
137 lines
4.2 KiB
TypeScript
import React from "react";
|
||
import Box from "@mui/material/Box";
|
||
import Typography from "@mui/material/Typography";
|
||
import Button from "@mui/material/Button";
|
||
import SectionStyled from "./SectionStyled";
|
||
import { styled } from "@mui/material/styles";
|
||
import { useMediaQuery, useTheme } from "@mui/material";
|
||
|
||
// const BoxSpan = styled('div')(({ theme }) => ({
|
||
// [theme.breakpoints.down('lg')]: {
|
||
// alignItems: 'center',
|
||
// justifyContent: 'center',
|
||
// textAlign: 'center',
|
||
// paddingTop: '20px',
|
||
// width: '100%',
|
||
// },
|
||
// }));
|
||
|
||
const BoxButtons = styled("div")(({ theme }) => ({
|
||
[theme.breakpoints.down("xs")]: {
|
||
justifyContent: "center",
|
||
},
|
||
}));
|
||
|
||
export default function Component() {
|
||
const theme = useTheme();
|
||
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
||
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
||
return (
|
||
<SectionStyled
|
||
tag={"section"}
|
||
bg={"#7E2AEA"}
|
||
mwidth={"1160px"}
|
||
sxsect={{
|
||
minHeight: "350px",
|
||
}}
|
||
sxcont={{
|
||
display: "flex",
|
||
flexWrap: "wrap",
|
||
justifyContent: "space-between",
|
||
alignItems: "center",
|
||
padding: isMobile ? "85px 16px 50px 16px" : isTablet ? "0 40px" : 0,
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
}}
|
||
>
|
||
<Typography
|
||
variant="h1"
|
||
color={"#FFFFFF"}
|
||
sx={{
|
||
fontSize: isMobile ? "24px" : "36px",
|
||
fontWeight: "500",
|
||
lineHeight: "43px",
|
||
}}
|
||
>
|
||
Остались вопросы?
|
||
</Typography>
|
||
{isMobile && (
|
||
<Typography color={"#FFFFFF"} fontSize={"18px"} marginTop={"20px"}>
|
||
Сервисы помогают предпринимателям, маркетологам и агентствам сделать
|
||
интернет-маркетинг прозрачным и эффективным. С нами не придется
|
||
тратить рекламный бюджет впустую и терять клиентов на сайте.
|
||
</Typography>
|
||
)}
|
||
<BoxButtons
|
||
sx={{
|
||
display: "flex",
|
||
flexWrap: "wrap",
|
||
paddingTop: "25px",
|
||
}}
|
||
>
|
||
<Button
|
||
variant="outlined"
|
||
sx={{
|
||
width: "180px",
|
||
marginTop: isMobile ? "25px" : "40px",
|
||
border: "1px solid #ffffff",
|
||
color: "#ffffff",
|
||
backgroundColor: "transparent",
|
||
textTransform: "none",
|
||
fontWeight: "400",
|
||
fontSize: "18px",
|
||
lineHeight: "24px",
|
||
padding: "10px 40px",
|
||
borderRadius: "8px",
|
||
}}
|
||
>
|
||
Подробнее
|
||
</Button>
|
||
<Button
|
||
variant="contained"
|
||
sx={{
|
||
width: "180px",
|
||
marginTop: isMobile ? "20px" : "40px",
|
||
marginLeft: isMobile ? 0 : "22px",
|
||
backgroundColor: "#FFFFFF",
|
||
color: "#252734",
|
||
textTransform: "none",
|
||
fontWeight: "400",
|
||
fontSize: "18px",
|
||
lineHeight: "24px",
|
||
padding: "10px 40px",
|
||
borderRadius: "8px",
|
||
}}
|
||
>
|
||
Подробнее
|
||
</Button>
|
||
</BoxButtons>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
justifyContent: "end",
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: isMobile ? "none" : "flex",
|
||
minHeight: "139px",
|
||
maxWidth: "460px",
|
||
}}
|
||
>
|
||
<Typography color={"#FFFFFF"} fontSize={"18px"}>
|
||
Сервисы помогают предпринимателям, маркетологам и агентствам сделать
|
||
интернет-маркетинг прозрачным и эффективным. С нами не придется
|
||
тратить рекламный бюджет впустую и терять клиентов на сайте.
|
||
</Typography>
|
||
</Box>
|
||
</Box>
|
||
</SectionStyled>
|
||
);
|
||
}
|