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

import { Box, Button, Typography, useMediaQuery, useTheme } from "@mui/material"
import SectionWrapper from "@components/SectionWrapper"
import mainShapeVideo from "../../assets/animations/main.webm"
import previewMain from "../../assets/animations/preview_main.png"

declare module "react" {
  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    pip?: string;
  }
}

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

	return (
		<SectionWrapper
			component="section"
			maxWidth="lg"
			outerContainerSx={{
				backgroundColor: theme.palette.bg.main,
			}}
			sx={{
				display: "flex",
				pt: upMd ? "20px" : "20px",
				px: !isTablet ? (upMd ? "40px" : "18px") : "20px",
				pb: "10px",
				flexDirection: upMd ? "row" : "column",
			}}
		>
			<Box
				sx={{
					display: "flex",
					flexDirection: "column",
					flexGrow: 1,
					order: upMd ? 1 : 2,
					maxWidth: "700px",
					mt: upMd ? "85px" : "40px",
					mb: upMd ? "104px" : "70px",
					alignItems: "start",
				}}
			>
				<Typography sx={{ maxWidth: !isTablet ? "500px" : "100%" }} variant="h2">
          Сервисы прокачки маркетинга и бизнеса
				</Typography>

				<Typography mt="35px" maxWidth="380px">
          Автоматизация и новые источники трафика в единой экосистеме
				</Typography>
				{/*<Typography mt="11.5px">И все это в едином кабинете</Typography>*/}
				{/*<Button variant="pena-contained-dark" sx={{ mt: "40px" }}>*/}
				{/*  Подробнее*/}
				{/*</Button>*/}
			</Box>
			<Box
				sx={{
					ml: upMd ? "-100px" : undefined,
					mb: "-40px",
					flexShrink: 1,
					textAlign: "center",
					order: upMd ? 2 : 1,
					alignSelf: "center",
					aspectRatio: "1 / 1",
					width: upMd ? undefined : "100%",
					maxHeight: upMd ? "550px" : "300px",
				}}
			>
				<video
					autoPlay
					loop
					pip="false"
					muted
					playsInline
					poster={previewMain}
					style={{
						display: "block",
						width: "100%",
						height: "100%",
					}}
				>
					<source src={mainShapeVideo} type="video/webm" />
          Your browser doesn"t support HTML5 video tag.,
				</video>
			</Box>
		</SectionWrapper>
	)
}