-
-);
+ return (
+ Product Catalog
-
+
+
+
+
+
+
+
+
+
+
+ Page not found} />
+
+
+
+
+
+ /
+
+
+ 
+
+ Back
+
+
+ );
+};
diff --git a/src/components/Breadcrumbs/BreadCrumbs.module.scss b/src/components/Breadcrumbs/BreadCrumbs.module.scss
new file mode 100644
index 0000000000..834e49f707
--- /dev/null
+++ b/src/components/Breadcrumbs/BreadCrumbs.module.scss
@@ -0,0 +1,33 @@
+.breadcrumbs {
+ margin-bottom: 40px;
+
+ &__icon {
+ margin-right: 8px;
+ }
+
+ &__text {
+ text-decoration: none;
+ color: #ffff;
+ font-size: 12px;
+ font-weight: 700;
+ }
+}
+
+span {
+ color: var(--span-color);
+}
+
+.itemName {
+ color: #75767F;
+ font-size: 12px;
+ font-weight: 700px;
+ text-decoration: none;
+}
+
+.itemCategory {
+ color: #F1F2F9;
+ font-size: 12px;
+ font-weight: 700;
+ text-decoration: none;
+}
+
diff --git a/src/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx
new file mode 100644
index 0000000000..e7bb4fef82
--- /dev/null
+++ b/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { Link, useParams } from 'react-router-dom';
+import { Product } from '../../types/Product';
+import styles from './Breadcrumbs.module.scss';
+import homeIcon from '../../../public/img/icons/Home.svg';
+import strokeRight from '../../../public/img/icons/StrokeRight.svg';
+
+interface ProductDetailsPageProps {
+ categor?: string;
+ productDescription: Product | Product[];
+}
+
+export const Breadcrumbs: React.FC{message}
;
+};
diff --git a/src/components/Loader/Loader.module.scss b/src/components/Loader/Loader.module.scss
new file mode 100644
index 0000000000..759244f92a
--- /dev/null
+++ b/src/components/Loader/Loader.module.scss
@@ -0,0 +1,30 @@
+.loader {
+ display: flex;
+ width: 100%;
+ justify-content: center;
+ align-items: center;
+
+ &__content {
+ border-radius: 50%;
+ width: 2em;
+ height: 2em;
+ margin: 1em auto;
+ border: 0.3em solid #ddd;
+ border-left-color: #000;
+ animation: load8 1.2s infinite linear;
+ }
+}
+
+@keyframes load8 {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+
+
+
+
diff --git a/src/components/Loader/Loader.tsx b/src/components/Loader/Loader.tsx
new file mode 100644
index 0000000000..38d7117151
--- /dev/null
+++ b/src/components/Loader/Loader.tsx
@@ -0,0 +1,7 @@
+import styles from './Loader.module.scss';
+
+export const Loader = () => (
+
+
+
+);
diff --git a/src/components/Loader/index.ts b/src/components/Loader/index.ts
new file mode 100644
index 0000000000..b13bb4eb87
--- /dev/null
+++ b/src/components/Loader/index.ts
@@ -0,0 +1 @@
+export * from './';
diff --git a/src/components/Pagination/Pagination.module.scss b/src/components/Pagination/Pagination.module.scss
new file mode 100644
index 0000000000..bed5a8e9fe
--- /dev/null
+++ b/src/components/Pagination/Pagination.module.scss
@@ -0,0 +1,144 @@
+@font-face {
+ font-family: Mont;
+ src: url('./fonts/Mont-Regular.otf') format('opentype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: Mont;
+ src: url('./fonts/Mont-Bold.otf') format('opentype');
+ font-weight: bold;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: Mont;
+ src: url('./fonts/Mont-SemiBold.otf') format('opentype');
+ font-weight: 600;
+ font-style: normal;
+}
+
+$color-primary: #78b829;
+$color-secondary: #89939A;
+$color-white: #FFF;
+$color-dark: #1e1c1c;
+$color-light-gray: #F1F2F9;
+$color-active: #f0f0f0;
+$font-primary: 'Mont', 'Montserrat', sans-serif;
+$font-weight-bold: 800;
+$font-weight-medium: 600;
+$font-weight-regular: 400;
+
+.paginationContainer {
+ position: relative;
+ width: 1136px;
+ overflow-x: auto;
+ padding: 0 20px;
+}
+
+.paginationContainer::before,
+.paginationContainer::after {
+ content: "›";
+ position: absolute;
+ top: 25%;
+ font-size: 24px;
+ color: rgba(154, 205, 50, 0.3);
+ transform: translateY(-50%);
+ pointer-events: none;
+}
+
+.paginationContainer::before {
+ left: 10px;
+ transform: translateY(-50%) rotate(180deg);
+}
+
+.paginationContainer::after {
+ right: 10px;
+}
+
+.pagination {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 80px;
+ max-width: 1136px;
+ box-sizing: border-box;
+ padding-bottom: 10px;
+ scrollbar-color: #7aaf4c #1c1c1c;
+ scrollbar-width: thin;
+
+ &__controls {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+ justify-content: center;
+ padding: 10px 0;
+ max-width: 800px;
+ }
+
+ &__button {
+ padding: 8px 12px;
+ cursor: pointer;
+ flex-shrink: 0;
+ margin: 5px;
+ }
+}
+
+.pagination__buttonPrevious,
+.pagination__buttonNext {
+ background-color: var(--pagination-button-referral);
+ border: none;
+ color: rgb(142, 141, 141);
+ font-family: $font-primary;
+ font-size: 14px;
+ font-weight: 700px;
+ flex-shrink: 0;
+}
+
+.pagination__buttonPrevious:hover,
+.pagination__buttonNext:hover {
+ border: none;
+ background-color: #131313;
+ color: #ffff;
+ font-family: $font-primary;
+ font-size: 14px;
+ font-weight: 700px;
+}
+
+.pagination__pageButton {
+ padding: 8px 12px;
+ cursor: pointer;
+ background-color: var(--pagination-button);
+ color: #ffff;
+ border: none;
+ font-size: 14px;
+ font-weight: 600;
+ font-family: $font-primary;
+ flex-shrink: 0;
+}
+
+.pagination__pageButton:hover {
+ background-color: var(--pagination-page-button-hover);
+ transition: 0.8 all ease;
+ font-size: 14px;
+ font-weight: 600;
+ font-family: $font-primary;
+}
+
+.pagination__pageButton:active {
+ background-color: var(--pagination-page-button-active);
+ color: rgb(46, 46, 46);
+}
+
+@media (min-width: 640px) and (max-width: 1199px) {
+ .paginationContainer {
+ width: 100%;
+ }
+ .pagination__controls {
+ width: 100%;
+ align-items: center;
+ justify-content: center;
+ }
+}
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
new file mode 100644
index 0000000000..b6ca5b5724
--- /dev/null
+++ b/src/components/Pagination/Pagination.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import styles from './Pagination.module.scss';
+
+interface PaginationProps {
+ currentPage: number;
+ totalPages: number;
+ onPageChange: (page: number) => void;
+ itemsPerPage: number;
+}
+
+export const Pagination: React.FC
+
+ );
+};
diff --git a/src/components/Pagination/index.ts b/src/components/Pagination/index.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/components/ProductCard/ProductCard.module.scss b/src/components/ProductCard/ProductCard.module.scss
new file mode 100644
index 0000000000..ace3a93acc
--- /dev/null
+++ b/src/components/ProductCard/ProductCard.module.scss
@@ -0,0 +1,214 @@
+@font-face {
+ font-family: Mont;
+ src: url('./fonts/Mont-Regular.otf') format('opentype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: Mont;
+ src: url('./fonts/Mont-Bold.otf') format('opentype');
+ font-weight: bold;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: Mont;
+ src: url('./fonts/Mont-SemiBold.otf') format('opentype');
+ font-weight: 600;
+ font-style: normal;
+}
+
+$color-primary: #78b829;
+$color-secondary: #89939A;
+$color-white: #FFF;
+$color-dark: #1e1c1c;
+$color-light-gray: #F1F2F9;
+$color-active: #f0f0f0;
+
+// Font families
+$font-primary: 'Mont', 'Montserrat', sans-serif;
+$font-weight-bold: 800;
+$font-weight-medium: 600;
+$font-weight-regular: 400;
+
+
+.productCard {
+ width: 237px;
+ height: 512px;
+ background: var(--card-background);
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ padding: 32px;
+ color: var(--text-color);
+ transition: box-shadow 0.3s ease, transform 0.3s ease;
+ border-radius: 20px;
+
+ &:hover {
+ box-shadow: var(--card-box-shadow);
+ background: var(--card-background-hover);
+
+ }
+
+ &__image {
+ width: 100%;
+ margin-bottom: 16px;
+ height: 196px;
+ object-fit: contain;
+ transition: transform 0.3s ease;
+ }
+
+ &__link {
+ text-decoration: none;
+ }
+
+ &__title {
+ color: rgb(222, 218, 218);
+ font-weight: 600;
+ font-size: 14px;
+ font-family: $font-primary;
+ margin-bottom: 8px;
+ }
+
+ &__price {
+ font-size: 22px;
+ color: #F1F2F9;
+ }
+
+
+ &__specs {
+ font-size: 12px;
+ margin-bottom: 16px;
+ }
+
+ &__details {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 8px;
+ align-items: center;
+ width: 100%;
+ gap: 40px;
+ }
+
+ &__property {
+ font-weight: 600;
+ color: var(--text-property);
+ flex: 1;
+ white-space: nowrap;
+
+ }
+
+ &__value {
+ font-weight: 600;
+ color: var(--text-value);
+ text-align: right;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ &__actions {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ &__button {
+ color: var(--button-text-color);
+ border: none;
+ border-radius: 30px;
+ padding: 8px 16px;
+ cursor: pointer;
+ width: 160px;
+ height: 40px;
+ margin-right: 20px;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 21px;
+ transition: all 0.7s ease;
+ background-color: var(--button-background);
+
+ }
+
+ &__button:hover {
+ border: var(--border-button);
+ color: var(--text-button);
+ scale: 1.1;
+ background: var(--button-background-hover);
+ }
+
+ &__icon {
+ cursor: pointer;
+ height: 16px;
+ width: 16px;
+ }
+}
+
+.productCard:hover .productCard__image {
+ transform: scale(1.1);
+}
+
+.productPrice {
+ position: relative;
+ display: flex;
+ margin-bottom: 24px;
+ font-size: 22px;
+ font-weight: 800;
+
+ &__current {
+ font-weight: 800;
+ font-size: 22px;
+ margin-right: 7px;
+ color: #F1F2F9;
+ }
+
+ &__old {
+ font-weight: 600;
+ font-size: 22px;
+ color: #363837;
+ text-decoration: line-through;
+ }
+
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: -8px;
+ left: 0;
+ width: 100%;
+ background-color: #ffff;
+ height: 0.8px;
+
+ }
+}
+
+@media (min-width: 640px) and (max-width: 1199px) {
+ .productCard {
+ display: flex;
+ width: 100%;
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .productCard__button {
+ width: 100%;
+ }
+}
+
+@media (min-width: 320px) and (max-width: 639px) {
+ .productCard {
+ display: flex;
+ width: 100%;
+ max-width: 639px;
+ }
+
+ .homePageCard {
+ width: 100%;
+ width: 212px;
+ }
+
+ .productCard__button {
+ width: 100%;
+ margin-right: 4px;
+ padding: 4px 8px;
+ }
+}
diff --git a/src/components/ProductCard/ProductCard.tsx b/src/components/ProductCard/ProductCard.tsx
new file mode 100644
index 0000000000..db2fc0c62a
--- /dev/null
+++ b/src/components/ProductCard/ProductCard.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import styles from './ProductCard.module.scss';
+import { Link } from 'react-router-dom';
+import { favouritesIcon } from '../../assets/icons';
+import redIcon from '../../../public/img/icons/red.png';
+import { Product } from '../../types/Product';
+import { useCart } from '../../context/CartContext/CartContext';
+import { useFavorites } from '../../context/FavoritesContext/FavoritesContext';
+
+interface ProductCardProps {
+ product: Product;
+ isHomePahe?: boolean;
+}
+
+export const ProductCard: React.FC
+
+
+
+ {pages.map(page => (
+
+ ))}
+
+
+
+
+
+ 
+
+
+
+ );
+};
diff --git a/src/components/ProductCard/index.ts b/src/components/ProductCard/index.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/components/ProductFilter/ProductFilter.module.scss b/src/components/ProductFilter/ProductFilter.module.scss
new file mode 100644
index 0000000000..51f786ebbc
--- /dev/null
+++ b/src/components/ProductFilter/ProductFilter.module.scss
@@ -0,0 +1,97 @@
+@font-face {
+ font-family: 'Mont';
+ src: url('./fonts/Mont-Regular.otf') format('opentype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Mont';
+ src: url('./fonts/Mont-Bold.otf') format('opentype');
+ font-weight: bold;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Mont';
+ src: url('./fonts/Mont-SemiBold.otf') format('opentype');
+ font-weight: 600;
+ font-style: normal;
+}
+
+// variables.scss
+
+// Colors
+$color-primary: #78b829;
+$color-secondary: #89939A;
+$color-white: #FFFFFF;
+$color-dark: #1e1c1c;
+$color-light-gray: #F1F2F9;
+$color-active: #f0f0f0;
+
+// Font families
+$font-primary: 'Mont', 'Montserrat', sans-serif;
+$font-size-base: 12px;
+$font-weight-bold: 800;
+$font-weight-medium: 600;
+$font-weight-regular: 400;
+
+.blocks {
+ display: flex;
+
+ gap: 16px;
+ margin-bottom: 24px;
+}
+
+.sorting__select {
+ width: 187;
+ height: 40px;
+ padding: 12px;
+ background-color: var(--filter-select);
+ outline: none;
+ color: #F1F2F9;
+ border: none;
+ font-family: $font-primary;
+}
+
+.sorting__selectContainer {
+ border: 1px solid var(--color);
+}
+
+.itemsPerPage__selectContainer {
+ border: 1px solid var(--color);
+}
+.sorting__option {
+ font-size: $font-size-base;
+ font-family: $font-primary;
+}
+
+.itemsPerPage__label{
+ color: var(--filter-text);
+ font-weight: 700;
+ font-size: 12px;
+ font-family: $font-primary;
+}
+
+.sorting__label {
+ color: var(--filter-text);
+ font-weight: 700;
+ font-size: 12px;
+ font-family: $font-primary;
+}
+
+.itemsPerPage__select {
+ width: 136px;
+ height: 40px;
+ padding: 12px;
+ background-color: var(--filter-select);
+ outline: none;
+ color: #F1F2F9;
+ border: none;
+
+}
+
+.itemsPerPage__option {
+ font-size: $font-size-base;
+ font-family: $font-primary;
+}
diff --git a/src/components/ProductFilter/ProductFilter.tsx b/src/components/ProductFilter/ProductFilter.tsx
new file mode 100644
index 0000000000..c689bb5cbe
--- /dev/null
+++ b/src/components/ProductFilter/ProductFilter.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import styles from './ProductFilter.module.scss';
+
+interface ProductFilterProps {
+ sort: string;
+ itemsPerPage: number;
+ onSortChange: (event: React.ChangeEvent{product.name}
+ +
+ ${productPrise}
+
+ {productAdditionalPrice}
+
+
+
+
+
+ Screen:
+ {product.screen}
+
+
+ Capacity
+ {product.capacity}
+
+
+ RAM
+ {product.ram}
+
+
+
+ ![]()
toggleFavorite(product)}
+ src={isFavorite(product.id) ? redIcon : favouritesIcon}
+ alt="Favourites"
+ className={`${styles.productCard__icon} `}
+ />
+
+
+
+);
diff --git a/src/components/ProductsSlider/ProductsSlider.module.scss b/src/components/ProductsSlider/ProductsSlider.module.scss
new file mode 100644
index 0000000000..d1cac9196e
--- /dev/null
+++ b/src/components/ProductsSlider/ProductsSlider.module.scss
@@ -0,0 +1,127 @@
+.root {
+ background-color: red;
+}
+
+@font-face {
+ font-family: Mont;
+ src: url('./fonts/Mont-Regular.otf') format('opentype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: Mont;
+ src: url('./fonts/Mont-Bold.otf') format('opentype');
+ font-weight: bold;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: Mont;
+ src: url('./fonts/Mont-SemiBold.otf') format('opentype');
+ font-weight: 600;
+ font-style: normal;
+}
+
+$color-primary: #78b829;
+$color-secondary: #89939A;
+$color-white: #FFF;
+$color-dark: #1e1c1c;
+$color-light-gray: #F1F2F9;
+$color-active: #f0f0f0;
+$font-primary: 'Mont', 'Montserrat', sans-serif;
+$font-weight-bold: 800;
+$font-weight-medium: 600;
+$font-weight-regular: 400;
+
+.section {
+ position: relative;
+ width: 100%;
+ max-width: 100vw;
+ box-sizing: border-box;
+ margin-bottom: 80px;
+ overflow-x: hidden;
+
+ &__title {
+ margin-bottom: 24px;
+ color: $color-light-gray;
+ }
+
+ &__header {
+ display: flex;
+ justify-content: space-between;
+ }
+}
+
+.slider {
+ margin-right: 30px;
+}
+
+.slider__button {
+ width: 30px;
+ height: 30px;
+ background-color: transparent;
+ cursor: pointer;
+ transition: 0.5 ease;
+ border: 0.5px solid var(--button-slider-border);
+}
+
+.slider__button:hover {
+ background-color: var(--slider-button-hover);
+}
+
+.slider__button:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+.slider__icon {
+ width: 16px;
+ height: 16px;
+}
+
+.buttonPrev {
+ margin-right: 20px;
+}
+
+.products__list.productGrid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ box-sizing: border-box;
+ gap: 16px;
+ margin-bottom: 40px;
+ width: 100%;
+}
+
+@media (min-width: 640px) and (max-width: 1199px) {
+ .productGrid {
+ grid-template-columns: repeat(2, 1fr);
+ overflow: hidden;
+ }
+}
+
+@media (min-width: 320px) and (max-width: 639px) {
+ .slider {
+ display: flex;
+ gap: 16px;
+ justify-content: flex-end;
+ margin-right: 0;
+ }
+
+ .slider__button {
+ margin: 0;
+ }
+ .section__title {
+ font-size: 22px;
+ font-weight: 800;
+ color: $color-light-gray;
+ line-height: 30.8px;
+ margin-right: 72px;
+ }
+
+ .productGrid {
+ grid-template-columns: repeat(1, 1fr);
+ overflow: hidden;
+ }
+
+}
diff --git a/src/components/ProductsSlider/ProductsSlider.tsx b/src/components/ProductsSlider/ProductsSlider.tsx
new file mode 100644
index 0000000000..e585265af8
--- /dev/null
+++ b/src/components/ProductsSlider/ProductsSlider.tsx
@@ -0,0 +1,83 @@
+import { useState } from 'react';
+import strokeLeft from '../../../public/img/icons/StrokeLeft.svg';
+import strokeRight from '../../../public/img/icons/StrokeRight.svg';
+import { Product } from '../../types/Product';
+import { ProductCard } from '../ProductCard/ProductCard';
+import styles from './ProductsSlider.module.scss';
+
+interface ProductsSliderProps {
+ goods: Product[];
+ title: string;
+ isHomePage?: boolean;
+}
+
+export const ProductsSlider: React.FC
+
+
+ Sort by
+
+
+
+
+
+ Items on page
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+ {currentProducts.map(product => (
+
+
+
+
+ );
+};
diff --git a/src/context/CartContext/CartContext.tsx b/src/context/CartContext/CartContext.tsx
new file mode 100644
index 0000000000..c74d04c1fa
--- /dev/null
+++ b/src/context/CartContext/CartContext.tsx
@@ -0,0 +1,119 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import { Product } from '../../types/Product';
+
+interface CartItemProduct {
+ id: number;
+ name: string;
+ image: string;
+ price: number;
+}
+
+interface CartItem {
+ id: number;
+ product: CartItemProduct;
+ quantity: number;
+}
+
+interface CartContextType {
+ cart: CartItem[];
+ addToCart: (product: Product) => void;
+ removeFromCart: (id: number) => void;
+ updateQuantity: (id: number, quantity: number) => void;
+ clearCart: () => void;
+ totalQuantity: number;
+ totalAmount: number;
+}
+
+const CartContext = createContext
+ {children}
+
+
+
+ 
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ 
+ {totalFavorites > 0 && (
+ {totalFavorites}
+ )}
+
+
+
+
+
+ 
+ {totalQuantity > 0 && (
+ {totalQuantity}
+ )}
+
+
+
+
+ );
+};
+
+export default AccessoriesPage;
diff --git a/src/modules/AccessoriesPage/components/Accessories.module.scss b/src/modules/AccessoriesPage/components/Accessories.module.scss
new file mode 100644
index 0000000000..38b2ef641a
--- /dev/null
+++ b/src/modules/AccessoriesPage/components/Accessories.module.scss
@@ -0,0 +1,22 @@
+.productGrid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ box-sizing: border-box;
+ gap: 16px;
+ margin-bottom: 40px;
+ width: 100%;
+}
+
+@media (min-width: 640px) and (max-width: 1199px) {
+ .productGrid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+@media (min-width: 320px) and (max-width: 639px) {
+ .productGrid {
+ display: grid;
+ grid-template-columns: repeat(1, 1fr);
+ }
+}
diff --git a/src/modules/AccessoriesPage/components/AccessoriesList.tsx b/src/modules/AccessoriesPage/components/AccessoriesList.tsx
new file mode 100644
index 0000000000..68fbb440f0
--- /dev/null
+++ b/src/modules/AccessoriesPage/components/AccessoriesList.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { ProductCard } from '../../../components/ProductCard/ProductCard';
+import { Product } from '../../../types/Product';
+import styles from './Accessories.module.scss';
+
+interface AccessoriesListProps {
+ products: Product[];
+}
+
+export const AccessoriesList: React.FCAccessories page
+ + {loading &&There are no phones yet.
+ )}
+
+ {!loading && !error && products.length > 0 && (
+ <>
+
+ {products.map(product => (
+
+ );
+};
diff --git a/src/modules/AccessoriesPage/components/index.ts b/src/modules/AccessoriesPage/components/index.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/modules/AccessoriesPage/index.ts b/src/modules/AccessoriesPage/index.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/modules/CartPage/CartPage.module.scss b/src/modules/CartPage/CartPage.module.scss
new file mode 100644
index 0000000000..cf40339568
--- /dev/null
+++ b/src/modules/CartPage/CartPage.module.scss
@@ -0,0 +1,321 @@
+@font-face {
+ font-family: Mont;
+ src: url('./fonts/Mont-Regular.otf') format('opentype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: Mont;
+ src: url('./fonts/Mont-Bold.otf') format('opentype');
+ font-weight: bold;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: Mont;
+ src: url('./fonts/Mont-SemiBold.otf') format('opentype');
+ font-weight: 600;
+ font-style: normal;
+}
+
+$color-primary: #78b829;
+$color-secondary: #89939A;
+$color-white: #FFF;
+$color-dark: #1e1c1c;
+$color-light-gray: #F1F2F9;
+$color-active: #f0f0f0;
+$font-primary: 'Mont', 'Montserrat', sans-serif;
+$font-weight-bold: 800;
+$font-weight-medium: 600;
+$font-weight-regular: 400;
+
+.informationItem {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.quantity {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.cartBlock {
+ margin-bottom: 80px;
+}
+
+h1 {
+ color: #F1F2F9;
+ font-size: 48px;
+ font-weight: 800;
+ font-family: $font-primary;
+ margin-bottom: 32px;
+}
+
+.cartContainer {
+ display: flex;
+ justify-content: space-between;
+}
+
+.itemsContainer {
+ width: 100%;
+ height: auto;
+ display: flex;
+ flex-direction: column;
+ box-sizing: border-box;
+ margin-right: 16px;
+}
+
+.itemCart {
+ display: flex;
+ margin-bottom: 20px;
+ background: var(--item-cart);
+ align-items: center;
+ text-align: center;
+ padding: 24px;
+ border-radius: 20px;
+ justify-content: space-between;
+}
+
+.product__removeButton {
+ width: 30px;
+ height: 30px;
+ color: #4A4D58;
+ background-color: transparent;
+ border: none;
+ font-size: 20px;
+ cursor: pointer;
+ margin-right: 20px;
+}
+
+.product__removeButton:active {
+ width: 30px;
+ height: 30px;
+ color: #dcdde0;
+ background-color: transparent;
+ border: none;
+ font-size: 20px;
+ cursor: pointer;
+}
+
+.productCart__title{
+ color: #F1F2F9;
+ font-family: $font-primary;
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 21px;
+ text-align: left;
+}
+
+.productCart__image {
+ margin-right: 40px;
+ width: 80;
+ max-height: 80px;
+ transition: transform 0.3s ease;
+}
+
+.productQuantity {
+ display: flex;
+}
+
+.productCart__quantity {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.productQuantity button {
+ transition: background-color 0.3s ease;
+ margin-right: 20px;
+}
+
+.productQuantity__element {
+ background: none;
+ cursor: pointer;
+ font-size: 20px;
+ font-weight: 600;
+ outline: none;
+ border: none;
+ width: 30px;
+ height: 30px;
+ color: #4A4D58;
+}
+
+.productQuantity__element:hover {
+ background-color: rgb(164, 159, 159);
+}
+
+.productQuantity__elementActive {
+ background-color: rgb(75, 74, 74);
+ font-size: 20px;
+ cursor: pointer;
+ color: #F1F2F9;
+ outline: none;
+ border: none;
+ width: 30px;
+ height: 30px;
+}
+
+.productCart__price {
+ font-size: 22px;
+ font-weight: 800;
+ font-family: $font-primary;
+ color: #F1F2F9;
+ align-items: center;
+ margin: 0;
+}
+
+.productQuantity__number {
+ transition: background-color 0.3s ease;
+ padding: 8px;
+ width: 30px;
+ height: 30px;
+ color: #F1F2F9;
+ margin-right: 10px;
+}
+
+.productQuantity__numberActive {
+ color: greenyellow;
+ padding: 8px;
+ width: 30px;
+ height: 30px;
+}
+
+.cartSummary {
+ display: block;
+ justify-items: center;
+ padding: 23px;
+ max-width: 380px;
+ height: 206px;
+ border: 1px solid #3B3E4A;
+ text-align: center;
+ border-radius: 20px;
+}
+
+.totalAmount {
+ font-size: 32px;
+ font-weight: 800;
+ line-height: 41px;
+ letter-spacing: -0.01em;
+ color: #F1F2F9;
+ font-family: $font-primary;
+}
+
+.totalQuantity {
+ position: relative;
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 21px;
+ text-align: center;
+ color: var(--total-quantity);
+ font-family: $font-primary;
+ width: 300px;
+ margin-bottom: 49px;
+}
+
+.totalQuantity::after {
+ content: '';
+ position: absolute;
+ width: 100%;
+ border: 0.5px solid #3B3E4A;
+ left: 0;
+ top: 100%;
+ margin-top: 25px;
+}
+
+.chekoutButton {
+ width: 320px;
+ height: 48px;
+ font-family: $font-primary;
+ color: #F1F2F9;
+ background: rgb(30, 28, 28);
+ border: none;
+ cursor: pointer;
+ font-size: 14px;
+ font-weight: 700;
+ line-height: 21px;
+ text-align: center;
+ border-radius: 20px;
+}
+
+@media (min-width: 640px) and (max-width: 1199px) {
+ .cartContainer {
+ display: block;
+ flex-direction: column;
+ }
+
+ .itemsContainer {
+ width: 100%;
+ height: auto;
+ display: flex;
+ flex-direction: column;
+ box-sizing: border-box;
+ margin-right: 16px;
+ }
+
+ .cartSummary {
+ border-radius: 20px;
+ height: auto;
+ width: 100%;
+ }
+}
+
+@media (min-width: 320px) and (max-width: 639px) {
+ .cartBlock {
+ margin-bottom: 80px;
+ display: block;
+ width: 100%;
+ }
+ .cartContainer {
+ flex-direction: column;
+ }
+
+ .itemCart {
+ display: block;
+ margin-bottom: 20px;
+ background: var(--item-cart);
+ align-items: center;
+ text-align: center;
+ padding: 24px;
+ border-radius: 20px;
+ justify-content: space-between;
+ }
+
+ .informationItem {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 40px;
+ }
+
+ .productCart__price {
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ .quantity {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 50px;
+ }
+
+ .productCart__quantity {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .productCart__image {
+ display:block;
+ justify-content: flex-start;
+ }
+
+ .product__removeButton {
+ display:block;
+ justify-content: flex-start;
+ }
+
+}
diff --git a/src/modules/CartPage/CartPage.tsx b/src/modules/CartPage/CartPage.tsx
new file mode 100644
index 0000000000..042c9ea49f
--- /dev/null
+++ b/src/modules/CartPage/CartPage.tsx
@@ -0,0 +1,170 @@
+// src/pages/CartPage.tsx
+import React from 'react';
+import { useCart } from '../../context/CartContext/CartContext';
+import styles from './CartPage.module.scss';
+import { useState } from 'react';
+import { BackButton } from '../../components/BackButton/BackButton';
+
+export const CartPage: React.FC = () => {
+ const {
+ cart,
+ removeFromCart,
+ updateQuantity,
+ totalQuantity,
+ totalAmount,
+ clearCart,
+ } = useCart();
+
+ const [activeButtons, setActiveButtons] = useState<{
+ [key: number]: { increase: boolean; decrease: boolean };
+ }>({});
+ const [activeQuantity, setActiveQuantity] = useState<{
+ [key: number]: boolean;
+ }>({});
+ const [activeRemoveButton, setActiveRemoveButton] = useState<{
+ [key: number]: boolean;
+ }>({});
+
+ const handleButtonRemove = (item: any) => {
+ removeFromCart(item.id);
+ setActiveRemoveButton(prev => ({
+ ...prev,
+ [item.id]: true,
+ }));
+ };
+
+ const handleButtonPress = (item: any, isIncrease: boolean) => {
+ const newQuantity = isIncrease ? item.quantity + 1 : item.quantity - 1;
+
+ if (newQuantity >= 0) {
+ updateQuantity(item.id, newQuantity);
+ setActiveButtons(prev => ({
+ ...prev,
+ [item.id]: {
+ increase: isIncrease ? true : prev[item.id]?.increase || false,
+ decrease: !isIncrease ? true : prev[item.id]?.decrease || false,
+ },
+ })),
+ setActiveQuantity(prev => ({
+ ...prev,
+ [item.id]: true,
+ }));
+
+ setTimeout(() => {
+ setActiveButtons(prev => ({
+ ...prev,
+ [item.id]: {
+ increase: false,
+ decrease: false,
+ },
+ }));
+
+ setActiveQuantity(prev => ({
+ ...prev,
+ [item.id]: false,
+ }));
+
+ setActiveRemoveButton(prev => ({
+ ...prev,
+ [item.id]: false,
+ }));
+ }, 500);
+ }
+ };
+
+ return (
+
+
+ );
+};
diff --git a/src/modules/FavoritesPage/FavoritesPage.module.scss b/src/modules/FavoritesPage/FavoritesPage.module.scss
new file mode 100644
index 0000000000..a77a94f021
--- /dev/null
+++ b/src/modules/FavoritesPage/FavoritesPage.module.scss
@@ -0,0 +1,82 @@
+@font-face {
+ font-family: 'Mont';
+ src: url('./fonts/Mont-Regular.otf') format('opentype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Mont';
+ src: url('./fonts/Mont-Bold.otf') format('opentype');
+ font-weight: bold;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Mont';
+ src: url('./fonts/Mont-SemiBold.otf') format('opentype');
+ font-weight: 600;
+ font-style: normal;
+}
+
+// variables.scss
+
+// Colors
+$color-primary: #78b829;
+$color-secondary: #89939A;
+$color-white: #FFFFFF;
+$color-dark: #1e1c1c;
+$color-light-gray: #F1F2F9;
+$color-active: #f0f0f0;
+
+// Font families
+$font-primary: 'Mont', 'Montserrat', sans-serif;
+$font-weight-bold: 800;
+$font-weight-medium: 600;
+$font-weight-regular: 400;
+
+.totalFavorites {
+ font-size: 14px;
+ font-weight: 600;
+ color: #75767F;
+ margin-bottom: 40px;
+ font-family: $font-primary;
+}
+
+// div {
+// width: 100%;
+// }
+
+h1 {
+ width: 60%;
+ overflow-wrap: break-word;
+ white-space: normal;
+}
+
+.productGrid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ box-sizing: border-box;
+ gap: 16px;
+ margin-bottom: 40px;
+ width: 100%;
+}
+
+@media (min-width: 640px) and (max-width: 1199px) {
+ .productGrid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+@media (min-width: 320px) and (max-width: 639px) {
+ .productGrid {
+ display: grid;
+ grid-template-columns: repeat(1, 1fr);
+ }
+ h1 {
+ font-size: 32px;
+ overflow-wrap: break-word;
+ white-space: normal;
+ }
+}
diff --git a/src/modules/FavoritesPage/FavoritesPage.tsx b/src/modules/FavoritesPage/FavoritesPage.tsx
new file mode 100644
index 0000000000..3fdb748924
--- /dev/null
+++ b/src/modules/FavoritesPage/FavoritesPage.tsx
@@ -0,0 +1,29 @@
+// src/pages/FavoritesPage.tsx
+import React from 'react';
+import { useFavorites } from '../../context/FavoritesContext/FavoritesContext';
+import { ProductCard } from '../../components/ProductCard/ProductCard';
+import { Breadcrumbs } from '../../components/Breadcrumbs/Breadcrumbs';
+import styles from './FavoritesPage.module.scss';
+
+export const FavoritesPage: React.FC = () => {
+ const { favorites, totalFavorites } = useFavorites();
+
+ return (
+ Cart
+
+ {cart.length === 0 ? (
+
+ Your cart is empty
+ ) : ( +
+ {cart.map(item => (
+
+ )}
+ {cart.length > 0 && (
+
+
+ ))}
+
+
+ 
+
+ + {item.product.name} +
+
+
+
+
+
+ {item.quantity}
+
+
+
+ + ${item.product.price} +
+
+
+ )}
+ ${totalAmount}
++ Total for {totalQuantity} items +
+ + +
+ {favorites && favorites.length > 0 && (
+
+ );
+};
diff --git a/src/modules/FavoritesPage/index.ts b/src/modules/FavoritesPage/index.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/modules/HomePage/HomePage.module.scss b/src/modules/HomePage/HomePage.module.scss
new file mode 100644
index 0000000000..56196dea0a
--- /dev/null
+++ b/src/modules/HomePage/HomePage.module.scss
@@ -0,0 +1,127 @@
+@font-face {
+ font-family: Mont;
+ src: url('./fonts/Mont-Regular.otf') format('opentype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: Mont;
+ src: url('./fonts/Mont-Bold.otf') format('opentype');
+ font-weight: bold;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: Mont;
+ src: url('./fonts/Mont-SemiBold.otf') format('opentype');
+ font-weight: 600;
+ font-style: normal;
+}
+
+$color-primary: #78b829;
+$color-secondary: #89939A;
+$color-white: #FFF;
+$color-dark: #1e1c1c;
+$color-light-gray: #F1F2F9;
+$color-active: #f0f0f0;
+$font-primary: 'Mont', 'Montserrat', sans-serif;
+$font-weight-bold: 800;
+$font-weight-medium: 600;
+$font-weight-regular: 400;
+
+.main {
+ max-width: 1136px;
+ margin: 0 auto;
+ font-family: $font-primary;
+ margin-top: 120px;
+
+ &__title {
+ margin-bottom: 56px;
+ font-size: 48px;
+ font-weight: 800;
+ color: #F1F2F9;
+ }
+}
+
+.section__title {
+ margin-bottom: 24px;
+ color: #F1F2F9;
+}
+
+.categories {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 16px;
+ margin-bottom: 81px;
+}
+
+.category {
+ border-radius: 16px;
+ padding: 24px;
+
+ &__image {
+ width: 100%;
+ max-height: 320px;
+ margin-bottom: 16px;
+ background: linear-gradient(120deg, #0b3d26, #78b829,#0b3d26, #082b1c);
+ background: var(--category-background);
+ border-radius: 30px;
+ }
+
+ &__title {
+ font-family: $font-primary;
+ font-size: 20px;
+ font-weight: 700;
+ line-height: 25.56px;
+ text-align: left;
+ color: #F1F2F9;
+ text-decoration: none;
+ outline: none;
+ margin-bottom: 8px;
+ }
+
+ &__count {
+ color: var(--category-count);
+ }
+}
+
+.link {
+ text-decoration: none;
+}
+
+@media (min-width: 640px) and (max-width: 1199px) {
+
+ .main {
+ max-width: 100%;
+ margin: 0 auto;
+ &__title {
+ margin-bottom: 32px;
+ font-size: 48px;
+ font-weight: 800;
+ color: #F1F2F9;
+
+ }
+ }
+}
+
+@media (min-width: 320px) and (max-width: 639px) {
+ .main {
+ margin: 0 auto;
+ &__title {
+ margin-bottom: 24px;
+ font-size: 32px;
+ font-weight: 800;
+ color: #F1F2F9;
+ display: block;
+ width: 100%;
+
+ }
+
+ .categories {
+ display: grid;
+ grid-template-columns: repeat(1, 1fr);
+ margin-bottom: 81px;
+ }
+ }
+}
diff --git a/src/modules/HomePage/HomePage.tsx b/src/modules/HomePage/HomePage.tsx
new file mode 100644
index 0000000000..b002fcb347
--- /dev/null
+++ b/src/modules/HomePage/HomePage.tsx
@@ -0,0 +1,140 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import React from 'react';
+import { PicturesSlider } from './PicturesSlider/PicturesSlider';
+import { ProductsSlider } from '../../components/ProductsSlider/ProductsSlider';
+import { useEffect, useState } from 'react';
+import { Product } from '../../types/Product';
+import { Link } from 'react-router-dom';
+import categoryFirst from '../../../public/img/Category/categoryFirst.svg';
+import categorySecond from '../../../public/img/Category/categorySecond.svg';
+import categoryThird from '../../../public/img/Category/categoryThird.svg';
+import styles from './HomePage.module.scss';
+import { Loader } from '../../components/Loader/Loader';
+
+export const HomePage: React.FC = () => {
+ const [error, setError] = useState('');
+ const [loading, setLoading] = useStateFavorites
+{totalFavorites} items
+ {favorites.length === 0 ? ( +No favorite products yet.
+ ) : ( +
+ {favorites.map(product => (
+
+ )}
+
+
+ );
+ }
+
+ if (error) {
+ return {error}
;
+ }
+
+ return (
+ Welcome to Nice Gadgets store!
+ +Shop by category
+
+
+
+
+
+ 
+
+
+
+ Mobile phones
+ +95 models
+
+
+ 
+
+
+
+ Tablets
+ +95 models
+
+
+ 
+
+
+
+ Accessories
+ +95 models
+
+ 
+
+
+
+
+
+
+
+ {images.map((_, index) => (
+ handleDotClick(index)}
+ >
+ ))}
+
+
+
+ );
+};
+
+export default PhonesPage;
diff --git a/src/modules/PhonesPage/components/ProductsList/ProductsList.module.scss b/src/modules/PhonesPage/components/ProductsList/ProductsList.module.scss
new file mode 100644
index 0000000000..38b2ef641a
--- /dev/null
+++ b/src/modules/PhonesPage/components/ProductsList/ProductsList.module.scss
@@ -0,0 +1,22 @@
+.productGrid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ box-sizing: border-box;
+ gap: 16px;
+ margin-bottom: 40px;
+ width: 100%;
+}
+
+@media (min-width: 640px) and (max-width: 1199px) {
+ .productGrid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+@media (min-width: 320px) and (max-width: 639px) {
+ .productGrid {
+ display: grid;
+ grid-template-columns: repeat(1, 1fr);
+ }
+}
diff --git a/src/modules/PhonesPage/components/ProductsList/ProductsList.tsx b/src/modules/PhonesPage/components/ProductsList/ProductsList.tsx
new file mode 100644
index 0000000000..71777e8740
--- /dev/null
+++ b/src/modules/PhonesPage/components/ProductsList/ProductsList.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { ProductCard } from '../../../../components/ProductCard/ProductCard';
+import { Product } from '../../../../types/Product';
+import styles from './ProductsList.module.scss';
+
+interface ProductsListProps {
+ products: Product[];
+}
+
+export const ProductsList: React.FCPhones Page
+ + {loading &&There are no phones yet.
+ )}
+
+ {!loading && !error && products.length > 0 && (
+ <>
+
+ {products.map(product => (
+
+ );
+};
diff --git a/src/modules/PhonesPage/components/ProductsList/index.ts b/src/modules/PhonesPage/components/ProductsList/index.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/modules/PhonesPage/index.ts b/src/modules/PhonesPage/index.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/modules/ProductDetailsPage/ProductDetailsPage.module.scss b/src/modules/ProductDetailsPage/ProductDetailsPage.module.scss
new file mode 100644
index 0000000000..eed5a2409c
--- /dev/null
+++ b/src/modules/ProductDetailsPage/ProductDetailsPage.module.scss
@@ -0,0 +1,658 @@
+// not empty
+
+@font-face {
+ font-family: Mont;
+ src: url('./fonts/Mont-Regular.otf') format('opentype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: Mont;
+ src: url('./fonts/Mont-Bold.otf') format('opentype');
+ font-weight: bold;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: Mont;
+ src: url('./fonts/Mont-SemiBold.otf') format('opentype');
+ font-weight: 600;
+ font-style: normal;
+}
+
+$color-primary: #78b829;
+$color-secondary: #89939A;
+$color-white: #FFF;
+$color-dark: #1e1c1c;
+$color-light-gray: #F1F2F9;
+$color-active: #f0f0f0;
+$font-primary: 'Mont', 'Montserrat', sans-serif;
+$font-weight-bold: 800;
+$font-weight-medium: 600;
+$font-weight-regular: 400;
+
+main {
+ margin-bottom: 56px;
+ padding: 16px;
+}
+
+.section__title {
+ width: 100%;
+}
+
+.productPage {
+ display: flex;
+ justify-content: space-between;
+ max-width: 1136px;
+ margin: 0 auto;
+ font-family: $font-primary;
+ gap: 64px;
+ margin-bottom: 48px;
+}
+
+.productContent {
+ display: flex;
+ justify-content: space-between;
+ max-height: 485px;
+}
+
+.image img {
+ height: 100%;
+}
+
+.productGallery__mainImage {
+ width: 464px;
+ border-radius: 4px;
+ padding: 8px;
+ display: flex;
+}
+
+.image {
+ margin: 0 auto;
+}
+
+.productInfo {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ width: 320px;
+ height: 512px;
+ padding: 32px;
+ color:#F1F2F9;
+ transition: box-shadow 0.3s ease, transform 0.3s ease;
+ background-color: var(--product-info);
+ border-radius: 20px;
+}
+
+.productId {
+ display: flex;
+}
+
+.pickerTitle {
+ color: var(--color-title-options);
+ font-family: $font-primary;
+ font-size: 12px;
+ font-weight: 700;
+ line-height: 15.34px;
+ text-align: left;
+ margin-bottom: 8px;
+}
+
+.colorPicker__options {
+ position: relative;
+ display: flex;
+ margin-bottom: 42px;
+
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: -24px;
+ left: 0;
+ width: 100%;
+ border: 1px solid #3B3E4A
+ }
+}
+
+.colorPicker__option {
+ width: 32px;
+ height: 32px;
+ border: 1px solid gray;
+ margin-right: 8px;
+ border-radius: 50%;
+ cursor: pointer;
+ transition: border 0.3s;
+
+ &:active {
+ border-color: #2f542f;
+ }
+}
+
+.capacityPicker {
+ margin-bottom: 30px;
+}
+
+.capacityPicker__options {
+ display: flex;
+ position: relative;
+ margin-bottom: 32px;
+
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: -24px;
+ left: 0;
+ width: 100%;
+ border: 1px solid #3B3E4A;
+ }
+}
+
+.capacityPicker__option {
+ width: 60px;
+ height: 32px;
+ margin-right: 8px;
+ outline: none;
+ font-family: $font-primary;
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 21px;
+ text-align: center;
+ background: none;
+ border: 1px solid #4A4D58;
+ color: #F1F2F9;
+ cursor: pointer;
+ text-decoration: none;
+ padding: 5px;
+
+ &:active {
+ border-color: #515251;
+ background-color: white;
+ color: black;
+ }
+}
+
+.productPrice {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 20px;
+}
+
+.productPrice__new {
+ font-size: 32px;
+ font-weight: 800;
+ color: #fff;
+}
+
+.productPrice__old {
+ font-size: 22px;
+ font-weight: 600;
+ color: #89939A;
+ text-decoration: line-through;
+ opacity: 0.7;
+}
+
+.productActions {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 32px;
+
+ &__button {
+ color: var(--button-text-color);
+ border: none;
+ border-radius: 30px;
+ padding: 8px 16px;
+ cursor: pointer;
+ width: 263px;
+ height: 48px;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 21px;
+ transition: all 0.7s ease;
+ background-color: var(--button-info-product);
+ margin-right: 20px;
+ }
+
+ &__button:hover {
+ color: rgb(143, 143, 145);
+ scale: 1.1;
+ background: var(--button-background-hover);
+ }
+
+ &__icon {
+ cursor: pointer;
+ height: 16px;
+ width: 16px;
+ }
+}
+
+.productInfo__id {
+ color: #4A4D58;
+ font-size: 12px;
+ font-weight: 600;
+ width: 100%;
+}
+
+.productsDetails {
+ display: flex;
+ justify-content: space-between;
+ gap: 64px;
+}
+
+.products-details__title {
+ font-family: $font-primary;
+ color: #F1F2F9;
+ font-size: 22px;
+ font-weight: 700;
+ margin-bottom: 48px;
+}
+
+.section-title {
+ font-size: 20px;
+ font-weight: 700;
+ color: #F1F2F9;
+}
+
+.about {
+ max-width: 559px;
+ font-family: $font-primary;
+
+ &__title {
+ font-size: 22px;
+ font-weight: 800;
+ line-height: 30.8px;
+ text-align: left;
+ color: #F1F2F9;
+ margin-bottom: 48px;
+ }
+
+ &__text {
+ font-family: $font-primary;
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 21px;
+ text-align: left;
+ margin-bottom: 32px;
+ color: var(--about-text);
+ }
+}
+
+.techSpecs {
+ width: 100%;
+}
+
+.specs {
+ font-size: 12px;
+ margin-bottom: 16px;
+
+ &__title {
+ color: #ffff;
+ height: 31px;
+ top: 801px;
+ left: 777px;
+ margin-bottom: 41px;
+ }
+
+ &__details {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 8px;
+ }
+
+ &__property {
+ font-family: $font-primary;
+ font-size: 12px;
+ font-weight: 600;
+ line-height: 15.34px;
+ text-align: left;
+ color: var(--text-property);
+ }
+
+ &__value {
+ font-weight: 700;
+ color: #F1F2F9;
+ font-size: 12px;
+ }
+}
+
+.productGallery__thumbnails {
+ height: 485px;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ gap: 16px;
+ overflow-y: auto;
+ padding-right: 4px;
+}
+
+.thumbnail {
+ width: 100px;
+ height: 100px;
+ cursor: pointer;
+ border: 1px solid #B4BDC4;
+ border-radius: 4px;
+ padding: 4px;
+}
+
+.thumbnail.active {
+ border-color: #d0d00c;
+}
+
+.thumbnail img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+}
+
+
+@media (min-width: 640px) and (max-width: 1199px) {
+ .productActions__button {
+ width: 100%;
+ }
+ .section__title {
+ width: 100%;
+ }
+
+ .productPage {
+ display: flex;
+ justify-content: space-between;
+ max-width: 100%;
+ margin: 0 auto;
+ font-family: $font-primary;
+ gap: 20px;
+ margin-bottom: 48px;
+ }
+ .productContent {
+ display: flex;
+ justify-content: space-between;
+ max-height: 287px;
+ }
+ .productGallery__thumbnails {
+ height: 287px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ gap: 8px;
+ overflow-y: auto;
+ padding-right: 4px;
+ }
+ .thumbnail {
+ width: 35px;
+ height: 35px;
+ cursor: pointer;
+ border: 1px solid #B4BDC4;
+ border-radius: 4px;
+ padding: 4px;
+ }
+
+ .thumbnail.active {
+ border-color: #d0d00c;
+ }
+
+ .thumbnail img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ }
+
+ .image img {
+ height: 100%;
+ }
+
+ .productGallery__mainImage {
+ width: 287px;
+ border-radius: 4px;
+ padding: 8px;
+ display: flex;
+ }
+
+ .image {
+ margin: 0 auto;
+ }
+
+ .productInfo {
+ display: flex;
+ width: 100%;
+ height: 435px;
+ color:#F1F2F9;
+ transition: box-shadow 0.3s ease, transform 0.3s ease;
+ background-color: var(--product-info);
+ border-radius: 20px;
+ }
+
+ .productId {
+ color: #fff;
+ display: none;
+ }
+
+ .productsDetails {
+ display: block;
+ }
+
+ .about,
+ .techSpecs {
+ width: 100%;
+ margin-bottom: 20px;
+ }
+
+ .about {
+ width: 100%;
+ font-family: $font-primary;
+ &__title {
+ font-size: 22px;
+ font-weight: 800;
+ line-height: 30.8px;
+ text-align: left;
+ color: #F1F2F9;
+ margin-bottom: 48px;
+ }
+
+ &__text {
+ color: var(--text-value);
+ font-family: $font-primary;
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 21px;
+ text-align: left;
+ }
+ }
+
+ .specs {
+ font-size: 12px;
+ margin-bottom: 16px;
+
+ &__title {
+ color: #fff;
+ width: 511px;
+ height: 31px;
+ top: 801px;
+ left: 777px;
+ margin-bottom: 41px;
+
+ }
+
+ &__details {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 8px;
+ }
+
+ &__property {
+ font-family: $font-primary;
+ font-size: 12px;
+ font-weight: 600;
+ line-height: 15.34px;
+ text-align: left;
+ color: var(--text-property);
+ }
+
+ &__value {
+ font-weight: 700;
+ color: #F1F2F9;
+ font-size: 12px;
+ }
+ }
+
+}
+
+@media (min-width: 320px) and (max-width: 639px) {
+
+ .section__title {
+ font-size: 22px;
+ width: 100%;
+ }
+
+ .productPage {
+ display: block;
+ max-width: 320px;
+ width: auto;
+
+ }
+ .productContent {
+ display: flex;
+ flex-direction: column-reverse;
+ justify-content: center;
+ }
+
+ .productGallery__thumbnails {
+ height: auto;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ gap: 16px;
+ overflow-x: auto;
+ padding-right: 4px;
+ }
+
+ .thumbnail {
+ width: 60px;
+ height: 60px;
+ cursor: pointer;
+ border: 1px solid #B4BDC4;
+ border-radius: 4px;
+ padding: 4px;
+ }
+
+ .productGallery__mainImage {
+ border-radius: 4px;
+ padding: 8px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ text-align: center;
+ width: 100%;
+ margin-bottom: 16px;
+ }
+
+ .image {
+ width: 100%;
+ height: auto;
+ margin: 0 auto;
+ margin: 0;
+ }
+
+ .productInfo {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ width: 100%;
+ height: auto;
+ padding: 32px;
+ color:#F1F2F9;
+ transition: box-shadow 0.3s ease, transform 0.3s ease;
+ background-color: var(--product-info);
+ border-radius: 20px;
+ }
+
+ .productsDetails {
+ display: block;
+ }
+
+ .about,
+ .techSpecs {
+ width: 100%;
+ margin-bottom: 20px;
+ }
+}
+
+.colorPicker__option--sierrablue {
+ background-color: #EFD4B8;
+}
+
+.colorPicker__option--gold {
+ background-color: #EFD4B8;
+}
+
+.colorPicker__option--silver {
+ background-color: #acaeae;
+}
+
+.colorPicker__option--skyblue {
+ background-color: #149ad3;
+}
+
+.colorPicker__option--spacegray {
+ background-color: #5e6060;
+}
+
+.colorPicker__option--midnightgreen {
+ background-color: #1d3c3c;
+}
+
+.colorPicker__option--pink {
+ background-color: #bfa2bd;
+}
+
+.colorPicker__option--red {
+ background-color: #cb3a3a;
+}
+
+.colorPicker__option--coral {
+ background-color: #ee6767;
+}
+
+.colorPicker__option--purple {
+ background-color: #d0bbf3;
+}
+
+.colorPicker__option--blue {
+ background-color: #426398;
+}
+
+.colorPicker__option--spacegrey {
+ background-color: #424242;
+}
+
+.colorPicker__option--spacegreen {
+ background-color: #64b9b0;
+}
+
+.colorPicker__option--rosegold {
+ background-color: #eba2c3;
+}
+
+.colorPicker__option--spaceyellow {
+ background-color: #c1cd18;
+}
+
+.colorPicker__option--white {
+ background-color: #F4F4F4;
+}
+
+.colorPicker__option--green {
+ background-color: #aaeae0;
+}
+
+.colorPicker__option--yellow {
+ background-color: #e8f47e;
+}
+
+.colorPicker__option--sky-blue {
+ background-color: #98b7e8;
+}
+
+.colorPicker__option--rose-gold {
+ background-color: #ebc575;
+}
+
diff --git a/src/modules/ProductDetailsPage/ProductDetailsPage.tsx b/src/modules/ProductDetailsPage/ProductDetailsPage.tsx
new file mode 100644
index 0000000000..b0eeb02534
--- /dev/null
+++ b/src/modules/ProductDetailsPage/ProductDetailsPage.tsx
@@ -0,0 +1,339 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import React from 'react';
+
+import { useParams, Link } from 'react-router-dom';
+import { useState, useEffect } from 'react';
+
+import favouritesIcon from '../../../public/img/icons/Favourites.svg';
+
+import { Product } from '../../types/Product';
+import { ProductsSlider } from '../../components/ProductsSlider/ProductsSlider';
+import { Breadcrumbs } from '../../components/Breadcrumbs/Breadcrumbs';
+import { BackButton } from '../../components/BackButton/BackButton';
+import { useCart } from '../../context/CartContext/CartContext';
+import { useFavorites } from '../../context/FavoritesContext/FavoritesContext';
+import redIcon from '../../../public/img/icons/red.png';
+import styles from './ProductDetailsPage.module.scss';
+
+interface ProductDetailsPageProps {
+ productDescription?: Product;
+}
+
+export const ProductDetailsPage: React.FCLoading...
;
+ }
+
+ if (error) {
+ return {error}
;
+ }
+
+ return (
+
+ {product &&
+
+
+
+
+
+ );
+};
diff --git a/src/modules/ProductDetailsPage/index.ts b/src/modules/ProductDetailsPage/index.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/modules/TabletsPage/TabletsPage.module.scss b/src/modules/TabletsPage/TabletsPage.module.scss
new file mode 100644
index 0000000000..3a3fe64056
--- /dev/null
+++ b/src/modules/TabletsPage/TabletsPage.module.scss
@@ -0,0 +1,11 @@
+@media (min-width: 640px) and (max-width: 1199px) {
+ .tabletsPage {
+ padding: 24px;
+ }
+}
+
+@media (min-width: 320px) and (max-width: 639px) {
+ .tabletsPage {
+ padding: 17px;
+ }
+}
diff --git a/src/modules/TabletsPage/TabletsPage.tsx b/src/modules/TabletsPage/TabletsPage.tsx
new file mode 100644
index 0000000000..be1d5f2746
--- /dev/null
+++ b/src/modules/TabletsPage/TabletsPage.tsx
@@ -0,0 +1,113 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable max-len */
+
+import React, { useCallback, useEffect, useState } from 'react';
+import { Loader } from '../../components/Loader/Loader';
+import { ErrorMessage } from '../../components/ErrorMessage/ErrorMessage';
+import { Pagination } from '../../components/Pagination/Pagination';
+import { ProductsList } from '../PhonesPage/components/ProductsList/ProductsList';
+import { ProductFilter } from '../../components/ProductFilter/ProductFilter';
+import { useFetchProducts } from '../../hooks/fetchProducts/useFetchProducts';
+import { usePaginationAndSorting } from '../../hooks/paginationAndSorting/usePaginationAndSorting';
+import { useSearchParams } from 'react-router-dom';
+import { Search } from '../../components/Search/Search';
+import { debounce } from 'lodash';
+import styles from './TabletsPage.module.scss';
+import { Breadcrumbs } from '../../components/Breadcrumbs/Breadcrumbs';
+
+export const TabletsPage: React.FC = () => {
+ const { products, loading, error } = useFetchProducts('tablets');
+ const {
+ sort,
+ totalPages,
+ currentPage,
+ itemsPerPage,
+ paginatedProducts,
+ handlePageChange,
+ handleSortChange,
+ handleItemsPerPageChange,
+ } = usePaginationAndSorting(products);
+
+ const [searchParams, setSearchParams] = useSearchParams();
+ const query = searchParams.get('query') || '';
+ const [inputValue, setInputValue] = useState(query);
+
+ useEffect(() => {
+ setInputValue(query);
+ }, [query]);
+
+ const debouncedSetParams = useCallback(
+ debounce((newParams: URLSearchParams) => {
+ setSearchParams(newParams);
+ }, 500),
+ [setSearchParams],
+ );
+
+ useEffect(() => {
+ return () => {
+ debouncedSetParams.cancel();
+ };
+ }, [debouncedSetParams]);
+
+ const handleSearchChange = useCallback(
+ (event: React.ChangeEvent{product?.name}
+
+
+
+
+
+
+
+
+
+
+ {product?.images.map((fileName, index) => (
+ 
handleThumbnailClick(`${fileName}`)}
+ alt={`${product?.name} ${chooseColor} ${index + 1}`}
+ />
+ ))}
+
+
+ 
+
+
+
+
+
+
+ + Available colors +
+
+ {product?.colorsAvailable.map(color => {
+ const isCurrColor = color === product?.color;
+
+ return (
+ handleColorChange(color)}
+ className={`${styles.colorPicker__option} ${styles[`colorPicker__option--${color.replace(' ', '-')}`]} ${isCurrColor ? 'active' : ''}`}
+ >
+ );
+ })}
+
+
+
+
+ + Select capacity +
+
+ {product?.capacityAvailable.map((capacity: string) => {
+ const isCurrCapacity = capacity === product?.capacity;
+
+ return (
+ handleCapacityChange(capacity)}
+ >
+ {capacity}
+
+ );
+ })}
+
+
+
+ {product?.priceDiscount}$
+
+
+ {product?.priceRegular}$
+
+
+
+
+
+
+ )
+
+
+
+
+
+ Screen
+ {product?.screen}
+
+
+ Resolution
+
+ {product?.resolution}
+
+
+
+ Processor
+
+ {product?.processor}
+
+
+
+ RAM
+ {product?.ram}
+
+
+
+ ID: {product?.id}
+
+
+ About
+ {product?.description.map((section, index) => ( +
+
+ {section.text.map((paragraph, idx) => (
+
+ ))}
+ + {paragraph} +
+ ))} +
+
+ Tech specs
+
+
+
+ Screen
+ {product?.screen}
+
+
+ Resolution
+
+ {product?.resolution}
+
+
+
+ Processor
+
+ {product?.processor}
+
+
+
+ RAM
+ {product?.ram}
+
+
+ Built in memory
+ 64 GB
+
+
+ Camera
+ {product?.camera}
+
+
+ Zoom
+ {product?.zoom}
+
+
+ Cell
+ {product?.cell}
+
+
+
+ );
+};
+
+export default TabletsPage;
diff --git a/src/modules/TabletsPage/index.ts b/src/modules/TabletsPage/index.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/styles/layout.module.scss b/src/styles/layout.module.scss
new file mode 100644
index 0000000000..b631a2da84
--- /dev/null
+++ b/src/styles/layout.module.scss
@@ -0,0 +1,19 @@
+* {
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+}
+
+html, body {
+ height: 100%;
+}
+
+body {
+ background-color: black;
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+}
+
+
+
diff --git a/src/types/Footer.ts b/src/types/Footer.ts
new file mode 100644
index 0000000000..90d7a8439a
--- /dev/null
+++ b/src/types/Footer.ts
@@ -0,0 +1,5 @@
+import { RefObject } from 'react';
+
+export interface FooterProps {
+ topRef: RefObjectTablets Page
+ + {loading &&На даний момент немає планшетів.
+ )}
+
+ {!loading && !error && products.length > 0 && (
+ <>
+