init

2024-06-26 14:11:20 +05:00
commit 36cd50c92b
63 changed files with 3381 additions and 0 deletions
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
@@ -0,0 +1,7 @@
+{
+    "arrowParens": "avoid",
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "all",
+    "tabWidth": 2
+}
@@ -0,0 +1,30 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+  },
+}
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
@@ -0,0 +1,33 @@
+{
+  "name": "graff_training",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.23.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.13.1",
+    "@typescript-eslint/parser": "^7.13.1",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "postcss": "^8.4.38",
+    "prettier": "^3.3.2",
+    "tailwindcss": "^3.4.4",
+    "typescript": "^5.2.2",
+    "vite": "^5.3.1"
+  }
+}
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
@@ -0,0 +1,250 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="robots" content="noindex, noarchive">
+    <meta name="format-detection" content="telephone=no">
+    <title>Transfonter demo</title>
+    <link href="stylesheet.css" rel="stylesheet">
+    <style>
+        /*
+        http://meyerweb.com/eric/tools/css/reset/
+        v2.0 | 20110126
+        License: none (public domain)
+        */
+        html, body, div, span, applet, object, iframe,
+        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+        a, abbr, acronym, address, big, cite, code,
+        del, dfn, em, img, ins, kbd, q, s, samp,
+        small, strike, strong, sub, sup, tt, var,
+        b, u, i, center,
+        dl, dt, dd, ol, ul, li,
+        fieldset, form, label, legend,
+        table, caption, tbody, tfoot, thead, tr, th, td,
+        article, aside, canvas, details, embed,
+        figure, figcaption, footer, header, hgroup,
+        menu, nav, output, ruby, section, summary,
+        time, mark, audio, video {
+            margin: 0;
+            padding: 0;
+            border: 0;
+            font-size: 100%;
+            font: inherit;
+            vertical-align: baseline;
+        }
+        /* HTML5 display-role reset for older browsers */
+        article, aside, details, figcaption, figure,
+        footer, header, hgroup, menu, nav, section {
+            display: block;
+        }
+        body {
+            line-height: 1;
+        }
+        ol, ul {
+            list-style: none;
+        }
+        blockquote, q {
+            quotes: none;
+        }
+        blockquote:before, blockquote:after,
+        q:before, q:after {
+            content: '';
+            content: none;
+        }
+        table {
+            border-collapse: collapse;
+            border-spacing: 0;
+        }
+        /* demo styles */
+        body {
+            background: #f0f0f0;
+            color: #000;
+        }
+        .page {
+            background: #fff;
+            width: 920px;
+            margin: 0 auto;
+            padding: 20px 20px 0 20px;
+            overflow: hidden;
+        }
+        .font-container {
+            overflow-x: auto;
+            overflow-y: hidden;
+            margin-bottom: 40px;
+            line-height: 1.3;
+            white-space: nowrap;
+            padding-bottom: 5px;
+        }
+        h1 {
+            position: relative;
+            background: #444;
+            font-size: 32px;
+            color: #fff;
+            padding: 10px 20px;
+            margin: 0 -20px 12px -20px;
+        }
+        .letters {
+            font-size: 25px;
+            margin-bottom: 20px;
+        }
+        .s10:before {
+            content: '10px';
+        }
+        .s11:before {
+            content: '11px';
+        }
+        .s12:before {
+            content: '12px';
+        }
+        .s14:before {
+            content: '14px';
+        }
+        .s18:before {
+            content: '18px';
+        }
+        .s24:before {
+            content: '24px';
+        }
+        .s30:before {
+            content: '30px';
+        }
+        .s36:before {
+            content: '36px';
+        }
+        .s48:before {
+            content: '48px';
+        }
+        .s60:before {
+            content: '60px';
+        }
+        .s72:before {
+            content: '72px';
+        }
+        .s10:before, .s11:before, .s12:before, .s14:before,
+        .s18:before, .s24:before, .s30:before, .s36:before,
+        .s48:before, .s60:before, .s72:before {
+            font-family: Arial, sans-serif;
+            font-size: 10px;
+            font-weight: normal;
+            font-style: normal;
+            color: #999;
+            padding-right: 6px;
+        }
+        pre {
+            display: block;
+            padding: 9px;
+            margin: 0 0 12px;
+            font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+            font-size: 13px;
+            line-height: 1.428571429;
+            color: #333;
+            font-weight: normal;
+            font-style: normal;
+            background-color: #f5f5f5;
+            border: 1px solid #ccc;
+            overflow-x: auto;
+            border-radius: 4px;
+        }
+        /* responsive */
+        @media (max-width: 959px) {
+            .page {
+                width: auto;
+                margin: 0;
+            }
+        }
+    </style>
+</head>
+<body>
+<div class="page">
+    <div class="demo">
+        <h1 style="font-family: 'TTHovesPro-DmBd'; font-weight: 600; font-style: normal;">☝︎TT Hoves Pro DemiBold</h1>
+        <pre title="Usage">.your-style {
+    font-family: 'TTHovesPro-DmBd';
+    font-weight: 600;
+    font-style: normal;
+}</pre>
+        <pre title="Preload (optional)">
+&lt;link rel=&quot;preload&quot; href=&quot;TTHovesPro-DmBd.woff2&quot; as=&quot;font&quot; type=&quot;font/woff2&quot; crossorigin&gt;</pre>
+        <div class="font-container" style="font-family: 'TTHovesPro-DmBd'; font-weight: 600; font-style: normal;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#&lt;&gt;$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+
+    <div class="demo">
+        <h1 style="font-family: 'TTHovesPro-Md'; font-weight: 500; font-style: normal;">☝︎TT Hoves Pro Medium</h1>
+        <pre title="Usage">.your-style {
+    font-family: 'TTHovesPro-Md';
+    font-weight: 500;
+    font-style: normal;
+}</pre>
+        <pre title="Preload (optional)">
+&lt;link rel=&quot;preload&quot; href=&quot;TTHovesPro-Md.woff2&quot; as=&quot;font&quot; type=&quot;font/woff2&quot; crossorigin&gt;</pre>
+        <div class="font-container" style="font-family: 'TTHovesPro-Md'; font-weight: 500; font-style: normal;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#&lt;&gt;$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+
+    <div class="demo">
+        <h1 style="font-family: 'TTHovesPro-Rg'; font-weight: normal; font-style: normal;">☝︎TT Hoves Pro Regular</h1>
+        <pre title="Usage">.your-style {
+    font-family: 'TTHovesPro-Rg';
+    font-weight: normal;
+    font-style: normal;
+}</pre>
+        <pre title="Preload (optional)">
+&lt;link rel=&quot;preload&quot; href=&quot;TTHovesPro-Rg.woff2&quot; as=&quot;font&quot; type=&quot;font/woff2&quot; crossorigin&gt;</pre>
+        <div class="font-container" style="font-family: 'TTHovesPro-Rg'; font-weight: normal; font-style: normal;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#&lt;&gt;$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+
+</div>
+</body>
+</html>
@@ -0,0 +1,38 @@
+@font-face {
+  font-family: 'TTHovesPro';
+  src: url('TTHovesPro-DmBd.eot');
+  src:
+    url('TTHovesPro-DmBd.eot?#iefix') format('embedded-opentype'),
+    url('TTHovesPro-DmBd.woff2') format('woff2'),
+    url('TTHovesPro-DmBd.woff') format('woff'),
+    url('TTHovesPro-DmBd.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'TTHovesPro';
+  src: url('TTHovesPro-Md.eot');
+  src:
+    url('TTHovesPro-Md.eot?#iefix') format('embedded-opentype'),
+    url('TTHovesPro-Md.woff2') format('woff2'),
+    url('TTHovesPro-Md.woff') format('woff'),
+    url('TTHovesPro-Md.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'TTHovesPro';
+  src: url('TTHovesPro-Rg.eot');
+  src:
+    url('TTHovesPro-Rg.eot?#iefix') format('embedded-opentype'),
+    url('TTHovesPro-Rg.woff2') format('woff2'),
+    url('TTHovesPro-Rg.woff') format('woff'),
+    url('TTHovesPro-Rg.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
@@ -0,0 +1,17 @@
+import { Outlet } from 'react-router-dom';
+import { Header } from './components/Header';
+import { Navbar } from './components/Layout/Navbar';
+import { Footer } from './components/Footer';
+
+export default function Layout() {
+  return (
+    <div className="bg-[#14161F]">
+      <Navbar />
+      <Header />
+      <main>
+        <Outlet />
+      </main>
+      <Footer />
+    </div>
+  );
+}
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.8">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.2929 16.7071C11.6834 17.0976 12.3166 17.0976 12.7071 16.7071L19.7071 9.70713C20.0976 9.31661 20.0976 8.68344 19.7071 8.29292C19.3165 7.90239 18.6834 7.90239 18.2928 8.29292L12 14.5858L5.70711 8.29292C5.31658 7.90239 4.68342 7.90239 4.29289 8.29292C3.90237 8.68344 3.90237 9.31661 4.29289 9.70713L11.2929 16.7071Z" fill="white"/>
+</g>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19 8H5C4.44772 8 4 7.55228 4 7C4 6.44772 4.44772 6 5 6L19 6C19.5523 6 20 6.44772 20 7C20 7.55228 19.5523 8 19 8ZM4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12ZM4 17C4 16.4477 4.44772 16 5 16H19C19.5523 16 20 16.4477 20 17C20 17.5523 19.5523 18 19 18H5C4.44772 18 4 17.5523 4 17Z" fill="white"/>
+</svg>
@@ -0,0 +1,5 @@
+<svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.42193 3H10V9.56928H3.42193V3Z" fill="white"/>
+<path d="M10 9.56928H3.42193L0 12.9756H6.33444L10 9.56928Z" fill="white"/>
+<path d="M3.42193 9.56928V3L0 6.6496V12.9756L3.42193 9.56928Z" fill="white"/>
+</svg>
@@ -0,0 +1,5 @@
+<svg width="45" height="44" viewBox="0 0 45 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="9.42424" y="8.42424" width="27.1515" height="27.1515" stroke="white" stroke-width="0.848485"/>
+<path d="M16.722 21.9959L17.022 21.6959L16.722 21.396L11.9319 16.6059L11.802 16.4759L11.6183 16.4818L6.46889 16.6476L6.30119 16.653L6.18255 16.7717L1.57605 21.3782L1.27607 21.6782L1.57605 21.9781L6.18872 26.5908L6.30658 26.7087L6.47316 26.7148L11.6228 26.9036L11.8076 26.9104L11.9383 26.7796L16.722 21.9959Z" fill="white" stroke="#202332" stroke-width="0.848485" stroke-linecap="square"/>
+<path d="M28.6423 21.3835L28.3423 21.6834L28.6423 21.9834L33.4323 26.7735L33.5623 26.9035L33.746 26.8975L38.8954 26.7318L39.0631 26.7264L39.1817 26.6077L43.7882 22.0012L44.0882 21.7012L43.7882 21.4012L39.1755 16.7886L39.0577 16.6707L38.8911 16.6646L33.7415 16.4758L33.5567 16.469L33.4259 16.5998L28.6423 21.3835Z" fill="white" stroke="#202332" stroke-width="0.848485" stroke-linecap="square"/>
+</svg>
@@ -0,0 +1,6 @@
+<svg width="104" height="241" viewBox="0 0 104 241" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.4">
+<path opacity="0.5" d="M0 24.0002C0 10.7454 10.7452 0.000244141 24 0.000244141C37.2548 0.000244141 48 10.7454 48 24.0002V241H0V24.0002Z" fill="#798FFF"/>
+<path d="M56 144.5C56 131.245 66.7452 120.5 80 120.5C93.2548 120.5 104 131.245 104 144.5V241H56V144.5Z" fill="#798FFF"/>
+</g>
+</svg>
@@ -0,0 +1,31 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9484 39.9998C30.7693 39.9998 39.5413 31.0455 39.5413 19.9999C39.5413 18.6471 39.4098 17.3257 39.159 16.0483H27.3221V23.9784H31.1416C29.5308 28.6896 25.1395 32.0697 19.9747 32.0697C13.4444 32.0697 8.15051 26.6659 8.15051 19.9999C8.15051 13.3339 13.4444 7.93006 19.9747 7.93006V0H19.9484C9.12752 0 0.355469 8.95427 0.355469 19.9999C0.355469 31.0455 9.12752 39.9998 19.9484 39.9998Z" fill="#798FFF"/>
+<path d="M18.9627 0.0242729C10.5445 1.35354 4.10083 8.76832 4.10083 17.7162C4.10083 27.6043 11.9699 35.6202 21.6768 35.6202C31.3838 35.6202 39.2529 27.6043 39.2529 17.7162C39.2529 17.1459 39.2267 16.5818 39.1755 16.0251H27.3159V23.9437H31.1378C29.526 28.6481 25.132 32.0233 19.964 32.0233C13.4297 32.0233 8.13251 26.6273 8.13251 19.971C8.13251 13.6765 12.8694 8.509 18.91 7.96578C19.2573 7.93456 19.6088 7.91859 19.964 7.91859V0H19.9377C19.6108 0 19.2857 0.00815804 18.9627 0.0242729Z" fill="#D375FF"/>
+<path opacity="0.3" d="M17.6704 8.17514C18.4082 8.0323 19.1699 7.95752 19.949 7.95752V0H19.9222C18.3449 0 16.8103 0.18501 15.3389 0.534682L17.6704 8.17514Z" fill="black" fill-opacity="0.6"/>
+<path opacity="0.3" d="M7.33866 4.52224L6.11768 22.4818L7.86291 20.7968C7.85255 20.5896 7.84731 20.3811 7.84731 20.1714C7.84731 13.5163 13.1236 8.1127 19.6599 8.03907L11.8216 1.75195C10.2025 2.47338 8.69661 3.40853 7.33866 4.52224Z" fill="black" fill-opacity="0.6"/>
+<path opacity="0.3" d="M0.356232 20.2268L9.28465 25.1093C8.57786 23.5715 8.18327 21.8572 8.18327 20.0496C8.18327 18.2395 8.57894 16.5229 9.28755 14.9836L6.55266 5.54736C2.73769 9.17808 0.355469 14.3324 0.355469 20.0496C0.355469 20.1087 0.355724 20.1678 0.356232 20.2268Z" fill="black" fill-opacity="0.6"/>
+<path opacity="0.3" d="M0.355469 19.4252L12.2012 37.4243L25.1348 37.6641L20.0893 32.0289C20.0362 32.0296 19.983 32.03 19.9298 32.03C13.411 32.03 8.12654 26.6749 8.12654 20.0692C8.12654 19.8006 8.13527 19.5342 8.15247 19.27L0.36095 19.27C0.358927 19.3217 0.3571 19.3734 0.355469 19.4252Z" fill="black" fill-opacity="0.6"/>
+<path opacity="0.3" d="M8.95496 36.4961L16.4916 31.4741C11.6157 29.9459 8.0822 25.4359 8.0822 20.11C8.0822 19.4257 8.14053 18.7548 8.25256 18.1021L3.23755 30.6881C4.7183 32.9917 6.66846 34.9716 8.95496 36.4961Z" fill="black" fill-opacity="0.6"/>
+<path opacity="0.3" d="M26.2874 38.9513C24.2768 39.6312 22.1224 39.9998 19.8818 39.9998C15.7435 39.9998 11.8992 38.7422 8.71143 36.5887L16.2571 31.5327C17.4089 31.8981 18.6357 32.0953 19.9087 32.0953C19.9556 32.0953 20.0025 32.0951 20.0494 32.0945L26.2874 38.9513Z" fill="black" fill-opacity="0.6"/>
+<path opacity="0.3" d="M24.2707 39.5121C22.8597 39.8313 21.3918 39.9998 19.8846 39.9998C19.2315 39.9998 18.5859 39.9682 17.949 39.9064L16.203 31.5327C16.4387 31.6096 16.6777 31.6794 16.9196 31.7418L24.2707 39.5121Z" fill="black" fill-opacity="0.4"/>
+<path opacity="0.3" d="M27.4401 19.2698L39.2535 16.4402C39.2317 16.3124 39.2089 16.1851 39.185 16.0581H27.4401V19.2698Z" fill="black" fill-opacity="0.6"/>
+<path opacity="0.3" d="M29.8962 23.9413L39.2538 16.0713C39.2529 16.0669 39.2521 16.0625 39.2512 16.0581L27.7285 23.9413H29.8962Z" fill="black" fill-opacity="0.4"/>
+<path opacity="0.3" d="M35.3878 16.0581L26.8633 38.5397C30.2212 37.2395 33.1356 35.0277 35.3125 32.2025L36.6597 16.0581H35.3878Z" fill="black" fill-opacity="0.6"/>
+<path opacity="0.3" d="M39.1661 16.0581L26.8633 38.5397C34.2736 35.6952 39.5411 28.4423 39.5411 19.9441C39.5411 18.6142 39.4121 17.3148 39.1661 16.0581Z" fill="black" fill-opacity="0.4"/>
+<path d="M31.4825 0H39.2535V7.88317H31.4825V0Z" fill="#798FFF"/>
+<path d="M39.2535 7.88317H31.4825L27.4401 11.9707H34.9232L39.2535 7.88317Z" fill="#798FFF"/>
+<path d="M31.4825 7.88317V0L27.4401 4.37954V11.9707L31.4825 7.88317Z" fill="#798FFF"/>
+<path opacity="0.3" d="M39.2529 6.79373V7.89351L34.9719 11.9708H34.0665V6.71533L39.2529 6.79373Z" fill="black" fill-opacity="0.6"/>
+<path opacity="0.3" d="M27.4401 11.9705V4.2605L32.8654 3.79541L34.6433 4.27171L27.4401 11.9705Z" fill="black" fill-opacity="0.6"/>
+<path opacity="0.3" d="M30.8962 0.875977L27.4401 4.48346V11.9708H32.0502L30.8962 0.875977Z" fill="black" fill-opacity="0.6"/>
+<path opacity="0.3" d="M27.6451 4.07638L27.4401 4.30014V11.9709L31.7801 7.73816L33.8116 7.65726L38.3891 8.43925L37.9537 7.77861L32.466 1.75195L27.6451 4.07638Z" fill="#D375FF"/>
+<path opacity="0.3" d="M31.7618 0H31.4759L30.3212 1.24695L31.6836 2.04378L31.7618 0Z" fill="black" fill-opacity="0.6"/>
+<path opacity="0.3" d="M37.8128 9.39695L35.1172 11.9708H34.6433L35.0666 6.82514L37.1634 6.42334L37.8128 9.39695Z" fill="black" fill-opacity="0.6"/>
+<path d="M31.4739 7.88317H39.2534V0H31.4739V7.88317Z" fill="url(#paint0_linear_2477_48650)"/>
+<defs>
+<linearGradient id="paint0_linear_2477_48650" x1="35.9006" y1="0" x2="35.9006" y2="7.88317" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D375FF"/>
+<stop offset="1" stop-color="#798FFF"/>
+</linearGradient>
+</defs>
+</svg>
@@ -0,0 +1,6 @@
+<svg width="104" height="241" viewBox="0 0 104 241" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.4">
+<path opacity="0.5" d="M0 196C0 182.745 10.7452 172 24 172C37.2548 172 48 182.745 48 196V241H0V196Z" fill="#798FFF"/>
+<path d="M56 25.0002C56 11.7454 66.7452 1.00024 80 1.00024C93.2548 1.00024 104 11.7454 104 25.0002V242H56V25.0002Z" fill="#798FFF"/>
+</g>
+</svg>
@@ -0,0 +1,16 @@
+<svg width="115" height="42" viewBox="0 0 115 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.0623 23.8447C23.5059 24.4594 22.7798 24.8952 21.976 25.0971C21.1721 25.299 20.3265 25.2578 19.5459 24.9789C18.7654 24.7 18.085 24.1957 17.5908 23.5299C17.0965 22.8641 16.8106 22.0667 16.7691 21.2383C16.7275 20.4099 16.9323 19.5878 17.3575 18.8758C17.7827 18.1639 18.4093 17.5941 19.158 17.2384C19.9067 16.8827 20.744 16.7571 21.564 16.8774C22.384 16.9978 23.15 17.3587 23.7651 17.9146C24.1748 18.2837 24.5076 18.7302 24.7444 19.2285C24.9812 19.7267 25.1173 20.2668 25.1449 20.8179C25.1726 21.3689 25.0911 21.9199 24.9053 22.4394C24.7196 22.9588 24.4331 23.4364 24.0623 23.8447Z" fill="#6C7493"/>
+<path d="M21.4914 6.65544C21.8381 7.00245 22.1663 7.35566 22.4573 7.70887C23.4699 8.91783 24.304 10.2659 24.9341 11.7119C25.9279 11.8974 26.9396 11.9681 27.9495 11.9226H28.1291H28.2901C31.0489 11.6703 33.6238 10.4292 35.5408 8.42768L35.7947 8.16742C35.4108 7.70887 35.0207 7.26271 34.5934 6.83514C31.1832 3.43437 26.6641 1.37516 21.8619 1.03384C17.0597 0.692515 12.2951 2.09186 8.43884 4.97616C14.5688 1.98938 18.8227 4.04666 21.4914 6.65544Z" fill="#6C7493" stroke="#14161F" stroke-width="0.56346"/>
+<path d="M7.85946 27.5807C7.98329 27.1035 8.12571 26.645 8.2805 26.2174C8.82344 24.7368 9.57398 23.341 10.5096 22.0719C10.1747 21.1187 9.73 20.2079 9.18452 19.3577L9.08545 19.2028L8.99257 19.0727C7.40387 16.8298 5.06413 15.2314 2.3982 14.5677L2.04526 14.4624C1.84093 15.0201 1.65517 15.584 1.49418 16.1665C0.253551 20.8209 0.727546 25.7666 2.82957 30.1001C4.9316 34.4337 8.52134 37.8658 12.943 39.7694C7.27742 35.9275 6.92448 31.1933 7.85946 27.5807Z" fill="#6C7493" stroke="#14161F" stroke-width="0.56346"/>
+<path d="M33.1994 28.604C32.7227 28.7342 32.2521 28.8395 31.8001 28.9201C30.248 29.189 28.6655 29.2349 27.1004 29.0564C26.4455 29.8149 25.8803 30.6467 25.4162 31.535C25.4162 31.5908 25.3605 31.6404 25.3357 31.6961C25.3105 31.7445 25.2877 31.7942 25.2676 31.8449C24.109 34.3442 23.8892 37.1777 24.6484 39.8261C24.6484 39.9439 24.7165 40.0616 24.7537 40.1793C25.3357 40.074 25.9239 39.9624 26.506 39.8075C31.1457 38.5511 35.1805 35.6693 37.8761 31.6866C40.5716 27.7039 41.7487 22.885 41.1932 18.1069C40.6978 24.9418 36.7783 27.6064 33.1994 28.604Z" fill="#6C7493" stroke="#14161F" stroke-width="0.56346"/>
+<path d="M8.40332 5.53936C5.46781 7.5919 3.17294 10.4342 1.78418 13.7375C3.84904 14.1738 5.76191 15.1488 7.32886 16.5635C8.89582 17.9782 10.0612 19.7824 10.7067 21.7931C11.2578 21.4399 12.9544 20.0953 14.0937 16.4021C15.4745 11.9343 18.0875 8.63768 21.4868 7.20006C21.4868 7.21865 17.1834 1.09018 8.40332 5.53936Z" fill="#6C7493" stroke="#14161F" stroke-width="0.56346"/>
+<path d="M23.3164 37.1429C23.314 34.149 24.4342 31.2632 26.4557 29.0563L26.4866 29.0129C26.0718 28.5729 24.6291 27.4947 20.9139 28.3375C16.3876 29.3723 11.3598 29.2546 8.42486 27.0176C8.42486 27.0176 5.26699 33.8339 13.5084 39.194C16.7473 40.7124 20.3496 41.2817 23.8984 40.8361C23.5032 39.6453 23.3066 38.3976 23.3164 37.1429Z" fill="#6C7493" stroke="#14161F" stroke-width="0.56346"/>
+<path d="M36.8488 8.27344C35.7402 9.53446 34.3763 10.5452 32.8476 11.2385C31.3189 11.9319 29.6604 12.292 27.982 12.2951C27.0977 12.2919 26.2159 12.1985 25.3505 12.0162H25.3071C25.1338 12.6359 24.9975 14.4019 27.5053 17.1036C30.6817 20.5366 33.078 24.9486 32.6383 28.6108C32.6383 28.6108 40.0686 27.9477 40.6321 18.1137C40.3253 14.5418 39.0135 11.13 36.8488 8.27344Z" fill="#6C7493" stroke="#14161F" stroke-width="0.56346"/>
+<path d="M49.8717 26.1124H47.785V16.3774H51.1349C53.6116 16.3774 55.1224 17.3937 55.1224 19.6307C55.1224 21.8677 53.5373 23.0698 50.9615 23.0698H49.8717V26.1124ZM49.8284 21.2294H50.9615C52.1999 21.2294 52.9615 20.7461 52.9615 19.7174C52.9615 18.6888 52.2618 18.2178 50.9615 18.2178H49.8284V21.2294Z" fill="#6C7493"/>
+<path d="M56.6426 21.2483C56.6426 17.9765 58.6302 16.2104 61.3113 16.2104C64.3143 16.2104 66.0543 18.119 66.0543 21.2483C66.0543 24.7122 64.0357 26.28 61.367 26.28C58.5497 26.28 56.6426 24.5387 56.6426 21.2483ZM63.8438 21.2483C63.8438 19.0361 62.8283 18.0508 61.3113 18.0508C59.9367 18.0508 58.8345 19.0795 58.8345 21.2483C58.8345 23.4171 59.9614 24.4458 61.4227 24.4458C62.884 24.4458 63.8438 23.4295 63.8438 21.2483Z" fill="#6C7493"/>
+<path d="M75.3302 25.7225C74.5177 26.138 73.6097 26.3305 72.6986 26.2802C69.7265 26.2802 67.7451 24.5699 67.7451 21.3724C67.7451 18.0201 69.7018 16.2106 72.8844 16.2106C73.7327 16.191 74.576 16.3471 75.3612 16.6692L74.903 18.4228C74.3545 18.2439 73.783 18.1458 73.2064 18.1316C71.2869 18.1316 69.9804 19.0921 69.9804 21.2299C69.9804 23.2872 71.2188 24.3282 73.194 24.3282C73.7855 24.3091 74.3686 24.1832 74.9153 23.9564L75.3302 25.7225Z" fill="#6C7493"/>
+<path d="M82.954 23.516H78.824L77.8828 26.1124H76.6444L80.3595 16.3774H81.5979L85.2388 26.1124H83.9323L82.954 23.516ZM79.2017 22.3758H82.5391L80.9168 17.7965H80.8611L79.2017 22.3758Z" fill="#6C7493"/>
+<path d="M89.5367 26.1124H88.2983V17.5486H85.4191V16.3774H92.4221V17.5486H89.5367V26.1124Z" fill="#6C7493"/>
+<path d="M93.7327 21.2486C93.7327 18.1503 95.5283 16.2417 98.067 16.2417C100.959 16.2417 102.513 18.299 102.513 21.2486C102.513 24.5576 100.655 26.2555 98.1103 26.2555C95.4416 26.2555 93.7327 24.3345 93.7327 21.2486ZM101.212 21.2486C101.212 18.5778 100.017 17.4067 98.1165 17.4067C96.4076 17.4067 95.0887 18.646 95.0887 21.2486C95.0887 23.8512 96.3642 25.0843 98.2837 25.0843C100.086 25.0843 101.212 23.7644 101.212 21.2486Z" fill="#6C7493"/>
+<path d="M114.626 26.1124H113.387L112.768 18.5091L110.291 26.1124H108.985L106.545 18.5339L105.926 26.1124H104.688L105.517 16.3774H107.047L109.672 24.7491L112.26 16.3774H113.79L114.626 26.1124Z" fill="#6C7493"/>
+</svg>
@@ -0,0 +1,5 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="8.42424" y="8.42424" width="27.1515" height="27.1515" stroke="white" stroke-width="0.848485"/>
+<rect x="15.5494" y="15.5455" width="12.4091" height="12.4091" stroke="white" stroke-width="1.09091"/>
+<path d="M14.4564 28.1982L14.4459 28.765L15.0127 28.7536L23.5935 28.581L23.813 28.5766L23.9682 28.4214L28.6279 23.7617L28.7876 23.6019L28.7876 23.376L28.7876 15.0001L28.7876 14.4547L28.2422 14.4547L19.8551 14.4547L19.6319 14.4547L19.4727 14.6111L14.7784 19.2249L14.6196 19.3811L14.6154 19.6039L14.4564 28.1982Z" fill="white" stroke="#202332" stroke-width="1.09091" stroke-linecap="square"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="8.42424" y="8.42424" width="27.1515" height="27.1515" stroke="white" stroke-width="0.848485"/>
+<path d="M16.5757 26.8291L16.5757 27.2533L17 27.2533L23.7741 27.2533L23.9579 27.2533L24.0836 27.1193L27.6076 23.3609L27.7223 23.2385L27.7223 23.0707L27.7223 16.5561L27.7223 16.1319L27.2981 16.1319L20.7748 16.1319L20.6081 16.1319L20.486 16.2453L16.7112 19.7532L16.5757 19.8791L16.5757 20.064L16.5757 26.8291Z" fill="white" stroke="#202332" stroke-width="0.848485" stroke-linecap="square"/>
+</svg>
@@ -0,0 +1,3 @@
+export function Contacts() {
+  return <div></div>;
+}
@@ -0,0 +1,3 @@
+export function Distance() {
+  return <div></div>;
+}
@@ -0,0 +1,3 @@
+export function Events() {
+  return <div></div>;
+}
@@ -0,0 +1,3 @@
+export function Expirience() {
+  return <div></div>;
+}
@@ -0,0 +1,3 @@
+export function Footer() {
+  return <footer></footer>;
+}
@@ -0,0 +1,50 @@
+import { useWindowWidth } from '../hooks/useWindowWidth';
+import { Marquee } from './Marquee';
+
+export function Header() {
+  const width = useWindowWidth();
+
+  return (
+    <header className="text-[#ffffff]">
+      <div className="px-10 desktop:pt-28 tablet:pt-12 mobile:pt-14">
+        {width >= 1024 ? (
+          <h1 className="text-8xl pb-8">
+            Создаем{' '}
+            <span
+              className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
+              style={{
+                backgroundClip: 'text',
+                WebkitBackgroundClip: 'text',
+                WebkitTextFillColor: 'transparent',
+              }}
+            >
+              интерактивные тренажеры
+            </span>{' '}
+            для промышленности и образования
+          </h1>
+        ) : (
+          <h1 className="tablet:text-[64px] mobile:text-[40px] font-medium leading-[57px]">
+            Интерактивные тренажеры{' '}
+            <span
+              className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
+              style={{
+                backgroundClip: 'text',
+                WebkitBackgroundClip: 'text',
+                WebkitTextFillColor: 'transparent',
+              }}
+            >
+              для обучения сотрудников
+            </span>
+          </h1>
+        )}
+        {width >= 1024 && (
+          <h2 className="text-[32px] max-w-[768px] desktop:block">
+            Помогаем сократить затраты на обучение, повысить безопасность и
+            производительность
+          </h2>
+        )}
+      </div>
+      <Marquee />
+    </header>
+  );
+}
@@ -0,0 +1,32 @@
+import { NavLink } from '../../ui/NavLink';
+
+export function Navbar() {
+  return (
+    <nav className="flex items-center justify-between text-[#ffffff] desktop:text-lg tablet:text-base font-semibold border-b border-[#3D425C] desktop:pl-10 t mobile:pl-4">
+      <div className="flex w-[104px] justify-between items-center mobile:py-3">
+        <img src="src/assets/logo.svg" alt="" />
+        <img
+          src="src/assets/text_logo.svg"
+          alt=""
+          className="desktop:block mobile:hidden"
+        />
+      </div>
+      <div className="items-center flex">
+        <NavLink text="Типы тренажеров" route="/" />
+        <NavLink text="Варианты комплектации" route="/" />
+        <NavLink text="Проекты" route="/" />
+        <NavLink text="События" route="/" />
+        <button className="text-lg bg-gradient-to-r from-[#798FFF] to-[#D375FF] border border-[#3D425C] tablet:block mobile:hidden py-[30px] px-10">
+          Оставить заявку
+        </button>
+        <button className="p-6 gap-x-1 items-center desktop:flex mobile:hidden">
+          <span>RU</span>
+          <img src="src/assets/arrow_down.svg" alt="" />
+        </button>
+        <button className="px-6 py-5 desktop:hidden mobile:block border-l border-[#3D425C]">
+          <img src="src/assets/burger.svg" alt="" />
+        </button>
+      </div>
+    </nav>
+  );
+}
@@ -0,0 +1,68 @@
+export function Figures() {
+  return (
+    <div className="desktop:py-[70px] mobile:py-14 2xl:pr-24 min-[1200px]:pl-10 min-[1600px]:pr-[168px] tablet:py-14 tablet:px-6 mobile:px-4">
+      <div className="flex justify-between min-[1400px]:flex-row mobile:flex-col tablet:border-t border-[#3D425C] pt-5">
+        <p className="flex items-start gap-x-[3px] leading-[16px] uppercase text-[#ffffff] text-sm font-medium tablet:mb-[18px] mobile:mb-2">
+          <img src="src/assets/cube.svg" alt="" />
+          экономическая
+          <br className="min-[1400px]:block mobile:hidden" /> эффективность
+        </p>
+        <div>
+          <div className="flex mobile:max-tablet:flex-col mobile:items-stretch gap-x-4 gap-y-2 mobile:max-tablet:py-5 tablet:pb-5 border-b border-[#3D425C] mb-9 w-fit tablet:border-t-0 mobile:border-t">
+            <Figure
+              variance={'left'}
+              percents={50}
+              title={'сокращение бюджета на обучение сотрудников'}
+            />
+            <Figure
+              variance={'left'}
+              percents={30}
+              title={'сокращение времени обучения сотрудников'}
+            />
+            <Figure
+              variance={'right'}
+              percents={90}
+              title={'готовность к опасным ситуациямние выше на'}
+            />
+          </div>
+          <p className="text-[#ffffff] font-medium desktop:text-[32px] tablet:text-2xl mobile:text-xl tablet:leading-8 mobile:leading-5 max-w-[752px]">
+            В тренажере человек принимает решения так же, как в реальном мире,{' '}
+            <span className="opacity-60">
+              активируя те же нейронные цепочки в мозгу. Это позволяет добиться
+              реальной производительность в работе.
+            </span>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Figure({
+  variance,
+  title,
+  percents,
+}: {
+  variance: 'left' | 'right';
+  percents: number;
+  title: string;
+}) {
+  return (
+    <div
+      className={
+        'flex px-6 bg-[#3D425C4D] bg-opacity-30 rounded-2xl pt-6 tablet:max-laptop:min-w-[140px] bg-no-repeat bg-auto xl:bg-[bottom_right_24px] tablet:max-xl:bg-[bottom_right_12px] mobile:bg-[bottom_right_24px] h-[262px] xl:w-[386px] desktop:min-w-[232px]'
+      }
+      style={{
+        backgroundImage: `url(src/assets/${variance}_variance_figure.svg)`,
+      }}
+    >
+      <div className="text-[#ffffff] flex flex-col justify-between py-6">
+        <h6 className="xl:text-sm tablet:text-xs xl:font-medium">{title}</h6>
+        <h1 className="font-medium xl:text-8xl mobile:text-[64px] flex items-center">
+          {percents}
+          <span className="xl:text-[64px] tablet:text-[32px]">%</span>
+        </h1>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,78 @@
+import { useWindowWidth } from '../../hooks/useWindowWidth';
+
+export function Pluses() {
+  const width = useWindowWidth();
+
+  return (
+    <div className="desktop:py-[70px] mobile:py-14 desktop:px-10 tablet:px-6 mobile:px-4">
+      {width >= 640 ? (
+        <h1 className="desktop:text-[64px] tablet:text-[40px] font-medium desktop:leading-[57px] tablet:leading-10 text-[#ffffff]">
+          <span
+            className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
+            style={{
+              backgroundClip: 'text',
+              WebkitBackgroundClip: 'text',
+              WebkitTextFillColor: 'transparent',
+            }}
+          >
+            Достигайте положительный эффект
+          </span>{' '}
+          за счет снижения издержек
+        </h1>
+      ) : (
+        <h1 className="text-[#ffffff] text-[28px] leading-[28px]">
+          <span
+            className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
+            style={{
+              backgroundClip: 'text',
+              WebkitBackgroundClip: 'text',
+              WebkitTextFillColor: 'transparent',
+            }}
+          >
+            Помогаем
+          </span>{' '}
+          сократить затраты на обучение, повысить безопасность и
+          производительность
+        </h1>
+      )}
+      <div className="flex tablet:flex-row mobile:flex-col justify-between gap-x-3 tablet:items-end 2xl:pl-[128px] min-[1600px]:pl-64 desktop:mt-14 mobile:mt-6">
+        {320 <= width && width <= 640 && (
+          <p className="flex text-[#ffffff] gap-x-1 mb-2">
+            <img src="src/assets/cube.svg" alt="" />
+            <span className="uppercase">снижение</span>
+          </p>
+        )}
+        <ul className="text-[#ffffff] xl:min-w-[752px] desktop:text-lg tablet:min-w-[318px] mobile:text-base mobile:mb-6">
+          <li className="flex justify-between py-5 border-t border-[#3D425C] gap-x-4">
+            <p>снижение количества несчастных случаев</p>
+            <p className="text-[#52587A]">[01]</p>
+          </li>
+          <li className="flex justify-between py-5 border-t border-[#3D425C] gap-x-4">
+            <p>уменьшение количества ошибок при ТО и ППР</p>
+            <p className="text-[#52587A]">[02]</p>
+          </li>
+          <li className="flex justify-between py-5 border-t border-[#3D425C] gap-x-4">
+            <p>меньше случаев внеплановой остановки оборудования</p>
+            <p className="text-[#52587A]">[03]</p>
+          </li>
+          <li className="flex justify-between py-5 border-t border-[#3D425C] gap-x-4">
+            <p>
+              снижение расходов на закупку реальной техники и оборудования для
+              обучения
+            </p>
+            <p className="text-[#52587A]">[04]</p>
+          </li>
+          <li className="flex justify-between py-5 border-t border-[#3D425C] gap-x-4">
+            <p>сокращение сроков обучения</p>
+            <p className="text-[#52587A]">[05]</p>
+          </li>
+        </ul>
+        <img
+          className="desktop:w-[352px] desktop:h-[280px] tablet:w-[262px] tablet:h-[168px]"
+          src="src/assets/effect.png"
+          alt=""
+        />
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,13 @@
+export function Video() {
+  return (
+    <iframe
+      width="100%"
+      height="936"
+      src="https://www.youtube.com/embed/aAGcjf-B42g?si=iARReaP-CAuqpURJ"
+      title="YouTube video player"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      referrerPolicy="strict-origin-when-cross-origin"
+      allowFullScreen={true}
+    ></iframe>
+  );
+}
@@ -0,0 +1,57 @@
+export function Marquee() {
+  return (
+    <div className="flex items-stretch overflow-clip desktop:mt-28 tablet:mt-12 mobile:mt-14">
+      <div className="desktop:min-w-[212px] tablet:min-w-[180px] mobile:min-w-[170px] flex border border-[#3D425C] py-[30px]">
+        <img src="src/assets/rosatom.svg" className="m-auto" alt="" />
+      </div>
+      <div className="desktop:min-w-[212px] tablet:min-w-[180px] mobile:min-w-[170px] flex border border-[#3D425C] py-[30px]">
+        <img src="src/assets/rosatom.svg" className="m-auto" alt="" />
+      </div>
+      <div className="desktop:min-w-[212px] tablet:min-w-[180px] mobile:min-w-[170px] flex border border-[#3D425C] py-[30px]">
+        <img src="src/assets/rosatom.svg" className="m-auto" alt="" />
+      </div>
+      <div className="desktop:min-w-[212px] tablet:min-w-[180px] mobile:min-w-[170px] flex border border-[#3D425C] py-[30px]">
+        <img src="src/assets/rosatom.svg" className="m-auto" alt="" />
+      </div>
+      <div className="desktop:min-w-[212px] tablet:min-w-[180px] mobile:min-w-[170px] flex border border-[#3D425C] py-[30px]">
+        <img src="src/assets/rosatom.svg" className="m-auto" alt="" />
+      </div>
+      <div className="desktop:min-w-[212px] tablet:min-w-[180px] mobile:min-w-[170px] flex border border-[#3D425C] py-[30px]">
+        <img src="src/assets/rosatom.svg" className="m-auto" alt="" />
+      </div>
+      <div className="desktop:min-w-[212px] tablet:min-w-[180px] mobile:min-w-[170px] flex border border-[#3D425C] py-[30px]">
+        <img src="src/assets/rosatom.svg" className="m-auto" alt="" />
+      </div>
+      <div className="desktop:min-w-[212px] tablet:min-w-[180px] mobile:min-w-[170px] flex border border-[#3D425C] py-[30px]">
+        <img src="src/assets/rosatom.svg" className="m-auto" alt="" />
+      </div>
+      <div className="desktop:min-w-[212px] tablet:min-w-[180px] mobile:min-w-[170px] flex border border-[#3D425C] py-[30px]">
+        <img src="src/assets/rosatom.svg" className="m-auto" alt="" />
+      </div>
+      <div className="desktop:min-w-[212px] tablet:min-w-[180px] mobile:min-w-[170px] flex border border-[#3D425C] py-[30px]">
+        <img src="src/assets/rosatom.svg" className="m-auto" alt="" />
+      </div>
+      <div className="desktop:min-w-[212px] tablet:min-w-[180px] mobile:min-w-[170px] flex border border-[#3D425C] py-[30px]">
+        <img src="src/assets/rosatom.svg" className="m-auto" alt="" />
+      </div>
+      <div className="desktop:min-w-[212px] tablet:min-w-[180px] mobile:min-w-[170px] flex border border-[#3D425C] py-[30px]">
+        <img src="src/assets/rosatom.svg" className="m-auto" alt="" />
+      </div>
+      <div className="desktop:min-w-[212px] tablet:min-w-[180px] mobile:min-w-[170px] flex border border-[#3D425C] py-[30px]">
+        <img src="src/assets/rosatom.svg" className="m-auto" alt="" />
+      </div>
+      <div className="desktop:min-w-[212px] tablet:min-w-[180px] mobile:min-w-[170px] flex border border-[#3D425C] py-[30px]">
+        <img src="src/assets/rosatom.svg" className="m-auto" alt="" />
+      </div>
+      <div className="desktop:min-w-[212px] tablet:min-w-[180px] mobile:min-w-[170px] flex border border-[#3D425C] py-[30px]">
+        <img src="src/assets/rosatom.svg" className="m-auto" alt="" />
+      </div>
+      <div className="desktop:min-w-[212px] tablet:min-w-[180px] mobile:min-w-[170px] flex border border-[#3D425C] py-[30px]">
+        <img src="src/assets/rosatom.svg" className="m-auto" alt="" />
+      </div>
+      <div className="desktop:min-w-[212px] tablet:min-w-[180px] mobile:min-w-[170px] flex border border-[#3D425C] py-[30px]">
+        <img src="src/assets/rosatom.svg" className="m-auto" alt="" />
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,3 @@
+export function Multiuser() {
+  return <div></div>;
+}
@@ -0,0 +1,164 @@
+import { useWindowWidth } from '../hooks/useWindowWidth';
+
+export function Process() {
+  const width = useWindowWidth();
+
+  return (
+    <div className="py-[70px] px-10 text-[#ffffff]">
+      <h1 className="text-[64px] tablet: font-medium leading-[58px] mb-14 -tracking-[.02em] desktop:block tablet:hidden">
+        Процесс обучения сотрудников станет безопасней и эффективней с
+        <span
+          className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
+          style={{
+            backgroundClip: 'text',
+            WebkitBackgroundClip: 'text',
+            WebkitTextFillColor: 'transparent',
+          }}
+        >
+          {' '}
+          продуктами GRAFF.training
+        </span>
+      </h1>
+      <p className="uppercase flex gap-x-1 mb-[13px]">
+        <img src="src/assets/cube.svg" alt="" />
+        Продукты
+      </p>
+      <div className="flex bg-[#3D425C4D] bg-opacity-3 rounded-xl p-1 mb-2 w-fit max-w-full overflow-clip">
+        <TabButton text="Промышленные тренажеры" />
+        <TabButton text="Симуляторы управления техникой" />
+        <TabButton text="Тренажеры для учебных заведений" />
+      </div>
+      {width >= 1024 ? (
+        <div className="bg-[#3D425C4D] pt-10 pb-[52px] pl-10 rounded-xl flex bg-[url('src/assets/mask_group.png')] bg-no-repeat bg-right-bottom">
+          <div className="max-w-[455px]">
+            <h1 className="text-[#ffffff] text-[32px] font-medium leading-[29px] mb-8">
+              Промышленные тренажеры виртуальной реальности
+            </h1>
+            <div className="flex flex-col gap-y-6">
+              <div className="flex gap-x-7">
+                <img src="src/assets/danger_icon.svg" alt="" />
+                <div className="border-l border-[#3D425C] pl-4 font-medium">
+                  <p className="text-[#ffffff] text-lg mb-2">
+                    обучение навыкам работы на опасных производствах
+                  </p>
+                  <p className="text-sm">
+                    Отработка проведения технологических операций: оказание
+                    первой помощи, работы на высоте, работа с доменной печью и
+                    т.п.
+                  </p>
+                </div>
+              </div>
+              <div className="flex gap-x-7">
+                <img src="src/assets/service_icon.svg" alt="" />
+                <div className="border-l border-[#3D425C] pl-4 font-medium">
+                  <p className="text-[#ffffff] text-lg mb-2">
+                    обучение обслуживанию и ремонту оборудования, систем,
+                    техники
+                  </p>
+                  <p className="text-sm">
+                    отработка определения неисправностей оборудования и
+                    выполнения ремонтных работ на цифровом двойнике
+                  </p>
+                </div>
+              </div>
+              <div className="flex gap-x-7">
+                <img src="src/assets/safety_icon.svg" alt="" />
+                <div className="border-l border-[#3D425C] pl-4 font-medium">
+                  <p className="text-[#ffffff] text-lg mb-2">
+                    обучение правилам промышленной безопасности и охраны труда{' '}
+                  </p>
+                  <p className="text-sm">
+                    отработка плана мероприятий по локализации и ликвидации
+                    последствий аварий.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="bg-[#3D425C4D] opacity-3 p-7 rounded-xl">
+          <div className="bg-[url('src/assets/mask_group.png')] bg-no-repeat bg-contain bg-right-bottom border-b border-[#3D425C] pb-5">
+            <div className="max-w-[326px]">
+              <h1 className="text-2xl font-medium mb-11">
+                Промышленные тренажеры виртуальной реальности{' '}
+              </h1>
+              <p className="text-sm">
+                Может быть еще какой-нибудь небольшой текст, а то мне не хватает
+                для балланса. Ну если не будет, то как-нибудь переживем
+              </p>
+            </div>
+          </div>
+          <div className="flex mt-8">
+            <div className="border-l border-[#3D425C]">
+              <img src="src/assets/danger_icon.svg" alt="" />
+              <div className="pl-4 font-medium">
+                <p className="text-[#ffffff] text-base mb-2">
+                  обучение навыкам работы на опасных производствах
+                </p>
+                <p className="text-sm">
+                  Отработка проведения технологических операций: оказание первой
+                  помощи, работы на высоте, работа с доменной печью и т.п.
+                </p>
+              </div>
+            </div>
+            <div className="border-l border-[#3D425C]">
+              <img src="src/assets/service_icon.svg" alt="" />
+              <div className=" pl-4 font-medium">
+                <p className="text-[#ffffff] text-base mb-2">
+                  обучение обслуживанию и ремонту оборудования, систем, техники
+                </p>
+                <p className="text-sm">
+                  отработка определения неисправностей оборудования и выполнения
+                  ремонтных работ на цифровом двойнике
+                </p>
+              </div>
+            </div>
+            <div className="border-l border-[#3D425C]">
+              <img src="src/assets/safety_icon.svg" alt="" />
+              <div className="pl-4 font-medium">
+                <p className="text-[#ffffff] text-lg mb-2">
+                  обучение правилам промышленной безопасности и охраны труда{' '}
+                </p>
+                <p className="text-sm">
+                  отработка плана мероприятий по локализации и ликвидации
+                  последствий аварий.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function TabButton({ text }: { text: string }) {
+  return (
+    <button className="active:bg-[#798FFF] rounded-lg px-5 py-[13.5px] desktop:text-lg font-semibold desktop:leading-[18px] tablet:text-base tablet:leading-4 text-nowrap text-clip">
+      {text}
+    </button>
+  );
+}
+
+function TeachingItem({
+  title,
+  text,
+  iconType,
+}: {
+  title: string;
+  text: string;
+  iconType: 'danger' | 'service' | 'safety';
+}) {
+  return (
+    <div className="desktop:border-l-0 tablet:border-l border-[#3D425C] 2xl:flex 2xl:gap-x-7">
+      <img src={`src/assets/${iconType}_icon.svg`} alt="" />
+      <div className="2xl:border-l border-[#3D425C] 2xl:pl-4 font-medium">
+        <p className="text-[#ffffff] desktop:text-lg tablet:text-base mobile:text-sm mb-2">
+          {title}
+        </p>
+        <p className="desktop:text-sm mobile:text-xs">{text}</p>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,3 @@
+export function Safety() {
+  return <div></div>;
+}
@@ -0,0 +1,3 @@
+export function Variances() {
+  return <div></div>;
+}
@@ -0,0 +1,14 @@
+import { useLayoutEffect, useState } from 'react';
+
+export function useWindowWidth() {
+  const [width, setWidth] = useState(0);
+  useLayoutEffect(() => {
+    const updateWidth = () => setWidth(window.innerWidth);
+    window.addEventListener('resize', () => {
+      updateWidth();
+    });
+    updateWidth();
+    return () => window.removeEventListener('resize', updateWidth);
+  }, []);
+  return width;
+}
@@ -0,0 +1,9 @@
+@import url('/fonts/TTHovesProAll/stylesheet.css');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  font-family: 'TTHovesPro';
+}
@@ -0,0 +1,25 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import { MainPage } from './pages/MainPage';
+import Layout from './Layout';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <RouterProvider
+      router={createBrowserRouter([
+        {
+          path: '/',
+          Component: Layout,
+          children: [
+            {
+              index: true,
+              Component: MainPage,
+            },
+          ],
+        },
+      ])}
+    />
+  </React.StrictMode>,
+);
@@ -0,0 +1,15 @@
+import { Video } from '../components/Main/Video';
+import { Pluses } from '../components/Main/Pluses';
+import { Figures } from '../components/Main/Figures';
+import { Process } from '../components/Process';
+
+export function MainPage() {
+  return (
+    <>
+      <Video />
+      <Pluses />
+      <Figures />
+      <Process />
+    </>
+  );
+}
@@ -0,0 +1,35 @@
+import { Link } from 'react-router-dom';
+import { useWindowWidth } from '../hooks/useWindowWidth';
+
+export function NavLink({ text, route }: { text: string; route: string }) {
+  const width = useWindowWidth();
+
+  return (
+    <Link
+      className={
+        'border-x border-[#3D425C] desktop:block mobile:hidden py-[30px]'
+      }
+      style={{
+        paddingLeft:
+          width <= 1600 && width >= 1024
+            ? ((width - 1024) / (1600 - 1024)) * 25 + 15
+            : 40,
+        paddingRight:
+          width <= 1600 && width >= 1024
+            ? ((width - 1024) / (1600 - 1024)) * 25 + 15
+            : 40,
+        paddingTop:
+          width <= 1600 && width >= 1024
+            ? ((width - 1024) / (1600 - 1024)) * 3 + 27
+            : 30,
+        paddingBottom:
+          width <= 1600 && width >= 1024
+            ? ((width - 1024) / (1600 - 1024)) * 3 + 27
+            : 30,
+      }}
+      to={route}
+    >
+      {text}
+    </Link>
+  );
+}
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
@@ -0,0 +1,21 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      screens: {
+        "mobile": '360px',
+        "tablet": '640px',
+        "desktop": '1024px',
+      },
+      colors: {
+        "text-gradient": '-webkit-linear-gradient(#798FFF, #D375FF)'
+      }
+    },
+  },
+  plugins: [],
+}
+
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noEmit": true
+  },
+  "include": ["vite.config.ts"]
+}
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>