119 lines
5.0 KiB
TypeScript
119 lines
5.0 KiB
TypeScript
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||
import CardWithLink from "../../components/CardWithLink";
|
||
import UnderlinedLink from "../../components/UnderlinedLink";
|
||
import SectionWrapper from "../../components/SectionWrapper";
|
||
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
|
||
import icon1 from "../../assets/animations/Icon_1.webm";
|
||
import icon2 from "../../assets/animations/Icon_2.webm";
|
||
import icon3 from "../../assets/animations/Icon_3.webm";
|
||
import preview1 from "../../assets/animations/preview_1.png";
|
||
import preview2 from "../../assets/animations/preview_2.png";
|
||
import preview3 from "../../assets/animations/preview_3.png";
|
||
|
||
|
||
export default function Section2() {
|
||
const theme = useTheme();
|
||
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
||
|
||
return (
|
||
<SectionWrapper
|
||
component="section"
|
||
maxWidth="lg"
|
||
outerContainerSx={{
|
||
backgroundColor: theme.palette.darkPurple.main,
|
||
mb: "-90px",
|
||
}}
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
alignItems: upMd ? undefined : "center",
|
||
gap: upMd ? "93px" : "40px",
|
||
pt: upMd ? "90px" : "50px",
|
||
pb: "20px",
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: upMd ? "row" : "column",
|
||
gap: "3.5%",
|
||
}}
|
||
>
|
||
<Typography variant="h4"
|
||
sx={{
|
||
flexGrow: 1,
|
||
flexBasis: "31%",
|
||
maxWidth: "50%",
|
||
}}
|
||
>Интеграции, избавляющие от рутины</Typography>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
gap: "30px",
|
||
alignItems: "start",
|
||
flexGrow: 1,
|
||
flexBasis: "65.5%",
|
||
mt: "10px",
|
||
}}
|
||
>
|
||
<Typography>
|
||
Сервисы помогают предпринимателям, маркетологам и агентствам
|
||
сделать интернет-маркетинг прозрачным и эффективным. С нами не придется
|
||
тратить рекламный бюджет впустую и терять клиентов на сайте.
|
||
</Typography>
|
||
<UnderlinedLink
|
||
linkHref="#"
|
||
text="Подробнее"
|
||
endIcon={<ArrowForwardIcon sx={{ height: "20px", width: "20px" }} />}
|
||
sx={{
|
||
mt: "auto",
|
||
}}
|
||
/>
|
||
</Box>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: upMd ? "row" : "column",
|
||
gap: upMd ? "3.5%" : "30px",
|
||
}}
|
||
>
|
||
<CardWithLink
|
||
shadowType="dark"
|
||
buttonType="link"
|
||
height="434px"
|
||
width={upMd ? "31%" : "100%"}
|
||
headerText="Шаблонизатор"
|
||
text="Текст- это текст, который имеет некоторые характеристики реального письменного текс"
|
||
isHighlighted
|
||
linkHref="#"
|
||
video={icon1}
|
||
poster={preview1}
|
||
/>
|
||
<CardWithLink
|
||
shadowType="dark"
|
||
buttonType="link"
|
||
height="434px"
|
||
width={upMd ? "31%" : "100%"}
|
||
headerText="Опросник"
|
||
text="Текст- это текст, который имеет некоторые характеристики реального письменного текс"
|
||
linkHref="#"
|
||
video={icon2}
|
||
poster={preview2}
|
||
/>
|
||
<CardWithLink
|
||
shadowType="dark"
|
||
buttonType="link"
|
||
height="434px"
|
||
width={upMd ? "31%" : "100%"}
|
||
headerText="Сокращатель ссылок"
|
||
text="Текст- это текст, который имеет некоторые характеристики реального письменного текс"
|
||
linkHref="#"
|
||
video={icon3}
|
||
poster={preview3}
|
||
/>
|
||
</Box>
|
||
</SectionWrapper>
|
||
);
|
||
} |