improve responsiveness

src/App.tsx

@@ -1,16 +1,22 @@
-import { CssBaseline, Divider, ThemeProvider } from "@mui/material";
+import { CssBaseline, Divider, ThemeProvider, useMediaQuery } from "@mui/material";
 import { theme } from "./utils/muiTheme";
 import Landing from "./components/landing/Landing";
 import NavbarCollapsed from "./components/NavbarCollapsed";
 import Footer from "./components/Footer";
+import Navbar from "./components/Navbar";
 
 function App() {
+    const upMd = useMediaQuery(theme.breakpoints.up("md"));
+
     return (
         <ThemeProvider theme={theme}>
             <CssBaseline />
-            {/* <Navbar /> */}
+            {upMd ?
+                <Navbar />
+                :
                 <NavbarCollapsed />
-            <Divider sx={{ bgcolor: "custom.divider.main", borderColor: "#00000000" }} />
+            }
+            <Divider sx={{ bgcolor: "#E3E3E3", borderColor: "#00000000" }} />
             <Landing />
             <Footer />
         </ThemeProvider>

src/components/Footer.tsx

@@ -1,4 +1,4 @@
-import { Box, Typography, useTheme } from "@mui/material";
+import { Box, Divider, Typography, useMediaQuery, useTheme } from "@mui/material";
 import NavMenuItem from "./NavMenuItem";
 import PenaLogo from "./PenaLogo";
 import SectionWrapper from "./SectionWrapper";
@@ -6,6 +6,7 @@ import SectionWrapper from "./SectionWrapper";
 
 export default function Footer() {
     const theme = useTheme();
+    const upMd = useMediaQuery(theme.breakpoints.up("md"));
 
     return (
         <SectionWrapper
@@ -15,29 +16,40 @@ export default function Footer() {
                 backgroundColor: theme.palette.custom.darkPurple.main,
             }}
             sx={{
-                pt: "100px",
+                pt: upMd ? "100px" : "80px",
-                pb: "75px",
+                pb: upMd ? "75px" : "24px",
                 display: "flex",
                 flexDirection: "column",
                 alignItems: "center",
-                gap: "100px",
+                gap: upMd ? "90px" : undefined,
             }}
         >
             <Box
                 sx={{
                     display: "flex",
-                    width: "100%",
+                    flexDirection: upMd ? "row" : "column",
                 }}
             >
-                <PenaLogo />
                 <Box
                     sx={{
-                        display: "grid",
+                        flexBasis: upMd ? "260px" : "98px",
+                    }}
+                >
+                    <PenaLogo width={124} />
+                </Box>
+                <Box
+                    sx={{
+                        display: "flex",
+                        flexDirection: upMd ? "row" : "column",
+                        flexWrap: "wrap",
                         flexGrow: 1,
-                        justifyItems: "center",
+                        flexShrink: 1,
-                        gridTemplateColumns: "repeat(3, 1fr)",
+                        flexBasis: upMd ? "600px" : undefined,
-                        gridTemplateRows: "repeat(3, 1fr)",
+                        mb: upMd ? undefined : "30px",
-                        rowGap: "18px",
+                        gap: upMd ? undefined : "18px",
+                        "& a": {
+                            width: upMd ? "33%" : undefined,
+                        }
                     }}
                 >
                     <NavMenuItem text="Меню 1" />
@@ -51,16 +63,24 @@ export default function Footer() {
                     <NavMenuItem text="Меню 1" />
                 </Box>
                 <Typography
-                    variant="medium"
+                    variant="body2"
                     sx={{
-                        maxWidth: "275px",
+                        flexBasis: upMd ? "300px" : undefined,
+                        pr: "5%",
+                        mb: upMd ? undefined : "36px",
                     }}
                 >
                     Сервисы  помогают предпринимателям, маркетологам и агентствам
                     сделать интернет-маркетинг прозрач
                 </Typography>
             </Box>
-            <Typography variant="medium">Конструктор маркетинговых решений. © 2022</Typography>
+            {!upMd && <Divider sx={{ width: "100%", bgcolor: "white", borderColor: "#00000000" }} />}
+            <Typography
+                variant="body2"
+                sx={{
+                    mt: "25px",
+                }}
+            >Конструктор маркетинговых решений. © 2022</Typography>
         </SectionWrapper>
     );
 };

src/components/NavMenuItem.tsx

@@ -10,10 +10,13 @@ export default function NavMenuItem({ text, isActive = false }: Props) {
     const theme = useTheme();
 
     return (
-        <Link href="#" underline="none">
+        <Link
+            href="#"
+            underline="none"
+        >
             <Typography
                 color={isActive ? theme.palette.custom.brightPurple.main : undefined}
-                variant="medium"
+                variant="body2"
                 sx={{
                     whiteSpace: "nowrap",
                 }}

src/components/Navbar.tsx

@@ -12,6 +12,7 @@ export default function Navbar() {
             maxWidth="lg"
             outerContainerSx={{
                 backgroundColor: theme.palette.custom.lightPurple.main,
+                // borderBottom: "1px solid #E3E3E3",
             }}
             sx={{
                 px: "20px",

src/components/NavbarCollapsed.tsx

@@ -13,6 +13,10 @@ export default function Navbar() {
             maxWidth="lg"
             outerContainerSx={{
                 backgroundColor: theme.palette.custom.lightPurple.main,
+                position: "sticky",
+                top: 0,
+                zIndex: 1,
+                // borderBottom: "1px solid #E3E3E3",
             }}
             sx={{
                 py: "6px",
@@ -21,7 +25,7 @@ export default function Navbar() {
                 alignItems: "center",
             }}
         >
-            <PenaLogo small />
+            <PenaLogo width={100} />
             <IconButton sx={{ p: 0, height: "30px", width: "30px" }}>
                 <MenuIcon sx={{ height: "30px", width: "30px" }} />
             </IconButton>

src/components/PenaLogo.tsx

@@ -1,13 +1,13 @@
 
 
 interface Props {
-    small?: boolean;
+    width: number;
 }
 
-export default function PenaLogo({ small = false }: Props) {
+export default function PenaLogo({ width }: Props) {
 
     return (
-        <svg width={small ? "100" : "180"} height={small ? "38.71" : "70"} viewBox="0 0 180 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg width={width} viewBox="0 0 180 70" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g clip-path="url(#clip0_122_333)">
                 <path fill-rule="evenodd" clip-rule="evenodd" d="M25.9138 3.31953C18.594 2.47163 13.5439 10.3345 8.84663 16.0182C4.72431 21.0062 1.6549 26.6402 1.29838 33.1042C0.919075 39.9813 2.16658 47.1434 6.85174 52.1872C11.6777 57.3826 18.9068 60.6653 25.9138 59.604C32.3391 58.6308 35.1822 51.5749 39.9658 47.1716C45.16 42.3905 54.837 40.1667 54.7027 33.1042C54.5683 26.0308 44.3552 24.6462 39.441 19.5621C34.3509 14.2959 33.1853 4.16182 25.9138 3.31953Z" fill="#7E2AEA" />
                 <circle cx="44.126" cy="56.9181" r="4.03906" fill="#7E2AEA" />
@@ -16,7 +16,7 @@ export default function PenaLogo({ small = false }: Props) {
                 <path d="M84.5348 15.5659C83.9123 15.5661 83.2902 15.5987 82.671 15.6634C78.1535 16.1392 73.9907 18.3298 71.0405 21.7839C68.0903 25.2379 66.5776 29.6921 66.8141 34.2284C67.0507 38.7647 69.0184 43.0374 72.3119 46.1658C75.6053 49.2943 79.9734 51.0401 84.5158 51.0435C85.1384 51.0433 85.7605 51.0107 86.3797 50.9459C89.6368 50.5992 92.7351 49.3601 95.3331 47.3652C97.9312 45.3704 99.9282 42.6971 101.104 39.6399H92.4388L92.4033 39.6843C91.2933 41.0563 89.8444 42.1147 88.1999 42.7548C86.5554 43.395 84.7722 43.5947 83.0268 43.3343C81.2814 43.0738 79.6342 42.3622 78.2482 41.2698C76.8622 40.1774 75.7855 38.7421 75.1244 37.1058H101.859C102.422 34.5159 102.399 31.8328 101.79 29.2532C101.181 26.6736 100.003 24.2628 98.3424 22.1975C96.6813 20.1322 94.5791 18.4648 92.19 17.3173C89.8009 16.1698 87.1853 15.5714 84.5348 15.5659V15.5659ZM75.1244 29.5035C75.8165 27.8 76.9578 26.3163 78.4267 25.2104C79.8956 24.1046 81.6371 23.418 83.4655 23.224C83.8207 23.1871 84.1777 23.1685 84.5348 23.1682C86.5541 23.1648 88.528 23.7666 90.202 24.8958C91.876 26.025 93.1732 27.6299 93.9263 29.5035H75.1244Z" fill="white" />
                 <path d="M120.638 15.5659C117.732 15.5613 114.882 16.3602 112.402 17.8745V15.5659H104.8V51.0435H112.402V31.4041C112.402 29.2198 113.27 27.125 114.814 25.5805C116.359 24.0359 118.454 23.1682 120.638 23.1682C122.822 23.1682 124.917 24.0359 126.462 25.5805C128.006 27.125 128.874 29.2198 128.874 31.4041V51.0435H136.476V31.4041C136.476 27.2035 134.808 23.175 131.837 20.2048C128.867 17.2345 124.839 15.5659 120.638 15.5659Z" fill="white" />
                 <path d="M174.491 35.5715V15.5659H166.889V18.7335C163.917 16.6648 160.381 15.559 156.76 15.5659C156.138 15.5662 155.516 15.5987 154.896 15.6635C150.379 16.1392 146.216 18.3299 143.266 21.7839C140.316 25.2379 138.803 29.6921 139.039 34.2284C139.276 38.7647 141.244 43.0374 144.537 46.1659C147.831 49.2944 152.199 51.0402 156.741 51.0435C157.364 51.0432 157.986 51.0107 158.605 50.9459C163.023 50.4938 167.108 48.3888 170.04 45.0529C172.319 48.1011 175.618 50.2275 179.335 51.0435V43.0737C177.893 42.4204 176.669 41.3655 175.81 40.0351C174.951 38.7047 174.493 37.1551 174.491 35.5715ZM164.629 39.6843C163.793 40.7215 162.761 41.5828 161.59 42.2182C160.42 42.8537 159.135 43.2509 157.811 43.3867C157.455 43.4236 157.098 43.4422 156.741 43.4424C154.144 43.4423 151.646 42.4452 149.762 40.6567C147.879 38.8683 146.753 36.4251 146.619 33.8312C146.484 31.2374 147.35 28.6908 149.039 26.717C150.727 24.7433 153.109 23.4929 155.692 23.224C156.047 23.1871 156.403 23.1684 156.76 23.1682C158.674 23.1699 160.548 23.7133 162.166 24.7356C163.784 25.7579 165.079 27.2173 165.903 28.9451C166.726 30.6728 167.043 32.5983 166.817 34.4988C166.592 36.3993 165.833 38.1971 164.629 39.6843Z" fill="white" />
-                <g display={small ? "none" : undefined}>
+                <g display={width < 120 ? "none" : undefined}>
                     <path d="M147.519 54.8936V59.1273C148.231 58.2947 149.082 57.8784 150.072 57.8784C150.58 57.8784 151.038 57.9727 151.446 58.1612C151.855 58.3497 152.161 58.5906 152.365 58.8838C152.575 59.177 152.716 59.5017 152.79 59.8578C152.868 60.2139 152.907 60.7663 152.907 61.5151V66.4085H150.7V62.0021C150.7 61.1276 150.658 60.5725 150.575 60.3369C150.491 60.1013 150.342 59.9154 150.127 59.7792C149.917 59.6378 149.653 59.5672 149.334 59.5672C148.967 59.5672 148.64 59.6562 148.352 59.8342C148.064 60.0122 147.852 60.2819 147.716 60.6432C147.585 60.9993 147.519 61.5282 147.519 62.2299V66.4085H145.312V54.8936H147.519Z" fill="white" />
                     <path d="M160.644 66.4085V65.1597C160.341 65.6048 159.94 65.9556 159.442 66.2122C158.95 66.4688 158.429 66.5971 157.879 66.5971C157.319 66.5971 156.816 66.474 156.371 66.2279C155.926 65.9818 155.604 65.6362 155.405 65.1911C155.206 64.746 155.107 64.1307 155.107 63.3452V58.0669H157.314V61.9C157.314 63.0729 157.353 63.7929 157.432 64.06C157.515 64.3218 157.665 64.5313 157.879 64.6884C158.094 64.8402 158.366 64.9162 158.696 64.9162C159.073 64.9162 159.411 64.814 159.71 64.6098C160.008 64.4004 160.212 64.1438 160.322 63.8401C160.432 63.5311 160.487 62.7797 160.487 61.5858V58.0669H162.694V66.4085H160.644Z" fill="white" />
                     <path d="M164.894 66.4085V54.8936H167.101V59.0409C167.782 58.2659 168.588 57.8784 169.52 57.8784C170.536 57.8784 171.376 58.2476 172.041 58.9859C172.706 59.719 173.039 60.7741 173.039 62.1513C173.039 63.5756 172.699 64.6727 172.018 65.4424C171.342 66.2122 170.52 66.5971 169.551 66.5971C169.075 66.5971 168.604 66.4792 168.138 66.2436C167.677 66.0027 167.279 65.6493 166.944 65.1832V66.4085H164.894ZM167.085 62.0571C167.085 62.9211 167.221 63.5599 167.493 63.9736C167.876 64.5601 168.384 64.8533 169.017 64.8533C169.504 64.8533 169.918 64.6465 170.258 64.2328C170.604 63.8139 170.777 63.1567 170.777 62.2613C170.777 61.3083 170.604 60.6223 170.258 60.2034C169.913 59.7792 169.47 59.5672 168.931 59.5672C168.402 59.5672 167.962 59.774 167.611 60.1877C167.26 60.5961 167.085 61.2192 167.085 62.0571Z" fill="white" />

src/components/UnderlinedLink.tsx

@@ -6,9 +6,10 @@ interface Props {
     linkHref: string;
     isHighlighted?: boolean;
     sx?: SxProps<Theme>;
+    endIcon?: React.ReactNode;
 }
 
-export default function UnderlinedLink({ text, linkHref, isHighlighted = false, sx }: Props) {
+export default function UnderlinedLink({ text, linkHref, isHighlighted = false, sx, endIcon }: Props) {
 
     return (
         <Link
@@ -16,12 +17,15 @@ export default function UnderlinedLink({ text, linkHref, isHighlighted = false,
             color={isHighlighted ? "text.primary" : "text.secondary"}
             underline="none"
             sx={{
+                display: "flex",
+                gap: "3px",
                 borderBottom: isHighlighted ? "1px solid #ffffff" : "1px solid #7E2AEA",
                 pb: "3px",
                 ...sx,
             }}
         >
-            <Typography variant="medium">{text}</Typography>
+            <Typography variant="body2">{text}</Typography>
+            {endIcon}
         </Link>
     );
 }

src/components/landing/CardWithLink.tsx

@@ -1,5 +1,6 @@
 import { Box, Typography, useTheme } from "@mui/material";
 import UnderlinedLink from "../UnderlinedLink";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
 
 
 interface Props {
@@ -18,12 +19,12 @@ export default function CardWithLink({ image, headerText, text, linkHref, isHigh
             sx={{
                 display: "flex",
                 flexDirection: "column",
+                flexGrow: 1,
                 alignItems: "start",
                 padding: "20px",
                 pb: "32px",
                 maxWidth: "360px",
                 maxHeight: "434px",
-                width: "360px",
                 height: "434px",
                 backgroundColor: isHighlighted ? theme.palette.custom.brightPurple.main : theme.palette.custom.grey.main,
                 borderRadius: "12px",
@@ -50,7 +51,8 @@ export default function CardWithLink({ image, headerText, text, linkHref, isHigh
             <Typography>{text}</Typography>
             <UnderlinedLink
                 linkHref={linkHref}
-                text="Подробнее 🡲"
+                text="Подробнее"
+                endIcon={<ArrowForwardIcon sx={{ height: "20px", width: "20px" }} />}
                 isHighlighted={isHighlighted}
                 sx={{
                     mt: "auto",

src/components/landing/Infographics.tsx

@@ -1,4 +1,4 @@
-import { Box, Typography, useTheme } from "@mui/material";
+import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
 
 
 interface Props {
@@ -9,6 +9,7 @@ interface Props {
 
 export default function Infographics({ bigText, text, flex }: Props) {
     const theme = useTheme();
+    const upMd = useMediaQuery(theme.breakpoints.up("md"));
 
     return (
         <Box
@@ -23,7 +24,7 @@ export default function Infographics({ bigText, text, flex }: Props) {
                     whiteSpace: "nowrap",
                 }}
             >{bigText}</Typography>
-            <Typography sx={{ maxWidth: "10em" }}>{text}</Typography>
+            <Typography variant={upMd ? "body1" : "body2"} sx={{ maxWidth: "10em", fontWeight: 500 }}>{text}</Typography>
         </Box>
     );
 }

src/components/landing/PromoCard.tsx

@@ -8,23 +8,21 @@ interface Props {
     text: string;
     textOrientation: "row" | "column";
     sx?: SxProps<Theme>;
+    small?: boolean;
 }
 
-// TODO background images
+export default function PromoCard({ backgroundImage, headerText, text, textOrientation, sx, width, small = false }: Props) {
-export default function PromoCard({ backgroundImage, headerText, text, textOrientation, sx, width }: Props) {
     const theme = useTheme();
 
     return (
         <Box
             sx={{
-                height: "300px",
+                height: small ? "300px" : "300px",
+                mb: small ? "40px" : undefined,
                 width,
                 maxWidth: "500px",
                 borderRadius: "12px",
                 backgroundColor: theme.palette.custom.darkPurple.main,
-                backgroundImage: `url(${backgroundImage})`,
-                p: "20px",
-                overflow: "hidden",
                 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),
@@ -36,29 +34,37 @@ export default function PromoCard({ backgroundImage, headerText, text, textOrien
         >
             <Box
                 sx={{
-                    display: "flex",
+                    backgroundImage: `url(${backgroundImage})`,
-                    flexDirection: textOrientation,
+                    backgroundPosition: "15% 50%",
-                    height: textOrientation === "row" ? "2.6em" : undefined,
+                    height: small ? "340px" : "300px",
-                    width: textOrientation === "column" ? "50%" : undefined,
+                    width: "100%",
+                    borderRadius: "12px",
+                    p: "20px",
                 }}
             >
                 <Box
                     sx={{
-                        maxWidth: "80%",
+                        display: "grid",
-                        flex: "1 1 50%",
+                        gridTemplate: (small || textOrientation === "column") ? "auto auto / auto" : "2.5em / 50% 50%",
+                    }}
+                >
+                    <Box
+                        sx={{
+                            maxWidth: "140px",
                             mb: "20px",
                         }}
                     >
                         <Typography variant="h5" sx={{ maxWidth: "75%" }}>{headerText}</Typography>
                     </Box>
-                <Typography sx={{
+                    <Typography
-                    fontSize: "18.48px",
+                        sx={{
-                    lineHeight: "22px",
-                    flex: "1 1 50%",
                             overflow: "hidden",
-                    pr: "30px",
+                            maxWidth: "200px",
-                }}>{text}</Typography>
+                            maxHeight: "5.92em",
+                        }}
+                    >{text}</Typography>
                 </Box>
             </Box>
+        </Box >
     );
-}
+};

src/components/landing/Section1.tsx

@@ -34,7 +34,7 @@ export default function Section1() {
                     mb: upMd ? undefined : "30px",
                 }}
             >
-                {upMd && <PenaLogo />}
+                {upMd && <PenaLogo width={180}/>}
                 <Typography variant="h2">Сервисы прокачки маркетинга</Typography>
             </Box>
             <Box

src/components/landing/Section2.tsx

@@ -5,6 +5,7 @@ import pena_illustration03 from "../../assets/pena_illustration03.png";
 import pena_illustration04 from "../../assets/pena_illustration04.png";
 import UnderlinedLink from "../UnderlinedLink";
 import SectionWrapper from "../SectionWrapper";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
 
 
 export default function Section2() {
@@ -60,7 +61,8 @@ export default function Section2() {
                     </Typography>
                     <UnderlinedLink
                         linkHref="#"
-                        text="Подробнее 🡲"
+                        text="Подробнее"
+                        endIcon={<ArrowForwardIcon sx={{ height: "20px", width: "20px" }} />}
                         sx={{
                             mt: "auto",
                         }}

src/components/landing/Section3.tsx

@@ -3,13 +3,18 @@ import PromoCard from "./PromoCard";
 import cardPagesBackground1 from "../../assets/card-pages-background1.png";
 import cardPagesBackground2 from "../../assets/card-pages-background2.png";
 import cardPagesBackground3 from "../../assets/card-pages-background3.png";
+import cardPagesBackground4 from "../../assets/card-pages-background4.png";
+import cardPagesBackground5 from "../../assets/card-pages-background5.png";
+import cardPagesBackground6 from "../../assets/card-pages-background6.png";
 import UnderlinedLink from "../UnderlinedLink";
 import SectionWrapper from "../SectionWrapper";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
 
 
 export default function Section3() {
     const theme = useTheme();
     const upMd = useMediaQuery(theme.breakpoints.up("md"));
+    const downXs = useMediaQuery(theme.breakpoints.down("sm"));
 
     return (
         <SectionWrapper
@@ -58,7 +63,8 @@ export default function Section3() {
                 </Box>
                 <UnderlinedLink
                     linkHref="#"
-                    text="Подробнее 🡲"
+                    text="Подробнее"
+                    endIcon={<ArrowForwardIcon sx={{ height: "20px", width: "20px", display: "inline" }} />}
                 />
             </Box>
             <PromoCard
@@ -66,21 +72,24 @@ export default function Section3() {
                 headerText="Общий кабинет"
                 text="Текст-заполнитель — это текст, который имеет некоторые характеристики реального письменного"
                 textOrientation="column"
-                backgroundImage={cardPagesBackground1}
+                small={downXs}
+                backgroundImage={downXs ? cardPagesBackground4 : cardPagesBackground1}
             />
             <PromoCard
                 width={upMd ? "43.1%" : undefined}
                 headerText="Общий кабинет"
                 text="Текст-заполнитель — это текст, который имеет некоторые характеристики реального письменного"
                 textOrientation="row"
-                backgroundImage={cardPagesBackground2}
+                small={downXs}
+                backgroundImage={downXs ? cardPagesBackground5 : cardPagesBackground2}
             />
             <PromoCard
                 width={upMd ? "43.1%" : undefined}
                 headerText="Гибкие тарифы"
                 text="Текст-заполнитель — это текст, который имеет некоторые характеристики реального письменного"
                 textOrientation="column"
-                backgroundImage={cardPagesBackground3}
+                small={downXs}
+                backgroundImage={downXs ? cardPagesBackground6 : cardPagesBackground3}
                 sx={{ mt: upMd ? "102px" : undefined }}
             />
         </SectionWrapper>

src/mui.d.ts

@@ -3,7 +3,6 @@ import "@material-ui/styles";
 declare module "@mui/material/styles" {
     interface Palette {
         custom: {
-            divider: Palette["primary"],
             lightPurple: Palette["primary"],
             darkPurple: Palette["primary"],
             brightPurple: Palette["primary"],
@@ -12,7 +11,6 @@ declare module "@mui/material/styles" {
     }
     interface PaletteOptions {
         custom: {
-            divider: PaletteOptions["primary"],
             lightPurple: PaletteOptions["primary"],
             darkPurple: PaletteOptions["primary"],
             brightPurple: PaletteOptions["primary"],
@@ -20,18 +18,15 @@ declare module "@mui/material/styles" {
         };
     }
     interface TypographyVariants {
-        medium: React.CSSProperties;
         infographic: React.CSSProperties;
     }
     interface TypographyVariantsOptions {
-        medium?: React.CSSProperties;
         infographic?: React.CSSProperties;
     }
 }
 
 declare module "@mui/material/Typography" {
     interface TypographyPropsVariantOverrides {
-        medium: true;
         infographic: true;
     }
 }

src/utils/muiTheme.ts

@@ -15,9 +15,6 @@ export const theme = createTheme({
             secondary: "#7E2AEA",
         },
         custom: {
-            divider: {
-                main: "#E3E3E3",
-            },
             lightPurple: {
                 main: "#333647",
             },
@@ -35,7 +32,7 @@ export const theme = createTheme({
     breakpoints: {
         values: {
             xs: 0,
-            sm: 600,
+            sm: 540,
             md: 900,
             lg: 1200,
             xl: 1536,
@@ -56,8 +53,9 @@ export const theme = createTheme({
         body1: { // T1 в макете
             fontSize: "18px",
             lineHeight: "21.33px",
+            fontWeight: 400,
         },
-        medium: { // M1 в макете
+        body2: { // M1 в макете
             fontSize: "16px",
             lineHeight: "20px",
             fontWeight: 500,