Develop

package.json

@@ -7,16 +7,18 @@
   "license": "GPL-3.0",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.5.2",
+    "@reduxjs/toolkit": "^2.11.2",
     "bulma": "^1.0.1",
     "classnames": "^2.5.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.25.1",
+    "react-redux": "^9.2.0",
+    "react-router-dom": "^6.30.3",
     "react-transition-group": "^4.4.5"
   },
   "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",

src/App.scss

@@ -1 +1,55 @@
-// not empty
+@import './styles/variables';
+
+@font-face {
+  font-family: Mont;
+  src: url('/fonts/Mont-Regular.otf') format('opentype');
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: Mont;
+  src: url('/fonts/Mont-SemiBold.otf') format('opentype');
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: Mont;
+  src: url('/fonts/Mont-Bold.otf') format('opentype');
+  font-weight: 700;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-color: $c-bg-dark;
+  color: $c-text-primary;
+  font-family: $font-family;
+  -webkit-font-smoothing: antialiased;
+}
+
+.App {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.main-content {
+  flex: 1;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  border: 0;
+  padding: 0;
+  white-space: nowrap;
+  clip-path: inset(100%);
+  clip: rect(0 0 0 0);
+  overflow: hidden;
+}

src/App.tsx

@@ -1,7 +1,47 @@
+import { Routes, Route, Navigate } from 'react-router-dom';
+import { HomePage } from './modules/HomePage';
+import { CatalogPage } from './modules/CatalogPage';
+import { ProductDetailsPage } from './modules/ProductDetailsPage';
+import { CartPage } from './modules/CartPage';
+import { FavoritesPage } from './modules/FavoritesPage';
+import { NotFoundPage } from './modules/NotFoundPage/NotFoundPage';
 import './App.scss';
+import { Header } from './components/Header/Header';
+import { Footer } from './components/Footer/Footer';
 
-export const App = () => (
-  <div className="App">
-    <h1>Product Catalog</h1>
-  </div>
-);
+export const App = () => {
+  return (
+    <div className="App">
+      <Header />
+
+      <main className="main-content">
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/home" element={<Navigate to="/" replace />} />
+
+          <Route path="/phones">
+            <Route index element={<CatalogPage category="phones" />} />
+            <Route path=":productId" element={<ProductDetailsPage />} />
+          </Route>
+
+          <Route path="/tablets">
+            <Route index element={<CatalogPage category="tablets" />} />
+            <Route path=":productId" element={<ProductDetailsPage />} />
+          </Route>
+
+          <Route path="/accessories">
+            <Route index element={<CatalogPage category="accessories" />} />
+            <Route path=":productId" element={<ProductDetailsPage />} />
+          </Route>
+
+          <Route path="/cart" element={<CartPage />} />
+          <Route path="/favorites" element={<FavoritesPage />} />
+
+          <Route path="*" element={<NotFoundPage />} />
+        </Routes>
+      </main>
+
+      <Footer />
+    </div>
+  );
+};