trying to pass tests

package.json

@@ -1,6 +1,5 @@
 {
   "name": "react_phone-catalog",
-  "homepage": "react_phone-catalog",
   "version": "0.1.0",
   "keywords": [],
   "author": "Mate Academy",
@@ -12,11 +11,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.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",
@@ -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"
@@ -55,7 +55,7 @@
     "format": "prettier --write './src/**/*.{ts,tsx}'",
     "lint": "npm run style-format && npm run format && npm run lint-js && npm run lint-css",
     "update": "mate-scripts update",
-    "postinstall": "npm run update && cypress verify",
+    "postinstall": "echo 'Skip cypress verify on Vercel'",
     "predeploy": "npm run build",
     "deploy": "mate-scripts deploy"
   },

src/App.scss

@@ -1 +1,30 @@
-// not empty
+@use './styles/utils/variables' as *;
+@use './styles/fonts';
+
+html,
+body {
+  margin: 0;
+  height: 100%;
+  background-color: $color-black;
+  color: $color-white;
+  font-family: Mont, sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: $color-white;
+}
+
+.app {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+main {
+  flex-grow: 1;
+}
+
+footer {
+  flex-shrink: 0;
+}

src/App.tsx

@@ -1,7 +1,44 @@
 import './App.scss';
+import { Route, Routes } from 'react-router-dom';
+import { Header } from './components/Header/Header';
+import { Home } from './pages/Home/Home';
+import { Footer } from './components/Footer/Footer';
+import { CategoryPage } from './pages/CategoryPage/CategoryPage';
+/* eslint-disable max-len */
+import { ProductDetailsPage } from './pages/ProductDetailsPage/ProductDetailsPage';
+/* eslint-enable max-len */
+import { Favorites } from './pages/Favorites/Favorites';
 
-export const App = () => (
-  <div className="App">
-    <h1>Product Catalog</h1>
-  </div>
-);
+import { Cart } from './pages/Cart/Cart';
+
+export const App = () => {
+  return (
+    <div className="app">
+      <Header />
+
+      <main>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route
+            path="/phones"
+            element={<CategoryPage title="Mobile phones" category="phones" />}
+          />
+          <Route path="/product/:productId" element={<ProductDetailsPage />} />
+          <Route
+            path="/tablets"
+            element={<CategoryPage title="Tablets" category="tablets" />}
+          />
+          <Route
+            path="/accessories"
+            element={
+              <CategoryPage title="Accessories" category="accessories" />
+            }
+          />
+          <Route path="/favorites" element={<Favorites />}></Route>
+          <Route path="/cart" element={<Cart />}></Route>
+        </Routes>
+      </main>
+      <Footer />
+    </div>
+  );
+};

src/components/BrandNewModels/BrandNewModels.module.scss

@@ -0,0 +1,108 @@
+@use '../../styles/utils/variables' as *;
+
+.title {
+  padding-top: 24px;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 56px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.h2_title {
+  font-weight: 800;
+  font-size: 22px;
+  line-height: 140%;
+  letter-spacing: 0;
+  color: #f1f2f9;
+
+  @media (min-width: $tablet) {
+    font-weight: 800;
+    font-size: 32px;
+    line-height: 41px;
+    letter-spacing: -1%;
+  }
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+
+}
+
+.gridWrapper {
+  overflow: hidden;
+
+  // width: 100%;
+  box-sizing: border-box;
+
+  // border: 2px solid red;
+}
+
+.gridContainer {
+  display: flex;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+  margin-bottom: 56px;
+}
+
+.arrows {
+  gap: 16px;
+  display: flex;
+}
+
+.arrow {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  img {
+    width: 16px;
+    height: 16px;
+    opacity: 0.5;
+    transition: all 0.3s ease;
+  }
+
+  &:disabled {
+    background-color: transparent;
+    border: 1px solid #4e5261;
+    cursor: default;
+  }
+
+  &:not(:disabled) {
+    background-color: #323542;
+    border: 1px solid #323542;
+
+    img {
+      opacity: 1;
+      filter: brightness(0) invert(1);
+    }
+
+    &:hover {
+      background-color: #4e5261;
+    }
+  }
+}
+
+.slideCard {
+  flex-shrink: 0;
+  width: 212px;
+
+  @media (min-width: $tablet) {
+    width: 237px;
+  }
+
+  @media (min-width: $desktop) {
+    width: 272px;
+  }
+}

src/components/BrandNewModels/BrandNewModels.tsx

@@ -0,0 +1,62 @@
+import styles from './BrandNewModels.module.scss';
+import products from '../../../public/api/products.json';
+import { useState } from 'react';
+import { ProductCard } from '../ProductCard/ProductCard';
+
+export const BrandNewModels = () => {
+  const newModels = [...products].sort((a, b) => b.year - a.year);
+  const [offset, setOffset] = useState(0);
+  const visibleCards =
+    window.innerWidth >= 1200 ? 4 : window.innerWidth >= 640 ? 3 : 2;
+  const cardWidth =
+    window.innerWidth >= 1200 ? 272 : window.innerWidth >= 640 ? 237 : 212;
+  const step = cardWidth + 16;
+  const maxOffset = (newModels.length - visibleCards) * step;
+
+  const handleNext = () => {
+    setOffset(prev => Math.min(prev + step, maxOffset));
+  };
+
+  const handlePrev = () => {
+    setOffset(prev => Math.max(prev - step, 0));
+  };
+
+  return (
+    <div>
+      <div className={styles.top}>
+        <h2 className={styles.h2_title}>Brand new models</h2>
+        <div className={styles.arrows}>
+          <button
+            onClick={handlePrev}
+            disabled={offset === 0}
+            className={styles.arrow}
+          >
+            <img src="./img/icons/arrowLeft.png" alt="left" />
+          </button>
+          <button
+            onClick={handleNext}
+            disabled={offset === maxOffset}
+            className={styles.arrow}
+          >
+            <img src="./img/icons/rightArrow.png" alt="right" />
+          </button>
+        </div>
+      </div>
+      <div className={styles.gridWrapper}>
+        <div
+          className={styles.gridContainer}
+          style={{
+            transform: `translateX(-${offset}px)`,
+            transition: 'transform 0.3s ease-in-out',
+          }}
+        >
+          {newModels.map(product => (
+            <div key={product.id} className={styles.slideCard}>
+              <ProductCard product={product} />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};