Merge branch 'support-backend-integration' of penahub.gitlab.yandexcloud.net:frontend/marketplace into support-backend-integration

2023-04-06 18:35:19 +03:00 · 2023-04-06 18:35:19 +03:00 · 87a0bc3101
commit 87a0bc3101
parent ef7685cfec 601b954339
29 changed files with 689 additions and 644 deletions
--- a/src/mocks/CustomRadioButtonsMocks.ts
+++ b/src/mocks/CustomRadioButtonsMocks.ts
@ -1,5 +1,5 @@
 export const _mocsk_ = [
  { name: "Шаблонизатор", type: "templ" },
  { name: "Опросник", type: "squiz" },
-  { name: "Сокращатель ссылок", type: "reduce" },
+  { name: "Сокращатель ссылок", type: "reducer" },
 ];
--- a/src/mocks/showCaseObject.ts
+++ b/src/mocks/showCaseObject.ts
@ -20,5 +20,5 @@ export const showCaseObject: Record<
 > = {
  templ: { volume: showCaseVolume, time: showCaseTime },
  squiz: { volume: showCaseVolume, time: showCaseTime },
-  reduce: { volume: showCaseVolume, time: showCaseTime },
+  reducer: { volume: showCaseVolume, time: showCaseTime },
 };
--- a/src/pages/Basket/AccordionWrapper.tsx
+++ b/src/pages/Basket/AccordionWrapper.tsx
@ -1,5 +1,5 @@
 import { Box } from "@mui/material";
-import CustomAccordionBasket from "../../components/CustomAccordionBasket";
+import CustomAccordionBasket from "./CustomAccordionBasket";

 interface Props {
  content: { title: string; data: [string, number][] }[];
--- a/src/components/ComplexNavText.tsx
+++ b/src/components/ComplexNavText.tsx
@ -1,39 +1,44 @@
 import { Typography, useTheme } from "@mui/material";
-
+import { useNavigate } from "react-router-dom";

 interface Props {
-    text1: string;
-    text2?: string;
+  text1: string;
+  text2: string;
 }

 export default function ComplexNavText({ text1, text2 }: Props) {
-    const theme = useTheme();
+  const theme = useTheme();
+  const navigate = useNavigate();

-    return (
-        <Typography
-            sx={{
-                fontWeight: 400,
-                fontSize: "12px",
-                lineHeight: "14px",
-                color: theme.palette.grey2.main,
-            }}
-        >
-            {text1}
-            {text2 &&
-                <Typography
-                    component="span"
-                    sx={{
-                        fontWeight: 400,
-                        fontSize: "12px",
-                        lineHeight: "14px",
-                        color: theme.palette.fadePurple.main,
-                        textUnderlinePosition: "under",
-                        textDecorationColor: theme.palette.brightPurple.main,
-                    }}
-                >
-                    {text2}
-                </Typography>
-            }
-        </Typography>
-    );
-}
+  return (
+    <Typography component="div" sx={{ display: "flex" }}>
+      <Typography
+        component="div"
+        onClick={() => navigate("/tariffs")}
+        sx={{
+          cursor: "pointer",
+          fontWeight: 400,
+          fontSize: "12px",
+          lineHeight: "14px",
+          color: theme.palette.grey2.main,
+        }}
+      >
+        {text1}
+      </Typography>
+      <Typography
+        component="span"
+        sx={{
+          cursor: "default",
+          fontWeight: 400,
+          fontSize: "12px",
+          lineHeight: "14px",
+          color: theme.palette.fadePurple.main,
+          textUnderlinePosition: "under",
+          textDecorationColor: theme.palette.brightPurple.main,
+        }}
+      >
+        {text2}
+      </Typography>
+    </Typography>
+  );
+}
--- a/src/components/CustomRadioButtons.tsx
+++ b/src/components/CustomRadioButtons.tsx
@ -6,7 +6,7 @@ type Props = {
  _mocsk_: { name: string; type: string }[];
 };

