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

import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import WideTemplCard from "@components/wideTemplCard";
import TemplCardPhonePink from "@components/templCardPhonePink";
import SectionWrapper from "@components/SectionWrapper";
import { PenaLink } from "@frontend/kitui";
import { Link as RouterLink } from "react-router-dom";

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

  const isTablet = useMediaQuery(theme.breakpoints.down(1000));

  return (
    <SectionWrapper
      component="section"
      maxWidth="lg"
      outerContainerSx={{
        backgroundColor: theme.palette.bg.dark,
        mb: "-68px",
      }}
      sx={{
        pt: upMd ? "90px" : "50px",
        px: isTablet ? (upMd ? "40px" : "18px") : "20px",
      }}
    >
      <Box
        sx={{
          display: "flex",
          flexDirection: upMd ? "row" : "column",
          gap: isTablet ? "16.5%" : "3.5%",
        }}
      >
        <Typography
          variant="h4"
          sx={{
            flexGrow: 1,
            flexBasis: "31%",
            maxWidth: "50%",
          }}
        >
          Интеграции, избавляющие <br /> от рутины
        </Typography>
        <Box
          sx={{
            display: "flex",
            flexDirection: "column",
            gap: "30px",
            alignItems: "start",
            flexGrow: 1,
            flexBasis: "65.5%",
            mt: upMd ? "10px" : "30px",
          }}
        >
          <Typography sx={{ fontSize: upMd ? "18px" : "17px" }} maxWidth="560px">
            Сервисы помогают предпринимателям, маркетологам и агентствам сделать интернет-маркетинг прозрачным и
            эффективным. С нами не придется тратить рекламный бюджет впустую и терять клиентов на сайте.
          </Typography>
          <PenaLink component={RouterLink} to="/">
            Подробнее
          </PenaLink>
        </Box>
      </Box>
      {upMd ? <WideTemplCard light={false} sx={{ marginTop: "73px" }} /> : <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>
  );
}