From 984a9da2f40e121ebba4a247e2c56c9691e28810 Mon Sep 17 00:00:00 2001
From: RimmaBuzuluk <rimmysya2000@gmail.com>
Date: Tue, 17 Sep 2024 13:11:44 +0300
Subject: [PATCH 1/3] add cart layout

---
 src/App.tsx                                   |   7 +-
 src/components/Header/Header.scss             |  36 ++++--
 src/components/Header/Header.tsx              |  22 +++-
 .../Header/NavHeader/NavHeader.scss           |   2 +-
 src/img/arrowActive/ArrowLeft.png             | Bin 215 -> 309 bytes
 src/img/imageIphone.png                       | Bin 0 -> 16783 bytes
 src/pages/CartPage/CartItem/CartItem.scss     |  80 ++++++++++++++
 src/pages/CartPage/CartItem/CartItem.tsx      |  34 ++++++
 src/pages/CartPage/CartPage.scss              |  78 +++++++++++++
 src/pages/CartPage/CartPage.tsx               | 103 +++++++++++++++++-
 src/pages/MainPage/MainPage.tsx               |   4 +-
 src/pages/NotFoundPage/NotFoundPage.scss      |   4 +-
 src/styles/base/buttons.scss                  |   9 ++
 src/styles/main.scss                          |   4 +
 src/styles/utils/_mixins.scss                 |  82 ++++++++++----
 src/styles/utils/_variables.scss              |   2 +-
 src/type/Cart.ts                              |   7 ++
 17 files changed, 430 insertions(+), 44 deletions(-)
 create mode 100644 src/img/imageIphone.png
 create mode 100644 src/pages/CartPage/CartItem/CartItem.scss
 create mode 100644 src/pages/CartPage/CartItem/CartItem.tsx
 create mode 100644 src/pages/CartPage/CartPage.scss
 create mode 100644 src/styles/base/buttons.scss
 create mode 100644 src/type/Cart.ts

diff --git a/src/App.tsx b/src/App.tsx
index e035bc7..e2cf031 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,13 +1,13 @@
 import { Header } from './components/Header';
 import { Footer } from './components/Footer';
 import { Navigate, Route, Routes } from 'react-router-dom';
-import { MainPage } from './pages/MainPage';
+
 import { PhonesPage } from './pages/PhonesPage/PhonesPage';
 import { TabletsPage } from './pages/TabletspPage/TabletsPage';
 import { AccessoriesPage } from './pages/AccessoriesPage/AccessoriesPage';
 import { NotFoundPage } from './pages/NotFoundPage';
 import { CartPage } from './pages/CartPage/CartPage';