-export const CustomRadioButtons: React.FC<Props> = ({ setType, _mocsk_ }) => {
+export default function CustomRadioButtons({ setType, _mocsk_ }: Props) {
  const theme = useTheme();
  const upSm = useMediaQuery(theme.breakpoints.up("sm"));
  const [active, setActive] = useState<number>(0);
@ -22,10 +22,10 @@ export const CustomRadioButtons: React.FC<Props> = ({ setType, _mocsk_ }) => {
        marginLeft: "-10px",
        width: upSm ? "430px" : "auto",
        display: "flex",
+        flexWrap: upSm ? "" : "wrap",
        fontWeight: "500",
        fontSize: " 16px",
        whiteSpace: "nowrap",
-        overflow: upSm ? "" : "hidden",
      }}
    >
      {_mocsk_.map(({ name, type }, index) =>
@ -43,4 +43,4 @@ export const CustomRadioButtons: React.FC<Props> = ({ setType, _mocsk_ }) => {
      )}
    </List>
  );
-};
+}
--- a/src/components/Drawer/CustomWrapperDrawer.tsx
+++ b/src/components/Drawer/CustomWrapperDrawer.tsx
@ -25,7 +25,7 @@ export default function CustomWrapperDrawer({ type, content }: Props) {
  const { remove } = basketStore();

  const totalSum = Object.values(content).reduce((accamulator, { price }) => (accamulator += price), 0);
-  const name: Record<string, string> = { templ: "Шаблонизатор", squiz: "Опросник", reduce: "Скоращатель ссылок" };
+  const name: Record<string, string> = { templ: "Шаблонизатор", squiz: "Опросник", reducer: "Скоращатель ссылок" };

  return (
    <Box
--- a/src/components/Drawer/DrawerTotalPrice.tsx
+++ b/src/components/Drawer/DrawerTotalPrice.tsx
@ -1,85 +0,0 @@
-import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
-import { useNavigate } from "react-router-dom";
-
-import CustomButton from "../CustomButton";
-
-export const DrawerTotalPrice = () => {
-  const theme = useTheme();
-  const upMd = useMediaQuery(theme.breakpoints.up("md"));
-  const navigate = useNavigate();
-  return (
-    <Box
-      sx={{
-        mt: "40px",
-        pt: upMd ? "30px" : undefined,
-        borderTop: upMd ? `1px solid ${theme.palette.grey2.main}` : undefined,
-      }}
-    >
-      <Box
-        sx={{
-          width: upMd ? "100%" : undefined,
-          display: "flex",
-          flexWrap: "wrap",
-          flexDirection: "column",
-        }}
-      >
-        <Typography variant="h4" mb={upMd ? "18px" : "30px"}>
-          Итоговая цена
-        </Typography>
-        <Typography color={theme.palette.grey3.main}>
-          Текст-заполнитель — это текст, который имеет Текст-заполнитель — это текст, который имеет Текст-заполнитель —
-          это текст, который имеет Текст-заполнитель — это текст, который имеет Текст-заполнитель
-        </Typography>
-      </Box>
-      <Box
-        sx={{
-          color: theme.palette.grey3.main,
-          pb: "100px",
-          pt: "38px",
-          pl: upMd ? "20px" : undefined,
-        }}
-      >
-        <Box
-          sx={{
-            display: "flex",
-            flexDirection: upMd ? "column" : "row",
-            alignItems: upMd ? "start" : "center",
-            mt: upMd ? "10px" : "30px",
-            gap: "15px",
-          }}
-        >
-          <Typography
-            color={theme.palette.orange.main}
-            sx={{
-              textDecoration: "line-through",
-              order: upMd ? 1 : 2,
-            }}
-          >
-            20 190 руб.
-          </Typography>
-          <Typography
-            variant="p1"
-            sx={{
-              fontWeight: 500,
-              fontSize: "26px",
-              lineHeight: "31px",
-              order: upMd ? 2 : 1,
-            }}
-          >
-            6 380 руб.
-          </Typography>
-        </Box>
-        <CustomButton
-          variant="contained"
-          onClick={() => navigate("/basket")}
-          sx={{
-            mt: "25px",
-            backgroundColor: theme.palette.brightPurple.main,
-          }}
-        >
-          Оплатить
-        </CustomButton>
-      </Box>
-    </Box>
-  );
-};
--- a/src/components/Drawer/Drawers.tsx
+++ b/src/components/Drawer/Drawers.tsx
@ -1,86 +0,0 @@
-import { Typography, Drawer, useMediaQuery, useTheme, Box, IconButton, SvgIcon } from "@mui/material";
-import { IconsCreate } from "@root/lib/IconsCreate";
-import ArrowBackIcon from "@mui/icons-material/ArrowBack";
-import ClearIcon from "@mui/icons-material/Clear";
-
-import { basketStore } from "@root/stores/BasketStore";
-import { useState } from "react";
-
-import BasketIcon from "../../assets/Icons/BasketIcon.svg";
-import SectionWrapper from "../SectionWrapper";
-import React from "react";
-import CustomWrapperDrawer from "./CustomWrapperDrawer";
-import { DrawerTotalPrice } from "./DrawerTotalPrice";
-
-interface TabPanelProps {
-  index: number;
-  value: number;
-  children?: React.ReactNode;
-  mt: string;
-}
-
-function TabPanel({ index, value, children, mt }: TabPanelProps) {
-  return (
-    <Box hidden={index !== value} sx={{ mt }}>
-      {children}
-    </Box>
-  );
-}
-
-export const Drawers = () => {
-  const [tabIndex, setTabIndex] = useState<number>(0);
-  const { templ, squiz, reducer, open, openDrawer } = basketStore();
-  const theme = useTheme();
-  const upMd = useMediaQuery(theme.breakpoints.up("md"));
-
-  return (
-    <Typography component="div">
-      <Typography onClick={open(true)}>
-        <IconsCreate svg={BasketIcon} bgcolor="#F2F3F7" />
-      </Typography>
-
-      <Drawer anchor={"right"} open={openDrawer} onClose={open(false)}>
-        <SectionWrapper
-          maxWidth="lg"
-          sx={{
-            pl: "0px",
-            pr: "0px",
-            width: "450px",
-          }}
-        >
-          <Box
-            sx={{
-              width: "100%",
-              pt: "20px",
-              pb: "20px",
-              display: "flex",
-              justifyContent: "space-between",
-              bgcolor: "#F2F3F7",
-              gap: "10px",
-              pl: "20px",
-              pr: "20px",
-            }}
-          >
-            {!upMd && (
-              <IconButton sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
-                <ArrowBackIcon />
-              </IconButton>
-            )}
-            <Typography component="div" sx={{ fontSize: "18px", lineHeight: "21px", font: "Rubick" }}>
-              Корзина
-            </Typography>
-            <SvgIcon onClick={open(false)} sx={{ cursor: "pointer" }} component={ClearIcon} />
-          </Box>
-          <Box sx={{ pl: "20px", pr: "20px" }}>
-            <TabPanel value={tabIndex} index={0} mt={"10px"}>
-              {Object.keys(templ).length > 0 ? <CustomWrapperDrawer type="templ" content={templ} /> : <></>}
-              {Object.keys(squiz).length > 0 ? <CustomWrapperDrawer type="squiz" content={squiz} /> : <></>}
-              {Object.keys(reducer).length > 0 ? <CustomWrapperDrawer type="reducer" content={reducer} /> : <></>}
-            </TabPanel>
-            <DrawerTotalPrice />
-          </Box>
-        </SectionWrapper>
-      </Drawer>
-    </Typography>
-  );
-};
--- a/src/components/Drawers.tsx
+++ b/src/components/Drawers.tsx
@ -0,0 +1,216 @@
+import React, { useEffect } from "react";
+import { Typography, Drawer, useMediaQuery, useTheme, Box, IconButton, SvgIcon, Icon } from "@mui/material";
+import { IconsCreate } from "@root/lib/IconsCreate";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import ClearIcon from "@mui/icons-material/Clear";
+
+import { basketStore } from "@root/stores/BasketStore";
+import { useState } from "react";
+
+import BasketIcon from "../assets/Icons/BasketIcon.svg";
+import SectionWrapper from "./SectionWrapper";
+import CustomWrapperDrawer from "./CustomWrapperDrawer";
+import CustomButton from "./CustomButton";
+import { useNavigate } from "react-router";
+
+interface TabPanelProps {
+  index: number;
+  value: number;
+  children?: React.ReactNode;
+  mt: string;
+}
+
+type basketStore = {
+  name: string;
+  desc: string;
+  id: string;
+  privelegeid: string;
+  amount: number;
+  price: number;
+}[];
+
+function TabPanel({ index, value, children, mt }: TabPanelProps) {
+  return (
+    <Box hidden={index !== value} sx={{ mt }}>
+      {children}
+    </Box>
+  );
+}
+
+export default function Drawers() {
+  const [tabIndex, setTabIndex] = useState<number>(0);
+  const [basketQuantity, setBasketQuantity] = useState<number>();
+  const navigate = useNavigate();
+  const { templ, squiz, reducer, open, openDrawer } = basketStore();
+  const theme = useTheme();
+  const upMd = useMediaQuery(theme.breakpoints.up("md"));
+
+  const newArray: basketStore = [].concat(Object.values(templ), Object.values(squiz), Object.values(reducer));
+  const sum = newArray.reduce((accamulator, { price }) => (accamulator += price), 0);
+
+  useEffect(() => {
+    setBasketQuantity(Object.keys(templ).length + Object.keys(squiz).length + Object.keys(reducer).length);
+  }, [templ, squiz, reducer]);
+
+  return (
+    <IconButton sx={{ p: 0 }}>
+      <Typography onClick={open(true)} component="div" sx={{ position: "absolute" }}>
+        <IconsCreate svg={BasketIcon} bgcolor="#F2F3F7" />
+      </Typography>
+      {basketQuantity && (
+        <Icon
+          component="div"
+          sx={{
+            position: "relative",
+            left: "8px",
+            bottom: "7px",
+
+            width: "16px",
+            height: "16px",
+            backgroundColor: "#7E2AEA",
+            borderRadius: "12px",
+          }}
+        >
+          <Typography
+            component="div"
+            sx={{
+              display: "flex",
+              fontSize: "12px",
+              mt: "4.5px",
+              width: "100%",
+              height: "9px",
+              color: "white",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            {basketQuantity}
+          </Typography>
+        </Icon>
+      )}
+
+      <Drawer anchor={"right"} open={openDrawer} onClose={open(false)}>
+        <SectionWrapper
+          maxWidth="lg"
+          sx={{
+            pl: "0px",
+            pr: "0px",
+            width: "450px",
+          }}
+        >
+          <Box
+            sx={{
+              width: "100%",
+              pt: "20px",
+              pb: "20px",
+              display: "flex",
+              justifyContent: "space-between",
+              bgcolor: "#F2F3F7",
+              gap: "10px",
+              pl: "20px",
+              pr: "20px",
+            }}
+          >
+            {!upMd && (
+              <IconButton sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
+                <ArrowBackIcon />
+              </IconButton>
+            )}
+            <Typography
+              component="div"
+              sx={{
+                fontSize: "18px",
+                lineHeight: "21px",
+                font: "Rubick",
+              }}
+            >
+              Корзина
+            </Typography>
+            <SvgIcon onClick={open(false)} sx={{ cursor: "pointer" }} component={ClearIcon} />
+          </Box>
+          <Box sx={{ pl: "20px", pr: "20px" }}>
+            <TabPanel value={tabIndex} index={0} mt={"10px"}>
+              {Object.keys(templ).length > 0 ? <CustomWrapperDrawer type="templ" content={templ} /> : <></>}
+              {Object.keys(squiz).length > 0 ? <CustomWrapperDrawer type="squiz" content={squiz} /> : <></>}
+              {Object.keys(reducer).length > 0 ? <CustomWrapperDrawer type="reducer" content={reducer} /> : <></>}
+            </TabPanel>
+            <Box
+              sx={{
+                mt: "40px",
+                pt: upMd ? "30px" : undefined,
+                borderTop: upMd ? `1px solid ${theme.palette.grey2.main}` : undefined,
+              }}
+            >
+              <Box
+                sx={{
+                  width: upMd ? "100%" : undefined,
+                  display: "flex",
+                  flexWrap: "wrap",
+                  flexDirection: "column",
+                }}
+              >
+                <Typography variant="h4" mb={upMd ? "18px" : "30px"}>
+                  Итоговая цена
+                </Typography>
+                <Typography color={theme.palette.grey3.main}>
+                  Текст-заполнитель — это текст, который имеет Текст-заполнитель — это текст, который имеет
+                  Текст-заполнитель — это текст, который имеет Текст-заполнитель — это текст, который имеет
+                  Текст-заполнитель
+                </Typography>
+              </Box>
+              <Box
+                sx={{
+                  color: theme.palette.grey3.main,
+                  pb: "100px",
+                  pt: "38px",
+                  pl: upMd ? "20px" : undefined,
+                }}
+              >
+                <Box
+                  sx={{
+                    display: "flex",
+                    flexDirection: upMd ? "column" : "row",
+                    alignItems: upMd ? "start" : "center",
+                    mt: upMd ? "10px" : "30px",
+                    gap: "15px",
+                  }}
+                >
+                  <Typography
+                    color={theme.palette.orange.main}
+                    sx={{
+                      textDecoration: "line-through",
+                      order: upMd ? 1 : 2,
+                    }}
+                  >
+                    20 190 руб.
+                  </Typography>
+                  <Typography
+                    variant="p1"
+                    sx={{
+                      fontWeight: 500,
+                      fontSize: "26px",
+                      lineHeight: "31px",
+                      order: upMd ? 2 : 1,
+                    }}
+                  >
+                    {sum} руб.
+                  </Typography>
+                </Box>
+                <CustomButton
+                  variant="contained"
+                  onClick={() => navigate("/basket")}
+                  sx={{
+                    mt: "25px",
+                    backgroundColor: theme.palette.brightPurple.main,
+                  }}
+                >
+                  Оплатить
+                </CustomButton>
+              </Box>
+            </Box>
+          </Box>
+        </SectionWrapper>
+      </Drawer>
+    </IconButton>
+  );
+}
--- a/src/components/InputTextfield.tsx
+++ b/src/components/InputTextfield.tsx
@ -47,7 +47,7 @@ export default function InputTextfield({
      variant="standard"
      sx={{
        gap,
-        mt: "10px",
+        // mt: "10px",
        ...FormInputSx,
      }}
    >
--- a/src/components/Menu.tsx
+++ b/src/components/Menu.tsx
@ -0,0 +1,43 @@
+import { Box, Typography, useTheme } from "@mui/material";
+import { Link, useLocation } from "react-router-dom";
+
+export default function Menu() {
+  const theme = useTheme();
+  const location = useLocation();
+
+  const color = location.pathname === "/" ? "white" : "black";
+
+  const arrayMenu = [
+    { name: "Главная", url: "/" },
+    { name: "Тарифы", url: "/tariffs" },
+    { name: "Тарифы на время", url: "/tariffs/time" },
+    { name: "Тарифы на объём", url: "/tariffs/volume" },
+    { name: "Вопросы и ответы", url: "/faq" },
+    { name: "Кастомный тариф", url: "/tariffconstructor" },
+    { name: "Корзина", url: "/basket" },
+  ];
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        gap: "30px",
+        overflow: "hidden",
+      }}
+    >
+      {arrayMenu.map(({ name, url }, index) => (
+        <Link key={name} style={{ textDecoration: "none" }} to={url}>
+          <Typography
+            color={location.pathname === url ? theme.palette.brightPurple.main : color}
+            variant="body2"
+            sx={{
+              whiteSpace: "nowrap",
+            }}
+          >
+            {name}
+          </Typography>
+        </Link>
+      ))}
+    </Box>
+  );
+}
--- a/src/components/NavMenuItem.tsx
+++ b/src/components/NavMenuItem.tsx
@ -1,28 +1,24 @@
 import { Link, Typography, useTheme } from "@mui/material";

-
 interface Props {
-    text: string;
-    isActive?: boolean;
+  text: string;
+  isActive?: boolean;
 }

-export default function NavMenuItem({ text, isActive = false }: Props) {
-    const theme = useTheme();
+export default function NavMenuItem({ text, isActive }: Props) {
+  const theme = useTheme();

-    return (
-        <Link
-            href="#"
-            underline="none"
-        >
-            <Typography
-                color={isActive ? theme.palette.brightPurple.main : undefined}
-                variant="body2"
-                sx={{
-                    whiteSpace: "nowrap",
-                }}
-            >
-                {text}
-            </Typography>
-        </Link>
-    );
-}
+  return (
+    <Link href="#" underline="none">
+      <Typography
+        color={isActive ? theme.palette.brightPurple.main : undefined}
+        variant="body2"
+        sx={{
+          whiteSpace: "nowrap",
+        }}
+      >
+        {text}
+      </Typography>
+    </Link>
+  );
+}
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@ -1,13 +1,11 @@
 import NavbarCollapsed from "./NavbarCollapsed";
 import NavbarFull from "./NavbarFull";

-
 interface Props {
-    isLoggedIn: boolean;
-    isCollapsed?: boolean;
+  isLoggedIn: boolean;
+  isCollapsed?: boolean;
 }

 export default function Navbar({ isLoggedIn, isCollapsed = false }: Props) {
-
-    return isCollapsed ? <NavbarCollapsed isLoggedIn={isLoggedIn} /> : <NavbarFull isLoggedIn={isLoggedIn} />;
-}
+  return isCollapsed ? <NavbarCollapsed isLoggedIn={isLoggedIn} /> : <NavbarFull isLoggedIn={isLoggedIn} />;
+}
--- a/src/components/Navbar/NavbarFull.tsx
+++ b/src/components/Navbar/NavbarFull.tsx
@ -1,19 +1,17 @@
-import Icon from "@mui/material/Icon";
-import { useEffect, useState } from "react";
+import { useLocation } from "react-router-dom";
+import { useEffect } from "react";
 import { Box, Button, Container, IconButton, Typography, useTheme } from "@mui/material";

-import { Drawers } from "../Drawer/Drawers";
-import NavMenuItem from "../NavMenuItem";
 import SectionWrapper from "../SectionWrapper";
-
 import { basketStore } from "@stores/BasketStore";
 import { authStore } from "@stores/makeRequest";

 import LogoutIcon from "../icons/LogoutIcon";
 import WalletIcon from "../icons/WalletIcon";
 import CustomAvatar from "./Avatar";
+import Drawers from "../Drawers";
 import PenaLogo from "../PenaLogo";
-import { Link, useLocation } from "react-router-dom";
+import Menu from "../Menu";

 interface Props {
  isLoggedIn: boolean;
@ -22,10 +20,9 @@ interface Props {
 export default function NavbarFull({ isLoggedIn }: Props) {
  const theme = useTheme();
  const { clearToken } = authStore();
-  const [basketQuantity, setBasketQuantity] = useState<number>(0);
  const location = useLocation();

-  const { templ, squiz, reducer, open } = basketStore();
+  const { open } = basketStore();

  useEffect(() => {
    if (location.pathname === "/basket") {
@ -33,10 +30,6 @@ export default function NavbarFull({ isLoggedIn }: Props) {
    }
  }, [location.pathname, open]);

-  useEffect(() => {
-    setBasketQuantity(Object.keys(templ).length + Object.keys(squiz).length);
-  }, [templ, squiz]);
-
  async function handleLogoutClick() {
    clearToken();
  }
@ -57,76 +50,14 @@ export default function NavbarFull({ isLoggedIn }: Props) {
      }}
    >
      <PenaLogo width={124} />
-      <Box
-        sx={{
-          display: "flex",
-          gap: "30px",
-          overflow: "hidden",
-        }}
-      >
-        <Link to="/tariffs">
-          <NavMenuItem text="Меню 1" />
-        </Link>
-        <Link to="/tariffs/time">
-          <NavMenuItem text="Меню 2" isActive />
-        </Link>
-        <Link to="/tariffs/volume">
-          <NavMenuItem text="Меню 3" />
-        </Link>
-        <Link to="/tariffconstructor">
-          <NavMenuItem text="Меню 4" />
-        </Link>
-        <Link to="/basket">
-          <NavMenuItem text="Меню 5" />
-        </Link>
-        <Link to="/faq">
-          <NavMenuItem text="Меню 6" />
-        </Link>
-        <Link to="/settings">
-          <NavMenuItem text="Меню 7" />
-        </Link>
-      </Box>
+      <Menu />
      <Box
        sx={{
          display: "flex",
          ml: "auto",
        }}
      >
-        <IconButton sx={{ p: 0 }}>
-          <Typography component="div" sx={{ position: "absolute" }}>
-            <Drawers />
-          </Typography>
-          {basketQuantity && (
-            <Icon
-              sx={{
-                position: "relative",
-                left: "8px",
-                bottom: "7px",
-
-                width: "16px",
-                height: "16px",
-                backgroundColor: "#7E2AEA",
-                borderRadius: "12px",
-              }}
-            >
-              <Typography
-                component="div"
-                sx={{
-                  display: "flex",
-                  fontSize: "12px",
-                  mt: "4.5px",
-                  width: "100%",
-                  height: "9px",
-                  color: "white",
-                  alignItems: "center",
-                  justifyContent: "center",
-                }}
-              >
-                {basketQuantity}
-              </Typography>
-            </Icon>
-          )}
-        </IconButton>
+        <Drawers />
        <IconButton sx={{ p: 0, ml: "8px" }}>
          <WalletIcon color={theme.palette.grey2.main} bgcolor="#F2F3F7" />
        </IconButton>
@ -169,21 +100,7 @@ export default function NavbarFull({ isLoggedIn }: Props) {
        alignItems: "center",
      }}
    >
-      <Box
-        sx={{
-          display: "flex",
-          gap: "30px",
-          overflow: "hidden",
-        }}
-      >
-        <NavMenuItem text="Меню 1" />
-        <NavMenuItem text="Меню 2" isActive />
-        <NavMenuItem text="Меню 3" />
-        <NavMenuItem text="Меню 4" />
-        <NavMenuItem text="Меню 5" />
-        <NavMenuItem text="Меню 1" />
-        <NavMenuItem text="Меню 2" />
-      </Box>
+      <Menu />
      <Button
        variant="outlined"
        sx={{
--- a/src/components/StepperSquiz.tsx
+++ b/src/components/StepperSquiz.tsx
@ -5,18 +5,20 @@ type Props = {
  text: string;
 };

-export const StepperSquiz: React.FC<Props> = ({ text }) => {
+export default function StepperSquiz({ text }: Props) {
  const navigate = useNavigate();
  return (
-    <Typography
-      onClick={() => navigate("/tariffs")}
-      component="div"
-      sx={{ cursor: "pointer", fontWeight: "400px", fontSize: "12px", lineHeight: "14px", marginBottom: "19px" }}
-    >
-      Все тарифы —
+    <Typography component="div">
+      <Typography
+        onClick={() => navigate("/tariffs")}
+        component="div"
+        sx={{ cursor: "pointer", fontWeight: "400px", fontSize: "12px", lineHeight: "14px", marginBottom: "19px" }}
+      >
+        Все тарифы —
+      </Typography>
      <Typography component="span" sx={{ fontWeight: "400px", fontSize: "12px", color: "#C19AF5", cursor: "default" }}>
        {text}
      </Typography>
    </Typography>
  );
-};
+}
--- a/src/components/TotalPrice.tsx
+++ b/src/components/TotalPrice.tsx
@ -1,80 +1,100 @@
 import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
+import { basketStore } from "@root/stores/BasketStore";

 import CustomButton from "./CustomButton";

 export default function TotalPrice() {
-    const theme = useTheme();
-    const upMd = useMediaQuery(theme.breakpoints.up("md"));
-    return (
+  const theme = useTheme();
+  const upMd = useMediaQuery(theme.breakpoints.up("md"));
+  const { templ, squiz, reducer } = basketStore();
+
+  type basketStore = {
+    name: string;
+    desc: string;
+    id: string;
+    privelegeid: string;
+    amount: number;
+    price: number;
+  }[];
+
+  const newArray: basketStore = [].concat(Object.values(templ), Object.values(squiz), Object.values(reducer));
+
+  const sum = newArray.reduce((accamulator, { price }) => (accamulator += price), 0);
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: upMd ? "row" : "column",
+        mt: upMd ? "80px" : "70px",
+        pt: upMd ? "30px" : undefined,
+        borderTop: upMd ? `1px solid ${theme.palette.grey2.main}` : undefined,
+      }}
+    >
+      <Box
+        sx={{
+          width: upMd ? "68.5%" : undefined,
+          pr: upMd ? "15%" : undefined,
+          display: "flex",
+          flexWrap: "wrap",
+          flexDirection: "column",
+        }}
+      >
+        <Typography variant="h4" mb={upMd ? "18px" : "30px"}>
+          Итоговая цена
+        </Typography>
+        <Typography color={theme.palette.grey3.main}>
+          Текст-заполнитель — это текст, который имеет Текст-заполнитель — это текст, который имеет Текст-заполнитель —
+          это текст, который имеет Текст-заполнитель — это текст, который имеет Текст-заполнитель
+        </Typography>
+      </Box>
+      <Box
+        sx={{
+          color: theme.palette.grey3.main,
+          width: upMd ? "31.5%" : undefined,
+          pl: upMd ? "33px" : undefined,
+        }}
+      >
        <Box
-                sx={{
-                    display: "flex",
-                    flexDirection: upMd ? "row" : "column",
-                    mt: upMd ? "80px" : "70px",
-                    pt: upMd ? "30px" : undefined,
-                    borderTop: upMd ? `1px solid ${theme.palette.grey2.main}` : undefined,
-                }}
-            >
-                <Box
-                    sx={{
-                        width: upMd ? "68.5%" : undefined,
-                        pr: upMd ? "15%" : undefined,
-                        display: "flex",
-                        flexWrap: "wrap",
-                        flexDirection: "column",
-                    }}
-                >
-                    <Typography
-                        variant="h4"
-                        mb={upMd ? "18px" : "30px"}
-                    >Итоговая цена</Typography>
-                    <Typography color={theme.palette.grey3.main}>Текст-заполнитель —
-                        это текст, который имеет Текст-заполнитель —
-                        это текст, который имеет Текст-заполнитель —
-                        это текст, который имеет Текст-заполнитель —
-                        это текст, который имеет Текст-заполнитель</Typography>
-                </Box>
-                <Box
-                    sx={{
-                        color: theme.palette.grey3.main,
-                        width: upMd ? "31.5%" : undefined,
-                        pl: upMd ? "33px" : undefined,
-                    }}
-                >
-                    <Box
-                        sx={{
-                            display: "flex",
-                            flexDirection: upMd ? "column" : "row",
-                            alignItems: upMd ? "start" : "center",
-                            mt: upMd ? "10px" : "30px",
-                            gap: "15px",
-                        }}
-                    >
-                        <Typography
-                            color={theme.palette.orange.main}
-                            sx={{
-                                textDecoration: "line-through",
-                                order: upMd ? 1 : 2,
-                            }}
-                        >20 190  руб.</Typography>
-                        <Typography
-                            variant="p1"
-                            sx={{
-                                fontWeight: 500,
-                                fontSize: "26px",
-                                lineHeight: "31px",
-                                order: upMd ? 2 : 1,
-                            }}
-                        >6 380  руб.</Typography>
-                    </Box>
-                    <CustomButton
-                        variant="contained"
-                        sx={{
-                            mt: "25px",
-                            backgroundColor: theme.palette.brightPurple.main,
-                        }}
-                    >Выбрать</CustomButton>
-                </Box>
-            </Box>
-    )
-}
+          sx={{
+            display: "flex",
+            flexDirection: upMd ? "column" : "row",
+            alignItems: upMd ? "start" : "center",
+            mt: upMd ? "10px" : "30px",
+            gap: "15px",
+          }}
+        >
+          <Typography
+            color={theme.palette.orange.main}
+            sx={{
+              textDecoration: "line-through",
+              order: upMd ? 1 : 2,
+            }}
+          >
+            20 190 руб.
+          </Typography>
+          <Typography
+            variant="p1"
+            sx={{
+              fontWeight: 500,
+              fontSize: "26px",
+              lineHeight: "31px",
+              order: upMd ? 2 : 1,
+            }}
+          >
+            {sum} руб.
+          </Typography>
+        </Box>
+        <CustomButton
+          variant="contained"
+          sx={{
+            mt: "25px",
+            backgroundColor: theme.palette.brightPurple.main,
+          }}
+        >
+          Выбрать
+        </CustomButton>
+      </Box>
+    </Box>
+  );
+}
--- a/src/index.tsx
+++ b/src/index.tsx
@ -1,8 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
-import "./index.css";
-import reportWebVitals from "./reportWebVitals";
 import { CssBaseline, Divider, ThemeProvider, useMediaQuery } from "@mui/material";

 import Faq from "./pages/Faq/Faq";
@ -10,25 +8,29 @@ import Wallet from "./pages/Wallet";
 import Payment from "./pages/Payment/Payment";
 import Support from "./pages/Support/Support";
 import CustomTariff from "./pages/CustomTariff/CustomTariff";
-import { AccountSetup } from "./pages/AccountSetup";
+import AccountSetup from "./pages/AccountSetup";
 import Landing from "./pages/Landing/Landing";
 import Tariffs from "./pages/Tariffs/Tariffs";
 import Signin from "./pages/auth/Signin";
 import Signup from "./pages/auth/Signup";
 import PaymentHistory from "./pages/PaymentHistory/PaymentHistory";
-import { Basket } from "./pages/Basket/Basket";
-import { TariffPage } from "./pages/Tariffs/TariffsPage";
+import Basket from "./pages/Basket/Basket";
+import TariffPage from "./pages/Tariffs/TariffsPage";

 import Footer from "@components/Footer";
 import Navbar from "@components/Navbar/Navbar";

 import darkTheme from "@utils/themes/dark";
 import lightTheme from "@utils/themes/light";
-import PublicRoute from "@root/utils/routes/publicRoute";
-import PrivateRoute from "@root/utils/routes/privateRoute";

+import PublicRoute from "@utils/routes/publicRoute";
+import PrivateRoute from "@utils/routes/privateRoute";
+
+import reportWebVitals from "./reportWebVitals";
 import { SnackbarProvider } from "notistack";

+import "./index.css";
+
 const App = () => {
  const upMd = useMediaQuery(lightTheme.breakpoints.up("md"));

--- a/src/pages/AccountSetup.tsx
+++ b/src/pages/AccountSetup.tsx
@ -7,7 +7,7 @@ import Download from "../assets/Icons/Download.svg";
 import Account from "../assets/Icons/Account.svg";
 import { useState } from "react";

-export const AccountSetup = () => {
+export default function AccountSetup() {
  const theme = useTheme();
  const upMd = useMediaQuery(theme.breakpoints.up("md"));

@ -29,8 +29,6 @@ export const AccountSetup = () => {
    }
  };

-  console.log(avatar);
-
  return (
    <SectionWrapper
      maxWidth="lg"
@ -107,8 +105,17 @@ export const AccountSetup = () => {
            mr: "20px",
          }}
        >
-          <Box component="div" sx={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap",
-            columnGap: "30px",ml: "20px", mt: "20px", }}>
+          <Box
+            component="div"
+            sx={{
+              display: "flex",
+              justifyContent: "space-between",
+              flexWrap: "wrap",
+              columnGap: "30px",
+              ml: "20px",
+              mt: "20px",
+            }}
+          >
            <InputTextfield
              TextfieldProps={{
                placeholder: "Имя",
@ -118,7 +125,7 @@ export const AccountSetup = () => {
              label="Имя"
              gap={upMd ? "15px" : "10px"}
              color={name ? "#e8badd" : ""}
-              FormInputSx={{ width: upMd ? "45%": "100%", mt: "19px", maxWidth:"406px" }}
+              FormInputSx={{ width: upMd ? "45%" : "100%", mt: "19px", maxWidth: "406px" }}
            />

            <InputTextfield
@ -131,7 +138,7 @@ export const AccountSetup = () => {
              id="email"
              label="E-mail"
              gap={upMd ? "15px" : "10px"}
-              FormInputSx={{ width: upMd ? "45%": "100%", mt: "19px",maxWidth:"406px" }}
+              FormInputSx={{ width: upMd ? "45%" : "100%", mt: "19px", maxWidth: "406px" }}
              color={email ? "#e8badd" : ""}
            />

@ -145,7 +152,7 @@ export const AccountSetup = () => {
              id="password"
              label="Фамилия"
              gap={upMd ? "15px" : "10px"}
-              FormInputSx={{ width: upMd ? "45%": "100%", mt: "19px",maxWidth:"406px" }}
+              FormInputSx={{ width: upMd ? "45%" : "100%", mt: "19px", maxWidth: "406px" }}
              color={surname ? "#e8badd" : ""}
            />

@ -158,7 +165,7 @@ export const AccountSetup = () => {
              id="password"
              label="Телефон"
              gap={upMd ? "15px" : "10px"}
-              FormInputSx={{ width: upMd ? "45%": "100%", mt: "19px",maxWidth:"406px" }}
+              FormInputSx={{ width: upMd ? "45%" : "100%", mt: "19px", maxWidth: "406px" }}
              color={telephone ? "#e8badd" : ""}
            />

@ -172,7 +179,7 @@ export const AccountSetup = () => {
              id="password"
              label="Отчество"
              gap={upMd ? "15px" : "10px"}
-              FormInputSx={{ width: upMd ? "45%": "100%", mt: "19px",maxWidth:"406px" }}
+              FormInputSx={{ width: upMd ? "45%" : "100%", mt: "19px", maxWidth: "406px" }}
              color={otchestvo ? "#e8badd" : ""}
            />

@ -185,7 +192,7 @@ export const AccountSetup = () => {
              id="email"
              label="Пароль"
              gap={upMd ? "15px" : "10px"}
-              FormInputSx={{ width: upMd ? "45%": "100%", mt: "19px",maxWidth:"406px" }}
+              FormInputSx={{ width: upMd ? "45%" : "100%", mt: "19px", maxWidth: "406px" }}
              color={password ? "#e8badd" : ""}
            />

@ -198,14 +205,22 @@ export const AccountSetup = () => {
              id="text"
              label="Название компании"
              gap={upMd ? "15px" : "10px"}
-              FormInputSx={{ width: upMd ? "45%": "100%", mt: "19px",maxWidth:"406px" }}
+              FormInputSx={{ width: upMd ? "45%" : "100%", mt: "19px", maxWidth: "406px" }}
              color={сompanyName ? " #e8badd" : ""}
            />
-            
-              <Box sx={{margin:0,width:upMd ? "45%": "100%", padding: 0, display:"flex", flexDirection:"column", justifyContent:"center",maxWidth:"406px"}}>

-              
-              <Typography sx={{ display: "flex",fontSize: upMd ? "16px" : "18px" }}>
+            <Box
+              sx={{
+                margin: 0,
+                width: upMd ? "45%" : "100%",
+                padding: 0,
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                maxWidth: "406px",
+              }}
+            >
+              <Typography sx={{ display: "flex", fontSize: upMd ? "16px" : "18px" }}>
                <img src={Download} alt="Download" />
                <Link
                  href="#"
@ -218,7 +233,7 @@ export const AccountSetup = () => {
                </Link>
              </Typography>

-              <Typography sx={{ display: "flex",fontSize: upMd ? "16px" : "18px" }}>
+              <Typography sx={{ display: "flex", fontSize: upMd ? "16px" : "18px" }}>
                <img src={Download} alt="Download" />
                <Link
                  href="#"
@ -231,7 +246,7 @@ export const AccountSetup = () => {
                  Загрузить документы для НКО
                </Link>
              </Typography>
-              </Box>
+            </Box>
            <Typography component="div" sx={{ width: "100%", display: "flex", justifyContent: "right" }}>
              <CustomButton
                variant="contained"
@ -251,7 +266,7 @@ export const AccountSetup = () => {
      </Box>
    </SectionWrapper>
  );
-};
+}
 function handleClose() {
  throw new Error("Function not implemented.");
 }
--- a/src/pages/Basket/Basket.tsx
+++ b/src/pages/Basket/Basket.tsx
@ -5,8 +5,7 @@ import { useState } from "react";
 import TotalPrice from "@components/TotalPrice";
 import { basketStore } from "@root/stores/BasketStore";
 import CustomWrapper from "./CustomWrapper";
-import { StepperSquiz } from "@root/components/StepperSquiz";
-import { useLocation } from "react-router-dom";
+import ComplexNavText from "@root/components/ComplexNavText";

 interface TabPanelProps {
  index: number;
@ -23,13 +22,11 @@ function TabPanel({ index, value, children, mt }: TabPanelProps) {
  );
 }

-export const Basket = () => {
+export default function Basket() {
  const theme = useTheme();
  const upMd = useMediaQuery(theme.breakpoints.up("md"));

  const [tabIndex, setTabIndex] = useState<number>(0);
-  const location = useLocation();
-
  const { templ, squiz, reducer, open } = basketStore();

  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
@ -46,7 +43,7 @@ export const Basket = () => {
        mb: upMd ? "70px" : "37px",
      }}
    >
-      {upMd && <StepperSquiz text="Корзина" />}
+      {upMd && <ComplexNavText text1="Все тарифы — " text2="Корзина" />}
      <Box
        sx={{
          mt: "20px",
@ -72,4 +69,4 @@ export const Basket = () => {
      <TotalPrice />
    </SectionWrapper>
  );
-};
+}
--- a/src/pages/Basket/CustomWrapper.tsx
+++ b/src/pages/Basket/CustomWrapper.tsx
@ -27,7 +27,7 @@ export default function CustomWrapper({ type, content }: Props) {
  const { remove } = basketStore();

  const totalSum = Object.values(content).reduce((accamulator, { price }) => (accamulator += price), 0);
-  const name = Object.values(content).map(({ name }) => name);
+  const name: Record<string, string> = { templ: "Шаблонизатор", squiz: "Опросник", reducer: "Скоращатель ссылок" };

  return (
    <Box
@ -81,7 +81,7 @@ export default function CustomWrapper({ type, content }: Props) {
              px: 0,
            }}
          >
-            {name[0]}
+            {name[type]}
          </Typography>

          <Box
--- a/src/pages/CustomTariff/CustomTariff.tsx
+++ b/src/pages/CustomTariff/CustomTariff.tsx
@ -4,8 +4,8 @@ import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import CustomButton from "@components/CustomButton";
 import SectionWrapper from "@components/SectionWrapper";
 import TariffConstructorCard from "./TariffConstructorCard";
-import ComplexNavText from "@components/ComplexNavText";
 import ComplexHeader from "@components/ComplexHeader";
+import ComplexNavText from "@root/components/ComplexNavText";

 export default function TariffConstructor() {
  const theme = useTheme();
--- a/src/pages/Faq/Faq.tsx
+++ b/src/pages/Faq/Faq.tsx
@ -9,159 +9,171 @@ import AccordionWrapper from "./AccordionWrapper";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import ComplexNavText from "../../components/ComplexNavText";

-
 export default function Faq() {
-    const theme = useTheme();
-    const upMd = useMediaQuery(theme.breakpoints.up("md"));
-    const [tabIndex, setTabIndex] = useState<number>(0);
+  const theme = useTheme();
+  const upMd = useMediaQuery(theme.breakpoints.up("md"));
+  const [tabIndex, setTabIndex] = useState<number>(0);

-    const handleChange = (event: React.SyntheticEvent, newValue: number) => {
-        setTabIndex(newValue);
-    }; 
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+    setTabIndex(newValue);
+  };

-    return (
-        <SectionWrapper
-            maxWidth="lg"
-            sx={{
-                mt: upMd ? "25px" : "20px",
-                mb: upMd ? "70px" : "37px",
-            }}
-        >
-            {upMd &&
-                <ComplexNavText text1="Все тарифы — " text2="Вопросы и ответы" />
-            }
-            <Box
-                sx={{
-                    mt: "20px",
-                    mb: upMd ? "40px" : "20px",
-                    display: "flex",
-                    gap: "10px",
-                }}
-            >
-                {!upMd &&
-                    <IconButton sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
-                        <ArrowBackIcon />
-                    </IconButton>
-                }
-                <Typography variant="h4">Вопросы и ответы</Typography>
-            </Box>
-            <Tabs
-                TabIndicatorProps={{ sx: { display: "none" } }}
-                value={tabIndex}
-                onChange={handleChange}
-                variant="scrollable"
-                scrollButtons={false}
-            >
-                <CustomTab value={0} label="Pena hub" />
-                <CustomTab value={1} label="Шаблоны" />
-                <CustomTab value={2} label="Опросы" />
-                <CustomTab value={3} label="Ссылки" />
-                <CustomTab value={4} label="Финансовые" />
-                <CustomTab value={5} label="Юридические" />
-                <CustomTab value={6} label="Юридические лица" />
-            </Tabs>
-            <TabPanel value={tabIndex} index={0} mt={upMd ? "27px" : "10px"}>
-                <AccordionWrapper
-                    content={[
-                        ["Как зарегистрироваться?", "Выберите план выше, чтобы начать. Мы попросим вас сообщить несколько основных деталей. Тогда ты в деле."],
-                        ["Какие функции я могу использовать бесплатно?", "Выберите план выше, чтобы начать. Мы попросим вас сообщить несколько основных деталей. Тогда ты в деле."],
-                        ["Есть ли ограничение на количество ответов, которые я могу собрать?", "Выберите план выше, чтобы начать. Мы попросим вас сообщить несколько основных деталей. Тогда ты в деле."],
-                        ["Нужно ли мне уметь кодировать?", "Выберите план выше, чтобы начать. Мы попросим вас сообщить несколько основных деталей. Тогда ты в деле."],
-                        ["Работают ли шрифты на всех устройствах?", "Выберите план выше, чтобы начать. Мы попросим вас сообщить несколько основных деталей. Тогда ты в деле."],
-                        ["Что я могу сделать со своими данными после их сбора?", "Выберите план выше, чтобы начать. Мы попросим вас сообщить несколько основных деталей. Тогда ты в деле."],
-                    ]}
-                />
-            </TabPanel>
-            <TabPanel value={tabIndex} index={1} mt={upMd ? "27px" : "10px"}>
-                <AccordionWrapper
-                    content={[
-                        ["Placeholder", "Placeholder"],
-                        ["Placeholder", "Placeholder"],
-                        ["Placeholder", "Placeholder"],
-                        ["Placeholder", "Placeholder"],
-                        ["Placeholder", "Placeholder"],
-                        ["Placeholder", "Placeholder"],
-                    ]}
-                />
-            </TabPanel>
-            <TabPanel value={tabIndex} index={2} mt={upMd ? "27px" : "10px"}>
-                <AccordionWrapper
-                    content={[
-                        ["Placeholder", "Placeholder"],
-                        ["Placeholder", "Placeholder"],
-                        ["Placeholder", "Placeholder"],
-                        ["Placeholder", "Placeholder"],
-                        ["Placeholder", "Placeholder"],
-                        ["Placeholder", "Placeholder"],
-                    ]}
-                />
-            </TabPanel>
-            <TabPanel value={tabIndex} index={3} mt={upMd ? "27px" : "10px"}>
-                <AccordionWrapper
-                    content={[
-                        ["Placeholder", "Placeholder"],
-                        ["Placeholder", "Placeholder"],
-                        ["Placeholder", "Placeholder"],
-                        ["Placeholder", "Placeholder"],
-                        ["Placeholder", "Placeholder"],
-                        ["Placeholder", "Placeholder"],
-                    ]}
-                />
-            </TabPanel>
-            <TabPanel value={tabIndex} index={4} mt={upMd ? "27px" : "10px"}>
-                <AccordionWrapper
-                    content={[
-                        ["Placeholder", "Placeholder"],
-                        ["Placeholder", "Placeholder"],
-                        ["Placeholder", "Placeholder"],
-                        ["Placeholder", "Placeholder"],
-                        ["Placeholder", "Placeholder"],
-                        ["Placeholder", "Placeholder"],
-                    ]}
-                />
-            </TabPanel>
-            <TabPanel value={tabIndex} index={5} mt={upMd ? "27px" : "10px"}>
-                <AccordionWrapper
-                    content={[
-                        ["Placeholder", "Placeholder"],
-                        ["Placeholder", "Placeholder"],
-                        ["Placeholder", "Placeholder"],
-                        ["Placeholder", "Placeholder"],
-                        ["Placeholder", "Placeholder"],
-                        ["Placeholder", "Placeholder"],
-                    ]}
-                />
-            </TabPanel>
-            <TabPanel value={tabIndex} index={6} mt={upMd ? "27px" : "10px"}>
-                <AccordionWrapper
-                    content={[
-                        ["Placeholder", "Placeholder"],
-                        ["Placeholder", "Placeholder"],
-                        ["Placeholder", "Placeholder"],
-                        ["Placeholder", "Placeholder"],
-                        ["Placeholder", "Placeholder"],
-                        ["Placeholder", "Placeholder"],
-                    ]}
-                />
-            </TabPanel>
-        </SectionWrapper >
-    );
+  return (
+    <SectionWrapper
+      maxWidth="lg"
+      sx={{
+        mt: upMd ? "25px" : "20px",
+        mb: upMd ? "70px" : "37px",
+      }}
+    >
+      {upMd && <ComplexNavText text1="Все тарифы —" text2=" Вопросы и ответы" />}
+      <Box
+        sx={{
+          mt: "20px",
+          mb: upMd ? "40px" : "20px",
+          display: "flex",
+          gap: "10px",
+        }}
+      >
+        {!upMd && (
+          <IconButton sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
+            <ArrowBackIcon />
+          </IconButton>
+        )}
+        <Typography variant="h4">Вопросы и ответы</Typography>
+      </Box>
+      <Tabs
+        TabIndicatorProps={{ sx: { display: "none" } }}
+        value={tabIndex}
+        onChange={handleChange}
+        variant="scrollable"
+        scrollButtons={false}
+      >
+        <CustomTab value={0} label="Pena hub" />
+        <CustomTab value={1} label="Шаблоны" />
+        <CustomTab value={2} label="Опросы" />
+        <CustomTab value={3} label="Ссылки" />
+        <CustomTab value={4} label="Финансовые" />
+        <CustomTab value={5} label="Юридические" />
+        <CustomTab value={6} label="Юридические лица" />
+      </Tabs>
+      <TabPanel value={tabIndex} index={0} mt={upMd ? "27px" : "10px"}>
+        <AccordionWrapper
+          content={[
+            [
+              "Как зарегистрироваться?",
+              "Выберите план выше, чтобы начать. Мы попросим вас сообщить несколько основных деталей. Тогда ты в деле.",
+            ],
+            [
+              "Какие функции я могу использовать бесплатно?",
+              "Выберите план выше, чтобы начать. Мы попросим вас сообщить несколько основных деталей. Тогда ты в деле.",
+            ],
+            [
+              "Есть ли ограничение на количество ответов, которые я могу собрать?",
+              "Выберите план выше, чтобы начать. Мы попросим вас сообщить несколько основных деталей. Тогда ты в деле.",
+            ],
+            [
+              "Нужно ли мне уметь кодировать?",
+              "Выберите план выше, чтобы начать. Мы попросим вас сообщить несколько основных деталей. Тогда ты в деле.",
+            ],
+            [
+              "Работают ли шрифты на всех устройствах?",
+              "Выберите план выше, чтобы начать. Мы попросим вас сообщить несколько основных деталей. Тогда ты в деле.",
+            ],
+            [
+              "Что я могу сделать со своими данными после их сбора?",
+              "Выберите план выше, чтобы начать. Мы попросим вас сообщить несколько основных деталей. Тогда ты в деле.",
+            ],
+          ]}
+        />
+      </TabPanel>
+      <TabPanel value={tabIndex} index={1} mt={upMd ? "27px" : "10px"}>
+        <AccordionWrapper
+          content={[
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+          ]}
+        />
+      </TabPanel>
+      <TabPanel value={tabIndex} index={2} mt={upMd ? "27px" : "10px"}>
+        <AccordionWrapper
+          content={[
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+          ]}
+        />
+      </TabPanel>
+      <TabPanel value={tabIndex} index={3} mt={upMd ? "27px" : "10px"}>
+        <AccordionWrapper
+          content={[
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+          ]}
+        />
+      </TabPanel>
+      <TabPanel value={tabIndex} index={4} mt={upMd ? "27px" : "10px"}>
+        <AccordionWrapper
+          content={[
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+          ]}
+        />
+      </TabPanel>
+      <TabPanel value={tabIndex} index={5} mt={upMd ? "27px" : "10px"}>
+        <AccordionWrapper
+          content={[
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+          ]}
+        />
+      </TabPanel>
+      <TabPanel value={tabIndex} index={6} mt={upMd ? "27px" : "10px"}>
+        <AccordionWrapper
+          content={[
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+            ["Placeholder", "Placeholder"],
+          ]}
+        />
+      </TabPanel>
+    </SectionWrapper>
+  );
 }

 interface TabPanelProps {
-    index: number;
-    value: number;
-    children?: React.ReactNode;
-    mt: string;
+  index: number;
+  value: number;
+  children?: React.ReactNode;
+  mt: string;
 }

 function TabPanel({ index, value, children, mt }: TabPanelProps) {
-    return (
-        <Box
-            hidden={index !== value}
-            sx={{ mt }}
-        >
-            {children}
-        </Box>
-    );
-}
+  return (
+    <Box hidden={index !== value} sx={{ mt }}>
+      {children}
+    </Box>
+  );
+}
--- a/src/pages/Tariffs/FreeTariffCard.tsx
+++ b/src/pages/Tariffs/FreeTariffCard.tsx
@ -16,12 +16,13 @@ interface Props {
  href: string;
 }

-export const FreeTariffCard = ({ headerText, text, sx, href, money = "0" }: Props) => {
+export default function FreeTariffCard({ headerText, text, sx, href, money = "0" }: Props) {
  const navigate = useNavigate();
  const icon = <IconsCreate svg={ZeroIcons} bgcolor="#FFFFFF" />;

  return (
    <Box
+      component="div"
      sx={{
        maxWidth: "360px",
        width: "360px",
@ -35,6 +36,7 @@ export const FreeTariffCard = ({ headerText, text, sx, href, money = "0" }: Prop
      }}
    >
      <Box
+        component="div"
        sx={{
          display: "flex",
          justifyContent: "space-around",
@ -42,7 +44,7 @@ export const FreeTariffCard = ({ headerText, text, sx, href, money = "0" }: Prop
          width: "100%",
        }}
      >
-        <Typography>{icon}</Typography>
+        <Typography component="div">{icon}</Typography>
        <Typography
          variant="h5"
          sx={{
@ -73,4 +75,4 @@ export const FreeTariffCard = ({ headerText, text, sx, href, money = "0" }: Prop
      </CustomButton>
    </Box>
  );
-};
+}
--- a/src/pages/Tariffs/TariffCardTimeAndVolume.tsx
+++ b/src/pages/Tariffs/TariffCardTimeAndVolume.tsx
@ -17,7 +17,7 @@ interface Props {
  textButton: string;
 }

-export const TariffCardTimeAndVolume = ({
+export default function TariffCardTimeAndVolume({
  icon,
  headerText,
  text,
@ -29,11 +29,12 @@ export const TariffCardTimeAndVolume = ({
  moneyColor,
  onclick,
  textButton,
-}: Props) => {
+}: Props) {
  const theme = useTheme();

  return (
    <Box
+      component="div"
      sx={{
        maxWidth: "360px",
        width: "360px",
@ -47,6 +48,7 @@ export const TariffCardTimeAndVolume = ({
      }}
    >
      <Box
+        component="div"
        sx={{
          display: "flex",
          justifyContent: "space-around",
@ -54,8 +56,9 @@ export const TariffCardTimeAndVolume = ({
          width: "100%",
        }}
      >
-        <Typography>{icon}</Typography>
+        <Typography component="div">{icon}</Typography>
        <Typography
+          component="div"
          variant="h5"
          sx={{
            display: "flex",
@ -71,7 +74,9 @@ export const TariffCardTimeAndVolume = ({
      <Typography variant="h5" sx={{ mt: "14px", mb: "10px" }}>
        {headerText}
      </Typography>
-      <Typography sx={{ minHeight: "calc(1.185*2em)" }}>{text}</Typography>
+      <Typography component="div" sx={{ minHeight: "calc(1.185*2em)" }}>
+        {text}
+      </Typography>
      <CustomButton
        // onClick={() => navigate(href)}
        onClick={onclick}
@ -87,4 +92,4 @@ export const TariffCardTimeAndVolume = ({
      </CustomButton>
    </Box>
  );
-};
+}
--- a/src/pages/Tariffs/Tariffs.tsx
+++ b/src/pages/Tariffs/Tariffs.tsx
@ -66,7 +66,7 @@ export default function Tariffs() {
                  href="#"
                />
              </Box>
-              <Typography>
+              <Typography component="div">
                {`Или попробуйте наш `}
                <Link
                  href="#"
--- a/src/pages/Tariffs/TariffsPage.tsx
+++ b/src/pages/Tariffs/TariffsPage.tsx
@ -3,10 +3,9 @@ import { useLocation } from "react-router-dom";
 import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";

 import SectionWrapper from "@components/SectionWrapper";
-import { CustomRadioButtons } from "@components/CustomRadioButtons";
-import { StepperSquiz } from "@components/StepperSquiz";
-import { FreeTariffCard } from "./FreeTariffCard";
-import { TariffCardTimeAndVolume } from "./TariffCardTimeAndVolume";
+import CustomRadioButtons from "@components/CustomRadioButtons";
+import FreeTariffCard from "./FreeTariffCard";
+import TariffCardTimeAndVolume from "./TariffCardTimeAndVolume";

 import { basketStore } from "@root/stores/BasketStore";

@ -14,8 +13,9 @@ import { _mocsk_ } from "@root/__mocks__/CustomRadioButtonsMocks";
 import { showCaseObject } from "@root/__mocks__/showCaseObject";

 import { IconsCreate } from "@root/lib/IconsCreate";
+import ComplexNavText from "@root/components/ComplexNavText";

-export const TariffPage = () => {
+export default function TariffPage() {
  const theme = useTheme();
  const upMd = useMediaQuery(theme.breakpoints.up("md"));
  const { add } = basketStore();
@ -35,7 +35,7 @@ export const TariffPage = () => {
        flexDirection: "column",
      }}
    >
-      {upMd && <StepperSquiz text={StepperText[unit]} />}
+      {upMd && <ComplexNavText text1="Все тарифы — " text2={StepperText[unit]} />}
      <Typography variant="h4" sx={{ marginBottom: "28px" }}>
        {StepperText[unit]}
      </Typography>
@ -82,4 +82,4 @@ export const TariffPage = () => {
      </Box>
    </SectionWrapper>
  );
-};
+}
--- a/src/pages/auth/Signin.tsx
+++ b/src/pages/auth/Signin.tsx
@ -64,7 +64,8 @@ export default function Signin() {
      sx={{
        display: "flex",
        justifyContent: "center",
-        height: upMd ? undefined : "100%",
+        height: upMd ? "100vh" : "100vh",
+        alignItems: "center",
      }}
    >
      <Box
@ -74,13 +75,11 @@ export default function Signin() {
        sx={{
          position: "relative",
          width: upMd ? "600px" : "100%",
-          height: upMd ? "100%" : "100%",
+          height: upMd ? "600px" : "100%",
          backgroundColor: "white",
          display: "flex",
          alignItems: "center",
          flexDirection: "column",
-          mt: upMd ? "50px" : undefined,
-          mb: upMd ? "50px" : undefined,
          p: upMd ? "50px" : "18px",
          pb: upMd ? "40px" : "30px",
          gap: "15px",
@ -103,14 +102,14 @@ export default function Signin() {
        >
          <CloseIcon sx={{ transform: "scale(1.5)" }} />
        </IconButton>
-        <Box sx={{ mt: "65px" }}>
+        <Box>
          <PenaLogo width={upMd ? 233 : 196} />
        </Box>
        <Typography
          sx={{
            color: theme.palette.grey3.main,
            mt: "5px",
-            mb: upMd ? "35px" : "33px",
+            mb: upMd ? "10px" : "33px",
          }}
        >
          Вход в личный кабинет
@ -126,7 +125,7 @@ export default function Signin() {
          onChange={formik.handleChange}
          id="email"
          label="Телефон или E-mail"
-          gap={upMd ? "15px" : "10px"}
+          gap={upMd ? "10px" : "10px"}
        />
        <InputTextfield
          TextfieldProps={{
@ -140,7 +139,7 @@ export default function Signin() {
          onChange={formik.handleChange}
          id="password"
          label="Пароль"
-          gap={upMd ? "15px" : "10px"}
+          gap={upMd ? "10px" : "10px"}
        />
        <CustomButton
          fullWidth
@ -150,7 +149,6 @@ export default function Signin() {
            textColor: "white",
            width: "100%",
            py: "12px",
-            mt: upMd ? undefined : "10px",
          }}
          type="submit"
          disabled={formik.isSubmitting}
@ -161,8 +159,7 @@ export default function Signin() {
          href="#"
          sx={{
            color: theme.palette.grey3.main,
-            mb: "30px",
-            mt: upMd ? undefined : "5px",
+            mb: "15px",
          }}
        >
          Забыли пароль?
--- a/src/pages/auth/Signup.tsx
+++ b/src/pages/auth/Signup.tsx
@ -79,7 +79,8 @@ export default function Signup() {
      sx={{
        display: "flex",
        justifyContent: "center",
-        height: upMd ? undefined : "100%",
+        alignItems:"center",
+        height: upMd ? "100vh" : "100%",
      }}
    >
      <Box
@ -94,8 +95,6 @@ export default function Signup() {
          display: "flex",
          alignItems: "center",
          flexDirection: "column",
-          mt: upMd ? "50px" : undefined,
-          mb: upMd ? "50px" : undefined,
          p: upMd ? "50px" : "18px",
          pb: upMd ? "40px" : "30px",
          gap: "15px",
@ -118,7 +117,7 @@ export default function Signup() {
        >
          <CloseIcon sx={{ transform: "scale(1.5)" }} />
        </IconButton>
-        <Box sx={{ mt: "65px" }}>
+        <Box sx={{mt: upMd ? undefined: "62px"}}>
          <PenaLogo width={upMd ? 233 : 196} />
        </Box>
        <Typography
@ -130,7 +129,7 @@ export default function Signup() {
        >
          Регистрация
        </Typography>
-        <InputTextfield
+        {/* <InputTextfield
          TextfieldProps={{
            value: formik.values.login,
            placeholder: "username",
@ -141,8 +140,8 @@ export default function Signup() {
          onChange={formik.handleChange}
          id="login"
          label="Login"
-          gap={upMd ? "15px" : "10px"}
-        />
+          gap={upMd ? "10px" : "10px"}
+        /> */}
        <InputTextfield
          TextfieldProps={{
            value: formik.values.email,
@ -154,7 +153,7 @@ export default function Signup() {
          onChange={formik.handleChange}
          id="email"
          label="E-mail"
-          gap={upMd ? "15px" : "10px"}
+          gap={upMd ? "10px" : "10px"}
        />
        <InputTextfield
          TextfieldProps={{
@ -167,7 +166,7 @@ export default function Signup() {
          onChange={formik.handleChange}
          id="phoneNumber"
          label="Телефон"
-          gap={upMd ? "15px" : "10px"}
+          gap={upMd ? "10px" : "10px"}
        />
        <InputTextfield
          TextfieldProps={{
@ -181,7 +180,7 @@ export default function Signup() {
          onChange={formik.handleChange}
          id="password"
          label="Пароль"
-          gap={upMd ? "15px" : "10px"}
+          gap={upMd ? "10px" : "10px"}
        />
        <InputTextfield
          TextfieldProps={{
@ -195,7 +194,7 @@ export default function Signup() {
          onChange={formik.handleChange}
          id="repeatPassword"
          label="Повторить пароль"
-          gap={upMd ? "15px" : "10px"}
+          gap={upMd ? "10px" : "10px"}
        />
        <CustomButton
          fullWidth
@ -210,7 +209,7 @@ export default function Signup() {
          type="submit"
          disabled={formik.isSubmitting}
        >
-          Войти
+          Зарегистрироваться
        </CustomButton>
        <Link
          href="#"
--- a/src/stores/test/method-remove.test.ts
+++ b/src/stores/test/method-remove.test.ts
@ -1,10 +0,0 @@
-import { basketStore } from "../BasketStore";
-
-describe("remove method tests", () => {
-  const key = ["templ", "squiz"];
-  const remove = basketStore((state) => state.remove);
-
-  test("test remove for the correct execution", () => {
-    remove("templ", "id1");
-  });
-});