commit 36cd50c92b7257c88f963715a3f49259349f9de7 Author: Your Name Date: Wed Jun 26 14:11:20 2024 +0500 init diff --git a/.eslintrc.cjs b/.eslintrc.cjs new file mode 100644 index 0000000..d6c9537 --- /dev/null +++ b/.eslintrc.cjs @@ -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 }, + ], + }, +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/.gitignore @@ -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? diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..7ab1430 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,7 @@ +{ + "arrowParens": "avoid", + "semi": true, + "singleQuote": true, + "trailingComma": "all", + "tabWidth": 2 +} \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..0d6babe --- /dev/null +++ b/README.md @@ -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 diff --git a/index.html b/index.html new file mode 100644 index 0000000..e4b78ea --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + React + TS + + +
+ + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..91610a7 --- /dev/null +++ b/package.json @@ -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" + } +} diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..2e7af2b --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/public/fonts/TTHovesProAll/TTHovesPro-DmBd.eot b/public/fonts/TTHovesProAll/TTHovesPro-DmBd.eot new file mode 100644 index 0000000..5cc5eea Binary files /dev/null and b/public/fonts/TTHovesProAll/TTHovesPro-DmBd.eot differ diff --git a/public/fonts/TTHovesProAll/TTHovesPro-DmBd.ttf b/public/fonts/TTHovesProAll/TTHovesPro-DmBd.ttf new file mode 100644 index 0000000..45ab33d Binary files /dev/null and b/public/fonts/TTHovesProAll/TTHovesPro-DmBd.ttf differ diff --git a/public/fonts/TTHovesProAll/TTHovesPro-DmBd.woff b/public/fonts/TTHovesProAll/TTHovesPro-DmBd.woff new file mode 100644 index 0000000..bf0549a Binary files /dev/null and b/public/fonts/TTHovesProAll/TTHovesPro-DmBd.woff differ diff --git a/public/fonts/TTHovesProAll/TTHovesPro-DmBd.woff2 b/public/fonts/TTHovesProAll/TTHovesPro-DmBd.woff2 new file mode 100644 index 0000000..ac58b1f Binary files /dev/null and b/public/fonts/TTHovesProAll/TTHovesPro-DmBd.woff2 differ diff --git a/public/fonts/TTHovesProAll/TTHovesPro-Md.eot b/public/fonts/TTHovesProAll/TTHovesPro-Md.eot new file mode 100644 index 0000000..37c2ee7 Binary files /dev/null and b/public/fonts/TTHovesProAll/TTHovesPro-Md.eot differ diff --git a/public/fonts/TTHovesProAll/TTHovesPro-Md.ttf b/public/fonts/TTHovesProAll/TTHovesPro-Md.ttf new file mode 100644 index 0000000..96896b5 Binary files /dev/null and b/public/fonts/TTHovesProAll/TTHovesPro-Md.ttf differ diff --git a/public/fonts/TTHovesProAll/TTHovesPro-Md.woff b/public/fonts/TTHovesProAll/TTHovesPro-Md.woff new file mode 100644 index 0000000..dba766b Binary files /dev/null and b/public/fonts/TTHovesProAll/TTHovesPro-Md.woff differ diff --git a/public/fonts/TTHovesProAll/TTHovesPro-Md.woff2 b/public/fonts/TTHovesProAll/TTHovesPro-Md.woff2 new file mode 100644 index 0000000..df64d2f Binary files /dev/null and b/public/fonts/TTHovesProAll/TTHovesPro-Md.woff2 differ diff --git a/public/fonts/TTHovesProAll/TTHovesPro-Rg.eot b/public/fonts/TTHovesProAll/TTHovesPro-Rg.eot new file mode 100644 index 0000000..128b76b Binary files /dev/null and b/public/fonts/TTHovesProAll/TTHovesPro-Rg.eot differ diff --git a/public/fonts/TTHovesProAll/TTHovesPro-Rg.ttf b/public/fonts/TTHovesProAll/TTHovesPro-Rg.ttf new file mode 100644 index 0000000..e41a50e Binary files /dev/null and b/public/fonts/TTHovesProAll/TTHovesPro-Rg.ttf differ diff --git a/public/fonts/TTHovesProAll/TTHovesPro-Rg.woff b/public/fonts/TTHovesProAll/TTHovesPro-Rg.woff new file mode 100644 index 0000000..fb1b27b Binary files /dev/null and b/public/fonts/TTHovesProAll/TTHovesPro-Rg.woff differ diff --git a/public/fonts/TTHovesProAll/TTHovesPro-Rg.woff2 b/public/fonts/TTHovesProAll/TTHovesPro-Rg.woff2 new file mode 100644 index 0000000..2550fa8 Binary files /dev/null and b/public/fonts/TTHovesProAll/TTHovesPro-Rg.woff2 differ diff --git a/public/fonts/TTHovesProAll/demo.html b/public/fonts/TTHovesProAll/demo.html new file mode 100644 index 0000000..a5b323f --- /dev/null +++ b/public/fonts/TTHovesProAll/demo.html @@ -0,0 +1,250 @@ + + + + + + + + + Transfonter demo + + + + +
+
+

