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

import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";

import CustomButton from "@components/CustomButton";
import PenaLogo from "@components/PenaLogo";
import SectionWrapper from "@components/SectionWrapper";

import mainShapeVideo from "../../assets/animations/main.webm";
import previewMain from "../../assets/animations/preview_main.png";

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

  return (
    <SectionWrapper
      component="section"
      maxWidth="lg"
      outerContainerSx={{
        backgroundColor: theme.palette.lightPurple.main,
      }}
      sx={{
        display: "flex",
        pt: upMd ? "70px" : "20px",
        pb: "70px",
        justifyContent: "space-between",
        flexDirection: upMd ? "row" : "column",
      }}
    >
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          flexBasis: upMd ? "310px" : undefined,
          gap: "70px",
          order: upMd ? 1 : 2,
          mb: upMd ? undefined : "30px",
        }}
      >
        {upMd && <PenaLogo width={180} />}
        <Typography variant="h2">Сервисы прокачки маркетинга</Typography>
      </Box>
      <Box
        sx={{
          flexShrink: 1,
          textAlign: "center",
          order: upMd ? 2 : 1,
          mx: upMd ? "30px" : 0,
          // mt: upMd ? undefined : "-70px",
          // mb: upMd ? undefined : "-30px",
          alignSelf: "center",
          aspectRatio: "1 / 1",
          width: upMd ? undefined : "100%",
          maxWidth: "301px",
          maxHeight: "301px",
        }}
      >
        <video
          autoPlay
          loop
          muted
          playsInline
          poster={previewMain}
          style={{
            width: "100%",
            height: "100%",
            // transform: upMd ? undefined : "rotate(-90deg)",
          }}
        >
          <source src={mainShapeVideo} type="video/webm" />
          Your browser doesn't support HTML5 video tag.
        </video>
      </Box>
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          flexBasis: upMd ? "360px" : undefined,
          alignItems: "start",
          alignSelf: upMd ? "center" : "start",
          mt: upMd ? "70px" : undefined,
          order: 3,
        }}
      >
        <Box sx={{ mb: "11px" }}>
          <Typography>Покажут эффективность рекламы</Typography>
          <Typography>Соберут все обращения клиентов</Typography>
          <Typography>Повысят конверсию сайта</Typography>
        </Box>
        <Typography sx={{ mb: "40px" }}>И все это в едином кабинете</Typography>
        <CustomButton
          variant="contained"
          sx={{
            backgroundColor: theme.palette.brightPurple.main,
            color: theme.palette.primary.main,
          }}
        >
          Подробнее
        </CustomButton>
      </Box>
    </SectionWrapper>
  );
}