+
+ );
+};
diff --git a/src/modules/FavoritesPage/index.ts b/src/modules/FavoritesPage/index.ts
new file mode 100644
index 0000000000..b3a884b188
--- /dev/null
+++ b/src/modules/FavoritesPage/index.ts
@@ -0,0 +1 @@
+export * from './FavoritesPage';
diff --git a/src/modules/HomePage/HomePage.scss b/src/modules/HomePage/HomePage.scss
new file mode 100644
index 0000000000..c9b913ea80
--- /dev/null
+++ b/src/modules/HomePage/HomePage.scss
@@ -0,0 +1,38 @@
+@import '../../styles/main';
+
+.homePage {
+ &__title {
+ margin-block: 24px;
+ font-family: Mont-Bold, sans-serif;
+ color: var(--color-gray-primary);
+ font-size: 32px;
+ font-weight: 800;
+ line-height: 41px;
+ letter-spacing: -0.01em;
+
+ @include content-padding-inline;
+
+
+ @include on-tablet {
+ font-size: 48px;
+ line-height: 56px;
+ margin-block: 32px;
+ }
+
+ @include on-desktop {
+ margin-block: 56px;
+ }
+ }
+
+ &__hidden {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ margin: -1px;
+ padding: 0;
+ border: 0;
+ clip: rect(0, 0, 0, 0);
+ clip-path: inset(50%);
+ overflow: hidden;
+ }
+}
diff --git a/src/modules/HomePage/HomePage.tsx b/src/modules/HomePage/HomePage.tsx
new file mode 100644
index 0000000000..f70faa3e72
--- /dev/null
+++ b/src/modules/HomePage/HomePage.tsx
@@ -0,0 +1,46 @@
+import './HomePage.scss';
+import { useContext } from 'react';
+import { PicturesSlider } from './components/PicturesSlider';
+import { ShopByCategory } from './components/ShopByCategory';
+import { GlobalContext } from '../../store/GlobalContext';
+import { ProductsSlider } from '../shared/ProductsSlider';
+
+export const HomePage: React.FC = () => {
+ const { allProducts } = useContext(GlobalContext);
+
+ const newestPhones = [...allProducts]
+ .filter(product => product.category === 'phones')
+ .sort((phone1, phone2) => phone2.year - phone1.year)
+ .slice(0, 20);
+
+ const hotPricesProducts = [...allProducts]
+ .map(product => ({
+ ...product,
+ discount: ((product.fullPrice - product.price) / product.fullPrice) * 100,
+ }))
+ .sort((product1, product2) => product2.discount - product1.discount)
+ .slice(0, 20);
+
+ return (
+ {normalizeProductsType}
+ + + {`${countFavorites} ${countFavorites === 1 ? 'model' : 'models'}`} + + + {countFavorites === 0 && query.length > 0 ? ( +
+ {`There are no ${normalizeProductsType.toLowerCase()} matching the query`}
+
+ ) : countFavorites === 0 ? (
+ Favorites is empty
+ ) : (
+
+
+ )}
+
+
+ );
+};
diff --git a/src/modules/HomePage/components/PicturesSlider/PicturesSlider.scss b/src/modules/HomePage/components/PicturesSlider/PicturesSlider.scss
new file mode 100644
index 0000000000..4ed2de7606
--- /dev/null
+++ b/src/modules/HomePage/components/PicturesSlider/PicturesSlider.scss
@@ -0,0 +1,110 @@
+@import '../../../../styles/main';
+
+.picturesSlider {
+ margin-bottom: 56px;
+
+ @include on-tablet {
+ @include content-padding-inline;
+
+ margin-bottom: 64px;
+ }
+
+ @include on-desktop {
+ margin-bottom: 80px;
+ }
+}
+
+.picturesSlider__container {
+ display: flex;
+ justify-content: center;
+ width: 100%;
+}
+
+.picturesSlider__button {
+ display: none;
+
+ transition: border-color 0.3s ease, background-color 0.3s ease;
+
+ @include on-tablet {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ background-color: var(--color-bg);
+ border: 1px solid var(--color-gray-icons-placeholders);
+ cursor: pointer;
+ }
+}
+
+.picturesSlider__button:hover {
+ border-color: var(--color-gray-primary);
+ background-color: var(--color-hover);
+}
+
+body.theme_dark .picturesSlider__button {
+ border: none;
+ background-color: var(--color-surface-2);
+}
+
+body.theme_dark .picturesSlider__button:hover {
+ background-color: var(--color-gray-icons-placeholders);
+}
+
+.picturesSlider__container-image {
+ position: relative;
+ width: 100%;
+ aspect-ratio: 1 / 1;
+
+ @include on-tablet {
+ min-height: 189px;
+ max-height: 400px;
+ margin-inline: 16px;
+ flex-grow: 1;
+ aspect-ratio: 400 / 189;
+ }
+}
+
+.picturesSlider__image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+
+ position: absolute;
+ top: 0;
+ left: 0;
+ transition: opacity 0.5s ease-in-out;
+ opacity: 0;
+
+ &--active {
+ opacity: 1;
+ }
+}
+
+.picturesSlider__dots {
+ height: 24px;
+ display: flex;
+ margin: 0 auto;
+ justify-content: center;
+}
+
+.picturesSlider__dot {
+ width: 24px;
+ height: 24px;
+ cursor: pointer;
+ position: relative;
+}
+
+.picturesSlider__dot::after {
+ content: '';
+ position: absolute;
+ width: 14px;
+ height: 4px;
+ background-color: var(--color-gray-elements);
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.picturesSlider__dot--active::after {
+ background-color: var(--color-gray-primary);
+}
diff --git a/src/modules/HomePage/components/PicturesSlider/PicturesSlider.tsx b/src/modules/HomePage/components/PicturesSlider/PicturesSlider.tsx
new file mode 100644
index 0000000000..f4831355e1
--- /dev/null
+++ b/src/modules/HomePage/components/PicturesSlider/PicturesSlider.tsx
@@ -0,0 +1,122 @@
+import React, { useState, useEffect, useRef, useContext } from 'react';
+import './PicturesSlider.scss';
+import { Icon } from '../../../shared/Icon';
+import { iconsObject } from '../../../../constants/iconsObject';
+import { GlobalContext } from '../../../../store/GlobalContext';
+
+export const PicturesSlider: React.FC = () => {
+ const images = [
+ 'img/banner-phones.png',
+ 'img/banner-accessories.png',
+ 'img/banner-tablets.png',
+ ];
+
+ const [currentSlide, setCurrentSlide] = useState(0);
+ const { theme } = useContext(GlobalContext);
+
+ const intervalRef = useRefProduct Catalog
+Welcome to Nice Gadgets store!
+ +
+
+ );
+};
diff --git a/src/modules/HomePage/components/PicturesSlider/index.ts b/src/modules/HomePage/components/PicturesSlider/index.ts
new file mode 100644
index 0000000000..81a373f3aa
--- /dev/null
+++ b/src/modules/HomePage/components/PicturesSlider/index.ts
@@ -0,0 +1 @@
+export * from './PicturesSlider';
diff --git a/src/modules/HomePage/components/ShopByCategory/ShopByCategory.scss b/src/modules/HomePage/components/ShopByCategory/ShopByCategory.scss
new file mode 100644
index 0000000000..2f08d17956
--- /dev/null
+++ b/src/modules/HomePage/components/ShopByCategory/ShopByCategory.scss
@@ -0,0 +1,79 @@
+@import '../../../../styles/main';
+
+.shopByCategory__container {
+ margin-block: 56px;
+
+ @include content-padding-inline;
+
+ @include on-tablet {
+ margin-block: 64px;
+ }
+}
+
+.shopByCategory__title {
+ font-family: Mont-Bold, sans-serif;
+ font-size: 22px;
+ font-weight: 800;
+ line-height: 30.8px;
+ letter-spacing: -0.01em;
+ color: var(--color-gray-primary);
+ margin-bottom: 24px;
+
+ @include on-tablet {
+ font-family: Mont-Bold, sans-serif;
+ font-size: 32px;
+ line-height: 41px;
+ }
+}
+
+.shopByCategory__content {
+ gap: 32px;
+
+ @include page-grid;
+}
+
+.shopByCategory__link {
+ text-decoration: none;
+ grid-column: 1 / -1;
+
+ @include on-tablet {
+ grid-column: span 4;
+ }
+
+ @include on-desktop {
+ grid-column: span 8;
+ }
+}
+
+.shopByCategory__block-image {
+ width: 100%;
+ height: auto;
+
+ @include hover(transform, scale(1.05));
+
+ @include on-tablet {
+ max-width: 100%;
+ }
+
+ @include on-desktop {
+ max-width: 100%;
+ }
+}
+
+.shopByCategory__block-title {
+ margin-top: 24px;
+ font-family: Mont-SemiBold, sans-serif;
+ font-size: 20px;
+ font-weight: 700;
+ line-height: 25.56px;
+ color: var(--color-gray-primary);
+}
+
+.shopByCategory__block-description {
+ font-family: Mont-Regular, sans-serif;
+ color: var(--color-gray-secondary);
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 21px;
+ margin-top: 4px;
+}
diff --git a/src/modules/HomePage/components/ShopByCategory/ShopByCategory.tsx b/src/modules/HomePage/components/ShopByCategory/ShopByCategory.tsx
new file mode 100644
index 0000000000..b096bd6957
--- /dev/null
+++ b/src/modules/HomePage/components/ShopByCategory/ShopByCategory.tsx
@@ -0,0 +1,72 @@
+import './ShopByCategory.scss';
+import { useContext } from 'react';
+import { Link } from 'react-router-dom';
+import { GlobalContext } from '../../../../store/GlobalContext';
+
+export const ShopByCategory: React.FC = () => {
+ const { allProducts } = useContext(GlobalContext);
+
+ const phonesLength = allProducts.filter(
+ product => product.category === 'phones',
+ ).length;
+
+ const tabletsLength = allProducts.filter(
+ product => product.category === 'tablets',
+ ).length;
+
+ const accessoriesLength = allProducts.filter(
+ product => product.category === 'accessories',
+ ).length;
+
+ return (
+
+
+
+
+ {theme === 'light' ? (
+
+
+
+ {images.map((src, index) => (
+ 
+ ))}
+
+
+
+ {theme === 'light' ? (
+
+
+ {images.map((_, index) => (
+
+ handleDotClick(index)}
+ >
+ ))}
+
+
+ );
+};
diff --git a/src/modules/HomePage/components/ShopByCategory/index.ts b/src/modules/HomePage/components/ShopByCategory/index.ts
new file mode 100644
index 0000000000..8081526324
--- /dev/null
+++ b/src/modules/HomePage/components/ShopByCategory/index.ts
@@ -0,0 +1 @@
+export * from './ShopByCategory';
diff --git a/src/modules/HomePage/index.ts b/src/modules/HomePage/index.ts
new file mode 100644
index 0000000000..11e53da674
--- /dev/null
+++ b/src/modules/HomePage/index.ts
@@ -0,0 +1 @@
+export * from './HomePage';
diff --git a/src/modules/NotFoundPage/NotFoundPage.scss b/src/modules/NotFoundPage/NotFoundPage.scss
new file mode 100644
index 0000000000..f642a396a7
--- /dev/null
+++ b/src/modules/NotFoundPage/NotFoundPage.scss
@@ -0,0 +1,14 @@
+.notFoundPage {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ margin-top: 40px;
+ font-family: Mont-SemiBold, sans-serif;
+ font-weight: 800;
+ letter-spacing: -0.01em;
+ color: var(--color-gray-primary);
+ font-size: 48px;
+ line-height: 56px;
+}
diff --git a/src/modules/NotFoundPage/NotFoundPage.tsx b/src/modules/NotFoundPage/NotFoundPage.tsx
new file mode 100644
index 0000000000..7c4304a208
--- /dev/null
+++ b/src/modules/NotFoundPage/NotFoundPage.tsx
@@ -0,0 +1,14 @@
+import './NotFoundPage.scss';
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+export const NotFoundPage: React.FC = () => {
+ return (
+
+
+ Shop by category
+ +
+
+
+ 
+
+
+
+
+
+ 
+
+
+
+
+
+ 
+
+
+
+
+ Mobile phones
+ + {`${phonesLength} models`} + +
+ Tablets
+ + {`${tabletsLength} models`} + +
+ Accessories
+ + {`${accessoriesLength} models`} + +
+
+ );
+};
diff --git a/src/modules/NotFoundPage/index.ts b/src/modules/NotFoundPage/index.ts
new file mode 100644
index 0000000000..6197aa75aa
--- /dev/null
+++ b/src/modules/NotFoundPage/index.ts
@@ -0,0 +1 @@
+export * from './NotFoundPage';
diff --git a/src/modules/ProductDetailsPage/ProductDetailsPage.scss b/src/modules/ProductDetailsPage/ProductDetailsPage.scss
new file mode 100644
index 0000000000..3fe076c2d8
--- /dev/null
+++ b/src/modules/ProductDetailsPage/ProductDetailsPage.scss
@@ -0,0 +1,41 @@
+@import '../../styles/main';
+
+.detailsPage {
+ @include content-padding-inline;
+
+ &__title {
+ margin-bottom: 32px;
+ font-size: 22px;
+ font-family: Mont-Bold, sans-serif;
+
+ font-weight: 800;
+ line-height: 41px;
+ letter-spacing: -0.01em;
+ color: var(--color-gray-primary);
+
+ @include on-tablet {
+ margin-bottom: 40px;
+ font-size: 32px;
+ }
+ }
+}
+
+.detailsPage__error-message {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ margin-top: 40px;
+ font-family: Mont-SemiBold, sans-serif;
+ font-weight: 800;
+ letter-spacing: -0.01em;
+ color: var(--color-gray-primary);
+ font-size: 48px;
+ line-height: 56px;
+}
+
+
+
+
+
diff --git a/src/modules/ProductDetailsPage/ProductDetailsPage.tsx b/src/modules/ProductDetailsPage/ProductDetailsPage.tsx
new file mode 100644
index 0000000000..671b9e99c7
--- /dev/null
+++ b/src/modules/ProductDetailsPage/ProductDetailsPage.tsx
@@ -0,0 +1,150 @@
+import './ProductDetailsPage.scss';
+import { useContext, useState, useEffect } from 'react';
+import { Link, useLocation, useParams } from 'react-router-dom';
+import { Breadcrumbs } from '../shared/Breadcrumbs';
+import { SpecificProduct } from '../../types/SpecificProduct';
+import { ProductContentTop } from './components/ProductContentTop';
+import { ProductContentBottom } from './components/ProductContentBottom';
+import { GlobalContext } from '../../store/GlobalContext';
+import { ProductsSlider } from '../shared/ProductsSlider';
+import { ButtonBack } from '../shared/ButtonBack';
+import { getSpecificProducts } from '../../utils/productApi';
+import { Loader } from '../shared/Loader';
+import { Product } from '../../types/Product';
+
+const getSuggestedProducts = (
+ allProducts: Product[],
+ currentCategory: string,
+ productItemId: string,
+) => {
+ return allProducts
+ .filter(
+ prod =>
+ prod.category === currentCategory && prod.itemId !== productItemId,
+ )
+ .sort(() => 0.5 - Math.random());
+};
+
+export const ProductDetailsPage: React.FC = () => {
+ const { allProducts } = useContext(GlobalContext);
+
+ const { productItemId } = useParams();
+
+ const [product, setProduct] = useStatePage not found
+ + Go to HomePage + +
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+ );
+ }
+
+ if (!product) {
+ return;
+ }
+
+ return (
+
+ {error}
+
+ Go to HomePage
+
+
+
+ {error && !isLoading && (
+
+ );
+};
diff --git a/src/modules/ProductDetailsPage/components/ProductContentBottom/ProductContentBottom.scss b/src/modules/ProductDetailsPage/components/ProductContentBottom/ProductContentBottom.scss
new file mode 100644
index 0000000000..3452b2ba09
--- /dev/null
+++ b/src/modules/ProductDetailsPage/components/ProductContentBottom/ProductContentBottom.scss
@@ -0,0 +1,131 @@
+@import '../../../../styles/main';
+
+.detailsPage {
+ &__content-buttom {
+ gap: 32px;
+ display: flex;
+ flex-direction: column;
+
+ margin-bottom: 56px;
+
+ @include on-tablet {
+ margin-bottom: 64px;
+ }
+
+ @include on-desktop {
+ margin-block: 80px;
+
+ @include page-grid;
+ }
+ }
+
+ &__block {
+ &-about {
+ width: 100%;
+
+ @include on-desktop {
+ grid-column: 1 / 13;
+ }
+ }
+
+ &-techSpecs {
+ width: 100%;
+
+ @include on-desktop {
+ grid-column: 14 / -1;
+ }
+ }
+
+ &-title {
+ font-family: Mont-Bold, sans-serif;
+ font-size: 20px;
+ font-weight: 700;
+ line-height: 25.56px;
+ color: var(--color-gray-primary);
+
+ @include on-tablet {
+ font-size: 22px;
+ font-weight: 800;
+ line-height: 30.8px;
+ }
+ }
+ }
+
+ &__line-bottom {
+ width: 100%;
+ height: 1px;
+ background-color: var(--color-gray-elements);
+ margin-top: 16px;
+ }
+
+ &__description {
+ margin-top: 32px;
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+ }
+
+ &__section {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ &-title {
+ font-family: Mont-SemiBold, sans-serif;
+ font-size: 16px;
+ font-weight: 700;
+ line-height: 20.45px;
+ color: var(--color-gray-primary);
+
+ @include on-tablet {
+ font-size: 20px;
+ font-weight: 700;
+ line-height: 25.56px;
+ }
+
+ &--bottom {
+ margin-top: 80px;
+ margin-bottom: 24px;
+ }
+ }
+
+ &-description {
+ font-family: Mont-Regular, sans-serif;
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 21px;
+ color: var(--color-gray-secondary);
+ }
+ }
+
+ &__techSpecs {
+ &-content {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ margin-top: 25px;
+ }
+
+ &-block {
+ display: flex;
+ justify-content: space-between;
+ gap: 20px;
+ }
+
+ &-title {
+ font-family: Mont-Regular, sans-serif;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 21px;
+ color: var(--color-gray-secondary);
+ }
+
+ &-value {
+ font-family: Mont-Regular, sans-serif;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 21px;
+ color: var(--color-gray-primary);
+ }
+ }
+}
diff --git a/src/modules/ProductDetailsPage/components/ProductContentBottom/ProductContentBottom.tsx b/src/modules/ProductDetailsPage/components/ProductContentBottom/ProductContentBottom.tsx
new file mode 100644
index 0000000000..2f98a69b64
--- /dev/null
+++ b/src/modules/ProductDetailsPage/components/ProductContentBottom/ProductContentBottom.tsx
@@ -0,0 +1,86 @@
+import './ProductContentBottom.scss';
+import { SpecificProduct } from '../../../../types/SpecificProduct';
+
+type Props = {
+ selectedProduct: SpecificProduct;
+};
+
+export const ProductContentBottom: React.FC
+ {error}
+ Go to HomePage
+
+ )}
+
+ {product.name}
+ +
+
+
+
+ );
+};
diff --git a/src/modules/ProductDetailsPage/components/ProductContentBottom/index.ts b/src/modules/ProductDetailsPage/components/ProductContentBottom/index.ts
new file mode 100644
index 0000000000..a67cc2f37c
--- /dev/null
+++ b/src/modules/ProductDetailsPage/components/ProductContentBottom/index.ts
@@ -0,0 +1 @@
+export * from './ProductContentBottom';
diff --git a/src/modules/ProductDetailsPage/components/ProductContentTop/ProductContentTop.scss b/src/modules/ProductDetailsPage/components/ProductContentTop/ProductContentTop.scss
new file mode 100644
index 0000000000..fbef338390
--- /dev/null
+++ b/src/modules/ProductDetailsPage/components/ProductContentTop/ProductContentTop.scss
@@ -0,0 +1,415 @@
+@import '../../../../styles/main';
+
+.detailsPage__content-top {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+
+ @include on-tablet {
+ flex-direction: row;
+ grid-column: 1 / -1;
+
+ @include page-grid;
+ }
+}
+
+.detailsPage__container-imageSlider {
+ order: 2;
+ display: flex;
+ gap: 8px;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ box-sizing: border-box;
+ margin-bottom: 40px;
+ min-height: 49px;
+
+ @include on-tablet {
+ grid-column: 1 / 2;
+ flex-direction: column;
+ justify-content: flex-start;
+ gap: 16px;
+ margin: 0;
+ }
+
+ @include on-desktop {
+ grid-column: span 2;
+ }
+}
+
+.detailsPage__container-photos {
+ box-sizing: border-box;
+ padding: 2px;
+ border: 1px solid var(--color-gray-elements);
+ transition: border 0.3s ease;
+
+ aspect-ratio: 1 / 1;
+ height: 100%;
+ width: 100%;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ @include on-tablet {
+ height: auto;
+ width: 100%;
+ }
+}
+
+.detailsPage__photo {
+ width: 100%;
+ aspect-ratio: 1 / 1;
+ object-fit: contain;
+ cursor: pointer;
+}
+
+.detailsPage__container-photos:not(.detailsPage__container-photos--active):hover {
+ border: 1px solid var(--color-gray-icons-placeholders);
+}
+
+.detailsPage__container-photos--active {
+ border: 1px solid var(--color-gray-primary);
+}
+
+.detailsPage__photo-mask {
+ order: 1;
+ aspect-ratio: 1 / 1;
+ margin-bottom: 16px;
+ overflow: hidden;
+ box-sizing: border-box;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ position: relative;
+
+ @include on-tablet {
+ order: 2;
+ grid-column: span 6;
+ margin-bottom: 0;
+ }
+
+ @include on-desktop {
+ grid-column: span 10;
+ }
+}
+
+.detailsPage__image {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+
+ position: absolute;
+ opacity: 0;
+ transition: opacity 0.3s ease;
+ z-index: -1;
+
+ &.detailsPage__image--active {
+ opacity: 1;
+ }
+}
+
+.detailsPage__characteristics {
+ order: 3;
+
+ width: 100%;
+ margin-right: 16px;
+ display: flex;
+ flex-direction: column;
+
+ @include on-tablet {
+ grid-column: span 5;
+ }
+
+ @include on-desktop {
+ grid-column: 14 / 21;
+ }
+}
+
+.detailsPage__colors {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.detailsPage__colors-list {
+ list-style: none;
+ display: flex;
+ gap: 5px;
+}
+
+.detailsPage__color-item {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+ width: 32px;
+ height: 32px;
+ box-sizing: border-box;
+ border: 1px solid var(--color-gray-elements);
+ border-radius: 50%;
+ transition: border 0.3s;
+
+ &--selected {
+ border: 1px solid var(--color-gray-primary);
+ }
+}
+
+.detailsPage__color-item:not(.detailsPage__color-item--selected):hover {
+ border: 1px solid var(--color-gray-icons-placeholders);
+}
+
+.detailsPage__color-circle {
+ width: 30px;
+ height: 30px;
+ box-sizing: border-box;
+ border-radius: 50%;
+ border: 2px solid var(--color-bg);
+}
+
+.detailsPage__line {
+ width: 320px;
+ height: 1px;
+ background-color: var(--color-gray-elements);
+ margin-top: 24px;
+}
+
+.detailsPage__capacity {
+ margin-top: 24px;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.detailsPage__capacity-list {
+ display: flex;
+ gap: 8px;
+ list-style: none;
+}
+
+.detailsPage__capacity-block {
+ font-family: Mont-Regular, sans-serif;
+ font-size: 14px;
+ font-weight: 500;
+ text-align: center;
+ color: var(--color-gray-primary);
+
+ &--selected {
+ color: var(--color-bg);
+ }
+}
+
+.detailsPage__capacity-item {
+ height: 32px;
+ box-sizing: border-box;
+ padding-inline: 8px;
+ border: 1px solid var(--color-gray-icons-placeholders);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+
+ @include hover(border-color, var(--color-gray-primary));
+
+ &--selected {
+ background-color: var(--color-gray-primary);
+ }
+}
+
+.detailsPage__container-price {
+ height: 41px;
+ display: flex;
+ gap: 8px;
+ margin-top: 32px;
+ align-items: center;
+}
+
+.detailsPage__container-specifications {
+ display: flex;
+ flex-direction: column;
+ height: 77px;
+ padding-block: 8px;
+ gap: 8px;
+ margin-top: 32px;
+}
+
+.detailsPage__container-buttons {
+ margin-top: 16px;
+
+ width: 100%;
+ display: flex;
+ gap: 8px;
+}
+
+.detailsPage__price-regular {
+ font-family: Mont-Regular, sans-serif;
+ color: var(--color-gray-secondary);
+ font-size: 22px;
+ font-weight: 500;
+ text-decoration-line: line-through;
+}
+
+.detailsPage__price-discount {
+ font-family: Mont-Bold, sans-serif;
+ color: var(--color-gray-primary);
+ font-size: 32px;
+ font-weight: 800;
+ line-height: 41px;
+ letter-spacing: -0.01em;
+}
+
+.detailsPage__block {
+ width: 100%;
+ height: 15px;
+ display: flex;
+ justify-content: space-between;
+ font-family: Mont-SemiBold, sans-serif;
+ font-size: 12px;
+ font-weight: 600;
+}
+
+.detailsPage__block-about {
+ width: 560px;
+}
+
+.detailsPage__block-techSpecs {
+ width: 512px;
+}
+
+.detailsPage__block-title {
+ font-family: Mont-Bold, sans-serif;
+ font-size: 22px;
+ font-weight: 800;
+ line-height: 30.8px;
+ color: var(--color-gray-primary);
+}
+
+.detailsPage__info {
+ color: var(--color-gray-secondary);
+ font-family: Mont-SemiBold, sans-serif;
+ font-size: 12px;
+ font-weight: 600;
+}
+
+.detailsPage__value {
+ color: var(--color-gray-primary);
+}
+
+.detailsPage__button {
+ border: none;
+ cursor: pointer;
+ background-color: var(--color-bg);
+
+ font-family: Mont-Regular, sans-serif;
+ color: var(--color-bg);
+ font-size: 14px;
+ font-weight: 700;
+ line-height: 21px;
+ height: 40px;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &-card {
+ background-color: var(--color-gray-primary);
+ width: 100%;
+
+ @include hover(box-shadow, 0 3px 13px 0 #17203166);
+ }
+
+ &-card--active {
+ background-color: var(--color-bg);
+ color: var(--color-green);
+ border: 1px solid var(--color-gray-elements);
+ }
+
+ &-favorites {
+ width: 40px;
+ flex-shrink: 0;
+ border: 1px solid var(--color-gray-icons-placeholders);
+ }
+
+ &-favorites--active {
+ border: 1px solid var(--color-gray-elements);
+ }
+}
+
+.detailsPage__content-buttom {
+ display: flex;
+ gap: 64px;
+ margin-top: 80px;
+}
+
+.detailsPage__line-bottom {
+ width: 100%;
+ height: 1px;
+ background-color: var(--color-gray-elements);
+ margin-top: 16px;
+}
+
+.detailsPage__description {
+ margin-top: 32px;
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+}
+
+.detailsPage__section {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ &-title {
+ font-family: Mont-SemiBold, sans-serif;
+ font-size: 20px;
+ font-weight: 700;
+ line-height: 25.56px;
+ color: var(--color-gray-primary);
+ }
+
+ &-description {
+ font-family: Mont-Regular, sans-serif;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 21px;
+ color: var(--color-gray-secondary);
+ }
+}
+
+.detailsPage__techSpecs-content {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+}
+
+.detailsPage__techSpecs {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.detailsPage__techSpecs-title {
+ color: var(--color-gray-primary);
+}
+
+.detailsPage__techSpecs-list {
+ list-style: none;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.detailsPage__techSpecs-item {
+ font-family: Mont-Regular, sans-serif;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 21px;
+ color: var(--color-gray-primary);
+}
+
+.detailsPage__techSpecs-item-description {
+ color: var(--color-gray-secondary);
+}
diff --git a/src/modules/ProductDetailsPage/components/ProductContentTop/ProductContentTop.tsx b/src/modules/ProductDetailsPage/components/ProductContentTop/ProductContentTop.tsx
new file mode 100644
index 0000000000..09cbe109b9
--- /dev/null
+++ b/src/modules/ProductDetailsPage/components/ProductContentTop/ProductContentTop.tsx
@@ -0,0 +1,246 @@
+import './ProductContentTop.scss';
+import { NavLink } from 'react-router-dom';
+import { SpecificProduct } from '../../../../types/SpecificProduct';
+import { useContext, useState } from 'react';
+import { colors } from '../../../../constants/colors';
+import { GlobalContext } from '../../../../store/GlobalContext';
+import { Icon } from '../../../shared/Icon';
+import { iconsObject } from '../../../../constants/iconsObject';
+import { Product } from '../../../../types/Product';
+import classNames from 'classnames';
+
+const getProductBySelectedProductId = (
+ products: Product[],
+ selectedProductId: string,
+) => {
+ return products.find(product => product.itemId === selectedProductId);
+};
+
+type Props = {
+ selectedProduct: SpecificProduct;
+ specificProducts: SpecificProduct[];
+};
+
+export const ProductContentTop: React.FC
+
+
+ About
+ + +
+ {selectedProduct.description.map((chunk, index) => (
+
+
+ {chunk.title}
+
+ {chunk.text}
+
+
+ ))}
+
+
+ Tech specs
+ + +
+
+
+ Screen
+
+ {selectedProduct.screen}
+
+
+
+ Resolution
+
+ {selectedProduct.resolution}
+
+
+
+ Processor
+
+ {selectedProduct.processor}
+
+
+
+ RAM
+
+ {selectedProduct.ram}
+
+
+
+
+ Built in memory
+
+
+ {selectedProduct.capacity}
+
+
+
+ Camera
+
+ {selectedProduct.camera}
+
+
+
+ Zoom
+
+ {selectedProduct.zoom}
+
+
+
+ Cell
+
+ {selectedProduct.cell.join(', ')}
+
+
+
+
+ );
+};
diff --git a/src/modules/ProductDetailsPage/components/ProductContentTop/index.ts b/src/modules/ProductDetailsPage/components/ProductContentTop/index.ts
new file mode 100644
index 0000000000..e58da14a10
--- /dev/null
+++ b/src/modules/ProductDetailsPage/components/ProductContentTop/index.ts
@@ -0,0 +1 @@
+export * from './ProductContentTop';
diff --git a/src/modules/ProductDetailsPage/index.ts b/src/modules/ProductDetailsPage/index.ts
new file mode 100644
index 0000000000..6615089e5e
--- /dev/null
+++ b/src/modules/ProductDetailsPage/index.ts
@@ -0,0 +1 @@
+export * from './ProductDetailsPage';
diff --git a/src/modules/ProductPage/ProductPage.scss b/src/modules/ProductPage/ProductPage.scss
new file mode 100644
index 0000000000..3304c50bb0
--- /dev/null
+++ b/src/modules/ProductPage/ProductPage.scss
@@ -0,0 +1,73 @@
+@import '../../styles/main';
+
+.productPage {
+ @include content-padding-inline;
+}
+
+.productPage__title {
+ font-family: Mont-Bold, sans-serif;
+ font-size: 32px;
+ font-weight: 800;
+ line-height: 41px;
+ letter-spacing: -0.01em;
+ color: var(--color-gray-primary);
+ margin-bottom: 8px;
+
+ @include on-tablet {
+ font-size: 48px;
+ line-height: 56px;
+ }
+}
+
+.productPage__description {
+ font-family: Mont-Regular, sans-serif;
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 21px;
+ color: var(--color-gray-secondary);
+}
+
+.productPage__dropdown {
+ margin-top: 32px;
+ gap: 16px;
+
+ @include page-grid;
+
+ @include on-tablet {
+ margin-top: 40px;
+ }
+}
+
+.productPage__dropdown--sortBy {
+ grid-column: span 2;
+
+ @include on-tablet {
+ grid-column: span 4;
+ }
+}
+
+.productPage__dropdown--itemsPerPage {
+ grid-column: span 2;
+
+ @include on-tablet {
+ grid-column: span 3;
+ }
+}
+
+.productPage__content {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 40px 16px;
+ margin-top: 24px;
+}
+
+.productPage__no-products {
+ margin-top: 40px;
+ font-family: Mont-SemiBold, sans-serif;
+ font-size: 48px;
+ font-weight: 500;
+ color: var(--color-gray-secondary);
+ display: flex;
+ justify-content: center;
+ text-align: ct;
+}
diff --git a/src/modules/ProductPage/ProductPage.tsx b/src/modules/ProductPage/ProductPage.tsx
new file mode 100644
index 0000000000..60d8cc07a7
--- /dev/null
+++ b/src/modules/ProductPage/ProductPage.tsx
@@ -0,0 +1,190 @@
+import './ProductPage.scss';
+import React, { useContext, useEffect, useState } from 'react';
+import { useLocation, useSearchParams } from 'react-router-dom';
+import { Dropdown } from '../shared/Dropdown';
+import { Pagination } from '../shared/Pagination';
+import { GlobalContext } from '../../store/GlobalContext';
+import { Breadcrumbs } from '../shared/Breadcrumbs';
+import { ProductsList } from '../shared/ProductsList';
+import { Loader } from '../shared/Loader';
+import { Product } from '../../types/Product';
+import { getSearchWith } from '../../utils/searchHelper';
+
+export type SearchParams = {
+ [key: string]: string | string[] | null;
+};
+
+const getPreparedProducts = (
+ products: Product[],
+ { sortBy, query }: { sortBy: string; query: string },
+): Product[] => {
+ let filteredProducts = [...products];
+
+ if (query) {
+ filteredProducts = filteredProducts.filter(product =>
+ product.name.toLowerCase().includes(query.toLowerCase().trim()),
+ );
+ }
+
+ switch (sortBy) {
+ case 'Newest':
+ return filteredProducts.sort((a, b) => b.year - a.year);
+ case 'Alphabetically':
+ return filteredProducts.sort((a, b) => a.name.localeCompare(b.name));
+ case 'Cheapest':
+ return filteredProducts.sort((a, b) => a.fullPrice - b.fullPrice);
+ default:
+ return filteredProducts;
+ }
+};
+
+type Props = {
+ category: string;
+};
+
+export const ProductPage: React.FC
+ {selectedProduct.images.map((image, index) => (
+
+
+
+ 
setSelectedPhoto(index)}
+ />
+
+ ))}
+
+ {selectedProduct.images.map((image, index) => (
+
+ ))}
+
+
+
+
+
+
+ Available colors
+
+
+
+
+
+ -
+ {selectedProduct.colorsAvailable.map(color => (
+
- + + +
+
+ Select capacity
+
+
+
+
+
+ -
+ {selectedProduct.capacityAvailable.map(capacity => (
+
- + + {capacity.split('GB').join(' GB')} + + +
+
+ {`$${selectedProduct.priceDiscount}`}
+
+
+ {`$${selectedProduct.priceRegular}`}
+
+
+
+
+
+
+
+
+
+
+
+
+ Screen
+ {selectedProduct.screen}
+
+
+ Resolution
+
+ {selectedProduct.resolution}
+
+
+
+ Processor
+
+ {selectedProduct.processor}
+
+
+
+ RAM
+ {selectedProduct.ram}
+
+
+ {isLoading &&
+ );
+};
diff --git a/src/modules/ProductPage/index.ts b/src/modules/ProductPage/index.ts
new file mode 100644
index 0000000000..875dce3d23
--- /dev/null
+++ b/src/modules/ProductPage/index.ts
@@ -0,0 +1 @@
+export * from './ProductPage';
diff --git a/src/modules/ShoppingCartPage/ShoppingCartPage.scss b/src/modules/ShoppingCartPage/ShoppingCartPage.scss
new file mode 100644
index 0000000000..e7a09f771e
--- /dev/null
+++ b/src/modules/ShoppingCartPage/ShoppingCartPage.scss
@@ -0,0 +1,129 @@
+@import '../../styles/main';
+
+.cartPage {
+ @include content-padding-inline;
+}
+
+.cartPage__title {
+ margin-top: 16px;
+ margin-bottom: 32px;
+
+ font-family: Mont-Bold, sans-serif;
+ font-weight: 800;
+ letter-spacing: -0.01em;
+ color: var(--color-gray-primary);
+ font-size: 48px;
+ line-height: 56px;
+}
+
+.cartPage__empty-content {
+ display: flex;
+ width: 100%;
+ align-items: center;
+ justify-content: center;
+}
+
+.cartPage__empty-content-title {
+ font-family: Mont-SemiBold, sans-serif;
+ font-size: 48px;
+ font-weight: 500;
+ color: var(--color-gray-secondary);
+ display: flex;
+ justify-content: center;
+ width: 460px;
+}
+
+.cartPage__image-empty {
+ width: 40%;
+}
+
+.cartPage__content {
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+
+ @include on-desktop {
+ @include page-grid;
+ }
+}
+
+.cartPage__content-container {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ @include on-desktop {
+ grid-column: span 16;
+ }
+}
+
+.cartPage__total {
+ width: 100%;
+ height: 206px;
+ padding: 24px;
+ box-sizing: border-box;
+
+ border: 1px solid var(--color-gray-elements);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ @include on-desktop {
+ grid-column: span 8;
+ }
+}
+
+.cartPage__total-count {
+ height: 41px;
+ font-family: Mont-Bold, sans-serif;
+ font-size: 32px;
+ font-weight: 800;
+ line-height: 41px;
+ letter-spacing: -0.01em;
+ color: var(--color-gray-primary);
+}
+
+.cartPage__total-title {
+ font-family: Mont-Regular, sans-serif;
+
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 21px;
+ color: var(--color-gray-secondary);
+}
+
+.cartPage__line {
+ width: 100%;
+ height: 1px;
+ background-color: var(--color-gray-elements);
+
+ margin-block: 24px;
+}
+
+.cartPage__button-checkout {
+ width: 100%;
+ height: 48px;
+ background-color: var(--color-gray-primary);
+ border: none;
+
+ font-family: Mont-SemiBold, sans-serif;
+ font-size: 14px;
+ font-weight: 700;
+ line-height: 21px;
+ text-align: center;
+ color: var(--color-bg);
+ cursor: pointer;
+ transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
+
+ @include hover(box-shadow, 0 3px 13px 0 #17203166);
+}
+
+body.theme_dark .cartPage__button-checkout {
+ background-color: var(--color-accent);
+ color: var(--color-gray-primary);
+ transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
+
+ &:hover {
+ background-color: var(--color-accent-hover);
+ }
+}
diff --git a/src/modules/ShoppingCartPage/ShoppingCartPage.tsx b/src/modules/ShoppingCartPage/ShoppingCartPage.tsx
new file mode 100644
index 0000000000..a868d2ba89
--- /dev/null
+++ b/src/modules/ShoppingCartPage/ShoppingCartPage.tsx
@@ -0,0 +1,80 @@
+import './ShoppingCartPage.scss';
+import React, { useContext } from 'react';
+import { useLocation } from 'react-router-dom';
+import { GlobalContext } from '../../store/GlobalContext';
+import { CartItem } from './components/CartItem';
+import { ButtonBack } from '../shared/ButtonBack';
+
+export const ShoppingCartPage: React.FC = () => {
+ const { cart, clearShoppingCart } = useContext(GlobalContext);
+
+ const { pathname } = useLocation();
+
+ const normalizeProductsType =
+ pathname.slice(1, 2).toUpperCase() + pathname.slice(2);
+
+ const countCartItems = cart.length;
+
+ const totalQuantity = cart.reduce((sum, item) => {
+ return sum + item.quantity;
+ }, 0);
+
+ const totalCount = cart.reduce((sum, item) => {
+ return sum + item.quantity * item.product.price;
+ }, 0);
+
+ const handleCheckout = () => {
+ const confirmed = confirm(
+ 'Checkout is not implemented yet. Do you want to clear the Cart?',
+ );
+
+ if (confirmed) {
+ clearShoppingCart();
+ }
+ };
+
+ return (
+
+
+ )}
+
+ {!isLoading && !error && visibleProducts.length === 0 && !queryParam && (
+ Something went wrong. Please try again.
+ +
+
+ )}
+
+ {!isLoading && !error && visibleProducts.length === 0 && queryParam && (
+ There are no {category} yet.
+{`There are no ${typeProduct} matching the query`}
+ )} + + {!isLoading && !error && visibleProducts.length > 0 && ( + <> ++ {category && + `${category.charAt(0).toUpperCase() + category.slice(1)} page`} +
+ + + {`${countVisibleProducts} model${countVisibleProducts !== 1 ? 's' : ''}`} + + +
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/modules/ShoppingCartPage/components/CartItem/CartItem.scss b/src/modules/ShoppingCartPage/components/CartItem/CartItem.scss
new file mode 100644
index 0000000000..00ccc60433
--- /dev/null
+++ b/src/modules/ShoppingCartPage/components/CartItem/CartItem.scss
@@ -0,0 +1,154 @@
+@import '../../../../styles/main';
+
+.cartItem {
+ width: 100%;
+ height: 164px;
+ box-sizing: border-box;
+ padding: 16px;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ border: 1px solid var(--color-gray-elements);
+ align-items: center;
+ transition: border-color 0.3s ease;
+
+ @include on-tablet {
+ flex-direction: row;
+ gap: 24px;
+ height: 128px;
+ padding: 24px;
+ }
+
+ &:hover {
+ border: 1px solid var(--color-gray-primary);
+ transition: border-color 0.3s ease;
+ }
+
+ & .cartItem__wrapperTop {
+ height: 80px;
+ width: 100%;
+ display: flex;
+ gap: 16px;
+ align-items: center;
+ justify-content: space-between;
+
+ @include on-tablet {
+ gap: 24px;
+ }
+ }
+
+ & .cartItem__wrapperBottom {
+ height: 32px;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ @include on-tablet {
+ gap: 24px;
+ width: auto;
+ }
+ }
+
+ & .cartItem__icon-close {
+ border: none;
+ background-color: var(--color-bg);
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ & .cartItem__title {
+ font-family: Mont-Regular, sans-serif;
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 21px;
+ color: var(--color-gray-primary);
+ flex-grow: 1;
+ }
+
+ & .cartItem__counter-container {
+ width: 96px;
+ height: 32px;
+ display: flex;
+ }
+
+ & .cartItem__price {
+ width: 80px;
+ text-align: right;
+ font-family: Mont-Bold, sans-serif;
+ font-size: 22px;
+ font-weight: 800;
+ line-height: 30.8px;
+ color: var(--color-gray-primary);
+ }
+
+ & .cartItem__counter {
+ flex: 1;
+ width: 32px;
+ height: 32px;
+ box-sizing: border-box;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-family: Mont-Regular, sans-serif;
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 21px;
+ }
+
+ & .cartItem__button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-sizing: border-box;
+ border: 1px solid var(--color-gray-icons-placeholders);
+ background-color: #fff;
+ width: 32px;
+ height: 32px;
+ cursor: pointer;
+ transition: border 0.3s ease;
+
+ &--disabled {
+ border: 1px solid var(--color-gray-elements);
+ cursor: not-allowed;
+ }
+ }
+
+ & .cartItem__total-container {
+ width: 368px;
+ height: 206px;
+ border: 1px solid var(--color-gray-elements);
+ }
+
+ .cartItem__image {
+ height: 80px;
+ width: 80px;
+ object-fit: contain;
+ transition: transform 0.3s ease;
+
+ &:hover {
+ transform: scale(1.05);
+ }
+ }
+}
+
+body.theme_dark .cartItem__counter {
+ color: var(--color-gray-primary);
+}
+
+body.theme_dark .cartItem__button {
+ background-color: var(--color-surface-2);
+ border: none;
+
+ &--disabled {
+ background-color: var(--color-bg);
+ border: 1px solid var(--color-gray-elements);
+ }
+
+ &:not(.cartItem__button--disabled):hover {
+ background-color: var(--color-gray-icons-placeholders);
+ border: none;
+ }
+}
diff --git a/src/modules/ShoppingCartPage/components/CartItem/CartItem.tsx b/src/modules/ShoppingCartPage/components/CartItem/CartItem.tsx
new file mode 100644
index 0000000000..44ae144c84
--- /dev/null
+++ b/src/modules/ShoppingCartPage/components/CartItem/CartItem.tsx
@@ -0,0 +1,78 @@
+import './CartItem.scss';
+import classNames from 'classnames';
+import React, { useContext } from 'react';
+import { CartProduct } from '../../../../types/CartProduct';
+import { GlobalContext } from '../../../../store/GlobalContext';
+import { Icon } from '../../../shared/Icon';
+import { iconsObject } from '../../../../constants/iconsObject';
+
+type Props = {
+ cartProduct: CartProduct;
+};
+
+export const CartItem: React.FC{normalizeProductsType}
+ + {countCartItems === 0 && ( +
+
+ Your cart is empty
+
+ 
+
+ )}
+
+ {countCartItems !== 0 && (
+
+
+
+ )}
+
+ {cart.map(item => (
+
+
+
+ ${totalCount}
+
+ Total for {totalQuantity} items
+
+
+
+
+
+
+ );
+};
diff --git a/src/modules/ShoppingCartPage/components/CartItem/index.ts b/src/modules/ShoppingCartPage/components/CartItem/index.ts
new file mode 100644
index 0000000000..37a0553540
--- /dev/null
+++ b/src/modules/ShoppingCartPage/components/CartItem/index.ts
@@ -0,0 +1 @@
+export * from './CartItem';
diff --git a/src/modules/ShoppingCartPage/index.ts b/src/modules/ShoppingCartPage/index.ts
new file mode 100644
index 0000000000..0940a9c722
--- /dev/null
+++ b/src/modules/ShoppingCartPage/index.ts
@@ -0,0 +1 @@
+export * from './ShoppingCartPage';
diff --git a/src/modules/shared/Breadcrumbs/Breadcrumbs.scss b/src/modules/shared/Breadcrumbs/Breadcrumbs.scss
new file mode 100644
index 0000000000..f36233f00d
--- /dev/null
+++ b/src/modules/shared/Breadcrumbs/Breadcrumbs.scss
@@ -0,0 +1,43 @@
+@import '../../../styles/main';
+
+.breadcrumbs {
+ &__item {
+ font-family: Mont-SemiBold, sans-serif;
+ font-size: 12px;
+ font-weight: 600;
+ color: var(--color-gray-secondary);
+ display: inline-block;
+ vertical-align: middle;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ max-width: 100%;
+
+ &--dark {
+ text-decoration: none;
+ color: var(--color-gray-primary);
+ }
+ }
+
+ &__link-home,
+ &__arrow {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+}
+
+.breadcrumbs__container {
+ height: 16px;
+ margin-block: 24px;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+
+ @include on-tablet {
+ margin-bottom: 40px;
+ }
+}
diff --git a/src/modules/shared/Breadcrumbs/Breadcrumbs.tsx b/src/modules/shared/Breadcrumbs/Breadcrumbs.tsx
new file mode 100644
index 0000000000..c9e06a53e5
--- /dev/null
+++ b/src/modules/shared/Breadcrumbs/Breadcrumbs.tsx
@@ -0,0 +1,64 @@
+import './Breadcrumbs.scss';
+import { useContext } from 'react';
+import { Link } from 'react-router-dom';
+import { Icon } from '../Icon';
+import { iconsObject } from '../../../constants/iconsObject';
+import { GlobalContext } from '../../../store/GlobalContext';
+
+type Props = {
+ productType: string;
+ productName?: string;
+};
+
+export const Breadcrumbs: React.FC
+
+ 
+ {cartProduct.product.name}
+
+
+
+
+
+
+ {cartProduct.quantity}
+
+
+
+ {`$${totalProductPrice}`}
+
+
+ );
+};
diff --git a/src/modules/shared/Breadcrumbs/index.ts b/src/modules/shared/Breadcrumbs/index.ts
new file mode 100644
index 0000000000..ce977548b1
--- /dev/null
+++ b/src/modules/shared/Breadcrumbs/index.ts
@@ -0,0 +1 @@
+export * from './Breadcrumbs';
diff --git a/src/modules/shared/ButtonBack/ButtonBack.scss b/src/modules/shared/ButtonBack/ButtonBack.scss
new file mode 100644
index 0000000000..aef96b8bef
--- /dev/null
+++ b/src/modules/shared/ButtonBack/ButtonBack.scss
@@ -0,0 +1,23 @@
+@import '../../../styles/main';
+
+.button {
+ margin-block: 24px 16px;
+ width: 66px;
+ height: 16px;
+ border: none;
+ background-color: var(--color-bg);
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ cursor: pointer;
+ font-family: Mont-SemiBold, sans-serif;
+ font-size: 12px;
+ font-weight: 700;
+ color: var(--color-gray-primary);
+
+ @include on-tablet {
+ margin-top: 40px;
+ }
+
+
+}
diff --git a/src/modules/shared/ButtonBack/ButtonBack.tsx b/src/modules/shared/ButtonBack/ButtonBack.tsx
new file mode 100644
index 0000000000..78b8865c29
--- /dev/null
+++ b/src/modules/shared/ButtonBack/ButtonBack.tsx
@@ -0,0 +1,27 @@
+import './ButtonBack.scss';
+import React, { useCallback, useContext } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Icon } from '../Icon';
+import { iconsObject } from '../../../constants/iconsObject';
+import { GlobalContext } from '../../../store/GlobalContext';
+
+export const ButtonBack: React.FC = () => {
+ const { theme } = useContext(GlobalContext);
+
+ const navigate = useNavigate();
+
+ const handleBack = useCallback(() => {
+ navigate(-1);
+ }, [navigate]);
+
+ return (
+
+
+ {theme === 'light' ? (
+
+
+ {theme === 'light' ? (
+
+ );
+};
diff --git a/src/modules/shared/ButtonBack/index.ts b/src/modules/shared/ButtonBack/index.ts
new file mode 100644
index 0000000000..4a54f127f8
--- /dev/null
+++ b/src/modules/shared/ButtonBack/index.ts
@@ -0,0 +1 @@
+export * from './ButtonBack';
diff --git a/src/modules/shared/Dropdown/Dropdown.scss b/src/modules/shared/Dropdown/Dropdown.scss
new file mode 100644
index 0000000000..d4a8e86df5
--- /dev/null
+++ b/src/modules/shared/Dropdown/Dropdown.scss
@@ -0,0 +1,98 @@
+@import '../../../styles/main';
+
+.dropdown {
+ position: relative;
+ width: 100%;
+}
+
+.dropdown__label {
+ font-family: Mont-SemiBold, sans-serif;
+ font-size: 12px;
+ font-weight: 700;
+ color: var(--color-gray-secondary);
+}
+
+.dropdown__container {
+ display: flex;
+ align-items: center;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 21px;
+ color: var(--color-gray-secondary);
+}
+
+.dropdown__icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: transform 0.3s ease;
+}
+
+.dropdown__options {
+ position: absolute;
+ top: 110%;
+ left: 0;
+ width: calc(100% - 2px);
+ list-style: none;
+ background-color: var(--color-bg);
+ border: 1px solid var(--color-gray-icons-placeholders);
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+ max-height: 200px;
+ overflow-y: auto;
+ transition: all 0.3s ease-in-out;
+ z-index: 1;
+}
+
+.dropdown__option {
+ padding: 8px;
+ cursor: pointer;
+ font-family: Mont-Regular, sans-serif;
+ font-size: 14px;
+ line-height: 21px;
+ color: var(--color-gray-secondary);
+
+ &:hover {
+ color: var(--color-gray-primary);
+ background-color: var(--color-hover);
+ }
+}
+
+body.theme_dark .dropdown__option:hover {
+ color: var(--color-gray-primary);
+ background-color: var(--color-surface-2);
+}
+
+.dropdown__button {
+ height: 40px;
+ padding-inline: 12px;
+ background: none;
+ border: 1px solid var(--color-gray-icons-placeholders);
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ cursor: pointer;
+ font-family: Mont-SemiBold, sans-serif;
+ font-size: 14px;
+ font-weight: 700;
+ line-height: 21px;
+ color: var(--color-gray-primary);
+ transition: border 0.3s;
+
+ &:focus {
+ border-color: var(--color-accent);
+ }
+
+ &:not(.dropdown__button--open) {
+ border-color: var(--color-gray-icons-placeholders);
+ }
+
+ &:hover:not(.dropdown__button--open) {
+ border-color: var(--color-gray-secondary);
+ }
+}
+
+.dropdown__button--open {
+ border-color: var(--color-accent);
+ background-color: var(--color-surface-2);
+}
diff --git a/src/modules/shared/Dropdown/Dropdown.tsx b/src/modules/shared/Dropdown/Dropdown.tsx
new file mode 100644
index 0000000000..c11a782b1f
--- /dev/null
+++ b/src/modules/shared/Dropdown/Dropdown.tsx
@@ -0,0 +1,79 @@
+import './Dropdown.scss';
+import React, { useEffect, useRef, useState } from 'react';
+import { Icon } from '../Icon';
+import { iconsObject } from '../../../constants/iconsObject';
+
+type DropdownProps = {
+ label: string;
+ selected: string;
+ options: string[];
+ onChange: (value: string) => void;
+};
+
+export const Dropdown: React.FC
+ {label}
+
+ );
+};
diff --git a/src/modules/shared/Dropdown/index.ts b/src/modules/shared/Dropdown/index.ts
new file mode 100644
index 0000000000..2f29bad4e6
--- /dev/null
+++ b/src/modules/shared/Dropdown/index.ts
@@ -0,0 +1 @@
+export * from './Dropdown';
diff --git a/src/modules/shared/Footer/Footer.scss b/src/modules/shared/Footer/Footer.scss
new file mode 100644
index 0000000000..5bfdfe79ff
--- /dev/null
+++ b/src/modules/shared/Footer/Footer.scss
@@ -0,0 +1,127 @@
+@import '../../../styles/main';
+
+.footer {
+ box-shadow: 0 -1px 0 0 var(--color-gray-elements);
+}
+
+.footer__container {
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+ padding-block: 32px;
+ margin-top: 64px;
+
+ @include content-padding-inline;
+
+ @include on-tablet {
+ flex-direction: row;
+ justify-content: space-between;
+ height: 96px;
+ align-items: center;
+ margin-top: 64px;
+ padding-block: 0;
+ gap: 0;
+ }
+
+ @include on-desktop {
+ justify-content: space-between;
+ margin-top: 80px;
+ }
+}
+
+.footer__logo-container {
+ height: 32px;
+
+ @include on-tablet {
+ flex-grow: 1;
+ }
+}
+
+.footer__logo {
+ width: 89px;
+ height: 32px;
+}
+
+.footer__items {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ flex-shrink: 0;
+
+ @include on-tablet {
+ flex-direction: row;
+ gap: 0;
+ flex-grow: 1;
+ justify-content: space-between;
+ }
+
+ @include on-desktop {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+}
+
+.footer__link {
+ text-transform: uppercase;
+ text-decoration: none;
+ font-family: Mont-Bold, sans-serif;
+ font-size: 12px;
+ font-weight: 800;
+ line-height: 11px;
+ letter-spacing: 0.04em;
+ color: var(--color-gray-secondary);
+
+ @include hover(color, var(--color-gray-primary));
+}
+
+.footer__block {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+
+ @include on-tablet {
+ display: flex;
+ align-items: center;
+ justify-content: end;
+ flex-grow: 1;
+ }
+}
+
+.footer__button {
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ border: 1px solid var(--color-gray-icons-placeholders);
+ background-color: var(--color-bg);
+ box-sizing: border-box;
+ margin-left: 16px;
+ transform: rotate(90deg);
+
+ transition: border-color 0.3s ease;
+
+
+ &:hover {
+ border: 1px solid var(--color-gray-primary);
+ background-color: var(--color-hover);
+ }
+}
+
+.footer__button-title {
+ font-family: Mont-SemiBold, sans-serif;
+ font-size: 12px;
+ font-weight: 700;
+ line-height: 15.34px;
+ color: var(--color-gray-secondary);
+}
+
+body.theme_dark .footer__button {
+ border: none;
+ background-color: var(--color-surface-2);
+
+ @include hover(background-color, var(--color-gray-icons-placeholders))
+}
diff --git a/src/modules/shared/Footer/Footer.tsx b/src/modules/shared/Footer/Footer.tsx
new file mode 100644
index 0000000000..e4309062c2
--- /dev/null
+++ b/src/modules/shared/Footer/Footer.tsx
@@ -0,0 +1,68 @@
+import './Footer.scss';
+import React, { useContext } from 'react';
+import { Link } from 'react-router-dom';
+import { Icon } from '../Icon';
+import { iconsObject } from '../../../constants/iconsObject';
+import { GlobalContext } from '../../../store/GlobalContext';
+
+export const Footer: React.FC = () => {
+ const { theme } = useContext(GlobalContext);
+
+ const backToTop = () => {
+ window.scrollTo({
+ top: 0,
+ behavior: 'smooth',
+ });
+ };
+
+ return (
+
+
+ {isOpen && (
+
+ -
+ {options.map(option => (
+
- handleOptionClick(option)} + > + {option} + + ))} +
+
+ );
+};
diff --git a/src/modules/shared/Footer/index.ts b/src/modules/shared/Footer/index.ts
new file mode 100644
index 0000000000..ddcc5a9cd1
--- /dev/null
+++ b/src/modules/shared/Footer/index.ts
@@ -0,0 +1 @@
+export * from './Footer';
diff --git a/src/modules/shared/Header/Header.scss b/src/modules/shared/Header/Header.scss
new file mode 100644
index 0000000000..396b02339a
--- /dev/null
+++ b/src/modules/shared/Header/Header.scss
@@ -0,0 +1,297 @@
+@import '../../../styles/main';
+@import '../../../styles/utils/variables';
+
+.header {
+ height: 48px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ gap: 16px;
+ box-shadow: 0 1px 0 0 var(--color-gray-elements);
+ background-color: var(--color-bg);
+
+ @include on-desktop {
+ height: 64px;
+ }
+}
+
+.header__logo {
+ width: 64px;
+ height: 22px;
+
+ @include on-desktop {
+ width: 80px;
+ height: 28px;
+ }
+}
+
+.header__logo-container {
+ display: flex;
+ height: 100%;
+ width: 96px;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+
+ @include on-desktop {
+ width: 128px;
+ }
+}
+
+.header__menu {
+ display: none;
+
+ @include on-tablet {
+ display: flex;
+ }
+}
+
+.header__list {
+ list-style: none;
+ display: flex;
+ align-items: center;
+ gap: 24px;
+ text-decoration: none;
+
+ @include on-desktop {
+ gap: 64px;
+ }
+}
+
+.header__item {
+ position: relative;
+ display: inline-block;
+ text-transform: uppercase;
+ text-decoration: none;
+ line-height: 48px;
+ font-family: Mont-Bold, sans-serif;
+ color: var(--color-gray-secondary);
+ font-size: 12px;
+ font-weight: 800;
+ letter-spacing: 0.04em;
+ box-sizing: border-box;
+
+ @include on-desktop {
+ line-height: 64px;
+ }
+}
+
+.header__item:hover {
+ color: var(--color-gray-primary);
+}
+
+.header__item::after,
+.header__icon::after {
+ content: '';
+ position: absolute;
+ display: block;
+ height: 0;
+ width: 100%;
+ background-color: var(--color-gray-primary);
+ transition: height 0.3s ease, transform 0.3s ease;
+ transform-origin: left;
+ bottom: 0;
+ box-sizing: border-box;
+}
+
+.header__item:hover::after,
+.header__icon:hover::after {
+ height: 2px;
+ transform: scale(1);
+}
+
+.header__item--active {
+ color: var(--color-gray-primary);
+}
+
+.header__item--active::after {
+ height: 2px;
+ transition: none;
+}
+
+.header__search-wrapper {
+ position: relative;
+ display: flex;
+ align-items: center;
+ margin-right: 16px;
+}
+
+.header__search-input {
+ height: 48px;
+ box-shadow: -1px 0 0 0 var(--color-gray-elements);
+ width: 100%;
+ padding-inline: 8px;
+ background-color: var(--color-bg);
+ font-family: Mont-Regular, sans-serif;
+ color: var(--color-gray-primary);
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 21px;
+ outline: none;
+ border: none;
+
+ @include on-tablet {
+ flex-grow: 1;
+ }
+
+ @include on-desktop {
+ height: 64px;
+ }
+
+ .header__search-input::placeholder {
+ font-family: Mont-Regular, sans-serif;
+ color: var(--color-gray-secondary);
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 21px;
+ transition: opacity 0.3s ease;
+ }
+
+ .header__search-input:focus::placeholder {
+ opacity: 0;
+ }
+}
+
+.header__switch-theme {
+ background: none;
+ border: none;
+ cursor: pointer;
+
+ order: 1;
+ color: var(--color-gray-secondary);
+ font-size: 12px;
+ font-weight: 800;
+ letter-spacing: 0.04em;
+ text-transform: uppercase;
+ text-decoration: none;
+ line-height: 48px;
+ font-family: Mont-Bold, sans-serif;
+ box-sizing: border-box;
+ flex-shrink: 0;
+
+ position: relative;
+ display: inline-block;
+
+ @include on-tablet {
+ order: 0;
+ }
+
+ @include on-desktop {
+ line-height: 64px;
+ }
+
+ &:hover {
+ color: var(--color-gray-primary);
+ }
+}
+
+.header__buttons-right {
+ height: 100%;
+ flex-grow: 1;
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+}
+
+.header__buttons-wrapper {
+ display: none;
+
+ @include on-tablet {
+ display: flex;
+ }
+}
+
+.header__buttons-wrapper--bottom {
+ display: flex;
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ justify-content: space-between;
+ background-color: var(--color-bg);
+ height: 64px;
+ border-top: 1px solid var(--color-gray-elements);
+}
+
+.header__icon {
+ width: 48px;
+ height: 48px;
+ box-shadow: -1px 0 0 0 var(--color-gray-elements);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+
+
+ @include on-tablet {
+ display: flex;
+ }
+
+ @include on-desktop {
+ width: 64px;
+ height: 64px;
+ }
+}
+
+.header__buttons-wrapper--bottom .header__icon {
+ width: 100%;
+ height: 100%;
+ align-items: center;
+ justify-content: center;
+}
+
+.header__icon:hover {
+ color: var(--color-gray-primary);
+ background: var(--color-hover);
+}
+
+body.theme_dark .header__icon:hover {
+ @include hover(background-color, var(--color-gray-icons-placeholders))
+}
+
+.header__icon--active::after {
+ content: '';
+ position: absolute;
+ width: 64px;
+ width: 100%;
+ background-color: var(--color-gray-primary);
+}
+
+.header__icon-wrapper {
+ width: 28px;
+ height: 28px;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.header__quantity {
+ position: absolute;
+ top: 0;
+ right: 0;
+ background-color: var(--color-red);
+ color: white;
+ border: 1px solid white;
+ border-radius: 50%;
+ width: 14px;
+ height: 14px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ font-family: Mont-Regular, sans-serif;
+ font-size: 9px;
+ font-weight: 700;
+}
+
+.header__icon--menu {
+ display: flex;
+ order: 2;
+
+ @include on-tablet {
+ display: none;
+ }
+}
+
diff --git a/src/modules/shared/Header/Header.tsx b/src/modules/shared/Header/Header.tsx
new file mode 100644
index 0000000000..0bab710f3e
--- /dev/null
+++ b/src/modules/shared/Header/Header.tsx
@@ -0,0 +1,183 @@
+import './Header.scss';
+import classNames from 'classnames';
+import React, { useContext, useState, useEffect, useMemo } from 'react';
+import { Link, NavLink, useLocation, useSearchParams } from 'react-router-dom';
+import { GlobalContext } from '../../../store/GlobalContext';
+import { iconsObject } from '../../../constants/iconsObject';
+import { Icon } from '../Icon';
+import { navLinks } from '../../../constants/navLinks';
+import debounce from 'lodash.debounce';
+import { getSearchWith } from '../../../utils/searchHelper';
+
+const getActiveItem = ({ isActive }: { isActive: boolean }) =>
+ classNames('header__item', { 'header__item--active': isActive });
+
+const getActiveIcon = ({ isActive }: { isActive: boolean }) =>
+ classNames('header__icon', { 'header__icon--active': isActive });
+
+export const Header: React.FC = () => {
+ const { cart, favorites, toggleMenu, isMenuOpen, theme, toggleTheme } =
+ useContext(GlobalContext);
+
+ const location = useLocation();
+
+ const [searchParams, setSearchParams] = useSearchParams();
+ const [query, setQuery] = useState('');
+
+ const totalQuantity = cart.reduce((sum, item) => sum + item.quantity, 0);
+ const totalFavorites = favorites.length;
+ const allowedPaths = ['/phones', '/tablets', '/accessories', '/favorites'];
+
+ const applyQuery = useMemo(() => {
+ return debounce((value: string) => {
+ const updatedParams = getSearchWith(searchParams, {
+ query: value,
+ });
+
+ setSearchParams(updatedParams);
+ }, 1000);
+ }, [searchParams, setSearchParams]);
+
+ useEffect(() => {
+ setQuery('');
+ }, [location.pathname]);
+
+ const handleInputChange = (event: React.ChangeEvent
+
+ {theme === 'light' ? (
+ 
+ ) : (
+ 
+ )}
+
+
+
+
+ ) : (
+
+ )}
+
+
+
+
+ Github
+
+
+ Contacts
+
+
+ rights
+
+
+
+
+ Back to top
+
+
+
+
+ {theme === 'light' ? (
+
+ ) : (
+
+ )}
+
+
+
+ );
+};
diff --git a/src/modules/shared/Header/index.ts b/src/modules/shared/Header/index.ts
new file mode 100644
index 0000000000..266dec8a1b
--- /dev/null
+++ b/src/modules/shared/Header/index.ts
@@ -0,0 +1 @@
+export * from './Header';
diff --git a/src/modules/shared/Icon/Icon.scss b/src/modules/shared/Icon/Icon.scss
new file mode 100644
index 0000000000..201d10644b
--- /dev/null
+++ b/src/modules/shared/Icon/Icon.scss
@@ -0,0 +1,7 @@
+@import '../../../styles/main';
+
+.icon__picture {
+ display: flex;
+ width: 16px;
+ height: 16px;
+}
diff --git a/src/modules/shared/Icon/Icon.tsx b/src/modules/shared/Icon/Icon.tsx
new file mode 100644
index 0000000000..61a15973e5
--- /dev/null
+++ b/src/modules/shared/Icon/Icon.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import './Icon.scss';
+
+type IconData = {
+ title: string;
+ path: string;
+};
+
+type Props = {
+ icon: IconData;
+};
+
+export const Icon: React.FC
+ ) : (
+
+ )}
+
+
+
+
+
+
+ {navLinks.map(link => (
+
+ {link.title}
+
+ ))}
+
+
+ {allowedPaths.includes(location.pathname) && (
+
+
+
+ {query ? (
+
+ )}
+
+ {theme === 'light' ? (
+
+ ) : theme === 'light' ? (
+
+ {isMenuOpen ? (
+ theme === 'light' ? (
+
+
+
+
+ {
+ if (isMenuOpen) {
+ toggleMenu();
+ }
+ }}
+ >
+
+
+
+
+
+
+
+ {totalFavorites > 0 && (
+ {totalFavorites}
+ )}
+ {theme === 'light' ? (
+
+
+ {theme === 'light' ? (
+
+
+
+
+ );
+};
diff --git a/src/modules/shared/Loader/index.ts b/src/modules/shared/Loader/index.ts
new file mode 100644
index 0000000000..d5ce981151
--- /dev/null
+++ b/src/modules/shared/Loader/index.ts
@@ -0,0 +1 @@
+export * from './Loader';
diff --git a/src/modules/shared/Menu/Menu.scss b/src/modules/shared/Menu/Menu.scss
new file mode 100644
index 0000000000..641a18adc9
--- /dev/null
+++ b/src/modules/shared/Menu/Menu.scss
@@ -0,0 +1,69 @@
+@import '../../../styles/main';
+
+.menu {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+
+ position: fixed;
+ top: 48px;
+ bottom: 64px;
+ width: 100%;
+ background-color: var(--color-bg);
+ transform: translateX(-100%);
+ transition: transform 0.3s ease, opacity 0.3s ease;
+ opacity: 0;
+ z-index: 1;
+ pointer-events: none;
+}
+
+.menu__list {
+ list-style: none;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 24px;
+}
+
+.menu__link {
+ position: relative;
+ font-family: Molt-Bold, sans-serif;
+ font-weight: 800;
+ font-size: 12px;
+ letter-spacing: 0.04em;
+ text-align: center;
+ text-transform: uppercase;
+ color: var(--color-gray-secondary);
+ text-decoration: none;
+ display: flex;
+
+ &:hover {
+ color: var(--color-gray-primary);
+ }
+}
+
+.menu__link::after {
+ content: '';
+ position: absolute;
+ display: block;
+ height: 0;
+ width: 100%;
+ background-color: var(--color-gray-primary);
+ bottom: -8px;
+ left: 0;
+ transition: height 0.3s ease;
+ box-sizing: content-box;
+}
+
+.menu__link:hover::after {
+ height: 1px;
+}
+
+.menu--open {
+ transform: translateX(0);
+ opacity: 1;
+ pointer-events: all;
+}
diff --git a/src/modules/shared/Menu/Menu.tsx b/src/modules/shared/Menu/Menu.tsx
new file mode 100644
index 0000000000..8075e2f3f1
--- /dev/null
+++ b/src/modules/shared/Menu/Menu.tsx
@@ -0,0 +1,40 @@
+import React, { useContext, useEffect } from 'react';
+import './Menu.scss';
+import { Link } from 'react-router-dom';
+import { GlobalContext } from '../../../store/GlobalContext';
+import { navLinks } from '../../../constants/navLinks';
+
+export const Menu: React.FC = () => {
+ const { isMenuOpen, toggleMenu } = useContext(GlobalContext);
+
+ useEffect(() => {
+ const handleResize = () => {
+ if (window.innerWidth > 640 && isMenuOpen) {
+ toggleMenu();
+ }
+ };
+
+ window.addEventListener('resize', handleResize);
+
+ return () => {
+ window.removeEventListener('resize', handleResize);
+ };
+ }, [isMenuOpen, toggleMenu]);
+
+ return (
+
+ );
+};
diff --git a/src/modules/shared/Menu/index.ts b/src/modules/shared/Menu/index.ts
new file mode 100644
index 0000000000..629d3d0aa1
--- /dev/null
+++ b/src/modules/shared/Menu/index.ts
@@ -0,0 +1 @@
+export * from './Menu';
diff --git a/src/modules/shared/Pagination/Pagination.scss b/src/modules/shared/Pagination/Pagination.scss
new file mode 100644
index 0000000000..a51d3da72b
--- /dev/null
+++ b/src/modules/shared/Pagination/Pagination.scss
@@ -0,0 +1,79 @@
+@import '../../../styles/main';
+
+.pagination {
+ margin: 40px auto 80px;
+ height: 32px;
+ display: flex;
+ gap: 16px;
+ justify-content: center;
+ align-items: center;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.pagination__button-container {
+ display: flex;
+ gap: 8px;
+}
+
+.pagination__button-page,
+.pagination__button {
+ padding: 0;
+ margin: 0;
+ position: relative;
+ width: 32px;
+ height: 32px;
+ border: 1px solid var(--color-gray-elements);
+ background-color: var(--color-bg);
+ box-sizing: border-box;
+ cursor: pointer;
+ color: var(--color-gray-primary);
+ font-family: Mont-Regular, sans-serif;
+ font-size: 14px;
+ font-weight: 600;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ transition: background-color 0.3s, border-color 0.3s;
+}
+
+body.theme_dark .pagination__button-page,
+body.theme_dark .pagination__button {
+ border: none;
+ background-color: var(--color-surface-1);
+ color: var(--color-gray-primary);
+}
+
+.pagination__button-page:not(.pagination__button-page--active):hover {
+ border-color: var(--color-gray-primary);
+}
+
+body.theme_dark .pagination__button-page:not(.pagination__button-page--active):hover {
+ background-color: var(--color-gray-elements);
+}
+
+.pagination__button:not(.pagination__button--disabled):hover {
+ border-color: var(--color-gray-primary);
+}
+
+body.theme_dark .pagination__button:not(.pagination__button--disabled):hover {
+ background-color: var(--color-gray-elements);
+}
+
+.pagination__button-page--active {
+ background-color: var(--color-gray-primary);
+ color: var(--color-bg);
+}
+
+body.theme_dark .pagination__button-page--active {
+ background-color: var(--color-accent);
+}
+
+.pagination__button--disabled {
+ cursor: not-allowed;
+}
+
+body.theme_dark .pagination__button--disabled {
+ background-color: var(--color-bg);
+ border: 1px solid var(--color-gray-elements);
+}
diff --git a/src/modules/shared/Pagination/Pagination.tsx b/src/modules/shared/Pagination/Pagination.tsx
new file mode 100644
index 0000000000..6e91fda4b8
--- /dev/null
+++ b/src/modules/shared/Pagination/Pagination.tsx
@@ -0,0 +1,93 @@
+import React, { useContext } from 'react';
+import './Pagination.scss';
+import { Icon } from '../Icon';
+import { iconsObject } from '../../../constants/iconsObject';
+import classNames from 'classnames';
+import { GlobalContext } from '../../../store/GlobalContext';
+
+interface Props {
+ total: number;
+ perPage: number;
+ currentPage: number;
+ onPageChange: (page: number) => void;
+}
+
+export const Pagination: React.FC
+
+
+ );
+};
diff --git a/src/modules/shared/Pagination/index.ts b/src/modules/shared/Pagination/index.ts
new file mode 100644
index 0000000000..e016c96b72
--- /dev/null
+++ b/src/modules/shared/Pagination/index.ts
@@ -0,0 +1 @@
+export * from './Pagination';
diff --git a/src/modules/shared/ProductCard/ProductCard.scss b/src/modules/shared/ProductCard/ProductCard.scss
new file mode 100644
index 0000000000..3cbaad5943
--- /dev/null
+++ b/src/modules/shared/ProductCard/ProductCard.scss
@@ -0,0 +1,206 @@
+@import '../../../styles/utils/mixins';
+@import '../../../styles/main';
+@import '../../../styles/utils/variables';
+
+body.theme_dark .productCard {
+ border: none;
+ background-color: var(--color-surface-1);
+}
+
+.productCard__container {
+ cursor: pointer;
+ text-decoration: none;
+ width: 100%;
+ height: 100%;
+ padding: 32px;
+ box-sizing: border-box;
+ border: 1px solid var(--color-gray-elements);
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ transition: border 0.3s;
+
+ @include hover(border-color, var(--color-gray-primary));
+}
+
+.productCard__container-photo {
+ width: 148px;
+ height: 129px;
+ margin: auto;
+ transition: transform 0.3s;
+
+ @include on-tablet {
+ width: 173px;
+ height: 202px;
+ }
+
+ @include on-desktop {
+ width: 208px;
+ height: 196px;
+ }
+}
+
+.productCard__photo {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+}
+
+.productCard__container-title {
+ display: flex;
+ align-items: flex-end;
+}
+
+.productCard__title {
+ font-family: Mont-Regular, sans-serif;
+ color: var(--color-gray-primary);
+ font-size: 14px;
+ box-sizing: border-box;
+ font-weight: 600;
+ padding-top: 16px;
+ height: 58px;
+}
+
+.productCard__container-price {
+ height: 31px;
+ display: flex;
+ gap: 8px;
+}
+
+.productCard__price {
+ &-regular {
+ font-family: Mont-Regular, sans-serif;
+ color: var(--color-gray-secondary);
+ font-size: 22px;
+ font-weight: 500;
+ line-height: 28.12px;
+ text-decoration-line: line-through;
+ }
+
+ &-discount,
+ &-regular-without-discount {
+ font-family: Mont-Bold, sans-serif;
+ color: var(--color-gray-primary);
+ font-size: 22px;
+ font-weight: 800;
+ line-height: 30.8px;
+ }
+}
+
+.productCard__divider {
+ display: block;
+ width: 100%;
+ height: 1px;
+ background-color: var(--color-gray-elements);
+}
+
+.productCard__container-specifications {
+ display: flex;
+ flex-direction: column;
+ height: 77px;
+ justify-content: center;
+ gap: 8px;
+}
+
+.productCard__block {
+ width: 100%;
+ height: 15px;
+ display: flex;
+ justify-content: space-between;
+
+ font-family: Mont-SemiBold, sans-serif;
+ font-size: 12px;
+ font-weight: 600;
+}
+
+.productCard__info {
+ color: var(--color-gray-secondary);
+}
+
+.productCard__value {
+ color: var(--color-gray-primary);
+}
+
+.productCard__container-buttons {
+ width: 100%;
+ display: flex;
+ gap: 8px;
+}
+
+.productCard__button {
+ border: none;
+ cursor: pointer;
+ font-family: Mont-Regular, sans-serif;
+ color: var(--color-bg);
+ font-size: 14px;
+ font-weight: 700;
+ line-height: 21px;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.productCard__button-card {
+ background-color: var(--color-gray-primary);
+ width: 100%;
+
+ @include hover(box-shadow, 0 3px 13px 0 #17203166);
+}
+
+.productCard__button-card--active {
+ background-color: var(--color-bg);
+ color: var(--color-green);
+ border: 1px solid var(--color-gray-elements);
+ pointer-events: none;
+
+ &:hover {
+ box-shadow: none;
+ border-color: inherit;
+ }
+}
+
+body.theme_dark .productCard__button-card {
+ color: var(--color-gray-primary);
+ background-color: var(--color-accent);
+
+ @include hover(background-color, var(--color-accent-hover));
+}
+
+body.theme_dark .productCard__button-card--active {
+ color: var(--color-gray-primary);
+ background-color: var(--color-surface-2);
+ border: none;
+}
+
+.productCard__button-favorites {
+ background-color: var(--color-bg);
+ width: 40px;
+ flex-shrink: 0;
+ border: 1px solid var(--color-gray-icons-placeholders);
+
+ @include hover(border-color, var(--color-gray-primary));
+}
+
+.productCard__button-favorites--active {
+ border: 1px solid var(--color-gray-elements);
+}
+
+body.theme_dark .productCard__button-favorites {
+ color: var(--color-gray-primary);
+ background-color: var(--color-surface-2);
+ border: none;
+}
+
+body.theme_dark .productCard__button-favorites:hover {
+ background-color: var(--color-gray-icons-placeholders);
+}
+
+body.theme_dark .productCard__button-favorites--active {
+ background-color: var(--color-surface-1);
+ border: 1px solid var(--color-gray-elements);
+}
+
+.productCard:hover .productCard__container-photo {
+ transform: scale(1.05);
+}
diff --git a/src/modules/shared/ProductCard/ProductCard.tsx b/src/modules/shared/ProductCard/ProductCard.tsx
new file mode 100644
index 0000000000..3df8ac14d5
--- /dev/null
+++ b/src/modules/shared/ProductCard/ProductCard.tsx
@@ -0,0 +1,119 @@
+import './ProductCard.scss';
+import React, { useContext } from 'react';
+import { Link } from 'react-router-dom';
+import classNames from 'classnames';
+import { Product } from '../../../types/Product';
+import { GlobalContext } from '../../../store/GlobalContext';
+import { Icon } from '../Icon';
+import { iconsObject } from '../../../constants/iconsObject';
+
+type Props = {
+ product: Product;
+ displayType: 'fullPrice' | 'with-discount';
+};
+
+export const ProductCard: React.FC
+ {Array.from({ length: endPage - startPage + 1 }, (_, index) => (
+
+ ))}
+
+
+
+
+
+ );
+};
diff --git a/src/modules/shared/ProductCard/index.ts b/src/modules/shared/ProductCard/index.ts
new file mode 100644
index 0000000000..7ce031c382
--- /dev/null
+++ b/src/modules/shared/ProductCard/index.ts
@@ -0,0 +1 @@
+export * from './ProductCard';
diff --git a/src/modules/shared/ProductsList/ProductsList.scss b/src/modules/shared/ProductsList/ProductsList.scss
new file mode 100644
index 0000000000..53112068c6
--- /dev/null
+++ b/src/modules/shared/ProductsList/ProductsList.scss
@@ -0,0 +1,35 @@
+@import '../../../styles/main';
+
+.productsList {
+ margin-top: 24px;
+ gap: 40px 16px;
+
+ @include page-grid;
+
+ @media (max-width: 640px) {
+ .productItem {
+ grid-column: 1 / -1;
+ }
+ }
+
+ @include on-tablet {
+ .productItem {
+ grid-column: span 6;
+ }
+ }
+
+ @media (min-width: 768px) {
+ .productItem {
+ grid-column: span 4;
+ }
+ }
+
+ @include on-desktop {
+ .productItem {
+ grid-column: span 6;
+ }
+ }
+}
+
+
+
diff --git a/src/modules/shared/ProductsList/ProductsList.tsx b/src/modules/shared/ProductsList/ProductsList.tsx
new file mode 100644
index 0000000000..5bf701df46
--- /dev/null
+++ b/src/modules/shared/ProductsList/ProductsList.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import './ProductsList.scss';
+import { Product } from '../../../types/Product';
+import { ProductCard } from '../ProductCard';
+
+type Props = {
+ products: Product[];
+ displayType: 'fullPrice' | 'with-discount';
+};
+
+export const ProductsList: React.FC
+ 
+
+
+
+ {product.name}
+
+
+
+ {displayType === 'fullPrice' && (
+
+ {`$${product.fullPrice}`}
+
+ )}
+
+ {displayType === 'with-discount' && (
+ <>
+
+ {`$${product.price}`}
+
+
+ {`$${product.fullPrice}`}
+
+
+ )}
+
+
+
+
+
+
+
+
+ Screen
+ {product.screen}
+
+
+ Capacity
+ {product.capacity}
+
+
+ RAM
+ {product.ram}
+
+
+
+
+
+
+
+ {products.map(product => (
+
+);
diff --git a/src/modules/shared/ProductsList/index.ts b/src/modules/shared/ProductsList/index.ts
new file mode 100644
index 0000000000..09f9887f27
--- /dev/null
+++ b/src/modules/shared/ProductsList/index.ts
@@ -0,0 +1 @@
+export * from './ProductsList';
diff --git a/src/modules/shared/ProductsSlider/ProductsSlider.scss b/src/modules/shared/ProductsSlider/ProductsSlider.scss
new file mode 100644
index 0000000000..01f0cd2380
--- /dev/null
+++ b/src/modules/shared/ProductsSlider/ProductsSlider.scss
@@ -0,0 +1,112 @@
+@import '../../../styles/main';
+
+.productsSlider {
+ padding-left: 16px;
+
+ @include on-desktop {
+ margin-block: 80px;
+
+ @include content-padding-inline;
+ }
+}
+
+.productsSlider__container-top {
+ padding-right: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 24px;
+ gap: 72px;
+}
+
+.productsSlider__title {
+ font-size: 22px;
+ font-family: Mont-Bold, sans-serif;
+ font-weight: 800;
+ letter-spacing: -0.01em;
+ color: var(--color-gray-primary);
+
+ @include on-tablet {
+ font-size: 32px;
+ }
+}
+
+.productsSlider__buttons {
+ display: flex;
+ gap: 16px;
+}
+
+.productsSlider__button {
+ width: 32px;
+ height: 32px;
+ border: 1px solid var(--color-gray-icons-placeholders);
+ background-color: var(--color-bg);
+ box-sizing: border-box;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: border 0.3s, background-color 0.3s;
+}
+
+.productsSlider__button--disabled {
+ cursor: not-allowed;
+ border: 1px solid var(--color-gray-elements);
+ background-color: inherit;
+}
+
+.productsSlider__button--disabled:hover {
+ border: 1px solid var(--color-gray-elements);
+}
+
+body.theme_dark .productsSlider__button {
+ border: none;
+ background-color: var(--color-surface-2);
+}
+
+.productsSlider__button:not(.productsSlider__button--disabled):hover {
+ border: 1px solid var(--color-gray-primary);
+ background-color: var(--color-hover);
+}
+
+body.theme_dark .productsSlider__button:not(.productsSlider__button--disabled):hover {
+ border: none;
+ background-color: var(--color-gray-icons-placeholders);
+}
+
+body.theme_dark .productsSlider__button--disabled {
+ border: 1px solid var(--color-gray-elements);
+ background-color: inherit;
+}
+
+.productsSlider__viewport {
+ overflow: hidden;
+ width: 100%;
+
+ @include on-desktop {
+ width: 1136px;
+ }
+}
+
+.productsSlider__track {
+ display: flex;
+ transition: transform 0.5s ease-in-out;
+}
+
+.productsSlider__item {
+ flex: 0 0 auto;
+ margin-right: 16px;
+
+ width: 212px;
+ height: 442px;
+
+ @include on-tablet {
+ width: 237px;
+ height: 515px;
+ }
+
+ @include on-desktop {
+ width: 272px;
+ height: 509px;
+ }
+}
diff --git a/src/modules/shared/ProductsSlider/ProductsSlider.tsx b/src/modules/shared/ProductsSlider/ProductsSlider.tsx
new file mode 100644
index 0000000000..3f77b048c2
--- /dev/null
+++ b/src/modules/shared/ProductsSlider/ProductsSlider.tsx
@@ -0,0 +1,128 @@
+import './ProductsSlider.scss';
+import classNames from 'classnames';
+import React, { useState, useEffect, useContext } from 'react';
+import { Product } from '../../../types/Product';
+import { ProductCard } from '../ProductCard';
+import { Icon } from '../Icon';
+import { iconsObject } from '../../../constants/iconsObject';
+import { GlobalContext } from '../../../store/GlobalContext';
+
+type Props = {
+ title: string;
+ products: Product[];
+ displayType: 'fullPrice' | 'with-discount';
+};
+
+export const ProductsSlider: React.FC
+
+ ))}
+
+
+ );
+};
diff --git a/src/modules/shared/ProductsSlider/index.ts b/src/modules/shared/ProductsSlider/index.ts
new file mode 100644
index 0000000000..68d3ea0012
--- /dev/null
+++ b/src/modules/shared/ProductsSlider/index.ts
@@ -0,0 +1 @@
+export * from './ProductsSlider';
diff --git a/src/store/GlobalContext.tsx b/src/store/GlobalContext.tsx
new file mode 100644
index 0000000000..ff9a07b62b
--- /dev/null
+++ b/src/store/GlobalContext.tsx
@@ -0,0 +1,184 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Product } from '../types/Product';
+import { CartProduct } from '../types/CartProduct';
+import { getAllProducts } from '../utils/productApi';
+import { useLocalStorage } from '../hooks/useLocalStorage';
+import { useTheme } from '../hooks/useTheme';
+
+type GlobalContextType = {
+ allProducts: Product[];
+ setAllProducts: React.Dispatch
+
+
+ {title}
+
+
+
+ {currentIndex === 0 ? (
+ theme === 'light' ? (
+
+
+ {currentIndex === maxIndex ? (
+ theme === 'light' ? (
+
+
+
+
+ {products.map(phone => (
+
+
+
+ ))}
+