solution

package.json

@@ -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",

src/App.scss

@@ -1 +1,27 @@
-// not empty
+@use './Components/Home/Home.scss' as *;
+@use './Components/TopBar/top-bar.scss' as *;
+@use './Components/TopBar/nav.scss' as *;
+@use './utils/vars.scss' as *;
+@use './utils/mixins.scss' as *;
+@use './fonts/fonts.scss' as *;
+@use '../src/Components/Header/header.scss' as *;
+@use './styles/section.scss' as *;
+@use './styles/WelcomeBlock.scss' as *;
+@use './styles/icon.scss' as *;
+@use './styles/categories.scss' as *;
+@use './styles/Page.scss' as *;
+@use '../src/Components/Footer/Footer.scss' as *;
+@use './Components/ErrorNotification/ErrorNotification.scss' as *;
+@use './Components/Aside/Aside.scss' as *;
+
+
+body {
+  margin: 0;
+  background-color: #0F1121;
+  color: #F1F2F9;
+  font-family: Mont, sans-serif;
+}
+
+.container {
+  @include content-padding-inline;
+}

src/App.tsx

@@ -1,7 +1,11 @@
+import { Outlet } from 'react-router-dom';
 import './App.scss';
+import React from 'react';
 
-export const App = () => (
-  <div className="App">
-    <h1>Product Catalog</h1>
-  </div>
-);
+export const App = () => {
+  return (
+    <div className="App">
+      <Outlet />
+    </div>
+  );
+};

src/Components/Accessories/Accessories.scss

@@ -0,0 +1,21 @@
+.accessories {
+  &__path {
+    display: flex;
+
+    gap: 8px;
+
+    align-items: center;
+
+    margin-top: 25px;
+
+
+    &-phones {
+      font-family: "Mont SemiBold", sans-serif;
+
+      color: #75767F;
+      font-weight: 700;
+      font-size: 12px;
+      line-height: 100%;
+    }
+  }
+}

src/Components/Accessories/Accessories.tsx

@@ -0,0 +1,169 @@
+/* eslint-disable max-len */
+import { Link } from 'react-router-dom';
+import { Filter } from '../Filter/Filter';
+import { Header } from '../Header/header';
+import ArrowGray from '../../images/icons/ChevronGray.svg';
+import Home from '../../images/icons/Home.svg';
+import './Accessories.scss';
+import { getAccessories } from '../../api/api';
+import { useEffect, useState } from 'react';
+import { Accessorie } from '../../types/Accessories';
+import fav from '../../images/fav/Icons/Favourites (Heart Like).svg';
+import activeFav from '../../images/icons/ActiveFav.svg';
+import { Products } from '../../types/Products';
+import { useCart } from '../../Context/Context';
+import { useFav } from '../../Context/FavouritesContext';
+
+export const Accessories = () => {
+  const [accessories, setAccessories] = useState<Accessorie[]>([]);
+  const [, setLoading] = useState(true);
+  const [, setErrorMessage] = useState('');
+  const { totalQuantity, addToCart, removeFromCart, isInCart } = useCart();
+  const { addToFav, removeFromFav, isInFav } = useFav();
+
+  const mapAccessorieToProduct = (accessorie: Accessorie): Products => ({
+    id: String(accessorie.id),
+    itemId: String(accessorie.id),
+    name: accessorie.name,
+    category: accessorie.category,
+    fullPrice: Number(accessorie.priceRegular),
+    price: Number(accessorie.priceDiscount || accessorie.priceRegular),
+    screen: accessorie.screen,
+    capacity: accessorie.capacity,
+    color: accessorie.color || accessorie.colorsAvailable?.[0] || '—',
+    ram: accessorie.ram,
+    year: new Date().getFullYear(),
+    image:
+      typeof accessorie.images === 'string'
+        ? accessorie.images
+        : (accessorie.images?.[0] ?? '/img/placeholder.png'),
+  });
+
+  useEffect(() => {
+    setLoading(true);
+    setErrorMessage('');
+
+    getAccessories()
+      .then(setAccessories)
+      .catch(() => setErrorMessage(`Couldn't load any tablets`))
+      .finally(() => setLoading(false));
+  }, []);
+
+  return (
+    <div className="tablets">
+      <Header cartItemsCount={totalQuantity} />
+      <div className="container">
+        <div className="accessories__path page__path">
+          <div className="accessories__path-icon">
+            <Link to="/" className="accessories__icon-link page__icon-link">
+              <img
+                className="accessories__icon-home page__icon icon-home icon"
+                src={Home}
+                alt="Home"
+              />
+              <img
+                className="accessories__icon-home icon-home icon"
+                src={ArrowGray}
+                alt="Arrow"
+              />
+            </Link>
+          </div>
+          <span className="accessories__path-phones page__paths">
+            Accessories
+          </span>
+        </div>
+        <div className="Accessories__text page__text">
+          <p className="Accessories__title page__title">Accessories</p>
+          <span className="accessories__subtitle page__subtitle">
+            100 models
+          </span>
+        </div>
+        <Filter />
+        <div className="tablets__content">
+          <section className="page__models section">
+            <div className="page__models-tablet tablet__articles page__grid">
+              {accessories.map(accessorie => {
+                const product = mapAccessorieToProduct(accessorie);
+                const added = isInCart(product.id);
+                const addedFav = isInFav(product.id);
+
+                return (
+                  <article key={accessorie.id} className="page__models-phone">
+                    <div className="page__models-container">
+                      <div className="page__models-img">
+                        <img
+                          src={product.image}
+                          alt=""
+                          className="page__models-image"
+                        />
+                      </div>
+                      <p className="page__models-title">{accessorie.name}</p>
+                      <span className="page__models-price">
+                        {accessorie.priceRegular}$
+                      </span>
+                      <div className="page__models-string"></div>
+                      <div className="page__models-info">
+                        <p className="page_models-text page__models-text__first">
+                          Screen{' '}
+                          <span className="page__models-span">
+                            {accessorie.screen}
+                          </span>
+                        </p>
+                        <p className="page__models-text">
+                          Capacity{' '}
+                          <span className="page__models-span">
+                            {accessorie.capacity}
+                          </span>
+                        </p>
+                        <p className="page__models-text">
+                          RAM{' '}
+                          <span className="page__models-span">
+                            {accessorie.ram}
+                          </span>
+                        </p>
+                      </div>
+                      <div className="page__models-buttons">
+                        <button
+                          className={`page__models-cart ${added ? 'page__models-cart-active' : ''}`}
+                          type="button"
+                          onClick={() =>
+                            added
+                              ? removeFromCart(product.id)
+                              : addToCart(product)
+                          }
+                        >
+                          <p className="page__models-cart__text">
+                            {added ? 'Added' : 'Add to cart'}
+                          </p>
+                        </button>
+                        <button
+                          className="page__models-fav"
+                          type="button"
+                          onClick={() =>
+                            addedFav
+                              ? removeFromFav(product.id)
+                              : addToFav(product)
+                          }
+                        >
+                          <img
+                            className="page__models-fav__img"
+                            src={addedFav ? activeFav : fav}
+                            alt="Favourites"
+                          />
+                        </button>
+                      </div>
+                    </div>
+                  </article>
+                );
+              })}
+            </div>
+          </section>
+        </div>
+      </div>
+
+      {/* <div className="page__footer">
+        <Footer />
+      </div> */}
+    </div>
+  );
+};

