+
+ );
+};
diff --git a/src/components/CategoryBox/indes.ts b/src/components/CategoryBox/indes.ts
new file mode 100644
index 00000000000..a2c3b5d2a45
--- /dev/null
+++ b/src/components/CategoryBox/indes.ts
@@ -0,0 +1 @@
+export { CategoryBox } from './CategoryBox';
diff --git a/src/components/Dropdown/Dropdown.module.scss b/src/components/Dropdown/Dropdown.module.scss
new file mode 100644
index 00000000000..d8ad99c0d96
--- /dev/null
+++ b/src/components/Dropdown/Dropdown.module.scss
@@ -0,0 +1,166 @@
+@import '../../styles/main';
+
+@keyframes dropdown-fade-in {
+ from {
+ transform-origin: top;
+ transform: translateY(-8px) scaleY(0.95);
+ opacity: 0;
+ }
+
+ to {
+ transform-origin: top;
+ transform: translateY(0) scaleY(1);
+ opacity: 1;
+ }
+}
+
+.dropdown {
+ &__container {
+ user-select: none;
+
+ display: flex;
+ flex-direction: row;
+ gap: 16px;
+
+ width: 100%;
+ }
+
+ &__list {
+ cursor: pointer;
+
+ position: absolute;
+ z-index: 100;
+ top: calc(100% + 4px);
+ left: 0;
+
+ display: flex;
+ flex-direction: column;
+
+ width: 100%;
+ margin: 0;
+ padding: 4px 0;
+ border: 1px solid $elements-color;
+ border-radius: 8px;
+
+ list-style: none;
+
+ background: $white-color;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+
+ animation: dropdown-fade-in $transition-time cubic-bezier(0.16, 1, 0.3, 1) forwards;
+ }
+
+ &__item {
+ cursor: pointer;
+
+ display: flex;
+ align-items: center;
+
+ height: 40px;
+ padding: 0 12px;
+
+ color: $secondary-color;
+
+ transition: background-color $transition-time ease, color $transition-time ease;
+
+ @include font-dt-body-text;
+
+ &:hover {
+ color: $primary-color;
+ background-color: rgba($primary-color, 0.03);
+ }
+ }
+
+ &__text {
+ @include font-dt-small-text;
+
+ font-weight: 600;
+ color: $secondary-color;
+ }
+
+ &__select {
+ &_menu {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ box-sizing: border-box;
+ width: 100%;
+ height: 40px;
+ border: 1px solid $icon-color;
+ border-radius: 8px;
+
+ background-color: transparent;
+
+ transition: border-color $transition-time ease, background-color $transition-time ease;
+ animation: dropdown-fade-in $transition-time ease;
+
+ :has(~ .dropdown__list) &,
+ &:has(~ .dropdown__list) {
+ border-color: $primary-color;
+ }
+
+ .text {
+ @include font-dt-body-text;
+
+ padding-left: 12px;
+ color: $primary-color;
+ }
+
+ .icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ padding-right: 12px;
+
+ transition: transform $transition-time cubic-bezier(0.16, 1, 0.3, 1);
+
+ .dropdown__select_menu:has(~ .dropdown__list) & {
+ transform: rotate(180deg);
+ }
+ }
+
+ &:hover {
+ border-color: $primary-color;
+ background-color: rgba($primary-color, 0.01);
+ }
+ }
+ }
+
+ &__perpagebox, &__sortbox {
+ cursor: pointer;
+
+ position: relative;
+
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+
+ &:has(.dropdown__list) {
+ .dropdown__select_menu {
+ border-color: $primary-color;
+
+ .icon {
+ transform: rotate(180deg);
+ }
+ }
+ }
+ }
+
+ &__perpagebox {
+ width: 128px;
+
+ @include on-tablet { width: 136px; }
+
+ @include on-mobile { width: 100%; }
+ }
+
+ &__sortbox {
+ width: 176px;
+
+ @include on-tablet { width: 187px; }
+
+ @include on-mobile { width: 100%; }
+ }
+}
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
new file mode 100644
index 00000000000..39d6b1252ad
--- /dev/null
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -0,0 +1,129 @@
+import React, { useEffect, useRef, useState } from 'react';
+import styles from './Dropdown.module.scss';
+import { Icon } from '../Icon';
+import { SortType } from '../../types/SortType';
+import { PerPageType } from '../../types/PerPageType';
+
+type Props = {
+ sort: SortType;
+ updateSort: (sort: SortType) => void;
+ perPage: PerPageType;
+ updatePerPage: (perPage: PerPageType) => void;
+};
+
+export const Dropdown: React.FCShop by category
+
+ -
+ {categorys.map(category => (
+
+
+
+
+ ))}
+
+ 
+
+
+
+
+ {category.name}
+ {`${category.count} models`}
+
+
+ );
+};
diff --git a/src/components/Dropdown/index.ts b/src/components/Dropdown/index.ts
new file mode 100644
index 00000000000..c0ad316fc26
--- /dev/null
+++ b/src/components/Dropdown/index.ts
@@ -0,0 +1 @@
+export { Dropdown } from './Dropdown';
diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss
new file mode 100644
index 00000000000..45a9c8426a2
--- /dev/null
+++ b/src/components/Footer/Footer.module.scss
@@ -0,0 +1,132 @@
+@import '../../styles/main';
+
+.footer {
+ box-sizing: border-box;
+ padding: 32px 0;
+ border-top: 1px solid $elements-color;
+ background-color: $white-color;
+
+ @include on-mobile {
+ padding: 48px 16px;
+ }
+
+ &__container {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+
+ width: 100%;
+ margin: 0 auto;
+
+ @include on-mobile {
+ flex-direction: column;
+ gap: 32px;
+ align-items: unset;
+ text-align: unset;
+
+ }
+
+ @include on-tablet {
+ max-width: $tablet-content-max-width;
+ padding: 0 24px;
+ }
+
+ @include on-desktop {
+ max-width: $desktop-content-max-width;
+ padding: 0 32px;
+ }
+ }
+
+ &__logo {
+ display: flex;
+ align-items: center;
+ }
+
+ &__list {
+ display: flex;
+ flex-direction: row;
+ gap: 64px;
+
+ margin: 0;
+ padding: 0;
+
+ list-style: none;
+
+ @include on-tablet {
+ gap: 32px;
+ }
+
+ @include on-mobile {
+ flex-direction: column;
+ gap: 16px;
+ }
+ }
+
+ &__link {
+ display: inline-flex;
+
+ color: $secondary-color;
+ text-decoration: none;
+ text-transform: uppercase;
+
+ transition: color $transition-time ease, transform $transition-time ease;
+
+ @include font-dt-uppercase;
+
+ &:hover, &:focus-visible {
+ transform: translateY(-1px);
+ color: $primary-color;
+ }
+ }
+
+ &__totop {
+ cursor: pointer;
+ user-select: none;
+
+ display: flex;
+ gap: 16px;
+ align-items: center;
+ justify-content: center;
+
+ .text {
+ color: $secondary-color;
+
+ @include font-dt-small-text;
+
+ transition: color $transition-time ease;
+ }
+
+ .icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ box-sizing: border-box;
+ width: 32px;
+ height: 32px;
+ border: 1px solid $elements-color;
+ border-radius: 50%;
+
+ background-color: transparent;
+
+ transition: border-color $transition-time ease,
+ background-color $transition-time ease,
+ transform $transition-time ease;
+ }
+
+ &:hover {
+ .icon {
+ transform: translateY(-2px);
+ border-color: $primary-color;
+ background-color: rgba($primary-color, 0.02);
+ }
+ }
+ }
+}
+
+.logo {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
diff --git a/src/components/Footer/Footes.tsx b/src/components/Footer/Footes.tsx
new file mode 100644
index 00000000000..a0ec3f59219
--- /dev/null
+++ b/src/components/Footer/Footes.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { Icon } from '../Icon';
+import styles from './Footer.module.scss';
+import { Link } from 'react-router-dom';
+
+export const Footer = () => {
+ const scrollToTop = () => {
+ window.scrollTo(0, 0);
+ };
+
+ return (
+
+ );
+};
diff --git a/src/components/Footer/index.ts b/src/components/Footer/index.ts
new file mode 100644
index 00000000000..abdb912489e
--- /dev/null
+++ b/src/components/Footer/index.ts
@@ -0,0 +1 @@
+export { Footer } from './Footes';
diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss
new file mode 100644
index 00000000000..f0d677df0a8
--- /dev/null
+++ b/src/components/Header/Header.module.scss
@@ -0,0 +1,76 @@
+@import '../../styles/main';
+
+$header-height-desktop: 64px;
+$header-height-tablets: 48px;
+
+.header {
+ position: sticky;
+
+ display: flex;
+
+ height: $header-height-tablet;
+ border-bottom: 1px solid $elements-color;
+
+ background-color: $white-color;
+ box-shadow: 0 1px 0 0 $elements-color;
+
+ @include on-desktop {
+ height: $header-height-desktop;
+ }
+
+ &__container {
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ height: 100%;
+ }
+
+ &__logo {
+ display: flex;
+ align-items: center;
+ padding: 0 16px;
+
+ @include on-tablet {
+ padding: 0 32px 0 16px;
+ }
+
+ @include on-desktop {
+ margin-right: 24px;
+ padding: 0 24px;
+ }
+ }
+
+ &__burger {
+ display: none;
+
+ @include on-mobile {
+ display: flex;
+ align-items: center;
+ height: 100%;
+ margin-left: auto;
+ }
+
+ &__menu {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ box-sizing: border-box;
+ aspect-ratio: 1 / 1;
+ height: 100%;
+ border: none;
+
+ box-shadow: -1.1px 0 0 0 $elements-color;
+ }
+ }
+}
+
+.logo {
+ width: 64px;
+ height: 22px;
+
+ @include on-desktop {
+ width: 80px;
+ height: 28px;
+ }
+}
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
new file mode 100644
index 00000000000..4b671fdec7c
--- /dev/null
+++ b/src/components/Header/Header.tsx
@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import styles from './Header.module.scss';
+import { NavLink } from 'react-router-dom';
+import { Icon } from '../Icon';
+import { HeaderNav } from '../HeaderNav/HeaderNav';
+import { BurgerMenu } from '../BurgerMenu/BurgerMenu';
+
+export const Header = () => {
+ const [isBurgerMenu, setIsBurgerMenu] = useState
+
+
+
+ Sort by
+ setIsOpenSort(prev => !prev)}
+ >
+
+ {isOpenSort && (
+ {currentSortLabel}
+ -
+ {sortOptions.map(option => (
+
- { + handleSetSort(option.value); + setIsOpenSort(prev => !prev); + }} + > + {option.label} + + ))} +
+
+ Item on page
+ setIsOpenPerPage(prev => !prev)}
+ >
+
+ {isOpenPerPage && (
+ {perPage}
+ -
+ {perPageOpt.map(option => (
+
- { + handleSetPerPage(option); + setIsOpenPerPage(prev => !prev); + }} + > + {option} + + ))} +
+
+
+
+
+
+
+
+
+ {
+ setIsBurgerMenu(!isBurgerMenu);
+ window.scrollTo({ top: 0, behavior: 'smooth' });
+ }}
+ >
+
+
+
+
+);
diff --git a/src/components/Loader/index.tsx b/src/components/Loader/index.tsx
new file mode 100644
index 00000000000..d7027885251
--- /dev/null
+++ b/src/components/Loader/index.tsx
@@ -0,0 +1 @@
+export { Loader } from './Loader';
diff --git a/src/components/PathLine/PathLine.module.scss b/src/components/PathLine/PathLine.module.scss
new file mode 100644
index 00000000000..3a78cc11815
--- /dev/null
+++ b/src/components/PathLine/PathLine.module.scss
@@ -0,0 +1,63 @@
+@import '../../styles/main';
+
+.section {
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+
+ @include on-mobile {
+ gap: 24px;
+ }
+
+ .path {
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+ align-items: center;
+
+ &__icon {
+ display: flex;
+ align-items: center;
+ }
+
+ &__text-last {
+ color: $secondary-color;
+ }
+ }
+
+ .backbutton {
+ display: flex;
+ flex-direction: row;
+ gap: 4px;
+ text-decoration: none;
+ }
+}
+
+.home {
+ display: flex;
+}
+
+.text {
+ @include font-dt-small-text;
+
+ align-items: center;
+
+ box-sizing: border-box;
+
+ color: $primary-color;
+ text-decoration: none;
+ text-transform: capitalize;
+
+
+ &_invert {
+ color: $secondary-color;
+
+ &:hover {
+ color: $primary-color;
+ }
+ }
+}
+
+.icon {
+ filter: invert(1);
+}
diff --git a/src/components/PathLine/PathLine.tsx b/src/components/PathLine/PathLine.tsx
new file mode 100644
index 00000000000..d2589b5ba91
--- /dev/null
+++ b/src/components/PathLine/PathLine.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import styles from './PathLine.module.scss';
+import { Icon } from '../Icon';
+import { Link, useLocation } from 'react-router-dom';
+import classNames from 'classnames';
+
+export const PathLine = () => {
+ const { pathname } = useLocation();
+
+ const elements = pathname.split('/').filter(Boolean);
+ const backPath = `/${elements.slice(0, -1).join('/')}`;
+
+ return (
+
+
+ );
+};
diff --git a/src/components/PathLine/indes.ts b/src/components/PathLine/indes.ts
new file mode 100644
index 00000000000..798bc4d8f73
--- /dev/null
+++ b/src/components/PathLine/indes.ts
@@ -0,0 +1 @@
+export { PathLine } from './PathLine';
diff --git a/src/components/PicturesSlider/PicturesSlider.module.scss b/src/components/PicturesSlider/PicturesSlider.module.scss
new file mode 100644
index 00000000000..1318a0f9ecf
--- /dev/null
+++ b/src/components/PicturesSlider/PicturesSlider.module.scss
@@ -0,0 +1,124 @@
+@import '../../styles/main';
+
+$image-border-radius: 8px;
+
+.slider {
+ @include on-tablet {
+ width: 100%;
+ height: 100%;
+ }
+
+ @include on-mobile {
+ margin: 0 -18px;
+ }
+
+ .container {
+ display: flex;
+
+ @include on-tablet {gap: 20px}
+
+ @include on-desktop {gap: 16px}
+
+ button {
+ cursor: pointer;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ width: 32px;
+ border: 1px solid $icon-color;
+ border-radius: 25px;
+
+ background-color: $white-color;
+
+ transition: all 0.3s ease;
+
+ @include on-mobile {
+ display: none;
+ }
+
+ .icon {
+ transition: transform 0.3s ease;
+ }
+
+ &:hover {
+ border-color: $primary-color;
+
+ .icon {
+ transform: scale(1.2);
+ }
+ }
+ }
+ }
+
+ .swiper {
+ overflow: hidden;
+ aspect-ratio: 13 / 5;
+ width: 100%;
+
+ @include on-mobile {
+ aspect-ratio: 1 / 1;
+ }
+
+ @include on-tablet {
+ height: fit-content;
+ }
+
+ @include on-desktop {
+ height: 400px;
+ }
+
+ &-wrapper {
+ height: 100% !important;
+ }
+
+ &-slide {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100% !important;
+ }
+
+ .img {
+ justify-content: center;
+
+ width: 100%;
+ height: 100%;
+
+ object-fit: cover;
+ object-position: center;
+
+ @include on-tablet { border-radius: $image-border-radius; }
+
+ @include on-desktop { border-radius: $image-border-radius; }
+ }
+ }
+}
+
+.pagination {
+ display: flex;
+ gap: 4px;
+ align-items: center;
+ justify-content: center;
+
+ height: 24px;
+ padding-top: 8px;
+}
+
+.bullet {
+ cursor: pointer;
+
+ width: 14px;
+ height: 4px;
+ border-radius: 0;
+
+ opacity: 1;
+ background-color: $elements-color;
+
+ transition: all $transition-time ease;
+
+ &Active {
+ background-color: $primary-color;
+ }
+}
diff --git a/src/components/PicturesSlider/PicturesSlider.tsx b/src/components/PicturesSlider/PicturesSlider.tsx
new file mode 100644
index 00000000000..368158eab08
--- /dev/null
+++ b/src/components/PicturesSlider/PicturesSlider.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+
+import { Icon } from '../Icon';
+import styles from './PicturesSlider.module.scss';
+
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+import { Navigation, Pagination, Autoplay } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+type Props = {
+ banners: string[];
+ id: number;
+};
+
+export const PicturesSlider: React.FC
+
+ {elements.length > 1 && (
+
+
+
+
+ {elements &&
+ elements.map((el, i) => (
+ <>
+
+
+
+ {i !== elements.length - 1 ? (
+
+ {el}
+
+ ) : (
+
+
+ ))}
+
+ {el}
+
+ )}
+
+
+
+ )}
+ Back
+
+
+ );
+};
diff --git a/src/components/PicturesSlider/index.ts b/src/components/PicturesSlider/index.ts
new file mode 100644
index 00000000000..3d16f0bbb89
--- /dev/null
+++ b/src/components/PicturesSlider/index.ts
@@ -0,0 +1 @@
+export { PicturesSlider } from './PicturesSlider';
diff --git a/src/components/ProductCard/ProductCard.module.scss b/src/components/ProductCard/ProductCard.module.scss
new file mode 100644
index 00000000000..708d5e31628
--- /dev/null
+++ b/src/components/ProductCard/ProductCard.module.scss
@@ -0,0 +1,192 @@
+@import '../../styles/main';
+
+$mobile-card-height: 439px;
+$tablet-card-height: 512px;
+$desktop-card-height: 506px;
+
+.card {
+ display: flex;
+ flex-grow: 1;
+
+ box-sizing: border-box;
+ width: 100%;
+ border: 1px solid $elements-color;
+ border-radius: 8px;
+
+ background-color: $white-color;
+
+ @include on-tablet {
+ height: $tablet-card-height;
+ }
+
+ @include on-desktop {
+ height: $desktop-card-height;
+ }
+
+ &__title {
+ @include font-dt-body-text;
+
+ padding-top: 16px;
+ }
+
+ &__container {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+ width: 100%;
+ margin: 0;
+ padding: 32px;
+
+ color: inherit;
+ text-decoration: none;
+ }
+
+ &__link {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ gap: 8px;
+
+ min-height: 0;
+
+ color: inherit;
+ text-decoration: none;
+
+ &:hover {
+ .card__title {
+ color: $accent-color;
+ }
+ }
+ }
+
+ &__image {
+ display: flex;
+ flex-grow: 1;
+ flex-shrink: 1;
+ align-items: center;
+ justify-content: center;
+
+ min-height: 0;
+
+ .image {
+ max-width: 100%;
+ max-height: 100%;
+ object-fit: contain;
+ transition: transform $transition-time;
+ }
+ }
+
+ &__price {
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+
+ @include font-m-h2;
+
+ .normal {
+ color: $primary-color;
+ }
+
+ .discount {
+ color: $secondary-color;
+ text-decoration-line: line-through;
+ }
+ }
+ &__divider {
+ border-top: 1px solid $elements-color;
+ }
+
+ &__info {
+ .screen {
+ display: flex;
+ justify-content: space-between;
+ }
+
+ .capacity {
+ display: flex;
+ justify-content: space-between;
+ }
+
+ .ram {
+ display: flex;
+ justify-content: space-between;
+ }
+ }
+
+ &__buttons {
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+ border: none;
+
+ .button_cart {
+ cursor: pointer;
+
+ display: flex;
+ flex-grow: 1;
+ align-items: center;
+ justify-content: center;
+
+ height: 40px;
+ border: none;
+ border-radius: 8px;
+
+ @include font-dt-buttons;
+
+ color: $white-color;
+
+ background-color: $accent-color;
+
+ transition: all 0.5s;
+
+ &__added {
+ border: 1px solid $elements-color;
+ color: $accent-color;
+ background-color: transparent;
+ }
+
+ &:hover {
+ box-shadow: $button-shadow;
+ }
+ }
+
+ .button_fovourite {
+ cursor: pointer;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ aspect-ratio: 1 / 1;
+ height: 40px;
+ border: 1px solid $icon-color;
+ border-radius: 20px;
+
+ background-color: transparent;
+
+ &:hover {
+ border-color: $primary-color;
+ }
+ }
+ }
+}
+
+.spec {
+ &__name {
+ @include font-dt-small-text;
+
+ color: $secondary-color;
+ }
+
+ &__value {
+ @include font-base;
+
+ right: 0;
+
+ font-size: 12px;
+ font-weight: 700;
+ color: $primary-color;
+ letter-spacing: 0;
+ }
+}
diff --git a/src/components/ProductCard/ProductCard.tsx b/src/components/ProductCard/ProductCard.tsx
new file mode 100644
index 00000000000..09487dd4f6c
--- /dev/null
+++ b/src/components/ProductCard/ProductCard.tsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import { Icon } from '../Icon';
+import styles from './ProductCard.module.scss';
+import { Product } from '../../types/ProductType';
+// eslint-disable-next-line max-len
+import { useCartAndFavContext } from '../../modules/shared/context/CartAndFavContext';
+import { Link } from 'react-router-dom';
+
+interface Props {
+ product: Product;
+ discount?: boolean;
+}
+
+export const ProductCard: React.FC
+
+
+
+ {banners.map((image, index) => (
+
+ 
+
+ ))}
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/ProductCard/index.ts b/src/components/ProductCard/index.ts
new file mode 100644
index 00000000000..c4f2778191c
--- /dev/null
+++ b/src/components/ProductCard/index.ts
@@ -0,0 +1 @@
+export { ProductCard } from './ProductCard';
diff --git a/src/components/ProductSlider/ProductSlider.module.scss b/src/components/ProductSlider/ProductSlider.module.scss
new file mode 100644
index 00000000000..67b3567fb32
--- /dev/null
+++ b/src/components/ProductSlider/ProductSlider.module.scss
@@ -0,0 +1,116 @@
+@import '../../styles/main';
+
+$image-border-radius: 8px;
+$mobile-card-width: 212px;
+$tablet-card-width: 237px;
+$desktop-card-width: 272px;
+
+.slider {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+
+ width: 100%;
+ height: 100%;
+ margin: 0 auto;
+
+ @include on-tablet {
+ width: calc(100vw - 24px);
+ }
+
+ @include on-mobile {
+ width: calc(100vw - 18px);
+ }
+
+ .swiper {
+ margin: -4px;
+ padding: 4px;
+
+ @include on-tablet {padding-right: -24px}
+
+ @include on-mobile {padding-right: -18px}
+
+ .card {
+ display: flex;
+ width: $mobile-card-width !important;
+ height: auto !important;
+
+ @include on-tablet {
+ width: $tablet-card-width !important;
+ }
+
+ @include on-desktop {
+ width: $desktop-card-width !important;
+ }
+
+ & > div {
+ width: 100%;
+ height: 100%;
+ }
+ }
+ }
+
+ &__title {
+ font-family: Mont, serif;
+ font-size: 32px;
+ font-weight: 800;
+ line-height: 41px;
+ color: $primary-color;
+ letter-spacing: -1%;
+
+ @include on-mobile {
+ padding-right: 16px;
+
+ font-family: Mont, serif;
+ font-size: 22px;
+ font-weight: 800;
+ line-height: 140%;
+ letter-spacing: 0;
+ }
+
+ @include on-tablet {
+ padding-right: 16px;
+ }
+ }
+
+ &__header {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+
+ @include on-tablet {padding-right: 24px}
+
+ @include on-mobile {padding-right: 18px;}
+ }
+
+ &__buttons {
+ display: flex;
+ flex-direction: row;
+ gap: 16px;
+
+ button {
+ cursor: pointer;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ aspect-ratio: 1 / 1;
+ height: 32px;
+ border: 1px solid $icon-color;
+ border-radius: 20px;
+
+ background-color: transparent;
+
+ &:disabled {
+ cursor: not-allowed;
+ border-color: $icon-color;
+ opacity: 0.5;
+ }
+
+ &:hover {
+ border-color: $primary-color;
+ }
+ }
+ }
+}
diff --git a/src/components/ProductSlider/ProductSlider.tsx b/src/components/ProductSlider/ProductSlider.tsx
new file mode 100644
index 00000000000..670da61441b
--- /dev/null
+++ b/src/components/ProductSlider/ProductSlider.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import styles from './ProductSlider.module.scss';
+
+import { ProductCard } from '../ProductCard';
+
+import 'swiper/css';
+import 'swiper/css/navigation';
+import { Navigation } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Icon } from '../Icon';
+import { SliderType } from '../../types/SliderType';
+
+export const ProductSlider: React.FC
+ handleGoToProduct()}
+ to={`/${product.category}/${product.itemId}`}
+ className={styles.card__link}
+ >
+
+
+ 
+
+ {product.name}
+
+
+
+ {`$${product.fullPrice}`}
+ {product.price && discount && (
+ {`$${product.price}`}
+ )}
+
+
+
+
+
+ Screen
+ {product.screen}
+
+
+ Capacity
+ {product.capacity}
+
+
+ RAM
+ {product.ram}
+
+
+
+
+
+
+ {products.map(product => (
+
+
+ ))}
+
+
+ );
+};
diff --git a/src/components/ProductSlider/index.ts b/src/components/ProductSlider/index.ts
new file mode 100644
index 00000000000..a1489c8d445
--- /dev/null
+++ b/src/components/ProductSlider/index.ts
@@ -0,0 +1 @@
+export { ProductSlider } from './ProductSlider';
diff --git a/public/img/cart-is-empty.png b/src/images/cart-is-empty.png
similarity index 100%
rename from public/img/cart-is-empty.png
rename to src/images/cart-is-empty.png
diff --git a/src/images/favorite-is-empty.png b/src/images/favorite-is-empty.png
new file mode 100644
index 00000000000..51f059d277d
Binary files /dev/null and b/src/images/favorite-is-empty.png differ
diff --git a/src/images/icons/arrowdown.svg b/src/images/icons/arrowdown.svg
new file mode 100644
index 00000000000..2ab0f27592b
--- /dev/null
+++ b/src/images/icons/arrowdown.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/images/icons/arrowleft.svg b/src/images/icons/arrowleft.svg
new file mode 100644
index 00000000000..a4d41a831e2
--- /dev/null
+++ b/src/images/icons/arrowleft.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/images/icons/arrowright.svg b/src/images/icons/arrowright.svg
new file mode 100644
index 00000000000..a15457b9ad6
--- /dev/null
+++ b/src/images/icons/arrowright.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/images/icons/arrowup.svg b/src/images/icons/arrowup.svg
new file mode 100644
index 00000000000..e061a0757fd
--- /dev/null
+++ b/src/images/icons/arrowup.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/images/icons/cart.svg b/src/images/icons/cart.svg
new file mode 100644
index 00000000000..ecf9a93606d
--- /dev/null
+++ b/src/images/icons/cart.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/images/icons/close.svg b/src/images/icons/close.svg
new file mode 100644
index 00000000000..c2216420f82
--- /dev/null
+++ b/src/images/icons/close.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/images/icons/favourites.svg b/src/images/icons/favourites.svg
new file mode 100644
index 00000000000..e69d519f448
--- /dev/null
+++ b/src/images/icons/favourites.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/images/icons/favouritesfilled.svg b/src/images/icons/favouritesfilled.svg
new file mode 100644
index 00000000000..2e2a864ebce
--- /dev/null
+++ b/src/images/icons/favouritesfilled.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/images/icons/home.svg b/src/images/icons/home.svg
new file mode 100644
index 00000000000..8ff4bba39d6
--- /dev/null
+++ b/src/images/icons/home.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/images/icons/menu.svg b/src/images/icons/menu.svg
new file mode 100644
index 00000000000..a578c59b0d3
--- /dev/null
+++ b/src/images/icons/menu.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/images/icons/minus.svg b/src/images/icons/minus.svg
new file mode 100644
index 00000000000..d829938a730
--- /dev/null
+++ b/src/images/icons/minus.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/images/icons/plus.svg b/src/images/icons/plus.svg
new file mode 100644
index 00000000000..7bf4aa5a31f
--- /dev/null
+++ b/src/images/icons/plus.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/images/icons/search.svg b/src/images/icons/search.svg
new file mode 100644
index 00000000000..7ca8156ca7d
--- /dev/null
+++ b/src/images/icons/search.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/images/logo_black.svg b/src/images/logo_black.svg
new file mode 100644
index 00000000000..7ceabe15490
--- /dev/null
+++ b/src/images/logo_black.svg
@@ -0,0 +1,25 @@
+
diff --git a/src/images/logo_purple.svg b/src/images/logo_purple.svg
new file mode 100644
index 00000000000..686dc581712
--- /dev/null
+++ b/src/images/logo_purple.svg
@@ -0,0 +1,25 @@
+
diff --git a/public/img/page-not-found.png b/src/images/page-not-found.png
similarity index 100%
rename from public/img/page-not-found.png
rename to src/images/page-not-found.png
diff --git a/public/img/product-not-found.png b/src/images/product-not-found.png
similarity index 100%
rename from public/img/product-not-found.png
rename to src/images/product-not-found.png
diff --git a/src/index.tsx b/src/index.tsx
index 50470f1508d..3d543f55a68 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,5 @@
import { createRoot } from 'react-dom/client';
-import { App } from './App';
+import { Root } from './Root';
+import React from 'react';
-createRoot(document.getElementById('root') as HTMLElement).render(
+
+
+ {title}
+
+
+
+
+
+
+ );
+ }
+
+ return (
+ handleGoBack()}>
+
+ Back
+
+ 
+
+
+
+ );
+};
diff --git a/src/modules/CatalogPage/CatalogPage.module.scss b/src/modules/CatalogPage/CatalogPage.module.scss
new file mode 100644
index 00000000000..96590cb59dc
--- /dev/null
+++ b/src/modules/CatalogPage/CatalogPage.module.scss
@@ -0,0 +1,95 @@
+@import '../../styles/main';
+
+.page {
+ @include page-default;
+}
+
+.title {
+ padding: 40px 0;
+
+ @include on-desktop {
+ padding: 24px 0 32px
+ }
+
+ .count {
+ @include font-dt-body-text;
+
+ color: $secondary-color;
+ }
+}
+
+.items {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
+ gap: 40px 16px;
+ justify-items: center;
+
+ padding-top: 24px;
+
+ @include on-desktop {
+ grid-template-columns: repeat(4, 1fr);
+ max-width: $desktop-content-max-width;
+ }
+}
+
+.pagination {
+ user-select: none;
+
+ display: flex;
+ gap: 16px;
+ align-items: center;
+ justify-content: center;
+
+ padding-top: 40px;
+
+ @include on-mobile {
+ padding-top: 24px;
+ }
+
+ .container {
+ display: flex;
+ gap: 8px;
+ }
+}
+
+.button {
+ cursor: pointer;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ width: 32px;
+ height: 32px;
+ border: 1px solid $elements-color;
+ border-radius: 100%;
+
+ color: $primary-color;
+
+ transition: 0.5s;
+
+ @include font-dt-body-text;
+
+ &--control {
+ cursor: default;
+ border-color: $icon-color;
+ opacity: 0.5;
+
+ &:hover {
+ border-color: $primary-color;
+ transition: $transition-time;
+ }
+
+ &--active {
+ cursor: pointer;
+ border-color: $icon-color;
+ opacity: 1;
+ }
+ }
+
+ &--active {
+ border-color: $primary-color;
+ color: $white-color;
+ background-color: $primary-color;
+ }
+}
diff --git a/src/modules/CatalogPage/CatalogPage.tsx b/src/modules/CatalogPage/CatalogPage.tsx
new file mode 100644
index 00000000000..13bc894c3c9
--- /dev/null
+++ b/src/modules/CatalogPage/CatalogPage.tsx
@@ -0,0 +1,256 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import styles from './CatalogPage.module.scss';
+import { getCountByCategorys } from '../shared/constants/Categorys';
+import { getProductData } from '../../api/fetchClient';
+import { Product } from '../../types/ProductType';
+import { Icon } from '../../components/Icon';
+import { ProductCard } from '../../components/ProductCard';
+import { Dropdown } from '../../components/Dropdown';
+import { PerPageType } from '../../types/PerPageType';
+import { SortType } from '../../types/SortType';
+import { Navigate, useParams, useSearchParams } from 'react-router-dom';
+import { PathLine } from '../../components/PathLine/PathLine';
+import { Loader } from '../../components/Loader';
+
+export const CatalogPage = () => {
+ const { category } = useParams<{ category: string }>();
+ const [loader, setLoader] = useState handleGoBack()}>
+
+ Back
+ Cart
+
+
+
+ {products &&
+ products.map((item, index) => (
+
+
+ handleChangeQuantity(item.itemId, 'delete')}
+ />
+
+ 
+
+
+ {item.name}
+
+
+
+ ))}
+
+
+
+ getQuantity(item.itemId) > 1 &&
+ handleChangeQuantity(item.itemId, 'minus')
+ }
+ >
+
+
+ {getQuantity(item.itemId)}
+
+ = 999,
+ })}
+ onClick={() =>
+ getQuantity(item.itemId) <= 999 &&
+ handleChangeQuantity(item.itemId, 'plus')
+ }
+ >
+
+ ${item.price}
+
+
+ ${totalPrice}
+
+ Total for {totalCount} items
+
+
+
+
+
+
+ );
+};
diff --git a/src/modules/CatalogPage/index.ts b/src/modules/CatalogPage/index.ts
new file mode 100644
index 00000000000..8decfd6bf14
--- /dev/null
+++ b/src/modules/CatalogPage/index.ts
@@ -0,0 +1 @@
+export { CatalogPage } from './CatalogPage';
diff --git a/src/modules/FavoritesPage/FavoritesPage.module.scss b/src/modules/FavoritesPage/FavoritesPage.module.scss
new file mode 100644
index 00000000000..dba1c8e408a
--- /dev/null
+++ b/src/modules/FavoritesPage/FavoritesPage.module.scss
@@ -0,0 +1,42 @@
+@import '../../styles/main';
+
+.page {
+ @include page-default;
+
+ .title {
+ padding: 40px 0;
+
+ @include on-desktop {
+ padding: 24px 0 32px
+ }
+
+ .count {
+ @include font-dt-body-text;
+
+ color: $secondary-color;
+ }
+ }
+
+ .empty {
+ display: flex;
+ justify-content: center;
+
+ &__image {
+ width: 100%;
+ max-width: 500px;
+ }
+ }
+
+ .items {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
+ gap: 40px 16px;
+ justify-items: center;
+
+ @include on-desktop {
+ grid-template-columns: repeat(4, 1fr);
+ max-width: $desktop-content-max-width;
+ }
+ }
+}
+
diff --git a/src/modules/FavoritesPage/FavoritesPage.tsx b/src/modules/FavoritesPage/FavoritesPage.tsx
new file mode 100644
index 00000000000..389cd94e07d
--- /dev/null
+++ b/src/modules/FavoritesPage/FavoritesPage.tsx
@@ -0,0 +1,86 @@
+import React, { useEffect, useState } from 'react';
+import { Product } from '../../types/ProductType';
+import { getProductData } from '../../api/fetchClient';
+import styles from '../FavoritesPage/FavoritesPage.module.scss';
+import { ProductCard } from '../../components/ProductCard';
+import { useCartAndFavContext } from '../shared/context/CartAndFavContext';
+import { PathLine } from '../../components/PathLine/indes';
+import emptyFavImg from '../../images/favorite-is-empty.png';
+
+export const FavoritesPage = () => {
+ const [counts, setCounts] = useState
+ updateSearchParam('sort', val)}
+ perPage={perPage}
+ updatePerPage={val => updateSearchParam('perPage', val)}
+ />
+
+
+
+
+ + {category === 'phones' + ? 'Mobile phones' + : category === 'tablets' + ? 'Tablets' + : 'Accessories'} +
+{counts} models
+
+ {loader ? (
+
+
+
+ handlePageSet(page - 1)}
+ >
+
+
+ {pages.map(p => (
+
+ handlePageSet(p)}
+ >
+ {p}
+
+ ))}
+ handlePageSet(page + 1)}
+ >
+
+
+
+ );
+ }
+
+ return (
+
+
+
+ 
+
+
+
+ );
+};
diff --git a/src/modules/HomePage/HomePage.module.scss b/src/modules/HomePage/HomePage.module.scss
new file mode 100644
index 00000000000..15678cdfc9f
--- /dev/null
+++ b/src/modules/HomePage/HomePage.module.scss
@@ -0,0 +1,23 @@
+@import '../../styles/main';
+
+.page {
+ @include page-default;
+}
+
+.title {
+ padding: 56px 0;
+
+ @include on-tablet {padding: 32px 0}
+
+ @include on-mobile {padding: 24px 0}
+}
+
+.content {
+ display: flex;
+ flex-direction: column;
+ gap: 80px;
+
+ @include on-tablet {gap: 64px}
+
+ @include on-mobile {gap: 56px}
+}
diff --git a/src/modules/HomePage/HomePage.tsx b/src/modules/HomePage/HomePage.tsx
new file mode 100644
index 00000000000..6b31fd2e935
--- /dev/null
+++ b/src/modules/HomePage/HomePage.tsx
@@ -0,0 +1,94 @@
+import React, { useEffect, useState } from 'react';
+import styles from './HomePage.module.scss';
+import { PicturesSlider } from '../../components/PicturesSlider';
+import { ProductSlider } from '../../components/ProductSlider';
+
+import { Product } from '../../types/ProductType';
+import { CategoryBox } from '../../components/CategoryBox/CategoryBox';
+import { getProductData } from '../../api/fetchClient';
+import { getCategorys } from '../shared/constants/Categorys';
+import { CategoryBoxType } from '../../types/CategoryBoxType';
+import { banners } from '../shared/constants/Baners';
+import { Loader } from '../../components/Loader';
+
+export const HomePage = () => {
+ const [categorys, setCategorys] = useState
+
+
+
+
+ FavoritesPage
+{counts} models
+
+ {visibleProducts?.map(product => (
+
+
+
+ )}
+
+ );
+};
diff --git a/src/modules/HomePage/index.ts b/src/modules/HomePage/index.ts
new file mode 100644
index 00000000000..0799f479a25
--- /dev/null
+++ b/src/modules/HomePage/index.ts
@@ -0,0 +1 @@
+export { HomePage } from './HomePage';
diff --git a/src/modules/NotFoundPage/NotFoundPage.module.scss b/src/modules/NotFoundPage/NotFoundPage.module.scss
new file mode 100644
index 00000000000..6c633f1df5b
--- /dev/null
+++ b/src/modules/NotFoundPage/NotFoundPage.module.scss
@@ -0,0 +1,17 @@
+@import '../../styles/main';
+
+.page {
+ @include page-default;
+
+ .image_box {
+ display: flex;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+
+ .image {
+ width: 100%;
+ max-width: 500px;
+ }
+ }
+}
diff --git a/src/modules/NotFoundPage/NotFoundPage.tsx b/src/modules/NotFoundPage/NotFoundPage.tsx
new file mode 100644
index 00000000000..15f3574d059
--- /dev/null
+++ b/src/modules/NotFoundPage/NotFoundPage.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import styles from './NotFoundPage.module.scss';
+import img from '../../images/page-not-found.png';
+
+export const NotFoundPage = () => {
+ return (
+
+
+ Product Catalog
+
+
+
+
+ );
+};
diff --git a/src/modules/NotFoundProduct/NotFoundProduct.module.scss b/src/modules/NotFoundProduct/NotFoundProduct.module.scss
new file mode 100644
index 00000000000..6c633f1df5b
--- /dev/null
+++ b/src/modules/NotFoundProduct/NotFoundProduct.module.scss
@@ -0,0 +1,17 @@
+@import '../../styles/main';
+
+.page {
+ @include page-default;
+
+ .image_box {
+ display: flex;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+
+ .image {
+ width: 100%;
+ max-width: 500px;
+ }
+ }
+}
diff --git a/src/modules/NotFoundProduct/NotFoundProduct.tsx b/src/modules/NotFoundProduct/NotFoundProduct.tsx
new file mode 100644
index 00000000000..28a526ecda3
--- /dev/null
+++ b/src/modules/NotFoundProduct/NotFoundProduct.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import styles from './NotFoundProduct.module.scss';
+import img from '../../images/product-not-found.png';
+
+export const NotFoundProduct = () => {
+ return (
+ Not Found Page
+ +
+ 
+
+
+
+ );
+};
diff --git a/src/modules/ProductDetailsPage/ProductDetailsPage.module.scss b/src/modules/ProductDetailsPage/ProductDetailsPage.module.scss
new file mode 100644
index 00000000000..dc3ade21778
--- /dev/null
+++ b/src/modules/ProductDetailsPage/ProductDetailsPage.module.scss
@@ -0,0 +1,433 @@
+@import '../../styles/main';
+
+$main-image-max-size: 464px;
+$small-image-max-size: 80px;
+$small-image-min-size: 35px;
+
+.page {
+ margin: 0 auto;
+
+ @include on-tablet { padding: 24px 16px 64px; }
+
+ @include on-mobile { padding: 24px 16px 64px; }
+
+ @include on-desktop {
+ padding-top: 64px;
+ padding-bottom: 80px;
+ }
+
+ &__container {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ padding-bottom: 80px;
+ }
+
+ .slider {
+ width: 100%;
+ padding-top: 80px;
+
+ @include on-tablet { padding-top: 64px; }
+
+ @include on-mobile { padding-top: 56px; }
+ }
+}
+
+.device {
+ &__name {
+ margin: 0 auto;
+ padding-bottom: 40px;
+ color: $primary-color;
+
+ @include on-mobile {
+ padding-bottom: 32px;
+ }
+ }
+
+ &__settings {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ gap: 24px;
+
+ @include on-tablet { flex: 1; }
+ }
+
+ &__overview {
+ display: flex;
+ flex-direction: row;
+ gap: 64px;
+
+ @include on-mobile { flex-direction: column; }
+ }
+
+ &__images {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ @include on-mobile {
+ flex-direction: row;
+ gap: 8px;
+ justify-content: space-between;
+ }
+
+ &__container {
+ display: flex;
+ flex-direction: row;
+ gap: 16px;
+
+ @include on-tablet { flex: 1; }
+
+ @include on-mobile {
+ flex-direction: column-reverse;
+ gap: 8px;
+ }
+ }
+
+ .small {
+ cursor: pointer;
+
+ overflow: hidden;
+ display: flex;
+ flex-shrink: 0;
+ align-items: center;
+ justify-content: center;
+
+ aspect-ratio: 1 / 1;
+ border: 1px solid $elements-color;
+ border-radius: 8px;
+
+ transition: border-color $transition-time;
+
+ @include on-desktop {
+ width: $small-image-max-size;
+ height: $small-image-max-size;
+ }
+
+ @include on-tablet {
+ width: $small-image-min-size;
+ height: $small-image-min-size;
+ }
+
+ @include on-mobile {
+ width: 50px;
+ height: 50px;
+ }
+
+ &--active, &:hover {
+ border-color: $primary-color;
+ }
+ }
+ }
+}
+
+.settings {
+ &__first {
+ display: flex;
+ justify-content: space-between;
+ }
+
+ &__id {
+ color: $icon-color;
+
+ @include font-dt-small-text;
+ }
+
+ &__capacity_capacity,
+ &__colors_colors {
+ display: flex;
+ gap: 8px;
+ }
+
+ &__separator {
+ height: 2px;
+ background-color: $elements-color;
+
+ @include on-desktop { max-width: 320px; }
+ }
+
+ &__colors, &__capacity {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+ &_text, &-text {
+ color: $secondary-color;
+
+ @include font-dt-small-text;
+ }
+ }
+}
+
+.capacity {
+ &_border {
+ cursor: pointer;
+ border: 1px solid $icon-color;
+ border-radius: 4px;
+ transition: all $transition-time;
+
+ &--active {
+ border-color: $primary-color;
+ background-color: $primary-color;
+ }
+
+ &:hover:not(&--active) {
+ border-color: $accent-color;
+ }
+ }
+
+ &_text {
+ padding: 8px;
+ color: $primary-color;
+
+ @include font-dt-body-text;
+
+ &--active { color: $white-color; }
+ }
+}
+
+.color {
+ &_circle {
+ aspect-ratio: 1 / 1;
+ width: 26px;
+ border-radius: 50%;
+ }
+
+ &_border {
+ cursor: pointer;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ aspect-ratio: 1 / 1;
+ height: 32px;
+ border: 1px solid $elements-color;
+ border-radius: 50%;
+
+ transition: border-color $transition-time;
+
+ &:hover { border-color: $accent-color; }
+
+ &--active { border-color: $primary-color; }
+ }
+}
+
+.center, .side, .bottom {
+ box-sizing: border-box;
+ object-fit: contain;
+}
+
+.center, .side { padding: 6px; }
+
+.bottom { transform: translate(0, 50%) scale(1.2); }
+
+.main_image {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ box-sizing: border-box;
+ aspect-ratio: 1 / 1;
+ width: 100%;
+ min-width: 0;
+ padding: 8px;
+
+ @include on-desktop {
+ height: $main-image-max-size;
+ padding: 22px;
+ }
+
+ @include on-tablet { max-height: 400px; }
+}
+
+.img_contain {
+ max-width: 100%;
+ max-height: 100%;
+ object-fit: contain;
+}
+
+.buttons-and-price {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ padding-top: 8px;
+
+ .price {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+
+ &__discount {
+ color: $primary-color;
+
+ @include font-dt-h2;
+ }
+
+ &__regular {
+ font-weight: 400;
+ color: $secondary-color;
+ text-decoration: line-through;
+
+ @include font-dt-h3;
+ }
+ }
+}
+
+.info {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+ max-width: 320px;
+ padding-top: 8px;
+
+ @include on-mobile { max-width: 100%; }
+
+ &__box {
+ display: flex;
+ justify-content: space-between;
+ }
+
+ &__text {
+ color: $secondary-color;
+
+ @include font-dt-small-text;
+ }
+
+ &__textprod {
+ color: $primary-color;
+
+ @include font-dt-small-text;
+ }
+}
+
+.buttons {
+ display: flex;
+ gap: 8px;
+ max-width: 320px;
+ height: 48px;
+
+ @include on-mobile { max-width: 100%; }
+
+ &__cart {
+ cursor: pointer;
+
+ display: flex;
+ flex-grow: 1;
+ align-items: center;
+ justify-content: center;
+
+ border: none;
+ border-radius: 8px;
+
+ color: $white-color;
+
+ background-color: $accent-color;
+
+ transition: all $transition-time;
+
+ @include font-dt-buttons;
+
+ &--active {
+ border: 1px solid $elements-color;
+ color: $accent-color;
+ background-color: $white-color;
+ }
+
+ &:hover { box-shadow: $button-shadow }
+ }
+
+ &__fovourite {
+ cursor: pointer;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ aspect-ratio: 1 / 1;
+ height: 48px;
+ border: 1px solid $icon-color;
+ border-radius: 100%;
+
+ background-color: transparent;
+
+ transition: border-color $transition-time;
+
+ &:hover { border-color: $primary-color; }
+ }
+}
+
+.block {
+ display: flex;
+ flex-direction: column;
+ gap: 64px;
+
+ @include on-desktop { flex-direction: row; }
+
+ &__about, &__specs {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+
+ &__title {
+ padding-bottom: 16px;
+ color: $primary-color;
+ }
+ }
+
+ &__about {
+ @include on-desktop { max-width: 560px; }
+ }
+
+ &__specs {
+ @include on-desktop { max-width: 512px; }
+ }
+
+ &__separator {
+ height: 2px;
+ background-color: $elements-color;
+ }
+}
+
+.about__info {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ padding-top: 32px;
+
+ &_title {
+ color: $primary-color;
+ }
+
+ &_text {
+ color: $secondary-color;
+
+ @include font-dt-body-text;
+ }
+}
+
+.specs {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ padding-top: 25px;
+
+ &__box {
+ display: flex;
+ justify-content: space-between;
+
+ &_text {
+ color: $secondary-color;
+
+ @include font-dt-body-text;
+ }
+
+ &_textprod {
+ color: $primary-color;
+
+ @include font-dt-body-text;
+ }
+ }
+}
diff --git a/src/modules/ProductDetailsPage/ProductDetailsPage.tsx b/src/modules/ProductDetailsPage/ProductDetailsPage.tsx
new file mode 100644
index 00000000000..569ecead843
--- /dev/null
+++ b/src/modules/ProductDetailsPage/ProductDetailsPage.tsx
@@ -0,0 +1,349 @@
+import React, { useEffect, useState } from 'react';
+import styles from './ProductDetailsPage.module.scss';
+import { PathLine } from '../../components/PathLine/indes';
+import { useNavigate, useParams } from 'react-router-dom';
+import {
+ getAccessoriesData,
+ getPhonesData,
+ getProductData,
+ getTabletsData,
+} from '../../api/fetchClient';
+import { AllCategoryType } from '../../types/AllCategoryType';
+import { Loader } from '../../components/Loader';
+import classNames from 'classnames';
+import { Icon } from '../../components/Icon';
+import { useCartAndFavContext } from '../shared/context/CartAndFavContext';
+import { ProductSlider } from '../../components/ProductSlider';
+import { Product } from '../../types/ProductType';
+import { NotFoundProduct } from '../NotFoundProduct/NotFoundProduct';
+
+const colorMap: RecordNot Found Product
+ +
+
+
+
+
+ );
+};
diff --git a/src/modules/ProductDetailsPage/index.ts b/src/modules/ProductDetailsPage/index.ts
new file mode 100644
index 00000000000..6615089e5ec
--- /dev/null
+++ b/src/modules/ProductDetailsPage/index.ts
@@ -0,0 +1 @@
+export * from './ProductDetailsPage';
diff --git a/src/modules/shared/constants/Baners.ts b/src/modules/shared/constants/Baners.ts
new file mode 100644
index 00000000000..c9ed2a300c2
--- /dev/null
+++ b/src/modules/shared/constants/Baners.ts
@@ -0,0 +1,5 @@
+export const banners = [
+ './img/banner-accessories.png',
+ './img/banner-phones.png',
+ './img/banner-tablets.png',
+];
diff --git a/src/modules/shared/constants/Categorys.ts b/src/modules/shared/constants/Categorys.ts
new file mode 100644
index 00000000000..2d3ea5ecc1a
--- /dev/null
+++ b/src/modules/shared/constants/Categorys.ts
@@ -0,0 +1,62 @@
+import { getProductData } from '../../../api/fetchClient';
+
+type CategoryCounts = {
+ phoneCounts: number;
+ tabletCounts: number;
+ accessorieCounts: number;
+};
+
+export const getCountByCategorys = async (): Promise
+
+
+
+ {product?.name}
+
+
+
+
+
+ {loader ? (
+
+
+ setMainPhoto(image)}
+ >
+
+
+ ))
+ )}
+
+ 
+
+
+
+
+
+
+
+
+
+ Available colors
+
+
+ {product?.colorsAvailable.map((color, index) => (
+
+ handleColorChange(color)}
+ >
+
+
+ ))}
+ {product?.id}
+
+
+
+
+
+ {product?.capacityAvailable.map((capacity, index) => (
+
+ handleCapacityChange(capacity)}
+ >
+
+ ))}
+
+ {capacity}
+
+
+
+
+
+
+ ${product?.priceDiscount}
+
+
+ ${product?.priceRegular}
+
+
+
+
+
+
+
+
+
+ Screen
+ {product?.screen}
+
+
+ Resolution
+
+ {product?.resolution}
+
+
+
+ Processor
+
+ {product?.processor}
+
+
+
+ RAM
+ {product?.ram}
+
+
+ {dataToSlider && (
+
+
+ About
+ + {product?.description.map((desc, index) => ( +
+
+ ))}
+ {desc.title}
+{desc.text}
+
+
+ Tech specs
+ +
+
+
+
+ Screen
+
+ {product?.screen}
+
+
+
+ Resolution
+
+ {product?.resolution}
+
+
+
{' '}
+ Processor
+
+ {product?.processor}
+
+
+
+ RAM
+ {product?.ram}
+
+
+ Build in memory
+
+ {product?.capacity}
+
+
+
+ Camera
+
+ {product?.camera}
+
+
+
+ Zoom
+ {product?.zoom}
+
+
+ Cell
+ {product?.cell}
+
+
+ )}
+