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

import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
import CardWithLink from "@components/CardWithLink";
import UnderlinedLink from "@components/UnderlinedLink";
import SectionWrapper from "@components/SectionWrapper";
import card1Image from "@root/assets/landing/card1.png";
import card2Image from "@root/assets/landing/card2.png";
import card3Image from "@root/assets/landing/card3.png";
import cardImageBig from "@root/assets/landing/card1big.png";


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>
            {templaterOnly ?
                !upMd ?
                    <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}
                        />
                    </Box>
                    :
                    <Box sx={{
                        position: "relative",
                        mt: upMd ? "93px" : "55px",
                        // height: "244px",
                        display: "flex",
                        justifyContent: "space-between",
                        py: "40px",
                        px: "20px",
                        backgroundColor: "#434657",
                        borderRadius: "12px",
                        boxShadow: `
                        0px 100px 309px rgba(37, 39, 52, 0.24),
                        0px 41.7776px 129.093px rgba(37, 39, 52, 0.172525),
                        0px 22.3363px 69.0192px rgba(37, 39, 52, 0.143066),
                        0px 12.5216px 38.6916px rgba(37, 39, 52, 0.12),
                        0px 6.6501px 20.5488px rgba(37, 39, 52, 0.0969343),
                        0px 2.76726px 8.55082px rgba(37, 39, 52, 0.0674749)
                    `,
                    }}>
                        <Box sx={{
                            display: "flex",
                            flexDirection: "column",
                        }}>
                            <Typography variant="h5">Шаблонизатор</Typography>
                            <Typography mt="20px" maxWidth="552px">Текст- это текст, который имеет некоторые характеристики реального письменного текс</Typography>
                            <UnderlinedLink
                                linkHref="#"
                                text="Подробнее"
                                endIcon={<ArrowForwardIcon sx={{ height: "20px", width: "20px" }} />}
                                sx={{
                                    mt: "auto",
                                }}
                            />
                        </Box>
                        <img
                            src={cardImageBig}
                            alt=""
                            style={{
                                display: "block",
                                objectFit: "contain",
                                pointerEvents: "none",
                                marginBottom: "-40px",
                                marginTop: "-110px",
                                maxWidth: "390px",
                            }}
                        />
                    </Box>
                :
                <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>
    );
}