src/Components/Aside/Aside.scss

@@ -0,0 +1,69 @@
+@use '../../utils/mixins.scss' as *;
+
+.favourites {
+  overflow: hidden;
+  box-sizing: border-box;
+  height: 100vh;
+  background-color: #0F1121;
+
+  &__top-bar {
+    padding-left: 20px;
+    box-shadow: 0 1px #323542;
+  }
+
+  &__container {
+    padding-left: 20px;
+    max-width: 1136px;
+  }
+
+  &__top {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+
+  &__footer {
+    position: fixed;
+    bottom: 1.7px;
+    left: 0;
+    right: 0;
+  }
+
+  &__title {
+    margin: 0;
+
+    font-family: Mont, sans-serif;
+    font-weight: 800;
+    letter-spacing: -1%;
+    font-size: 32px;
+    line-height: 41px;
+
+    @include on-tablet {
+      font-size: 48px;
+      line-height: 56px;
+    }
+  }
+
+  &__back{
+
+    &-text {
+      margin: 0;
+      font-family: 'Mont regular', sans-serif;
+      font-weight: 700;
+      font-size: 12px;
+      line-height: 100%;
+
+      color: #F1F2F9;
+    }
+
+    &-button {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+
+      margin-top: 40px;
+      margin-bottom: 15px;
+
+      text-decoration: none;
+    }}
+}

src/Components/Aside/Aside.tsx

@@ -0,0 +1,28 @@
+import { Link } from 'react-router-dom';
+import { Footer } from '../Footer/Footer';
+import { TopBar } from '../TopBar/TopBar';
+
+const arrowLeft = new URL(
+  '../../images/icons/Chevron (Arrow Left).svg',
+  import.meta.url,
+).href;
+
+export const Aside = () => {
+  return (
+    <aside className="favourites page__favourites" id="favourites">
+      <div className="favourites__top-bar">
+        <TopBar cartItemsCount={0} />
+      </div>
+      <div className="favourites__container">
+        <Link to="/Home" className="favourites__back-button">
+          <img src={arrowLeft} alt="Arrow Left" />
+          <p className="favourites__back-text">Back</p>
+        </Link>
+        <p className="favourites__title">Cart</p>
+      </div>
+      <div className="favourites__footer">
+        <Footer />
+      </div>
+    </aside>
+  );
+};

src/Components/ErrorNotification/ErrorNotification.scss

@@ -0,0 +1,12 @@
+@use '../../utils/mixins.scss' as *;
+
+.error-notification {
+  @include content-padding-inline;
+
+  &__title {
+    font-family: Mont, sans-serif;
+    font-weight: 800;
+    font-size: 48px;
+    line-height: 56px;
+  }
+}

src/Components/ErrorNotification/ErrorNotification.tsx

@@ -0,0 +1,10 @@
+import '../../../public/img/page-not-found.png';
+
+export const ErrorNotification = () => {
+  return (
+    <div className="error-notification">
+      <p className="error-notification__title">Page Not Found</p>
+      <img src="../../../public/img/page-not-found.png" alt="" />
+    </div>
+  );
+};