82 lines
3.0 KiB
TypeScript
82 lines
3.0 KiB
TypeScript
|
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
|||
|
|
import logo_PenaHab from "../../assets/logo_PenaHab.svg";
|
|||
|
|
import pena_illustration02 from "../../assets/pena_illustration02.png";
|
|||
|
|
import Button from "../Button";
|
|||
|
|
import SectionWrapper from "../SectionWrapper";
|
|||
|
|
|
|||
|
|
|
|||
|
|
export default function Section1() {
|
|||
|
|
const theme = useTheme();
|
|||
|
|
const matchMd = useMediaQuery("@media (min-width: 1100px)");
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<SectionWrapper
|
|||
|
|
component="section"
|
|||
|
|
maxWidth="lg"
|
|||
|
|
sx={{
|
|||
|
|
backgroundColor: theme.palette.custom.lightPurple.main,
|
|||
|
|
}}
|
|||
|
|
innerSx={{
|
|||
|
|
display: "flex",
|
|||
|
|
pt: "70px",
|
|||
|
|
pb: "40px",
|
|||
|
|
px: "20px",
|
|||
|
|
gap: "20px",
|
|||
|
|
flexDirection: matchMd ? "row" : "column",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
display: "flex",
|
|||
|
|
flexDirection: "column",
|
|||
|
|
flex: "1 0 0",
|
|||
|
|
gap: "70px",
|
|||
|
|
order: matchMd ? 1 : 2,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{matchMd && <img src={logo_PenaHab} alt="pena logo" width={180} height={70} />}
|
|||
|
|
<Typography variant="h2">Сервисы прокачки маркетинга</Typography>
|
|||
|
|
</Box>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
flex: "1 0 0",
|
|||
|
|
textAlign: "center",
|
|||
|
|
order: matchMd ? 2 : 1,
|
|||
|
|
my: matchMd ? undefined : "-90px",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<img
|
|||
|
|
style={{
|
|||
|
|
transform: matchMd ? undefined : "rotate(-90deg)",
|
|||
|
|
imageRendering: "pixelated",
|
|||
|
|
}}
|
|||
|
|
src={pena_illustration02}
|
|||
|
|
alt="pena illustration"
|
|||
|
|
/>
|
|||
|
|
</Box>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
display: "flex",
|
|||
|
|
flexDirection: "column",
|
|||
|
|
flex: "1 0 0",
|
|||
|
|
alignItems: "start",
|
|||
|
|
alignSelf: matchMd ? "center" : "start",
|
|||
|
|
mt: "70px",
|
|||
|
|
order: 3,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Box sx={{ mb: "11px" }}>
|
|||
|
|
<Typography>Покажут эффективность рекламы</Typography>
|
|||
|
|
<Typography>Соберут все обращения клиентов</Typography>
|
|||
|
|
<Typography>Повысят конверсию сайта</Typography>
|
|||
|
|
</Box>
|
|||
|
|
<Typography sx={{ mb: "40px" }}>И все это в едином кабинете</Typography>
|
|||
|
|
<Button
|
|||
|
|
variant="contained"
|
|||
|
|
backgroundColor={theme.palette.custom.brightPurple.main}
|
|||
|
|
color={theme.palette.primary.main}
|
|||
|
|
>Подробнее</Button>
|
|||
|
|
</Box>
|
|||
|
|
</SectionWrapper>
|
|||
|
|
);
|
|||
|
|
};
|