mate-academy · Poviakalo · Dec 6, 2024 · Dec 6, 2024 · Dec 6, 2024 · Dec 13, 2024
diff --git a/favicon.png b/favicon.png
diff --git a/index.html b/index.html
@@ -3,7 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <link rel="icon" href="favicon.png">
+    <title>Nice Gadgets</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,16 +12,19 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.25.1",
-    "react-transition-group": "^4.4.5"
+    "react-slick": "^0.30.2",
+    "react-transition-group": "^4.4.5",
+    "slick-carousel": "^1.8.1"
   },
   "devDependencies": {
     "@cypress/react18": "^2.0.1",
-    "@mate-academy/scripts": "^1.8.5",
+    "@mate-academy/scripts": "^1.9.12",
     "@mate-academy/students-ts-config": "*",
     "@mate-academy/stylelint-config": "*",
     "@types/node": "^20.14.10",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/react-slick": "^0.23.13",
     "@types/react-transition-group": "^4.4.10",
     "@typescript-eslint/parser": "^7.16.0",
     "@vitejs/plugin-react": "^4.3.1",

diff --git a/src/App.scss b/src/App.scss
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,17 @@
-import './App.scss';
+import { Outlet } from 'react-router-dom';
+import { HeaderRegion } from './shared/HeaderRegion';
+import Footer from './shared/Footer/Footer';
 
-export const App = () => (
-  <div className="App">
-    <h1>Product Catalog</h1>
-  </div>
-);
+export const App = () => {
+  return (
+    <>
+      <HeaderRegion />
+      <main className="main">
+        <div className="container">
+          <Outlet />
+        </div>
+      </main>
+      <Footer />
+    </>
+  );
+};
diff --git a/src/Root.tsx b/src/Root.tsx
@@ -0,0 +1,78 @@
+import {
+  HashRouter as Router,
+  Routes,
+  Route,
+  Navigate,
+} from 'react-router-dom';
+import './main.scss';
+import { App } from './App';
+import { CardPage } from './modules/CardPage';
+import { HomePage } from './modules/HomePage';
+import { NotFoundPage } from './modules/NotFoundPage';
+import { CatalogPage } from './modules/CatalogPage';
+import { FavoritesPage } from './modules/FavoritesPage';
+import { FavoritesProvider } from './context/FavoriteProvider';
+import { CartPage } from './modules/CartPage';
+import { CartProvider } from './context/CartProvider';
+
+export const Root = () => {
+  return (
+    <CartProvider>
+      <FavoritesProvider>
+        <Router>
+          <Routes>
+            <Route path="/" element={<App />}>
+              <Route index element={<HomePage />} />
+              <Route path="home" element={<Navigate to={'/'} replace />} />
+
+              <Route path=":itemId" element={<CardPage />} />
+
+              <Route path="phones">
+                <Route
+                  index
+                  element={
+                    <CatalogPage title="Mobile phones" category="phones" />
+                  }
+                />
+
+                <Route path=":itemId" element={<CardPage />} />
+              </Route>
+
+              <Route path="tablets">
+                <Route
+                  index
+                  element={<CatalogPage title="Tablets" category="tablets" />}
+                />
+
+                <Route path=":itemId" element={<CardPage />} />
+              </Route>
+
+              <Route path="accessories">
+                <Route
+                  index
+                  element={
+                    <CatalogPage title="Accessories" category="accessories" />
+                  }
+                />
+
+                <Route path=":itemId" element={<CardPage />} />
+              </Route>
+
+              <Route path="favorite">
+                <Route index element={<FavoritesPage />} />
+
+                <Route path=":itemId" element={<CardPage />} />
+              </Route>
+
+              {/* <Route path="favorite" element={<FavoritesPage />} /> */}
+
+              <Route path="cart" element={<CartPage />} />
+
+              <Route path="*" element={<NotFoundPage />} />
+            </Route>
+          </Routes>
+        </Router>
+      </FavoritesProvider>
+    </CartProvider>
+  );
+};
diff --git a/src/asset/fonts/Mont-Bold.otf b/src/asset/fonts/Mont-Bold.otf
diff --git a/src/asset/fonts/Mont-Regular.otf b/src/asset/fonts/Mont-Regular.otf
diff --git a/src/asset/fonts/Mont-SemiBold.otf b/src/asset/fonts/Mont-SemiBold.otf
diff --git a/src/asset/img/cart-is-empty.png b/src/asset/img/cart-is-empty.png
diff --git a/src/asset/img/categories/Phones.jpg b/src/asset/img/categories/Phones.jpg
diff --git a/src/asset/img/categories/accessories.jpg b/src/asset/img/categories/accessories.jpg
diff --git a/src/asset/img/categories/accessories.png b/src/asset/img/categories/accessories.png
diff --git a/src/asset/img/categories/phone.png b/src/asset/img/categories/phone.png
diff --git a/src/asset/img/categories/tablet.png b/src/asset/img/categories/tablet.png
diff --git a/src/asset/img/categories/tablets.jpg b/src/asset/img/categories/tablets.jpg
diff --git a/src/asset/img/icons/arrow.png b/src/asset/img/icons/arrow.png
diff --git a/src/asset/img/icons/cart.png b/src/asset/img/icons/cart.png
diff --git a/src/asset/img/icons/close.png b/src/asset/img/icons/close.png
diff --git a/src/asset/img/icons/heart-red.png b/src/asset/img/icons/heart-red.png
diff --git a/src/asset/img/icons/home.png b/src/asset/img/icons/home.png
diff --git a/src/asset/img/icons/like.png b/src/asset/img/icons/like.png
diff --git a/src/asset/img/icons/menu-burger-icon.png b/src/asset/img/icons/menu-burger-icon.png
diff --git a/src/asset/img/icons/minus.png b/src/asset/img/icons/minus.png
diff --git a/src/asset/img/icons/plus.png b/src/asset/img/icons/plus.png
diff --git a/src/asset/img/icons/search.png b/src/asset/img/icons/search.png
diff --git a/src/asset/img/logo/Logo-mb.png b/src/asset/img/logo/Logo-mb.png
diff --git a/src/asset/img/logo/logo-laptop.png b/src/asset/img/logo/logo-laptop.png
diff --git a/src/asset/img/page-not-found.png b/src/asset/img/page-not-found.png
diff --git a/src/asset/img/slider/picture-1-desk.jpg b/src/asset/img/slider/picture-1-desk.jpg
diff --git a/src/asset/img/slider/picture-2-desk.jpg b/src/asset/img/slider/picture-2-desk.jpg
diff --git a/src/asset/img/slider/picture-3-desk.jpg b/src/asset/img/slider/picture-3-desk.jpg