Solution

package.json

@@ -1,28 +1,32 @@
 {
   "name": "react_phone-catalog",
-  "homepage": "react_phone-catalog",
+  "homepage": "https://alexanderbarkar.github.io/react_phone-catalog/",
   "version": "0.1.0",
   "keywords": [],
   "author": "Mate Academy",
   "license": "GPL-3.0",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.5.2",
+    "@reduxjs/toolkit": "^2.11.2",
     "bulma": "^1.0.1",
     "classnames": "^2.5.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-redux": "^9.2.0",
     "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",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-transition-group": "^4.4.10",
+    "@types/swiper": "^5.4.3",
     "@typescript-eslint/parser": "^7.16.0",
     "@vitejs/plugin-react": "^4.3.1",
     "cypress": "^13.13.0",
@@ -36,6 +40,8 @@
     "eslint-plugin-react": "^7.34.4",
     "eslint-plugin-react-hooks": "^4.6.2",
     "gh-pages": "^6.1.1",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.7",
     "mochawesome": "^7.1.3",
     "mochawesome-merge": "^4.3.0",
     "mochawesome-report-generator": "^6.2.0",
@@ -57,7 +63,23 @@
     "update": "mate-scripts update",
     "postinstall": "npm run update && cypress verify",
     "predeploy": "npm run build",
-    "deploy": "mate-scripts deploy"
+    "deploy": "mate-scripts deploy",
+    "prepare": "husky install"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.tsx": [
+      "eslint --fix",
+      "prettier --write"
+    ]
   },
   "browserslist": {
     "production": [

setup.md

@@ -155,7 +155,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: [20.x]
+          node-version: "12.x"
       - run: npm ci
       - run: npm run build
       - name: Deploy

src/App.scss

@@ -1 +1,34 @@
-// not empty
+body {
+  background-color: #0F1121;
+  margin: 0;
+  box-sizing: border-box;
+  font-family: Montserrat, sans-serif;
+  overflow-x: hidden;
+}
+
+html {
+  overflow-x: hidden;
+}
+
+#root {
+  overflow-x: hidden;
+  max-width: 100%;
+}
+
+.main {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 16px;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+  white-space: nowrap;
+}

src/App.tsx

@@ -1,7 +1,17 @@
+/* eslint-disable max-len */
+import { Outlet } from 'react-router-dom';
 import './App.scss';
+import { Header } from './components/Header/Header';
+import { Footer } from './components/Footer/Footer';
 
-export const App = () => (
-  <div className="App">
-    <h1>Product Catalog</h1>
-  </div>
-);
+export const App = () => {
+  return (
+    <>
+      <Header />
+      <main className="main">
+        <Outlet />
+      </main>
+      <Footer />
+    </>
+  );
+};

src/Functional/BrandNewModelPhone/NewBrand.scss

@@ -0,0 +1,189 @@
+@use '../../mixins.scss' as *;
+.section {
+  position: relative;
+}
+.new-brand {
+  margin-top: 40px;
+  padding: 0 32px;
+  box-sizing: border-box;
+  @include on-tablet {
+    padding: 0 24px;
+  }
+  @include on-phone {
+    padding: 0 16px;
+  }
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 24px;
+    height: 41px;
+  }
+  &__title {
+    color: #f1f2f9;
+    font-family: 'Mont', Montserrat, sans-serif;
+    font-weight: 800;
+    font-size: 32px;
+    line-height: 41px;
+    letter-spacing: -0.01em;
+    margin: 0;
+  }
+  &__nav {
+    display: flex;
+    gap: 8px;
+  }
+  &__nav-btn {
+    width: 32px;
+    height: 32px;
+    background-color: transparent;
+    border: 1px solid #3b3e4a;
+    color: #f1f2f9;
+    font-size: 14px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: border-color 0.3s ease;
+    border-radius: 0;
+    &:hover {
+      border-color: #f1f2f9;
+    }
+  }
+  &__swiper {
+    width: 100%;
+  }
+  &__slide {
+    height: auto;
+  }
+  &__card {
+    display: flex;
+    flex-direction: column;
+    background-color: #161827;
+    border: 1px solid #3b3e4a;
+    padding: 32px;
+    height: 506px;
+    text-align: left;
+    transition: box-shadow 0.3s ease;
+    box-sizing: border-box;
+    width: 100%;
+    &:hover {
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
+    }
+    a {
+      display: flex;
+      flex-direction: column;
+      text-decoration: none;
+    }
+  }
+  &__card-image {
+    width: 100%;
+    height: 196px;
+    object-fit: contain;
+    margin-bottom: 16px;
+    display: block;
+    transition: transform 0.3s ease;
+    &:hover {
+      transform: scale(1.1);
+    }
+  }
+  &__card-title {
+    font-family: 'Mont', Montserrat, sans-serif;
+    font-size: 14px;
+    font-weight: 600;
+    margin: 0 0 8px 0;
+    color: #f1f2f9;
+    line-height: 21px;
+  }
+  &__card-prices {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 16px;
+    align-items: baseline;
+  }
+  &__card-price {
+    font-family: 'Mont', Montserrat, sans-serif;
+    font-size: 22px;
+    font-weight: 800;
+    color: #f1f2f9;
+    line-height: 31px;
+  }
+  &__card-old-price {
+    font-family: 'Mont', Montserrat, sans-serif;
+    font-size: 14px;
+    color: #75767f;
+    text-decoration: line-through;
+    font-weight: 600;
+    line-height: 21px;
+  }
+  &__card-specs {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 16px 0;
+    border-top: 1px solid #3b3e4a;
+    margin-bottom: 16px;
+  }
+  &__card-spec {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    line-height: 15px;
+  }
+  &__card-spec-label {
+    color: #75767f;
+    font-weight: 700;
+  }
+  &__card-spec-value {
+    color: #f1f2f9;
+    font-weight: 700;
+  }
+  &__card-actions {
+    margin-top: auto;
+    display: flex;
+    gap: 8px;
+  }
+  &__card-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
+    font-family: 'Mont', Montserrat, sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    border: none;
+    cursor: pointer;
+    transition:
+      background-color 0.3s ease,
+      border-color 0.3s ease;
+  }
+  &__card-btn--add {
+    flex: 1;
+    background-color: #905bff;
+    color: white;
+    &:hover {
+      background-color: #a378ff;
+    }
+    &:disabled {
+      background-color: #3b3e4a;
+      cursor: not-allowed;
+    }
+  }
+  &__card-btn--favorite {
+    width: 40px;
+    height: 40px;
+    background-color: transparent;
+    border: 1px solid #3b3e4a;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    &:hover {
+      border-color: #f1f2f9;
+    }
+  }
+  &__card-btn-icon {
+    width: 16px;
+    height: 16px;
+  }
+}