just save2

src/App.scss

@@ -18,3 +18,21 @@ button {
   flex-direction: column;
   min-height: 100vh;
 }
+
+h1 {
+  color: #313237;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  letter-spacing: -0.32px;
+}
+
+p {
+  font-family: "Montserrat", sans-serif;
+
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}

src/App.tsx

@@ -1,6 +1,6 @@
 import './App.scss';
 import { Route, Routes } from 'react-router-dom';
-import { Navigation } from './Components/Header';
+import { Navigation } from './Components/Navigation';
 import { HomePage } from './Pages/Home';
 import { NotFound } from './Pages/NotFound';
 import { PhonesPage } from './Pages/Phones';

src/Components/BrandNewModels.tsx

@@ -0,0 +1,27 @@
+import '../style/main.scss';
+
+export const BrandNewModels = () => {
+  return (
+    <div className="container--brand">
+      <div className="hot__prices">
+        <h1>Brand new models</h1>
+
+        <div className="button__container">
+          <button
+            type="button"
+            aria-label="Mute volume"
+            className="button button__left"
+          />
+          <button
+            type="button"
+            aria-label="Mute volume"
+            className="button button__right"
+          />
+        </div>
+      </div>
+
+      {/* <ProductCard /> */}
+
+    </div>
+  );
+};

src/Components/HotPrices.tsx

@@ -0,0 +1,28 @@
+import '../style/main.scss';
+import { ProductCard } from './ProductCard';
+
+export const HotPrices = () => {
+  return (
+    <div className="container--hot">
+      <div className="hot__prices">
+        <h1>Hot prices</h1>
+
+        <div className="button__container">
+          <button
+            type="button"
+            aria-label="Mute volume"
+            className="button button__left"
+          />
+          <button
+            type="button"
+            aria-label="Mute volume"
+            className="button button__right"
+          />
+        </div>
+      </div>
+
+      <ProductCard />
+
+    </div>
+  );
+};

src/Components/Navigation.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import classNames from 'classnames';
+import '../style/main.scss';
+
+const getActiveLink = ({ isActive }: { isActive: boolean }) => classNames(
+  'nav__link', { 'nav__link--active': isActive },
+);
+
+export const Navigation: React.FC = () => {
+  return (
+    <header>
+      <nav>
+        <div className="nav">
+          <div className="nav-buttom">
+            <NavLink
+              to="/"
+              className="nav__link icon icon__logo"
+            />
+
+            <NavLink
+              to="/"
+              className={getActiveLink}
+
+            >
+              Home
+            </NavLink>
+
+            <NavLink
+              to="/Phones"
+              className={getActiveLink}
+
+            >
+              Phones
+            </NavLink>
+
+            <NavLink
+              to="/Tablets"
+              className={getActiveLink}
+
+            >
+              Tablets
+            </NavLink>
+
+            <NavLink
+              to="/Accessories"
+              className={getActiveLink}
+
+            >
+              Accessories
+            </NavLink>
+
+          </div>
+          <div className="nav-buttom">
+            <NavLink
+              to="/Favourites"
+              className={({ isActive }) => classNames(
+                'icon icon__favourites',
+                {
+                  'icon__favourites--active': isActive,
+                },
+              )}
+            />
+
+            <NavLink
+              to="/Shopping"
+              className={({ isActive }) => classNames(
+                'nav__link icon icon__shopping',
+                {
+                  'icon__shopping--active': isActive,
+                },
+              )}
+            />
+
+          </div>
+        </div>
+      </nav>
+    </header>
+  );
+};

src/Components/ProductCard.tsx

@@ -0,0 +1,57 @@
+import AppleIphoneXs from '../images/TestForCard/AppleiPhoneXs.png';
+import '../style/main.scss';
+
+export const ProductCard = () => {
+  return (
+    <div className="product product__card">
+      <div className="product__photo">
+        <img
+          className="product__photo--img"
+          src={AppleIphoneXs}
+          alt="AppleiPhoneXs"
+        />
+      </div>
+
+      <div className="product__description">
+        <p className="product__text--body">
+          Apple iPhone Xs 64GB Silver (iMT9G2FS/A)
+        </p>
+
+        <div className="product__price">
+          <h2 className="product__price--current">$799</h2>
+          <h2 className="product__price--discount">$899</h2>
+        </div>
+
+        <div className="product__screen">
+          <p className="product__screen--name">Screen</p>
+          <p className="product__screen--value">5.8” OLED</p>
+        </div>
+
+        <div className="product__capacity">
+          <p className="product__capacity--name">Capacity</p>
+          <p className="product__capacity--value">64 GB</p>
+        </div>
+
+        <div className="product__ram">
+          <p className="product__ram--name">RAM</p>
+          <p className="product__ram--value">4 GB</p>
+        </div>
+
+        <div className="product__button">
+          <button
+            type="button"
+            className="product__ram--name"
+          >
+            Add to cart
+          </button>
+          <button
+            type="button"
+            className="product__ram--value"
+          >
+            4 GB
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

src/Components/ShopByCategory.tsx

@@ -0,0 +1,12 @@
+import '../style/main.scss';
+
+export const ShopByCategory = () => {
+  return (
+    <div className="container--shop">
+      <h1>Shop by category</h1>
+
+      {/* <ProductCard /> */}
+
+    </div>
+  );
+};

src/Components/Slider.tsx

@@ -0,0 +1,78 @@
+// /* eslint-disable jsx-a11y/control-has-associated-label */
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import '../style/main.scss';
+// import { client } from '../utils/fetchClient';
+import bannerPhones from '../images/banner/banner-phones.png';
+import bannerTablets from '../images/banner/banner-tablets.png';
+import bannerAccessories from '../images/banner/banner-accessories.png';
+
+const IMAGES = [
+  { id: 0, url: bannerPhones },
+  { id: 1, url: bannerTablets },
+  { id: 2, url: bannerAccessories },
+];
+
+export const Banner: React.FC = () => {
+  const [currentIndex, setcurrentIndex] = useState(IMAGES[0].id);
+
+  const preperaBanner = IMAGES.filter(img => img.id === currentIndex);
+
+  const previousBanner = () => {
+    let upperNumber = currentIndex - 1;
+
+    if (upperNumber < 0) {
+      upperNumber = IMAGES.length - 1;
+    }
+
+    setcurrentIndex(upperNumber);
+  };
+
+  const nextBanner = () => {
+    let upperNumber = currentIndex + 1;
+
+    if (upperNumber > IMAGES.length - 1) {
+      upperNumber = 0;
+    }
+
+    setcurrentIndex(upperNumber);
+  };
+
+  return (
+    <div className="container--slider" data-cy="cardsContainer">
+      <div className="slider">
+        <button
+          type="button"
+          aria-label="Mute volume"
+          className="arrow arrow__left"
+          onClick={() => previousBanner()}
+        />
+        <img src={preperaBanner[0].url} alt="Banner" className="slider--img" />
+        <button
+          type="button"
+          aria-label="Mute volume"
+          className="arrow arrow__right"
+          onClick={() => nextBanner()}
+        />
+
+      </div>
+      <div className="slider__lower">
+
+        {
+          IMAGES.map((img) => (
+            <div key={img.id}>
+              <button
+                type="button"
+                aria-label="Mute volume"
+                className={classNames('slider__button', {
+                  'slider__button--active': currentIndex === img.id,
+                })}
+                onClick={() => setcurrentIndex(img.id)}
+              />
+            </div>
+          ))
+        }
+      </div>
+    </div>
+  );
+};