init

2024-08-29 18:47:58 +05:00
commit a17faa0822
63 changed files with 3293 additions and 0 deletions
@@ -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,
+    "tabWidth": 2,
+    "trailingComma": "all"
+}
@@ -0,0 +1,50 @@
+# 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 tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```
@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)
@@ -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,36 @@
+{
+  "name": "graff.event",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "framer-motion": "^11.3.31",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.1",
+    "usehooks-ts": "^3.1.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.9.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.9.0",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.9",
+    "globals": "^15.9.0",
+    "postcss": "^8.4.41",
+    "prettier": "^3.3.3",
+    "tailwindcss": "^3.4.10",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.0.1",
+    "vite": "^5.4.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,3 @@
+export function Footer() {
+  return <footer></footer>;
+}
@@ -0,0 +1,38 @@
+import { Link } from 'react-router-dom';
+import { Logo } from '../components/icons/Logo';
+import { Button } from '../components/ui/Button';
+import { ClassNameWrapper } from '../hocs/ClassNameWrapper';
+
+export function Header() {
+  return (
+    <header className="lg:px-6 flex items-center h-16 border-b border-[#3D425C]">
+      <Link to={'/'}>
+        <ClassNameWrapper element={<Logo />} className="h-10" />
+      </Link>
+      <nav className="mx-auto self-stretch flex">
+        {[
+          { path: '/#products', text: 'Продукты' },
+          { path: '/#devices', text: 'Оборудование' },
+          { path: '/#projects', text: 'Проекты' },
+          { path: '/#contacts', text: 'Контакты' },
+        ].map(link => (
+          <HashLink key={link.path} {...link} />
+        ))}
+      </nav>
+      <Button className="-mr-6 rounded-none h-full px-10 btn-text">
+        Отправить заявку
+      </Button>
+    </header>
+  );
+}
+
+function HashLink({ path, text }: { path: string; text: string }) {
+  return (
+    <Link
+      className="border-l last:border-r border-[#3D425C] px-10 self-stretch text-[#9299BD] btn-text content-center hover:bg-[#3D425C]"
+      to={path}
+    >
+      {text}
+    </Link>
+  );
+}
@@ -0,0 +1,15 @@
+import { Outlet } from 'react-router-dom';
+import { Footer } from './Footer';
+import { Header } from './Header';
+
+export function Layout() {
+  return (
+    <>
+      <Header />
+      <main className="lg:px-6">
+        <Outlet />
+      </main>
+      <Footer />
+    </>
+  );
+}
@@ -0,0 +1,28 @@
+import { Showreel } from './Showreel';
+
+export function Motivation() {
+  return (
+    <div className="pt-20">
+      <div className="space-y-12 mb-6">
+        <h1 className="h1 font-medium">
+          Создаем интерактивные
+          <span className="text-gradient"> выставочные решения</span>
+        </h1>
+        <div className="flex gap-x-5">
+          {[
+            { solution: 'VR и AR', count: 12 },
+            { solution: 'Интерактивные приложения', count: 21 },
+            { solution: '3D макеты', count: 14 },
+          ].map(({ count, solution }, index) => (
+            <p key={solution} className="h4 font-medium flex gap-x-[7px]">
+              {solution}
+              <sup className="text-xs">{count}</sup>
+              {index !== 2 && <span>/</span>}
+            </p>
+          ))}
+        </div>
+      </div>
+      <Showreel />
+    </div>
+  );
+}
@@ -0,0 +1,77 @@
+import { motion } from 'framer-motion';
+import { Title } from './ui/Title';
+import { promotionFeatures } from '../consts/promotionFeatures';
+import { useRef } from 'react';
+import { useHover } from 'usehooks-ts';
+
+export function Promotion() {
+  return (
+    <div className="pt-[100px] space-y-20">
+      <Title className="max-w-[calc(1310/1600*100vw)]">
+        Повышаем количество посетителей на стенде,
+        <span className="text-gradient">
+          {' '}
+          помогаем продвигать ваш продукт и увеличиваем продажи на выставках
+        </span>
+      </Title>
+      <div>
+        {promotionFeatures.map((feature, index) => (
+          <Feature key={feature.title} number={index + 1} {...feature} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function Feature({
+  description,
+  images,
+  number,
+  title,
+}: {
+  number: number;
+  title: string;
+  description: string;
+  images: string[];
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const hovered = useHover(ref);
+
+  return (
+    <motion.div
+      ref={ref}
+      className="border-t border-x border-[#3D425C] last:border-b flex justify-between gap-x-16 items-stretch p-7 transition-all overflow-hidden"
+      initial={{ height: 196 }}
+      animate={hovered ? { height: 480 } : { height: 196 }}
+    >
+      <div className="max-w-[calc(540/1600*100vw)]">
+        <div className="flex flex-col justify-between h-full">
+          <p className="l-text text-[#52587A] font-medium">[0{number}]</p>
+          <p className="h3 font-medium">{title}</p>
+        </div>
+        <motion.p
+          className="h4 opacity-60 font-medium mt-6"
+          animate={hovered ? { opacity: 0.6 } : { opacity: 0 }}
+        >
+          {description}
+        </motion.p>
+      </div>
+      <div className="flex gap-x-2 justify-end self-start max-w-[calc(736/1600*100vw)]">
+        {images.map((image, index) => (
+          <motion.img
+            key={image}
+            src={image}
+            alt=""
+            className=""
+            initial={{ maxHeight: (140 / 1600) * window.innerWidth }}
+            animate={
+              index === 0 && hovered
+                ? { minHeight: (424 / 1600) * window.innerWidth }
+                : { maxHeight: (140 / 1600) * window.innerWidth }
+            }
+          />
+        ))}
+      </div>
+    </motion.div>
+  );
+}
@@ -0,0 +1,11 @@
+import { FullScreenIcon } from './icons/FullScreenIcon';
+
+export function Showreel() {
+  return (
+    <div className="aspect-[1552/616] [background:linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)),center_url(src/assets/motivation/Showreel.png)] flex justify-center items-center">
+      <button className="p-[22px] rounded-full border bg-[#14161F33]">
+        <FullScreenIcon />
+      </button>
+    </div>
+  );
+}
@@ -0,0 +1,20 @@
+export function FullScreenIcon() {
+  return (
+    <svg
+      width="28"
+      height="28"
+      viewBox="0 0 28 28"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6.31723 23.3335L11.3256 18.3251L9.67569 16.6752L4.66732 21.6836V16.6752L2.33398 19.0085V25.6668H8.99228L11.3256 23.3335H6.31723Z"
+        fill="white"
+      />
+      <path
+        d="M23.334 6.31675V11.3251L25.6673 8.99179V2.3335L19.009 2.3335L16.6757 4.66683H21.6841L16.6757 9.6752L18.3256 11.3251L23.334 6.31675Z"
+        fill="white"
+      />
+    </svg>
+  );
+}
@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+
+interface ButtonProps {
+  children: ReactNode;
+  icon?: JSX.Element;
+  color?: 'primary' | 'secondary';
+  width?: 'fit' | 'full';
+  disabled?: boolean;
+  className?: string;
+  onClick?: () => void;
+}
+
+export function Button({
+  children,
+  color = 'primary',
+  icon,
+  width = 'fit',
+  disabled = false,
+  className,
+  onClick,
+}: ButtonProps) {
+  return (
+    <button
+      disabled={disabled}
+      onClick={onClick}
+      className={`group relative px-6 py-2 rounded-full min-w-fit ${
+        (color === 'primary'
+          ? 'bg-gradient-to-r from-[#798FFF] to-[#D375FF]'
+          : '') ||
+        (color === 'secondary' ? 'outline outline-1 outline-[#3D425C]' : '')
+      } ${
+        icon ? 'pr-4' : ''
+      } flex gap-1 items-center overflow-hidden w-${width} ${className} justify-between`}
+    >
+      <span className="group-hover:opacity-10 opacity-0 bg-black transition-opacity absolute top-0 left-0 w-full h-full"></span>
+      <span className={'relative font-medium' + (icon ? '' : ' m-auto')}>
+        {children}
+      </span>
+      <span className="relative">{icon}</span>
+    </button>
+  );
+}
@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+
+export function Title({
+  className = '',
+  children,
+}: PropsWithChildren<{ className?: string }>) {
+  return <h1 className={'font-medium h2 ' + className}>{children}</h1>;
+}
@@ -0,0 +1,64 @@
+import { IPromotionFeature } from '../types/IPromotionFeature';
+
+export const promotionFeatures: IPromotionFeature[] = [
+  {
+    description:
+      'Ключевые преимущества жилого комплекса показаны на интерактивной модели. Для этого создается маршрут, демонстрирующий детали комплекса, важные для покупателя',
+    title: 'Интерактивные презентации',
+    images: [
+      'src/assets/promotion/presentations/1.png',
+      'src/assets/promotion/presentations/2.png',
+      'src/assets/promotion/presentations/3.png',
+    ],
+  },
+  {
+    description:
+      'Ключевые преимущества жилого комплекса показаны на интерактивной модели. Для этого создается маршрут, демонстрирующий детали комплекса, важные для покупателя',
+    title: '3D интерактивные презентации техники и оборудования',
+    images: [
+      'src/assets/promotion/devices/1.png',
+      'src/assets/promotion/devices/2.png',
+    ],
+  },
+  {
+    description:
+      'Ключевые преимущества жилого комплекса показаны на интерактивной модели. Для этого создается маршрут, демонстрирующий детали комплекса, важные для покупателя',
+    title: 'Интерактивный каталог продукции',
+    images: ['src/assets/promotion/catalog/1.png'],
+  },
+  {
+    description:
+      'Ключевые преимущества жилого комплекса показаны на интерактивной модели. Для этого создается маршрут, демонстрирующий детали комплекса, важные для покупателя',
+    title: '3D интерактивные макеты',
+    images: [
+      'src/assets/promotion/templates/1.png',
+      'src/assets/promotion/templates/2.png',
+    ],
+  },
+  {
+    description:
+      'Ключевые преимущества жилого комплекса показаны на интерактивной модели. Для этого создается маршрут, демонстрирующий детали комплекса, важные для покупателя',
+    title: 'Приложения с виртуальной и дополненной реальностью',
+    images: [
+      'src/assets/promotion/arvr/1.png',
+      'src/assets/promotion/arvr/2.png',
+      'src/assets/promotion/arvr/3.png',
+    ],
+  },
+  {
+    description:
+      'Ключевые преимущества жилого комплекса показаны на интерактивной модели. Для этого создается маршрут, демонстрирующий детали комплекса, важные для покупателя',
+    title: 'Виртуальные выставки и метавселенные',
+    images: ['src/assets/promotion/exhibitions/1.png'],
+  },
+  {
+    description:
+      'Ключевые преимущества жилого комплекса показаны на интерактивной модели. Для этого создается маршрут, демонстрирующий детали комплекса, важные для покупателя',
+    title: 'Мобильные приложения',
+    images: [
+      'src/assets/promotion/mobiles/1.png',
+      'src/assets/promotion/mobiles/2.png',
+      'src/assets/promotion/mobiles/3.png',
+    ],
+  },
+];
@@ -0,0 +1,20 @@
+import { ReactNode, useEffect, useRef } from 'react';
+
+interface Props {
+  element: ReactNode;
+  className: string;
+}
+
+export function ClassNameWrapper({ element, className }: Props) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!className.split(' ').length) return;
+
+    ref.current?.children
+      .item(0)
+      ?.classList.add(...className.split(' ').filter(Boolean));
+  }, [className, element]);
+
+  return <div ref={ref}>{element}</div>;
+}
@@ -0,0 +1,14 @@
+import { useLayoutEffect, useState } from 'react';
+
+export function useWindowWidth() {
+  const [width, setWidth] = useState(window.innerWidth);
+
+  useLayoutEffect(() => {
+    const updateWidth = () => setWidth(window.innerWidth);
+    window.addEventListener('resize', updateWidth);
+    updateWidth();
+    return () => window.removeEventListener('resize', updateWidth);
+  }, []);
+
+  return width;
+}
@@ -0,0 +1,86 @@
+@import url('/fonts/TTHovesProAll/stylesheet.css');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  font-family: 'TTHovesPro';
+  color: #fff;
+  background-color: #14161f;
+}
+
+@layer components {
+  .h1 {
+    @apply -tracking-[.02em] text-[clamp(36px,36px+(100vw-360px)/1240*76,112px)] leading-[clamp(36px,36px+(100vw-360px)/1240*50.4,86.4px)];
+  }
+  .h2 {
+    @apply -tracking-[.02em] text-[clamp(24px,24px+(100vw-360px)/1240*48,72px)] leading-none;
+  }
+
+  .h3 {
+    @apply text-[clamp(18px,18px+(100vw-360px)/1240*22,40px)] leading-[clamp(22px,22px+(100vw-360px)/1240*6.8,28.8px)];
+  }
+
+  .h4 {
+    @apply text-[clamp(14px,14px+(100vw-360px)/1240*6,20px)] leading-[clamp(17.6px,17.6px+(100vw-360px)/1240*6.4,24px)];
+  }
+
+  /* .accent {
+    @apply -tracking-[.02em] md:text-[clamp(28px,28px+(100vw-768px)/832*4,32px)] text-[clamp(20px,20px+(100vw-360px)/408*8,28px)] md:leading-[clamp(28px,28px+(100vw-768px)/832*7.2,35.2px)] leading-[clamp(20px,20px+(100vw-360px)/408*8,28px)];
+  } */
+
+  .l-text {
+    @apply text-[clamp(14px,14px+(100vw-360px)/1240*6,20px)] leading-[clamp(21.6px,21.6px+(100vw-360px)/1240*5.4,27px)];
+  }
+
+  .m-text {
+    @apply text-[clamp(12px,12px+(100vw-360px)/1240*4,16px)] leading-[clamp(19.6px,19.6px+(100vw-360px)/1240*2.4,22.4px)];
+  }
+
+  /* .l-caption {
+    @apply text-[clamp(14px,14px+(100vw-360px)/1240*2,16px)] leading-none;
+  }
+
+  .m-caption {
+    @apply text-[clamp(10px,10px+(100vw-360px)/1240*2,12px)] leading-[clamp(12px,12px+(100vw-360px)/1240*2.4,14.4px)];
+  } */
+
+  .btn-text {
+    @apply -tracking-[.01em] text-[clamp(12px,12px+(100vw-360px)/1240*8,20px)] leading-none;
+  }
+
+  .link-text {
+    @apply text-[clamp(12px,12px+(100vw-360px)/1240*4,16px)] tracking-[.02em];
+  }
+
+  .descriptor {
+    @apply text-[clamp(14px,14px+(100vw-360px)/1240*2,16px)] leading-[clamp(15.6px,15.6px+(100vw-360px)/1240*2.6,18.2px)];
+  }
+
+  /* .feedback-field:focus ~ .feedback-placeholder {
+    top: 0;
+  }
+
+  .feedback-field:focus ~ .feedback-placeholder-2 {
+    opacity: 0;
+  }
+
+  .feedback-field:valid ~ .feedback-placeholder {
+    top: 0;
+  }
+
+  .feedback-field:valid ~ .feedback-placeholder-2 {
+    opacity: 0;
+  }
+
+  .feedback-field::placeholder {
+    @apply lg:text-base text-sm font-semibold text-[#77787d];
+  } */
+
+  .text-gradient {
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    @apply bg-gradient-to-r from-[#798FFF] to-[#D375FF] bg-clip-text;
+  }
+}
@@ -0,0 +1,22 @@
+import { createRoot } from 'react-dom/client';
+import './index.css';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { Layout } from './Layout';
+import { MainPage } from './pages/MainPage';
+
+createRoot(document.getElementById('root')!).render(
+  <RouterProvider
+    router={createBrowserRouter([
+      {
+        path: '/',
+        Component: Layout,
+        children: [
+          {
+            index: true,
+            Component: MainPage,
+          },
+        ],
+      },
+    ])}
+  />,
+);
@@ -0,0 +1,11 @@
+import { Motivation } from '../components/Motivation';
+import { Promotion } from '../components/Promotion';
+
+export function MainPage() {
+  return (
+    <>
+      <Motivation />
+      <Promotion />
+    </>
+  );
+}
@@ -0,0 +1,5 @@
+export interface IPromotionFeature {
+  title: string;
+  description: string;
+  images: string[];
+}
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": 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()],
+})