☝︎TT Hoves Pro DemiBold

+ 
.your-style {
+    font-family: 'TTHovesPro-DmBd';
+    font-weight: 600;
+    font-style: normal;
+}
+ 
+<link rel="preload" href="TTHovesPro-DmBd.woff2" as="font" type="font/woff2" crossorigin>
+
+

+ abcdefghijklmnopqrstuvwxyz
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+ 0123456789.:,;()*!?'@#<>$%&^+-=~ +

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+
+
+ +
+

☝︎TT Hoves Pro Medium

+ 
.your-style {
+    font-family: 'TTHovesPro-Md';
+    font-weight: 500;
+    font-style: normal;
+}
+ 
+<link rel="preload" href="TTHovesPro-Md.woff2" as="font" type="font/woff2" crossorigin>
+
+

+ abcdefghijklmnopqrstuvwxyz
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+ 0123456789.:,;()*!?'@#<>$%&^+-=~ +

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+
+
+ +
+

☝︎TT Hoves Pro Regular

+ 
.your-style {
+    font-family: 'TTHovesPro-Rg';
+    font-weight: normal;
+    font-style: normal;
+}
+ 
+<link rel="preload" href="TTHovesPro-Rg.woff2" as="font" type="font/woff2" crossorigin>
+
+

+ abcdefghijklmnopqrstuvwxyz
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+ 0123456789.:,;()*!?'@#<>$%&^+-=~ +

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+
+
+ +
+ + diff --git a/public/fonts/TTHovesProAll/stylesheet.css b/public/fonts/TTHovesProAll/stylesheet.css new file mode 100644 index 0000000..4440c8c --- /dev/null +++ b/public/fonts/TTHovesProAll/stylesheet.css @@ -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; +} diff --git a/public/vite.svg b/public/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/Layout.tsx b/src/Layout.tsx new file mode 100644 index 0000000..91a51b0 --- /dev/null +++ b/src/Layout.tsx @@ -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 ( +
+ +
+
+ +
+
+
+ ); +} diff --git a/src/assets/arrow_down.svg b/src/assets/arrow_down.svg new file mode 100644 index 0000000..6a21834 --- /dev/null +++ b/src/assets/arrow_down.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/burger.svg b/src/assets/burger.svg new file mode 100644 index 0000000..956488b --- /dev/null +++ b/src/assets/burger.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/cube.svg b/src/assets/cube.svg new file mode 100644 index 0000000..60a62b4 --- /dev/null +++ b/src/assets/cube.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/danger_icon.svg b/src/assets/danger_icon.svg new file mode 100644 index 0000000..3ee3a70 --- /dev/null +++ b/src/assets/danger_icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/effect.png b/src/assets/effect.png new file mode 100644 index 0000000..ff6094f Binary files /dev/null and b/src/assets/effect.png differ diff --git a/src/assets/left_variance_figure.svg b/src/assets/left_variance_figure.svg new file mode 100644 index 0000000..5f0583c --- /dev/null +++ b/src/assets/left_variance_figure.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/logo.svg b/src/assets/logo.svg new file mode 100644 index 0000000..7e08541 --- /dev/null +++ b/src/assets/logo.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/mask_group.png b/src/assets/mask_group.png new file mode 100644 index 0000000..70ad4a1 Binary files /dev/null and b/src/assets/mask_group.png differ diff --git a/src/assets/right_variance_figure.svg b/src/assets/right_variance_figure.svg new file mode 100644 index 0000000..f33a496 --- /dev/null +++ b/src/assets/right_variance_figure.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/rosatom.svg b/src/assets/rosatom.svg new file mode 100644 index 0000000..f88f6ff --- /dev/null +++ b/src/assets/rosatom.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/assets/safety_icon.svg b/src/assets/safety_icon.svg new file mode 100644 index 0000000..016dd0a --- /dev/null +++ b/src/assets/safety_icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/service_icon.svg b/src/assets/service_icon.svg new file mode 100644 index 0000000..13c0c7c --- /dev/null +++ b/src/assets/service_icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/text_logo.svg b/src/assets/text_logo.svg new file mode 100644 index 0000000..f8da988 --- /dev/null +++ b/src/assets/text_logo.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Contacts.tsx b/src/components/Contacts.tsx new file mode 100644 index 0000000..2b89660 --- /dev/null +++ b/src/components/Contacts.tsx @@ -0,0 +1,3 @@ +export function Contacts() { + return
; +} diff --git a/src/components/Distance.tsx b/src/components/Distance.tsx new file mode 100644 index 0000000..e63ca85 --- /dev/null +++ b/src/components/Distance.tsx @@ -0,0 +1,3 @@ +export function Distance() { + return
; +} diff --git a/src/components/Events.tsx b/src/components/Events.tsx new file mode 100644 index 0000000..ed81b3b --- /dev/null +++ b/src/components/Events.tsx @@ -0,0 +1,3 @@ +export function Events() { + return
; +} diff --git a/src/components/Expirience.tsx b/src/components/Expirience.tsx new file mode 100644 index 0000000..faef1c7 --- /dev/null +++ b/src/components/Expirience.tsx @@ -0,0 +1,3 @@ +export function Expirience() { + return
; +} diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx new file mode 100644 index 0000000..5364b3b --- /dev/null +++ b/src/components/Footer.tsx @@ -0,0 +1,3 @@ +export function Footer() { + return ; +} diff --git a/src/components/Header.tsx b/src/components/Header.tsx new file mode 100644 index 0000000..083738d --- /dev/null +++ b/src/components/Header.tsx @@ -0,0 +1,50 @@ +import { useWindowWidth } from '../hooks/useWindowWidth'; +import { Marquee } from './Marquee'; + +export function Header() { + const width = useWindowWidth(); + + return ( +
+
+ {width >= 1024 ? ( +

+ Создаем{' '} + + интерактивные тренажеры + {' '} + для промышленности и образования +

+ ) : ( +

+ Интерактивные тренажеры{' '} + + для обучения сотрудников + +

+ )} + {width >= 1024 && ( +

+ Помогаем сократить затраты на обучение, повысить безопасность и + производительность +

+ )} +
+ + + ); +} diff --git a/src/components/Layout/Navbar.tsx b/src/components/Layout/Navbar.tsx new file mode 100644 index 0000000..71cccfa --- /dev/null +++ b/src/components/Layout/Navbar.tsx @@ -0,0 +1,32 @@ +import { NavLink } from '../../ui/NavLink'; + +export function Navbar() { + return ( + + ); +} diff --git a/src/components/Main/Figures.tsx b/src/components/Main/Figures.tsx new file mode 100644 index 0000000..623f5b3 --- /dev/null +++ b/src/components/Main/Figures.tsx @@ -0,0 +1,68 @@ +export function Figures() { + return ( +
+
+

+ + экономическая +
эффективность +

+
+
+
+
+
+
+

+ В тренажере человек принимает решения так же, как в реальном мире,{' '} + + активируя те же нейронные цепочки в мозгу. Это позволяет добиться + реальной производительность в работе. + +

+
+
+
+ ); +} + +function Figure({ + variance, + title, + percents, +}: { + variance: 'left' | 'right'; + percents: number; + title: string; +}) { + return ( +
+
+
{title}
+

+ {percents} + % +

+
+
+ ); +} diff --git a/src/components/Main/Pluses.tsx b/src/components/Main/Pluses.tsx new file mode 100644 index 0000000..449c759 --- /dev/null +++ b/src/components/Main/Pluses.tsx @@ -0,0 +1,78 @@ +import { useWindowWidth } from '../../hooks/useWindowWidth'; + +export function Pluses() { + const width = useWindowWidth(); + + return ( +
+ {width >= 640 ? ( +

+ + Достигайте положительный эффект + {' '} + за счет снижения издержек +

+ ) : ( +

+ + Помогаем + {' '} + сократить затраты на обучение, повысить безопасность и + производительность +

+ )} +
+ {320 <= width && width <= 640 && ( +

+ + снижение +

+ )} +
    +
  • +

    снижение количества несчастных случаев

    +

    [01]

    +
    • +
  • +

    уменьшение количества ошибок при ТО и ППР

    +

    [02]

    +
    • +
  • +

    меньше случаев внеплановой остановки оборудования

    +

    [03]

    +
    • +
  • +

    + снижение расходов на закупку реальной техники и оборудования для + обучения +

    +

    [04]

    +
    • +
  • +

    сокращение сроков обучения

    +

    [05]

    +
    • +
+ +
+
+ ); +} diff --git a/src/components/Main/Video.tsx b/src/components/Main/Video.tsx new file mode 100644 index 0000000..3fbeedb --- /dev/null +++ b/src/components/Main/Video.tsx @@ -0,0 +1,13 @@ +export function Video() { + return ( + + ); +} diff --git a/src/components/Marquee.tsx b/src/components/Marquee.tsx new file mode 100644 index 0000000..fe135b0 --- /dev/null +++ b/src/components/Marquee.tsx @@ -0,0 +1,57 @@ +export function Marquee() { + return ( +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ ); +} diff --git a/src/components/MultiUser.tsx b/src/components/MultiUser.tsx new file mode 100644 index 0000000..564374a --- /dev/null +++ b/src/components/MultiUser.tsx @@ -0,0 +1,3 @@ +export function Multiuser() { + return
; +} diff --git a/src/components/Process.tsx b/src/components/Process.tsx new file mode 100644 index 0000000..de3a736 --- /dev/null +++ b/src/components/Process.tsx @@ -0,0 +1,164 @@ +import { useWindowWidth } from '../hooks/useWindowWidth'; + +export function Process() { + const width = useWindowWidth(); + + return ( +
+

+ Процесс обучения сотрудников станет безопасней и эффективней с + + {' '} + продуктами GRAFF.training + +

+

+ + Продукты +

+
+ + + +
+ {width >= 1024 ? ( +
+
+

+ Промышленные тренажеры виртуальной реальности +

+
+
+ +
+

+ обучение навыкам работы на опасных производствах +

+

+ Отработка проведения технологических операций: оказание + первой помощи, работы на высоте, работа с доменной печью и + т.п. +

+
+
+
+ +
+

+ обучение обслуживанию и ремонту оборудования, систем, + техники +

+

+ отработка определения неисправностей оборудования и + выполнения ремонтных работ на цифровом двойнике +

+
+
+
+ +
+

+ обучение правилам промышленной безопасности и охраны труда{' '} +

+

+ отработка плана мероприятий по локализации и ликвидации + последствий аварий. +

+
+
+
+
+
+ ) : ( +
+
+
+

+ Промышленные тренажеры виртуальной реальности{' '} +

+

+ Может быть еще какой-нибудь небольшой текст, а то мне не хватает + для балланса. Ну если не будет, то как-нибудь переживем +

+
+
+
+
+ +
+

+ обучение навыкам работы на опасных производствах +

+

+ Отработка проведения технологических операций: оказание первой + помощи, работы на высоте, работа с доменной печью и т.п. +

+
+
+
+ +
+

+ обучение обслуживанию и ремонту оборудования, систем, техники +

+

+ отработка определения неисправностей оборудования и выполнения + ремонтных работ на цифровом двойнике +

+
+
+
+ +
+

+ обучение правилам промышленной безопасности и охраны труда{' '} +

+

+ отработка плана мероприятий по локализации и ликвидации + последствий аварий. +

+
+
+
+
+ )} +
+ ); +} + +function TabButton({ text }: { text: string }) { + return ( + + ); +} + +function TeachingItem({ + title, + text, + iconType, +}: { + title: string; + text: string; + iconType: 'danger' | 'service' | 'safety'; +}) { + return ( +
+ +
+

+ {title} +

+

{text}

+
+
+ ); +} diff --git a/src/components/Safety.tsx b/src/components/Safety.tsx new file mode 100644 index 0000000..5f9005f --- /dev/null +++ b/src/components/Safety.tsx @@ -0,0 +1,3 @@ +export function Safety() { + return
; +} diff --git a/src/components/Variances.tsx b/src/components/Variances.tsx new file mode 100644 index 0000000..19d7801 --- /dev/null +++ b/src/components/Variances.tsx @@ -0,0 +1,3 @@ +export function Variances() { + return
; +} diff --git a/src/hooks/useWindowWidth.ts b/src/hooks/useWindowWidth.ts new file mode 100644 index 0000000..0c38be3 --- /dev/null +++ b/src/hooks/useWindowWidth.ts @@ -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; +} diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..d675208 --- /dev/null +++ b/src/index.css @@ -0,0 +1,9 @@ +@import url('/fonts/TTHovesProAll/stylesheet.css'); + +@tailwind base; +@tailwind components; +@tailwind utilities; + +body { + font-family: 'TTHovesPro'; +} diff --git a/src/main.tsx b/src/main.tsx new file mode 100644 index 0000000..f954999 --- /dev/null +++ b/src/main.tsx @@ -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( + + + , +); diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx new file mode 100644 index 0000000..62a2988 --- /dev/null +++ b/src/pages/MainPage.tsx @@ -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 ( + <> +