some fix icon bell and cart

fix changepwd

See merge request frontend/marketplace!238

.babelrc

@@ -0,0 +1,7 @@
+{
+    "presets": [
+        "@babel/preset-env",
+        "@babel/preset-react",
+        "@babel/preset-typescript"
+    ]
+}

.env.development.local

@@ -1 +1 @@
-REACT_APP_DOMAIN="https://shub.pena.digital"
+VITE_REACT_APP_DOMAIN="https://shub.pena.digital"

.env.production.local

@@ -1 +1 @@
-REACT_APP_DOMAIN="https://shub.pena.digital"
+VITE_REACT_APP_DOMAIN="https://shub.pena.digital"

.eslintrc.json

@@ -1,16 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es2021": true
-  },
-  "extends": [],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaVersion": "latest",
-    "sourceType": "module"
-  },
-  "plugins": ["@typescript-eslint", "react"],
-  "rules": {
-    "quotes": ["error", "double"]
-  }
-}

.gitea/workflows/deploy.yml

@@ -0,0 +1,34 @@
+name: Deploy
+run-name: ${{ gitea.actor }} build image and push to container registry
+
+on: 
+  push:
+    branches:
+      - 'main'
+      - 'staging'
+
+jobs:
+  CreateImage:
+    runs-on: [frontstaging]
+    uses: http://gitea.pena/PenaDevops/actions.git/.gitea/workflows/build-image.yml@v1.1.6-p
+    with:
+      runner: frontstaging
+    secrets:
+      REGISTRY_USER: ${{ secrets.REGISTRY_USER }}
+      REGISTRY_PASSWORD: ${{ secrets.REGISTRY_PASSWORD }}
+  DeployService:
+    runs-on: [frontstaging]
+    container:
+      image: gitea.pena:3000/penadevops/container-images/node-compose:main
+      env:
+        GITHUB_RUN_NUMBER: "${{ inputs.actionid }}"
+      volumes:
+        - /run/user/1000/podman/podman.sock:/run/user/1000/podman/podman.sock
+    steps:
+      - name: Check out repository code
+        uses: http://gitea.pena:3000/PenaDevops/actions.git/checkout@v1
+      - run: printenv
+      - run: GITHUB_RUN_NUMBER=${{ gitea.run_id }} compose -f deployments/${{ gitea.ref_name }}/docker-compose.yaml up -d
+    # uses: http://gitea.pena/PenaDevops/actions.git/.gitea/workflows/deploy.yml@v1.1.6-p
+    # with:
+    #   runner: frontstaging

.gitea/workflows/lint.yml

@@ -0,0 +1,14 @@
+name: Lint
+run-name: ${{ gitea.actor }} produce linting
+
+on:
+  push:
+    branches:
+      - 'sdev'
+
+jobs:
+  Lint:
+    runs-on: [hubstaging]
+    uses: http://gitea.pena/PenaDevops/actions.git/.gitea/workflows/lint.yml@v1.1.2
+    with:
+      runner: hubstaging

.gitlab-ci.yml

@@ -3,9 +3,12 @@ include:
     file: "/templates/docker/build-template.gitlab-ci.yml"
   - project: "devops/pena-continuous-integration"
     file: "/templates/docker/deploy-template.gitlab-ci.yml"
+  - project: "devops/pena-continuous-integration"
+    file: "/templates/docker/service-discovery.gitlab-ci.yml"
 stages:
   - build
   - deploy
+  - service-discovery
 
 build-app:
   tags:
@@ -32,3 +35,6 @@ deploy-to-prod:
   rules:
     - if: "$CI_COMMIT_BRANCH == $PRODUCTION_BRANCH"
   extends: .deploy_template
+
+service-discovery:
+  extends: .sd_artefacts_template

.husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-yarn eslint . --fix
+npm run lint:fix

.npmrc

@@ -0,0 +1,3 @@
+@frontend:registry=http://gitea.pena/api/packages/skeris/npm/
+@babel:registry=https://registry.npmjs.org/
+registry=https://registry.npmjs.org/

.yarnrc

@@ -1 +0,0 @@
-"@frontend:registry" "https://penahub.gitlab.yandexcloud.net/api/v4/packages/npm/"

Dockerfile

