front-hub/src/components/landing/Section2.tsx

import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import CardWithLink from "./CardWithLink";
import pena_illustration01 from "../../assets/pena_illustration01.png";
import pena_illustration03 from "../../assets/pena_illustration03.png";
import pena_illustration04 from "../../assets/pena_illustration04.png";
import UnderlinedLink from "../UnderlinedLink";
import SectionWrapper from "../SectionWrapper";
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";


export default function Section2() {
    const theme = useTheme();
    const upMd = useMediaQuery(theme.breakpoints.up("md"));

    return (
        <SectionWrapper
            component="section"
            maxWidth="lg"
            outerContainerSx={{
                backgroundColor: theme.palette.custom.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 ? "40px" : "30px",
                }}
            >
                <CardWithLink
                    headerText="Шаблонизатор"
                    text="Текст- это текст, который имеет некоторые характеристики реального письменного текс"
                    isHighlighted
                    linkHref="#"
                    image={pena_illustration03}
                />
                <CardWithLink
                    headerText="Опросник"
                    text="Текст- это текст, который имеет некоторые характеристики реального письменного текс"
                    linkHref="#"
                    image={pena_illustration04}
                />
                <CardWithLink
                    headerText="Сокращатель ссылок"
                    text="Текст- это текст, который имеет некоторые характеристики реального письменного текс"
                    linkHref="#"
                    image={pena_illustration01}
                />
            </Box>
        </SectionWrapper>
    );
}