mate-academy · ProKesha · Feb 24, 2026 · Feb 24, 2026 · Feb 24, 2026 · Feb 24, 2026
diff --git a/index.html b/index.html
@@ -3,7 +3,23 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <meta name="theme-color" content="#0f1121" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <title>Nice Gadgets Store</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        background: #0f1121;
+        color: #f1f2f9;
+      }
+
+      #root {
+        min-height: 100vh;
+        background: #0f1121;
+      }
+    </style>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react_phone-catalog",
-  "homepage": "react_phone-catalog",
+  "homepage": "/react_phone-catalog/",
   "version": "0.1.0",
   "keywords": [],
   "author": "Mate Academy",
@@ -16,7 +16,7 @@
   },
   "devDependencies": {
     "@cypress/react18": "^2.0.1",
-    "@mate-academy/scripts": "^1.8.5",
+    "@mate-academy/scripts": "^2.1.3",
     "@mate-academy/students-ts-config": "*",
     "@mate-academy/stylelint-config": "*",
     "@types/node": "^20.14.10",

diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/public/img/banners/Banner-mobile.png b/public/img/banners/Banner-mobile.png
diff --git a/public/img/banners/Banner.png b/public/img/banners/Banner.png
diff --git a/public/img/banners/slide-1.png b/public/img/banners/slide-1.png
diff --git a/public/img/banners/slide-2.png b/public/img/banners/slide-2.png
diff --git a/public/img/banners/slide-3.png b/public/img/banners/slide-3.png
diff --git a/src/App.scss b/src/App.scss
@@ -1 +1,114 @@
-// not empty
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+@font-face {
+  font-family: Mont;
+  src: url('/fonts/Mont-Regular.otf') format('opentype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Mont;
+  src: url('/fonts/Mont-SemiBold.otf') format('opentype');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Mont;
+  src: url('/fonts/Mont-Bold.otf') format('opentype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+:root {
+  --color-primary: #f1f2f9;
+  --color-secondary: #89939a;
+  --color-icons: #b4bdc3;
+  --color-white: #fff;
+  --color-surface: #161827;
+  --color-card: #161827;
+  --color-bg: #0f1121;
+  --color-border: rgba(255, 255, 255, 0.12);
+  --color-red: #eb5757;
+  --color-green: #27ae60;
+  --color-accent: #905bff;
+  --color-accent-hover: #a378ff;
+  --color-header-bg: #0f1121;
+  --color-header-text: #f1f2f9;
+  --color-header-border: rgba(255, 255, 255, 0.12);
+  --font-base: Mont, 'Helvetica Neue', Arial, sans-serif;
+  --transition-base: 0.2s ease-in-out;
+  --content-max-width: 1200px;
+  --header-height: 64px;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--font-base);
+  background-color: var(--color-bg);
+  color: var(--color-primary);
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+button {
+  cursor: pointer;
+  border: none;
+  background: none;
+  font-family: inherit;
+}
+
+img {
+  max-width: 100%;
+  display: block;
+}
+
+ul {
+  list-style: none;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+a img,
+button img {
+  transition: transform 0.3s ease-in-out;
+}
+
+a:hover img,
+button:hover img {
+  transform: scale(1.1);
+}
+
+a,
+button {
+  transition:
+    color var(--transition-base),
+    background-color var(--transition-base),
+    border-color var(--transition-base),
+    opacity var(--transition-base);
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,44 @@
+import { HashRouter, Route, Routes } from 'react-router-dom';
+
+import { CartProvider, FavoritesProvider } from './modules/shared/context';
+import { AppLayout } from './modules/shared/components/AppLayout';
+import { CartPage } from './modules/CartPage';
+import { FavoritesPage } from './modules/FavoritesPage';
+import { HomePage } from './modules/HomePage';
+import { NotFoundPage } from './modules/NotFoundPage';
+import { ProductDetailsPage } from './modules/ProductDetailsPage';
+import { ProductsPage } from './modules/ProductsPage';
+
 import './App.scss';
 
 export const App = () => (
-  <div className="App">
-    <h1>Product Catalog</h1>
-  </div>
+  <CartProvider>
+    <FavoritesProvider>
+      <HashRouter>
+        <Routes>
+          <Route path="/" element={<AppLayout />}>
+            <Route index element={<HomePage />} />
+            <Route
+              path="phones"
+              element={<ProductsPage key="phones" category="phones" />}
+            />
+            <Route
+              path="tablets"
+              element={<ProductsPage key="tablets" category="tablets" />}
+            />
+            <Route
+              path="accessories"
+              element={
+                <ProductsPage key="accessories" category="accessories" />
+              }
+            />
+            <Route path="product/:productId" element={<ProductDetailsPage />} />
+            <Route path="cart" element={<CartPage />} />
+            <Route path="favorites" element={<FavoritesPage />} />
+            <Route path="*" element={<NotFoundPage />} />
+          </Route>
+        </Routes>
+      </HashRouter>
+    </FavoritesProvider>
+  </CartProvider>
 );