@@ -1,4 +1,4 @@
-FROM penahub.gitlab.yandexcloud.net:5050/devops/dockerhub-backup/node as build
+FROM gitea.pena/penadevops/container-images/node:main as build
 
 RUN apk update && rm -rf /var/cache/apk/*
 WORKDIR /usr/app
@@ -8,7 +8,7 @@ RUN yarn install --ignore-scripts --non-interactive --frozen-lockfile && yarn ca
 RUN yarn build
 
 
-FROM penahub.gitlab.yandexcloud.net:5050/devops/dockerhub-backup/nginx  as result
+FROM gitea.pena/penadevops/container-images/nginx:main as result
 WORKDIR /usr/share/nginx/html
 COPY --from=build /usr/app/build/ /usr/share/nginx/html
 COPY hub.conf /etc/nginx/conf.d/default.conf

babel.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-	presets: [
-		["@babel/preset-env", { targets: { node: "current" } }],
-		"@babel/preset-typescript",
-	],
-}

compose.yml

@@ -1,34 +0,0 @@
-services:
-  router:
-    image: nginx-proxy
-    ports:
-      - 80:80
-      - 443:443
-    expose:
-      - 80
-      - 443
-    networks:
-      - penahub_frontend
-      - default
-    depends_on:
-      - hub
-      - docs
-  hub:
-    image: hub_front
-    networks:
-      - penahub_frontend
-    hostname: hub
-    restart: always
-    container_name: hub_front
-  docs:
-    image: tmplategen_front
-    networks:
-      - penahub_frontend
-    hostname: docs
-    restart: always
-    container_name: tmplategen_front
-networks:
-  penahub_frontend:
-    driver: bridge
-    attachable:  true
-    internal: true

craco.config.js

@@ -1,17 +0,0 @@
-const CracoAlias = require("craco-alias")
-
-module.exports = {
-	plugins: [
-		{
-			plugin: CracoAlias,
-			options: {
-				source: "tsconfig",
-				// baseUrl SHOULD be specified
-				// plugin does not take it from tsconfig
-				baseUrl: "./src",
-				// tsConfigPath should point to the file where "baseUrl" and "paths" are specified
-				tsConfigPath: "./tsconfig.extend.json"
-			}
-		}
-	]
-}

declarations.d.ts

@@ -0,0 +1,24 @@
+declare module "*.png" {
+    const value: string;
+    export default value;
+}
+
+declare module "*.jpg" {
+    const value: string;
+    export default value;
+}
+
+declare module "*.jpeg" {
+    const value: string;
+    export default value;
+}
+
+declare module "*.gif" {
+    const value: string;
+    export default value;
+}
+
+declare module "*.svg" {
+    const value: string;
+    export default value;
+}

deployments/staging/docker-compose.yaml

@@ -3,12 +3,9 @@ services:
   hub:
     container_name: hub
     restart: unless-stopped
-    image: $CI_REGISTRY_IMAGE/staging:$CI_COMMIT_REF_SLUG.$CI_PIPELINE_ID
-    networks:
-      - marketplace_penahub_frontend
+    image: gitea.pena:3000/penaside/front-hub/staging:$GITHUB_RUN_NUMBER
+    labels:
+      com.pena.domains: shub.pena.digital
     hostname: hub
     tty: true
-networks:
-  marketplace_penahub_frontend:
-    external: true
 

env.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_REACT_APP_DOMAIN: string;
+  readonly VITE_API_KEY: string;
+  // Добавьте другие переменные окружения, которые вы используете
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

eslint.config.mjs

@@ -0,0 +1,71 @@
+import { fileURLToPath } from 'node:url';
+import { dirname } from 'node:path';
+import eslint from '@eslint/js';
+import { FlatCompat } from '@eslint/eslintrc';
+import globals from 'globals';
+import unusedImports from 'eslint-plugin-unused-imports';
+import reactPlugin from 'eslint-plugin-react';
+import tsPlugin from '@typescript-eslint/eslint-plugin';
+
+// Аналог __dirname для ES-модулей
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname, // Теперь работает
+  recommendedConfig: eslint.configs.recommended,
+});
+
+export default [
+  ...compat.config({
+    extends: [
+      'plugin:@typescript-eslint/recommended',
+      'plugin:react/recommended',
+      'plugin:react/jsx-runtime',
+    ],
+    parser: '@typescript-eslint/parser',
+  }),
+  {
+    files: ['**/*.ts', '**/*.tsx'],
+    plugins: {
+      'unused-imports': unusedImports,
+      'react': reactPlugin,
+      '@typescript-eslint': tsPlugin,
+    },
+    languageOptions: {
+      sourceType: 'module',
+      globals: {
+        ...globals.browser,
+        ...globals.es2021,
+      },
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+    rules: {
+      'quotes': ['error', 'double'],
+      '@typescript-eslint/ban-ts-comment': 'off',
+      'react/jsx-uses-react': 'error',
+      'react/jsx-uses-vars': 'error',
+      '@typescript-eslint/no-unused-vars': 'off',
+      'unused-imports/no-unused-imports': 'error',
+      '@typescript-eslint/no-explicit-any': 'off',
+      'unused-imports/no-unused-vars': [
+        'error',
+        {
+          vars: 'all',
+          args: 'none',
+          caughtErrors: 'none',
+          ignoreRestSiblings: true,
+          varsIgnorePattern: '^_',
+        },
+      ],
+      'prefer-const': ['error', {
+        destructuring: 'all',  // Требует const, только если ВСЕ переменные не переопределяются
+        ignoreReadBeforeAssign: true  // Игнорирует, если переменная меняется после первого использования
+      }]
+    }
+  },
+];

index.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="ru">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  
+  <title>Pena Hub</title>
+  <meta name="description" content=" Заказная IT-разработка: создание уникальных и эффективных решений для вашего бизнеса. Проектирование, разработка и интеграция IT-систем под индивидуальные требования клиентов. "/> 
+  <meta name="keywords" content=" Заказная IT-разработка, заказная разработка, индивидуальное решение, бизнес-решение, программирование, программное обеспечение, веб-дизайн, мобильные приложения, IT-интеграция, технологические решения "/> 
+
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" sizes="any"/><!-- 32×32 -->
+  <link rel="icon" href="%PUBLIC_URL%/favicon.svg" type="image/svg+xml"/>
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.png"/><!-- 180×180 -->
+
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600&display=swap" rel="stylesheet">
+  <meta http-equiv="Pragma" content="no-cache" />
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+</body>
+
+</html>
+<!DOCTYPE html>
+<html lang="ru">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  
+  <title>Pena Hub</title>
+  <meta name="description" content=" Заказная IT-разработка: создание уникальных и эффективных решений для вашего бизнеса. Проектирование, разработка и интеграция IT-систем под индивидуальные требования клиентов. "/> 
+  <meta name="keywords" content=" Заказная IT-разработка, заказная разработка, индивидуальное решение, бизнес-решение, программирование, программное обеспечение, веб-дизайн, мобильные приложения, IT-интеграция, технологические решения "/> 
+
+  <link rel="icon" href="/favicon.ico" sizes="any" /> <!-- 32×32 -->
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+  <link rel="apple-touch-icon" href="/favicon.png" /> <!-- 180×180 -->
+
+  <link rel="manifest" href="/manifest.json" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600&display=swap" rel="stylesheet">
+  <meta http-equiv="Pragma" content="no-cache" />
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!-- Подключите основной скрипт через type="module" -->
+  <script type="module" src="/src/index.tsx"></script>
+</body>
+
+</html>

package.json

@@ -1,79 +1,98 @@
 {
-    "name": "hub_frontend",
-    "version": "0.1.0",
-    "private": true,
-    "scripts": {
-        "start": "craco start",
-        "build": "craco build",
-        "test": "craco test --env=node --transformIgnorePatterns \"node_modules/(?!@frontend)/\"",
-        "test:cart": "vitest ./src/utils/calcCart",
-        "eject": "craco eject",
-        "test:cypress": "start-server-and-test start http://localhost:3000 cypress",
-        "cypress": "cypress open",
-        "prepare": "husky install"
-    },
-    "dependencies": {
-        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-        "@emotion/react": "^11.10.5",
-        "@emotion/styled": "^11.10.5",
-        "@frontend/kitui": "^1.0.82",
-        "@mui/icons-material": "^5.10.14",
-        "@mui/material": "^5.10.14",
-        "@popperjs/core": "^2.11.8",
-        "axios": "^1.4.0",
-        "buffer": "^6.0.3",
-        "classnames": "^2.3.2",
-        "cypress": "^12.17.3",
-        "formik": "^2.2.9",
-        "husky": "^8.0.3",
-        "immer": "^10.0.2",
-        "isomorphic-fetch": "^3.0.0",
-        "js-big-decimal": "^2.0.7",
-        "notistack": "^3.0.1",
-        "pdfjs-dist": "3.6.172",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "react-error-boundary": "^4.0.11",
-        "react-pdf": "^7.1.2",
-        "react-router-dom": "^6.15.0",
-        "react-slick": "^0.29.0",
-        "slick-carousel": "^1.8.1",
-        "swr": "^2.2.5",
-        "use-debounce": "^10.0.0",
-        "web-vitals": "^2.1.0",
-        "yup": "^1.1.1",
-        "zustand": "^4.3.8"
-    },
-    "devDependencies": {
-        "@craco/craco": "^7.1.0",
-        "@testing-library/jest-dom": "^5.14.1",
-        "@testing-library/react": "^13.0.0",
-        "@testing-library/user-event": "^13.2.1",
-        "@types/jest": "^27.0.1",
-        "@types/node": "^16.7.13",
-        "@types/react": "^18.0.0",
-        "@types/react-dom": "^18.0.0",
-        "@types/react-slick": "^0.23.10",
-        "@typescript-eslint/eslint-plugin": "^6.9.1",
-        "@typescript-eslint/parser": "^6.9.1",
-        "craco-alias": "^3.0.1",
-        "eslint": "^8.53.0",
-        "eslint-plugin-react": "^7.33.2",
-        "jest": "^29.5.0",
-        "react-scripts": "5.0.1",
-        "typescript": "^5.4.2",
-        "vitest": "^1.4.0"
-    },
-    "browserslist": {
-        "production": [
-            ">0.2%",
-            "not dead",
-            "not op_mini all"
-        ],
-        "development": [
-            "last 1 chrome version",
-            "last 1 firefox version",
-            "last 1 safari version"
-        ]
-    }
+  "name": "hub_frontend",
+  "version": "0.1.0",
+  "private": true,
+  "main": "index.js",
+  "scripts": {
+    "start": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "prepare": "husky install",
+    "convert-svg": "node convertSvgToTsx.js",
+    "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix"
+  },
+  "dependencies": {
+    "@babel/plugin-transform-private-property-in-object": "^7.25.9",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@frontend/kitui": "^2.0.2",
+    "@mui/icons-material": "^6.4.7",
+    "@mui/material": "^6.4.6",
+    "@mui/x-date-pickers": "^7.27.3",
+    "@popperjs/core": "^2.11.8",
+    "@types/react": "^19.0.10",
+    "axios": "^1.8.2",
+    "buffer": "^6.0.3",
+    "classnames": "^2.5.1",
+    "cypress": "^14.1.0",
+    "formik": "^2.4.6",
+    "immer": "^10.1.1",
+    "isomorphic-fetch": "^3.0.0",
+    "js-big-decimal": "^2.2.0",
+    "moment": "^2.30.1",
+    "notistack": "^3.0.2",
+    "pdfjs-dist": "^4.10.38",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-error-boundary": "^5.0.0",
+    "react-pdf": "^9.2.1",
+    "react-router-dom": "^7.3.0",
+    "react-slick": "^0.30.3",
+    "slick-carousel": "^1.8.1",
+    "swr": "^2.3.3",
+    "transliteration": "^2.3.5",
+    "use-debounce": "^10.0.4",
+    "web-vitals": "^4.2.4",
+    "yup": "^1.6.1",
+    "zustand": "^5.0.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.26.9",
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.26.0",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.23.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.13.10",
+    "@types/react-dom": "^19.0.4",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/react-slick": "^0.23.13",
+    "@typescript-eslint/eslint-plugin": "^8.28.0",
+    "@typescript-eslint/parser": "^8.28.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react-refresh": "^1.3.6",
+    "eslint": "^9.22.0",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-unused-imports": "^4.1.4",
+    "globals": "^16.0.0",
+    "husky": "^9.1.7",
+    "jest": "^29.7.0",
+    "npm": "^11.2.0",
+    "typescript": "^5.8.2",
+    "url-loader": "^4.1.1",
+    "vite": "^6.2.2",
+    "vite-plugin-svgr": "^4.3.0",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.0.8"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "type": "module"
 }

public/index.html

@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html lang="ru">
-
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="theme-color" content="#000000" />
-  
-  <title>Pena Hub</title>
-  <meta name="description" content=" Заказная IT-разработка: создание уникальных и эффективных решений для вашего бизнеса. Проектирование, разработка и интеграция IT-систем под индивидуальные требования клиентов. "/> 
-  <meta name="keywords" content=" Заказная IT-разработка, заказная разработка, индивидуальное решение, бизнес-решение, программирование, программное обеспечение, веб-дизайн, мобильные приложения, IT-интеграция, технологические решения "/> 
-
-  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" sizes="any"/><!-- 32×32 -->
-  <link rel="icon" href="%PUBLIC_URL%/favicon.svg" type="image/svg+xml"/>
-  <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.png"/><!-- 180×180 -->
-
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600&display=swap" rel="stylesheet">
-  <meta http-equiv="Pragma" content="no-cache" />
-</head>
-
-<body>
-  <noscript>You need to enable JavaScript to run this app.</noscript>
-  <div id="root"></div>
-</body>
-
-</html>

src/App.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const App: React.FC = () => {
+  return (
+    <div>
+      <h1>Hello, React with TypeScript!</h1>
+    </div>
+  );
+};
+
+export default App;

src/__mocks__/showCaseObject.ts

@@ -20,7 +20,10 @@ export const showCaseObject: Record<
     }[]
   >
 > = {
+  //@ts-ignore
 	templ: { volume: showCaseVolume, time: showCaseTime },
+  //@ts-ignore
 	squiz: { volume: showCaseVolume, time: showCaseTime },
+  //@ts-ignore
 	reducer: { volume: showCaseVolume, time: showCaseTime },
 }

src/__mocks__/showCaseTime.ts

@@ -1,8 +1,8 @@
-import Infinity from "../assets/Icons/tariffs-time/Infinity.svg"
-import OneIcons from "../assets/Icons/tariffs-time/OneIcons.svg"
-import ThreeIcons from "../assets/Icons/tariffs-time/ThreeIcons.svg"
-import SixIcons from "../assets/Icons/tariffs-time/SixIcons.svg"
-import NineIcons from "../assets/Icons/tariffs-time/NineIcons.svg"
+import Infinity from "@root/assets/Icons/tariffs-time/Infinity"
+import OneIcons from "@root/assets/Icons/tariffs-time/OneIcons"
+import ThreeIcons from "@root/assets/Icons/tariffs-time/ThreeIcons"
+import SixIcons from "@root/assets/Icons/tariffs-time/SixIcons"
+import NineIcons from "@root/assets/Icons/tariffs-time/NineIcons"
 
 export const showCaseTime = [
 	{

src/__mocks__/showCaseVolume.ts

@@ -1,8 +1,8 @@
-import OneIcons from "../assets/Icons/tariffs-volume/OneIcons.svg"
-import TwoIcons from "../assets/Icons/tariffs-volume/TwoIcons.svg"
-import ThreeIcons from "../assets/Icons/tariffs-volume/ThreeIcons.svg"
-import FourIcons from "../assets/Icons/tariffs-volume/FourIcons.svg"
-import FiveIcons from "../assets/Icons/tariffs-volume/FiveIcons.svg"
+import OneIcons from "@root/assets/Icons/tariffs-volume/OneIcons"
+import TwoIcons from "@root/assets/Icons/tariffs-volume/TwoIcons"
+import ThreeIcons from "@root/assets/Icons/tariffs-volume/ThreeIcons"
+import FourIcons from "@root/assets/Icons/tariffs-volume/FourIcons"
+import FiveIcons from "@root/assets/Icons/tariffs-volume/FiveIcons"
 
 export const showCaseVolume = [
 	{

src/api/auth.ts

@@ -13,7 +13,7 @@ type RecoverResponse = {
   message: string;
 };
 
-const API_URL = `${process.env.REACT_APP_DOMAIN}/auth`;
+const API_URL = `${import.meta.env.VITE_REACT_APP_DOMAIN}/auth`;
 
 export const register = async (
   login: string,
@@ -68,11 +68,11 @@ export const recover = async (
     formData.append("email", email);
     formData.append(
       "RedirectionURL",
-      `${process.env.REACT_APP_DOMAIN}/changepwd`
+      `${import.meta.env.VITE_REACT_APP_DOMAIN}/changepwd`
     );
 
     const recoverResponse = await makeRequest<FormData, RecoverResponse>({
-      url: `${process.env.REACT_APP_DOMAIN}/codeword/recover`,
+      url: `${import.meta.env.VITE_REACT_APP_DOMAIN}/codeword/recover`,
       body: formData,
       useToken: false,
       withCredentials: true,

src/api/cart.ts

@@ -3,7 +3,7 @@ import makeRequest from "@api/makeRequest";
 
 import { parseAxiosError } from "@root/utils/parse-error";
 
-const API_URL = `${process.env.REACT_APP_DOMAIN}/customer/v1.0.0`;
+const API_URL = `${import.meta.env.VITE_REACT_APP_DOMAIN}/customer/v1.0.1`;
 
 export const patchCart = async (
   tariffId: string

src/api/history.ts

@@ -44,7 +44,7 @@ export type RawDetails = {
   Value: string | number | KeyValue[][];
 };
 
-const API_URL = `${process.env.REACT_APP_DOMAIN}/customer/v1.0.0`;
+const API_URL = `${import.meta.env.VITE_REACT_APP_DOMAIN}/customer/v1.0.1`;
 
 export const getHistory = async (): Promise<
   [GetHistoryResponse | GetHistoryResponse2 | null, string?]

src/api/makeRequest.ts

@@ -5,7 +5,7 @@ import { clearUserData } from "@root/stores/user";
 import { clearCustomTariffs } from "@root/stores/customTariffs";
 import { clearTickets } from "@root/stores/tickets";
 import { redirect } from "react-router-dom";
-import { setNotEnoughMoneyAmount } from "@stores/cart";
+import { setNotEnoughMoneyAmount } from "@stores/notEnoughMoneyAmount";
 
 interface MakeRequest {
   method?: Method | undefined;
@@ -21,7 +21,7 @@ interface ErrorResponseData {
   message?: string;
 }
 
-async function makeRequest<TRequest = unknown, TResponse = unknown>(
+async function makeRequest<_TRequest = unknown, TResponse = unknown>(
   data: MakeRequest
 ): Promise<TResponse> {
   try {

src/api/price.ts

@@ -1,11 +1,10 @@
 import makeRequest from "@api/makeRequest";
 import type { GetDiscountsResponse } from "@root/model/discount";
-import { useUserStore } from "@root/stores/user";
 import { parseAxiosError } from "@root/utils/parse-error";
 import { enqueueSnackbar } from "notistack";
 import useSWR from "swr";
 
-const API_URL = `${process.env.REACT_APP_DOMAIN}/price`;
+const API_URL = `${import.meta.env.VITE_REACT_APP_DOMAIN}/price`;
 
 export const getDiscounts = async (userId: string | null) => {
   if (userId === null) {

src/api/promocode.ts

@@ -2,7 +2,7 @@ import makeRequest from "@api/makeRequest";
 
 import { parseAxiosError } from "@utils/parse-error";
 
-const API_URL = `${process.env.REACT_APP_DOMAIN}/codeword/promocode`;
+const API_URL = `${import.meta.env.VITE_REACT_APP_DOMAIN}/codeword/promocode`;
 
 export const activatePromocode = async (
   promocode: string

src/api/recentlyPurchasedTariffs.ts

@@ -1,7 +1,7 @@
 import makeRequest from "@api/makeRequest";
 import { parseAxiosError } from "@root/utils/parse-error";
 
-const API_URL = `${process.env.REACT_APP_DOMAIN}/customer/v1.0.0`;
+const API_URL = `${import.meta.env.VITE_REACT_APP_DOMAIN}/customer/v1.0.1`;
 
 type GetRecentlyPurchasedTariffsResponse = {
   id: string;

src/api/tariff.ts

@@ -8,6 +8,7 @@ import type {
 } from "@root/model/privilege";
 import type { GetTariffsResponse } from "@root/model/tariff";
 import { removeTariffFromCart } from "@root/stores/user";
+import axios from "axios";
 
 interface CreateTariffBody {
   name: string;
@@ -16,7 +17,7 @@ interface CreateTariffBody {
   privileges: PrivilegeWithoutPrice[];
 }
 
-const API_URL = `${process.env.REACT_APP_DOMAIN}/strator`;
+const API_URL = `${import.meta.env.VITE_REACT_APP_DOMAIN}/strator`;
 
 export const getTariffs = async (
   apiPage: number,
@@ -26,7 +27,7 @@ export const getTariffs = async (
   try {
     const tariffsResponse = await makeRequest<never, GetTariffsResponse>({
       method: "GET",
-      url: `${API_URL}/tariff?page=${apiPage}&limit=${tariffsPerPage}`,
+      url: `${API_URL}/tariff/getList?page=${apiPage}&limit=${tariffsPerPage}`,
       useToken: true,
       signal,
     });
@@ -134,3 +135,24 @@ export const getTariffArray = async (tariffIds: string[] | undefined) => {
 
   return tariffs;
 };
+
+const apiUrl = import.meta.env.VITE_REACT_APP_DOMAIN + "/requestquiz";
+export async function sendContactFormRequest(body: {
+  contact: string;
+  whoami: string;
+}) {
+try {
+  const a = await axios(apiUrl + "/callme", {
+    method: "POST",
+    headers: {
+        "Content-Type": "application/json",
+    },
+    data: body,
+});
+return [a];
+} catch (nativeError) {
+  const [error] = parseAxiosError(nativeError);
+
+  return [null, `Ошибка при отправке запроса. ${error}`];
+}
+}

src/api/ticket.ts

@@ -9,7 +9,7 @@ type SendFileResponse = {
   message: string;
 };
 
-const API_URL = `${process.env.REACT_APP_DOMAIN}/heruvym/v1.0.0`;
+const API_URL = `${import.meta.env.VITE_REACT_APP_DOMAIN}/heruvym/v1.0.0`;
 
 export const sendTicketMessage = async (
   ticketId: string,
@@ -82,7 +82,7 @@ export const createTicket = async (
   try {
     const createTicketResponse = await createTicketRequest({
       url: `${API_URL}/create`,
-      body: { Title: ticketNameField, Message: ticketBodyField },
+      body: { Title: ticketNameField, Message: ticketBodyField, System: false },
     });
 
     return [createTicketResponse];

src/api/user.ts

@@ -3,7 +3,7 @@ import makeRequest from "@api/makeRequest";
 import { PatchUserRequest } from "@root/model/user";
 import { parseAxiosError } from "@root/utils/parse-error";
 
-const API_URL = `${process.env.REACT_APP_DOMAIN}/user`;
+const API_URL = `${import.meta.env.VITE_REACT_APP_DOMAIN}/user`;
 
 export const patchUser = async (
   user: PatchUserRequest

src/api/verification.ts

@@ -9,7 +9,7 @@ import type {
   UpdateDocumentsArgs,
 } from "@root/model/auth";
 
-const API_URL = `${process.env.REACT_APP_DOMAIN}/verification/v1.0.0/verification`;
+const API_URL = `${import.meta.env.VITE_REACT_APP_DOMAIN}/verification/v1.0.0/verification`;
 
 export const verification = async (
   userId: string
@@ -27,11 +27,11 @@ export const verification = async (
       obj.url = obj.url
         .replace(
           "https://hub.pena.digital",
-          process.env.REACT_APP_DOMAIN?.toString() || ""
+          import.meta.env.VITE_REACT_APP_DOMAIN?.toString() || ""
         )
         .replace(
           "https://shub.pena.digital",
-          process.env.REACT_APP_DOMAIN?.toString() || ""
+          import.meta.env.VITE_REACT_APP_DOMAIN?.toString() || ""
         );
       return obj;
     });
@@ -55,7 +55,7 @@ export const sendDocuments = async (
     const sendDocumentsResponse = await makeRequest<FormData, Verification>({
       method: "POST",
       url: API_URL,
-      body: jsonToFormdata({ ...documents, egrule: documents.inn }),
+      body: jsonToFormdata({ ...documents}),
       useToken: true,
       withCredentials: true,
     });
@@ -72,11 +72,23 @@ export const updateDocuments = async (
   documents: UpdateDocumentsArgs
 ): Promise<[Verification | "OK" | null, string?]> => {
   try {
+    // .replace(/\s/g, '_')
+    // if (documents.inn) {
+    //   documents.inn.append("name", "blob");
+    // }
+    // if (documents.rule) {
+    //   documents.rule.append("name", "blob");
+    // }
+    // if (documents.certificate) {
+    //   documents.certificate.append("name", "blob");
+    // }
+    console.log("documents")
+    console.log(documents)
     const updateDocumentsResponse = await makeRequest<FormData, Verification>({
       method: "PUT",
       url: `${API_URL}`,
       body: jsonToFormdata(
-        documents.inn ? { ...documents, egrule: documents.inn } : documents
+        documents.inn ? { ...documents} : documents
       ),
       useToken: true,
       withCredentials: true,
@@ -93,6 +105,8 @@ export const updateDocuments = async (
 export const updateDocument = async (
   body: FormData
 ): Promise<[Verification | "OK" | null, string?]> => {
+  console.log("body")
+  console.log(body)
   try {
     const updateDocumentResponse = await makeRequest<FormData, Verification>({
       method: "PATCH",

src/api/wallet.ts

@@ -6,8 +6,12 @@ const isStaging = (() => {
   const host = window.location.hostname;
   return host.includes("s") ? "s" : "";
 })();
+const isLocalhost = (() => {
+  const host = window.location.hostname;
+  return host.includes("localhost");
+})();
 
-const API_URL = `${process.env.REACT_APP_DOMAIN}/customer/v1.0.0`;
+const API_URL = `${import.meta.env.VITE_REACT_APP_DOMAIN}/customer/v1.0.1`;
 
 interface PaymentBody {
   type: string;
@@ -19,12 +23,20 @@ export const sendPayment = async ({
   body,
   fromSquiz,
   paymentPurpose,
+  cc
 }: {
   userId: string;
   body: PaymentBody;
   fromSquiz: boolean;
   paymentPurpose: "paycart" | "replenishwallet";
+  cc?: boolean
 }): Promise<[SendPaymentResponse | null, string?]> => {
+
+  let returnLink = `${isLocalhost ? "localhost:3000" : `https://${isStaging}hub.pena.digital`}/afterpay?from=${
+    fromSquiz ? "quiz" : "hub"
+  }&purpose=${paymentPurpose}&userid=${userId}`
+  if (cc) returnLink = returnLink + "&cc=true"
+
   const reqeustBody = {
     currency: "RUB",
     bankCard: {
@@ -36,9 +48,7 @@ export const sendPayment = async ({
     },
     phoneNumber: "79000000000",
     login: "login_test",
-    returnUrl: `https://${isStaging}hub.pena.digital/afterpay?from=${
-      fromSquiz ? "quiz" : "hub"
-    }&purpose=${paymentPurpose}&userid=${userId}`,
+    returnUrl: returnLink,
     ...body,
   };
 

src/assets/Icons/404.tsx

@@ -24,8 +24,8 @@ export const NotFoundIcon = ({ size = 390 }: NotFoundIconProps) => {
           fill="#4D4D4D"
         />
         <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M191.177 189.358C181.743 189.358 173.705 187.963 167.062 185.173C160.419 182.383 154.972 178.53 150.72 173.614C146.468 168.698 143.28 163.052 141.154 156.674C139.028 150.164 137.766 143.255 137.367 135.948C137.234 132.361 137.102 128.441 136.969 124.19V111.036C137.102 106.652 137.234 102.599 137.367 98.8793C137.633 91.5719 138.895 84.7295 141.154 78.3521C147.93 58.8214 170.849 24.9415 186.792 25.938C200.668 26.8053 207.972 36.1671 214.514 44.5531C217.838 48.8133 220.965 52.8217 224.658 55.3365C230.111 59.4227 237.999 61.7595 245.705 64.0423C257.715 67.5998 269.281 71.0261 270.495 80.7377C271.514 88.884 265.142 95.5245 258.561 102.383C252.262 108.948 245.771 115.713 245.384 124.19C245.384 128.441 245.251 132.361 244.986 135.948C244.72 143.255 243.524 150.164 241.398 156.674C239.273 163.052 236.084 168.698 231.832 173.614C227.581 178.53 222.067 182.383 215.291 185.173C208.648 187.963 200.61 189.358 191.177 189.358ZM210.105 158.078C206.119 163.658 199.808 166.448 191.172 166.448C182.802 166.448 176.557 163.658 172.438 158.078C168.32 152.365 166.127 144.659 165.862 134.96C165.862 131.107 165.795 127.254 165.662 123.401V111.443C165.795 107.457 165.862 103.671 165.862 100.083C166.127 90.65 168.253 83.0769 172.239 77.3638C176.358 71.5179 182.669 68.5949 191.172 68.5949C199.808 68.5949 206.119 71.5179 210.105 77.3638C214.223 83.0769 216.349 90.65 216.482 100.083C216.748 103.671 216.881 107.457 216.881 111.443V123.401C216.881 127.254 216.748 131.107 216.482 134.96C216.349 144.659 214.223 152.365 210.105 158.078Z"
           fill="#A35FFA"
         />
@@ -67,9 +67,9 @@ export const NotFoundIcon = ({ size = 390 }: NotFoundIconProps) => {
             width="126.19"
             height="161.246"
             filterUnits="userSpaceOnUse"
-            color-interpolation-filters="sRGB"
+            colorInterpolationFilters="sRGB"
           >
-            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feFlood floodOpacity="0" result="BackgroundImageFix" />
             <feColorMatrix
               in="SourceAlpha"
               type="matrix"
@@ -108,9 +108,9 @@ export const NotFoundIcon = ({ size = 390 }: NotFoundIconProps) => {
             width="54.4052"
             height="54.4052"
             filterUnits="userSpaceOnUse"
-            color-interpolation-filters="sRGB"
+            colorInterpolationFilters="sRGB"
           >
-            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feFlood floodOpacity="0" result="BackgroundImageFix" />
             <feColorMatrix
               in="SourceAlpha"
               type="matrix"

src/assets/Icons/Account.svg

@@ -1,6 +0,0 @@
-<svg width="220" height="220" viewBox="0 0 220 220" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="220" height="220" rx="8" fill="#DCDEE4"/>
-<path d="M109.5 191C154.511 191 191 154.511 191 109.5C191 64.4888 154.511 28 109.5 28C64.4888 28 28 64.4888 28 109.5C28 154.511 64.4888 191 109.5 191Z" stroke="white" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M109.499 136.667C128.254 136.667 143.458 121.463 143.458 102.708C143.458 83.9537 128.254 68.75 109.499 68.75C90.7447 68.75 75.541 83.9537 75.541 102.708C75.541 121.463 90.7447 136.667 109.499 136.667Z" stroke="white" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M54.9961 170.116C60.1061 160.05 67.9033 151.597 77.5236 145.692C87.1438 139.787 98.2113 136.661 109.499 136.661C120.787 136.661 131.855 139.787 141.475 145.692C151.095 151.597 158.892 160.05 164.002 170.116" stroke="white" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

src/assets/Icons/Account.tsx

@@ -0,0 +1,23 @@
+
+import { Box, SxProps, Theme } from "@mui/material";
+
+interface Props {
+  sx?: SxProps<Theme>;
+}
+
+export default function Account({ sx }: Props) {
+  return (
+    <Box
+      sx={{
+        ...sx,
+      }}
+    >
+      <svg width="220" height="220" viewBox="0 0 220 220" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect width="220" height="220" rx="8" fill="#DCDEE4" />
+        <path d="M109.5 191C154.511 191 191 154.511 191 109.5C191 64.4888 154.511 28 109.5 28C64.4888 28 28 64.4888 28 109.5C28 154.511 64.4888 191 109.5 191Z" stroke="white" strokeWidth="6" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M109.499 136.667C128.254 136.667 143.458 121.463 143.458 102.708C143.458 83.9537 128.254 68.75 109.499 68.75C90.7447 68.75 75.541 83.9537 75.541 102.708C75.541 121.463 90.7447 136.667 109.499 136.667Z" stroke="white" strokeWidth="6" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M54.9961 170.116C60.1061 160.05 67.9033 151.597 77.5236 145.692C87.1438 139.787 98.2113 136.661 109.499 136.661C120.787 136.661 131.855 139.787 141.475 145.692C151.095 151.597 158.892 160.05 164.002 170.116" stroke="white" strokeWidth="6" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    </Box>
+  );
+}

src/assets/Icons/BasketIcon.svg

@@ -1,5 +0,0 @@
-<svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.5 19.75C8.32843 19.75 9 19.0784 9 18.25C9 17.4216 8.32843 16.75 7.5 16.75C6.67157 16.75 6 17.4216 6 18.25C6 19.0784 6.67157 19.75 7.5 19.75Z" fill="#9A9AAF"/>
-<path d="M17.25 19.75C18.0784 19.75 18.75 19.0784 18.75 18.25C18.75 17.4216 18.0784 16.75 17.25 16.75C16.4216 16.75 15.75 17.4216 15.75 18.25C15.75 19.0784 16.4216 19.75 17.25 19.75Z" fill="#9A9AAF"/>
-<path d="M3.96562 4.75H20.7844L18.3094 13.4125C18.2211 13.7269 18.032 14.0036 17.7711 14.2C17.5103 14.3965 17.1922 14.5019 16.8656 14.5H7.88437C7.55783 14.5019 7.2397 14.3965 6.97886 14.2C6.71803 14.0036 6.52893 13.7269 6.44062 13.4125L3.04688 1.54375C3.00203 1.38696 2.9073 1.24905 2.77704 1.15093C2.64677 1.05282 2.48808 0.999828 2.325 1H0.75" stroke="#9A9AAF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

src/assets/Icons/BasketIcon.tsx

@@ -0,0 +1,22 @@
+
+import { Box, SxProps, Theme } from "@mui/material";
+
+interface Props {
+  sx?: SxProps<Theme>;
+}
+
+export default function BasketIcon({ sx }: Props) {
+  return (
+    <Box
+      sx={{
+        ...sx,
+      }}
+    >
+      <svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M7.5 19.75C8.32843 19.75 9 19.0784 9 18.25C9 17.4216 8.32843 16.75 7.5 16.75C6.67157 16.75 6 17.4216 6 18.25C6 19.0784 6.67157 19.75 7.5 19.75Z" fill="#9A9AAF" />
+        <path d="M17.25 19.75C18.0784 19.75 18.75 19.0784 18.75 18.25C18.75 17.4216 18.0784 16.75 17.25 16.75C16.4216 16.75 15.75 17.4216 15.75 18.25C15.75 19.0784 16.4216 19.75 17.25 19.75Z" fill="#9A9AAF" />
+        <path d="M3.96562 4.75H20.7844L18.3094 13.4125C18.2211 13.7269 18.032 14.0036 17.7711 14.2C17.5103 14.3965 17.1922 14.5019 16.8656 14.5H7.88437C7.55783 14.5019 7.2397 14.3965 6.97886 14.2C6.71803 14.0036 6.52893 13.7269 6.44062 13.4125L3.04688 1.54375C3.00203 1.38696 2.9073 1.24905 2.77704 1.15093C2.64677 1.05282 2.48808 0.999828 2.325 1H0.75" stroke="#9A9AAF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    </Box>
+  );
+}

src/assets/Icons/CloseIcon.tsx

@@ -0,0 +1,38 @@
+import { useLocation } from "react-router-dom";
+import { Box, SxProps, Theme } from "@mui/material";
+
+interface Props {
+  sx?: SxProps<Theme>;
+}
+export default function CloseIcon({ sx }: Props) {
+  const location = useLocation();
+  return (
+    <Box
+      sx={{
+        width: "30px",
+        height: "30px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        "&:hover path": {
+          stroke: "#7E2AEA",
+        },
+        ...sx
+      }}
+    >
+      <svg
+        width="26"
+        height="26"
+        viewBox="0 0 26 26"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M1 1L25 25M1 25L25 1"
+          stroke={location.pathname === "/" ? "white" : "black"}
+        />
+      </svg>
+    </Box>
+  );
+}

src/assets/Icons/ColorWallet.svg

@@ -1,50 +0,0 @@
-<svg width="440" height="280" viewBox="0 0 440 280" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_4712_5560)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M231.959 16.4365C198.92 13.9884 177.697 50.2473 157.653 76.6518C140.062 99.8243 127.322 125.703 126.922 154.806C126.496 185.768 133.432 217.709 155.415 239.495C178.059 261.936 211.143 275.338 242.421 269.268C271.103 263.702 282.562 231.478 303.232 210.809C325.675 188.367 368.731 176.579 366.816 144.878C364.897 113.13 318.762 108.809 295.742 86.884C271.898 64.1742 264.779 18.8684 231.959 16.4365Z" fill="#9A9AAF" fill-opacity="0.2"/>
-<circle cx="323.736" cy="253.787" r="18.1591" transform="rotate(-2.36964 323.736 253.787)" fill="#9A9AAF" fill-opacity="0.2"/>
-<circle cx="297.256" cy="53.2835" r="6.91775" transform="rotate(-2.36964 297.256 53.2835)" fill="#9A9AAF" fill-opacity="0.2"/>
-<mask id="mask0_4712_5560" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="27" y="-43" width="340" height="315">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M269.41 -42.2079C236.371 -44.656 93.7624 -33.2189 73.7186 -6.81442C56.1283 16.3581 27.8836 111.909 27.4837 141.011C27.0583 171.974 35.0061 226.607 56.9896 248.393C79.6336 270.834 211.14 275.339 242.419 269.269C271.1 263.703 282.56 231.48 303.229 210.811C325.673 188.368 368.729 176.58 366.813 144.88C364.894 113.131 357.483 67.3786 334.463 45.454C310.619 22.7442 302.23 -39.776 269.41 -42.2079Z" fill="#9A9AAF"/>
-</mask>
-<g mask="url(#mask0_4712_5560)">
-<path d="M313.593 129.318H303.32V138.221H313.593C318.73 138.221 320.014 136.441 320.014 133.473C320.014 130.505 318.088 129.318 313.593 129.318Z" fill="#8F3AFF"/>
-<path d="M85.1875 88.2439C85.1875 94.5178 86.4369 102.127 107.635 102.127L307.772 194.981V102.127V90.5591C307.772 80.618 299.728 72.5591 289.786 72.5591H107.632C88.3049 72.5591 85.1875 81.97 85.1875 88.2439Z" fill="#D5B5FF"/>
-<path d="M85.1875 88.2439C85.1875 94.5178 86.4369 102.127 107.635 102.127L307.772 194.981V102.127V90.5591C307.772 80.618 299.728 72.5591 289.786 72.5591H107.632C88.3049 72.5591 85.1875 81.97 85.1875 88.2439Z" fill="url(#paint0_linear_4712_5560)"/>
-<circle cx="159.968" cy="72.0292" r="43.4189" transform="rotate(-6.9748 159.968 72.0292)" fill="#F4C82D"/>
-<circle cx="159.968" cy="72.0292" r="43.4189" transform="rotate(-6.9748 159.968 72.0292)" fill="url(#paint1_linear_4712_5560)" fill-opacity="0.2"/>
-<circle cx="159.97" cy="72.0357" r="36.7391" transform="rotate(-6.9748 159.97 72.0357)" fill="#ECB907"/>
-<circle cx="159.97" cy="72.0357" r="36.7391" transform="rotate(-6.9748 159.97 72.0357)" fill="url(#paint2_linear_4712_5560)" fill-opacity="0.2"/>
-<path d="M160.722 108.795C161.73 108.758 162.745 108.677 163.764 108.553C163.034 108.708 161.994 108.802 160.722 108.795C142.173 109.476 125.836 95.5753 123.5 76.4814C121.038 56.3497 135.071 38.0687 154.845 35.6496C143.627 37.022 122.031 51.799 125.41 76.2477C129.131 103.173 151.301 108.743 160.722 108.795Z" fill="#CD9A16"/>
-<path d="M172.753 57.3134C170.15 54.1387 166.464 52.0421 162.408 51.4301C158.353 50.8181 154.217 51.7343 150.802 54.001C150.317 54.3223 149.849 54.6685 149.4 55.0383C146.237 57.6439 144.153 61.3305 143.548 65.3869C142.944 69.4434 143.862 73.5825 146.126 77.0058L159.215 96.7942L165.142 92.8741L159.579 84.464C160.57 84.488 161.557 84.4227 162.527 84.2714C164.404 83.9784 166.221 83.3629 167.895 82.4486C168.31 82.2221 168.716 81.9774 169.111 81.7147C169.597 81.3935 170.065 81.0473 170.514 80.6774C172.194 79.2926 173.585 77.5898 174.607 75.6662C175.629 73.7425 176.262 71.6357 176.47 69.4661C176.678 67.2964 176.456 65.1064 175.818 63.0211C175.181 60.9357 174.139 58.9959 172.752 57.3124L172.753 57.3134ZM169.395 68.7793C169.28 70.02 168.919 71.2252 168.335 72.3249C167.751 73.4246 166.955 74.3972 165.992 75.1861C165.734 75.3981 165.465 75.5967 165.187 75.7811C163.393 76.965 161.25 77.503 159.109 77.3068C156.967 77.1106 154.955 76.1918 153.402 74.7013C151.849 73.2109 150.848 71.2372 150.563 69.1043C150.278 66.9714 150.726 64.8059 151.833 62.9634C152.536 61.7935 153.479 60.7979 154.589 60.0359C155.227 59.5978 155.921 59.2369 156.657 58.9645C158.672 58.2181 160.883 58.18 162.925 58.8563C164.967 59.5326 166.72 60.8832 167.895 62.6863C169.071 64.4894 169.6 66.638 169.395 68.7793Z" fill="#FDDA5F"/>
-<path d="M172.752 57.3136C170.149 54.1388 166.463 52.0423 162.407 51.4303C158.352 50.8183 154.216 51.7345 150.801 54.0012C156.505 50.0378 169.11 45.3109 176.469 57.3136C183.705 69.1173 174.907 78.4395 168.23 82.2603C168.119 82.3245 168.007 82.3873 167.894 82.4488C166.22 83.3631 164.403 83.9786 162.526 84.2716L167.242 91.4066L165.141 92.8743L159.578 84.4642C160.569 84.4882 161.556 84.4229 162.526 84.2716C164.403 83.9786 166.22 83.3631 167.894 82.4488C168.006 82.3875 168.117 82.3247 168.23 82.2603C168.528 82.0881 168.822 81.9063 169.11 81.7149C169.596 81.3937 170.064 81.0475 170.513 80.6776C172.193 79.2928 173.584 77.59 174.606 75.6664C175.628 73.7427 176.261 71.6359 176.469 69.4663C176.677 67.2966 176.455 65.1066 175.818 63.0213C175.18 60.9359 174.138 58.9961 172.751 57.3126L172.752 57.3136Z" fill="#CC9B1B"/>
-<path d="M159.108 77.307C161.249 77.5032 163.392 76.9652 165.186 75.7813C162.916 76.4047 157.617 76.4257 154.588 71.5222C150.801 65.3928 153.232 61.2157 154.588 60.0361C153.478 60.7981 152.535 61.7937 151.832 62.9636C150.725 64.8061 150.277 66.9716 150.562 69.1045C150.847 71.2374 151.848 73.2111 153.401 74.7015C154.954 76.192 156.966 77.1108 159.108 77.307Z" fill="#CC9B1B"/>
-<path opacity="0.3" d="M165.241 115.129C179.817 113.346 191.818 104.533 198.262 92.5029L121.665 92.5029C129.875 107.856 146.923 117.37 165.241 115.129Z" fill="#A367C8"/>
-<path d="M307.772 116.655V185.029V211.481C307.772 221.423 299.713 229.481 289.772 229.481H103.188C93.2464 229.481 85.1875 221.423 85.1875 211.481V84.8013C85.1875 91.0622 86.4369 98.6552 107.635 98.6552H289.783C299.725 98.6552 307.772 106.714 307.772 116.655Z" fill="#BA84FF"/>
-<path d="M307.772 116.655V185.029V211.481C307.772 221.423 299.713 229.481 289.772 229.481H103.188C93.2464 229.481 85.1875 221.423 85.1875 211.481V84.8013C85.1875 91.0622 86.4369 98.6552 107.635 98.6552H289.783C299.725 98.6552 307.772 106.714 307.772 116.655Z" fill="url(#paint3_linear_4712_5560)" fill-opacity="0.4"/>
-<path d="M312.682 141.801C317.658 141.801 319.934 137.894 319.934 134.961V172.8H307.749V180.513H275.364C267.279 180.513 255.465 176.407 255.465 161.743C255.465 147.08 267.279 141.801 275.364 141.801H302.731H312.682Z" fill="#A765FC"/>
-<path d="M313.796 137.59C318.771 137.59 320.015 135.74 320.015 132.657V170.271C320.015 175.82 316.905 178.287 313.796 178.287H276.477C268.392 178.287 256.578 173.97 256.578 158.555C256.578 143.139 268.392 137.59 276.477 137.59H303.845H313.796Z" fill="#DABDFF"/>
-<circle cx="279.95" cy="158.257" r="11.1292" fill="#B07CF3"/>
-</g>
-</g>
-<defs>
-<linearGradient id="paint0_linear_4712_5560" x1="151.046" y1="102.359" x2="158.064" y2="34.0042" gradientUnits="userSpaceOnUse">
-<stop stop-color="#7E2AEA"/>
-<stop offset="1" stop-color="#B47AFF" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint1_linear_4712_5560" x1="132.58" y1="72.6972" x2="213.406" y2="72.6972" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="#FEFEFE" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint2_linear_4712_5560" x1="194.705" y1="54.6681" x2="155.294" y2="87.3993" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="#FFD74A" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint3_linear_4712_5560" x1="228" y1="102.004" x2="228.003" y2="279.504" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="#7E2AEA" stop-opacity="0"/>
-</linearGradient>
-<clipPath id="clip0_4712_5560">
-<rect width="440" height="280" fill="white"/>
-</clipPath>
-</defs>
-</svg>

src/assets/Icons/ColorWallet.tsx

@@ -0,0 +1,66 @@
+import { SvgIcon, SxProps, Theme } from "@mui/material";
+
+interface Props {
+  sx?: SxProps<Theme>;
+}
+
+export default function ColorWallet({ sx }: Props) {
+  return (
+    <SvgIcon
+      sx={{
+        ...sx,
+      }}
+    >
+      <svg width="440" height="280" viewBox="0 0 440 280" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g clipPath="url(#clip0_4712_5560)">
+          <path fillRule="evenodd" clipRule="evenodd" d="M231.959 16.4365C198.92 13.9884 177.697 50.2473 157.653 76.6518C140.062 99.8243 127.322 125.703 126.922 154.806C126.496 185.768 133.432 217.709 155.415 239.495C178.059 261.936 211.143 275.338 242.421 269.268C271.103 263.702 282.562 231.478 303.232 210.809C325.675 188.367 368.731 176.579 366.816 144.878C364.897 113.13 318.762 108.809 295.742 86.884C271.898 64.1742 264.779 18.8684 231.959 16.4365Z" fill="#9A9AAF" fillOpacity="0.2" />
+          <circle cx="323.736" cy="253.787" r="18.1591" transform="rotate(-2.36964 323.736 253.787)" fill="#9A9AAF" fillOpacity="0.2" />
+          <circle cx="297.256" cy="53.2835" r="6.91775" transform="rotate(-2.36964 297.256 53.2835)" fill="#9A9AAF" fillOpacity="0.2" />
+          <mask id="mask0_4712_5560" style={{ maskType: "alpha" }} maskUnits="userSpaceOnUse" x="27" y="-43" width="340" height="315">
+            <path fillRule="evenodd" clipRule="evenodd" d="M269.41 -42.2079C236.371 -44.656 93.7624 -33.2189 73.7186 -6.81442C56.1283 16.3581 27.8836 111.909 27.4837 141.011C27.0583 171.974 35.0061 226.607 56.9896 248.393C79.6336 270.834 211.14 275.339 242.419 269.269C271.1 263.703 282.56 231.48 303.229 210.811C325.673 188.368 368.729 176.58 366.813 144.88C364.894 113.131 357.483 67.3786 334.463 45.454C310.619 22.7442 302.23 -39.776 269.41 -42.2079Z" fill="#9A9AAF" />
+          </mask>
+          <g mask="url(#mask0_4712_5560)">
+            <path d="M313.593 129.318H303.32V138.221H313.593C318.73 138.221 320.014 136.441 320.014 133.473C320.014 130.505 318.088 129.318 313.593 129.318Z" fill="#8F3AFF" />
+            <path d="M85.1875 88.2439C85.1875 94.5178 86.4369 102.127 107.635 102.127L307.772 194.981V102.127V90.5591C307.772 80.618 299.728 72.5591 289.786 72.5591H107.632C88.3049 72.5591 85.1875 81.97 85.1875 88.2439Z" fill="#D5B5FF" />
+            <path d="M85.1875 88.2439C85.1875 94.5178 86.4369 102.127 107.635 102.127L307.772 194.981V102.127V90.5591C307.772 80.618 299.728 72.5591 289.786 72.5591H107.632C88.3049 72.5591 85.1875 81.97 85.1875 88.2439Z" fill="url(#paint0_linear_4712_5560)" />
+            <circle cx="159.968" cy="72.0292" r="43.4189" transform="rotate(-6.9748 159.968 72.0292)" fill="#F4C82D" />
+            <circle cx="159.968" cy="72.0292" r="43.4189" transform="rotate(-6.9748 159.968 72.0292)" fill="url(#paint1_linear_4712_5560)" fillOpacity="0.2" />
+            <circle cx="159.97" cy="72.0357" r="36.7391" transform="rotate(-6.9748 159.97 72.0357)" fill="#ECB907" />
+            <circle cx="159.97" cy="72.0357" r="36.7391" transform="rotate(-6.9748 159.97 72.0357)" fill="url(#paint2_linear_4712_5560)" fillOpacity="0.2" />
+            <path d="M160.722 108.795C161.73 108.758 162.745 108.677 163.764 108.553C163.034 108.708 161.994 108.802 160.722 108.795C142.173 109.476 125.836 95.5753 123.5 76.4814C121.038 56.3497 135.071 38.0687 154.845 35.6496C143.627 37.022 122.031 51.799 125.41 76.2477C129.131 103.173 151.301 108.743 160.722 108.795Z" fill="#CD9A16" />
+            <path d="M172.753 57.3134C170.15 54.1387 166.464 52.0421 162.408 51.4301C158.353 50.8181 154.217 51.7343 150.802 54.001C150.317 54.3223 149.849 54.6685 149.4 55.0383C146.237 57.6439 144.153 61.3305 143.548 65.3869C142.944 69.4434 143.862 73.5825 146.126 77.0058L159.215 96.7942L165.142 92.8741L159.579 84.464C160.57 84.488 161.557 84.4227 162.527 84.2714C164.404 83.9784 166.221 83.3629 167.895 82.4486C168.31 82.2221 168.716 81.9774 169.111 81.7147C169.597 81.3935 170.065 81.0473 170.514 80.6774C172.194 79.2926 173.585 77.5898 174.607 75.6662C175.629 73.7425 176.262 71.6357 176.47 69.4661C176.678 67.2964 176.456 65.1064 175.818 63.0211C175.181 60.9357 174.139 58.9959 172.752 57.3124L172.753 57.3134ZM169.395 68.7793C169.28 70.02 168.919 71.2252 168.335 72.3249C167.751 73.4246 166.955 74.3972 165.992 75.1861C165.734 75.3981 165.465 75.5967 165.187 75.7811C163.393 76.965 161.25 77.503 159.109 77.3068C156.967 77.1106 154.955 76.1918 153.402 74.7013C151.849 73.2109 150.848 71.2372 150.563 69.1043C150.278 66.9714 150.726 64.8059 151.833 62.9634C152.536 61.7935 153.479 60.7979 154.589 60.0359C155.227 59.5978 155.921 59.2369 156.657 58.9645C158.672 58.2181 160.883 58.18 162.925 58.8563C164.967 59.5326 166.72 60.8832 167.895 62.6863C169.071 64.4894 169.6 66.638 169.395 68.7793Z" fill="#FDDA5F" />
+            <path d="M172.752 57.3136C170.149 54.1388 166.463 52.0423 162.407 51.4303C158.352 50.8183 154.216 51.7345 150.801 54.0012C156.505 50.0378 169.11 45.3109 176.469 57.3136C183.705 69.1173 174.907 78.4395 168.23 82.2603C168.119 82.3245 168.007 82.3873 167.894 82.4488C166.22 83.3631 164.403 83.9786 162.526 84.2716L167.242 91.4066L165.141 92.8743L159.578 84.4642C160.569 84.4882 161.556 84.4229 162.526 84.2716C164.403 83.9786 166.22 83.3631 167.894 82.4488C168.006 82.3875 168.117 82.3247 168.23 82.2603C168.528 82.0881 168.822 81.9063 169.11 81.7149C169.596 81.3937 170.064 81.0475 170.513 80.6776C172.193 79.2928 173.584 77.59 174.606 75.6664C175.628 73.7427 176.261 71.6359 176.469 69.4663C176.677 67.2966 176.455 65.1066 175.818 63.0213C175.18 60.9359 174.138 58.9961 172.751 57.3126L172.752 57.3136Z" fill="#CC9B1B" />
+            <path d="M159.108 77.307C161.249 77.5032 163.392 76.9652 165.186 75.7813C162.916 76.4047 157.617 76.4257 154.588 71.5222C150.801 65.3928 153.232 61.2157 154.588 60.0361C153.478 60.7981 152.535 61.7937 151.832 62.9636C150.725 64.8061 150.277 66.9716 150.562 69.1045C150.847 71.2374 151.848 73.2111 153.401 74.7015C154.954 76.192 156.966 77.1108 159.108 77.307Z" fill="#CC9B1B" />
+            <path opacity="0.3" d="M165.241 115.129C179.817 113.346 191.818 104.533 198.262 92.5029L121.665 92.5029C129.875 107.856 146.923 117.37 165.241 115.129Z" fill="#A367C8" />
+            <path d="M307.772 116.655V185.029V211.481C307.772 221.423 299.713 229.481 289.772 229.481H103.188C93.2464 229.481 85.1875 221.423 85.1875 211.481V84.8013C85.1875 91.0622 86.4369 98.6552 107.635 98.6552H289.783C299.725 98.6552 307.772 106.714 307.772 116.655Z" fill="#BA84FF" />
+            <path d="M307.772 116.655V185.029V211.481C307.772 221.423 299.713 229.481 289.772 229.481H103.188C93.2464 229.481 85.1875 221.423 85.1875 211.481V84.8013C85.1875 91.0622 86.4369 98.6552 107.635 98.6552H289.783C299.725 98.6552 307.772 106.714 307.772 116.655Z" fill="url(#paint3_linear_4712_5560)" fillOpacity="0.4" />
+            <path d="M312.682 141.801C317.658 141.801 319.934 137.894 319.934 134.961V172.8H307.749V180.513H275.364C267.279 180.513 255.465 176.407 255.465 161.743C255.465 147.08 267.279 141.801 275.364 141.801H302.731H312.682Z" fill="#A765FC" />
+            <path d="M313.796 137.59C318.771 137.59 320.015 135.74 320.015 132.657V170.271C320.015 175.82 316.905 178.287 313.796 178.287H276.477C268.392 178.287 256.578 173.97 256.578 158.555C256.578 143.139 268.392 137.59 276.477 137.59H303.845H313.796Z" fill="#DABDFF" />
+            <circle cx="279.95" cy="158.257" r="11.1292" fill="#B07CF3" />
+          </g>
+        </g>
+        <defs>
+          <linearGradient id="paint0_linear_4712_5560" x1="151.046" y1="102.359" x2="158.064" y2="34.0042" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#7E2AEA" />
+            <stop offset="1" stopColor="#B47AFF" stopOpacity="0" />
+          </linearGradient>
+          <linearGradient id="paint1_linear_4712_5560" x1="132.58" y1="72.6972" x2="213.406" y2="72.6972" gradientUnits="userSpaceOnUse">
+            <stop stopColor="white" />
+            <stop offset="1" stopColor="#FEFEFE" stopOpacity="0" />
+          </linearGradient>
+          <linearGradient id="paint2_linear_4712_5560" x1="194.705" y1="54.6681" x2="155.294" y2="87.3993" gradientUnits="userSpaceOnUse">
+            <stop stopColor="white" />
+            <stop offset="1" stopColor="#FFD74A" stopOpacity="0" />
+          </linearGradient>
+          <linearGradient id="paint3_linear_4712_5560" x1="228" y1="102.004" x2="228.003" y2="279.504" gradientUnits="userSpaceOnUse">
+            <stop stopColor="white" />
+            <stop offset="1" stopColor="#7E2AEA" stopOpacity="0" />
+          </linearGradient>
+          <clipPath id="clip0_4712_5560">
+            <rect width="440" height="280" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    </SvgIcon>
+  );
+}

src/assets/Icons/Download.svg

@@ -1,5 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.0625 4.6875L9 0.75L12.9375 4.6875" stroke="#7E2AEA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M9 11.25V0.75" stroke="#7E2AEA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M17.25 11.25V16.5C17.25 16.6989 17.171 16.8897 17.0303 17.0303C16.8897 17.171 16.6989 17.25 16.5 17.25H1.5C1.30109 17.25 1.11032 17.171 0.96967 17.0303C0.829018 16.8897 0.75 16.6989 0.75 16.5V11.25" stroke="#7E2AEA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

src/assets/Icons/Download.tsx

@@ -0,0 +1,23 @@
+
+import { Box, SxProps, Theme } from "@mui/material";
+
+interface Props {
+  sx?: SxProps<Theme>;
+}
+
+export default function Download({ sx }: Props) {
+  return (
+    <Box
+      sx={{
+        ...sx,
+      }}
+    >
+      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M5.0625 4.6875L9 0.75L12.9375 4.6875" stroke="#7E2AEA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M9 11.25V0.75" stroke="#7E2AEA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M17.25 11.25V16.5C17.25 16.6989 17.171 16.8897 17.0303 17.0303C16.8897 17.171 16.6989 17.25 16.5 17.25H1.5C1.30109 17.25 1.11032 17.171 0.96967 17.0303C0.829018 16.8897 0.75 16.6989 0.75 16.5V11.25" stroke="#7E2AEA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+
+    </Box>
+  );
+}

src/assets/Icons/DownloadOld.tsx

@@ -5,7 +5,7 @@ interface Props {
   sx?: SxProps<Theme>;
 }
 
-export default function Download({ color, sx }: Props) {
+export default function downloadOld({ color, sx }: Props) {
   return (
     <Box
       sx={{

src/assets/Icons/NotebookWithPencil copy.tsx

@@ -0,0 +1,21 @@
+import { Box, SxProps, Theme } from "@mui/material";
+
+interface Props {
+    sx?: SxProps<Theme>;
+}
+export default function NotebookWithPencil({ sx }: Props) {
+    return (
+        <Box
+            sx={{
+                height: "24px",
+                ...sx
+            }}
+        >
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M5.88766 6.5124H15.3537M5.88766 10.4075H12.0172M5.88766 14.398H9.18792M18.988 4.41492V3.69678C18.988 3.14449 18.5403 2.69678 17.988 2.69678H3.19922C2.64693 2.69678 2.19922 3.14449 2.19922 3.69678V19.7038C2.19922 20.5407 3.16577 21.0074 3.8211 20.4869L6.25047 18.5577C6.42733 18.4173 6.64652 18.3408 6.87236 18.3408H17.988C18.5403 18.3408 18.988 17.8931 18.988 17.3408V15.2147" stroke="#7E2AEA" strokeWidth="1.5" strokeLinecap="round" />
+                <path d="M20.383 7.29034L20.9133 6.76001L20.383 6.22968L19.8527 6.76001L20.383 7.29034ZM15.9919 11.6815L15.4615 11.1511L14.9312 11.6815L15.4615 12.2118L15.9919 11.6815ZM16.7185 12.4081L16.1882 12.9384L16.7185 13.4688L17.2489 12.9384L16.7185 12.4081ZM21.1096 8.01698L21.64 8.54731L22.1703 8.01698L21.64 7.48665L21.1096 8.01698ZM14.4001 13.2732L14.9304 12.7429L14.4001 12.2126L13.8698 12.7429L14.4001 13.2732ZM14.0817 13.5917L13.5514 13.0613C13.5011 13.1115 13.4583 13.1686 13.4242 13.2309L14.0817 13.5917ZM13.1982 15.2018L12.5407 14.841C12.3803 15.1333 12.4321 15.4964 12.6678 15.7321C12.9036 15.9679 13.2667 16.0197 13.559 15.8593L13.1982 15.2018ZM14.8083 14.3183L15.1691 14.9758C15.2314 14.9417 15.2885 14.8988 15.3387 14.8486L14.8083 14.3183ZM15.1267 13.9999L15.6571 14.5302L16.1874 13.9999L15.6571 13.4696L15.1267 13.9999ZM21.9075 5.76585L21.3772 5.23552L20.8468 5.76585L21.3772 6.29618L21.9075 5.76585ZM22.2812 5.39209L22.8116 4.86176C22.5187 4.56887 22.0438 4.56887 21.7509 4.86176L22.2812 5.39209ZM23.0079 6.11874L23.5382 6.64907C23.8311 6.35617 23.8311 5.8813 23.5382 5.58841L23.0079 6.11874ZM22.6341 6.4925L22.1038 7.02283L22.6341 7.55316L23.1645 7.02283L22.6341 6.4925ZM19.8527 6.76001L15.4615 11.1511L16.5222 12.2118L20.9133 7.82067L19.8527 6.76001ZM15.4615 12.2118L16.1882 12.9384L17.2489 11.8778L16.5222 11.1511L15.4615 12.2118ZM17.2489 12.9384L21.64 8.54731L20.5793 7.48665L16.1882 11.8778L17.2489 12.9384ZM21.64 7.48665L20.9133 6.76001L19.8527 7.82067L20.5793 8.54731L21.64 7.48665ZM13.8698 12.7429L13.5514 13.0613L14.612 14.122L14.9304 13.8036L13.8698 12.7429ZM13.4242 13.2309L12.5407 14.841L13.8557 15.5626L14.7392 13.9524L13.4242 13.2309ZM13.559 15.8593L15.1691 14.9758L14.4475 13.6608L12.8374 14.5443L13.559 15.8593ZM15.3387 14.8486L15.6571 14.5302L14.5964 13.4696L14.278 13.788L15.3387 14.8486ZM15.6571 13.4696L14.9304 12.7429L13.8698 13.8036L14.5964 14.5302L15.6571 13.4696ZM22.4378 6.29618L22.8116 5.92242L21.7509 4.86176L21.3772 5.23552L22.4378 6.29618ZM21.7509 5.92242L22.4776 6.64907L23.5382 5.58841L22.8116 4.86176L21.7509 5.92242ZM22.4776 5.58841L22.1038 5.96217L23.1645 7.02283L23.5382 6.64907L22.4776 5.58841ZM23.1645 5.96217L22.4378 5.23552L21.3772 6.29618L22.1038 7.02283L23.1645 5.96217Z" fill="#7E2AEA" />
+            </svg>
+
+        </Box>
+    );
+}

src/assets/Icons/NotebookWithPencil.tsx

@@ -0,0 +1,18 @@
+import { Box, SxProps, Theme } from "@mui/material";
+
+interface Props {
+    sx?: SxProps<Theme>;
+}
+export default function CloseIcon({ sx }: Props) {
+    
+    return (
+        <Box
+            sx={sx}
+        >
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M5.88766 6.5124H15.3537M5.88766 10.4075H12.0172M5.88766 14.398H9.18792M18.988 4.41492V3.69678C18.988 3.14449 18.5403 2.69678 17.988 2.69678H3.19922C2.64693 2.69678 2.19922 3.14449 2.19922 3.69678V19.7038C2.19922 20.5407 3.16577 21.0074 3.8211 20.4869L6.25047 18.5577C6.42733 18.4173 6.64652 18.3408 6.87236 18.3408H17.988C18.5403 18.3408 18.988 17.8931 18.988 17.3408V15.2147" stroke="#7E2AEA" strokeWidth="1.5" strokeLinecap="round" />
+                <path d="M20.383 7.29034L20.9133 6.76001L20.383 6.22968L19.8527 6.76001L20.383 7.29034ZM15.9919 11.6815L15.4615 11.1511L14.9312 11.6815L15.4615 12.2118L15.9919 11.6815ZM16.7185 12.4081L16.1882 12.9384L16.7185 13.4688L17.2489 12.9384L16.7185 12.4081ZM21.1096 8.01698L21.64 8.54731L22.1703 8.01698L21.64 7.48665L21.1096 8.01698ZM14.4001 13.2732L14.9304 12.7429L14.4001 12.2126L13.8698 12.7429L14.4001 13.2732ZM14.0817 13.5917L13.5514 13.0613C13.5011 13.1115 13.4583 13.1686 13.4242 13.2309L14.0817 13.5917ZM13.1982 15.2018L12.5407 14.841C12.3803 15.1333 12.4321 15.4964 12.6678 15.7321C12.9036 15.9679 13.2667 16.0197 13.559 15.8593L13.1982 15.2018ZM14.8083 14.3183L15.1691 14.9758C15.2314 14.9417 15.2885 14.8988 15.3387 14.8486L14.8083 14.3183ZM15.1267 13.9999L15.6571 14.5302L16.1874 13.9999L15.6571 13.4696L15.1267 13.9999ZM21.9075 5.76585L21.3772 5.23552L20.8468 5.76585L21.3772 6.29618L21.9075 5.76585ZM22.2812 5.39209L22.8116 4.86176C22.5187 4.56887 22.0438 4.56887 21.7509 4.86176L22.2812 5.39209ZM23.0079 6.11874L23.5382 6.64907C23.8311 6.35617 23.8311 5.8813 23.5382 5.58841L23.0079 6.11874ZM22.6341 6.4925L22.1038 7.02283L22.6341 7.55316L23.1645 7.02283L22.6341 6.4925ZM19.8527 6.76001L15.4615 11.1511L16.5222 12.2118L20.9133 7.82067L19.8527 6.76001ZM15.4615 12.2118L16.1882 12.9384L17.2489 11.8778L16.5222 11.1511L15.4615 12.2118ZM17.2489 12.9384L21.64 8.54731L20.5793 7.48665L16.1882 11.8778L17.2489 12.9384ZM21.64 7.48665L20.9133 6.76001L19.8527 7.82067L20.5793 8.54731L21.64 7.48665ZM13.8698 12.7429L13.5514 13.0613L14.612 14.122L14.9304 13.8036L13.8698 12.7429ZM13.4242 13.2309L12.5407 14.841L13.8557 15.5626L14.7392 13.9524L13.4242 13.2309ZM13.559 15.8593L15.1691 14.9758L14.4475 13.6608L12.8374 14.5443L13.559 15.8593ZM15.3387 14.8486L15.6571 14.5302L14.5964 13.4696L14.278 13.788L15.3387 14.8486ZM15.6571 13.4696L14.9304 12.7429L13.8698 13.8036L14.5964 14.5302L15.6571 13.4696ZM22.4378 6.29618L22.8116 5.92242L21.7509 4.86176L21.3772 5.23552L22.4378 6.29618ZM21.7509 5.92242L22.4776 6.64907L23.5382 5.58841L22.8116 4.86176L21.7509 5.92242ZM22.4776 5.58841L22.1038 5.96217L23.1645 7.02283L23.5382 6.64907L22.4776 5.58841ZM23.1645 5.96217L22.4378 5.23552L21.3772 6.29618L22.1038 7.02283L23.1645 5.96217Z" fill="#7E2AEA" />
+            </svg>
+        </Box>
+    );
+}

src/assets/Icons/ZeroIcons.tsx

@@ -1,15 +1,32 @@
-<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+
+import { Box, SxProps, Theme } from "@mui/material";
+
+interface Props {
+  sx?: SxProps<Theme>;
+}
+
+export default function ZeroIcons({ sx }: Props) {
+  return (
+    <Box
+      sx={{
+        ...sx,
+      }}
+    >
+      <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M12.002 16.5045C13.6588 16.5045 15.002 14.4898 15.002 12.0045C15.002 9.51924 13.6588 7.50452 12.002 7.50452C10.3451 7.50452 9.00195 9.51924 9.00195 12.0045C9.00195 14.4898 10.3451 16.5045 12.002 16.5045Z"
         stroke="#7E2AEA"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
       <path
         d="M12.002 21.0045C16.9725 21.0045 21.002 16.9751 21.002 12.0045C21.002 7.03395 16.9725 3.00452 12.002 3.00452C7.03139 3.00452 3.00195 7.03395 3.00195 12.0045C3.00195 16.9751 7.03139 21.0045 12.002 21.0045Z"
         stroke="#7E2AEA"
-        stroke-width="1.5"
-        stroke-miterlimit="10"
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
       />
     </svg>
+    </Box>
+  );
+}

src/assets/Icons/arrow_left.svg

@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;stroke:#7E2AEA;stroke-width:2;stroke-miterlimit:10;}
-	.st1{fill:none;stroke:#7E2AEA;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
-</style>
-<g>
-	<path class="st0" d="M6.3,24.7C6.3,14.4,14.7,6,25.1,6s18.8,8.4,18.8,18.8s-8.4,18.8-18.8,18.8S6.3,35.1,6.3,24.7z"/>
-	<path class="st1" d="M27.4,17.7l-7.8,7l7.8,7"/>
-</g>
-</svg>

src/assets/Icons/arrow_left.tsx

@@ -0,0 +1,44 @@
+import { SvgIcon, SxProps, Theme } from "@mui/material";
+
+interface Props {
+  sx?: SxProps<Theme>;
+}
+
+export default function Arrow_left({ sx }: Props) {
+  return (
+    <SvgIcon
+      sx={{
+        ...sx,
+      }}
+    >
+      <svg
+        version="1.1"
+        id="Слой_1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+        x="0px"
+        y="0px"
+        viewBox="0 0 50 50"
+        enableBackground="new 0 0 50 50" // Добавлено как атрибут SVG
+        xmlSpace="preserve"
+      >
+        <style type="text/css">
+          {`
+            .st0 { fill: #FFFFFF; stroke: #7E2AEA; stroke-width: 2; stroke-miterlimit: 10; }
+            .st1 { fill: none; stroke: #7E2AEA; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+          `}
+        </style>
+        <g>
+          <path
+            className="st0"
+            d="M6.3,24.7C6.3,14.4,14.7,6,25.1,6s18.8,8.4,18.8,18.8s-8.4,18.8-18.8,18.8S6.3,35.1,6.3,24.7z"
+          />
+          <path
+            className="st1"
+            d="M27.4,17.7l-7.8,7l7.8,7"
+          />
+        </g>
+      </svg>
+    </SvgIcon>
+  );
+}

src/assets/Icons/arrow_right.svg

@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;stroke:#7E2AEA;stroke-width:2;stroke-miterlimit:10;}
-	.st1{fill:none;stroke:#7E2AEA;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
-</style>
-<g>
-	<path class="st0" d="M43.8,24.7c0,10.4-8.4,18.8-18.8,18.8S6.3,35.1,6.3,24.7S14.7,6,25.1,6S43.8,14.4,43.8,24.7z"/>
-	<path class="st1" d="M22.7,31.8l7.8-7l-7.8-7"/>
-</g>
-</svg>

src/assets/Icons/arrow_right.tsx

@@ -0,0 +1,44 @@
+import { SvgIcon, SxProps, Theme } from "@mui/material";
+
+interface Props {
+  sx?: SxProps<Theme>;
+}
+
+export default function Arrow_right({ sx }: Props) {
+  return (
+    <SvgIcon
+      sx={{
+        ...sx,
+      }}
+    >
+      <svg
+        version="1.1"
+        id="Слой_1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+        x="0px"
+        y="0px"
+        viewBox="0 0 50 50"
+        enableBackground="new 0 0 50 50" // Добавлено как атрибут SVG
+        xmlSpace="preserve"
+      >
+        <style type="text/css">
+          {`
+            .st0 { fill: #FFFFFF; stroke: #7E2AEA; stroke-width: 2; stroke-miterlimit: 10; }
+            .st1 { fill: none; stroke: #7E2AEA; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+          `}
+        </style>
+        <g>
+          <path
+            className="st0"
+            d="M43.8,24.7c0,10.4-8.4,18.8-18.8,18.8S6.3,35.1,6.3,24.7S14.7,6,25.1,6S43.8,14.4,43.8,24.7z"
+          />
+          <path
+            className="st1"
+            d="M22.7,31.8l7.8-7l-7.8-7"
+          />
+        </g>
+      </svg>
+    </SvgIcon>
+  );
+}

src/assets/Icons/bell.svg

@@ -1,4 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.17458 14.8781L6.06831 15.6206H6.06831L6.17458 14.8781ZM13.8254 14.8781L13.7191 14.1357H13.7191L13.8254 14.8781ZM6.08301 6.66667C6.08301 4.50355 7.83656 2.75 9.99967 2.75V1.25C7.00813 1.25 4.58301 3.67512 4.58301 6.66667H6.08301ZM6.08301 8.27792V6.66667H4.58301V8.27792H6.08301ZM4.75 12.3175C4.75 12.0528 4.80329 11.8024 4.89902 11.5751L3.51659 10.9929C3.34466 11.4012 3.25 11.8493 3.25 12.3175H4.75ZM6.28085 14.1357C5.40271 14.01 4.75 13.2427 4.75 12.3175H3.25C3.25 13.9506 4.41397 15.3838 6.06831 15.6206L6.28085 14.1357ZM10 14.4675C8.89615 14.4675 7.46917 14.3058 6.28085 14.1357L6.06831 15.6206C7.27007 15.7926 8.78438 15.9675 10 15.9675V14.4675ZM13.7191 14.1357C12.5308 14.3058 11.1038 14.4675 10 14.4675V15.9675C11.2156 15.9675 12.7299 15.7926 13.9317 15.6206L13.7191 14.1357ZM15.25 12.3175C15.25 13.2427 14.5973 14.01 13.7191 14.1357L13.9317 15.6206C15.586 15.3838 16.75 13.9506 16.75 12.3175H15.25ZM15.1009 11.5749C15.1967 11.8023 15.25 12.0527 15.25 12.3175H16.75C16.75 11.8492 16.6553 11.4011 16.4833 10.9927L15.1009 11.5749ZM13.9163 6.66667V8.27698H15.4163V6.66667H13.9163ZM9.99967 2.75C12.1628 2.75 13.9163 4.50355 13.9163 6.66667H15.4163C15.4163 3.67512 12.9912 1.25 9.99967 1.25V2.75ZM16.4833 10.9927C16.3676 10.718 16.2341 10.4521 16.1085 10.2066C15.9792 9.95372 15.8606 9.72663 15.7536 9.49614C15.5397 9.03537 15.4163 8.64925 15.4163 8.27698H13.9163C13.9163 8.97611 14.1479 9.59971 14.393 10.1277C14.5155 10.3915 14.6523 10.6536 14.773 10.8896C14.8975 11.133 15.0087 11.3559 15.1009 11.5749L16.4833 10.9927ZM4.58301 8.27792C4.58301 8.65008 4.45972 9.0361 4.24596 9.49675C4.13904 9.72718 4.02048 9.95421 3.89121 10.207C3.7657 10.4525 3.63223 10.7183 3.51659 10.9929L4.89902 11.5751C4.99122 11.3561 5.10231 11.1333 5.22675 10.8899C5.34743 10.6539 5.48419 10.3919 5.60661 10.1281C5.85154 9.6003 6.08301 8.97685 6.08301 8.27792H4.58301Z" fill="#9A9AAF" />
-<path d="M11.667 17.2173C11.3087 17.7796 10.696 18.1502 10.0003 18.1502C9.30467 18.1502 8.69197 17.7796 8.33366 17.2173" stroke-width="1.5" stroke-linecap="round" stroke="#9A9AAF" />
-</svg>

src/assets/Icons/bell.tsx

@@ -0,0 +1,24 @@
+
+import { Icon, SxProps, Theme } from "@mui/material";
+
+interface Props {
+  sx?: SxProps<Theme>;
+}
+
+export default function Bell({ sx }: Props) {
+  return (
+    <Icon
+      sx={{  
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        ...sx,
+      }}
+    >
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M6.17458 14.8781L6.06831 15.6206H6.06831L6.17458 14.8781ZM13.8254 14.8781L13.7191 14.1357H13.7191L13.8254 14.8781ZM6.08301 6.66667C6.08301 4.50355 7.83656 2.75 9.99967 2.75V1.25C7.00813 1.25 4.58301 3.67512 4.58301 6.66667H6.08301ZM6.08301 8.27792V6.66667H4.58301V8.27792H6.08301ZM4.75 12.3175C4.75 12.0528 4.80329 11.8024 4.89902 11.5751L3.51659 10.9929C3.34466 11.4012 3.25 11.8493 3.25 12.3175H4.75ZM6.28085 14.1357C5.40271 14.01 4.75 13.2427 4.75 12.3175H3.25C3.25 13.9506 4.41397 15.3838 6.06831 15.6206L6.28085 14.1357ZM10 14.4675C8.89615 14.4675 7.46917 14.3058 6.28085 14.1357L6.06831 15.6206C7.27007 15.7926 8.78438 15.9675 10 15.9675V14.4675ZM13.7191 14.1357C12.5308 14.3058 11.1038 14.4675 10 14.4675V15.9675C11.2156 15.9675 12.7299 15.7926 13.9317 15.6206L13.7191 14.1357ZM15.25 12.3175C15.25 13.2427 14.5973 14.01 13.7191 14.1357L13.9317 15.6206C15.586 15.3838 16.75 13.9506 16.75 12.3175H15.25ZM15.1009 11.5749C15.1967 11.8023 15.25 12.0527 15.25 12.3175H16.75C16.75 11.8492 16.6553 11.4011 16.4833 10.9927L15.1009 11.5749ZM13.9163 6.66667V8.27698H15.4163V6.66667H13.9163ZM9.99967 2.75C12.1628 2.75 13.9163 4.50355 13.9163 6.66667H15.4163C15.4163 3.67512 12.9912 1.25 9.99967 1.25V2.75ZM16.4833 10.9927C16.3676 10.718 16.2341 10.4521 16.1085 10.2066C15.9792 9.95372 15.8606 9.72663 15.7536 9.49614C15.5397 9.03537 15.4163 8.64925 15.4163 8.27698H13.9163C13.9163 8.97611 14.1479 9.59971 14.393 10.1277C14.5155 10.3915 14.6523 10.6536 14.773 10.8896C14.8975 11.133 15.0087 11.3559 15.1009 11.5749L16.4833 10.9927ZM4.58301 8.27792C4.58301 8.65008 4.45972 9.0361 4.24596 9.49675C4.13904 9.72718 4.02048 9.95421 3.89121 10.207C3.7657 10.4525 3.63223 10.7183 3.51659 10.9929L4.89902 11.5751C4.99122 11.3561 5.10231 11.1333 5.22675 10.8899C5.34743 10.6539 5.48419 10.3919 5.60661 10.1281C5.85154 9.6003 6.08301 8.97685 6.08301 8.27792H4.58301Z" fill="#9A9AAF" />
+        <path d="M11.667 17.2173C11.3087 17.7796 10.696 18.1502 10.0003 18.1502C9.30467 18.1502 8.69197 17.7796 8.33366 17.2173" strokeWidth="1.5" strokeLinecap="round" stroke="#9A9AAF" />
+      </svg>
+    </Icon>
+  );
+}

src/assets/Icons/black_logo_PenaHab.svg

@@ -1,19 +0,0 @@
-<svg width="124" height="48" viewBox="0 0 180 70" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_316_1239)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M25.9138 3.31956C18.594 2.47167 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.1435 6.85174 52.1873C11.6777 57.3827 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.1668 54.7027 33.1042C54.5683 26.0308 44.3552 24.6463 39.441 19.5621C34.3509 14.2959 33.1853 4.16185 25.9138 3.31956Z" fill="#7E2AEA"/>
-<circle cx="44.126" cy="56.9181" r="4.03906" fill="#7E2AEA"/>
-<circle cx="40.0865" cy="12.1038" r="1.53869" fill="#7E2AEA"/>
-<path d="M64.699 31.4509C64.2503 27.0891 62.1983 23.0492 58.9405 20.1143C55.6828 17.1794 51.4514 15.5585 47.0666 15.5658C46.4441 15.5661 45.822 15.5987 45.2028 15.6634C40.8429 16.1212 36.807 18.1771 33.8735 21.4347C30.9399 24.6924 29.3165 28.9208 29.3164 33.3046V33.3046V58.6458H36.9188V47.8758C39.8912 49.9437 43.4267 51.0493 47.0476 51.0434C47.6702 51.0432 48.2923 51.0107 48.9115 50.9459C51.2282 50.7024 53.4744 50.005 55.5216 48.8934C57.5688 47.7818 59.3771 46.2779 60.8431 44.4675C62.3091 42.6571 63.4042 40.5757 64.0658 38.3421C64.7274 36.1085 64.9425 33.7664 64.699 31.4497V31.4509ZM54.935 39.6868C54.0999 40.7242 53.0673 41.5856 51.897 42.2211C50.7266 42.8566 49.4418 43.2536 48.117 43.3891C47.7617 43.426 47.4048 43.4446 47.0476 43.4449C44.7485 43.4428 42.5183 42.6591 40.7233 41.2225C38.9282 39.7859 37.6749 37.7817 37.1689 35.5389C36.663 33.2961 36.9346 30.948 37.9391 28.8798C38.9436 26.8117 40.6213 25.1465 42.6969 24.1576C44.7725 23.1687 47.1226 22.9147 49.3616 23.4374C51.6005 23.9602 53.5952 25.2285 55.0183 27.0343C56.4414 28.8401 57.2083 31.076 57.1932 33.3751C57.1781 35.6742 56.3818 37.8999 54.935 39.6868Z" fill="black"/>
-<path d="M84.5348 15.5659C83.9123 15.5662 83.2902 15.5988 82.671 15.6635C78.1535 16.1392 73.9907 18.3299 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.1659C75.6053 49.2944 79.9734 51.0402 84.5158 51.0435C85.1384 51.0433 85.7605 51.0108 86.3797 50.946C89.6368 50.5992 92.7351 49.3602 95.3331 47.3653C97.9312 45.3704 99.9282 42.6972 101.104 39.64H92.4388L92.4033 39.6844C91.2933 41.0563 89.8444 42.1147 88.1999 42.7549C86.5554 43.3951 84.7722 43.5948 83.0268 43.3343C81.2814 43.0739 79.6342 42.3622 78.2482 41.2699C76.8622 40.1775 75.7855 38.7421 75.1244 37.1059H101.859C102.422 34.5159 102.399 31.8329 101.79 29.2533C101.181 26.6737 100.003 24.2629 98.3424 22.1976C96.6813 20.1323 94.5791 18.4648 92.19 17.3173C89.8009 16.1698 87.1853 15.5714 84.5348 15.5659V15.5659ZM75.1244 29.5036C75.8165 27.8001 76.9578 26.3164 78.4267 25.2105C79.8956 24.1046 81.6371 23.4181 83.4655 23.224C83.8207 23.1871 84.1777 23.1685 84.5348 23.1683C86.5541 23.1649 88.528 23.7666 90.202 24.8959C91.876 26.0251 93.1732 27.63 93.9263 29.5036H75.1244Z" fill="black"/>
-<path d="M120.638 15.5659C117.732 15.5613 114.882 16.3603 112.402 17.8745V15.5659H104.8V51.0436H112.402V31.4042C112.402 29.2199 113.27 27.125 114.814 25.5805C116.359 24.036 118.454 23.1683 120.638 23.1683C122.822 23.1683 124.917 24.036 126.462 25.5805C128.006 27.125 128.874 29.2199 128.874 31.4042V51.0436H136.476V31.4042C136.476 27.2036 134.808 23.1751 131.837 20.2048C128.867 17.2346 124.839 15.5659 120.638 15.5659Z" fill="black"/>
-<path d="M174.492 35.5715V15.5659H166.889V18.7336C163.917 16.6648 160.382 15.5591 156.76 15.5659C156.138 15.5662 155.516 15.5988 154.897 15.6635C150.379 16.1393 146.216 18.3299 143.266 21.7839C140.316 25.238 138.803 29.6922 139.04 34.2285C139.276 38.7648 141.244 43.0375 144.537 46.1659C147.831 49.2944 152.199 51.0402 156.741 51.0436C157.364 51.0433 157.986 51.0107 158.605 50.946C163.024 50.4938 167.108 48.3889 170.04 45.0529C172.319 48.1011 175.618 50.2276 179.336 51.0436V43.0738C177.893 42.4204 176.669 41.3655 175.81 40.0351C174.951 38.7047 174.493 37.1551 174.492 35.5715ZM164.629 39.6844C163.794 40.7216 162.761 41.5828 161.591 42.2183C160.42 42.8538 159.136 43.2509 157.811 43.3867C157.456 43.4236 157.099 43.4422 156.741 43.4425C154.144 43.4424 151.646 42.4452 149.762 40.6568C147.879 38.8684 146.754 36.4252 146.619 33.8313C146.484 31.2374 147.351 28.6909 149.039 26.7171C150.727 24.7433 153.109 23.493 155.692 23.224C156.047 23.1871 156.404 23.1685 156.76 23.1683C158.674 23.1699 160.549 23.7133 162.166 24.7356C163.784 25.7579 165.08 27.2174 165.903 28.9451C166.726 30.6729 167.043 32.5984 166.818 34.4988C166.592 36.3993 165.833 38.1972 164.629 39.6844Z" fill="black"/>
-<path d="M147.519 54.8937V59.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.1771 152.716 59.5017 152.79 59.8578C152.868 60.2139 152.907 60.7663 152.907 61.5151V66.4086H150.7V62.0021C150.7 61.1276 150.658 60.5726 150.575 60.3369C150.491 60.1013 150.342 59.9154 150.127 59.7793C149.917 59.6379 149.653 59.5672 149.334 59.5672C148.967 59.5672 148.64 59.6562 148.352 59.8342C148.064 60.0123 147.852 60.282 147.716 60.6433C147.585 60.9993 147.519 61.5282 147.519 62.2299V66.4086H145.312V54.8937H147.519Z" fill="black"/>
-<path d="M160.644 66.4086V65.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.3453V58.0669H157.314V61.9C157.314 63.073 157.353 63.793 157.432 64.06C157.515 64.3219 157.665 64.5313 157.879 64.6884C158.094 64.8403 158.366 64.9162 158.696 64.9162C159.073 64.9162 159.411 64.8141 159.71 64.6099C160.008 64.4004 160.212 64.1438 160.322 63.8401C160.432 63.5312 160.487 62.7797 160.487 61.5858V58.0669H162.694V66.4086H160.644Z" fill="black"/>
-<path d="M164.894 66.4086V54.8937H167.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.7742 173.039 62.1514C173.039 63.5757 172.699 64.6727 172.018 65.4425C171.342 66.2122 170.52 66.5971 169.551 66.5971C169.075 66.5971 168.604 66.4793 168.138 66.2436C167.677 66.0027 167.279 65.6493 166.944 65.1832V66.4086H164.894ZM167.085 62.0571C167.085 62.9211 167.221 63.56 167.493 63.9736C167.876 64.5601 168.384 64.8534 169.017 64.8534C169.504 64.8534 169.918 64.6465 170.258 64.2328C170.604 63.8139 170.777 63.1568 170.777 62.2613C170.777 61.3083 170.604 60.6223 170.258 60.2034C169.913 59.7793 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.2193 167.085 62.0571Z" fill="black"/>
-</g>
-<defs>
-<clipPath id="clip0_316_1239">
-<rect width="179.509" height="69.4872" fill="white"/>
-</clipPath>
-</defs>
-</svg>

src/assets/Icons/black_logo_PenaHab.tsx

@@ -0,0 +1,36 @@
+
+import { Box, SxProps, Theme } from "@mui/material";
+
+interface Props {
+  sx?: SxProps<Theme>;
+}
+
+export default function Black_logo_PenaHab({ sx }: Props) {
+  return (
+    <Box
+      sx={{
+        ...sx,
+      }}
+    >
+      <svg width="124" height="48" viewBox="0 0 180 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g clipPath="url(#clip0_316_1239)">
+          <path fillRule="evenodd" clipRule="evenodd" d="M25.9138 3.31956C18.594 2.47167 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.1435 6.85174 52.1873C11.6777 57.3827 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.1668 54.7027 33.1042C54.5683 26.0308 44.3552 24.6463 39.441 19.5621C34.3509 14.2959 33.1853 4.16185 25.9138 3.31956Z" fill="#7E2AEA" />
+          <circle cx="44.126" cy="56.9181" r="4.03906" fill="#7E2AEA" />
+          <circle cx="40.0865" cy="12.1038" r="1.53869" fill="#7E2AEA" />
+          <path d="M64.699 31.4509C64.2503 27.0891 62.1983 23.0492 58.9405 20.1143C55.6828 17.1794 51.4514 15.5585 47.0666 15.5658C46.4441 15.5661 45.822 15.5987 45.2028 15.6634C40.8429 16.1212 36.807 18.1771 33.8735 21.4347C30.9399 24.6924 29.3165 28.9208 29.3164 33.3046V33.3046V58.6458H36.9188V47.8758C39.8912 49.9437 43.4267 51.0493 47.0476 51.0434C47.6702 51.0432 48.2923 51.0107 48.9115 50.9459C51.2282 50.7024 53.4744 50.005 55.5216 48.8934C57.5688 47.7818 59.3771 46.2779 60.8431 44.4675C62.3091 42.6571 63.4042 40.5757 64.0658 38.3421C64.7274 36.1085 64.9425 33.7664 64.699 31.4497V31.4509ZM54.935 39.6868C54.0999 40.7242 53.0673 41.5856 51.897 42.2211C50.7266 42.8566 49.4418 43.2536 48.117 43.3891C47.7617 43.426 47.4048 43.4446 47.0476 43.4449C44.7485 43.4428 42.5183 42.6591 40.7233 41.2225C38.9282 39.7859 37.6749 37.7817 37.1689 35.5389C36.663 33.2961 36.9346 30.948 37.9391 28.8798C38.9436 26.8117 40.6213 25.1465 42.6969 24.1576C44.7725 23.1687 47.1226 22.9147 49.3616 23.4374C51.6005 23.9602 53.5952 25.2285 55.0183 27.0343C56.4414 28.8401 57.2083 31.076 57.1932 33.3751C57.1781 35.6742 56.3818 37.8999 54.935 39.6868Z" fill="black" />
+          <path d="M84.5348 15.5659C83.9123 15.5662 83.2902 15.5988 82.671 15.6635C78.1535 16.1392 73.9907 18.3299 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.1659C75.6053 49.2944 79.9734 51.0402 84.5158 51.0435C85.1384 51.0433 85.7605 51.0108 86.3797 50.946C89.6368 50.5992 92.7351 49.3602 95.3331 47.3653C97.9312 45.3704 99.9282 42.6972 101.104 39.64H92.4388L92.4033 39.6844C91.2933 41.0563 89.8444 42.1147 88.1999 42.7549C86.5554 43.3951 84.7722 43.5948 83.0268 43.3343C81.2814 43.0739 79.6342 42.3622 78.2482 41.2699C76.8622 40.1775 75.7855 38.7421 75.1244 37.1059H101.859C102.422 34.5159 102.399 31.8329 101.79 29.2533C101.181 26.6737 100.003 24.2629 98.3424 22.1976C96.6813 20.1323 94.5791 18.4648 92.19 17.3173C89.8009 16.1698 87.1853 15.5714 84.5348 15.5659V15.5659ZM75.1244 29.5036C75.8165 27.8001 76.9578 26.3164 78.4267 25.2105C79.8956 24.1046 81.6371 23.4181 83.4655 23.224C83.8207 23.1871 84.1777 23.1685 84.5348 23.1683C86.5541 23.1649 88.528 23.7666 90.202 24.8959C91.876 26.0251 93.1732 27.63 93.9263 29.5036H75.1244Z" fill="black" />
+          <path d="M120.638 15.5659C117.732 15.5613 114.882 16.3603 112.402 17.8745V15.5659H104.8V51.0436H112.402V31.4042C112.402 29.2199 113.27 27.125 114.814 25.5805C116.359 24.036 118.454 23.1683 120.638 23.1683C122.822 23.1683 124.917 24.036 126.462 25.5805C128.006 27.125 128.874 29.2199 128.874 31.4042V51.0436H136.476V31.4042C136.476 27.2036 134.808 23.1751 131.837 20.2048C128.867 17.2346 124.839 15.5659 120.638 15.5659Z" fill="black" />
+          <path d="M174.492 35.5715V15.5659H166.889V18.7336C163.917 16.6648 160.382 15.5591 156.76 15.5659C156.138 15.5662 155.516 15.5988 154.897 15.6635C150.379 16.1393 146.216 18.3299 143.266 21.7839C140.316 25.238 138.803 29.6922 139.04 34.2285C139.276 38.7648 141.244 43.0375 144.537 46.1659C147.831 49.2944 152.199 51.0402 156.741 51.0436C157.364 51.0433 157.986 51.0107 158.605 50.946C163.024 50.4938 167.108 48.3889 170.04 45.0529C172.319 48.1011 175.618 50.2276 179.336 51.0436V43.0738C177.893 42.4204 176.669 41.3655 175.81 40.0351C174.951 38.7047 174.493 37.1551 174.492 35.5715ZM164.629 39.6844C163.794 40.7216 162.761 41.5828 161.591 42.2183C160.42 42.8538 159.136 43.2509 157.811 43.3867C157.456 43.4236 157.099 43.4422 156.741 43.4425C154.144 43.4424 151.646 42.4452 149.762 40.6568C147.879 38.8684 146.754 36.4252 146.619 33.8313C146.484 31.2374 147.351 28.6909 149.039 26.7171C150.727 24.7433 153.109 23.493 155.692 23.224C156.047 23.1871 156.404 23.1685 156.76 23.1683C158.674 23.1699 160.549 23.7133 162.166 24.7356C163.784 25.7579 165.08 27.2174 165.903 28.9451C166.726 30.6729 167.043 32.5984 166.818 34.4988C166.592 36.3993 165.833 38.1972 164.629 39.6844Z" fill="black" />
+          <path d="M147.519 54.8937V59.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.1771 152.716 59.5017 152.79 59.8578C152.868 60.2139 152.907 60.7663 152.907 61.5151V66.4086H150.7V62.0021C150.7 61.1276 150.658 60.5726 150.575 60.3369C150.491 60.1013 150.342 59.9154 150.127 59.7793C149.917 59.6379 149.653 59.5672 149.334 59.5672C148.967 59.5672 148.64 59.6562 148.352 59.8342C148.064 60.0123 147.852 60.282 147.716 60.6433C147.585 60.9993 147.519 61.5282 147.519 62.2299V66.4086H145.312V54.8937H147.519Z" fill="black" />
+          <path d="M160.644 66.4086V65.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.3453V58.0669H157.314V61.9C157.314 63.073 157.353 63.793 157.432 64.06C157.515 64.3219 157.665 64.5313 157.879 64.6884C158.094 64.8403 158.366 64.9162 158.696 64.9162C159.073 64.9162 159.411 64.8141 159.71 64.6099C160.008 64.4004 160.212 64.1438 160.322 63.8401C160.432 63.5312 160.487 62.7797 160.487 61.5858V58.0669H162.694V66.4086H160.644Z" fill="black" />
+          <path d="M164.894 66.4086V54.8937H167.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.7742 173.039 62.1514C173.039 63.5757 172.699 64.6727 172.018 65.4425C171.342 66.2122 170.52 66.5971 169.551 66.5971C169.075 66.5971 168.604 66.4793 168.138 66.2436C167.677 66.0027 167.279 65.6493 166.944 65.1832V66.4086H164.894ZM167.085 62.0571C167.085 62.9211 167.221 63.56 167.493 63.9736C167.876 64.5601 168.384 64.8534 169.017 64.8534C169.504 64.8534 169.918 64.6465 170.258 64.2328C170.604 63.8139 170.777 63.1568 170.777 62.2613C170.777 61.3083 170.604 60.6223 170.258 60.2034C169.913 59.7793 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.2193 167.085 62.0571Z" fill="black" />
+        </g>
+        <defs>
+          <clipPath id="clip0_316_1239">
+            <rect width="179.509" height="69.4872" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    </Box>
+  );
+}

src/assets/Icons/cart.svg

@@ -1,5 +0,0 @@
-<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.25 17.125C7.94036 17.125 8.5 16.5654 8.5 15.875C8.5 15.1846 7.94036 14.625 7.25 14.625C6.55964 14.625 6 15.1846 6 15.875C6 16.5654 6.55964 17.125 7.25 17.125Z" fill="#9A9AAF"/>
-<path d="M15.375 17.125C16.0654 17.125 16.625 16.5654 16.625 15.875C16.625 15.1846 16.0654 14.625 15.375 14.625C14.6846 14.625 14.125 15.1846 14.125 15.875C14.125 16.5654 14.6846 17.125 15.375 17.125Z" fill="#9A9AAF"/>
-<path d="M4.30469 4.625H18.3203L16.2578 11.8437C16.1842 12.1057 16.0266 12.3363 15.8093 12.5C15.5919 12.6638 15.3268 12.7516 15.0547 12.75H7.57031C7.29819 12.7516 7.03308 12.6638 6.81572 12.5C6.59836 12.3363 6.44078 12.1057 6.36719 11.8437L3.53906 1.95313C3.50169 1.82246 3.42275 1.70754 3.3142 1.62578C3.20565 1.54401 3.0734 1.49986 2.9375 1.5H1.625" stroke="#9A9AAF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

src/assets/Icons/cart.tsx

@@ -0,0 +1,22 @@
+
+import { Box, SxProps, Theme } from "@mui/material";
+
+interface Props {
+  sx?: SxProps<Theme>;
+}
+
+export default function Cart({ sx }: Props) {
+  return (
+    <Box
+      sx={{
+        ...sx,
+      }}
+    >
+      <svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M7.25 17.125C7.94036 17.125 8.5 16.5654 8.5 15.875C8.5 15.1846 7.94036 14.625 7.25 14.625C6.55964 14.625 6 15.1846 6 15.875C6 16.5654 6.55964 17.125 7.25 17.125Z" fill="#9A9AAF" />
+        <path d="M15.375 17.125C16.0654 17.125 16.625 16.5654 16.625 15.875C16.625 15.1846 16.0654 14.625 15.375 14.625C14.6846 14.625 14.125 15.1846 14.125 15.875C14.125 16.5654 14.6846 17.125 15.375 17.125Z" fill="#9A9AAF" />
+        <path d="M4.30469 4.625H18.3203L16.2578 11.8437C16.1842 12.1057 16.0266 12.3363 15.8093 12.5C15.5919 12.6638 15.3268 12.7516 15.0547 12.75H7.57031C7.29819 12.7516 7.03308 12.6638 6.81572 12.5C6.59836 12.3363 6.44078 12.1057 6.36719 11.8437L3.53906 1.95313C3.50169 1.82246 3.42275 1.70754 3.3142 1.62578C3.20565 1.54401 3.0734 1.49986 2.9375 1.5H1.625" stroke="#9A9AAF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    </Box>
+  );
+}

src/assets/Icons/check.svg

@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;}
-	.st1{fill:none;stroke:#7E2AEA;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
-</style>
-<g>
-	<path class="st0" d="M18,36L18,36C8.1,36,0,27.9,0,18l0,0C0,8.1,8.1,0,18,0l0,0c9.9,0,18,8.1,18,18l0,0C36,27.9,27.9,36,18,36z"/>
-</g>
-<path class="st1" d="M10.9,15.2L18,23l7-7.8"/>
-</svg>

src/assets/Icons/check.tsx

@@ -0,0 +1,39 @@
+import { SvgIcon, SxProps, Theme } from "@mui/material";
+
+interface Props {
+  sx?: SxProps<Theme>;
+  className: string;
+}
+
+export default function Check({ sx, className }: Props) {
+  return (
+    <SvgIcon
+      sx={{
+        ...sx,
+      }}
+    >
+      <svg
+        version="1.1"
+        id="Слой_1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+        x="0px"
+        y="0px"
+        viewBox="0 0 36 36"
+        enableBackground="new 0 0 36 36" // Добавлено как атрибут SVG
+        xmlSpace="preserve"
+      >
+        <style type="text/css">
+          {`
+            .st0 { fill: #FFFFFF; }
+            .st1 { fill: none; stroke: #7E2AEA; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
+          `}
+        </style>
+        <g>
+          <path className="st0" d="M18,36L18,36C8.1,36,0,27.9,0,18l0,0C0,8.1,8.1,0,18,0l0,0c9.9,0,18,8.1,18,18l0,0C36,27.9,27.9,36,18,36z" />
+        </g>
+        <path className="st1" d="M10.9,15.2L18,23l7-7.8" />
+      </svg>
+    </SvgIcon>
+  );
+}

src/assets/Icons/cross.svg

@@ -1,3 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="black" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.400391 0.399902L19.6004 19.5999M0.400391 19.5999L19.6004 0.399902" />
-</svg>

src/assets/Icons/cross.tsx

@@ -0,0 +1,20 @@
+
+import { Box, SxProps, Theme } from "@mui/material";
+
+interface Props {
+  sx?: SxProps<Theme>;
+}
+
+export default function Cross({ sx }: Props) {
+  return (
+    <Box
+      sx={{
+        ...sx,
+      }}
+    >
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="black" xmlns="http://www.w3.org/2000/svg">
+        <path d="M0.400391 0.399902L19.6004 19.5999M0.400391 19.5999L19.6004 0.399902" />
+      </svg>
+    </Box>
+  );
+}

src/assets/Icons/exclamation_point.svg

@@ -1,5 +0,0 @@
-<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="25" height="25" rx="6" fill="#FFE500" fill-opacity="0.5"/>
-<path d="M11.2297 6.95313C11.2297 8.90625 12.1527 14.6387 12.5 14.6387C12.8472 14.6387 13.6643 8.90625 13.6643 6.95313C13.6643 5.65104 13.1944 5 12.5 5C11.8055 5 11.2297 5.65104 11.2297 6.95313Z" fill="#FB5607" stroke="#FB5607" stroke-linejoin="round"/>
-<circle cx="12.5" cy="18.1936" r="1.38889" fill="#FB5607"/>
-</svg>

src/assets/Icons/exclamation_point.tsx

@@ -0,0 +1,22 @@
+
+import { Box, SxProps, Theme } from "@mui/material";
+
+interface Props {
+  sx?: SxProps<Theme>;
+}
+
+export default function Exclamation_point({ sx }: Props) {
+  return (
+    <Box
+      sx={{
+        ...sx,
+      }}
+    >
+      <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect width="25" height="25" rx="6" fill="#FFE500" fillOpacity="0.5" />
+        <path d="M11.2297 6.95313C11.2297 8.90625 12.1527 14.6387 12.5 14.6387C12.8472 14.6387 13.6643 8.90625 13.6643 6.95313C13.6643 5.65104 13.1944 5 12.5 5C11.8055 5 11.2297 5.65104 11.2297 6.95313Z" fill="#FB5607" stroke="#FB5607" strokeLinejoin="round" />
+        <circle cx="12.5" cy="18.1936" r="1.38889" fill="#FB5607" />
+      </svg>
+    </Box>
+  );
+}

src/assets/Icons/logoPenaHab.svg

@@ -1,12 +0,0 @@
-<svg width="124" height="48" viewBox="0 0 124 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.9005 2.29318C12.8441 1.70747 9.35566 7.13894 6.11089 11.0651C3.2633 14.5107 1.14302 18.4025 0.896751 22.8677C0.634735 27.6182 1.49648 32.5656 4.73287 36.0498C8.06652 39.6386 13.0602 41.9062 17.9005 41.1731C22.3389 40.5008 24.3028 35.6268 27.6072 32.5851C31.1952 29.2824 37.8799 27.7463 37.7871 22.8677C37.6943 17.9816 30.6393 17.0251 27.2447 13.5131C23.7286 9.87537 22.9234 2.87501 17.9005 2.29318Z" fill="#7E2AEA"/>
-<ellipse cx="30.4815" cy="39.3174" rx="2.79008" ry="2.79008" fill="#7E2AEA"/>
-<circle cx="27.6908" cy="8.36074" r="1.06289" fill="#7E2AEA"/>
-<path d="M44.6924 21.7255C44.3825 18.7125 42.9649 15.9218 40.7146 13.8944C38.4642 11.8671 35.5413 10.7474 32.5124 10.7525C32.0823 10.7526 31.6526 10.7751 31.2249 10.8199C28.2132 11.1361 25.4253 12.5563 23.3989 14.8066C21.3725 17.0568 20.2511 19.9778 20.251 23.006V23.006V40.511H25.5025V33.0714C27.5557 34.4998 29.998 35.2636 32.4992 35.2595C32.9293 35.2594 33.359 35.2369 33.7867 35.1921C35.3871 35.0239 36.9387 34.5422 38.3529 33.7743C39.767 33.0065 41.0161 31.9676 42.0288 30.717C43.0415 29.4665 43.798 28.0287 44.255 26.4857C44.712 24.9428 44.8606 23.325 44.6924 21.7246V21.7255ZM37.9477 27.4146C37.3708 28.1312 36.6575 28.7262 35.8491 29.1652C35.0406 29.6042 34.1531 29.8785 33.238 29.9721C32.9925 29.9976 32.746 30.0104 32.4992 30.0106C30.9111 30.0092 29.3705 29.4678 28.1306 28.4754C26.8906 27.4831 26.0248 26.0986 25.6753 24.5494C25.3258 23.0001 25.5134 21.3781 26.2073 19.9495C26.9012 18.5209 28.0601 17.3706 29.4939 16.6874C30.9276 16.0043 32.5511 15.8289 34.0977 16.19C35.6443 16.5511 37.0222 17.4272 38.0052 18.6746C38.9882 19.922 39.518 21.4665 39.5076 23.0547C39.4971 24.6428 38.9471 26.1803 37.9477 27.4146Z" fill="#F2F3F7"/>
-<path d="M58.3944 10.7524C57.9643 10.7526 57.5346 10.7751 57.1069 10.8198C53.9863 11.1485 51.1108 12.6617 49.0728 15.0477C47.0349 17.4336 45.99 20.5105 46.1534 23.644C46.3168 26.7776 47.676 29.7291 49.9511 31.8902C52.2261 34.0512 55.2434 35.2572 58.3813 35.2595C58.8113 35.2593 59.241 35.2368 59.6688 35.1921C61.9187 34.9526 64.0589 34.0967 65.8536 32.7187C67.6482 31.3407 69.0277 29.494 69.8401 27.3822H63.8542L63.8297 27.4129C63.063 28.3606 62.0621 29.0917 60.9261 29.5339C59.7901 29.9761 58.5583 30.1141 57.3527 29.9342C56.147 29.7542 55.0092 29.2627 54.0517 28.5081C53.0943 27.7535 52.3505 26.762 51.8939 25.6317H70.3617C70.7505 23.8426 70.7342 21.9892 70.3138 20.2073C69.8934 18.4254 69.0797 16.7601 67.9323 15.3334C66.7848 13.9068 65.3327 12.7549 63.6824 11.9623C62.032 11.1696 60.2252 10.7562 58.3944 10.7524V10.7524ZM51.8939 20.3802C52.3719 19.2035 53.1603 18.1786 54.175 17.4147C55.1897 16.6508 56.3927 16.1765 57.6557 16.0425C57.9011 16.017 58.1477 16.0041 58.3944 16.004C59.7892 16.0016 61.1528 16.4173 62.3091 17.1973C63.4655 17.9774 64.3615 19.086 64.8818 20.3802H51.8939Z" fill="#F2F3F7"/>
-<path d="M83.3332 10.7525C81.3261 10.7493 79.3571 11.3012 77.6441 12.3472V10.7525H72.3926V35.2595H77.6441V21.6931C77.6441 20.1842 78.2435 18.7372 79.3104 17.6703C80.3773 16.6034 81.8244 16.004 83.3332 16.004C84.8421 16.004 86.2891 16.6034 87.3561 17.6703C88.423 18.7372 89.0224 20.1842 89.0224 21.6931V35.2595H94.2739V21.6931C94.2739 18.7915 93.1212 16.0087 91.0694 13.9569C89.0177 11.9051 86.2349 10.7525 83.3332 10.7525Z" fill="#F2F3F7"/>
-<path d="M120.534 24.5718V10.7525H115.283V12.9406C113.23 11.5115 110.787 10.7477 108.286 10.7525C107.856 10.7527 107.426 10.7751 106.998 10.8199C103.878 11.1485 101.002 12.6617 98.9644 15.0477C96.9265 17.4337 95.8816 20.5105 96.045 23.6441C96.2084 26.7776 97.5676 29.7291 99.8427 31.8902C102.118 34.0512 105.135 35.2572 108.273 35.2595C108.703 35.2593 109.133 35.2368 109.56 35.1921C112.613 34.8798 115.434 33.4257 117.46 31.1213C119.033 33.227 121.313 34.6959 123.88 35.2595V29.7542C122.884 29.3029 122.038 28.5742 121.445 27.6552C120.852 26.7362 120.535 25.6657 120.534 24.5718ZM113.721 27.4129C113.144 28.1293 112.431 28.7243 111.623 29.1632C110.814 29.6022 109.927 29.8766 109.012 29.9704C108.766 29.9958 108.52 30.0087 108.273 30.0089C106.479 30.0088 104.753 29.32 103.452 28.0846C102.151 26.8492 101.374 25.1615 101.281 23.3697C101.188 21.5779 101.786 19.8188 102.952 18.4554C104.118 17.092 105.764 16.2283 107.548 16.0425C107.793 16.017 108.04 16.0041 108.286 16.004C109.608 16.0051 110.903 16.3805 112.02 17.0866C113.138 17.7928 114.033 18.801 114.601 19.9945C115.17 21.1879 115.389 22.518 115.233 23.8308C115.078 25.1436 114.553 26.3855 113.721 27.4129Z" fill="#F2F3F7"/>
-<path d="M101.903 37.9189V40.8434C102.395 40.2683 102.982 39.9807 103.666 39.9807C104.017 39.9807 104.333 40.0459 104.615 40.1761C104.898 40.3063 105.109 40.4727 105.25 40.6752C105.395 40.8778 105.493 41.1021 105.543 41.348C105.598 41.594 105.625 41.9756 105.625 42.4929V45.8731H104.1V42.8293C104.1 42.2252 104.071 41.8418 104.013 41.679C103.955 41.5162 103.852 41.3878 103.704 41.2938C103.559 41.1961 103.377 41.1473 103.156 41.1473C102.903 41.1473 102.677 41.2088 102.478 41.3318C102.279 41.4547 102.132 41.641 102.038 41.8906C101.948 42.1366 101.903 42.5019 101.903 42.9866V45.8731H100.378V37.9189H101.903Z" fill="#F2F3F7"/>
-<path d="M110.969 45.8731V45.0104C110.759 45.3179 110.483 45.5603 110.139 45.7375C109.799 45.9147 109.439 46.0034 109.059 46.0034C108.672 46.0034 108.325 45.9184 108.017 45.7484C107.71 45.5783 107.488 45.3396 107.35 45.0321C107.213 44.7247 107.144 44.2997 107.144 43.7571V40.111H108.669V42.7587C108.669 43.569 108.696 44.0664 108.75 44.2508C108.808 44.4317 108.911 44.5764 109.059 44.6849C109.207 44.7898 109.396 44.8422 109.623 44.8422C109.884 44.8422 110.117 44.7717 110.323 44.6306C110.53 44.486 110.671 44.3087 110.747 44.0989C110.823 43.8855 110.861 43.3664 110.861 42.5417V40.111H112.385V45.8731H110.969Z" fill="#F2F3F7"/>
-<path d="M113.904 45.8731V37.9189H115.429V40.7838C115.899 40.2484 116.456 39.9807 117.1 39.9807C117.802 39.9807 118.382 40.2358 118.842 40.7458C119.301 41.2522 119.531 41.981 119.531 42.9324C119.531 43.9162 119.296 44.674 118.826 45.2058C118.359 45.7375 117.791 46.0034 117.122 46.0034C116.793 46.0034 116.467 45.922 116.145 45.7592C115.827 45.5928 115.552 45.3487 115.321 45.0267V45.8731H113.904ZM115.418 42.8673C115.418 43.4641 115.512 43.9054 115.7 44.1912C115.964 44.5963 116.315 44.7988 116.753 44.7988C117.089 44.7988 117.375 44.656 117.61 44.3702C117.849 44.0808 117.968 43.6269 117.968 43.0083C117.968 42.35 117.849 41.8762 117.61 41.5868C117.371 41.2938 117.066 41.1473 116.693 41.1473C116.328 41.1473 116.024 41.2902 115.782 41.5759C115.539 41.8581 115.418 42.2885 115.418 42.8673Z" fill="#F2F3F7"/>
-</svg>

src/assets/Icons/logoPenaHab.tsx

@@ -0,0 +1,29 @@
+
+import { Box, SxProps, Theme } from "@mui/material";
+
+interface Props {
+  sx?: SxProps<Theme>;
+}
+
+export default function LogoPenaHab({ sx }: Props) {
+  return (
+    <Box
+      sx={{
+        ...sx,
+      }}
+    >
+      <svg width="124" height="48" viewBox="0 0 124 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fillRule="evenodd" clipRule="evenodd" d="M17.9005 2.29318C12.8441 1.70747 9.35566 7.13894 6.11089 11.0651C3.2633 14.5107 1.14302 18.4025 0.896751 22.8677C0.634735 27.6182 1.49648 32.5656 4.73287 36.0498C8.06652 39.6386 13.0602 41.9062 17.9005 41.1731C22.3389 40.5008 24.3028 35.6268 27.6072 32.5851C31.1952 29.2824 37.8799 27.7463 37.7871 22.8677C37.6943 17.9816 30.6393 17.0251 27.2447 13.5131C23.7286 9.87537 22.9234 2.87501 17.9005 2.29318Z" fill="#7E2AEA" />
+        <ellipse cx="30.4815" cy="39.3174" rx="2.79008" ry="2.79008" fill="#7E2AEA" />
+        <circle cx="27.6908" cy="8.36074" r="1.06289" fill="#7E2AEA" />
+        <path d="M44.6924 21.7255C44.3825 18.7125 42.9649 15.9218 40.7146 13.8944C38.4642 11.8671 35.5413 10.7474 32.5124 10.7525C32.0823 10.7526 31.6526 10.7751 31.2249 10.8199C28.2132 11.1361 25.4253 12.5563 23.3989 14.8066C21.3725 17.0568 20.2511 19.9778 20.251 23.006V23.006V40.511H25.5025V33.0714C27.5557 34.4998 29.998 35.2636 32.4992 35.2595C32.9293 35.2594 33.359 35.2369 33.7867 35.1921C35.3871 35.0239 36.9387 34.5422 38.3529 33.7743C39.767 33.0065 41.0161 31.9676 42.0288 30.717C43.0415 29.4665 43.798 28.0287 44.255 26.4857C44.712 24.9428 44.8606 23.325 44.6924 21.7246V21.7255ZM37.9477 27.4146C37.3708 28.1312 36.6575 28.7262 35.8491 29.1652C35.0406 29.6042 34.1531 29.8785 33.238 29.9721C32.9925 29.9976 32.746 30.0104 32.4992 30.0106C30.9111 30.0092 29.3705 29.4678 28.1306 28.4754C26.8906 27.4831 26.0248 26.0986 25.6753 24.5494C25.3258 23.0001 25.5134 21.3781 26.2073 19.9495C26.9012 18.5209 28.0601 17.3706 29.4939 16.6874C30.9276 16.0043 32.5511 15.8289 34.0977 16.19C35.6443 16.5511 37.0222 17.4272 38.0052 18.6746C38.9882 19.922 39.518 21.4665 39.5076 23.0547C39.4971 24.6428 38.9471 26.1803 37.9477 27.4146Z" fill="#F2F3F7" />
+        <path d="M58.3944 10.7524C57.9643 10.7526 57.5346 10.7751 57.1069 10.8198C53.9863 11.1485 51.1108 12.6617 49.0728 15.0477C47.0349 17.4336 45.99 20.5105 46.1534 23.644C46.3168 26.7776 47.676 29.7291 49.9511 31.8902C52.2261 34.0512 55.2434 35.2572 58.3813 35.2595C58.8113 35.2593 59.241 35.2368 59.6688 35.1921C61.9187 34.9526 64.0589 34.0967 65.8536 32.7187C67.6482 31.3407 69.0277 29.494 69.8401 27.3822H63.8542L63.8297 27.4129C63.063 28.3606 62.0621 29.0917 60.9261 29.5339C59.7901 29.9761 58.5583 30.1141 57.3527 29.9342C56.147 29.7542 55.0092 29.2627 54.0517 28.5081C53.0943 27.7535 52.3505 26.762 51.8939 25.6317H70.3617C70.7505 23.8426 70.7342 21.9892 70.3138 20.2073C69.8934 18.4254 69.0797 16.7601 67.9323 15.3334C66.7848 13.9068 65.3327 12.7549 63.6824 11.9623C62.032 11.1696 60.2252 10.7562 58.3944 10.7524V10.7524ZM51.8939 20.3802C52.3719 19.2035 53.1603 18.1786 54.175 17.4147C55.1897 16.6508 56.3927 16.1765 57.6557 16.0425C57.9011 16.017 58.1477 16.0041 58.3944 16.004C59.7892 16.0016 61.1528 16.4173 62.3091 17.1973C63.4655 17.9774 64.3615 19.086 64.8818 20.3802H51.8939Z" fill="#F2F3F7" />
+        <path d="M83.3332 10.7525C81.3261 10.7493 79.3571 11.3012 77.6441 12.3472V10.7525H72.3926V35.2595H77.6441V21.6931C77.6441 20.1842 78.2435 18.7372 79.3104 17.6703C80.3773 16.6034 81.8244 16.004 83.3332 16.004C84.8421 16.004 86.2891 16.6034 87.3561 17.6703C88.423 18.7372 89.0224 20.1842 89.0224 21.6931V35.2595H94.2739V21.6931C94.2739 18.7915 93.1212 16.0087 91.0694 13.9569C89.0177 11.9051 86.2349 10.7525 83.3332 10.7525Z" fill="#F2F3F7" />
+        <path d="M120.534 24.5718V10.7525H115.283V12.9406C113.23 11.5115 110.787 10.7477 108.286 10.7525C107.856 10.7527 107.426 10.7751 106.998 10.8199C103.878 11.1485 101.002 12.6617 98.9644 15.0477C96.9265 17.4337 95.8816 20.5105 96.045 23.6441C96.2084 26.7776 97.5676 29.7291 99.8427 31.8902C102.118 34.0512 105.135 35.2572 108.273 35.2595C108.703 35.2593 109.133 35.2368 109.56 35.1921C112.613 34.8798 115.434 33.4257 117.46 31.1213C119.033 33.227 121.313 34.6959 123.88 35.2595V29.7542C122.884 29.3029 122.038 28.5742 121.445 27.6552C120.852 26.7362 120.535 25.6657 120.534 24.5718ZM113.721 27.4129C113.144 28.1293 112.431 28.7243 111.623 29.1632C110.814 29.6022 109.927 29.8766 109.012 29.9704C108.766 29.9958 108.52 30.0087 108.273 30.0089C106.479 30.0088 104.753 29.32 103.452 28.0846C102.151 26.8492 101.374 25.1615 101.281 23.3697C101.188 21.5779 101.786 19.8188 102.952 18.4554C104.118 17.092 105.764 16.2283 107.548 16.0425C107.793 16.017 108.04 16.0041 108.286 16.004C109.608 16.0051 110.903 16.3805 112.02 17.0866C113.138 17.7928 114.033 18.801 114.601 19.9945C115.17 21.1879 115.389 22.518 115.233 23.8308C115.078 25.1436 114.553 26.3855 113.721 27.4129Z" fill="#F2F3F7" />
+        <path d="M101.903 37.9189V40.8434C102.395 40.2683 102.982 39.9807 103.666 39.9807C104.017 39.9807 104.333 40.0459 104.615 40.1761C104.898 40.3063 105.109 40.4727 105.25 40.6752C105.395 40.8778 105.493 41.1021 105.543 41.348C105.598 41.594 105.625 41.9756 105.625 42.4929V45.8731H104.1V42.8293C104.1 42.2252 104.071 41.8418 104.013 41.679C103.955 41.5162 103.852 41.3878 103.704 41.2938C103.559 41.1961 103.377 41.1473 103.156 41.1473C102.903 41.1473 102.677 41.2088 102.478 41.3318C102.279 41.4547 102.132 41.641 102.038 41.8906C101.948 42.1366 101.903 42.5019 101.903 42.9866V45.8731H100.378V37.9189H101.903Z" fill="#F2F3F7" />
+        <path d="M110.969 45.8731V45.0104C110.759 45.3179 110.483 45.5603 110.139 45.7375C109.799 45.9147 109.439 46.0034 109.059 46.0034C108.672 46.0034 108.325 45.9184 108.017 45.7484C107.71 45.5783 107.488 45.3396 107.35 45.0321C107.213 44.7247 107.144 44.2997 107.144 43.7571V40.111H108.669V42.7587C108.669 43.569 108.696 44.0664 108.75 44.2508C108.808 44.4317 108.911 44.5764 109.059 44.6849C109.207 44.7898 109.396 44.8422 109.623 44.8422C109.884 44.8422 110.117 44.7717 110.323 44.6306C110.53 44.486 110.671 44.3087 110.747 44.0989C110.823 43.8855 110.861 43.3664 110.861 42.5417V40.111H112.385V45.8731H110.969Z" fill="#F2F3F7" />
+        <path d="M113.904 45.8731V37.9189H115.429V40.7838C115.899 40.2484 116.456 39.9807 117.1 39.9807C117.802 39.9807 118.382 40.2358 118.842 40.7458C119.301 41.2522 119.531 41.981 119.531 42.9324C119.531 43.9162 119.296 44.674 118.826 45.2058C118.359 45.7375 117.791 46.0034 117.122 46.0034C116.793 46.0034 116.467 45.922 116.145 45.7592C115.827 45.5928 115.552 45.3487 115.321 45.0267V45.8731H113.904ZM115.418 42.8673C115.418 43.4641 115.512 43.9054 115.7 44.1912C115.964 44.5963 116.315 44.7988 116.753 44.7988C117.089 44.7988 117.375 44.656 117.61 44.3702C117.849 44.0808 117.968 43.6269 117.968 43.0083C117.968 42.35 117.849 41.8762 117.61 41.5868C117.371 41.2938 117.066 41.1473 116.693 41.1473C116.328 41.1473 116.024 41.2902 115.782 41.5759C115.539 41.8581 115.418 42.2885 115.418 42.8673Z" fill="#F2F3F7" />
+      </svg>
+    </Box>
+  );
+}

src/assets/Icons/tariffs-time/Infinity.tsx

@@ -1,9 +1,26 @@
- <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+
+import { Box, SxProps, Theme } from "@mui/material";
+
+interface Props {
+  sx?: SxProps<Theme>;
+}
+
+export default function Infinity({ sx }: Props) {
+  return (
+    <Box
+      sx={{
+        ...sx,
+      }}
+    >
+       <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M9.99573 14.394L9.18011 15.3128C8.55177 15.94 7.7516 16.3669 6.88072 16.5396C6.00984 16.7122 5.10733 16.6228 4.28723 16.2827C3.46713 15.9426 2.76626 15.367 2.27317 14.6287C1.78008 13.8904 1.51691 13.0225 1.51691 12.1347C1.51691 11.2468 1.78008 10.3789 2.27317 9.64063C2.76626 8.90232 3.46713 8.32674 4.28723 7.98662C5.10733 7.64651 6.00984 7.55712 6.88072 7.72976C7.7516 7.90239 8.55177 8.32931 9.18011 8.95655L14.8239 15.3128C15.4522 15.94 16.2524 16.3669 17.1232 16.5396C17.9941 16.7122 18.8966 16.6228 19.7167 16.2827C20.5368 15.9426 21.2377 15.367 21.7308 14.6287C22.2239 13.8904 22.4871 13.0225 22.4871 12.1347C22.4871 11.2468 22.2239 10.3789 21.7308 9.64063C21.2377 8.90232 20.5368 8.32674 19.7167 7.98662C18.8966 7.64651 17.9941 7.55712 17.1232 7.72976C16.2524 7.90239 15.4522 8.32931 14.8239 8.95655L14.0082 9.8753"
         stroke="#26AC5B"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </svg>
+    </Box>
+  );
+}

src/assets/Icons/tariffs-time/NineIcons.tsx

@@ -1,22 +1,39 @@
- <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+
+import { Box, SxProps, Theme } from "@mui/material";
+
+interface Props {
+  sx?: SxProps<Theme>;
+}
+
+export default function NineIcons({ sx }: Props) {
+  return (
+    <Box
+      sx={{
+        ...sx,
+      }}
+    >
+       <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M12.002 21.0045C16.9725 21.0045 21.002 16.9751 21.002 12.0045C21.002 7.03395 16.9725 3.00452 12.002 3.00452C7.03139 3.00452 3.00195 7.03395 3.00195 12.0045C3.00195 16.9751 7.03139 21.0045 12.002 21.0045Z"
         stroke="#7E2AEA"
-        stroke-width="1.5"
-        stroke-miterlimit="10"
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
       />
       <path
         d="M14.2707 11.817L11.252 16.8795"
         stroke="#7E2AEA"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
       <path
         d="M12.002 13.1295C13.4517 13.1295 14.627 11.9543 14.627 10.5045C14.627 9.05477 13.4517 7.87952 12.002 7.87952C10.5522 7.87952 9.37695 9.05477 9.37695 10.5045C9.37695 11.9543 10.5522 13.1295 12.002 13.1295Z"
         stroke="#7E2AEA"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </svg>
+    </Box>
+  );
+}

src/assets/Icons/tariffs-time/OneIcons.svg

@@ -1,15 +0,0 @@
-  <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M12.2594 21.1347C17.23 21.1347 21.2594 17.1052 21.2594 12.1347C21.2594 7.16411 17.23 3.13467 12.2594 3.13467C7.28884 3.13467 3.2594 7.16411 3.2594 12.1347C3.2594 17.1052 7.28884 21.1347 12.2594 21.1347Z"
-        stroke="#7E2AEA"
-        stroke-width="1.5"
-        stroke-miterlimit="10"
-      />
-      <path
-        d="M10.3844 9.50967L12.6344 8.00967V16.6347"
-        stroke="#7E2AEA"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-    </svg>

src/assets/Icons/tariffs-time/OneIcons.tsx

@@ -0,0 +1,32 @@
+
+import { Box, SxProps, Theme } from "@mui/material";
+
+interface Props {
+  sx?: SxProps<Theme>;
+}
+
+export default function OneIcons({ sx }: Props) {
+  return (
+    <Box
+      sx={{
+        ...sx,
+      }}
+    >
+        <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M12.2594 21.1347C17.23 21.1347 21.2594 17.1052 21.2594 12.1347C21.2594 7.16411 17.23 3.13467 12.2594 3.13467C7.28884 3.13467 3.2594 7.16411 3.2594 12.1347C3.2594 17.1052 7.28884 21.1347 12.2594 21.1347Z"
+        stroke="#7E2AEA"
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
+      />
+      <path
+        d="M10.3844 9.50967L12.6344 8.00967V16.6347"
+        stroke="#7E2AEA"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+    </Box>
+  );
+}

src/assets/Icons/tariffs-time/SixIcons.tsx

@@ -1,22 +1,39 @@
-  <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+
+import { Box, SxProps, Theme } from "@mui/material";
+
+interface Props {
+  sx?: SxProps<Theme>;
+}
+
+export default function SixIcons({ sx }: Props) {
+  return (
+    <Box
+      sx={{
+        ...sx,
+      }}
+    >
+        <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M12.002 21.0045C16.9725 21.0045 21.002 16.9751 21.002 12.0045C21.002 7.03395 16.9725 3.00452 12.002 3.00452C7.03139 3.00452 3.00195 7.03395 3.00195 12.0045C3.00195 16.9751 7.03139 21.0045 12.002 21.0045Z"
         stroke="#7E2AEA"
-        stroke-width="1.5"
-        stroke-miterlimit="10"
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
       />
       <path
         d="M9.73322 12.192L12.752 7.12952"
         stroke="#7E2AEA"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
       <path
         d="M12.002 16.1295C13.4517 16.1295 14.627 14.9543 14.627 13.5045C14.627 12.0548 13.4517 10.8795 12.002 10.8795C10.5522 10.8795 9.37695 12.0548 9.37695 13.5045C9.37695 14.9543 10.5522 16.1295 12.002 16.1295Z"
         stroke="#7E2AEA"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </svg>
+    </Box>
+  );
+}

src/assets/Icons/tariffs-time/ThreeIcons.tsx

@@ -1,16 +1,33 @@
 
+import { Box, SxProps, Theme } from "@mui/material";
+
+interface Props {
+  sx?: SxProps<Theme>;
+}
+
+export default function ThreeIcons({ sx }: Props) {
+  return (
+    <Box
+      sx={{
+        ...sx,
+      }}
+    >
+      
     <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M12.002 21.1347C16.9725 21.1347 21.002 17.1052 21.002 12.1347C21.002 7.16411 16.9725 3.13467 12.002 3.13467C7.03139 3.13467 3.00195 7.16411 3.00195 12.1347C3.00195 17.1052 7.03139 21.1347 12.002 21.1347Z"
         stroke="#7E2AEA"
-        stroke-width="1.5"
-        stroke-miterlimit="10"
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
       />
       <path
         d="M9.75195 8.00967H14.252L11.627 11.7597C12.0586 11.7597 12.4836 11.8662 12.8643 12.0697C13.245 12.2732 13.5696 12.5675 13.8094 12.9264C14.0492 13.2853 14.1968 13.6979 14.2391 14.1274C14.2814 14.557 14.2171 14.9904 14.0519 15.3892C13.8867 15.7881 13.6257 16.14 13.2921 16.4138C12.9584 16.6877 12.5623 16.875 12.1389 16.9592C11.7156 17.0434 11.2779 17.022 10.8649 16.8967C10.4518 16.7714 10.076 16.5461 9.7707 16.2409"
         stroke="#7E2AEA"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </svg>
+    </Box>
+  );
+}

src/assets/Icons/tariffs-volume/FiveIcons.tsx

@@ -1,4 +1,22 @@
-<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.002 21.0045C16.9725 21.0045 21.002 16.9751 21.002 12.0045C21.002 7.03395 16.9725 3.00452 12.002 3.00452C7.03139 3.00452 3.00195 7.03395 3.00195 12.0045C3.00195 16.9751 7.03139 21.0045 12.002 21.0045Z" stroke="#FB5607" stroke-width="1.5" stroke-miterlimit="10"/>
-<path d="M14.252 7.87952H10.4832L9.75195 12.3983C10.1191 12.0312 10.5868 11.7812 11.096 11.6799C11.6052 11.5787 12.133 11.6307 12.6126 11.8294C13.0923 12.028 13.5022 12.3645 13.7906 12.7962C14.0791 13.2278 14.233 13.7354 14.233 14.2545C14.233 14.7737 14.0791 15.2812 13.7906 15.7129C13.5022 16.1445 13.0923 16.481 12.6126 16.6797C12.133 16.8784 11.6052 16.9304 11.096 16.8291C10.5868 16.7278 10.1191 16.4779 9.75195 16.1108" stroke="#FB5607" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+
+import { Box, SxProps, Theme } from "@mui/material";
+
+interface Props {
+  sx?: SxProps<Theme>;
+}
+
+export default function FiveIcons({ sx }: Props) {
+  return (
+    <Box
+      sx={{
+        ...sx,
+      }}
+    >
+      <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.002 21.0045C16.9725 21.0045 21.002 16.9751 21.002 12.0045C21.002 7.03395 16.9725 3.00452 12.002 3.00452C7.03139 3.00452 3.00195 7.03395 3.00195 12.0045C3.00195 16.9751 7.03139 21.0045 12.002 21.0045Z" stroke="#FB5607" strokeWidth="1.5" strokeMiterlimit="10"/>
+<path d="M14.252 7.87952H10.4832L9.75195 12.3983C10.1191 12.0312 10.5868 11.7812 11.096 11.6799C11.6052 11.5787 12.133 11.6307 12.6126 11.8294C13.0923 12.028 13.5022 12.3645 13.7906 12.7962C14.0791 13.2278 14.233 13.7354 14.233 14.2545C14.233 14.7737 14.0791 15.2812 13.7906 15.7129C13.5022 16.1445 13.0923 16.481 12.6126 16.6797C12.133 16.8784 11.6052 16.9304 11.096 16.8291C10.5868 16.7278 10.1191 16.4779 9.75195 16.1108" stroke="#FB5607" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
 </svg>
+
+    </Box>
+  );
+}

src/assets/Icons/tariffs-volume/FourIcons.svg

@@ -1,5 +0,0 @@
-<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.002 21.0045C16.9725 21.0045 21.002 16.9751 21.002 12.0045C21.002 7.03395 16.9725 3.00452 12.002 3.00452C7.03139 3.00452 3.00195 7.03395 3.00195 12.0045C3.00195 16.9751 7.03139 21.0045 12.002 21.0045Z" stroke="#FB5607" stroke-width="1.5" stroke-miterlimit="10"/>
-<path d="M11.627 7.12952L9.37695 13.5045H13.877" stroke="#FB5607" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M13.877 10.5045V16.5045" stroke="#FB5607" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

src/assets/Icons/tariffs-volume/FourIcons.tsx

@@ -0,0 +1,23 @@
+
+import { Box, SxProps, Theme } from "@mui/material";
+
+interface Props {
+  sx?: SxProps<Theme>;
+}
+
+export default function FourIcons({ sx }: Props) {
+  return (
+    <Box
+      sx={{
+        ...sx,
+      }}
+    >
+      <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.002 21.0045C16.9725 21.0045 21.002 16.9751 21.002 12.0045C21.002 7.03395 16.9725 3.00452 12.002 3.00452C7.03139 3.00452 3.00195 7.03395 3.00195 12.0045C3.00195 16.9751 7.03139 21.0045 12.002 21.0045Z" stroke="#FB5607" strokeWidth="1.5" strokeMiterlimit="10"/>
+<path d="M11.627 7.12952L9.37695 13.5045H13.877" stroke="#FB5607" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+<path d="M13.877 10.5045V16.5045" stroke="#FB5607" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
+
+    </Box>
+  );
+}

src/assets/Icons/tariffs-volume/OneIcons.svg

@@ -1,4 +0,0 @@
-<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.002 21.1347C16.9725 21.1347 21.002 17.1052 21.002 12.1347C21.002 7.16411 16.9725 3.13467 12.002 3.13467C7.03139 3.13467 3.00195 7.16411 3.00195 12.1347C3.00195 17.1052 7.03139 21.1347 12.002 21.1347Z" stroke="#FB5607" stroke-width="1.5" stroke-miterlimit="10"/>
-<path d="M10.127 9.50967L12.377 8.00967V16.6347" stroke="#FB5607" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

src/assets/Icons/tariffs-volume/OneIcons.tsx

@@ -0,0 +1,22 @@
+
+import { Box, SxProps, Theme } from "@mui/material";
+
+interface Props {
+  sx?: SxProps<Theme>;
+}
+
+export default function OneIcons({ sx }: Props) {
+  return (
+    <Box
+      sx={{
+        ...sx,
+      }}
+    >
+      <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.002 21.1347C16.9725 21.1347 21.002 17.1052 21.002 12.1347C21.002 7.16411 16.9725 3.13467 12.002 3.13467C7.03139 3.13467 3.00195 7.16411 3.00195 12.1347C3.00195 17.1052 7.03139 21.1347 12.002 21.1347Z" stroke="#FB5607" strokeWidth="1.5" strokeMiterlimit="10"/>
+<path d="M10.127 9.50967L12.377 8.00967V16.6347" stroke="#FB5607" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
+
+    </Box>
+  );
+}

src/assets/Icons/tariffs-volume/ThreeIcons.tsx

@@ -1,4 +1,22 @@
-<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.002 21.1347C16.9725 21.1347 21.002 17.1052 21.002 12.1347C21.002 7.16411 16.9725 3.13467 12.002 3.13467C7.03139 3.13467 3.00195 7.16411 3.00195 12.1347C3.00195 17.1052 7.03139 21.1347 12.002 21.1347Z" stroke="#FB5607" stroke-width="1.5" stroke-miterlimit="10"/>
-<path d="M9.75195 8.00967H14.252L11.627 11.7597C12.0586 11.7597 12.4836 11.8662 12.8643 12.0697C13.245 12.2732 13.5696 12.5675 13.8094 12.9264C14.0492 13.2853 14.1968 13.6979 14.2391 14.1274C14.2814 14.557 14.2171 14.9904 14.0519 15.3892C13.8867 15.7881 13.6257 16.14 13.2921 16.4138C12.9584 16.6877 12.5623 16.875 12.1389 16.9592C11.7156 17.0434 11.2779 17.022 10.8649 16.8967C10.4518 16.7714 10.076 16.5461 9.7707 16.2409" stroke="#FB5607" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+
+import { Box, SxProps, Theme } from "@mui/material";
+
+interface Props {
+  sx?: SxProps<Theme>;
+}
+
+export default function ThreeIcons({ sx }: Props) {
+  return (
+    <Box
+      sx={{
+        ...sx,
+      }}
+    >
+      <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.002 21.1347C16.9725 21.1347 21.002 17.1052 21.002 12.1347C21.002 7.16411 16.9725 3.13467 12.002 3.13467C7.03139 3.13467 3.00195 7.16411 3.00195 12.1347C3.00195 17.1052 7.03139 21.1347 12.002 21.1347Z" stroke="#FB5607" strokeWidth="1.5" strokeMiterlimit="10"/>
+<path d="M9.75195 8.00967H14.252L11.627 11.7597C12.0586 11.7597 12.4836 11.8662 12.8643 12.0697C13.245 12.2732 13.5696 12.5675 13.8094 12.9264C14.0492 13.2853 14.1968 13.6979 14.2391 14.1274C14.2814 14.557 14.2171 14.9904 14.0519 15.3892C13.8867 15.7881 13.6257 16.14 13.2921 16.4138C12.9584 16.6877 12.5623 16.875 12.1389 16.9592C11.7156 17.0434 11.2779 17.022 10.8649 16.8967C10.4518 16.7714 10.076 16.5461 9.7707 16.2409" stroke="#FB5607" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
 </svg>
+
+    </Box>
+  );
+}

src/assets/Icons/tariffs-volume/TwoIcons.svg

@@ -1,4 +0,0 @@
-<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.002 21.1347C16.9725 21.1347 21.002 17.1052 21.002 12.1347C21.002 7.16411 16.9725 3.13467 12.002 3.13467C7.03139 3.13467 3.00195 7.16411 3.00195 12.1347C3.00195 17.1052 7.03139 21.1347 12.002 21.1347Z" stroke="#FB5607" stroke-width="1.5" stroke-miterlimit="10"/>
-<path d="M9.93008 9.0128C10.1323 8.5353 10.4932 8.14229 10.9518 7.90027C11.4105 7.65825 11.9386 7.58207 12.4469 7.68462C12.9552 7.78716 13.4125 8.06214 13.7414 8.46303C14.0703 8.86392 14.2507 9.36612 14.252 9.88468C14.254 10.3327 14.1199 10.7707 13.8676 11.1409V11.1409L9.75195 16.6347H14.252" stroke="#FB5607" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

src/assets/Icons/tariffs-volume/TwoIcons.tsx

@@ -0,0 +1,22 @@
+
+import { Box, SxProps, Theme } from "@mui/material";
+
+interface Props {
+  sx?: SxProps<Theme>;
+}
+
+export default function TwoIcons({ sx }: Props) {
+  return (
+    <Box
+      sx={{
+        ...sx,
+      }}
+    >
+      <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.002 21.1347C16.9725 21.1347 21.002 17.1052 21.002 12.1347C21.002 7.16411 16.9725 3.13467 12.002 3.13467C7.03139 3.13467 3.00195 7.16411 3.00195 12.1347C3.00195 17.1052 7.03139 21.1347 12.002 21.1347Z" stroke="#FB5607" strokeWidth="1.5" strokeMiterlimit="10"/>
+<path d="M9.93008 9.0128C10.1323 8.5353 10.4932 8.14229 10.9518 7.90027C11.4105 7.65825 11.9386 7.58207 12.4469 7.68462C12.9552 7.78716 13.4125 8.06214 13.7414 8.46303C14.0703 8.86392 14.2507 9.36612 14.252 9.88468C14.254 10.3327 14.1199 10.7707 13.8676 11.1409V11.1409L9.75195 16.6347H14.252" stroke="#FB5607" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
+
+    </Box>
+  );
+}

src/assets/Icons/wallet_icon.svg

@@ -1,3 +0,0 @@
-<svg width="22" height="19" viewBox="0 0 22 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M19.5714 7.29869V2.29869C19.5714 1.50971 18.9318 0.870118 18.1429 0.870118L2.42857 0.870117C1.63959 0.870117 1 1.50971 1 2.29869L1 16.5844C1 17.3734 1.63959 18.013 2.42857 18.013L18.1429 18.013C18.9318 18.013 19.5714 17.3734 19.5714 16.5844V11.5844M20.901 6.5844H13.8571C12.2792 6.5844 11 7.86359 11 9.44154C11 11.0195 12.2792 12.2987 13.8571 12.2987H20.901C20.9557 12.2987 21 12.2544 21 12.1997V6.68341C21 6.62873 20.9557 6.5844 20.901 6.5844Z" stroke="#9A9AAF" stroke-width="1.5"/>
-</svg>

src/assets/Icons/wallet_icon.tsx

@@ -0,0 +1,20 @@
+
+import { Box, SxProps, Theme } from "@mui/material";
+
+interface Props {
+  sx?: SxProps<Theme>;
+}
+
+export default function Wallet_icon({ sx }: Props) {
+  return (
+    <Box
+      sx={{
+        ...sx,
+      }}
+    >
+      <svg width="22" height="19" viewBox="0 0 22 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M19.5714 7.29869V2.29869C19.5714 1.50971 18.9318 0.870118 18.1429 0.870118L2.42857 0.870117C1.63959 0.870117 1 1.50971 1 2.29869L1 16.5844C1 17.3734 1.63959 18.013 2.42857 18.013L18.1429 18.013C18.9318 18.013 19.5714 17.3734 19.5714 16.5844V11.5844M20.901 6.5844H13.8571C12.2792 6.5844 11 7.86359 11 9.44154C11 11.0195 12.2792 12.2987 13.8571 12.2987H20.901C20.9557 12.2987 21 12.2544 21 12.1997V6.68341C21 6.62873 20.9557 6.5844 20.901 6.5844Z" stroke="#9A9AAF" strokeWidth="1.5" />
+      </svg>
+    </Box>
+  );
+}

src/components/CardWithLink.tsx

@@ -1,4 +1,4 @@
-import { Box, SxProps, Theme, Typography, useMediaQuery, useTheme } from "@mui/material"
+import { Box, SxProps, Theme, Typography, useTheme } from "@mui/material"
 import { PenaLink } from "@frontend/kitui"
 import { Link as RouterLink } from "react-router-dom"
 

src/components/CustomTextField.tsx

@@ -0,0 +1,152 @@
+import type { ChangeEvent, FocusEvent, KeyboardEvent } from "react";
+import React, { useEffect, useState } from "react";
+import type { InputProps, SxProps, Theme } from "@mui/material";
+import {
+  Box,
+  FormControl,
+  Input,
+  InputLabel,
+  Typography,
+  useTheme,
+} from "@mui/material";
+
+interface CustomTextFieldProps {
+  placeholder: string;
+  id?: string;
+  value?: string;
+  error?: string;
+  emptyError?: boolean;
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+  onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+  text?: string;
+  maxLength?: number;
+  sx?: SxProps<Theme>;
+  sxForm?: SxProps<Theme>;
+  InputProps?: Partial<InputProps>;
+  type?: string;
+  rows?: number;
+  className?: string;
+  disabled?: boolean;
+}
+
+export default function CustomTextField({
+  placeholder,
+  id,
+  value = "",
+  onChange,
+  onKeyDown,
+  onBlur,
+  text,
+  sx,
+  error,
+  emptyError,
+  InputProps,
+  maxLength = 200,
+  type = "",
+  rows = 0,
+  sxForm,
+  className,
+  disabled,
+}: CustomTextFieldProps) {
+  const theme = useTheme();
+
+  const [inputValue, setInputValue] = useState("");
+  const [isInputActive, setIsInputActive] = useState(false);
+
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.value.length <= maxLength) {
+      const inputValue = event.target.value;
+
+      if (type === "number") {
+        setInputValue(inputValue.replace(/\D/g, ""));
+      } else {
+        setInputValue(inputValue);
+      }
+
+      if (onChange) {
+        onChange(event);
+      }
+    }
+  };
+
+  const handleInputFocus = () => {
+    setIsInputActive(true);
+  };
+
+  const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+    setIsInputActive(false);
+
+    if (onBlur) {
+      onBlur(event);
+    }
+  };
+
+  return (
+    <FormControl
+      fullWidth
+      variant="standard"
+      sx={{ p: 0, ...sxForm }}
+      className={className || ""}
+    >
+      {error && (
+        <InputLabel
+          sx={{
+            fontSize: "13.5px",
+            marginTop: "3px",
+          }}
+        >
+          {error}
+        </InputLabel>
+      )}
+      <Input
+        id={id}
+        defaultValue={text}
+        fullWidth
+        value={inputValue}
+        placeholder={placeholder}
+        onChange={handleInputChange}
+        error={!!error || emptyError}
+        onFocus={handleInputFocus}
+        onBlur={handleInputBlur}
+        onKeyDown={onKeyDown}
+        multiline={rows > 0}
+        rows={rows}
+        disabled={disabled}
+        disableUnderline
+        sx={{
+          maxLength: maxLength,
+          borderRadius: "10px",
+          fontSize: "18px",
+          lineHeight: "21px",
+          p: "13px",
+          border: `${isInputActive ? "black 2px" : "#9A9AAF 1px"} solid`,
+          backgroundColor: theme.palette.background.default,
+          height: "48px",
+          ...sx,
+        }}
+        data-cy="textfield"
+      />
+      {isInputActive && inputValue.length >= maxLength - 7 && (
+        <Box
+          sx={{
+            display: "flex",
+            marginTop: "5px",
+            marginLeft: "auto",
+            position: "absolute",
+            bottom: "-25px",
+            right: "0",
+          }}
+        >
+          <Typography fontSize="14px">{inputValue.length}</Typography>
+          <span>/</span>
+          <Typography fontSize="14px">{maxLength}</Typography>
+        </Box>
+      )}
+    </FormControl>
+  );
+}

src/components/CustomWrapperDrawer.tsx

@@ -2,18 +2,18 @@ import { useState } from "react";
 import { Box, SvgIcon, IconButton, Typography, CircularProgress, useMediaQuery, useTheme } from "@mui/material";
 
 import ClearIcon from "@mui/icons-material/Clear";
-import { currencyFormatter } from "@root/utils/currencyFormatter";
 import { useUserStore, removeTariffFromCart, setCart } from "@root/stores/user";
 import { enqueueSnackbar } from "notistack";
 import { ServiceCartData, getMessageFromFetchError } from "@frontend/kitui";
 import ExpandIcon from "@components/icons/ExpandIcon";
 import { deleteCart } from "@root/api/cart";
 
-import { ReactComponent as CrossIcon } from "@root/assets/Icons/cross.svg";
+import CrossIcon from "@root/assets/Icons/cross";
 
 import type { MouseEvent } from "react";
 import CustomTariffAccordion from "@root/components/CustomTariffAccordion";
-import { setNotEnoughMoneyAmount } from "@root/stores/cart";
+import { setNotEnoughMoneyAmount } from "@root/stores/notEnoughMoneyAmount";
+import { currencyFormatter } from "@root/utils/currencyFormatter";
 
 const name: Record<string, string> = {
   templategen: "Шаблонизатор",
@@ -157,7 +157,7 @@ export default function CustomWrapperDrawer({ serviceData }: Props) {
                 }}
               >
                 <CrossIcon
-                  style={{
+                  sx={{
                     height: "24px",
                     width: "24px",
                     stroke: theme.palette.purple.main,

src/components/Drawers.tsx

@@ -9,18 +9,18 @@ import { currencyFormatter } from "@root/utils/currencyFormatter";
 import { setUserAccount, useUserStore } from "@root/stores/user";
 import { useTicketStore } from "@root/stores/tickets";
 
-import { ReactComponent as BellIcon } from "@root/assets/Icons/bell.svg";
-import { ReactComponent as CartIcon } from "@root/assets/Icons/cart.svg";
-import { ReactComponent as CrossIcon } from "@root/assets/Icons/cross.svg";
+import BellIcon from "@root/assets/Icons/bell";
+import CartIcon from "@root/assets/Icons/cart";
+import CrossIcon from "@root/assets/Icons/cross";
 
 import { payCart } from "@root/api/cart";
 import { enqueueSnackbar } from "notistack";
-import { Link, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { withErrorBoundary } from "react-error-boundary";
 import { handleComponentError } from "@root/utils/handleComponentError";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
-import { setNotEnoughMoneyAmount, useCartStore } from "@root/stores/cart";
-import { useDiffMoney } from "@root/stores/diffMoney";
+import { setNotEnoughMoneyAmount, startPayCartProcess, useNotEnoughMoneyAmount } from "@root/stores/notEnoughMoneyAmount";
+import { RSCOpen } from "@root/stores/requestSquizCreate";
 
 function Drawers() {
     const [openNotificationsModal, setOpenNotificationsModal] = useState<boolean>(false);
@@ -34,9 +34,10 @@ function Drawers() {
     const cart = useCart();
     console.log("боковой cart", cart.priceAfterDiscounts)
     const userAccount = useUserStore((state) => state.userAccount);
+    const userId = useUserStore((state) => state.userId) || "";
     const tickets = useTicketStore((state) => state.tickets);
-    const notEnoughMoneyAmount = useCartStore(state => state.notEnoughMoneyAmount);
-    const { setNewDiff } = useDiffMoney()
+    const notEnoughMoneyAmount = useNotEnoughMoneyAmount(state => state.notEnoughMoneyAmount);
+    const siteReadyPayCart = useNotEnoughMoneyAmount(state => state.siteReadyPayCart)
 
     const notificationsCount = tickets.filter(
         ({ user, top_message }) => user !== top_message.user_id && top_message.shown.me !== 1
@@ -45,12 +46,15 @@ function Drawers() {
     async function handlePayClick() {
         setLoading(true);
 
+        const isCC = cart.services.length > 0 && cart.services[0].tariffs.some(t => t.privileges[0].privilegeId === "quizManual")
+
         const [payCartResponse, payCartError] = await payCart();
 
         if (payCartError) {
             if (payCartError.includes("insufficient funds: ")) {
                 const notEnoughMoneyAmount = parseInt(payCartError.replace(/^.*insufficient\sfunds:\s(?=\d+$)/, ""));
                 setNotEnoughMoneyAmount(notEnoughMoneyAmount);
+                startPayCartProcess(userId)
             }
 
             setLoading(false);
@@ -60,6 +64,7 @@ function Drawers() {
         }
 
         if (payCartResponse) {
+            if (isCC) RSCOpen()
             setUserAccount(payCartResponse);
         }
 
@@ -69,14 +74,12 @@ function Drawers() {
 
     function handleReplenishWallet() {
         setIsDrawerOpen(false);
-        if (location.pathname.includes("/payment")) {
-            setNewDiff(notEnoughMoneyAmount)
-        }
-        navigate("/payment", { state: { notEnoughMoneyAmount } });
+        if (siteReadyPayCart === null) startPayCartProcess(userId)
+        navigate("/payment");
     }
 
     return (
-        <Box sx={{ display: "flex", gap: isTablet ? "10px" : "20px" }}>
+        <Box sx={{ display: "flex", gap: isTablet ? "10px" : "20px", height: "36px" }}>
             <IconButton
                 ref={bellRef}
                 aria-label="cart"
@@ -84,6 +87,8 @@ function Drawers() {
                 sx={{
                     cursor: "pointer",
                     borderRadius: "6px",
+                    height: "36px",
+                    width: "36px",
                     background: openNotificationsModal ? theme.palette.purple.main : theme.palette.background.default,
                     "& .MuiBadge-badge": {
                         background: openNotificationsModal ? theme.palette.background.default : theme.palette.purple.main,
@@ -141,11 +146,12 @@ function Drawers() {
             />
             <IconButton
                 onClick={() => setIsDrawerOpen(true)}
-                component="div"
                 sx={{
                     cursor: "pointer",
                     background: theme.palette.background.default,
                     borderRadius: "6px",
+                    height: "36px",
+                    width: "36px",
                     "&:hover": {
                         background: theme.palette.purple.main,
                         "& .MuiBox-root": {
@@ -180,7 +186,6 @@ function Drawers() {
             </IconButton>
             <Drawer anchor={"right"} open={isDrawerOpen} onClose={() => {
                 setIsDrawerOpen(false)
-                setNotEnoughMoneyAmount(0)
             }} sx={{ background: "rgba(0, 0, 0, 0.55)" }}>
                 <SectionWrapper
                     maxWidth="lg"
@@ -248,7 +253,7 @@ function Drawers() {
                                     Здесь написана окончательная стоимость всех услуг сложенных в корзину с учётом всех скидок.
                                 </Typography>
                                 <Typography color={theme.palette.gray.dark}>
-                                    После нажатия кнопки оплатить, вы будете перенаправлены на форму оплаты, для оплаты ВСЕЙ корзины (рекомендуем перед оплатой, убрать все лишнее)
+                                    После нажатия кнопки оплатить (пополнить), вы будете перенаправлены на форму оплаты, для оплаты ВСЕЙ корзины (рекомендуем перед оплатой, убрать все лишнее)
                                 </Typography>
                             </Box>
                             <Box

src/components/DropDownMenu.tsx

@@ -31,6 +31,7 @@ export const DropDownMenu = ({ anchorElement, setAnchorElement, items = [] }: Dr
     >
       {items.map(({ name, url }, index) => (
         <Box
+        key={name}
           sx={{
             "& a:hover": { background: theme.palette.bg.main },
           }}

src/components/FloatingSupportChat/Chat.tsx

@@ -41,7 +41,6 @@ import { useSSETab } from "@root/utils/hooks/useSSETab";
 import {
   ACCEPT_SEND_MEDIA_TYPES_MAP,
   checkAcceptableMediaType,
-  MAX_FILE_SIZE,
 } from "@utils/checkAcceptableMediaType";
 import {
   addOrUpdateUnauthMessages,
@@ -60,6 +59,7 @@ import ChatImage from "./ChatImage";
 import ChatVideo from "./ChatVideo";
 import { createTicket } from "@api/ticket";
 
+/*
 type ModalWarningType =
   | "errorType"
   | "errorSize"
@@ -68,6 +68,7 @@ type ModalWarningType =
   | "audio"
   | "document"
   | null;
+ */
 interface Props {
   open: boolean;
   sx?: SxProps<Theme>;
@@ -81,8 +82,7 @@ export default function Chat({ open = false, onclickArrow, sx }: Props) {
   const [messageField, setMessageField] = useState<string>("");
   const [disableFileButton, setDisableFileButton] = useState<boolean>(false);
   const [sseEnabled, setSseEnabled] = useState(true);
-  const [modalWarningType, setModalWarningType] =
-    useState<ModalWarningType>(null);
+  //const [modalWarningType, setModalWarningType] = useState<ModalWarningType>(null);
   const chatBoxRef = useRef<HTMLDivElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const user = useUserStore((state) => state.user?._id);
@@ -132,7 +132,7 @@ export default function Chat({ open = false, onclickArrow, sx }: Props) {
   }, [open]);
 
   useTicketMessages({
-    url: process.env.REACT_APP_DOMAIN + "/heruvym/v1.0.0/getMessages",
+    url: import.meta.env.VITE_REACT_APP_DOMAIN + "/heruvym/v1.0.0/getMessages",
     isUnauth: true,
     ticketId: sessionData?.ticketId,
     messagesPerPage,
@@ -151,11 +151,13 @@ export default function Chat({ open = false, onclickArrow, sx }: Props) {
     onFetchStateChange: setUnauthTicketMessageFetchState,
   });
   useSSESubscription<TicketMessage>({
+    consolelog: true,
     enabled: sseEnabled && isActiveSSETab && Boolean(sessionData),
     url:
-      process.env.REACT_APP_DOMAIN +
+      import.meta.env.VITE_REACT_APP_DOMAIN +
       `/heruvym/v1.0.0/ticket?ticket=${sessionData?.ticketId}&s=${sessionData?.sessionId}`,
     onNewData: (ticketMessages) => {
+      console.log(ticketMessages)
       const isTicketClosed = ticketMessages.some(
         (message) => message.session_id === "close"
       );
@@ -178,7 +180,7 @@ export default function Chat({ open = false, onclickArrow, sx }: Props) {
   });
 
   useTicketsFetcher({
-    url: process.env.REACT_APP_DOMAIN + "/heruvym/v1.0.0/getTickets",
+    url: import.meta.env.VITE_REACT_APP_DOMAIN + "/heruvym/v1.0.0/getTickets",
     ticketsPerPage: 10,
     ticketApiPage: 0,
     onSuccess: (result) => {
@@ -247,6 +249,7 @@ export default function Chat({ open = false, onclickArrow, sx }: Props) {
   useEffect(() => {
     if (open) {
       const newMessages = messages.filter(({ shown }) => shown.me !== 1);
+      console.log(newMessages)
 
       newMessages.map(async ({ id }) => {
         await shownMessage(id);
@@ -349,7 +352,7 @@ export default function Chat({ open = false, onclickArrow, sx }: Props) {
 
     const ticketId = ticket.sessionData?.ticketId || data?.Ticket;
     if (ticketId !== undefined) {
-      if (file.size > MAX_FILE_SIZE) return setModalWarningType("errorSize");
+      //if (file.size > MAX_FILE_SIZE) return setModalWarningType("errorSize");
 
       const [, sendFileError] = await sendFileRequest(ticketId, file);
 
@@ -421,14 +424,14 @@ export default function Chat({ open = false, onclickArrow, sx }: Props) {
               >
                 онлайн-консультант
               </Typography>
-              <Typography
+              {/* <Typography
                 sx={{
                   fontSize: "16px",
                   lineHeight: "19px",
                 }}
               >
                 время работы 10:00-3:00 по мск
-              </Typography>
+              </Typography> */}
             </Box>
           </Box>
           <Box

src/components/FloatingSupportChat/ChatDocument.tsx

@@ -1,6 +1,6 @@
 import { Box, Link, Typography, useMediaQuery, useTheme } from "@mui/material";
 import { isDateToday } from "../../utils/date";
-import Download from "@root/assets/Icons/download";
+import DownloadOld from "@root/assets/Icons/DownloadOld";
 
 interface Props {
   unAuthenticated?: boolean;
@@ -105,7 +105,7 @@ export default function ChatDocument({
             gap: "10px",
           }}
         >
-          <Download color={theme.palette.purple.main} />
+          <DownloadOld color={theme.palette.purple.main} />
         </Link>
       </Box>
     </Box>

src/components/FloatingSupportChat/ChatImage.tsx

@@ -1,13 +1,11 @@
 import {
   Box,
   ButtonBase,
-  Link,
   Typography,
   useMediaQuery,
   useTheme,
 } from "@mui/material";
 import { isDateToday } from "../../utils/date";
-import { useNavigate } from "react-router-dom";
 
 interface Props {
   unAuthenticated?: boolean;
@@ -24,7 +22,7 @@ export default function ChatImage({
 }: Props) {
   const theme = useTheme();
   const upMd = useMediaQuery(theme.breakpoints.up("md"));
-  const navigate = useNavigate();
+  
   const messageBackgroundColor = isSelf
     ? "white"
     : unAuthenticated

src/components/FloatingSupportChat/ChatVideo.tsx

@@ -1,14 +1,10 @@
 import {
   Box,
-  ButtonBase,
-  Link,
   Typography,
   useMediaQuery,
   useTheme,
 } from "@mui/material";
 import { isDateToday } from "../../utils/date";
-import { useNavigate } from "react-router-dom";
-import { useEffect } from "react";
 
 interface Props {
   unAuthenticated?: boolean;

src/components/Footer.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Divider, Typography, useMediaQuery, useTheme } from "@mui/material"
+import { Box, Button, Typography, useMediaQuery, useTheme } from "@mui/material"
 import PenaLogo from "./PenaLogo"
 import SectionWrapper from "./SectionWrapper"
 import { Link } from "react-router-dom"
@@ -65,7 +65,7 @@ export default function Footer() {
 						<Button variant="pena-navitem-dark" sx={{whiteSpace: "break-spaces", textAlign: "start"}}>Политика конфиденциальности</Button>
 					</Link>
 					<Link to="https://hub.pena.digital/docs/ofertaQuizDevelop" target="_blank">
-						<Button variant="pena-navitem-dark" sx={{whiteSpace: "break-spaces", textAlign: "start"}}>Оферта на услугу "Разработка Квиза"</Button>
+						<Button variant="pena-navitem-dark" sx={{whiteSpace: "break-spaces", textAlign: "start"}}>Оферта на услугу &quot;Разработка Квиза&quot;</Button>
 					</Link>
 
 				</Box>

src/components/InfoButton.tsx

@@ -0,0 +1,50 @@
+import { IconButton, SxProps } from "@mui/material";
+
+type InfoProps = {
+  width?: number;
+  height?: number;
+  sx?: SxProps;
+  onClick?: any;
+  className?: string;
+  color?: string;
+};
+
+export default function InfoButton({
+  width = 20,
+  height = 20,
+  sx,
+  onClick,
+  className,
+  color = "#7e2aea",
+}: InfoProps) {
+  return (
+    <IconButton sx={sx} className={className} onClick={onClick}>
+      <svg
+        width={width}
+        height={height}
+        viewBox="0 0 20 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1C5.02944 1 1 5.02944 1 10C1 14.9706 5.02944 19 10 19Z"
+          stroke={color}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M9.25 9.25H10V14.5H10.75"
+          stroke={color}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M9.8125 7C10.4338 7 10.9375 6.49632 10.9375 5.875C10.9375 5.25368 10.4338 4.75 9.8125 4.75C9.19118 4.75 8.6875 5.25368 8.6875 5.875C8.6875 6.49632 9.19118 7 9.8125 7Z"
+          fill={color}
+        />
+      </svg>
+    </IconButton>
+  );
+}

src/components/Menu.tsx

@@ -117,6 +117,7 @@ export default function Menu() {
           ))
         : arrayMenu.map(({ name, url, subMenu = [] }, index) => (
             <Button
+            key={name}
               sx={{
                 whiteSpace: "nowrap",
                 color: location.pathname === url ? theme.palette.purple.main : color,

src/components/NavbarLanding/DialogMenu.tsx

@@ -1,6 +1,6 @@
 import { TransitionProps } from "@mui/material/transitions";
-import logotip from "../../assets/Icons/logoPenaHab.svg";
-import logotipBlack from "../../assets/Icons/black_logo_PenaHab.svg";
+import Logotip from "../../assets/Icons/logoPenaHab";
+import LogotipBlack from "../../assets/Icons/black_logo_PenaHab";
 import CustomAvatar from "./Avatar";
 import React, { useState } from "react";
 import { Box, Button, Dialog, List, ListItem, Slide, Typography, useMediaQuery, useTheme } from "@mui/material";
@@ -59,15 +59,12 @@ export default function DialogMenu({ open, handleClose }: DialogMenuProps) {
   const theme = useTheme();
   const location = useLocation();
   const isTablet = useMediaQuery(theme.breakpoints.down(900));
-  const isTabletMenu = useMediaQuery(theme.breakpoints.down(1000));
   const user = useUserStore((state) => state.user);
   const cash = useUserStore((state) => state.userAccount?.wallet.cash) ?? 0;
 
   const [subMenuOpen, setSubMenuOpen] = useState(false);
   const [subMenuProdOpen, setSubMenuProdOpen] = useState(false)
 
-  const isMobileHeight = useMediaQuery("(max-height: 400px)");
-
   return (
     <Dialog
       fullScreen
@@ -268,7 +265,7 @@ export default function DialogMenu({ open, handleClose }: DialogMenuProps) {
               bottom: "60px",
             }}
           >
-            <img src={location.pathname === "/" ? logotip : logotipBlack} alt="icon" />
+            {location.pathname === "/" ? <Logotip/> : <LogotipBlack/>}
           </Box>
         </>
       )}

src/components/NavbarLanding/NavbarCollapsed.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react"
-import { Button, useMediaQuery, useTheme } from "@mui/material"
-import { Link, useLocation } from "react-router-dom"
+import { useTheme } from "@mui/material"
+import { Link } from "react-router-dom"
 
 import SectionWrapper from "../SectionWrapper"