Docker и хостинг

router
ts @types. React hooks
2025-06-12 16:02:55 +03:00 · 2025-05-17 13:19:49 +03:00 · 2025-04-27 19:56:23 +03:00 · 2025-04-26 12:18:26 +03:00 · 2025-04-26 11:18:10 +03:00 · 2025-04-14 21:14:49 +03:00
36 changed files with 18073 additions and 153 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,4 @@
+Dockerfile
+eslint.config.mjs
+.prettierrc
+node_modules
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 100
+}
--- a/@types/assets/index.d.ts
+++ b/@types/assets/index.d.ts
@@ -0,0 +1,10 @@
+declare module '*.png' {
+  const path: string;
+  export default path;
+}
+
+declare module '*.svg' {
+  const path: string;
+  export default path;
+}
+
--- a/16
+++ b/16
@@ -0,0 +1,16 @@
+FROM node:23.11.1-alpine3.22 as build
+
+WORKDIR ~/app
+
+COPY ./ ./
+RUN npm i
+
+COPY src tsconfig.json webpack.config.js @types ./
+
+RUN npm run build
+
+FROM nginx:latest
+
+COPY --from=build ~/app/dist /usr/share/nginx/html
+
+EXPOSE 8080:80
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -0,0 +1,28 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+import pluginReact from 'eslint-plugin-react';
+import { defineConfig } from 'eslint/config';
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
+
+export default defineConfig([
+  {
+    files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'],
+    plugins: { js },
+    extends: ['js/recommended'],
+  },
+  {
+    files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'],
+    languageOptions: { globals: globals.browser },
+  },
+  tseslint.configs.recommended,
+  pluginReact.configs.flat.recommended,
+  {
+    files: ['webpack.config.js'],
+    languageOptions: { globals: globals.node },
+    rules: {
+      '@typescript-eslint/no-require-imports': 'off',
+    },
+  },
+  eslintPluginPrettierRecommended,
+]);
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -3,21 +3,52 @@
  "version": "1.0.0",
  "main": "src/index.ts",
  "scripts": {
+    "start": "webpack serve --mode=development",
    "build": "webpack --mode=development",
-    "dev": "webpack --mode=development --watch"
+    "dev": "webpack --mode=development --watch",
+    "lint": "eslint"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
+    "@reduxjs/toolkit": "^2.8.2",
+    "fork-ts-checker-webpack-plugin": "^9.1.0",
    "handlebars-loader": "^1.7.3",
+    "install": "^0.13.0",
+    "npm": "^11.4.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-hook-form": "^7.56.4",
+    "react-router": "^7.6.0",
    "webpack": "^5.98.0",
    "webpack-cli": "^6.0.1"
  },
  "devDependencies": {
+    "@babel/core": "^7.26.10",
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.27.0",
+    "@eslint/js": "^9.25.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.16",
+    "@types/react": "^19.1.1",
+    "@types/react-dom": "^19.1.2",
+    "babel-loader": "^10.0.0",
    "copy-webpack-plugin": "^13.0.0",
+    "css-loader": "^7.1.2",
+    "eslint": "^9.25.1",
+    "eslint-config-prettier": "^10.1.2",
+    "eslint-plugin-prettier": "^5.2.6",
+    "eslint-plugin-react": "^7.37.5",
+    "firebase-tools": "^14.6.0",
+    "globals": "^16.0.0",
    "html-webpack-plugin": "^5.6.3",
+    "prettier": "3.5.3",
+    "react-refresh": "^0.17.0",
+    "style-loader": "^4.0.0",
    "ts-loader": "^9.5.2",
-    "typescript": "^5.8.2"
+    "typescript": "^5.8.2",
+    "typescript-eslint": "^8.31.0",
+    "webpack-dev-server": "^5.2.1"
  }
 }
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router';
+import HomePage from './pages/home';
+import CreatePage from './pages/create';
+import { routes } from './routes';
+
+
+const App = () => {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path={routes.home} element={<HomePage />} />
+        <Route path={routes.create} element={<CreatePage />} />
+      </Routes>
+    </BrowserRouter>
+  );
+};
+
+export default App;
--- a/src/components/carusel.ts
+++ b/src/components/carusel.ts
@@ -1,19 +1,25 @@
-import './logger'
+import './logger';

-const moveContainer = (container: HTMLElement, btnLeft: HTMLButtonElement, btnRight: HTMLButtonElement, prevOffset: number, offset: number) => {
-    const containerWidth = container.scrollWidth
+const moveContainer = (
+  container: HTMLElement,
+  btnLeft: HTMLButtonElement,
+  btnRight: HTMLButtonElement,
+  prevOffset: number,
+  offset: number
+) => {
+  const containerWidth = container.scrollWidth;

-    let newOffset = prevOffset + offset
-    const minOffset = (containerWidth - document.body.clientWidth) * -1
-    const maxOffset = 0;
-    newOffset = Math.min(Math.max(minOffset, newOffset), maxOffset);
-    container.style.transform = `translateX(${newOffset}px)`
+  let newOffset = prevOffset + offset;
+  const minOffset = (containerWidth - document.body.clientWidth) * -1;
+  const maxOffset = 0;
+  newOffset = Math.min(Math.max(minOffset, newOffset), maxOffset);
+  container.style.transform = `translateX(${newOffset}px)`;

-    btnLeft.disabled = newOffset >= maxOffset;
-    btnRight.disabled = newOffset <= minOffset;
+  btnLeft.disabled = newOffset >= maxOffset;
+  btnRight.disabled = newOffset <= minOffset;

-    return newOffset;
-}
+  return newOffset;
+};

 /**
 * Инициализация карусели
@@ -21,17 +27,38 @@ const moveContainer = (container: HTMLElement, btnLeft: HTMLButtonElement, btnRi
 * @param btnLeft
 * @param btnRight
 */
