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

import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
import UnderlinedLink from "@components/UnderlinedLink";
import WideTemplCard from "@components/wideTemplCard";
import TemplCardPhonePink from "@components/templCardPhonePink";
import SectionWrapper from "@components/SectionWrapper";

interface Props {
    templaterOnly?: boolean;
}

export default function Section2({ templaterOnly }: Props) {
    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={{
                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: upMd ? "10px" : "30px",
                    }}
                >
                    <Typography maxWidth="560px">
                        Сервисы помогают предпринимателям, маркетологам и агентствам сделать интернет-маркетинг прозрачным и
                        эффективным. С нами не придется тратить рекламный бюджет впустую и терять клиентов на сайте.
                    </Typography>
                    <UnderlinedLink
                        linkHref="#"
                        text="Подробнее"
                        endIcon={<ArrowForwardIcon sx={{ height: "20px", width: "20px" }} />}
                        sx={{
                            mt: "auto",
                        }}
                    />
                </Box>
            </Box>
            {upMd ?
                <WideTemplCard light={false} sx={{marginTop: "76px"}}/>
                :
                <TemplCardPhonePink/>}

            {/*<Box sx={{*/}
            {/*    mt: upMd ? "93px" : "55px",*/}
            {/*    display: "flex",*/}
            {/*    flexWrap: "wrap",*/}
            {/*    justifyContent: "space-evenly",*/}
            {/*    columnGap: "40px",*/}
            {/*    rowGap: "50px",*/}
            {/*}}>*/}
            {/*    <CardWithLink*/}
            {/*        headerText="Шаблонизатор"*/}
            {/*        text="Текст- это текст, который имеет некоторые характеристики реального письменного текс"*/}
            {/*        linkHref="#"*/}
            {/*        image={card1Image}*/}
            {/*        isHighlighted={!upMd}*/}
            {/*    />*/}
            {/*    <CardWithLink*/}
            {/*        headerText="Опросник"*/}
            {/*        text="Текст- это текст, который имеет некоторые характеристики реального письменного текс"*/}
            {/*        linkHref="#"*/}
            {/*        image={card2Image}*/}
            {/*    />*/}
            {/*    <CardWithLink*/}
            {/*        headerText="Сокращатель ссылок"*/}
            {/*        text="Текст- это текст, который имеет некоторые характеристики реального письменного текс"*/}
            {/*        linkHref="#"*/}
            {/*        image={card3Image}*/}
            {/*    />*/}
            {/*</Box>*/}

        </SectionWrapper>
    );
}