91 lines
3.5 KiB
TypeScript
91 lines
3.5 KiB
TypeScript
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||
import pena_illustration02 from "../../assets/pena_illustration02.png";
|
||
import Button from "../../components/Button";
|
||
import PenaLogo from "../../components/PenaLogo";
|
||
import SectionWrapper from "../../components/SectionWrapper";
|
||
|
||
|
||
export default function Section1() {
|
||
const theme = useTheme();
|
||
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
||
|
||
return (
|
||
<SectionWrapper
|
||
component="section"
|
||
maxWidth="lg"
|
||
outerContainerSx={{
|
||
backgroundColor: theme.palette.custom.lightPurple.main,
|
||
}}
|
||
sx={{
|
||
display: "flex",
|
||
pt: "70px",
|
||
pb: upMd ? "40px" : "70px",
|
||
justifyContent: "space-between",
|
||
flexDirection: upMd ? "row" : "column",
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
flexBasis: upMd ? "310px" : undefined,
|
||
gap: "70px",
|
||
order: upMd ? 1 : 2,
|
||
mb: upMd ? undefined : "30px",
|
||
}}
|
||
>
|
||
{upMd && <PenaLogo width={180} theme="dark" />}
|
||
<Typography variant="h2">Сервисы прокачки маркетинга</Typography>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
flexShrink: 1,
|
||
textAlign: "center",
|
||
order: upMd ? 2 : 1,
|
||
mx: upMd ? "30px" : 0,
|
||
mt: upMd ? undefined : "-70px",
|
||
mb: upMd ? undefined : "-30px",
|
||
alignSelf: "center",
|
||
aspectRatio: "1 / 1",
|
||
width: upMd ? undefined : "100%",
|
||
maxWidth: "301px",
|
||
maxHeight: "301px",
|
||
}}
|
||
>
|
||
<img
|
||
style={{
|
||
transform: upMd ? undefined : "rotate(-90deg)",
|
||
width: upMd ? "100%" : `${170 / 301 * 100}%`,
|
||
}}
|
||
src={pena_illustration02}
|
||
alt="pena illustration"
|
||
/>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
flexBasis: upMd ? "360px" : undefined,
|
||
alignItems: "start",
|
||
alignSelf: upMd ? "center" : "start",
|
||
mt: upMd ? "70px" : undefined,
|
||
order: 3,
|
||
}}
|
||
>
|
||
<Box sx={{ mb: "11px" }}>
|
||
<Typography>Покажут эффективность рекламы</Typography>
|
||
<Typography>Соберут все обращения клиентов</Typography>
|
||
<Typography>Повысят конверсию сайта</Typography>
|
||
</Box>
|
||
<Typography sx={{ mb: "40px" }}>И все это в едином кабинете</Typography>
|
||
<Button
|
||
variant="contained"
|
||
sx={{
|
||
backgroundColor: theme.palette.custom.brightPurple.main,
|
||
color: theme.palette.primary.main,
|
||
}}
|
||
>Подробнее</Button>
|
||
</Box>
|
||
</SectionWrapper >
|
||
);
|
||
}; |