phone

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.tsx

@@ -1,7 +1 @@
-import './App.scss';
-
-export const App = () => (
-  <div className="App">
-    <h1>Product Catalog</h1>
-  </div>
-);
+export { App } from './components/App';

src/components/App/App.module.scss

@@ -0,0 +1,3 @@
+.app {
+  min-height: 100vh;
+}

src/components/App/App.tsx

@@ -0,0 +1,43 @@
+import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
+import { AppProviders } from '../AppProviders';
+import { AppLayout } from '../AppLayout';
+import { CartPage } from '../../modules/CartPage';
+import { FavoritesPage } from '../../modules/FavoritesPage';
+import { HomePage } from '../../modules/HomePage';
+import { NotFoundPage } from '../../modules/NotFoundPage';
+import { ProductDetailsPage } from '../../modules/ProductDetailsPage';
+import { ProductsPage } from '../../modules/ProductsPage';
+import { Category } from '../../modules/shared/types/catalog';
+import styles from './App.module.scss';
+
+const productRoutes: { category: Category; path: string }[] = [
+  { category: 'phones', path: 'phones' },
+  { category: 'tablets', path: 'tablets' },
+  { category: 'accessories', path: 'accessories' },
+];
+
+export const App = () => (
+  <div className={styles.app}>
+    <BrowserRouter>
+      <AppProviders>
+        <Routes>
+          <Route element={<AppLayout />}>
+            <Route index element={<HomePage />} />
+            {productRoutes.map(({ category, path }) => (
+              <Route
+                key={path}
+                path={path}
+                element={<ProductsPage category={category} />}
+              />
+            ))}
+            <Route path="favorites" element={<FavoritesPage />} />
+            <Route path="cart" element={<CartPage />} />
+            <Route path="product/:productId" element={<ProductDetailsPage />} />
+            <Route path="home" element={<Navigate to="/" replace />} />
+            <Route path="*" element={<NotFoundPage />} />
+          </Route>
+        </Routes>
+      </AppProviders>
+    </BrowserRouter>
+  </div>
+);

src/components/App/index.ts

@@ -0,0 +1 @@
+export { App } from './App';

src/components/AppLayout/AppLayout.module.scss

@@ -0,0 +1,15 @@
+.layout {
+  min-height: 100vh;
+}
+
+.main {
+  padding: calc(var(--header-height) + 28px) 20px 72px;
+}
+
+@media (max-width: 767px) {
+  .main {
+    padding-top: calc(var(--header-height) + 18px);
+    padding-inline: 16px;
+    padding-bottom: 56px;
+  }
+}

src/components/AppLayout/AppLayout.tsx

@@ -0,0 +1,15 @@
+import { Outlet } from 'react-router-dom';
+import { Footer } from '../Footer';
+import { Header } from '../Header';
+import styles from './AppLayout.module.scss';
+
+export const AppLayout = () => (
+  <div className={styles.layout}>
+    <a id="top" />
+    <Header />
+    <main className={styles.main}>
+      <Outlet />
+    </main>
+    <Footer />
+  </div>
+);

src/components/AppLayout/index.ts

@@ -0,0 +1 @@
+export { AppLayout } from './AppLayout';

src/components/AppProviders/AppProviders.module.scss

@@ -0,0 +1,3 @@
+.providers {
+  display: contents;
+}

src/components/AppProviders/AppProviders.tsx

@@ -0,0 +1,14 @@
+import { PropsWithChildren } from 'react';
+import {
+  CartProvider,
+  FavoritesProvider,
+  ThemeProvider,
+} from '../../modules/shared/context';
+
+export const AppProviders = ({ children }: PropsWithChildren) => (
+  <ThemeProvider>
+    <FavoritesProvider>
+      <CartProvider>{children}</CartProvider>
+    </FavoritesProvider>
+  </ThemeProvider>
+);

src/components/AppProviders/index.ts

@@ -0,0 +1 @@
+export { AppProviders } from './AppProviders';

src/components/Footer/Footer.module.scss

@@ -0,0 +1,38 @@
+.footer {
+  border-top: 1px solid var(--color-border);
+  background: var(--color-footer-bg);
+  backdrop-filter: blur(16px);
+}
+
+.inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  width: min(100%, var(--container-width));
+  margin: 0 auto;
+  padding: 26px 20px;
+}
+
+.link,
+.button {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.link:hover,
+.button:hover {
+  color: var(--color-accent);
+  transform: translateY(-1px);
+}
+
+@media (max-width: 767px) {
+  .inner {
+    flex-direction: column;
+    align-items: flex-start;
+    padding-inline: 16px;
+  }
+}

src/components/Footer/Footer.tsx

@@ -0,0 +1,25 @@
+import styles from './Footer.module.scss';
+
+export const Footer = () => (
+  <footer className={styles.footer}>
+    <div className={styles.inner}>
+      <a
+        href="https://github.com/fmoreira85/react_phone-catalog"
+        target="_blank"
+        rel="noreferrer"
+        className={styles.link}
+      >
+        View GitHub repo
+      </a>
+
+      <button
+        type="button"
+        className={styles.button}
+        onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+      >
+        Back to top
+        <i className="fa-solid fa-arrow-up-long" />
+      </button>
+    </div>
+  </footer>
+);

src/components/Footer/index.ts

@@ -0,0 +1 @@
+export { Footer } from './Footer';

src/components/Header/Header.module.scss

@@ -0,0 +1,124 @@
+.header {
+  position: fixed;
+  inset: 0 0 auto;
+  z-index: 20;
+  border-bottom: 1px solid var(--color-border);
+  background: var(--color-header-bg);
+  backdrop-filter: blur(18px);
+}
+
+.inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  width: min(100%, var(--container-width));
+  min-height: var(--header-height);
+  margin: 0 auto;
+  padding: 16px 20px;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 32px;
+}
+
+.nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.navLink {
+  padding: 10px 14px;
+  border-radius: 999px;
+  color: var(--color-text-muted);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.navLink:hover,
+.navLinkActive {
+  background-color: var(--color-surface-strong);
+  color: var(--color-text);
+  box-shadow: 0 16px 30px -24px var(--color-shadow);
+}
+
+.tools {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: min(100%, 600px);
+}
+
+.iconLink {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border: 1px solid var(--color-border);
+  border-radius: 18px;
+  background-color: var(--color-surface-strong);
+  box-shadow: 0 16px 30px -24px var(--color-shadow);
+}
+
+.iconLink:hover,
+.iconLinkActive {
+  transform: translateY(-1px);
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+}
+
+.badge {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  min-width: 22px;
+  padding: 2px 6px;
+  border-radius: 999px;
+  background-color: var(--color-accent);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 700;
+  text-align: center;
+}
+
+@media (max-width: 1023px) {
+  .inner {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .brand {
+    justify-content: space-between;
+    gap: 20px;
+  }
+
+  .tools {
+    width: 100%;
+  }
+}
+
+@media (max-width: 767px) {
+  .inner {
+    padding-inline: 16px;
+  }
+
+  .brand {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .tools {
+    flex-wrap: wrap;
+  }
+
+  .nav {
+    width: 100%;
+    overflow-x: auto;
+    padding-bottom: 4px;
+  }
+}