front-hub/src/pages/Landing/Section2.tsx

123 lines
4.1 KiB
TypeScript
Raw Normal View History

2022-11-18 16:51:10 +00:00
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
2022-11-19 12:39:57 +00:00
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
import CardWithLink from "@components/CardWithLink";
import UnderlinedLink from "@components/UnderlinedLink";
import SectionWrapper from "@components/SectionWrapper";
2022-12-24 12:36:05 +00:00
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";
2022-11-17 12:25:23 +00:00
export default function Section2() {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
2022-11-17 12:25:23 +00:00
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" }} />}
2022-11-18 16:51:10 +00:00
sx={{
mt: "auto",
2022-11-17 12:25:23 +00:00
}}
/>
</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>
);
}