add solution

.stylelintrc.js

@@ -1,4 +1,11 @@
 module.exports = {
-  extends: "@mate-academy/stylelint-config",
-  rules: {}
+  extends: '@mate-academy/stylelint-config',
+  rules: {
+    'selector-pseudo-class-no-unknown': [
+      true,
+      {
+        ignorePseudoClasses: ['global', 'local'],
+      },
+    ],
+  },
 };

package.json

@@ -12,11 +12,12 @@
     "react": "^18.3.1",
     "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.4"
   },
   "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,25 @@
-// not empty
+@import './styles/fonts';
+@import './styles/mixins';
+@import './styles/globals';
+@import './styles/typography';
+@import './styles/variables';
+
+html,
+body {
+  scroll-behavior: smooth;
+  margin: 0;
+  padding: 0;
+  font-family: Montserrat, sans-serif;
+}
+
+a {
+  display: inline-block;
+
+  img {
+    display: block;
+  }
+}
+
+.container {
+  @include content-padding-inline;
+}

src/App.tsx

@@ -1,7 +1,20 @@
+import { Outlet } from 'react-router-dom';
 import './App.scss';
+import { Footer } from './components/Footer';
+import { Header } from './components/Header';
 
-export const App = () => (
-  <div className="App">
-    <h1>Product Catalog</h1>
-  </div>
-);
+function App() {
+  return (
+    <div className={''}>
+      <Header />
+
+      <div className="container" style={{ minHeight: '80vh' }}>
+        <Outlet />
+      </div>
+
+      <Footer />
+    </div>
+  );
+}
+
+export default App;

src/CartContext.tsx

@@ -0,0 +1,36 @@
+import React, { useCallback, useMemo } from 'react';
+import { useLocalStorage } from './hooks/useLocalStorage';
+import type { Cart } from './types/Cart';
+
+type CartContextType = {
+  cart: Cart[];
+  setCart: React.Dispatch<React.SetStateAction<Cart[]>>;
+};
+
+export const CartContext = React.createContext<CartContextType>({
+  cart: [],
+  setCart: () => {},
+});
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export const CartProvider: React.FC<Props> = ({ children }) => {
+  const [cart, saveCart] = useLocalStorage<Cart[]>('cart', []);
+
+  const setCart: React.Dispatch<React.SetStateAction<Cart[]>> = useCallback(
+    value => {
+      if (typeof value === 'function') {
+        saveCart(value(cart));
+      } else {
+        saveCart(value);
+      }
+    },
+    [cart, saveCart],
+  );
+
+  const value = useMemo(() => ({ cart, setCart }), [cart, setCart]);
+
+  return <CartContext.Provider value={value}>{children}</CartContext.Provider>;
+};

src/FavouritesContext.tsx

@@ -0,0 +1,47 @@
+import React, { useCallback, useMemo } from 'react';
+import { useLocalStorage } from './hooks/useLocalStorage';
+import type { Product } from './types/Product';
+
+type FavouritesContextType = {
+  favourites: Product[];
+  setFavourites: React.Dispatch<React.SetStateAction<Product[]>>;
+};
+
+export const FavouritesContext = React.createContext<FavouritesContextType>({
+  favourites: [],
+  setFavourites: () => {},
+});
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export const FavouritesProvider: React.FC<Props> = ({ children }) => {
+  const [favourites, saveFavourites] = useLocalStorage<Product[]>(
+    'favourites',
+    [],
+  );
+
+  const setFavourites: React.Dispatch<React.SetStateAction<Product[]>> =
+    useCallback(
+      value => {
+        if (typeof value === 'function') {
+          saveFavourites(value(favourites));
+        } else {
+          saveFavourites(value);
+        }
+      },
+      [favourites, saveFavourites],
+    );
+
+  const value = useMemo(
+    () => ({ favourites, setFavourites }),
+    [favourites, setFavourites],
+  );
+
+  return (
+    <FavouritesContext.Provider value={value}>
+      {children}
+    </FavouritesContext.Provider>
+  );
+};

src/Root.tsx

@@ -0,0 +1,31 @@
+import { HashRouter, Navigate, Route, Routes } from 'react-router-dom';
+import App from './App';
+import { NotFoundPage } from './modules/NotFoundPage';
+import { CartPage } from './modules/CartPage/CartPage';
+import { FavoritesPage } from './modules/FavoritesPage';
+import { HomePage } from './modules/HomePage';
+import { CatalogPage } from './modules/CatalogPage';
+import { ProductDetailsPage } from './modules/ProductDetailsPage';
+
+export const Root = () => {
+  return (
+    <HashRouter>
+      <Routes>
+        <Route path="/" element={<App />}>
+          <Route index element={<HomePage />} />
+          <Route path="home" element={<Navigate to="/" replace />} />
+          <Route path="phones" element={<CatalogPage />} />
+          <Route path="tablets" element={<CatalogPage />} />
+          <Route path="accessories" element={<CatalogPage />} />
+          <Route path="cart" element={<CartPage />} />
+          <Route path="favorites" element={<FavoritesPage />} />
+          <Route
+            path="product/:productId"
+            element={<ProductDetailsPage />}
+          ></Route>
+          <Route path="*" element={<NotFoundPage />} />
+        </Route>
+      </Routes>
+    </HashRouter>
+  );
+};

src/api.ts

@@ -0,0 +1,9 @@
+function wait(delay: number) {
+  return new Promise(resolve => setTimeout(resolve, delay));
+}
+
+export async function getProducts<T>(type: string): Promise<T[]> {
+  return wait(1)
+    .then(() => fetch(`./api/${type}.json`))
+    .then(response => response.json());
+}

src/components/Footer/Footer.module.scss

@@ -0,0 +1,60 @@
+@import './../../styles/mixins';
+@import './../../styles/typography';
+
+
+.footer {
+  border-top: 1px solid var(--color-elements);
+
+  &__content {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    padding-block: 32px;
+    gap: 32px;
+
+    @include on-tablet {
+      flex-direction: row;
+    }
+  }
+
+  &__items {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    gap: 16px;
+
+    @include on-tablet {
+      flex-direction: row;
+      align-items: center;
+      gap: 13px;
+    }
+
+    @include on-desktop {
+      flex-direction: row;
+      align-items: center;
+      gap: 106px;
+    }
+  }
+
+  &__item {
+    text-decoration: none;
+    text-transform: uppercase;
+    color: var(--color-secondary);
+
+    @include uppercase;
+  }
+
+  &__toTop {
+    display: flex;
+    justify-content: center;
+    gap: 16px;
+  }
+
+  &__back {
+    display: flex;
+    align-items: center;
+    color: var(--color-secondary);
+
+    @include small-text;
+  }
+}