style Landing

src/components/wideTemplCard.tsx

@@ -1,14 +1,17 @@
-import { Box, Typography, SxProps, Theme, Button } from "@mui/material";
+import { Box, Typography, SxProps, Theme, Button, useTheme, useMediaQuery } from "@mui/material";
 import cardImageBig from "@root/assets/landing/card1big.png";
 import { PenaLink } from "@frontend/kitui";
 import { Link as RouterLink } from "react-router-dom";
 
 interface Props {
-    light?: boolean;
-    sx?: SxProps<Theme>;
+  light?: boolean;
+  sx?: SxProps<Theme>;
 }
 
 export default function WideTemplCard({ light = true, sx }: Props) {
+  const theme = useTheme();
+  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
+
   return (
     <Box
       sx={{
@@ -19,7 +22,6 @@ export default function WideTemplCard({ light = true, sx }: Props) {
         px: "20px",
         backgroundColor: light ? "#E6E6EB" : "#434657",
         borderRadius: "12px",
-
         ...sx,
       }}
     >
@@ -31,7 +33,7 @@ export default function WideTemplCard({ light = true, sx }: Props) {
         }}
       >
         <Typography variant="h5">Шаблонизатор</Typography>
-        <Typography mt="20px" maxWidth="552px">
+        <Typography sx={{ marginTop: isTablet ? "10px" : "20px" }} maxWidth="552px">
           Текст- это текст, который имеет некоторые характеристики реального письменного текс
         </Typography>
         {light ? (

src/pages/Landing/PromoCard.tsx

@@ -4,6 +4,8 @@ interface Props {
   width?: string;
   backgroundImage: string;
   headerText: string;
+  backgroundPosition: string;
+  backgroundSize: string;
   text: string;
   textOrientation: "row" | "column";
   sx?: SxProps<Theme>;
@@ -14,6 +16,8 @@ export default function PromoCard({
   backgroundImage,
   headerText,
   text,
+  backgroundSize,
+  backgroundPosition,
   textOrientation,
   sx,
   width,
@@ -45,20 +49,21 @@ export default function PromoCard({
     >
       <Box
         sx={{
-          backgroundSize: isTablet ? "contain" : "cover",
+          backgroundSize: backgroundSize,
           backgroundRepeat: "no-repeat",
           backgroundImage: `url(${backgroundImage})`,
-          backgroundPosition: "15% 50%",
+          backgroundPosition: backgroundPosition,
           height: small ? "340px" : "300px",
           width: "100%",
           borderRadius: "12px",
+
           p: "20px",
         }}
       >
         <Box
           sx={{
             display: "grid",
-            gridTemplate: small || textOrientation === "column" ? "auto auto / auto" : "2.5em / 50% 50%",
+            gridTemplate: small || textOrientation === "column" ? "auto auto / auto" : "2.5em / 30% 50%",
           }}
         >
           <Box

src/pages/Landing/Section2.tsx

@@ -17,7 +17,7 @@ export default function Section2() {
       maxWidth="lg"
       outerContainerSx={{
         backgroundColor: theme.palette.bg.dark,
-        mb: "-90px",
+        mb: "-68px",
       }}
       sx={{
         pt: upMd ? "90px" : "50px",
@@ -28,7 +28,7 @@ export default function Section2() {
         sx={{
           display: "flex",
           flexDirection: upMd ? "row" : "column",
-          gap: "3.5%",
+          gap: isTablet ? "16.5%" : "3.5%",
         }}
       >
         <Typography

src/pages/Landing/Section3.tsx

@@ -14,11 +14,11 @@ export default function Section3() {
   const theme = useTheme();
   const upMd = useMediaQuery(theme.breakpoints.up("md"));
   const downXs = useMediaQuery(theme.breakpoints.down("sm"));
+  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
+  const isMobile = useMediaQuery(theme.breakpoints.down(600));
 
   console.log(downXs);
 
-  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
-
   return (
     <SectionWrapper
       component="section"
@@ -29,13 +29,13 @@ export default function Section3() {
       sx={{
         display: "flex",
         pt: upMd ? "185px" : "155px",
-        pb: upMd ? "100px" : "70px",
+        pb: upMd ? "90px" : "70px",
         px: isTablet ? (upMd ? "40px" : "18px") : "20px",
         // width: "fit-content",
         margin: "auto",
         flexDirection: isTablet ? "column" : "row",
         flexWrap: "wrap",
-        rowGap: upMd ? "63px" : "30px",
+        rowGap: upMd ? "40px" : "30px",
         columnGap: "13.8%",
         justifyContent: "space-between",
       }}
@@ -47,20 +47,20 @@ export default function Section3() {
           alignItems: "start",
           maxWidth: "500px",
           width: isTablet ? undefined : "43.1%",
-          mb: "10px",
+          mb: isTablet ? "20px" : "10px",
         }}
       >
         <Typography
           variant="h4"
           sx={{
-            mb: isTablet ? "70px" : "30px",
+            mb: upMd ? "67px" : "30px",
           }}
         >
           Узнайте, как наши сервисы решают ваши задачи
         </Typography>
         <Box
           sx={{
-            mb: isTablet ? "20px" : "30px",
+            mb: upMd ? "20px" : "30px",
           }}
         >
           <Typography>Покажут эффективность рекламы</Typography>
@@ -72,28 +72,32 @@ export default function Section3() {
         </PenaLink>
       </Box>
       <PromoCard
-        width={isTablet ? (upMd ? "85%" : "100%") : "43.1%"}
+        width={isTablet ? (upMd ? "87%" : "100%") : "43.1%"}
         headerText="Общий кабинет"
         text="Текст-заполнитель — это текст, который имеет некоторые характеристики реального письменного"
         textOrientation="column"
         small={downXs}
-        backgroundImage={downXs ? cardPagesBackground4 : cardPagesBackground1}
+        backgroundSize={isTablet ? "contain" : "100% 300px"}
+        backgroundImage={downXs ? cardPagesBackground6 : cardPagesBackground1}
+        backgroundPosition={isTablet ? (isMobile ? "15% 50%" : "bottom right -1px") : "bottom right -165px"}
         sx={{
           alignSelf: "center",
           maxWidth: isTablet ? "100%" : "500px",
-          marginRight: isTablet ? (upMd ? "100px" : "0") : "0",
+          marginRight: isTablet ? (upMd ? "120px" : "0") : "0",
         }}
       />
       <PromoCard
-        width={isTablet ? (upMd ? "85%" : "100%") : "43.1%"}
+        width={isTablet ? (upMd ? "87%" : "100%") : "43.1%"}
         headerText="Общий кабинет"
         text="Текст-заполнитель — это текст, который имеет некоторые характеристики реального письменного"
         textOrientation="row"
         small={downXs}
-        backgroundImage={downXs ? cardPagesBackground5 : cardPagesBackground2}
+        backgroundSize={"contain"}
+        backgroundImage={downXs ? cardPagesBackground6 : cardPagesBackground2}
+        backgroundPosition={isTablet ? (isMobile ? "15% 50%" : "bottom right -1px") : "bottom right 0px"}
         sx={{
           alignSelf: "center",
-          marginLeft: isTablet ? (upMd ? "100px" : "0") : "0",
+          marginLeft: isTablet ? (upMd ? "120px" : "0") : "0",
           mt: isTablet ? null : "-82px",
           maxWidth: isTablet ? "100%" : "500px",
         }}
@@ -104,7 +108,9 @@ export default function Section3() {
         text="Текст-заполнитель — это текст, который имеет некоторые характеристики реального письменного"
         textOrientation="column"
         small={downXs}
+        backgroundSize={isTablet ? "contain" : "100% 300px"}
         backgroundImage={downXs ? cardPagesBackground6 : cardPagesBackground3}
+        backgroundPosition={isTablet ? (isMobile ? "15% 50%" : "bottom right -1px") : "bottom right -165px"}
         sx={{
           mt: isTablet ? null : "82px",
           alignSelf: "center",

src/pages/Landing/Section4.tsx

@@ -5,10 +5,9 @@ import Infographics from "./Infographics";
 export default function Section4() {
   const theme = useTheme();
   const upMd = useMediaQuery(theme.breakpoints.up("md"));
-  const isMobile = useMediaQuery(theme.breakpoints.down(380));
   const isTablet = useMediaQuery(theme.breakpoints.down(1000));
 
-  const itemsFlex = upMd ? "0 0 25.1%" : "1 0 35%";
+  const itemsFlex = upMd ? " 0 0 31.1%" : "0 0 25.1%";
 
   return (
     <SectionWrapper

src/pages/Landing/Section5.tsx

@@ -30,7 +30,7 @@ export default function Section5() {
         </Typography>
         <Typography
           sx={{
-            maxWidth: upMd ? "79.3%" : "100%",
+            maxWidth: isTablet ? "100%" : "79.3%",
             gridRow: upMd ? "span 2" : "",
             justifySelf: upMd ? "end" : "start",
             mb: upMd ? undefined : "50px",