Phone catalog

package.json

@@ -7,16 +7,19 @@
   "license": "GPL-3.0",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.5.2",
+    "@reduxjs/toolkit": "^2.5.0",
     "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": "^11.2.1"
   },
   "devDependencies": {
     "@cypress/react18": "^2.0.1",
-    "@mate-academy/scripts": "^1.8.5",
+    "@mate-academy/scripts": "^1.9.12",
     "@mate-academy/students-ts-config": "*",
     "@mate-academy/stylelint-config": "*",
     "@types/node": "^20.14.10",

public/api/products.json

@@ -1119,62 +1119,6 @@
     "year": 2022,
     "image": "img/phones/apple-iphone-14/purple/00.webp"
   },
-  {
-    "id": 81,
-    "category": "phones",
-    "itemId": "apple-iphone-14-pro-128gb-spaceblack",
-    "name": "Apple iPhone 14 Pro 128GB Space Black",
-    "fullPrice": 1156,
-    "price": 1068,
-    "screen": "6.1' OLED",
-    "capacity": "128GB",
-    "color": "spaceblack",
-    "ram": "6GB",
-    "year": 2022,
-    "image": "img/phones/apple-iphone-14-pro/spaceblack/00.webp"
-  },
-  {
-    "id": 82,
-    "category": "phones",
-    "itemId": "apple-iphone-14-pro-256gb-spaceblack",
-    "name": "Apple iPhone 14 Pro 256GB Space Black",
-    "fullPrice": 1300,
-    "price": 1220,
-    "screen": "6.1' OLED",
-    "capacity": "256GB",
-    "color": "spaceblack",
-    "ram": "6GB",
-    "year": 2022,
-    "image": "img/phones/apple-iphone-14-pro/spaceblack/00.webp"
-  },
-  {
-    "id": 83,
-    "category": "phones",
-    "itemId": "apple-iphone-14-pro-512gb-spaceblack",
-    "name": "Apple iPhone 14 Pro 512GB Space Black",
-    "fullPrice": 1600,
-    "price": 1530,
-    "screen": "6.1' OLED",
-    "capacity": "512GB",
-    "color": "spaceblack",
-    "ram": "6GB",
-    "year": 2022,
-    "image": "img/phones/apple-iphone-14-pro/spaceblack/00.webp"
-  },
-  {
-    "id": 84,
-    "category": "phones",
-    "itemId": "apple-iphone-14-pro-1tb-spaceblack",
-    "name": "Apple iPhone 14 Pro 1TB Space Black",
-    "fullPrice": 1740,
-    "price": 1520,
-    "screen": "6.1' OLED",
-    "capacity": "1TB",
-    "color": "spaceblack",
-    "ram": "6GB",
-    "year": 2022,
-    "image": "img/phones/apple-iphone-14-pro/spaceblack/00.webp"
-  },
   {
     "id": 85,
     "category": "phones",
@@ -2715,4 +2659,4 @@
     "year": 2022,
     "image": "img/phones/apple-iphone-14-pro/gold/00.webp"
   }
-]
+]

src/App.scss

@@ -1 +1,75 @@
-// not empty
+@font-face {
+  font-family: Mont-Regular;
+  src: url(/public/fonts/Mont-Regular.otf);
+  font-weight: 600;
+}
+@font-face {
+  font-family: Mont-SemiBold;
+  src: url(/public/fonts/Mont-SemiBold.otf);
+  font-weight: 700;
+}
+@font-face {
+  font-family: Mont-Bold;
+  src: url(/public/fonts/Mont-Bold.otf);
+  font-weight: 800;
+}
+
+:root {
+  --primary: #0f0f11;
+  --secondary: #89939a;
+  text-transform: uppercase;
+}
+
+header {
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    background-color: white;
+}
+
+.layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.layout__content {
+  flex-grow: 1; /* Розтягуємо головний контент */
+}
+
+h1 {
+font-family: Mont-bold;
+font-size: 48px;
+font-weight: 800;
+line-height: 56px;
+}
+
+h2 {
+font-family: Mont-bold;
+font-size: 32px;
+font-weight: 800;
+line-height: 41px;
+}
+
+h3 {
+font-family: Mont-Bold;
+font-size: 22px;
+font-weight: 800;
+line-height: 30.8px;
+}
+
+h4 {
+font-family: Mont-SemiBold;
+font-size: 20px;
+font-weight: 700;
+line-height: 25.56px;
+
+}
+
+button:disabled, .disabled {
+  cursor: not-allowed;
+}
+
+a, button {
+  cursor: pointer;
+}