-// import { MainPage } from './pages/MainPage';
+import { MainPage } from './pages/MainPage';
 
 export const App = () => {
   return (
@@ -22,6 +22,9 @@ export const App = () => {
         <Route path="/accessories" element={<AccessoriesPage />} />
         <Route path="/cart" element={<CartPage />} />
         <Route path="*" element={<NotFoundPage />} />
+        {/* <Route path="/" element={<App />}>
+          <Route path="*" element={<NotFoundPage />} />
+        </Route> */}
       </Routes>
       <Footer />
     </>
diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
index d5617f7..b19da48 100644
--- a/src/components/Header/Header.scss
+++ b/src/components/Header/Header.scss
@@ -2,9 +2,9 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-bottom: 1px solid #e2e6e9;
+  border-bottom: 1px solid $elemnts-color;
   position: relative;
-
+  background-color: #fff;
   &__menu {
     display: flex;
     align-items: center;
@@ -67,10 +67,6 @@
         margin: 24px;
         display: block;
       }
-
-      // @include onMobile {
-      //   display: none;
-      // }
     }
 
     &--menu {
@@ -90,8 +86,8 @@
 
   &__icon--like {
     display: block;
-    border-right: 1px solid #e2e6e9;
-    border-left: 1px solid #e2e6e9;
+    border-right: 1px solid $elemnts-color;
+    border-left: 1px solid $elemnts-color;
     display: none;
 
     @include onTablet {
@@ -101,11 +97,31 @@
 
   &__icon--menu {
     display: block;
-    border-right: 1px solid #e2e6e9;
-    border-left: 1px solid #e2e6e9;
+    border-right: 1px solid $elemnts-color;
+    border-left: 1px solid $elemnts-color;
 
     @include onTablet {
       display: none;
     }
   }
+  &__icon--basket {
+    position: relative;
+  }
+  &__icon--active {
+    &::after {
+      content: '';
+      position: absolute;
+      display: block;
+      width: 100%;
+      height: 3px;
+
+      @include onTablet {
+        bottom: -18px;
+      }
+      @include onDesktop {
+        bottom: 0px;
+      }
+      background-color: #000;
+    }
+  }
 }
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 5c8d18f..82457b2 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -3,6 +3,7 @@ import { NavHeader } from './NavHeader';
 import './Header.scss';
 import logo from '../../img/Logo.png';
 import { NavLink } from 'react-router-dom';
+import classNames from 'classnames';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 type Props = {};
@@ -21,9 +22,24 @@ export const Header: React.FC<Props> = () => {
         <div className="header__icon--like">
           <div className="header__icons--like"></div>
         </div>
-        <div className="header__icon--basket">
-          <NavLink to="/cart" className="header__icons--basket"></NavLink>
-        </div>
+        <NavLink
+          to="/cart"
+          // className="header__icon--basket"
+          className={({ isActive }) =>
+            classNames('header__icon--basket', {
+              'header__icon--active': isActive,
+            })
+          }
+        >
+          <div
+            className="header__icons--basket"
+            // className={({ isActive }) =>
+            //   classNames('header__icons--basket', {
+            //     'header__icons--active': isActive,
+            //   })
+            // }
+          ></div>
+        </NavLink>
         <div className="header__icon--menu">
           <div className="header__icons--menu"></div>
         </div>
diff --git a/src/components/Header/NavHeader/NavHeader.scss b/src/components/Header/NavHeader/NavHeader.scss
index 5a0cfb0..3e70938 100644
--- a/src/components/Header/NavHeader/NavHeader.scss
+++ b/src/components/Header/NavHeader/NavHeader.scss
@@ -15,7 +15,7 @@
     font-size: 12px;
     line-height: 11px;
     letter-spacing: 4%;
-    color: #89939a;
+    color: $secondary-color;
     @include onTablet {
       &:not(:last-child) {
         margin-right: 36px;
diff --git a/src/img/arrowActive/ArrowLeft.png b/src/img/arrowActive/ArrowLeft.png
index d6b7f083501a00724a7cabdac27fd9051cf3167d..cb33270a71e7287d701664d1bdb7496f65b859e0 100644
GIT binary patch
delta 287
zcmcc4xRuGQGr-TCmrII^fq{Y7)59eQNGpIa2OE$quB!S1q&N#aB8wRq#8g3;(KATp
z!$dQM`cs}Rjv*C{Z>QPv9Wvl)o$nZ0e^tuwlJb+ZDYGxmHZV$C92+IHF(tu6TA1yV
zr=*N#)p_SP>?%V4&j~h}@UC8^RWWNBd(!1?H7|Ev&f+)LzF*GHk#Mv#qhOs$(!;WU
z@BY~+h<Vy{x{I#Qez#xooh|z&o;TM{H;FP;^d}j|y-!Gu6mU3o%_X2RE^*#`Wu_Zj
zxO+NhZ|OXH+T+%db-5auN#Cue83|5dSMgzCpX9IRV|y$9@#i=d{*1Nki@v^!dni6b
i<x0M%bEnIpPfQsH^1g6}%Wwld%i!ti=d#Wzp$PyV=4`(J

delta 193
zcmdnWbe++xGr-TCmrII^fq{Y7)59eQNV5Sk7YB%(&Zln-q&N#aB8wRqxP?KOkzv*x
ziHT+k^*Np{jv*C{wY|1{4GKK1(bhkV9lkEAVzz8@zjXHT2^Ad$Dbt3|{ES)ey?+aA
z;yAeX`+{zsz77jPM)iPG*Nn?w$s2wC(5RT-Ui={0@z{*5>$G`xYn^6Wb9cJ;9OV<1
o)4$AFw&{|{|Gi83YHu@2rt8!MZ=UxE=o$u3S3j3^PD}|+0216ojsO4v

diff --git a/src/img/imageIphone.png b/src/img/imageIphone.png
new file mode 100644
index 0000000000000000000000000000000000000000..f913d2612244c1481f1ac3c0d1d8f3fa7966f5f5
GIT binary patch
literal 16783
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
CJ<tFE

literal 0
HcmV?d00001

diff --git a/src/pages/CartPage/CartItem/CartItem.scss b/src/pages/CartPage/CartItem/CartItem.scss
new file mode 100644
index 0000000..06c7f67
--- /dev/null
+++ b/src/pages/CartPage/CartItem/CartItem.scss
@@ -0,0 +1,80 @@
+.cartItem {
+  align-items: center;
+  border: 1px solid $elemnts-color;
+  background-color: #fff;
+  border-radius: 16px;
+  padding: 16px;
+  grid-column: 1/-1;
+  @include onTablet {
+    padding: 24px;
+    grid-column: 1/-1;
+  }
+  @include onDesktop {
+    grid-column: 1/-10;
+  }
+
+  &__close {
+    width: 16px;
+    height: 16px;
+    background-image: url(../../../img/icon/Close.png);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+  &__count {
+    display: flex;
+    align-items: center;
+    &--button {
+      background-color: #fff;
+      display: block;
+      width: 32px;
+      height: 32px;
+      border: 1px solid $elemnts-color;
+      border-radius: 32px;
+      padding: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      &-minus {
+        width: 16px;
+        height: 16px;
+      }
+      &-plus {
+        width: 16px;
+        height: 16px;
+      }
+    }
+    &__number {
+      margin-left: 8px;
+      margin-right: 8px;
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 21px;
+    }
+  }
+  &__name {
+    width: 128px;
+  }
+  &__price {
+    color: $primary-color;
+    font-weight: 800;
+    font-size: 22px;
+    line-height: 30px;
+  }
+  &:not(:last-child) {
+    margin-bottom: 16px;
+  }
+}
+.block {
+  &__information {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+  }
+  &__price {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
diff --git a/src/pages/CartPage/CartItem/CartItem.tsx b/src/pages/CartPage/CartItem/CartItem.tsx
new file mode 100644
index 0000000..e2beaa8
--- /dev/null
+++ b/src/pages/CartPage/CartItem/CartItem.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Cart } from '../../../type/Cart';
+import minus from '../../../img/icon/Minus.png';
+import plus from '../../../img/icon/Plus.png';
+import './CartItem.scss';
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+type Props = {
+  cart: Cart;
+};
+
+export const CartItem: React.FC<Props> = ({ cart }) => {
+  return (
+    <div className="cartItem">
+      <div className="block__information">
+        <div className="cartItem__close"></div>
+        <img src={cart.img} />
+        <div className="cartItem__name">{cart.title}</div>
+      </div>
+
+      <div className="block__price">
+        <div className="cartItem__count">
+          <button className="cartItem__count--button">
+            <img src={minus} className="cartItem__count--button-minus" />
+          </button>
+          <div className="cartItem__count__number">{cart.count}</div>
+          <button className="cartItem__count--button">
+            <img src={plus} className="cartItem__count--button-plus" />
+          </button>
+        </div>
+        <div className="cartItem__price">${cart.price}</div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/pages/CartPage/CartPage.scss b/src/pages/CartPage/CartPage.scss
new file mode 100644
index 0000000..3f00ede
--- /dev/null
+++ b/src/pages/CartPage/CartPage.scss
@@ -0,0 +1,78 @@
+.cart {
+  @include mainContentGrid;
+
+  &__rout {
+    display: flex;
+    margin-top: 24px;
+    margin-bottom: 16px;
+    &__img {
+      width: 16px;
+      height: 16px;
+      background-image: url(../../img/arrowActive/ArrowLeft.png);
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+    &__name {
+      font-weight: 700;
+      color: #89939a;
+      font-size: 12px;
+      line-height: 15px;
+      margin-left: 4px;
+    }
+  }
+  &__title {
+    font-weight: 800;
+    font-size: 32px;
+    line-height: 41px;
+    letter-spacing: -1%;
+    margin-bottom: 32px;
+    @include onTablet {
+      font-size: 48px;
+      line-height: 56px;
+    }
+  }
+  &__items {
+    @include mainPageGrid;
+    grid-column: 1/-1;
+  }
+  &__total-count {
+    border: 1px solid $elemnts-color;
+    border-radius: 16px;
+    padding: 24px;
+    margin-bottom: 56px;
+    grid-column: 1/-1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    @include onDesktop {
+      grid-column: 17/-1;
+      grid-row: 1;
+    }
+    &__price {
+      color: #0f0f11;
+      font-weight: 800;
+      font-size: 32px;
+      letter-spacing: -1%;
+    }
+    &__text {
+      color: $secondary-color;
+      font-weight: 600;
+      font-size: 14px;
+      line-height: 21px;
+    }
+    &__line {
+      height: 1px;
+      width: 100%;
+      background-color: $elemnts-color;
+      margin: 16px 0;
+      @include onDesktop {
+        margin: 25px 0 24px 0;
+      }
+    }
+    &__button-checkout {
+      width: 100%;
+      height: 48px;
+    }
+  }
+}
diff --git a/src/pages/CartPage/CartPage.tsx b/src/pages/CartPage/CartPage.tsx
index a95d62e..b11d607 100644
--- a/src/pages/CartPage/CartPage.tsx
+++ b/src/pages/CartPage/CartPage.tsx
@@ -1,7 +1,108 @@
 import React from 'react';
+import iphone from '../../img/imageIphone.png';
+import './CartPage.scss';
+import '../../styles/base/buttons.scss';
+import { CartItem } from './CartItem/CartItem';
+import { Cart } from '../../type/Cart';
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 type Props = {};
 
+const cartItems = [
+  {
+    id: 1,
+    title: 'Apple iPhone 14 Pro 128GB Silver (MQ023)',
+    img: iphone,
+    price: 29.99,
+    count: 1,
+  },
+  {
+    id: 2,
+    title: 'Item 2',
+    img: iphone,
+    price: 49.99,
+    count: 2,
+  },
+  {
+    id: 3,
+    title: 'Item 3',
+    img: iphone,
+    price: 19.99,
+    count: 3,
+  },
+  {
+    id: 4,
+    title: 'Item 4',
+    img: iphone,
+    price: 99.99,
+    count: 1,
+  },
+  {
+    id: 5,
+    title: 'Item 5',
+    img: iphone,
+    price: 39.99,
+    count: 4,
+  },
+  {
+    id: 6,
+    title: 'Item 6',
+    img: iphone,
+    price: 59.99,
+    count: 2,
+  },
+  {
+    id: 7,
+    title: 'Item 7',
+    img: iphone,
+    price: 25.99,
+    count: 1,
+  },
+  {
+    id: 8,
+    title: 'Item 8',
+    img: iphone,
+    price: 75.99,
+    count: 3,
+  },
+  {
+    id: 9,
+    title: 'Item 9',
+    img: iphone,
+    price: 89.99,
+    count: 2,
+  },
+  {
+    id: 10,
+    title: 'Item 10',
+    img: iphone,
+    price: 15.99,
+    count: 5,
+  },
+];
+
 export const CartPage: React.FC<Props> = () => {
-  return <>Cart page</>;
+  return (
+    <div className="cart">
+      <div className="cart__rout">
+        <div className="cart__rout__img"></div>
+        <div className="cart__rout__name">Back</div>
+      </div>
+
+      <div className="cart__title">Cart</div>
+      <div className="cart__items">
+        {cartItems.map((cartItem: Cart) => (
+          <CartItem key={cartItem.id} cart={cartItem} />
+        ))}
+
+        <div className="cart__total-count">
+          <div className="cart__total-count__price">$2000</div>
+          <div className="cart__total-count__text">Total for 3 items</div>
+          <div className="cart__total-count__line"></div>
+          <button className="cart__total-count__button-checkout main__button">
+            Checkout
+          </button>
+        </div>
+      </div>
+    </div>
+  );
 };
diff --git a/src/pages/MainPage/MainPage.tsx b/src/pages/MainPage/MainPage.tsx
index d70fd07..73b587f 100644
--- a/src/pages/MainPage/MainPage.tsx
+++ b/src/pages/MainPage/MainPage.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import './MainPage.scss';
 import { Main } from '../../components/Main';
+// import { Outlet } from 'react-router-dom';
 // import { Header } from '../../components/Header';
 // import { Footer } from '../../components/Footer';
 
@@ -13,7 +14,8 @@ export const MainPage: React.FC<Props> = () => {
       {/* <Header /> */}
       <div className="main-page">
         <Main />
-        {/* <Footer /> */}
+        {/* <Outlet />
+        <Footer /> */}
       </div>
     </>
   );
diff --git a/src/pages/NotFoundPage/NotFoundPage.scss b/src/pages/NotFoundPage/NotFoundPage.scss
index 92ce04a..c68fef6 100644
--- a/src/pages/NotFoundPage/NotFoundPage.scss
+++ b/src/pages/NotFoundPage/NotFoundPage.scss
@@ -1,11 +1,12 @@
 .not-found {
-  grid-column: 1 / -1;
+  @include mainPageGrid;
 
   &__title {
     font-size: pxToRem(20);
     font-weight: 780;
     margin-top: 16px;
     margin-bottom: 4px;
+    grid-column: 1/-1;
 
     @include onTablet {
       font-size: pxToRem(30);
@@ -31,6 +32,7 @@
     font-weight: 500;
     line-height: 21px;
     margin-bottom: 14px;
+    grid-column: 1/-1;
   }
 
   &__link {
diff --git a/src/styles/base/buttons.scss b/src/styles/base/buttons.scss
new file mode 100644
index 0000000..8c7f355
--- /dev/null
+++ b/src/styles/base/buttons.scss
@@ -0,0 +1,9 @@
+.main__button {
+  background-color: $accent-color;
+  color: #fff;
+  font-size: 14px;
+  line-height: 21px;
+  font-weight: 700;
+  border: none;
+  border-radius: 48px;
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 2c043a0..8fa8723 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,2 +1,6 @@
 @import './base/reset';
 @import './base/typography';
+
+body {
+  background-color: $hover-plus-background-color;
+}
diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss
index fc2ee09..401ae87 100644
--- a/src/styles/utils/_mixins.scss
+++ b/src/styles/utils/_mixins.scss
@@ -18,41 +18,75 @@
 
 @mixin mainPageGrid() {
   display: grid;
-  justify-content: center;
+  column-gap: 16px;
 
-  @include onMobile {
-    grid-template-columns: repeat(4, 60px);
-    column-gap: 16px;
-    margin-inline: 16px;
-    row-gap: 64px;
-  }
+  --columns: 4;
+  // row-gap: 64px;
+  // margin-inline: 16px;
 
+  grid-template-columns: repeat(var(--columns), 1fr);
   @include onTablet {
-    grid-template-columns: repeat(12, 32px);
-    column-gap: 16px;
-    margin-inline: 24px;
-    row-gap: 80px;
+    --columns: 12;
+    // row-gap: 80px;
   }
-
   @include onDesktop {
-    grid-template-columns: repeat(24, 32px);
-    column-gap: 16px;
-    row-gap: 80px;
+    --columns: 24;
   }
+
+  // justify-content: center;
+
+  // @include onMobile {
+  // grid-template-columns: repeat(4, 60px);
+  // column-gap: 16px;
+  // margin-inline: 16px;
+  // row-gap: 64px;
+  // }
+
+  // @include onTablet {
+  //   grid-template-columns: repeat(12, 32px);
+  //   column-gap: 16px;
+  //   margin-inline: 24px;
+  //   row-gap: 80px;
+  // }
+
+  // @include onDesktop {
+  //   grid-template-columns: repeat(24, 32px);
+  //   column-gap: 16px;
+  //   row-gap: 80px;
+  // }
 }
 
 @mixin mainContentGrid() {
-  display: grid;
-
-  @include onMobile {
-    row-gap: 64px;
-  }
+  padding: 0 16px;
+  max-width: 1200px;
+  margin: 0 auto;
+  // display: grid;
 
   @include onTablet {
-    row-gap: 80px;
+    padding: 0 24px;
   }
 
-  @include onDesktop {
-    row-gap: 80px;
-  }
+  // @include onTablet {
+  //   row-gap: 80px;
+  // }
+
+  // @include onDesktop {
+  //   row-gap: 80px;
+  // }
 }
+
+// @mixin mainContentGrid() {
+//   display: grid;
+
+//   @include onMobile {
+//     row-gap: 64px;
+//   }
+
+//   @include onTablet {
+//     row-gap: 80px;
+//   }
+
+//   @include onDesktop {
+//     row-gap: 80px;
+//   }
+// }
diff --git a/src/styles/utils/_variables.scss b/src/styles/utils/_variables.scss
index cdb46c8..9516e07 100644
--- a/src/styles/utils/_variables.scss
+++ b/src/styles/utils/_variables.scss
@@ -6,7 +6,7 @@ $icons-color: #b4bdc3;
 $elemnts-color: #e2e6e9;
 $hover-plus-background-color: #fafbfc;
 $white-color: #fff;
-
+// #FAFBFC
 $button-hover-shadow: 0px 1px 13px 0px #17203166;
 
 $font-family: 'Montserrat', sans-serif;
diff --git a/src/type/Cart.ts b/src/type/Cart.ts
new file mode 100644
index 0000000..37d5556
--- /dev/null
+++ b/src/type/Cart.ts
@@ -0,0 +1,7 @@
+export type Cart = {
+  id: number;
+  title: string;
+  img: string;
+  price: number;
+  count: number;
+};

From 10a5ecafd07918a4e3a3b9daf5f361022d9295d7 Mon Sep 17 00:00:00 2001
From: RimmaBuzuluk <rimmysya2000@gmail.com>
Date: Tue, 17 Sep 2024 14:11:42 +0300
Subject: [PATCH 2/3] add routers and outlet

---
 src/App.tsx  | 24 +++---------------------
 src/Root.tsx | 24 ++++++++++++++++++++++--
 2 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index e2cf031..6057ea4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,31 +1,13 @@
 import { Header } from './components/Header';
 import { Footer } from './components/Footer';
-import { Navigate, Route, Routes } from 'react-router-dom';
-
-import { PhonesPage } from './pages/PhonesPage/PhonesPage';
-import { TabletsPage } from './pages/TabletspPage/TabletsPage';
-import { AccessoriesPage } from './pages/AccessoriesPage/AccessoriesPage';
-import { NotFoundPage } from './pages/NotFoundPage';
-import { CartPage } from './pages/CartPage/CartPage';
-import { MainPage } from './pages/MainPage';
+import { Outlet } from 'react-router-dom';
 
 export const App = () => {
   return (
     <>
       <Header />
-      <Routes>
-        <Route index element={<MainPage />} />
-        <Route path="/home" element={<Navigate to="/" replace />} />
-        <Route path="/phones" element={<PhonesPage />} />
-        <Route path="/phones/:phoneId" element={<PhonesPage />} />
-        <Route path="/tablets" element={<TabletsPage />} />
-        <Route path="/accessories" element={<AccessoriesPage />} />
-        <Route path="/cart" element={<CartPage />} />
-        <Route path="*" element={<NotFoundPage />} />
-        {/* <Route path="/" element={<App />}>
-          <Route path="*" element={<NotFoundPage />} />
-        </Route> */}
-      </Routes>
+      <Outlet />
+
       <Footer />
     </>
   );
diff --git a/src/Root.tsx b/src/Root.tsx
index b9f1827..74dbcd0 100644
--- a/src/Root.tsx
+++ b/src/Root.tsx
@@ -1,15 +1,35 @@
 import { StrictMode } from 'react';
 import { Provider } from 'react-redux';
 import { store } from './app/store';
-import { HashRouter } from 'react-router-dom';
+import { HashRouter, Navigate, Route, Routes } from 'react-router-dom';
 import App from './App';
+import { MainPage } from './pages/MainPage';
+// import { PhonesPage } from './pages/PhonesPage/PhonesPage';
+import { TabletsPage } from './pages/TabletspPage/TabletsPage';
+import { AccessoriesPage } from './pages/AccessoriesPage/AccessoriesPage';
+import { CartPage } from './pages/CartPage/CartPage';
+import { NotFoundPage } from './pages/NotFoundPage';
+import { PhonesPage } from './pages/PhonesPage/PhonesPage';
 
 export const Root = () => {
   return (
     <StrictMode>
       <Provider store={store}>
         <HashRouter>
-          <App />
+          <Routes>
+            <Route path="/" element={<App />}>
+              <Route index element={<MainPage />} />
+              <Route path="home" element={<Navigate to="/" replace />} />
+              <Route path="phones">
+                <Route path=":phoneId?" element={<PhonesPage />} />
+              </Route>
+
+              <Route path="tablets" element={<TabletsPage />} />
+              <Route path="accessories" element={<AccessoriesPage />} />
+              <Route path="cart" element={<CartPage />} />
+              <Route path="*" element={<NotFoundPage />} />
+            </Route>
+          </Routes>
         </HashRouter>
       </Provider>
     </StrictMode>

From ed883acec7f173f42a986e11e713cd735e35ce40 Mon Sep 17 00:00:00 2001
From: RimmaBuzuluk <rimmysya2000@gmail.com>
Date: Tue, 17 Sep 2024 16:23:20 +0300
Subject: [PATCH 3/3] in progress

---
 src/App.tsx                               | 1 -
 src/Root.tsx                              | 1 -
 src/pages/CartPage/CartItem/CartItem.scss | 1 +
 src/pages/CartPage/CartItem/CartItem.tsx  | 2 +-
 4 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 6057ea4..1b9fd61 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,7 +7,6 @@ export const App = () => {
     <>
       <Header />
       <Outlet />
-
       <Footer />
     </>
   );
diff --git a/src/Root.tsx b/src/Root.tsx
index 74dbcd0..8e8a9e9 100644
--- a/src/Root.tsx
+++ b/src/Root.tsx
@@ -4,7 +4,6 @@ import { store } from './app/store';
 import { HashRouter, Navigate, Route, Routes } from 'react-router-dom';
 import App from './App';
 import { MainPage } from './pages/MainPage';
-// import { PhonesPage } from './pages/PhonesPage/PhonesPage';
 import { TabletsPage } from './pages/TabletspPage/TabletsPage';
 import { AccessoriesPage } from './pages/AccessoriesPage/AccessoriesPage';
 import { CartPage } from './pages/CartPage/CartPage';
diff --git a/src/pages/CartPage/CartItem/CartItem.scss b/src/pages/CartPage/CartItem/CartItem.scss
index 06c7f67..6ced665 100644
--- a/src/pages/CartPage/CartItem/CartItem.scss
+++ b/src/pages/CartPage/CartItem/CartItem.scss
@@ -5,6 +5,7 @@
   border-radius: 16px;
   padding: 16px;
   grid-column: 1/-1;
+
   @include onTablet {
     padding: 24px;
     grid-column: 1/-1;
diff --git a/src/pages/CartPage/CartItem/CartItem.tsx b/src/pages/CartPage/CartItem/CartItem.tsx
index e2beaa8..f582e57 100644
--- a/src/pages/CartPage/CartItem/CartItem.tsx
+++ b/src/pages/CartPage/CartItem/CartItem.tsx
@@ -3,6 +3,7 @@ import { Cart } from '../../../type/Cart';
 import minus from '../../../img/icon/Minus.png';
 import plus from '../../../img/icon/Plus.png';
 import './CartItem.scss';
+
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 type Props = {
   cart: Cart;
@@ -16,7 +17,6 @@ export const CartItem: React.FC<Props> = ({ cart }) => {
         <img src={cart.img} />
         <div className="cartItem__name">{cart.title}</div>
       </div>
-
       <div className="block__price">
         <div className="cartItem__count">
           <button className="cartItem__count--button">