-export function initCarusel(container: HTMLElement, btnLeft: HTMLButtonElement, btnRight: HTMLButtonElement) {
-    let containerOffset = 0;
+export function initCarusel(
+  container: HTMLElement,
+  btnLeft: HTMLButtonElement,
+  btnRight: HTMLButtonElement
+) {
+  let containerOffset = 0;

-    containerOffset = moveContainer(container, btnLeft, btnRight, containerOffset, 0)
+  containerOffset = moveContainer(
+    container,
+    btnLeft,
+    btnRight,
+    containerOffset,
+    0
+  );

-    btnLeft.addEventListener('click', () => {
-        containerOffset = moveContainer(container, btnLeft, btnRight, containerOffset, 285)
-    })
+  btnLeft.addEventListener('click', () => {
+    containerOffset = moveContainer(
+      container,
+      btnLeft,
+      btnRight,
+      containerOffset,
+      285
+    );
+  });

-    btnRight.addEventListener('click', () => {
-        containerOffset = moveContainer(container, btnLeft, btnRight, containerOffset, -285)
-    })
+  btnRight.addEventListener('click', () => {
+    containerOffset = moveContainer(
+      container,
+      btnLeft,
+      btnRight,
+      containerOffset,
+      -285
+    );
+  });
 }
-
--- a/src/components/logger.ts
+++ b/src/components/logger.ts
@@ -1 +0,0 @@
-console.log('hello world')
--- a/src/creators.hbs
+++ b/src/creators.hbs
@@ -0,0 +1,6 @@
+{{#> views/layout}}
+    {{> views/header }}
+    <main>
+        Creators
+    </main>
+{{/views/layout}}
--- a/src/creators.html
+++ b/src/creators.html
@@ -1,33 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport"
-          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
-
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
-
-    <link rel="stylesheet" href="../dist/style.css">
-</head>
-<body>
-    <header class="header container">
-        <a href="../dist/index.html"><img class="logo" src="images/logo.svg" alt=""></a>
-        <nav>
-            <ul class="nav-list">
-                <li><a href="discover.html">Discover</a></li>
-                <li><a href="creators.html">creators</a></li>
-                <li><a href="creators.html">Sell</a></li>
-                <li><a href="creators.html">stats</a></li>
-            </ul>
-        </nav>
-        <button class="button">Connect Wallet</button>
-    </header>
-    <main>
-        Creators
-    </main>
-</body>
-</html>
--- a/src/discover.hbs
+++ b/src/discover.hbs
@@ -0,0 +1,6 @@
+{{#> views/layout}}
+    {{> views/header }}
+    <main>
+        Discover
+    </main>
+{{/views/layout}}
--- a/src/discover.html
+++ b/src/discover.html
@@ -1,33 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport"
-          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
-
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
-
-    <link rel="stylesheet" href="../dist/style.css">
-</head>
-<body>
-    <header class="header container">
-        <a href="../dist/index.html"><img class="logo" src="images/logo.svg" alt=""></a>
-        <nav>
-            <ul class="nav-list">
-                <li><a href="discover.html">Discover</a></li>
-                <li><a href="creators.html">creators</a></li>
-                <li><a href="creators.html">Sell</a></li>
-                <li><a href="creators.html">stats</a></li>
-            </ul>
-        </nav>
-        <button class="button">Connect Wallet</button>
-    </header>
-    <main>
-        Discover
-    </main>
-</body>
-</html>
--- a/src/images/img.png
+++ b/src/images/img.png
--- a/src/images/img_1.png
+++ b/src/images/img_1.png
--- a/src/index.html
+++ b/src/index.html
@@ -13,12 +13,8 @@
          rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900"
          rel="stylesheet">
-    <link rel="stylesheet" href="style.css">
 </head>
 <body>
-    {{> views/header }}
-<main>
-    {{> views/carusel }}
-</main>
+    <div id="root"></div>
 </body>
 </html>
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,8 +0,0 @@
-import { initCarusel } from './components/carusel'
-
-const container = document.querySelector<HTMLElement>('.nft-card-container')
-const btnLeft = document.querySelector<HTMLButtonElement>('.top-nft .btn-left')
-const btnRight = document.querySelector<HTMLButtonElement>('.top-nft .btn-right')
-if (container && btnLeft && btnRight) {
-    initCarusel(container, btnLeft, btnRight)
-}
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -0,0 +1,21 @@
+import { createRoot } from 'react-dom/client';
+import React from 'react';
+import './style.css';
+import HomePage from './pages/home';
+import App from './app';
+
+const rootHtmlElement = document.getElementById('root');
+if (rootHtmlElement) {
+  console.log('Запуск react');
+  const root = createRoot(rootHtmlElement);
+  root.render(<App />);
+}
+
+// import { initCarusel } from './components/carusel'
+//
+// const container = document.querySelector<HTMLElement>('.nft-card-container')
+// const btnLeft = document.querySelector<HTMLButtonElement>('.top-nft .btn-left')
+// const btnRight = document.querySelector<HTMLButtonElement>('.top-nft .btn-right')
+// if (container && btnLeft && btnRight) {
+//     initCarusel(container, btnLeft, btnRight)
+// }
--- a/src/pages/create/index.tsx
+++ b/src/pages/create/index.tsx
@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import Header from '../../widgets/header';
+import { useForm, SubmitHandler } from 'react-hook-form';
+
+const CreatePage = (): React.ReactElement | string => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    mode: 'onBlur',
+  });
+  const onSubmit = (data: unknown) => console.log(data);
+
+  return (
+    <>
+      <Header />
+      <main>
+        <h1>Create</h1>
+        <form
+          style={{ display: 'flex', flexDirection: 'column' }}
+          onSubmit={handleSubmit(onSubmit, (errors) => {
+            console.log('valid form', errors);
+          })}
+        >
+          <label>
+            Name
+            <input
+              type="text"
+              placeholder="DD.MM.YYYY"
+              {...register('name', {
+                required: 'Поле обязательно для заполнения',
+              })}
+            />
+            {errors.name && <span style={{ color: 'red' }}>{errors.name.message?.toString()}</span>}
+          </label>
+          <label>
+            description
+            <input type="text" name={'description'} />
+          </label>
+          <label>
+            Age
+            <input type="number" name={'age'} />
+          </label>
+          <button>Submit</button>
+        </form>
+      </main>
+    </>
+  );
+};
+
+export default CreatePage;
--- a/src/pages/home/banner/components/arrow.tsx
+++ b/src/pages/home/banner/components/arrow.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+const Arrow = () => {
+  return (
+    <svg
+      className="cub1-arrow"
+      width="131"
+      height="136"
+      viewBox="0 0 131 136"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15.6507 43.2949C32.4339 30.7255 51.9743 23.0115 72.683 28.6293C91.3749 33.7001 103.143 49.6308 90.5396 69.3323C84.5735 78.6586 71.8706 85.1866 61.8852 79.874C50.7606 73.9554 59.5288 59.017 66.6505 54.7089C83.2839 44.6468 106.696 49.3237 118.212 68.8676C131.849 92.0121 108.785 103.532 108.769 103.344"
+        stroke="black"
+        strokeWidth="3.37884"
+        strokeMiterlimit="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M19.2682 18.3819C19.8774 20.8064 19.5256 23.2335 19.2862 25.677C18.5006 33.7006 15.3552 42.0307 9.71151 47.2931C17.1379 44.0369 27.7921 42.6188 34.5374 48.3345"
+        stroke="black"
+        strokeWidth="3.37884"
+        strokeMiterlimit="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default Arrow;
--- a/src/pages/home/banner/components/cubs/cubs.tsx
+++ b/src/pages/home/banner/components/cubs/cubs.tsx
@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from 'react';
+import Arrow from '../arrow';
+import LrButton from '../lr-button/lrButton';
+import './styles.css';
+import FirstImg from '../../../../../images/img.png';
+import SecondImg from '../../../../../images/img_1.png';
+
+enum CubItem {
+  FIRST = 0,
+  SECOND = 1,
+}
+
+const getBackGround = (item: CubItem) => {
+  return item === CubItem.FIRST
+    ? `center / cover no-repeat url(${FirstImg}), #F8F8F8`
+    : `center / cover no-repeat url(${SecondImg}), #F8F8F8`;
+};
+
+let prevTime = new Date().getTime();
+
+const Cubs = () => {
+  const [curIndex, setCurIndex] = useState<CubItem>(CubItem.FIRST);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const newTime = new Date().getTime();
+      prevTime = newTime;
+      setCurIndex((prevIndex) => {
+        return prevIndex === CubItem.FIRST ? CubItem.SECOND : CubItem.FIRST;
+      });
+    }, 3000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [curIndex]);
+
+  const setFirst = () => setCurIndex(CubItem.FIRST);
+  const setSecond = () => setCurIndex(CubItem.SECOND);
+
+  return (
+    <div className="hero-cubs">
+      <div className="hero-cub1" style={{ background: getBackGround(curIndex) }}>
+        <Arrow />
+        <div
+          className="hero-cub2"
+          style={{
+            background: getBackGround(curIndex === CubItem.FIRST ? CubItem.SECOND : CubItem.FIRST),
+          }}
+        ></div>
+      </div>
+      <LrButton
+        onLeftClick={curIndex === CubItem.SECOND ? setFirst : undefined}
+        onRightClick={curIndex === CubItem.FIRST ? setSecond : undefined}
+      />
+    </div>
+  );
+};
+
+export default Cubs;
--- a/src/pages/home/banner/components/cubs/styles.css
+++ b/src/pages/home/banner/components/cubs/styles.css
@@ -0,0 +1,52 @@
+.hero-cubs {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-self: start;
+}
+
+.hero-cubs .lr-button {
+    margin-top: 71px;
+}
+
+.hero-cub1 {
+    position: relative;
+    width: 391px;
+    height: 394px;
+    border-radius: 25px;
+    background: center / cover no-repeat url('../../../../../images/img.png'), #F8F8F8;
+}
+.hero-cub1::after {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    border-radius: 25px;
+    background: center / cover no-repeat url('../../../../../images/img.png'), #F8F8F8;
+    transform: translateY(25px);
+
+    filter: blur(83.7px);
+}
+
+.hero-cub2 {
+    position: absolute;
+    top: 181px;
+    left: calc(100% + 38px);
+    width: 320px;
+    height: 322px;
+    border-radius: 25px;
+    background: center / cover no-repeat url('../../../../../images/img_1.png'), #F8F8F8;
+}
+.hero-cub2::after {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    border-radius: 25px;
+    background: center / cover no-repeat url('../../../../../images/img_1.png'), #F8F8F8;
+    transform: translateY(25px);
+
+    filter: blur(83.7px);
+}
--- a/src/pages/home/banner/components/lr-button/lrButton.tsx
+++ b/src/pages/home/banner/components/lr-button/lrButton.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import './styles.css';
+
+interface LrButtonProps {
+  /**
+   * События нажатия на левую кнопку
+   */
+  onLeftClick?: () => void;
+  onRightClick?: () => void;
+}
+
+const getColor = (enabled?: boolean) => (enabled ? '#23262F' : '#929292');
+
+const LrButton = ({ onLeftClick, onRightClick }: LrButtonProps) => {
+  return (
+    <div className="lr-button">
+      <button className="lr-button-left" onClick={onLeftClick}>
+        <svg
+          width="27"
+          height="27"
+          viewBox="0 0 27 27"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M11.2397 8.39036C10.8023 7.98657 10.1203 8.01384 9.71654 8.45128L6.23402 12.224C5.85287 12.6369 5.85287 13.2733 6.23401 13.6862L9.71653 17.459C10.1203 17.8965 10.8023 17.9237 11.2397 17.5199C11.6772 17.1161 11.7045 16.4342 11.3007 15.9967L9.48802 14.033L19.9611 14.033C20.5565 14.033 21.0391 13.5504 21.0391 12.9551C21.0391 12.3598 20.5565 11.8772 19.9611 11.8772L9.48805 11.8772L11.3007 9.91356C11.7044 9.47612 11.6772 8.79416 11.2397 8.39036Z"
+            fill={getColor(Boolean(onLeftClick))}
+          />
+        </svg>
+      </button>
+      <div className="lr-button-delimiter"></div>
+      <button className="lr-button-right" onClick={onRightClick}>
+        <svg
+          width="27"
+          height="27"
+          viewBox="0 0 27 27"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M15.7603 8.39036C16.1977 7.98657 16.8797 8.01384 17.2835 8.45128L20.766 12.224C21.1471 12.6369 21.1471 13.2733 20.766 13.6862L17.2835 17.459C16.8797 17.8965 16.1977 17.9237 15.7603 17.5199C15.3228 17.1161 15.2955 16.4342 15.6993 15.9967L17.512 14.033L7.03886 14.033C6.44354 14.033 5.96094 13.5504 5.96094 12.9551C5.96094 12.3598 6.44354 11.8772 7.03886 11.8772L17.5119 11.8772L15.6993 9.91356C15.2956 9.47612 15.3228 8.79416 15.7603 8.39036Z"
+            fill={getColor(Boolean(onRightClick))}
+          />
+        </svg>
+      </button>
+    </div>
+  );
+};
+
+export default LrButton;
--- a/src/pages/home/banner/components/lr-button/styles.css
+++ b/src/pages/home/banner/components/lr-button/styles.css
@@ -0,0 +1,20 @@
+.lr-button {
+    width: 166px;
+    height: 69px;
+    box-shadow: 0px 43.12px 34.49px -25.87px #0F0F0F1F;
+    display: flex;
+    align-items: center;
+    background: #FCFCFD;
+    border-radius: 17.25px;
+}
+.lr-button button {
+    width: 100%;
+    border: none;
+    background: none;
+}
+.lr-button-delimiter {
+    width: 2px;
+    height: 25px;
+    background: #E6E8EC;
+    flex-shrink: 0;
+}
--- a/src/pages/home/banner/dots.tsx
+++ b/src/pages/home/banner/dots.tsx
@@ -0,0 +1,171 @@
+import React from 'react';
+
+export const dots = (
+  <svg
+    className="hero-dots"
+    width="120"
+    height="400"
+    viewBox="0 0 120 400"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g opacity="0.5">
+      <rect y="207.423" width="2.83607" height="2.84073" fill="black" />
+      <rect x="18.9062" y="207.423" width="2.83607" height="2.84073" fill="black" />
+      <rect x="37.8145" y="207.423" width="2.83607" height="2.84073" fill="black" />
+      <rect x="56.7217" y="207.423" width="2.83607" height="2.84073" fill="black" />
+      <rect x="75.6279" y="207.423" width="2.83607" height="2.84073" fill="black" />
+      <rect x="94.5361" y="207.423" width="2.83607" height="2.84073" fill="black" />
+      <rect x="113.443" y="207.423" width="2.83607" height="2.84073" fill="black" />
+      <rect y="226.36" width="2.83607" height="2.84073" fill="black" />
+      <rect x="18.9062" y="226.36" width="2.83607" height="2.84073" fill="black" />
+      <rect x="37.8145" y="226.36" width="2.83607" height="2.84073" fill="black" />
+      <rect x="56.7217" y="226.36" width="2.83607" height="2.84073" fill="black" />
+      <rect x="75.6279" y="226.36" width="2.83607" height="2.84073" fill="black" />
+      <rect x="94.5361" y="226.36" width="2.83607" height="2.84073" fill="black" />
+      <rect x="113.443" y="226.36" width="2.83607" height="2.84073" fill="black" />
+      <rect y="245.3" width="2.83607" height="2.84073" fill="black" />
+      <rect x="18.9062" y="245.3" width="2.83607" height="2.84073" fill="black" />
+      <rect x="37.8145" y="245.3" width="2.83607" height="2.84073" fill="black" />
+      <rect x="56.7217" y="245.3" width="2.83607" height="2.84073" fill="black" />
+      <rect x="75.6279" y="245.3" width="2.83607" height="2.84073" fill="black" />
+      <rect x="94.5361" y="245.3" width="2.83607" height="2.84073" fill="black" />
+      <rect x="113.443" y="245.3" width="2.83607" height="2.84073" fill="black" />
+      <rect y="264.238" width="2.83607" height="2.84073" fill="black" />
+      <rect x="18.9062" y="264.238" width="2.83607" height="2.84073" fill="black" />
+      <rect x="37.8145" y="264.238" width="2.83607" height="2.84073" fill="black" />
+      <rect x="56.7217" y="264.238" width="2.83607" height="2.84073" fill="black" />
+      <rect x="75.6279" y="264.238" width="2.83607" height="2.84073" fill="black" />
+      <rect x="94.5361" y="264.238" width="2.83607" height="2.84073" fill="black" />
+      <rect x="113.443" y="264.238" width="2.83607" height="2.84073" fill="black" />
+      <rect y="283.176" width="2.83607" height="2.84073" fill="black" />
+      <rect x="18.9062" y="283.176" width="2.83607" height="2.84073" fill="black" />
+      <rect x="37.8145" y="283.176" width="2.83607" height="2.84073" fill="black" />
+      <rect x="56.7217" y="283.176" width="2.83607" height="2.84073" fill="black" />
+      <rect x="75.6279" y="283.176" width="2.83607" height="2.84073" fill="black" />
+      <rect x="94.5361" y="283.176" width="2.83607" height="2.84073" fill="black" />
+      <rect x="113.443" y="283.176" width="2.83607" height="2.84073" fill="black" />
+      <rect y="302.114" width="2.83607" height="2.84073" fill="black" />
+      <rect x="18.9062" y="302.114" width="2.83607" height="2.84073" fill="black" />
+      <rect x="37.8145" y="302.114" width="2.83607" height="2.84073" fill="black" />
+      <rect x="56.7217" y="302.114" width="2.83607" height="2.84073" fill="black" />
+      <rect x="75.6279" y="302.114" width="2.83607" height="2.84073" fill="black" />
+      <rect x="94.5361" y="302.114" width="2.83607" height="2.84073" fill="black" />
+      <rect x="113.443" y="302.114" width="2.83607" height="2.84073" fill="black" />
+      <rect y="321.052" width="2.83607" height="2.84073" fill="black" />
+      <rect x="18.9062" y="321.052" width="2.83607" height="2.84073" fill="black" />
+      <rect x="37.8145" y="321.052" width="2.83607" height="2.84073" fill="black" />
+      <rect x="56.7217" y="321.052" width="2.83607" height="2.84073" fill="black" />
+      <rect x="75.6279" y="321.052" width="2.83607" height="2.84073" fill="black" />
+      <rect x="94.5361" y="321.052" width="2.83607" height="2.84073" fill="black" />
+      <rect x="113.443" y="321.052" width="2.83607" height="2.84073" fill="black" />
+      <rect y="339.989" width="2.83607" height="2.84073" fill="black" />
+      <rect x="18.9062" y="339.991" width="2.83607" height="2.84073" fill="black" />
+      <rect x="37.8145" y="339.991" width="2.83607" height="2.84073" fill="black" />
+      <rect x="56.7217" y="339.991" width="2.83607" height="2.84073" fill="black" />
+      <rect x="75.6279" y="339.991" width="2.83607" height="2.84073" fill="black" />
+      <rect x="94.5361" y="339.991" width="2.83607" height="2.84073" fill="black" />
+      <rect x="113.443" y="339.991" width="2.83607" height="2.84073" fill="black" />
+      <rect y="358.929" width="2.83607" height="2.84073" fill="black" />
+      <rect x="18.9062" y="358.929" width="2.83607" height="2.84073" fill="black" />
+      <rect x="37.8145" y="358.929" width="2.83607" height="2.84073" fill="black" />
+      <rect x="56.7217" y="358.929" width="2.83607" height="2.84073" fill="black" />
+      <rect x="75.6279" y="358.929" width="2.83607" height="2.84073" fill="black" />
+      <rect x="94.5361" y="358.929" width="2.83607" height="2.84073" fill="black" />
+      <rect x="113.443" y="358.929" width="2.83607" height="2.84073" fill="black" />
+      <rect y="377.866" width="2.83607" height="2.84073" fill="black" />
+      <rect x="18.9062" y="377.866" width="2.83607" height="2.84073" fill="black" />
+      <rect x="37.8145" y="377.866" width="2.83607" height="2.84073" fill="black" />
+      <rect x="56.7217" y="377.866" width="2.83607" height="2.84073" fill="black" />
+      <rect x="75.6279" y="377.866" width="2.83607" height="2.84073" fill="black" />
+      <rect x="94.5361" y="377.866" width="2.83607" height="2.84073" fill="black" />
+      <rect x="113.443" y="377.866" width="2.83607" height="2.84073" fill="black" />
+      <rect y="396.805" width="2.83607" height="2.84073" fill="black" />
+      <rect x="18.9062" y="396.806" width="2.83607" height="2.84073" fill="black" />
+      <rect x="37.8145" y="396.806" width="2.83607" height="2.84073" fill="black" />
+      <rect x="56.7217" y="396.806" width="2.83607" height="2.84073" fill="black" />
+      <rect x="75.6279" y="396.806" width="2.83607" height="2.84073" fill="black" />
+      <rect x="94.5361" y="396.806" width="2.83607" height="2.84073" fill="black" />
+      <rect x="113.443" y="396.806" width="2.83607" height="2.84073" fill="black" />
+    </g>
+    <g opacity="0.5">
+      <rect width="2.83607" height="2.84073" fill="black" />
+      <rect x="18.9062" width="2.83607" height="2.84073" fill="black" />
+      <rect x="37.8145" width="2.83607" height="2.84073" fill="black" />
+      <rect x="56.7217" width="2.83607" height="2.84073" fill="black" />
+      <rect x="75.6279" width="2.83607" height="2.84073" fill="black" />
+      <rect x="94.5361" width="2.83607" height="2.84073" fill="black" />
+      <rect x="113.443" width="2.83607" height="2.84073" fill="black" />
+      <rect y="18.9375" width="2.83607" height="2.84073" fill="black" />
+      <rect x="18.9062" y="18.9375" width="2.83607" height="2.84073" fill="black" />
+      <rect x="37.8145" y="18.9375" width="2.83607" height="2.84073" fill="black" />
+      <rect x="56.7217" y="18.9375" width="2.83607" height="2.84073" fill="black" />
+      <rect x="75.6279" y="18.9375" width="2.83607" height="2.84073" fill="black" />
+      <rect x="94.5361" y="18.9375" width="2.83607" height="2.84073" fill="black" />
+      <rect x="113.443" y="18.9375" width="2.83607" height="2.84073" fill="black" />
+      <rect y="37.877" width="2.83607" height="2.84073" fill="black" />
+      <rect x="18.9062" y="37.877" width="2.83607" height="2.84073" fill="black" />
+      <rect x="37.8145" y="37.877" width="2.83607" height="2.84073" fill="black" />
+      <rect x="56.7217" y="37.877" width="2.83607" height="2.84073" fill="black" />
+      <rect x="75.6279" y="37.877" width="2.83607" height="2.84073" fill="black" />
+      <rect x="94.5361" y="37.877" width="2.83607" height="2.84073" fill="black" />
+      <rect x="113.443" y="37.877" width="2.83607" height="2.84073" fill="black" />
+      <rect y="56.8154" width="2.83607" height="2.84073" fill="black" />
+      <rect x="18.9062" y="56.8154" width="2.83607" height="2.84073" fill="black" />
+      <rect x="37.8145" y="56.8154" width="2.83607" height="2.84073" fill="black" />
+      <rect x="56.7217" y="56.8154" width="2.83607" height="2.84073" fill="black" />
+      <rect x="75.6279" y="56.8154" width="2.83607" height="2.84073" fill="black" />
+      <rect x="94.5361" y="56.8154" width="2.83607" height="2.84073" fill="black" />
+      <rect x="113.443" y="56.8154" width="2.83607" height="2.84073" fill="black" />
+      <rect y="75.7529" width="2.83607" height="2.84073" fill="black" />
+      <rect x="18.9062" y="75.7529" width="2.83607" height="2.84073" fill="black" />
+      <rect x="37.8145" y="75.7529" width="2.83607" height="2.84073" fill="black" />
+      <rect x="56.7217" y="75.7529" width="2.83607" height="2.84073" fill="black" />
+      <rect x="75.6279" y="75.7529" width="2.83607" height="2.84073" fill="black" />
+      <rect x="94.5361" y="75.7529" width="2.83607" height="2.84073" fill="black" />
+      <rect x="113.443" y="75.7529" width="2.83607" height="2.84073" fill="black" />
+      <rect y="94.6914" width="2.83607" height="2.84073" fill="black" />
+      <rect x="18.9062" y="94.6914" width="2.83607" height="2.84073" fill="black" />
+      <rect x="37.8145" y="94.6914" width="2.83607" height="2.84073" fill="black" />
+      <rect x="56.7217" y="94.6914" width="2.83607" height="2.84073" fill="black" />
+      <rect x="75.6279" y="94.6914" width="2.83607" height="2.84073" fill="black" />
+      <rect x="94.5361" y="94.6914" width="2.83607" height="2.84073" fill="black" />
+      <rect x="113.443" y="94.6914" width="2.83607" height="2.84073" fill="black" />
+      <rect y="113.629" width="2.83607" height="2.84073" fill="black" />
+      <rect x="18.9062" y="113.629" width="2.83607" height="2.84073" fill="black" />
+      <rect x="37.8145" y="113.629" width="2.83607" height="2.84073" fill="black" />
+      <rect x="56.7217" y="113.629" width="2.83607" height="2.84073" fill="black" />
+      <rect x="75.6279" y="113.629" width="2.83607" height="2.84073" fill="black" />
+      <rect x="94.5361" y="113.629" width="2.83607" height="2.84073" fill="black" />
+      <rect x="113.443" y="113.629" width="2.83607" height="2.84073" fill="black" />
+      <rect y="132.566" width="2.83607" height="2.84073" fill="black" />
+      <rect x="18.9062" y="132.568" width="2.83607" height="2.84073" fill="black" />
+      <rect x="37.8145" y="132.568" width="2.83607" height="2.84073" fill="black" />
+      <rect x="56.7217" y="132.568" width="2.83607" height="2.84073" fill="black" />
+      <rect x="75.6279" y="132.568" width="2.83607" height="2.84073" fill="black" />
+      <rect x="94.5361" y="132.568" width="2.83607" height="2.84073" fill="black" />
+      <rect x="113.443" y="132.568" width="2.83607" height="2.84073" fill="black" />
+      <rect y="151.506" width="2.83607" height="2.84073" fill="black" />
+      <rect x="18.9062" y="151.506" width="2.83607" height="2.84073" fill="black" />
+      <rect x="37.8145" y="151.506" width="2.83607" height="2.84073" fill="black" />
+      <rect x="56.7217" y="151.506" width="2.83607" height="2.84073" fill="black" />
+      <rect x="75.6279" y="151.506" width="2.83607" height="2.84073" fill="black" />
+      <rect x="94.5361" y="151.506" width="2.83607" height="2.84073" fill="black" />
+      <rect x="113.443" y="151.506" width="2.83607" height="2.84073" fill="black" />
+      <rect y="170.443" width="2.83607" height="2.84073" fill="black" />
+      <rect x="18.9062" y="170.443" width="2.83607" height="2.84073" fill="black" />
+      <rect x="37.8145" y="170.443" width="2.83607" height="2.84073" fill="black" />
+      <rect x="56.7217" y="170.443" width="2.83607" height="2.84073" fill="black" />
+      <rect x="75.6279" y="170.443" width="2.83607" height="2.84073" fill="black" />
+      <rect x="94.5361" y="170.443" width="2.83607" height="2.84073" fill="black" />
+      <rect x="113.443" y="170.443" width="2.83607" height="2.84073" fill="black" />
+      <rect y="189.382" width="2.83607" height="2.84073" fill="black" />
+      <rect x="18.9062" y="189.383" width="2.83607" height="2.84073" fill="black" />
+      <rect x="37.8145" y="189.383" width="2.83607" height="2.84073" fill="black" />
+      <rect x="56.7217" y="189.383" width="2.83607" height="2.84073" fill="black" />
+      <rect x="75.6279" y="189.383" width="2.83607" height="2.84073" fill="black" />
+      <rect x="94.5361" y="189.383" width="2.83607" height="2.84073" fill="black" />
+      <rect x="113.443" y="189.383" width="2.83607" height="2.84073" fill="black" />
+    </g>
+  </svg>
+);
--- a/src/pages/home/banner/index.tsx
+++ b/src/pages/home/banner/index.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { dots } from './dots';
+import './style.css';
+import Cubs from './components/cubs/cubs';
+
+const Banner = () => {
+  return (
+    <div className="container hero">
+      <div className="hero-main">
+        <div className="hero-line"></div>
+        <h1 className="hero-title">Discover And Create NFTs</h1>
+        <p className="hero-description">
+          Discover, Create and Sell NFTs On Our NFT Marketplace With Over Thousands Of NFTs And Get
+          a <span className="hero-description__bold">$20 bonus</span>.
+        </p>
+        <div className="hero-buttons">
+          <button className="button">Explore More</button>
+          <button className="button button-secondary">create NFT</button>
+        </div>
+      </div>
+      <div>
+        <Cubs />
+        {dots}
+      </div>
+    </div>
+  );
+};
+
+export default Banner;
--- a/src/pages/home/banner/style.css
+++ b/src/pages/home/banner/style.css
@@ -0,0 +1,62 @@
+.hero {
+    position: relative;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding-top: 54px;
+    padding-bottom: 143px;
+}
+
+.hero-main {
+    margin-right: 48px;
+}
+
+.hero-line {
+    width: 195px;
+    border-top: 1px solid #201F1F;
+    opacity: 0.2;
+    margin-top: 12px;
+}
+
+.hero-title {
+    margin-top: 10px;
+    margin-bottom: 12px;
+    font-weight: 600;
+    font-size: 75px;
+    line-height: 120%;
+    letter-spacing: -3px;
+}
+
+.hero-description {
+    font-family: var(--font-inter);
+    padding: 0;
+
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 28px;
+    letter-spacing: 0px;
+    text-align: justify;
+}
+
+.hero-description__bold {
+    font-weight: 600;
+}
+
+.hero-buttons {
+    margin-top: 45px;
+    display: flex;
+    gap: 23px;
+}
+
+.cub1-arrow {
+    position: absolute;
+    left: calc(100% + 23px);
+    top: 41px;
+    transform: rotate(-3.08deg);
+}
+
+.hero-dots {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: -1;
+}
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import Header from '../../widgets/header';
+import Banner from './banner';
+
+const HomePage = (): React.ReactElement => {
+  return (
+    <>
+      <Header />
+      <main>
+        <Banner />
+      </main>
+    </>
+  );
+};
+
+export default HomePage;
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -0,0 +1,4 @@
+export const routes = {
+  home: '/',
+  create: '/creators/:city?',
+};
--- a/src/style.css
+++ b/src/style.css
@@ -1,3 +1,8 @@
+body {
+    margin: 0;
+    overflow-x: hidden;
+}
+
 html {
    --color-dark: #141416;
    --text-dark: var(--color-dark);
@@ -10,7 +15,8 @@ html {
 }

 .container {
-    padding: 0 97px;
+    padding-left: 97px;
+    padding-right: 97px;
 }

 .button {
@@ -24,7 +30,12 @@ html {
    line-height: 24px;
    text-transform: uppercase;
    cursor: pointer;
-    border: none;
+    border: 1.5px solid #000000;
+}
+
+.button-secondary {
+    background-color: white;
+    color: #000000;
 }

 .button[disabled] {
@@ -36,6 +47,8 @@ html {
    display: flex;
    align-items: center;
    font-family: var(--font-inter);
+    padding-top: 45px;
+    padding-bottom: 45px;
 }

 .logo {
@@ -95,7 +108,7 @@ html {
    border-radius: 24px;
    width: 100%;
    aspect-ratio: 1;
-    background: center / cover no-repeat url('https://s3-alpha-sig.figma.com/img/b82f/55d0/61c522d86567e3c5ea1f39ddf68ae4bc?Expires=1743379200&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=UlO4-Fsc27zhQo9T9Tl8fhCSVyxM4GHu6DkUtWgi881ggrnY9uHKNdVvhg2GuSS7ItYldxw9FhYRjgcBrwKBvnf4XLjw8YjkZ8584NLVxfH-POsN8O2eh9gyxEBEgaF~AVwwnNmnRpPN2JFnfcRUIihkRrhZA7IjDRxNY1CbPHB5j~AP9wlWhI6P2TqaXaJj~8JRZPx1YBpGWfrSCgLfgQejNNi58FvkkX1Hkvm0aICdebCSqwFrq~sLI6Rbj5H-QgF~2AxU3EGiBzdaCvMXfBx3xpZIvHGkuSeYlhdlU-KFNmjF9u3VPg7c5S~IvPMIOmvWhwX-GguAGxPZe4tksw__'), #F8F8F8;
+    background: center / cover no-repeat url('./images/img.png'), #F8F8F8;
 }

 .nft-card__content {
@@ -174,4 +187,6 @@ html {

 .nft-card-container .nft-card {
    flex-shrink: 0;
-}
+}
+
+
--- a/src/views/header.hbs
+++ b/src/views/header.hbs
@@ -1,11 +1,11 @@
 <header class="header container">
-    <a href="index.html"><img class="logo" src="../src/images/logo.svg" alt=""></a>
+    <a href="index.html"><img class="logo" src="./images/logo.svg" alt=""></a>
    <nav>
        <ul class="nav-list">
-            <li><a href="../src/discover.html">Discover</a></li>
-            <li><a href="../src/creators.html">creators</a></li>
-            <li><a href="../src/creators.html">Sell</a></li>
-            <li><a href="../src/creators.html">stats</a></li>
+            <li><a href="./discover.html">Discover</a></li>
+            <li><a href="./creators.html">creators</a></li>
+            <li><a href="./creators.html">Sell</a></li>
+            <li><a href="./creators.html">stats</a></li>
        </ul>
    </nav>
    <button class="button">Connect Wallet</button>
--- a/src/views/layout.hbs
+++ b/src/views/layout.hbs
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>{{#if title}}{{title}}{{else}}Document{{/if}}</title>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900"
+          rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900"
+          rel="stylesheet">
+</head>
+<body>
+{{> @partial-block }}
+</body>
+</html>
--- a/src/widgets/header/index.tsx
+++ b/src/widgets/header/index.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import logoUrl from '../../images/logo.svg';
+import { generatePath, NavLink } from 'react-router';
+import { routes } from '../../routes';
+
+const Header = (): React.ReactElement => {
+
+  return (
+    <header className="header container">
+      <NavLink to={routes.home} end>
+        <img className="logo" src={logoUrl} alt="" />
+      </NavLink>
+      <nav>
+        <ul className="nav-list">
+          <li>
+            <NavLink to="/discover">Discover</NavLink>
+          </li>
+          <li>
+            <NavLink to={generatePath(routes.create, { city: '12345' })}>creators</NavLink>
+          </li>
+          <li>
+            <NavLink to="/creators">creators</NavLink>
+          </li>
+          <li>
+            <NavLink to="/creators">creators</NavLink>
+          </li>
+        </ul>
+      </nav>
+      <button className="button">Connect Wallet</button>
+    </header>
+  );
+};
+
+export default Header;
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,7 +13,7 @@
    /* Language and Environment */
    "target": "ES2022",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
-    // "jsx": "preserve",                                /* Specify what JSX code is generated. */
+     "jsx": "react",                                /* Specify what JSX code is generated. */
    // "libReplacement": true,                           /* Enable lib replacement. */
    // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
@@ -32,7 +32,7 @@
    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
-    // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
+     "typeRoots": ["./node_modules/@types", "@types"],                                  /* Specify multiple folders that act like './node_modules/@types'. */
    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
    // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,35 +1,52 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CopyPlugin = require("copy-webpack-plugin");
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

 module.exports = {
-    entry: './src/index.ts',
-    output: {
-        filename: 'index.js',
-        path: path.resolve(__dirname, 'dist'),
-        clean: true
-    },
-    resolve: {
-        extensions: ['.js', '.ts']
-    },
-    module: {
-        rules: [
-            { test: /\.(ts|tsx)$/, loader: "ts-loader" },
-            {
-                test: /\.hbs$/,
-                loader: 'handlebars-loader',
-            },
-        ]
-    },
-    plugins: [
-        new HtmlWebpackPlugin({
-            template: "./src/index.hbs"
-        }),
-        new CopyPlugin({
-            patterns: [
-                {from: "./src/style.css", to: "style.css"},
-                {from: "./src/images", to: "images"},
-            ],
-        })
-    ]
-};
+  entry: './src/index.tsx',
+  output: {
+    filename: 'index.js',
+    path: path.resolve(__dirname, 'dist'),
+    publicPath: '/',
+    clean: true,
+  },
+  devServer: {
+    historyApiFallback: true,
+    hot: true,
+  },
+  resolve: {
+    extensions: ['.js', '.ts', '.jsx', '.tsx'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.png|.svg/,
+        type: 'asset/resource',
+      },
+      {
+        test: /\.(ts|tsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            plugins: [require.resolve('react-refresh/babel')],
+            presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
+          },
+        },
+      },
+      {
+        test: /\.css$/i,
+        use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './src/index.html',
+      filename: 'index.html',
+    }),
+    new ReactRefreshWebpackPlugin(),
+    new ForkTsCheckerWebpackPlugin(),
+  ],
+};
Author	SHA1	Message	Date
grinikita	47e7271224	Docker и хостинг	2025-06-12 16:02:55 +03:00
grinikita	53428c5415	router	2025-05-17 13:19:49 +03:00
grinikita	330e4c0d74	ts @types. React hooks	2025-04-27 19:56:23 +03:00
grinikita	a621b0f6ab	Switch ts-loader to babel and add hmr	2025-04-26 12:18:26 +03:00
grinikita	859ed6c331	Eslint+prettier init	2025-04-26 11:18:10 +03:00
grinikita	9550031481	React инициализация	2025-04-14 21:14:49 +03:00
grinikita	520ad38f8d	Обработка css webpack. Верстка главного блока	2025-04-11 00:17:50 +03:00
grinikita	21d8e8289f	html layout	2025-04-10 22:50:17 +03:00
grinikita	f31f40ad3e	Сборка нескольких html страниц	2025-04-10 21:50:49 +03:00