+
+
+
+
+
+
+
+
+
+ {banners.map(banner => (
+
+ 
+
+ ))}
+
+
+ {banners.map((banner, i) => (
+
+
+
+
+
+
+
+
+ 
+
+
+ {product.name}
+ +
+
+
+
+ -
+
+
+ +
+
+
+ {quantity}
+ +${product.price}
+
+
+ );
+};
diff --git a/src/components/CheckoutModal/index.ts b/src/components/CheckoutModal/index.ts
new file mode 100644
index 00000000000..df7c4cd8c2f
--- /dev/null
+++ b/src/components/CheckoutModal/index.ts
@@ -0,0 +1 @@
+export * from './CheckoutModal';
diff --git a/src/components/DropDown/DropDown.module.scss b/src/components/DropDown/DropDown.module.scss
new file mode 100644
index 00000000000..fbf1ca0c5b8
--- /dev/null
+++ b/src/components/DropDown/DropDown.module.scss
@@ -0,0 +1,102 @@
+@import '../../styles/global';
+
+.dropdown {
+ position: relative;
+ width: 100%;
+ box-sizing: border-box;
+
+ &__title {
+ margin: 0 0 4px;
+
+ @include small-text;
+
+ color: $colors-secondary;
+ }
+
+ &__button {
+ display: flex;
+ align-items: center;
+ position: relative;
+ width: 100%;
+ height: 40px;
+ border: 1px solid $colors-icons;
+ background: none;
+
+ padding: 0 40px 0 12px;
+
+ @include button-text;
+
+ color: $colors-primary;
+
+ &:hover {
+ cursor: pointer;
+ border: 1px solid $colors-secondary;
+ }
+
+ }
+
+ &__buttonActive {
+ border: 1px solid $colors-primary;
+ }
+
+ &__value {
+ display: block;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ &__chevron {
+ position: absolute;
+ stroke: $colors-icons;
+ right: 12px;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+
+ &__content {
+ position: absolute;
+ top: calc(100% + 6px);
+ left: 0;
+ width: 100%;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+
+ border: 1px solid $colors-elements;
+ background: $colors-white;
+ box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
+
+ transform-origin: top;
+ transition:
+ opacity 160ms ease,
+ transform 160ms ease;
+ }
+
+ &__option {
+ padding: 8px 12px;
+ color: $colors-secondary;
+ transition: all 0.3s ease;
+
+ &:hover {
+ cursor: pointer;
+ color: $colors-primary;
+ background-color: $colors-hover-bg;
+ }
+ }
+
+}
+
+
+.open {
+ opacity: 1;
+ transform: translateY(0) scaleY(1);
+ pointer-events: auto;
+}
+
+.closed {
+ opacity: 0;
+ transform: translateY(-6px) scaleY(0.98);
+ pointer-events: none;
+}
diff --git a/src/components/DropDown/DropDown.tsx b/src/components/DropDown/DropDown.tsx
new file mode 100644
index 00000000000..9ed813a06a8
--- /dev/null
+++ b/src/components/DropDown/DropDown.tsx
@@ -0,0 +1,112 @@
+import { useEffect, useRef, useState } from 'react';
+import styles from './DropDown.module.scss';
+import classNames from 'classnames';
+import { Chevron } from '../icons/Chevron';
+
+const ANIMATION_MS = 160;
+
+export type DropdownOption event.stopPropagation()}
+ >
+
+ Checkout is not implemented yet
+ +Do you want to clear the Cart?
+ +
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/DropDown/index.ts b/src/components/DropDown/index.ts
new file mode 100644
index 00000000000..69092242f78
--- /dev/null
+++ b/src/components/DropDown/index.ts
@@ -0,0 +1 @@
+export * from './DropDown';
diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss
new file mode 100644
index 00000000000..b96a9784ec2
--- /dev/null
+++ b/src/components/Footer/Footer.module.scss
@@ -0,0 +1,87 @@
+@import '../../styles/global';
+
+.footer {
+ background-color: $colors-white;
+ border-top: 1px solid $colors-elements;
+ margin-top: 64px;
+ min-height: 257px;
+
+ display: flex;
+ align-items: stretch;
+
+ @include onTablet {
+ min-height: 96px;
+ }
+
+ @include onDesktop {
+ margin-top: 80px;
+ }
+}
+
+.container {
+ min-height: inherit;
+ width: 100%;
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 32px;
+
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ gap: 32px;
+
+ @include onTablet {
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ }
+}
+
+.logo {
+ display: inline-flex;
+ transition: transform 0.3s ease;
+}
+
+.logo:hover {
+ transform: scale(1.1);
+}
+
+.mainLinks {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ @include onTablet {
+ flex-flow: row wrap;
+ gap: clamp(24px, 6vw, 106px);
+ }
+
+ &__link {
+ @include uppercase-text;
+
+ text-decoration: none;
+ color: $colors-secondary;
+
+ transition: transform 0.3s ease;
+
+ &:hover {
+ color: #6c6c6c;
+ transform: translateY(-1px) scale(1.01);
+ }
+ }
+}
+
+.backToTop {
+ display: flex;
+ flex-direction: row;
+ gap: 16px;
+ align-self: center;
+ align-items: center;
+
+ &__text {
+ @include small-text;
+
+ color: $colors-secondary;
+ }
+
+}
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
new file mode 100644
index 00000000000..afc48f0e056
--- /dev/null
+++ b/src/components/Footer/Footer.tsx
@@ -0,0 +1,60 @@
+import { Link } from 'react-router-dom';
+import styles from './Footer.module.scss';
+import logo from '../../assets/icons/Logo.svg';
+import { Chevron } from '../icons/Chevron';
+import { SecondaryButton } from '../SecondaryButton';
+
+export const Footer = () => {
+ const handleBackToTop = () => {
+ window.scrollTo({
+ top: 0,
+ behavior: 'smooth',
+ });
+ };
+
+ return (
+
+ );
+};
diff --git a/src/components/Footer/index.ts b/src/components/Footer/index.ts
new file mode 100644
index 00000000000..ddcc5a9cd18
--- /dev/null
+++ b/src/components/Footer/index.ts
@@ -0,0 +1 @@
+export * from './Footer';
diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss
new file mode 100644
index 00000000000..cd427ac740c
--- /dev/null
+++ b/src/components/Header/Header.module.scss
@@ -0,0 +1,230 @@
+@import '../../styles/global';
+
+.header {
+ position: sticky;
+ top: 0;
+ z-index: 1100;
+ height: var(--header-height);
+ background-color: $colors-white;
+ border-bottom: 1px solid $colors-elements;
+
+ @include onTablet {
+ height: var(--header-height);
+ }
+
+ &__container {
+ margin: 0 auto;
+ padding: 0 24px;
+
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ height: 100%;
+ padding-right: 0;
+ }
+
+ &__left {
+ display: flex;
+ align-items: center;
+ height: 100%;
+ gap: 48px;
+
+ @include onTablet {
+ gap: 32px;
+ }
+ }
+
+ &__logo {
+ display: flex;
+ transition: transform 0.3s ease;
+ width: 80px;
+ height: auto;
+
+ @include onTablet {
+ width: 64px;
+ }
+
+ &:hover {
+ transform: scale(1.1);
+ }
+
+ img {
+ width: 100%;
+ height: auto;
+ display: block;
+ }
+ }
+
+ &__nav {
+ display: none;
+ height: 100%;
+
+ @include onTablet {
+ display: flex;
+ gap: 32px;
+ }
+
+ @include onDesktop {
+ display: flex;
+ gap: 64px;
+ }
+ }
+
+ &__navLink {
+ position: relative;
+ height: 100%;
+ display: flex;
+ align-items: center;
+
+ @include uppercase-text;
+
+ text-decoration: none;
+ color: $colors-secondary;
+
+ transition: color 0.3s ease;
+
+ &::after {
+ content: '';
+ position: absolute;
+ left: -2px;
+ bottom: 0;
+
+ width: 110%;
+ height: 3px;
+ background-color: $colors-primary;
+
+ transform: scaleX(0);
+ transform-origin: left;
+ transition: transform 0.3s ease;
+ }
+
+ &:hover {
+ color: $colors-primary;
+ }
+
+ &:hover::after {
+ transform: scaleX(1);
+ }
+ }
+
+ &__navLinkActive {
+ color: $colors-primary;
+ text-decoration: none;
+
+ &::after {
+ transform: scaleX(1);
+ }
+ }
+
+ &__right {
+ display: none;
+ align-items: center;
+
+ @include onTablet {
+ display: flex;
+ }
+ }
+
+ &__iconLink {
+ position: relative;
+ width: var(--header-height);
+ height: var(--header-height);
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ border-left: 1px solid $colors-elements;
+ text-decoration: none;
+
+
+ &::after {
+ content: '';
+ position: absolute;
+ left: 0;
+ bottom: 0;
+
+ width: 100%;
+ height: 3px;
+ background-color: $colors-primary;
+
+ transform: scaleX(0);
+ transform-origin: left;
+ transition: transform 0.3s ease;
+ }
+
+ &>* {
+ transform: scale(1.05);
+ }
+
+ &:hover>* {
+ transform: scale(1.1);
+ }
+
+ &:hover::after {
+ transform: scaleX(1);
+ }
+ }
+
+ &__iconLinkActive {
+ &::after {
+ transform: scaleX(1);
+ }
+ }
+
+ &__burgerContainer {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ width: auto;
+ height: 100%;
+ aspect-ratio: 1 / 1;
+ box-shadow: -1px 0 0 $colors-elements;
+
+ @include onTablet {
+ display: none;
+ }
+
+ @include onDesktop {
+ display: none;
+ }
+ }
+
+ &__burger {
+ width: 16px;
+ height: 14px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ padding: 0;
+ background: none;
+ border: none;
+ cursor: pointer;
+
+ span {
+ height: 2px;
+ width: 100%;
+ background: $colors-primary;
+ border-radius: 2px;
+
+ transition: transform 0.3s ease, opacity 0.3s ease;
+ }
+
+ }
+
+ &__burgerOpen {
+ span:nth-child(1) {
+ transform: translateY(6px) rotate(45deg);
+ }
+
+ span:nth-child(2) {
+ opacity: 0;
+ }
+
+ span:nth-child(3) {
+ transform: translateY(-6px) rotate(-45deg);
+ }
+ }
+}
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
new file mode 100644
index 00000000000..5a725938185
--- /dev/null
+++ b/src/components/Header/Header.tsx
@@ -0,0 +1,95 @@
+import { Link, NavLink } from 'react-router-dom';
+import styles from './Header.module.scss';
+import logo from '../../assets/icons/Logo.svg';
+import favorites from '../../assets/icons/Favourites.svg';
+import shoppingBag from '../../assets/icons/ShoppingBag.svg';
+import { useState } from 'react';
+import { MobileMenu } from './MobileMenu/MobileMenu';
+import { useSelector } from 'react-redux';
+import { RootState } from '../../app/store';
+import { IconWithBadge } from '../icons/IconWithBadge';
+import classNames from 'classnames';
+import { cartItemsCount } from '../../features/utils/selectors';
+
+export const Header = () => {
+ const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+ const getNavClass = ({ isActive }: { isActive: boolean }) =>
+ classNames(styles.header__navLink, {
+ [styles.header__navLinkActive]: isActive,
+ });
+
+ const getIconClass = ({ isActive }: { isActive: boolean }) =>
+ classNames(styles.header__iconLink, {
+ [styles.header__iconLinkActive]: isActive,
+ });
+
+ const favoriteItems = useSelector(
+ (state: RootState) => state.favorites.items,
+ );
+
+ const cartItems = useSelector(cartItemsCount);
+
+ return (
+ <>
+ {title}
+ + {isRender && ( +-
+ {options.map(option => (
+
- handleSelect(option.value)} + className={styles.dropdown__option} + > + {option.label} + + ))} +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
diff --git a/src/components/Loader/index.tsx b/src/components/Loader/index.tsx
new file mode 100644
index 00000000000..d5ce981151f
--- /dev/null
+++ b/src/components/Loader/index.tsx
@@ -0,0 +1 @@
+export * from './Loader';
diff --git a/src/components/ProductActions/ProductActions.module.scss b/src/components/ProductActions/ProductActions.module.scss
new file mode 100644
index 00000000000..7a5eb95a55d
--- /dev/null
+++ b/src/components/ProductActions/ProductActions.module.scss
@@ -0,0 +1,73 @@
+@import '../../styles/global';
+
+.productActions {
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+
+ &__add {
+ padding: 0;
+ flex: 1;
+ height: 40px;
+ background-color: #313237;
+ border: none;
+ color: #fff;
+ transition: all 0.3s ease;
+ font: inherit;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 21px;
+
+ &:hover {
+ box-shadow: 0 3px 13px rgba(0, 0, 0, 0.4);
+ cursor: pointer;
+ }
+
+ &:disabled {
+ background: #fff;
+ border: 1px solid #E2E6E9;
+ color: $colors-green;
+ cursor: default;
+ box-shadow: none;
+ transform: none;
+ }
+ }
+
+ .iconImg {
+ width: 15px;
+ height: auto;
+ display: block;
+ transition: transform 120ms ease;
+ transform: translateZ(0);
+ will-change: transform;
+ }
+
+
+ .iconPop {
+ animation: pop 550ms cubic-bezier(0.34, 1.56, 0.64, 1);
+ }
+
+ @keyframes pop {
+ 0% {
+ transform: scale(1) rotate(0deg);
+ }
+
+ 30% {
+ transform: scale(1.25) rotate(-8deg);
+ }
+
+ 55% {
+ transform: scale(0.95) rotate(4deg);
+ }
+
+ 75% {
+ transform: scale(1.08) rotate(-2deg);
+ }
+
+ 100% {
+ transform: scale(1) rotate(0deg);
+ }
+ }
+
+
+}
diff --git a/src/components/ProductActions/ProductActions.tsx b/src/components/ProductActions/ProductActions.tsx
new file mode 100644
index 00000000000..a28bf2b2ece
--- /dev/null
+++ b/src/components/ProductActions/ProductActions.tsx
@@ -0,0 +1,58 @@
+import styles from './ProductActions.module.scss';
+import React, { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { AppDispatch, RootState } from '../../app/store';
+import { addInCart } from '../../features/slices/cartSlice/cartSlice';
+import { toggleFavorite } from '../../features/slices/favorites/favoritesSlice';
+import union from '../../assets/icons/Union.svg';
+import favorites from '../../assets/icons/Favourites.svg';
+import { SecondaryButton } from '../SecondaryButton';
+type Props = {
+ itemId: string;
+};
+
+export const ProductActions: React.FC
+
+
+ 
+
+
+ );
+};
diff --git a/src/components/ProductActions/index.ts b/src/components/ProductActions/index.ts
new file mode 100644
index 00000000000..4ae950d1697
--- /dev/null
+++ b/src/components/ProductActions/index.ts
@@ -0,0 +1 @@
+export * from './ProductActions';
diff --git a/src/components/ProductCard/ProductCard.module.scss b/src/components/ProductCard/ProductCard.module.scss
new file mode 100644
index 00000000000..666fc26f9b7
--- /dev/null
+++ b/src/components/ProductCard/ProductCard.module.scss
@@ -0,0 +1,188 @@
+@import '../../styles/global';
+
+.productCard {
+ box-sizing: border-box;
+ border: 1px solid $colors-elements;
+ padding: 32px;
+ background: $colors-white;
+ display: flex;
+ flex-direction: column;
+ transition: all 0.3s ease;
+ gap: 8px;
+ min-width: 0;
+ min-height: 440px;
+ justify-content: space-between;
+
+ @include onTablet {
+ min-height: 512px;
+ max-width: 288px;
+ }
+
+ @include onDesktop {
+ min-height: 506px;
+ max-width: 272px;
+ }
+
+ &:hover {
+ cursor: pointer;
+ box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
+ }
+
+ &__link {
+ display: flex;
+ flex-direction: column;
+ text-decoration: none;
+ color: $colors-primary;
+ justify-content: space-between;
+ height: 100%;
+ }
+
+ &__image {
+ width: 100%;
+ height: 196px;
+ object-fit: contain;
+ display: block;
+ }
+
+ &__title {
+ @include body-text;
+
+ margin-top: 24px;
+ color: $colors-primary;
+
+ min-height: calc(21px * 2);
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ line-clamp: 2;
+ -webkit-line-clamp: 2;
+ overflow: hidden;
+ }
+
+ &__price {
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+ }
+
+ &__priceCurrent {
+ color: $colors-primary;
+ margin-top: 0;
+
+ @include h3-text;
+ }
+
+ &__priceOld {
+ font-weight: 600;
+ font-size: 22px;
+ line-height: 1.4;
+ color: $colors-secondary;
+ text-decoration-line: line-through;
+ padding-left: 0;
+ text-decoration-color: $colors-secondary;
+ text-decoration-thickness: 2px;
+ }
+
+ &__specs {
+ border-top: 1px solid $colors-elements;
+ display: flex;
+ padding-top: 16px;
+ flex-direction: column;
+ gap: 8px;
+
+ div {
+ display: flex;
+ justify-content: space-between;
+ font-size: 12px;
+
+ span {
+ color: $colors-secondary;
+ }
+ }
+ }
+
+ &__actions {
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+ }
+
+ &__add {
+ padding: 0;
+ flex: 1;
+ height: 40px;
+ background-color: $colors-primary;
+ border: none;
+ color: $colors-white;
+ transition: all 0.3s ease;
+
+ @include button-text;
+
+ &:hover {
+ box-shadow: 0 3px 13px rgba(0, 0, 0, 0.4);
+ cursor: pointer;
+ }
+
+ &:disabled {
+ background: #fff;
+ border: 1px solid #E2E6E9;
+ color: $colors-green;
+ cursor: default;
+ box-shadow: none;
+ transform: none;
+ }
+ }
+
+
+ .iconImg {
+ width: 15px;
+ height: auto;
+ display: block;
+ transition: transform 120ms ease;
+ transform: translateZ(0);
+ will-change: transform;
+ }
+
+
+ .iconPop {
+ animation: pop 550ms cubic-bezier(0.34, 1.56, 0.64, 1);
+ }
+
+ @keyframes pop {
+ 0% {
+ transform: scale(1) rotate(0deg);
+ }
+
+ 30% {
+ transform: scale(1.25) rotate(-8deg);
+ }
+
+ 55% {
+ transform: scale(0.95) rotate(4deg);
+ }
+
+ 75% {
+ transform: scale(1.08) rotate(-2deg);
+ }
+
+ 100% {
+ transform: scale(1) rotate(0deg);
+ }
+ }
+
+ &__fav {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0;
+ width: 40px;
+ height: 40px;
+ background: none;
+ border: 1px solid #B4BDC3;
+ transition: border 0.3s ease;
+
+ &:hover {
+ border: 1px solid #313237;
+ cursor: pointer;
+ }
+ }
+}
diff --git a/src/components/ProductCard/ProductCard.tsx b/src/components/ProductCard/ProductCard.tsx
new file mode 100644
index 00000000000..be57b003bb7
--- /dev/null
+++ b/src/components/ProductCard/ProductCard.tsx
@@ -0,0 +1,57 @@
+import { Product } from '../../features/types/productType';
+import styles from './ProductCard.module.scss';
+import { Link } from 'react-router-dom';
+import { ProductActions } from '../ProductActions';
+
+type Props = {
+ product: Product;
+ showDiscount?: boolean;
+};
+
+export const ProductCard: React.FC{name}
+ +
+
+ ${showDiscount ? price : fullPrice}
+
+
+ {showDiscount && (
+ ${fullPrice}
+ )}
+
+
+
+
+
+
+ Screen
+ {screen}
+
+
+ Capacity
+ {capacity}
+
+
+ RAM
+ {ram}
+
+
+
+ );
+};
diff --git a/src/components/ProductGallery/index.ts b/src/components/ProductGallery/index.ts
new file mode 100644
index 00000000000..b74eb50e7e5
--- /dev/null
+++ b/src/components/ProductGallery/index.ts
@@ -0,0 +1 @@
+export * from './ProductGallery';
diff --git a/src/components/ProductOptions/ProductOptions.module.scss b/src/components/ProductOptions/ProductOptions.module.scss
new file mode 100644
index 00000000000..4dd941a8489
--- /dev/null
+++ b/src/components/ProductOptions/ProductOptions.module.scss
@@ -0,0 +1,96 @@
+@import '../../styles/global';
+
+.options {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+
+ &__group {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ }
+
+ &__colors {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ }
+
+ &__radio {
+ position: absolute;
+ opacity: 0;
+ pointer-events: none;
+ }
+
+ &__colorLabel {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ padding: 2px;
+ border: 1px solid $colors-elements;
+ border-radius: 50%;
+ cursor: pointer;
+ transition: border-color 0.3s ease;
+
+ &:hover {
+ border-color: $colors-secondary;
+ }
+
+ &:has(input:checked) {
+ border-color: $colors-primary;
+ }
+ }
+
+ &__colorCircle {
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ }
+
+ &__capacities {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ }
+
+ &__capacityLabel {
+ display: inline-flex;
+ }
+
+ &__capacityValue {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 48px;
+ padding: 8px 12px;
+ border: 1px solid $colors-secondary;
+ color: $colors-primary;
+
+ @include body-text;
+
+ transition:
+ background-color 0.3s ease,
+ color 0.3s ease,
+ border-color 0.3s ease;
+
+ &:hover {
+ cursor: pointer;
+ border-color: $colors-primary;
+ }
+ }
+
+ &__capacityLabel:has(input:checked) &__capacityValue {
+ background-color: $colors-primary;
+ border-color: $colors-primary;
+ color: $colors-white;
+ }
+
+ &__divider {
+ width: 100%;
+ height: 1px;
+ background-color: $colors-elements;
+ }
+}
diff --git a/src/components/ProductOptions/ProductOptions.tsx b/src/components/ProductOptions/ProductOptions.tsx
new file mode 100644
index 00000000000..ce4c291ce2e
--- /dev/null
+++ b/src/components/ProductOptions/ProductOptions.tsx
@@ -0,0 +1,80 @@
+import { getProductColor } from '../../features/constants/productColors';
+import styles from './ProductOptions.module.scss';
+
+type Props = {
+ colors: string[];
+ selectedColor: string;
+ capacities: string[];
+ selectedCapacity: string;
+ onColorChange: (color: string) => void;
+ onCapacityChange: (capacity: string) => void;
+};
+
+export const ProductOptions: React.FC
+ {images.map(img => {
+ const imageSrc = `/${img}`;
+ const isActive = mainImage === imageSrc;
+
+ return (
+
+ );
+ })}
+
+
+ 
+
+
+
+ );
+};
diff --git a/src/components/ProductOptions/index.ts b/src/components/ProductOptions/index.ts
new file mode 100644
index 00000000000..14e8c012fb7
--- /dev/null
+++ b/src/components/ProductOptions/index.ts
@@ -0,0 +1 @@
+export * from './ProductOptions';
diff --git a/src/components/ProductsCarousel/ProductsCarousel.module.scss b/src/components/ProductsCarousel/ProductsCarousel.module.scss
new file mode 100644
index 00000000000..8bd8b3779b3
--- /dev/null
+++ b/src/components/ProductsCarousel/ProductsCarousel.module.scss
@@ -0,0 +1,42 @@
+@import '../../styles/global';
+
+.carousel {
+ grid-column: 1 / -1;
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+
+ &__header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ &__title {
+ margin: 0;
+ color: $colors-primary;
+
+ @include h2-text;
+ }
+
+ &__actions {
+ display: flex;
+ gap: 16px;
+ }
+
+ &__track {
+ display: flex;
+ overflow: auto hidden;
+ gap: 16px;
+ scroll-snap-type: x mandatory;
+ }
+
+ &__item {
+ flex: 0 0 229px;
+ scroll-snap-align: start;
+
+ @include onDesktop {
+ flex: 0 0 calc((100% - 48px) / 4);
+ }
+ }
+}
diff --git a/src/components/ProductsCarousel/ProductsCarousel.tsx b/src/components/ProductsCarousel/ProductsCarousel.tsx
new file mode 100644
index 00000000000..c97c03d3737
--- /dev/null
+++ b/src/components/ProductsCarousel/ProductsCarousel.tsx
@@ -0,0 +1,105 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Product } from '../../features/types/productType';
+import styles from './ProductsCarousel.module.scss';
+import { Chevron } from '../icons/Chevron';
+import { ProductCard } from '../ProductCard';
+import { SecondaryButton } from '../SecondaryButton';
+
+type Props = {
+ title: string;
+ products: Product[];
+ showDiscount?: boolean;
+};
+
+export const ProductsCarousel: React.FC
+
+
+ {colors.map(color => {
+ const isChecked = selectedColor === color;
+
+ return (
+ // eslint-disable-next-line jsx-a11y/label-has-associated-control
+
+ );
+ })}
+
+
+
+
+
+ {capacities.map(capacity => {
+ const isChecked = selectedCapacity === capacity;
+
+ return (
+
+ );
+ })}
+
+
+
+
+
+ );
+};
diff --git a/src/components/ProductsCarousel/index.ts b/src/components/ProductsCarousel/index.ts
new file mode 100644
index 00000000000..3689b5b3a56
--- /dev/null
+++ b/src/components/ProductsCarousel/index.ts
@@ -0,0 +1 @@
+export * from './ProductsCarousel';
diff --git a/src/components/ProductsList/ProductsList.module.scss b/src/components/ProductsList/ProductsList.module.scss
new file mode 100644
index 00000000000..9b8a0dc8844
--- /dev/null
+++ b/src/components/ProductsList/ProductsList.module.scss
@@ -0,0 +1,11 @@
+@import '../../styles/global';
+
+.productList {
+ display: grid;
+ gap: 40px 16px;
+ grid-template-columns: repeat(auto-fill, minmax(229px, 1fr));
+
+ @include onDesktop {
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ }
+}
diff --git a/src/components/ProductsList/ProductsList.tsx b/src/components/ProductsList/ProductsList.tsx
new file mode 100644
index 00000000000..0f338f99786
--- /dev/null
+++ b/src/components/ProductsList/ProductsList.tsx
@@ -0,0 +1,17 @@
+import { Product } from '../../features/types/productType';
+import { ProductCard } from '../ProductCard';
+import styles from './ProductsList.module.scss';
+
+type Props = {
+ products: Product[];
+};
+
+export const ProductList: React.FC
+
+ {title}
+
+ scrollByStep('left')}
+ disabled={!canScrollLeft}
+ aria-label="Scroll left"
+ >
+
+ scrollByStep('right')}
+ disabled={!canScrollRight}
+ aria-label="Scroll right"
+ >
+
+
+
+ {products.map(product => (
+
+
+
+ ))}
+
+ {products.map(product => (
+
+ );
+};
diff --git a/src/components/ProductsList/index.ts b/src/components/ProductsList/index.ts
new file mode 100644
index 00000000000..09f9887f278
--- /dev/null
+++ b/src/components/ProductsList/index.ts
@@ -0,0 +1 @@
+export * from './ProductsList';
diff --git a/src/components/SecondaryButton/SecondaryButton.module.scss b/src/components/SecondaryButton/SecondaryButton.module.scss
new file mode 100644
index 00000000000..43daacf6100
--- /dev/null
+++ b/src/components/SecondaryButton/SecondaryButton.module.scss
@@ -0,0 +1,45 @@
+@import '../../styles/global';
+
+.button {
+ background: none;
+ border: 1px solid $colors-icons;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: $colors-primary;
+ stroke: currentColor;
+ padding: 0;
+
+ &:disabled {
+ color: $colors-icons;
+ border-color: $colors-elements;
+ cursor: auto;
+ stroke: currentColor;
+ }
+
+ &:hover:not(:disabled, .active) {
+ border: 1px solid $colors-primary;
+ cursor: pointer;
+ }
+}
+
+.active {
+ color: $colors-white;
+ background-color: $colors-primary;
+ border-color: $colors-primary;
+}
+
+.s {
+ width: 32px;
+ height: 32px;
+}
+
+.m {
+ width: 40px;
+ height: 40px;
+}
+
+.l {
+ width: 48px;
+ height: 48px;
+}
diff --git a/src/components/SecondaryButton/SecondaryButton.tsx b/src/components/SecondaryButton/SecondaryButton.tsx
new file mode 100644
index 00000000000..311b5d00544
--- /dev/null
+++ b/src/components/SecondaryButton/SecondaryButton.tsx
@@ -0,0 +1,38 @@
+import React, { ButtonHTMLAttributes, ReactNode } from 'react';
+import styles from './SecondaryButton.module.scss';
+import classNames from 'classnames';
+
+type ButtonSize = 's' | 'm' | 'l';
+
+type Props = {
+ children: ReactNode;
+ className?: string;
+ isActive?: boolean;
+ size?: ButtonSize;
+} & ButtonHTMLAttributes
+ 
+
+
+
+
+ );
+};
diff --git a/src/components/categoryCard/index.ts b/src/components/categoryCard/index.ts
new file mode 100644
index 00000000000..a72d92435c8
--- /dev/null
+++ b/src/components/categoryCard/index.ts
@@ -0,0 +1 @@
+export * from './CategoryCard';
diff --git a/src/components/icons/Chevron/Chevron.module.scss b/src/components/icons/Chevron/Chevron.module.scss
new file mode 100644
index 00000000000..110fc8cb6c5
--- /dev/null
+++ b/src/components/icons/Chevron/Chevron.module.scss
@@ -0,0 +1,28 @@
+.icon {
+ width: 6px;
+ height: 10px;
+
+ path {
+ fill: none;
+ stroke: inherit;
+ stroke-width: 1.5;
+ stroke-linecap: round;
+ stroke-linejoin: round;
+ }
+}
+
+.right {
+ transform: rotate(0deg);
+}
+
+.left {
+ transform: rotate(180deg);
+}
+
+.up {
+ transform: rotate(-90deg);
+}
+
+.down {
+ transform: rotate(90deg);
+}
diff --git a/src/components/icons/Chevron/Chevron.tsx b/src/components/icons/Chevron/Chevron.tsx
new file mode 100644
index 00000000000..d080d0b5197
--- /dev/null
+++ b/src/components/icons/Chevron/Chevron.tsx
@@ -0,0 +1,19 @@
+import styles from './Chevron.module.scss';
+
+type Props = {
+ direction: 'left' | 'right' | 'up' | 'down';
+ className?: string;
+};
+
+export const Chevron = ({ direction, className }: Props) => {
+ return (
+
+ );
+};
diff --git a/src/components/icons/Chevron/index.ts b/src/components/icons/Chevron/index.ts
new file mode 100644
index 00000000000..fae5d54c933
--- /dev/null
+++ b/src/components/icons/Chevron/index.ts
@@ -0,0 +1 @@
+export * from './Chevron';
diff --git a/src/components/icons/IconWithBadge/IconWithBadge.module.scss b/src/components/icons/IconWithBadge/IconWithBadge.module.scss
new file mode 100644
index 00000000000..45158f8176f
--- /dev/null
+++ b/src/components/icons/IconWithBadge/IconWithBadge.module.scss
@@ -0,0 +1,35 @@
+@import '../../../styles/global';
+
+.wrapper {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ transition: transform 0.3s ease;
+}
+
+.icon {
+ display: block;
+}
+
+.badge {
+ position: absolute;
+ top: -6px;
+ right: -6px;
+ width: 14px;
+ height: 14px;
+ border-radius: 50%;
+ background-color: $colors-red;
+ border: 1px solid $colors-white;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ font-family: Mont, sans-serif;
+ font-weight: 700;
+ font-size: 9px;
+ line-height: 1;
+ color: $colors-white;
+ z-index: 1;
+}
diff --git a/src/components/icons/IconWithBadge/IconWithBadge.tsx b/src/components/icons/IconWithBadge/IconWithBadge.tsx
new file mode 100644
index 00000000000..a3aff1a396e
--- /dev/null
+++ b/src/components/icons/IconWithBadge/IconWithBadge.tsx
@@ -0,0 +1,22 @@
+import styles from './IconWithBadge.module.scss';
+import React from 'react';
+
+type Props = {
+ icon: string;
+ alt: string;
+ badgeCount?: number;
+};
+
+export const IconWithBadge: React.FC{title}
+{count} models
+
+ 
+
+ {badgeCount > 0 && {badgeCount}}
+
+ );
+};
diff --git a/src/components/icons/IconWithBadge/index.ts b/src/components/icons/IconWithBadge/index.ts
new file mode 100644
index 00000000000..aa66ca0bf79
--- /dev/null
+++ b/src/components/icons/IconWithBadge/index.ts
@@ -0,0 +1 @@
+export * from './IconWithBadge';
diff --git a/src/features/constants/categories.ts b/src/features/constants/categories.ts
new file mode 100644
index 00000000000..bca02ee7f23
--- /dev/null
+++ b/src/features/constants/categories.ts
@@ -0,0 +1,31 @@
+import { CategoryConfig } from '../types/category';
+
+export const categories: CategoryConfig[] = [
+ {
+ key: 'phones',
+ title: 'Mobile phones',
+ link: '/phones',
+ color: '#6D6474',
+ image: '/img/category-phones.webp',
+ height: '100%',
+ transform: 'translate(20%, 10%)',
+ },
+ {
+ key: 'tablets',
+ title: 'Tablets',
+ link: '/tablets',
+ color: '#8D8D92',
+ image: '/img/category-tablets.png',
+ height: '140%',
+ transform: 'translate(40%, 30%)',
+ },
+ {
+ key: 'accessories',
+ title: 'Accessories',
+ link: '/accessories',
+ color: '#D53C51',
+ image: '/img/category-accessories.png',
+ height: '60%',
+ transform: 'translate(40%, 30%)',
+ },
+];
diff --git a/src/features/constants/productColors.ts b/src/features/constants/productColors.ts
new file mode 100644
index 00000000000..2f6b8ea0838
--- /dev/null
+++ b/src/features/constants/productColors.ts
@@ -0,0 +1,27 @@
+export const productColors: Record
+ 
+
+ Back to Home
+
+
+ );
+ }
+
+ return (
+
+ Your cart is empty
+
+ setIsCheckoutModalOpen(false)}
+ onConfirm={() => {
+ dispatch(clearCart());
+ setIsCheckoutModalOpen(false);
+ }}
+ />
+ )}
+
+ );
+};
diff --git a/src/modules/CartPage/index.ts b/src/modules/CartPage/index.ts
new file mode 100644
index 00000000000..90c010237a0
--- /dev/null
+++ b/src/modules/CartPage/index.ts
@@ -0,0 +1 @@
+export * from './CartPage';
diff --git a/src/modules/FavoritesPage/FavoritesPage.module.scss b/src/modules/FavoritesPage/FavoritesPage.module.scss
new file mode 100644
index 00000000000..955596497c0
--- /dev/null
+++ b/src/modules/FavoritesPage/FavoritesPage.module.scss
@@ -0,0 +1,33 @@
+@import '../../styles/global';
+
+.favoritesPage {
+ margin-top: 24px;
+
+ @include pageGrid;
+
+ &__wrapper {
+ grid-column: 1 / -1;
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+ }
+
+ &__textBlock {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ }
+
+ &__title {
+ margin: 0;
+ color: $colors-primary;
+
+ @include h1-text;
+ }
+
+ &__count {
+ @include body-text;
+
+ color: $colors-secondary;
+ }
+}
diff --git a/src/modules/FavoritesPage/FavoritesPage.tsx b/src/modules/FavoritesPage/FavoritesPage.tsx
new file mode 100644
index 00000000000..40ff93d001d
--- /dev/null
+++ b/src/modules/FavoritesPage/FavoritesPage.tsx
@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { RootState } from '../../app/store';
+import { Product } from '../../features/types/productType';
+import { getProducts } from '../../api/products';
+import styles from './FavoritesPage.module.scss';
+import { Breadcrumbs } from '../../components/Breadcrumbs';
+import { Loader } from '../../components/Loader';
+import { ProductList } from '../../components/ProductsList';
+
+export const FavoritesPage = () => {
+ const [products, setProducts] = useState
+
+
+
+ Cart
+
+ {cartProducts.map(product => (
+ dispatch(removeInCart(product.itemId))}
+ onDecrease={() => dispatch(minusQuantity(product.itemId))}
+ onIncrease={() => dispatch(increaseQuantity(product.itemId))}
+ />
+ ))}
+
+
+
+
+ {isCheckoutModalOpen && (
+ ${totalSum}
+Total for {cartItems} items
+ + +{error}
; + } + + return ( +
+
+ );
+};
diff --git a/src/modules/FavoritesPage/index.ts b/src/modules/FavoritesPage/index.ts
new file mode 100644
index 00000000000..b3a884b1889
--- /dev/null
+++ b/src/modules/FavoritesPage/index.ts
@@ -0,0 +1 @@
+export * from './FavoritesPage';
diff --git a/src/modules/HomePage/HomePage.module.scss b/src/modules/HomePage/HomePage.module.scss
new file mode 100644
index 00000000000..cc6f8fc85d0
--- /dev/null
+++ b/src/modules/HomePage/HomePage.module.scss
@@ -0,0 +1,67 @@
+@import '../../styles/global';
+
+.home {
+ margin-top: 56px;
+
+ @include pageGrid;
+
+ &__titleHiden {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ overflow: hidden;
+ clip-path: inset(50%);
+ white-space: nowrap;
+ margin: 0;
+ }
+
+ &__title {
+ grid-column: 1 / -1;
+ color: $colors-primary;
+
+ @include h1-text;
+ }
+
+ &__content {
+ grid-column: 1 / -1;
+ display: flex;
+ flex-direction: column;
+ gap: 56px;
+
+ @include onTablet {
+ gap: 64px;
+ }
+
+ @include onDesktop {
+ gap: 80px;
+ }
+ }
+
+ &__banner {
+ @include pageGrid;
+ }
+
+ &__categories {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ }
+
+ &__categoriesTitle {
+ margin: 0;
+ color: $colors-primary;
+
+ @include h2-text;
+ }
+
+ &__categoriesList {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ @include onTablet {
+ flex-direction: row;
+ align-items: stretch;
+ }
+ }
+}
diff --git a/src/modules/HomePage/HomePage.tsx b/src/modules/HomePage/HomePage.tsx
new file mode 100644
index 00000000000..b49587273b6
--- /dev/null
+++ b/src/modules/HomePage/HomePage.tsx
@@ -0,0 +1,108 @@
+import styles from './HomePage.module.scss';
+import { BannerSlider } from '../../components/BannerSlider';
+import { useEffect, useMemo, useState } from 'react';
+import { Product } from '../../features/types/productType';
+import { getProducts } from '../../api/products';
+import { Loader } from '../../components/Loader';
+import { ProductsCarousel } from '../../components/ProductsCarousel';
+import { CategoryCard } from '../../components/categoryCard';
+import { categories } from '../../features/constants/categories';
+
+export const HomePage = () => {
+ const [products, setProducts] = useState
+
+
+
+
+ {favoriteProducts.length === 0 ? (
+ Favorites
++ {favoriteItems.length} items +
+Nothing here yet
+ ) : ( +
+
+ );
+};
diff --git a/src/modules/HomePage/index.ts b/src/modules/HomePage/index.ts
new file mode 100644
index 00000000000..11e53da674c
--- /dev/null
+++ b/src/modules/HomePage/index.ts
@@ -0,0 +1 @@
+export * from './HomePage';
diff --git a/src/modules/NotFoundPage/NotFoundPage.module.scss b/src/modules/NotFoundPage/NotFoundPage.module.scss
new file mode 100644
index 00000000000..c398da655b8
--- /dev/null
+++ b/src/modules/NotFoundPage/NotFoundPage.module.scss
@@ -0,0 +1,35 @@
+@import '../../styles/global';
+
+.page {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ align-items: center;
+ justify-content: center;
+ margin-top: 150px;
+
+ &__img {
+ width: 250px;
+ height: auto;
+ }
+
+ &__title {
+ color: $colors-primary;
+ margin: 0;
+
+ @include h2-text;
+ }
+
+ &__link {
+ color: $colors-secondary;
+ margin: 0;
+
+ @include body-text;
+
+ transition: color 0.3s ease;
+
+ &:hover {
+ color: $colors-primary;
+ }
+ }
+}
diff --git a/src/modules/NotFoundPage/NotFoundPage.tsx b/src/modules/NotFoundPage/NotFoundPage.tsx
new file mode 100644
index 00000000000..1bcb1d97e25
--- /dev/null
+++ b/src/modules/NotFoundPage/NotFoundPage.tsx
@@ -0,0 +1,18 @@
+import styles from './NotFoundPage.module.scss';
+import { NavLink } from 'react-router-dom';
+
+export const NotFoundPage = () => {
+ return (
+ Product Catalog
+Welcome to Nice Gadgets store!
+
+
+
+ {loading &&
+
+
+
+
+
+
+
+
+ )}
+
+
+
+ )}
+
+ {!loading && !error && (
+ <>
+ Something went wrong
+ +Shop by category
+
+ {categories.map(category => (
+
+
+ 
+
+ Back to Home page
+
+
+ );
+};
diff --git a/src/modules/NotFoundPage/index.ts b/src/modules/NotFoundPage/index.ts
new file mode 100644
index 00000000000..6197aa75aa8
--- /dev/null
+++ b/src/modules/NotFoundPage/index.ts
@@ -0,0 +1 @@
+export * from './NotFoundPage';
diff --git a/src/modules/ProductDetailsPage/ProductDetailsPage.module.scss b/src/modules/ProductDetailsPage/ProductDetailsPage.module.scss
new file mode 100644
index 00000000000..9f7d7ea576f
--- /dev/null
+++ b/src/modules/ProductDetailsPage/ProductDetailsPage.module.scss
@@ -0,0 +1,292 @@
+@import '../../styles/global';
+
+.productDetails {
+ margin-top: 24px;
+ row-gap: 40px;
+
+ @include pageGrid;
+
+ &__wrapper {
+ grid-column: 1 / -1;
+ display: flex;
+ flex-direction: column;
+ gap: 56px;
+
+ @include onTablet {
+ gap: 64px;
+ }
+
+ @include onDesktop {
+ gap: 80px;
+ }
+ }
+
+ &__header {
+ grid-column: 1 / -1;
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+ }
+
+ &__headerText {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ }
+
+ &__back {
+ display: inline-flex;
+ align-items: center;
+ gap: 9px;
+ width: fit-content;
+ padding: 0;
+ border: none;
+ background: transparent;
+ cursor: pointer;
+ }
+
+ &__backIcon {
+ display: inline-flex;
+ stroke: $colors-primary;
+ }
+
+ &__backText {
+ margin: 0;
+
+ @include body-text;
+
+ color: $colors-primary;
+ }
+
+ &__title {
+ margin: 0;
+ color: $colors-primary;
+
+ @include h1-text;
+ }
+
+ &__hero {
+ row-gap: 16px;
+
+ @include pageGrid;
+ }
+
+ &__gallery {
+ min-width: 0;
+ grid-column: 1 / -1;
+
+
+ @include onTablet {
+ grid-column: 1 / 7;
+ }
+
+ @include onDesktop {
+ grid-column: 1 / 12;
+ }
+ }
+
+ &__sidebar {
+ min-width: 0;
+ grid-column:1 / -1;
+
+ @include onTablet {
+ grid-column: 8 / -1;
+ }
+
+ @include onDesktop {
+ grid-column: 14 / 20;
+ }
+ }
+
+ &__options {
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+ }
+
+ &__summary {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ }
+
+ &__priceBlock {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ }
+
+ &__priceDiscount {
+ color: $colors-primary;
+
+ @include h3-text;
+ }
+
+ &__priceRegular {
+ color: $colors-secondary;
+ font-weight: 600;
+ font-size: 22px;
+ line-height: 1.4;
+ text-decoration: line-through;
+ text-decoration-color: $colors-secondary;
+ text-decoration-thickness: 2px;
+ }
+
+ &__shortSpecs {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ }
+
+ &__shortSpec {
+ display: flex;
+ justify-content: space-between;
+ gap: 16px;
+ }
+
+ &__shortSpecLabel {
+ margin: 0;
+ color: $colors-secondary;
+
+ @include body-text;
+ }
+
+ &__shortSpecValue {
+ margin: 0;
+ color: $colors-primary;
+ text-align: right;
+
+ @include body-text;
+ }
+
+ &__content {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 40px;
+
+ @include onDesktop {
+ grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
+ gap: 64px;
+ }
+ }
+
+ &__about,
+ &__tech {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ }
+
+ &__divider {
+ width: 100%;
+ height: 1px;
+ background-color: $colors-elements;
+ }
+
+ &__sectionTitle {
+ margin: 0;
+ color: $colors-primary;
+
+ @include h2-text;
+ }
+
+ &__descriptionBlock {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ }
+
+ &__descriptionTitle {
+ margin: 0;
+ color: $colors-primary;
+
+ @include h3-text;
+ }
+
+ &__descriptionText {
+ margin: 0;
+ color: $colors-secondary;
+
+ @include body-text;
+ }
+
+ &__techList {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ }
+
+ &__techRow {
+ display: flex;
+ justify-content: space-between;
+ gap: 16px;
+ }
+
+ &__techLabel {
+ margin: 0;
+ color: $colors-secondary;
+
+ @include body-text;
+ }
+
+ &__techValue {
+ margin: 0;
+ color: $colors-primary;
+ text-align: right;
+
+ @include body-text;
+ }
+
+ &__recommended {
+ display: flex;
+ flex-direction: column;
+ }
+
+ &__state {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 240px;
+ }
+
+ &__stateText {
+ margin: 0;
+ color: $colors-primary;
+
+ @include h3-text;
+ }
+}
+
+.notFound {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ align-items: center;
+ justify-content: center;
+ margin-top: 150px;
+
+ &__img {
+ width: 200px;
+ height: auto;
+ }
+
+ &__title {
+ color: $colors-primary;
+ margin: 0;
+
+ @include h2-text;
+ }
+
+ &__link {
+ color: $colors-secondary;
+ margin: 0;
+
+ @include body-text;
+
+ transition: color 0.3s ease;
+
+ &:hover {
+ color: $colors-primary;
+ }
+ }
+}
diff --git a/src/modules/ProductDetailsPage/ProductDetailsPage.tsx b/src/modules/ProductDetailsPage/ProductDetailsPage.tsx
new file mode 100644
index 00000000000..821688021e0
--- /dev/null
+++ b/src/modules/ProductDetailsPage/ProductDetailsPage.tsx
@@ -0,0 +1,295 @@
+import { NavLink, useNavigate, useParams } from 'react-router-dom';
+import { Product, ProductCategory } from '../../features/types/productType';
+import { useEffect, useMemo, useState } from 'react';
+import { ProductDetails } from '../../features/types/productDetailsType';
+import { getProductDetails, getProducts } from '../../api/products';
+import { Loader } from '../../components/Loader';
+import styles from './ProductDetailsPage.module.scss';
+import { ProductGallery } from '../../components/ProductGallery';
+import { ProductsCarousel } from '../../components/ProductsCarousel';
+import { Breadcrumbs } from '../../components/Breadcrumbs';
+import { Chevron } from '../../components/icons/Chevron';
+import { ProductActions } from '../../components/ProductActions';
+import { ProductOptions } from '../../components/ProductOptions';
+
+const isProductCategory = (value: string): value is ProductCategory =>
+ value === 'phones' || value === 'tablets' || value === 'accessories';
+
+const normalizeColorForUrl = (color: string) =>
+ color.toLowerCase().replace(/\s+/g, '-');
+
+export const ProductDetailsPage = () => {
+ const { category, productId } = useParams<{
+ category: string;
+ productId: string;
+ }>();
+
+ const [products, setProducts] = useState
+ Page not found
+
+
+ );
+ }
+
+ if (!product || !category) {
+ return (
+
+
+
+
+ {detailsError}
+
+ 
+
+ Back to Home
+
+
+ );
+ }
+
+ const specs = [
+ { label: 'Screen', value: product.screen, isShort: true },
+ { label: 'Resolution', value: product.resolution, isShort: true },
+ { label: 'Processor', value: product.processor, isShort: true },
+ { label: 'RAM', value: product.ram, isShort: true },
+ { label: 'Camera', value: product.camera, isShort: false },
+ { label: 'Zoom', value: product.zoom, isShort: false },
+ { label: 'Cell', value: product.cell.join(', '), isShort: false },
+ ];
+
+ const shortSpecs = specs.filter(spec => spec.isShort);
+
+ const buildVariantLink = ({
+ color = product.color,
+ capacity = product.capacity,
+ }: {
+ color?: string;
+ capacity?: string;
+ }) => {
+ return `/${category}/${product.namespaceId}-${capacity.toLowerCase()}-${normalizeColorForUrl(color)}`;
+ };
+
+ return (
+
+ Product not found
+
+
+ );
+};
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/ProductsPage/ProductsPage.module.scss b/src/modules/ProductsPage/ProductsPage.module.scss
new file mode 100644
index 00000000000..68817129abd
--- /dev/null
+++ b/src/modules/ProductsPage/ProductsPage.module.scss
@@ -0,0 +1,88 @@
+@import '../../styles/global';
+
+.productPage {
+ margin-top: 24px;
+ min-height: 100vh;
+
+ @include pageGrid;
+
+ &__wrapper {
+ grid-column: 1 / -1;
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+ flex: 1;
+ }
+
+ &__textBlock {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ }
+
+ &__title {
+ margin: 0;
+
+ @include h1-text;
+ }
+
+ &__count {
+ margin: 0;
+
+ @include body-text;
+
+ color: $colors-secondary;
+ }
+
+ &__main {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ flex: 1;
+ }
+
+ &__controls {
+ @include innerGrid;
+ }
+
+ &__controlsSort {
+ grid-column: span 2;
+
+
+ @include onTablet {
+ grid-column: span 4;
+ }
+ }
+
+ &__controlsPerPage {
+ grid-column: span 2;
+
+ @include onTablet {
+ grid-column: span 3;
+ }
+ }
+
+ &__pagination {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ gap: 16px;
+ }
+
+ &__paginationButtons {
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+ min-width: 0;
+ }
+
+ &__dots {
+ width: 20px;
+ height: 32px;
+ display: flex;
+ align-items: flex-end;
+ justify-content: center;
+ font-size: 12px;
+ }
+}
diff --git a/src/modules/ProductsPage/ProductsPage.tsx b/src/modules/ProductsPage/ProductsPage.tsx
new file mode 100644
index 00000000000..b1c0428363a
--- /dev/null
+++ b/src/modules/ProductsPage/ProductsPage.tsx
@@ -0,0 +1,276 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Product, ProductCategory } from '../../features/types/productType';
+import { getProducts } from '../../api/products';
+import styles from './ProductsPage.module.scss';
+import { useSearchParams } from 'react-router-dom';
+import { Chevron } from '../../components/icons/Chevron';
+import { Dropdown } from '../../components/DropDown';
+import { Breadcrumbs } from '../../components/Breadcrumbs';
+import { SecondaryButton } from '../../components/SecondaryButton';
+import { Loader } from '../../components/Loader';
+import { ProductList } from '../../components/ProductsList';
+
+type Props = {
+ category: ProductCategory;
+};
+
+type Sort = 'age' | 'title' | 'price';
+
+type PerPage = '4' | '8' | '16' | 'all';
+
+const DEFAULT_PER_PAGE: PerPage = 'all';
+
+const categoryTitles: Record
+
+
+
+
+
+ {product.name}
+
+
+
+
+
+
+
+ {!recommendedLoading && !recommendedError && recommended.length > 0 && (
+
+
+ )}
+
+
+
+
+
+
+
+
+ About
+ + + {product.description.map(section => ( +
+
+ ))}
+ + {section.title} +
++ {section.text} +
+
+
+ Tech specs
+ + +
+ {specs.map(spec => (
+
+
+
+ ))}
+ + {spec.label} +
++ {spec.value} +
+
+
+ );
+ }
+
+ if (!categoryProducts.length) {
+ return (
+ Something went wrong
+ +
+
+ );
+ }
+
+ return (
+
+
+
+
+
+ {title}
+0 models
++ {emptyMessages[category]} +
+
+
+ );
+};
diff --git a/src/modules/ProductsPage/index.ts b/src/modules/ProductsPage/index.ts
new file mode 100644
index 00000000000..8e350f20bf9
--- /dev/null
+++ b/src/modules/ProductsPage/index.ts
@@ -0,0 +1 @@
+export * from './ProductsPage';
diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss
new file mode 100644
index 00000000000..90e5c7b3481
--- /dev/null
+++ b/src/styles/fonts.scss
@@ -0,0 +1,31 @@
+@font-face {
+ font-family: Mont;
+ src: url('/fonts/Mont-Regular.otf') format('opentype');
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Mont;
+ src: url('/fonts/Mont-SemiBold.otf') format('opentype');
+ font-weight: 600;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Mont;
+ src: url('/fonts/Mont-Bold.otf') format('opentype');
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Mont;
+ src: url('/fonts/Mont-Bold.otf') format('opentype');
+ font-weight: 800;
+ font-style: normal;
+ font-display: swap;
+}
diff --git a/src/styles/global.scss b/src/styles/global.scss
new file mode 100644
index 00000000000..9b2c2044f6f
--- /dev/null
+++ b/src/styles/global.scss
@@ -0,0 +1,13 @@
+@import './fonts';
+@import './utils/vars';
+@import './utils/mixins';
+@import './utils/typography';
+
+html, body {
+ height: 100%;
+}
+
+body {
+ font-family: Mont, sans-serif;
+ margin: 0;
+}
diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss
new file mode 100644
index 00000000000..5944c1ebe6f
--- /dev/null
+++ b/src/styles/utils/_mixins.scss
@@ -0,0 +1,41 @@
+@mixin pageGrid {
+ display: grid;
+ column-gap: 16px;
+ grid-template-columns: repeat(4, 1fr);
+
+ @include onTablet {
+ grid-template-columns: repeat(12, 1fr);
+ }
+
+ @include onDesktop {
+ grid-template-columns: repeat(24, 1fr);
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+}
+
+@mixin innerGrid {
+ display: grid;
+ column-gap: 16px;
+ grid-template-columns: repeat(4, 1fr);
+
+ @include onTablet {
+ grid-template-columns: repeat(12, 1fr);
+ }
+
+ @include onDesktop {
+ grid-template-columns: repeat(24, 1fr);
+ }
+}
+
+@mixin onTablet {
+ @media (min-width: $tablet-min-width) {
+ @content;
+ }
+}
+
+@mixin onDesktop {
+ @media (min-width: $desktop-min-width) {
+ @content;
+ }
+}
diff --git a/src/styles/utils/typography.scss b/src/styles/utils/typography.scss
new file mode 100644
index 00000000000..09e6f6852aa
--- /dev/null
+++ b/src/styles/utils/typography.scss
@@ -0,0 +1,88 @@
+@import './mixins';
+
+@mixin h1-text {
+ font-family: Mont, sans-serif;
+ font-weight: 800;
+ font-size: 32px;
+ line-height: 41px;
+ letter-spacing: -0.01em;
+
+ @include onTablet {
+ font-size: 48px;
+ line-height: 56px;
+ }
+}
+
+@mixin h2-text {
+ font-family: Mont, sans-serif;
+ font-weight: 800;
+ font-size: 22px;
+ line-height: 31px;
+ letter-spacing: 0;
+
+ @include onTablet {
+ font-size: 32px;
+ line-height: 41px;
+ letter-spacing: -0.01em;
+ }
+}
+
+@mixin h3-text {
+ font-family: Mont, sans-serif;
+ font-weight: 700;
+ font-size: 20px;
+ line-height: 26px;
+ letter-spacing: 0;
+
+ @include onTablet {
+ font-weight: 800;
+ font-size: 22px;
+ line-height: 31px;
+ }
+}
+
+@mixin h4-text {
+ font-family: Mont, sans-serif;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 20px;
+ letter-spacing: 0;
+
+ @include onTablet {
+ font-size: 20px;
+ line-height: 26px;
+ }
+}
+
+@mixin uppercase-text {
+ font-family: Mont, sans-serif;
+ font-weight: 800;
+ font-size: 12px;
+ line-height: 11px;
+ letter-spacing: 0.04em;
+ text-transform: uppercase;
+}
+
+@mixin button-text {
+ font-family: Mont, sans-serif;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 21px;
+ letter-spacing: 0;
+}
+
+@mixin body-text {
+ font-family: Mont, sans-serif;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 21px;
+ letter-spacing: 0;
+}
+
+@mixin small-text {
+ font-family: Mont, sans-serif;
+ font-weight: 700;
+ font-size: 12px;
+ line-height: 15px;
+ letter-spacing: 0;
+}
diff --git a/src/styles/utils/vars.scss b/src/styles/utils/vars.scss
new file mode 100644
index 00000000000..c59722c973b
--- /dev/null
+++ b/src/styles/utils/vars.scss
@@ -0,0 +1,22 @@
+@import './mixins';
+
+$tablet-min-width: 640px;
+$desktop-min-width: 1199px;
+$colors-primary: #313237;
+$colors-secondary: #89939A;
+$colors-icons: #B4BDC3;
+$colors-elements: #E2E6E9;
+$colors-hover-bg: #FAFBFC;
+$colors-white: #fff;
+$colors-green: #27AE60;
+$colors-red: #EB5757;
+
+:root {
+ --header-height: 48px;
+}
+
+@include onDesktop {
+ :root {
+ --header-height: 64px;
+ }
+}
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 00000000000..1323cdac34c
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,8 @@
+{
+ "rewrites": [
+ {
+ "source": "/(.*)",
+ "destination": "/index.html"
+ }
+ ]
+}
+
+
+
+
+ {title}
+{count} models
+
+
+
+ {showPagination && (
+
+
+
+
+
+
+
+
+ setPage(safePage - 1)}
+ disabled={safePage === 1}
+ >
+
+
+ setPage(safePage + 1)}
+ disabled={safePage === totalPages}
+ >
+
+
+ )}
+
+ {visiblePages.map((item, index) =>
+ typeof item === 'string' ? (
+
+ ...
+
+ ) : (
+ setPage(item)}
+ isActive={item === safePage}
+ >
+ {item}
+
+ ),
+ )}
+
+
+