feat: initial commit with project structure and styles

package.json

@@ -11,12 +11,12 @@
     "classnames": "^2.5.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.25.1",
+    "react-router-dom": "^6.30.3",
     "react-transition-group": "^4.4.5"
   },
   "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",
@@ -40,7 +40,7 @@
     "mochawesome-merge": "^4.3.0",
     "mochawesome-report-generator": "^6.2.0",
     "prettier": "^3.3.2",
-    "sass": "^1.77.8",
+    "sass": "^1.99.0",
     "stylelint": "^16.7.0",
     "typescript": "^5.2.2",
     "vite": "^5.3.1"

src/App.scss

@@ -1 +1,49 @@
-// not empty
+@import 'https://fonts.cdnfonts.com/css/mont';
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.container {
+  width: 100%;
+  max-width: none;
+  margin: 0;
+
+  @media screen and (min-width: 1200px) {
+    padding-left: 32px;
+    padding-right: 32px;
+  }
+
+  @media screen and (min-width: 1440px) {
+    padding-left: 152px;
+    padding-right: 152px;
+  }
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  background-color: #0f1117;
+  color: #f1f2f9;
+  font-family: Mont, sans-serif;
+}
+
+/* stylelint-disable-next-line selector-max-id */
+#root {
+  height: 100%;
+}
+
+.app {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+
+  &__main {
+    flex: 1 0 auto;
+    display: flex;
+    flex-direction: column;
+  }
+}

src/App.tsx

@@ -1,7 +1,88 @@
+/* eslint-disable max-len */
+import React, { useEffect, useState } from 'react';
+import { Routes, Route, Navigate } from 'react-router-dom';
+import { Product } from './types/Product';
+import { ProductDetails } from './types/ProductDetails';
+import * as api from './api/api';
+
+import { Header } from './components/Header/Header';
+import { Footer } from './components/Footer/Footer';
+import { HomePage } from './components/pages/HomePage/HomePage';
+import { PhonesPage } from './components/pages/PhonesPage/PhonesPage';
+import { ProductDetailsPage } from './components/pages/ProductDetailsPage/ProductDetailsPage';
+import { CartPage } from './components/pages/CartPage/CartPage';
+import { FavoritesPage } from './components/pages/FavoritesPage/FavoritesPage';
+
 import './App.scss';
 
-export const App = () => (
-  <div className="App">
-    <h1>Product Catalog</h1>
-  </div>
-);
+export const App: React.FC = () => {
+  const [allProducts, setAllProducts] = useState<Product[]>([]);
+  const [phones, setPhones] = useState<Product[]>([]);
+  const [tablets, setTablets] = useState<Product[]>([]);
+  const [accessories, setAccessories] = useState<Product[]>([]);
+  const [details, setDetails] = useState<ProductDetails[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    Promise.all([api.getProducts(), api.getProductsDetails()])
+      .then(([productsData, detailsData]) => {
+        setAllProducts(productsData);
+        setPhones(productsData.filter(item => item.category === 'phones'));
+        setTablets(productsData.filter(item => item.category === 'tablets'));
+        setAccessories(
+          productsData.filter(item => item.category === 'accessories'),
+        );
+        setDetails(detailsData);
+      })
+      .catch(() => {})
+      .finally(() => {
+        setLoading(false);
+      });
+  }, []);
+
+  if (loading) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div className="app">
+      <Header />
+
+      <main className="app__main">
+        <Routes>
+          <Route path="/" element={<HomePage products={phones} />} />
+          <Route path="/home" element={<Navigate to="/" replace />} />
+
+          <Route
+            path="/phones"
+            element={<PhonesPage products={phones} title="Mobile phones" />}
+          />
+
+          <Route
+            path="/tablets"
+            element={<PhonesPage products={tablets} title="Tablets" />}
+          />
+
+          <Route
+            path="/accessories"
+            element={<PhonesPage products={accessories} title="Accessories" />}
+          />
+
+          <Route
+            path="/:category/:productId"
+            element={
+              <ProductDetailsPage products={allProducts} details={details} />
+            }
+          />
+
+          <Route path="/favorites" element={<FavoritesPage />} />
+          <Route path="/cart" element={<CartPage />} />
+
+          <Route path="*" element={<h1>Page not found</h1>} />
+        </Routes>
+      </main>
+
+      <Footer />
+    </div>
+  );
+};

