mate-academy · Yar14k · Mar 21, 2026 · Mar 21, 2026 · Mar 21, 2026 · Mar 21, 2026
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="./public/img/icons/icon--fingers.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
@@ -7,16 +7,20 @@
   "license": "GPL-3.0",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.5.2",
+    "bootstrap": "^5.3.8",
     "bulma": "^1.0.1",
     "classnames": "^2.5.1",
+    "normalize.css": "^8.0.1",
     "react": "^18.3.1",
+    "react-bootstrap": "^2.10.10",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.25.1",
-    "react-transition-group": "^4.4.5"
+    "react-transition-group": "^4.4.5",
+    "swiper": "^12.1.3"
   },
   "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",
@@ -35,7 +39,7 @@
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.4",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "gh-pages": "^6.1.1",
+    "gh-pages": "^5.0.0",
     "mochawesome": "^7.1.3",
     "mochawesome-merge": "^4.3.0",
     "mochawesome-report-generator": "^6.2.0",

diff --git a/public/img/27554c30-a66e-4072-9852-60eebe7dab3e.png b/public/img/27554c30-a66e-4072-9852-60eebe7dab3e.png
diff --git a/public/img/Logo/Logo.png b/public/img/Logo/Logo.png
diff --git a/public/img/Logo/logo--tablet.png b/public/img/Logo/logo--tablet.png
diff --git a/public/img/category-phones--gold.png b/public/img/category-phones--gold.png
diff --git a/public/img/category-phones--purple--otherSide--desktop.png b/public/img/category-phones--purple--otherSide--desktop.png
diff --git a/public/img/category-phones--purple--otherSide--phone.png b/public/img/category-phones--purple--otherSide--phone.png
diff --git a/public/img/category-phones--purple.png b/public/img/category-phones--purple.png
diff --git a/public/img/category-phones.webp → ...ategory-phones--space-black--desktop.webp b/public/img/category-phones.webp → ...ategory-phones--space-black--desktop.webp
diff --git a/public/img/category-phones--space-black--phone.png b/public/img/category-phones--space-black--phone.png
diff --git a/public/img/icons/icon--basket.svg b/public/img/icons/icon--basket.svg
diff --git a/public/img/icons/icon--close.svg b/public/img/icons/icon--close.svg
diff --git a/public/img/icons/icon--fingers.svg b/public/img/icons/icon--fingers.svg
diff --git a/public/img/icons/icon--heart--filled.svg b/public/img/icons/icon--heart--filled.svg
diff --git a/public/img/icons/icon--heart.svg b/public/img/icons/icon--heart.svg
diff --git a/public/img/icons/icon--home.svg b/public/img/icons/icon--home.svg
diff --git a/public/img/icons/icon--menu.svg b/public/img/icons/icon--menu.svg
diff --git a/public/img/icons/icon--minus.svg b/public/img/icons/icon--minus.svg
diff --git a/public/img/icons/icon--plus.svg b/public/img/icons/icon--plus.svg
diff --git a/public/img/icons/icon--slider--down--gray.svg b/public/img/icons/icon--slider--down--gray.svg
diff --git a/public/img/icons/icon--slider--left.svg b/public/img/icons/icon--slider--left.svg
diff --git a/public/img/icons/icon--slider--right--gray.svg b/public/img/icons/icon--slider--right--gray.svg
diff --git a/public/img/icons/icon--slider--right.svg b/public/img/icons/icon--slider--right.svg
diff --git a/public/img/icons/icon--slider--top--gray.svg b/public/img/icons/icon--slider--top--gray.svg
diff --git a/public/img/icons/icon--slider--top.svg b/public/img/icons/icon--slider--top.svg
diff --git a/public/img/main-category--accessory.png b/public/img/main-category--accessory.png
diff --git a/public/img/main-category--phone.png b/public/img/main-category--phone.png
diff --git a/public/img/main-category--tablet.png b/public/img/main-category--tablet.png
diff --git a/src/App.scss b/src/App.scss
@@ -1 +1,34 @@
-// not empty
+@use 'swiper/css' as *;
+@use 'swiper/css/navigation' as *;
+@use 'swiper/css/pagination' as *;
+
+body {
+ margin: 0;
+};
+
+.App {
+  min-height:calc(100vh - 160px);
+}
+
+/* fonts.scss */
+
+@font-face {
+  font-family: 'Mont';
+  src: url('/public/fonts/Mont-Regular.otf') format('opentype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Mont';
+  src: url('/public/fonts/Mont-SemiBold.otf') format('opentype');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Mont';
+  src: url('/public/fonts/Mont-Bold.otf') format('opentype');
+  font-weight: 700;
+  font-style: normal;
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,94 @@
 import './App.scss';
+import Home from './pages/homePage/Home';
+import Phones from './pages/phonesPage/Phones';
+import Accessories from './pages/accessoriesPage/Accessories';
+import Tablets from './pages/tabletsPage/Tablets';
+import Heart from './pages/heartPage/Heart';
+import ProductPage from './pages/productPage/ProductPage';
+import { HashRouter, Routes, Route } from 'react-router-dom';
+import Basket from './pages/basketPage/Basket';
+import { useLocalStorage } from './api';
+import { FavoriteProduct } from './types/FavoriteProduct';
+import { BasketProduct } from './types/BasketProduct';
+import Footer from './components/Footer/Footer';
+import Header from './components/Header/Header';
+import BurgerMenu from './pages/BurgerMenu/BurgerMenu';
+import { AppContext } from './AppContext';
+import { useState } from 'react';
+import TermsPage from './pages/termsPage/TermsPage';
 
-export const App = () => (
-  <div className="App">
-    <h1>Product Catalog</h1>
-  </div>
-);
+export const App = () => {
+  const [favorites, setFavorites] = useLocalStorage<FavoriteProduct[]>(
+    'favorites',
+    [],
+  );
+  const [baskets, setBaskets] = useLocalStorage<BasketProduct[]>('baskets', []);
+  const [showMessage, setShowMessage] = useState(false);
+  const removeBaskets = (itemId: string) => {
+    const updatedBaskets = baskets.filter(basket => basket.itemId !== itemId);
+
+    setBaskets(updatedBaskets);
+  };
+
+  const handleIncrease = (itemId: string) => {
+    setBaskets(prev => {
+      return prev.map(item =>
+        item.itemId === itemId
+          ? { ...item, quantity: item.quantity + 1 }
+          : item,
+      );
+    });
+  };
+
+  const handleDecrease = (itemId: string) => {
+    setBaskets(prev =>
+      prev.map(item =>
+        item.itemId === itemId
+          ? { ...item, quantity: Math.max(1, item.quantity - 1) }
+          : item,
+      ),
+    );
+  };
+
+  const handleCheckout = () => {
+    setBaskets([]);
+    setShowMessage(true);
+
+    setTimeout(() => setShowMessage(false), 3000);
+  };
+
+  return (
+    <HashRouter>
+      <AppContext.Provider
+        value={{
+          favorites,
+          setFavorites,
+          baskets,
+          setBaskets,
+          removeBaskets,
+          handleIncrease,
+          handleDecrease,
+          handleCheckout,
+          showMessage,
+        }}
+      >
+        <Header />
+        <div className="App">
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/phones" element={<Phones />} />
+            <Route path="/tablets" element={<Tablets />} />
+            <Route path="/accessories" element={<Accessories />} />
+            <Route path="/heart" element={<Heart />} />
+            <Route path="/basket" element={<Basket />} />
+            <Route path="/:category/:id" element={<ProductPage />} />
+
+            <Route path="/burgermenu" element={<BurgerMenu />} />
+            <Route path="/terms" element={<TermsPage />} />
+          </Routes>
+        </div>
+        <Footer />
+      </AppContext.Provider>
+    </HashRouter>
+  );
+};
diff --git a/src/AppContext.tsx b/src/AppContext.tsx
@@ -0,0 +1,17 @@
+import { createContext } from 'react';
+import { BasketProduct } from './types/BasketProduct';
+import { FavoriteProduct } from './types/FavoriteProduct';
+
+type AppContextType = {
+  showMessage: boolean;
+  favorites: FavoriteProduct[];
+  setFavorites: React.Dispatch<React.SetStateAction<FavoriteProduct[]>>;
+  baskets: BasketProduct[];
+  setBaskets: React.Dispatch<React.SetStateAction<BasketProduct[]>>;
+  removeBaskets: (itemId: string) => void;
+  handleIncrease: (itemId: string) => void;
+  handleDecrease: (itemId: string) => void;
+  handleCheckout: () => void;
+};
+
+export const AppContext = createContext<AppContextType | null>(null);
diff --git a/src/Pages/BurgerMenu/BurgerFooter/BurgerFooter.scss b/src/Pages/BurgerMenu/BurgerFooter/BurgerFooter.scss
@@ -0,0 +1,101 @@
+.burger-footer {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+
+  width: 100%;
+  margin-top: auto;
+  padding: 0;
+  border-top: 1px solid #e2e6e9;
+}
+
+.burger-footer--heart {
+  border-right: 1px solid #e2e6e9;
+}
+
+.burger-footer--basket,
+.burger-footer--heart {
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 50%;
+  height: 64px;
+}
+
+.burger-footer--heart::after,
+.burger-footer--basket::after {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+
+  width: 100%;
+  height: 2px;
+
+  opacity: 0;
+  background-color: black;
+
+  transition: opacity 0.2s ease;
+}
+
+.burger-footer--heart:hover::after,
+.burger-footer--basket:hover::after {
+  opacity: 1;
+}
+
+.burger-footer__icon--heart {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 32px;
+  height: 32px;
+  border-radius: 0;
+
+  background-color: white;
+  background-image: url('../../../../public/img/icons/icon--heart.svg');
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 16px 16px;
+}
+
+.burger-footer__icon--basket {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 32px;
+  height: 32px;
+  border-radius: 0;
+
+  background-color: white;
+  background-image: url('../../../../public/img/icons/icon--basket.svg');
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 16px 16px;
+}
+
+.burger-footer__icon--badge {
+  position: absolute;
+  top: 24%;
+  right: 40%;
+
+  width: auto;
+  height: 12px;
+  padding: 2px 6px;
+  border-radius: 50%;
+
+  font-size: 8px;
+  font-weight: bold;
+  line-height: 13px;
+  color: white;
+  text-align: center;
+
+  background-color: #f08080;
+
+  @media (min-width: 640px) {
+    right: 46%;
+  }
+}
diff --git a/src/Pages/BurgerMenu/BurgerFooter/BurgerFooter.tsx b/src/Pages/BurgerMenu/BurgerFooter/BurgerFooter.tsx
@@ -0,0 +1,34 @@
+import { BasketProduct } from '../../../types/BasketProduct';
+import { FavoriteProduct } from '../../../types/FavoriteProduct';
+import './BurgerFooter.scss';
+import { Link } from 'react-router-dom';
+
+type BurgerFooterProps = {
+  favorites: FavoriteProduct[];
+  baskets: BasketProduct[];
+};
+
+const BurgerFooter = ({ favorites, baskets }: BurgerFooterProps) => {
+  return (
+    <footer className="burger-footer">
+      <div className="burger-footer--heart">
+        <Link to="/heart" className="burger-footer__icon--heart">
+          {favorites.length > 0 && (
+            <span className="burger-footer__icon--badge">
+              {favorites.length}
+            </span>
+          )}
+        </Link>
+      </div>
+      <div className="burger-footer--basket">
+        <Link to="/basket" className="burger-footer__icon--basket">
+          {baskets.length > 0 && (
+            <span className="burger-footer__icon--badge">{baskets.length}</span>
+          )}
+        </Link>
+      </div>
+    </footer>
+  );
+};
+
+export default BurgerFooter;