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

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>
    );
}