src/api/api.ts

@@ -0,0 +1,36 @@
+/* eslint-disable max-len */
+import { Product } from '../types/Product';
+import { ProductDetails } from '../types/ProductDetails';
+
+const BASE_URL =
+  window.location.hostname === 'localhost' ? '' : '/react_phone-catalog';
+
+const fetchData = async <T>(path: string): Promise<T> => {
+  const url = `${BASE_URL}${path}`.replace(/\/+/g, '/');
+
+  const response = await fetch(url);
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch ${url}: ${response.statusText}`);
+  }
+
+  return response.json();
+};
+
+export const getProducts = (): Promise<Product[]> => {
+  return fetchData<Product[]>('/api/products.json');
+};
+
+export const getProductsDetails = async (): Promise<ProductDetails[]> => {
+  try {
+    const [phones, tablets, accessories] = await Promise.all([
+      fetchData<ProductDetails[]>('/api/phones.json'),
+      fetchData<ProductDetails[]>('/api/tablets.json'),
+      fetchData<ProductDetails[]>('/api/accessories.json'),
+    ]);
+
+    return [...phones, ...tablets, ...accessories];
+  } catch (error) {
+    return [];
+  }
+};

src/components/Banner/Banner.scss

@@ -0,0 +1,148 @@
+.banner-section {
+  padding-top: 32px;
+  max-width: 1136px;
+  margin: 0 auto;
+  padding-left: 16px;
+  padding-right: 16px;
+
+  @media (min-width: 640px) {
+    padding-top: 56px;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  &__title {
+    font-family: Mont, sans-serif;
+    font-weight: 800;
+    font-size: 32px;
+    line-height: 41px;
+    letter-spacing: -0.01em;
+    color: #fff;
+    margin-top: 0;
+    margin-bottom: 24px;
+    text-align: left;
+
+    @media (min-width: 640px) {
+      font-size: 48px;
+      line-height: 56px;
+      margin-bottom: 32px;
+    }
+  }
+}
+
+.banner {
+  &__main {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-column-gap: 0;
+    height: 400px;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+
+    @media (min-width: 640px) {
+      grid-template-columns: 32px 1fr 32px;
+      grid-column-gap: 16px;
+    }
+  }
+
+  &__viewer {
+    grid-column: 1;
+
+    @media (min-width: 640px) {
+      grid-column: 2;
+    }
+
+    overflow: hidden;
+    height: 100%;
+  }
+
+  &__list {
+    display: flex;
+    height: 100%;
+    transition: transform 0.5s ease-in-out;
+  }
+
+  &__slide {
+    min-width: 100%;
+    height: 100%;
+  }
+
+  &__img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    border-radius: 8px;
+  }
+
+  &__btn {
+    display: none;
+
+    @media (min-width: 640px) {
+      display: flex;
+      border: none;
+      padding: 0;
+      margin: 0;
+      height: 100%;
+      width: 32px;
+      background-color: #323542;
+      cursor: pointer;
+      align-items: center;
+      justify-content: center;
+      z-index: 10;
+      transition: background-color 0.3s;
+
+      &:hover {
+        background-color: #4a4d58;
+      }
+    }
+
+    &--prev {
+      grid-column: 1;
+      &::after {
+        content: '';
+        width: 8px;
+        height: 8px;
+        border-left: 2px solid #fff;
+        border-bottom: 2px solid #fff;
+        transform: rotate(45deg);
+        margin-left: 4px;
+      }
+    }
+
+    &--next {
+      grid-column: 3;
+      &::after {
+        content: '';
+        width: 8px;
+        height: 8px;
+        border-right: 2px solid #fff;
+        border-top: 2px solid #fff;
+        transform: rotate(45deg);
+        margin-right: 4px;
+      }
+    }
+  }
+
+  &__dots {
+    display: flex;
+    justify-content: center;
+    gap: 12px;
+    margin-top: 16px;
+  }
+
+  &__dot {
+    border: none;
+    padding: 0;
+    width: 14px;
+    height: 4px;
+    background-color: #323542;
+    cursor: pointer;
+    transition: background-color 0.3s;
+
+    &.is-active {
+      background-color: #f1f2f9;
+    }
+  }
+}