+
+ 
+
+
+
+ );
+};
diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss
new file mode 100644
index 00000000000..66809b45e45
--- /dev/null
+++ b/src/components/Footer/Footer.module.scss
@@ -0,0 +1,93 @@
+@import '../../styles/utils';
+
+.footer {
+ border-top: 1px solid #E2E6E9;
+ background-color: $white;
+ padding: 32px 0;
+ margin-top: auto;
+}
+
+.content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+
+ @media (max-width: 640px) {
+ flex-direction: column;
+ gap: 24px;
+ }
+}
+
+.logo {
+ display: flex;
+ align-items: center;
+}
+
+.links {
+ display: flex;
+ gap: 106px;
+
+ a {
+ text-decoration: none;
+ color: $secondary;
+ font-weight: 700;
+ font-size: 12px;
+ text-transform: uppercase;
+ letter-spacing: 0.04em;
+ transition: color 0.3s;
+
+ &:hover {
+ color: $primary;
+ }
+ }
+
+ @media (max-width: 640px) {
+ flex-direction: column;
+ align-items: center;
+ gap: 16px;
+ }
+}
+
+.arrowButton {
+ width: 32px;
+ height: 32px;
+ border: 1px solid #B4BDC3;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ transition: all 0.3s;
+ background-color: transparent;
+ padding: 0;
+
+ img {
+ width: 14px;
+ height: 14px;
+ object-fit: contain;
+ }
+}
+
+.backToTop {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 16px;
+ cursor: pointer;
+ background: none;
+ border: none;
+
+ color: $secondary;
+ font-weight: 600;
+ font-size: 12px;
+ transition: color 0.3s;
+
+ &:hover {
+ color: $primary;
+
+ .arrowButton {
+ border-color: $primary;
+ color: $primary;
+ }
+ }
+}
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
new file mode 100644
index 00000000000..83af5002b59
--- /dev/null
+++ b/src/components/Footer/Footer.tsx
@@ -0,0 +1,60 @@
+import { Link } from 'react-router-dom';
+import styles from './Footer.module.scss';
+
+export const Footer = () => {
+ const handleScrollToTop = () => {
+ window.scrollTo({
+ top: 0,
+ behavior: 'smooth',
+ });
+ };
+
+ return (
+
+ );
+};
diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss
new file mode 100644
index 00000000000..121a0058376
--- /dev/null
+++ b/src/components/Header/Header.module.scss
@@ -0,0 +1,242 @@
+@import '../../styles/utils';
+
+$header-height-desktop: 64px;
+$header-height-mobile: 48px;
+
+.header {
+ position: sticky;
+ top: 0;
+ z-index: 100;
+ background-color: $white;
+ border-bottom: 1px solid #E2E6E9;
+ height: 64px;
+ display: flex;
+ align-items: center;
+ transition: height 0.3s ease;
+
+ @media (max-width: 1199px) {
+ height: $header-height-mobile;
+ }
+}
+
+.logo {
+ display: flex;
+ align-items: center;
+ margin-right: 20px;
+ height: 100%;
+}
+
+.container {
+ width: 100%;
+ padding-left: 24px;
+ padding-right: 0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ height: 100%;
+}
+
+.left, .right {
+ display: flex;
+ align-items: center;
+ gap: 32px;
+ height: 100%;
+}
+
+.nav {
+ display: flex;
+ gap: 32px;
+ height: 100%;
+
+ @media (max-width: 640px) {
+ display: none;
+ }
+}
+
+.link {
+ text-decoration: none;
+ color: $secondary;
+ font-weight: 700;
+ font-size: 12px;
+ text-transform: uppercase;
+ letter-spacing: 0.04em;
+ transition: color 0.3s;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ box-sizing: border-box;
+
+ &:hover {
+ color: $primary;
+ }
+
+ &.is-active {
+ color: $primary;
+ border-bottom: 3px solid $primary;
+ }
+}
+
+.iconButton {
+ width: $header-height-desktop;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-left: 1px solid #E2E6E9;
+ transition: background-color 0.3s;
+ padding: 0;
+ box-sizing: border-box;
+ border-bottom: 3px solid transparent;
+
+ &:hover {
+ background-color: $hover-bg;
+ }
+
+ &.is-active {
+ color: $primary;
+ border-bottom: 3px solid $primary;
+ }
+
+ @media (max-width: 1199px) {
+ width: $header-height-mobile;
+ }
+}
+
+.icons {
+ display: flex;
+ height: 100%;
+
+ @media (max-width: 640px) {
+ display: none;
+ }
+}
+
+.iconWrapper {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+
+ @media (max-width: 640px) {
+ width: 30%;
+ height: 80%;
+ }
+}
+
+.iconBadge {
+ position: absolute;
+ top: 14px;
+ right: 14px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 14px;
+ height: 14px;
+ border-radius: 50%;
+ background-color: $accent;
+ border: 1px solid $white;
+ color: $white;
+ font-size: 9px;
+ font-weight: 700;
+ line-height: 10px;
+
+ @media (max-width: 1199px) {
+ top: 8px;
+ right: 8px;
+ }
+}
+
+.menuButton {
+ display: none;
+ width: $header-height-mobile;
+ height: 100%;
+ background: transparent;
+ border: none;
+ border-left: 1px solid #E2E6E9;
+ cursor: pointer;
+ align-items: center;
+ justify-content: center;
+
+ @media (max-width: 640px) {
+ display: flex;
+ }
+}
+
+.mobileMenu {
+ position: fixed;
+ top: $header-height-mobile;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ background-color: $white;
+ z-index: 99;
+ transform: translateX(-100%);
+ transition: transform 0.3s ease-in-out;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ border-top: 1px solid #E2E6E9;
+ padding-top: 24px;
+
+ &.isOpen {
+ transform: translateX(0);
+ }
+}
+
+.mobileNav {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ gap: 16px;
+
+ .link {
+ width: 100%;
+ height: 27px;
+ justify-content: center;
+ border-bottom: none;
+
+ span {
+ display: flex;
+ align-items: center;
+ height: 100%;
+ border-bottom: 3px solid transparent;
+ box-sizing: border-box;
+ }
+
+ &.is-active {
+ color: $primary;
+ border-bottom: none;
+
+ span {
+ border-bottom: 3px solid $primary;
+ }
+ }
+ }
+}
+
+.mobileIcons {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ margin-top: auto;
+ border-top: 1px solid #E2E6E9;
+
+ .iconButton {
+ width: 50%;
+ height: 64px;
+ border-left: none;
+ border-right: 1px solid #E2E6E9;
+
+ &:last-child {
+ border-right: none;
+ }
+ }
+
+ &.is-active {
+ color: $primary;
+ border-bottom: 3px solid $primary;
+ }
+}
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
new file mode 100644
index 00000000000..20e2fad67e3
--- /dev/null
+++ b/src/components/Header/Header.tsx
@@ -0,0 +1,133 @@
+import { NavLink, useLocation } from 'react-router-dom';
+import classNames from 'classnames';
+import styles from './Header.module.scss';
+import { useFavorites } from '../../modules/shared/context/FavoritesContext';
+import { useCart } from '../../modules/shared/context/CartContext';
+import { useEffect, useState } from 'react';
+
+const getLinkClass = ({ isActive }: { isActive: boolean }) =>
+ classNames(styles.link, { [styles['is-active']]: isActive });
+
+const getIconClass = ({ isActive }: { isActive: boolean }) =>
+ classNames(styles.iconButton, { [styles['is-active']]: isActive });
+
+export const Header = () => {
+ const { favorites } = useFavorites();
+ const { totalCount } = useCart();
+ const [isMenuOpen, setIsMenuOpen] = useState(false);
+ const location = useLocation();
+
+ useEffect(() => {
+ setIsMenuOpen(false);
+ }, [location]);
+
+ useEffect(() => {
+ if (isMenuOpen) {
+ document.body.style.overflow = 'hidden';
+ } else {
+ document.body.style.overflow = '';
+ }
+ }, [isMenuOpen]);
+
+ return (
+
+
+
+
+ 
+
+
+
+ {categoryName}
+
+
+ {lastItem && (
+ <>
+
+
+
+
+ {lastItem}
+
+ )}
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+ {favorites.length > 0 && (
+ {favorites.length}
+ )}
+
+
+ {favorites.length > 0 && (
+ {favorites.length}
+ )}
+
+ 
+ {totalCount > 0 && (
+ {totalCount}
+ )}
+
+
+ {totalCount > 0 && (
+ {totalCount}
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+ {favorites.length > 0 && (
+ {favorites.length}
+ )}
+
+
+ {favorites.length > 0 && (
+ {favorites.length}
+ )}
+
+ 
+ {totalCount > 0 && (
+ {totalCount}
+ )}
+
+
+ {totalCount > 0 && (
+ {totalCount}
+ )}
+
+
+
+);
diff --git a/src/components/ScrollToTop.tsx b/src/components/ScrollToTop.tsx
new file mode 100644
index 00000000000..2831f507010
--- /dev/null
+++ b/src/components/ScrollToTop.tsx
@@ -0,0 +1,24 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+export const ScrollToTop = () => {
+ const { pathname } = useLocation();
+
+ useEffect(() => {
+ // 1. Пытаемся скроллить само окно (на всякий случай)
+ window.scrollTo({ top: 0, behavior: 'smooth' });
+
+ // 2. Ищем элементы, которые могут быть контейнерами скролла в твоем App.tsx
+ // Мы пробуем достучаться до .section или .App, которые у тебя в верстке
+ const scrollableContainers = document.querySelectorAll('.section, .App, html, body');
+
+ scrollableContainers.forEach(el => {
+ el.scrollTo({
+ top: 0,
+ behavior: 'smooth'
+ });
+ });
+ }, [pathname]);
+
+ return null;
+};
diff --git a/src/hooks/useLocalStorage.ts b/src/hooks/useLocalStorage.ts
new file mode 100644
index 00000000000..c3c3c40ca44
--- /dev/null
+++ b/src/hooks/useLocalStorage.ts
@@ -0,0 +1,22 @@
+import { useState } from 'react';
+
+export function useLocalStorage
+
+
+
+ );
+};
diff --git a/src/modules/CartPage/components/CartItem.module.scss b/src/modules/CartPage/components/CartItem.module.scss
new file mode 100644
index 00000000000..8e888d1cd56
--- /dev/null
+++ b/src/modules/CartPage/components/CartItem.module.scss
@@ -0,0 +1,95 @@
+@import '../../../styles/utils';
+
+.cartItem {
+ display: grid;
+ grid-template-columns: 24px 80px 1fr 120px 80px;
+ align-items: center;
+ gap: 16px;
+
+ padding: 24px;
+ border: 1px solid #E2E6E9;
+ border-radius: 8px;
+ background: $white;
+ margin-bottom: 16px;
+
+ @media (max-width: 640px) {
+ grid-template-columns: 1fr;
+ text-align: center;
+ gap: 24px;
+ }
+}
+
+.removeButton {
+ background: none;
+ border: none;
+ color: #B4BDC3;
+ font-size: 24px;
+ cursor: pointer;
+
+ &:hover {
+ color: $primary;
+ }
+}
+
+.imageLink {
+ width: 80px;
+ height: 80px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.image {
+ max-width: 100%;
+ max-height: 100%;
+ object-fit: contain;
+}
+
+.nameLink {
+ color: $primary;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 21px;
+ display: -webkit-box;
+ overflow: hidden;
+}
+
+.quantityControls {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100px;
+}
+
+.controlButton {
+ width: 32px;
+ height: 32px;
+ border: 1px solid #E2E6E9;
+ background: $white;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+
+ &:hover:not(.disabled) {
+ border-color: $primary;
+ }
+
+ &.disabled {
+ color: #B4BDC3;
+ cursor: default;
+ }
+}
+
+.quantity {
+ font-size: 14px;
+ font-weight: 600;
+}
+
+.price {
+ font-size: 20px;
+ font-weight: 800;
+ color: $primary;
+ text-align: right;
+}
diff --git a/src/modules/CartPage/components/CartItem.tsx b/src/modules/CartPage/components/CartItem.tsx
new file mode 100644
index 00000000000..5b78406d2b0
--- /dev/null
+++ b/src/modules/CartPage/components/CartItem.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import classname from 'classnames';
+import styles from './CartItem.module.scss';
+import { CartItem as CartItemType } from '../../../types/CartItem';
+import { useCart } from '../../shared/context/CartContext';
+
+type Props = {
+ item: CartItemType;
+};
+
+export const CartItem: React.FCCart
+ + {cart.length === 0 ? ( +Your cart is empty
+ ) : ( +
+
+ )}
+
+ {cart.map(item => (
+
+
+
+
+
+
+
+
+
+
+ ${totalPrice}
+Total for {totalCount} items
+
+
+
+
+ 
+
+
+
+ {product.name}
+
+
+
+ );
+};
diff --git a/src/modules/FavoritesPage/FavoritesPage.module.scss b/src/modules/FavoritesPage/FavoritesPage.module.scss
new file mode 100644
index 00000000000..fb839d57aa0
--- /dev/null
+++ b/src/modules/FavoritesPage/FavoritesPage.module.scss
@@ -0,0 +1,19 @@
+@import '../../styles/utils';
+
+.page {
+ padding-bottom: 80px;
+}
+
+.count {
+ color: $secondary;
+ font-size: 14px;
+ font-weight: 600;
+ margin-bottom: 24px;
+}
+
+.grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
+ gap: 16px;
+ justify-items: center;
+}
diff --git a/src/modules/FavoritesPage/FavoritesPage.tsx b/src/modules/FavoritesPage/FavoritesPage.tsx
new file mode 100644
index 00000000000..29ca187c2c0
--- /dev/null
+++ b/src/modules/FavoritesPage/FavoritesPage.tsx
@@ -0,0 +1,26 @@
+import styles from './FavoritesPage.module.scss';
+import { useFavorites } from '../../modules/shared/context/FavoritesContext';
+import { ProductCard } from '../shared/components/ProductCard/ProductCard';
+
+export const FavoritesPage = () => {
+ const { favorites } = useFavorites();
+
+ return (
+
+
+
+ {item.quantity}
+
+
+
+
+ ${product.price}
+
+
+ );
+};
diff --git a/src/modules/HomePage/HomePage.module.scss b/src/modules/HomePage/HomePage.module.scss
new file mode 100644
index 00000000000..b18c78e41c7
--- /dev/null
+++ b/src/modules/HomePage/HomePage.module.scss
@@ -0,0 +1,43 @@
+@import '../../styles/utils';
+
+.homePage {
+ padding-bottom: 80px;
+}
+
+.title {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ margin: -1px;
+ border: 0;
+ padding: 0;
+ white-space: nowrap;
+ clip-path: inset(100%);
+ clip: rect(0 0 0 0);
+ overflow: hidden;
+}
+
+.heading {
+ font-size: 32px;
+ font-weight: 800;
+ color: $primary;
+ margin-bottom: 24px;
+ margin-top: 24px;
+ letter-spacing: -0.01em;
+
+ @media (min-width: 640px) {
+ font-size: 48px;
+ margin-bottom: 32px;
+ margin-top: 32px;
+ }
+
+ @media (min-width: 1200px) {
+ font-size: 48px;
+ margin-bottom: 56px;
+ margin-top: 56px;
+ }
+}
+
+.section {
+ margin-bottom: 80px;
+}
diff --git a/src/modules/HomePage/HomePage.tsx b/src/modules/HomePage/HomePage.tsx
new file mode 100644
index 00000000000..ffd7bee5115
--- /dev/null
+++ b/src/modules/HomePage/HomePage.tsx
@@ -0,0 +1,50 @@
+import styles from './HomePage.module.scss';
+import { PicturesSlider } from './components/PicturesSlider/PicturesSlider';
+import { useState, useEffect, useMemo } from 'react';
+// eslint-disable-next-line max-len
+import { ProductsSlider } from '../shared/components/ProductsSlider/ProductsSlider';
+import { getProducts } from '../../api/Products';
+import { Product } from '../../types/Product';
+import { Categories } from './components/Categories/Categories';
+
+export const HomePage = () => {
+ const [products, setProducts] = useStateFavourites
+ +{favorites.length} items
+ + {favorites.length === 0 ? ( +You have no favorites yet
+ ) : ( +
+ {/* newest favorites appear first */}
+ {favorites.map(product => (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/modules/HomePage/components/Categories/Categories.module.scss b/src/modules/HomePage/components/Categories/Categories.module.scss
new file mode 100644
index 00000000000..c3903abd1bf
--- /dev/null
+++ b/src/modules/HomePage/components/Categories/Categories.module.scss
@@ -0,0 +1,86 @@
+@import '../../../../styles/utils';
+
+.categories {
+ margin-bottom: 80px
+}
+
+.title {
+ font-size: 32px;
+ font-weight: 800;
+ color: $primary;
+ margin-bottom: 24px;
+}
+
+.grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 16px;
+
+
+ @media (max-width: 640px) {
+ grid-template-columns: 1fr;
+ gap: 32px;
+ }
+}
+
+.imageWrapper {
+ width: 100%;
+ aspect-ratio: 1;
+ background-color: #89939a;
+ margin-bottom: 24px;
+ overflow: hidden;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 8px;
+}
+
+.image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: transform 0.3s;
+}
+
+.categoryName {
+ font-size: 24px;
+ font-weight: 700;
+ color: $primary;
+ margin-bottom: 8px;
+ transition: color 0.3s;
+}
+
+.categoryCount {
+ font-size: 14px;
+ font-weight: 600;
+ color: $secondary;
+}
+
+.categoryCard {
+ text-decoration: none;
+ display: flex;
+ flex-direction: column;
+ transition: transform 0.3s;
+
+ &:hover {
+ .image {
+ transform: scale(1.05);
+ }
+
+ .categoryName {
+ color: $accent; // Or $orange
+ }
+ }
+
+ &:nth-child(1) .imageWrapper {
+ background-color: #FCDBC1;
+ }
+
+ &:nth-child(2) .imageWrapper {
+ background-color: #8D8D92;
+ }
+
+ &:nth-child(3) .imageWrapper {
+ background-color: rgb(89, 119, 89);
+ }
+}
diff --git a/src/modules/HomePage/components/Categories/Categories.tsx b/src/modules/HomePage/components/Categories/Categories.tsx
new file mode 100644
index 00000000000..9d0a5dc4ae3
--- /dev/null
+++ b/src/modules/HomePage/components/Categories/Categories.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import styles from './Categories.module.scss';
+import { Product } from '../../../../types/Product';
+
+type Props = {
+ products: Product[];
+};
+
+export const Categories: React.FCProduct Catalog
+ +Welcome to Nice Gadgets store!
+ +
+
+ );
+};
diff --git a/src/modules/HomePage/components/PicturesSlider/PicturesSlider.module.scss b/src/modules/HomePage/components/PicturesSlider/PicturesSlider.module.scss
new file mode 100644
index 00000000000..ac3129fbb19
--- /dev/null
+++ b/src/modules/HomePage/components/PicturesSlider/PicturesSlider.module.scss
@@ -0,0 +1,90 @@
+@import '../../../../styles/utils';
+
+.slider {
+ margin-bottom: 64px;
+}
+
+.container {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ height: 400px;
+
+ @media (max-width: 1199px) {
+ height: 189px;
+ }
+
+ @media (max-width: 639px) {
+ height: 320px;
+ gap: 0;
+ }
+}
+
+.frame {
+ flex-grow: 1;
+ height: 100%;
+ border-radius: 16px;
+ overflow: hidden;
+ position: relative;
+}
+
+.strip {
+ display: flex;
+ height: 100%;
+ width: 100%;
+ transition: transform 0.5s ease-in-out;
+}
+
+.slide {
+ min-width: 100%;
+ height: 100%;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+}
+
+.arrow {
+ width: 32px;
+ height: 100%;
+ background: none;
+ border: 1px solid #E2E6E9;
+ border-radius: 16px;
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ img {
+ width: 10px;
+ height: 10px;
+ object-fit: contain;
+ }
+
+ @media (max-width: 639px) {
+ display: none;
+ }
+}
+
+.dots {
+ display: flex;
+ justify-content: center;
+ gap: 12px;
+ margin-top: 16px;
+}
+
+.dot {
+ width: 14px;
+ height: 4px;
+ background-color: #E2E6E9;
+ border: none;
+ cursor: pointer;
+ padding: 0;
+ transition: background-color 0.3s;
+
+ &.active {
+ background-color: $primary;
+ }
+}
diff --git a/src/modules/HomePage/components/PicturesSlider/PicturesSlider.tsx b/src/modules/HomePage/components/PicturesSlider/PicturesSlider.tsx
new file mode 100644
index 00000000000..cc51a53c2af
--- /dev/null
+++ b/src/modules/HomePage/components/PicturesSlider/PicturesSlider.tsx
@@ -0,0 +1,94 @@
+import { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import styles from './PicturesSlider.module.scss';
+
+const images = [
+ 'img/banner-phones.png',
+ 'img/banner-tablets.png',
+ 'img/banner-accessories.png',
+];
+
+export const PicturesSlider = () => {
+ const [currentIndex, setCurrentIndex] = useState(0);
+ const [isLeftHovered, setIsLeftHovered] = useState(false);
+ const [isRightHovered, setIsRightHovered] = useState(false);
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ setCurrentIndex(prev => (prev === images.length - 1 ? 0 : prev + 1));
+ }, 5000);
+
+ return () => clearInterval(interval);
+ }, []);
+
+ const handleNext = () => {
+ setCurrentIndex(prev => (prev === images.length - 1 ? 0 : prev + 1));
+ };
+
+ const handlePrev = () => {
+ setCurrentIndex(prev => (prev === 0 ? images.length - 1 : prev - 1));
+ };
+
+ return (
+ Shop by category
+ +
+
+
+
+ 
+
+
+ Mobile phones
+{phonesCount} models
+ + + +
+ 
+
+
+ Tablets
+{tabletsCount} models
+ + + +
+ 
+
+
+ Accessories
+{accessoriesCount} models
+ +
+
+ );
+};
diff --git a/src/modules/ProductsDetailsPage/ProductDetailsPage.module.scss b/src/modules/ProductsDetailsPage/ProductDetailsPage.module.scss
new file mode 100644
index 00000000000..b661698a406
--- /dev/null
+++ b/src/modules/ProductsDetailsPage/ProductDetailsPage.module.scss
@@ -0,0 +1,314 @@
+@import '../../styles/utils';
+
+.page {
+ padding-bottom: 80px;
+}
+
+.backButton {
+ background: none;
+ border: none;
+ color: $secondary;
+ font-weight: 700;
+ cursor: pointer;
+ padding: 0;
+ margin: 24px 0;
+ font-size: 12px;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ &:hover {
+ color: $primary;
+ }
+}
+
+.title {
+ margin-bottom: 40px;
+ font-size: 32px;
+ color: $primary;
+}
+
+.topSection {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 64px;
+ margin-bottom: 80px;
+
+ @media (max-width: 640px) {
+ grid-template-columns: 1fr;
+ gap: 32px;
+ }
+}
+
+.gallery {
+ display: flex;
+ gap: 16px;
+ height: 450px;
+
+ @media (max-width: 640px) {
+ flex-direction: column-reverse;
+ height: auto;
+ align-items: center;
+ }
+}
+
+.thumbnails {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ @media (max-width: 640px) {
+ flex-flow: row wrap;
+ justify-content: center;
+ margin-top: 16px;
+
+ }
+}
+
+.thumbnail {
+ width: 80px;
+ height: 80px;
+ border: 1px solid #E2E6E9;
+ border-radius: 8px;
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 8px;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ }
+
+ &.selected {
+ border-color: $primary;
+ }
+}
+
+.mainImage {
+ flex-grow: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ img {
+ max-width: 100%;
+ max-height: 100%;
+ object-fit: contain;
+ }
+
+ @media (max-width: 640px) {
+ width: 50%;
+ display: block;
+ }
+}
+
+.actions {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ width: 320px;
+
+ @media (max-width: 640px) {
+ width: 100%;
+ }
+}
+
+.selectorBlock {
+ border-bottom: 1px solid #E2E6E9;
+ padding-bottom: 24px;
+}
+
+.selectorLabel {
+ display: block;
+ color: $secondary;
+ font-size: 12px;
+ font-weight: 600;
+ margin-bottom: 8px;
+}
+
+.colorsGrid, .capacityGrid {
+ display: flex;
+ gap: 8px;
+ flex-wrap: wrap;
+}
+
+.colorCircle {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ border: 1px solid #E2E6E9;
+ cursor: pointer;
+ position: relative;
+
+ &.selected {
+ border-color: $primary;
+ &::after {
+ content: '';
+ position: absolute;
+ inset: -4px;
+ border: 1px solid $primary;
+ border-radius: 50%;
+ }
+ }
+}
+
+.capacityButton {
+ padding: 8px 16px;
+ border: 1px solid #E2E6E9;
+ background: $white;
+ color: $primary;
+ border-radius: 8px;
+ text-decoration: none;
+ font-size: 14px;
+ cursor: pointer;
+ transition: all 0.2s;
+
+ &.selected {
+ background-color: $primary;
+ color: $white;
+ border-color: $primary;
+ }
+
+ &:hover:not(.selected) {
+ border-color: $primary;
+ }
+}
+
+.priceBlock {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+}
+
+.priceDiscount {
+ font-size: 32px;
+ font-weight: 800;
+ color: $primary;
+}
+
+.priceRegular {
+ font-size: 22px;
+ color: $secondary;
+ text-decoration: line-through;
+}
+
+.buttons {
+ display: flex;
+ gap: 16px;
+
+ button {
+ height: 48px;
+ cursor: pointer;
+ font-weight: 700;
+ }
+}
+
+.addToCart {
+ flex-grow: 1;
+ background-color: $orange;
+ color: $white;
+ border: none;
+ border-radius: 8px;
+
+ &:hover {
+ opacity: 0.9
+ }
+}
+
+.addToFavorite {
+ width: 48px;
+ height: 48px;
+ background: transparent;
+ border: 1px solid #B4BDC3;
+ display: flex;
+ border-radius: 50%;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+ transition: border-color 0.3s;
+
+ &:hover {
+ border-color: $primary;
+ }
+}
+
+.specsSummary {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ margin-top: 8px;
+
+ .specRow {
+ display: flex;
+ justify-content: space-between;
+ }
+
+ .specName {
+ color: $secondary;
+ }
+ .specValue {
+ color: $primary;
+ }
+}
+
+.bottomSection {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 64px;
+ margin-top: 80px;
+
+ @media (max-width: 640px) {
+ grid-template-columns: 1fr;
+ }
+}
+
+.about {
+ h3 {
+ font-size: 24px;
+ margin-bottom: 32px;
+ border-bottom: 1px solid #E2E6E9;
+ padding-bottom: 16px;
+ }
+
+ .aboutSection {
+ margin-bottom: 32px;
+ h4 {
+ font-size: 16px;
+ margin-bottom: 16px;
+ }
+ p {
+ color: $secondary;
+ font-size: 14px;
+ line-height: 1.6;
+ margin-bottom: 16px;
+ }
+ }
+}
+
+.techSpecs {
+ h3 {
+ font-size: 24px;
+ margin-bottom: 32px;
+ border-bottom: 1px solid #E2E6E9;
+ padding-bottom: 16px;
+ }
+
+ .specRow {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 8px;
+ font-size: 14px;
+ }
+
+ .specName {
+ color: $secondary
+ }
+
+ .specValue {
+ color: $primary;
+ font-weight: 600;
+ }
+}
diff --git a/src/modules/ProductsDetailsPage/ProductDetailsPage.tsx b/src/modules/ProductsDetailsPage/ProductDetailsPage.tsx
new file mode 100644
index 00000000000..2f9841a388e
--- /dev/null
+++ b/src/modules/ProductsDetailsPage/ProductDetailsPage.tsx
@@ -0,0 +1,309 @@
+import { useState, useEffect } from 'react';
+import { useParams, useNavigate, Link } from 'react-router-dom';
+import classnames from 'classnames';
+import { ProductDetails } from '../../types/ProductDetails';
+import { getProductDetails, getSuggestedProducts } from '../../api/Products';
+import { Loader } from '../../components/Loader/Loader';
+import styles from './ProductDetailsPage.module.scss';
+import { Product } from '../../types/Product';
+import { useFavorites } from '../shared/context/FavoritesContext';
+import { useCart } from '../shared/context/CartContext';
+// eslint-disable-next-line max-len
+import { ProductsSlider } from '../shared/components/ProductsSlider/ProductsSlider';
+import { Breadcrumbs } from '../../components/Breadcrumbs/Breadcrumbs';
+
+export const ProductDetailsPage = () => {
+ const { productId } = useParams();
+ const navigate = useNavigate();
+
+ const [product, setProduct] = useState
+
+
+
+
+
+
+
+
+
+ {images.map((img, index) => (
+
+
+ 
+
+ ))}
+
+ {images.map((_, index) => (
+
+ Product was not found
; + } + + const images = product.images || []; + const colors = product.colorsAvailable || []; + const capacities = product.capacityAvailable || []; + const description = product.description || []; + const cell = product.cell || []; + + const getLink = (newColor: string, newCapacity: string) => { + const colorId = newColor.toLowerCase().replace(/ /g, '-'); + const capacityId = newCapacity.toLowerCase().replace(/ /g, '-'); + + return `/product/${product.namespaceId}-${capacityId}-${colorId}`; + }; + + const handleBack = () => { + if (window.history.state && window.history.state.idx > 0) { + navigate(-1); + } else { + const category = (product as unknown as Product)?.category || 'phones'; + + navigate(`/${category}`, { replace: true }); + } + }; + + const productToAdd: Product = { + id: product.id, + category: product.category, + phoneId: product.namespaceId, + itemId: product.id, + name: product.name, + fullPrice: product.priceRegular, + price: product.priceDiscount, + screen: product.screen, + capacity: product.capacity, + color: product.color, + ram: product.ram, + year: 0, + image: images[0] || '', + }; + + const isFav = isFavorite(productToAdd); + const isInCart = cart.some(item => item.id === product.id); + + const handleFavoriteClick = () => { + if (isFav) { + removeFromFavorites(productToAdd); + } else { + addToFavorites(productToAdd); + } + }; + + const handleAddToCart = () => { + if (!isInCart) { + addToCart(productToAdd); + } + }; + + return ( +
+
+ );
+};
diff --git a/src/modules/ProductsPage/ProductsPage.module.scss b/src/modules/ProductsPage/ProductsPage.module.scss
new file mode 100644
index 00000000000..28c86a56b6e
--- /dev/null
+++ b/src/modules/ProductsPage/ProductsPage.module.scss
@@ -0,0 +1,144 @@
+@import '../../styles/utils';
+
+.count {
+ font-family: Mont, sans-serif;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 21px;
+ letter-spacing: 0%;
+ color: $secondary;
+ margin-bottom: 40px;
+}
+
+.page {
+ max-width: 1136px;
+ padding-bottom: 80px;
+}
+
+.title {
+ font-family: Mont, sans-serif;
+ display: flex;
+ font-size: 48px;
+ font-weight: 800;
+ line-height: 56px;
+ letter-spacing: -1%;
+ color: $primary;
+ margin-bottom: 8px;
+}
+
+.grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
+ gap: 16px;
+ justify-items: center;
+ margin-bottom: 40px;
+
+ @media (max-width: 1199px) {
+ grid-template-columns: repeat(auto-fill, minmax(237px, 1fr));
+ }
+
+ @media (max-width: 639px) {
+ grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
+ }
+}
+
+.controls {
+ display: flex;
+ gap: 16px;
+ margin-bottom: 24px;
+}
+
+.controlBlock {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.label {
+ font-size: 12px;
+ font-weight: 700;
+ color: $secondary;
+}
+
+.select {
+ height: 40px;
+ padding: 0 12px;
+ border: 1px solid #B4BDC3;
+ border-radius: 8px;
+ background-color: $white;
+ color: $primary;
+ font-family: inherit;
+ font-weight: 600;
+ font-size: 14px;
+ cursor: pointer;
+ outline: none;
+ min-width: 130px;
+
+ &:hover {
+ border-color: $primary;
+ }
+
+ &:focus {
+ border-color: $primary;
+ }
+}
+
+.pagination {
+ display: flex;
+ justify-content: center;
+ gap: 8px;
+ align-items: center;
+}
+
+.pageButton {
+ width: 32px;
+ height: 32px;
+ border: 1px solid #E2E6E9;
+ background-color: $white;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+ font-family: inherit;
+ font-size: 14px;
+ color: $primary;
+ transition: all 0.3s;
+
+ &:disabled {
+ color: $secondary;
+ border-color: #E2E6E9;
+ cursor: default;
+ }
+
+ &:hover:not(:disabled) {
+ border-color: $primary;
+ }
+
+ &.active {
+ background-color: $primary;
+ color: $white;
+ border-color: $primary;
+ }
+}
+
+.pageArrow {
+ width: 32px;
+ height: 32px;
+ border: 1px solid #E2E6E9;
+ background-color: $white;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+
+ &:disabled {
+ cursor: default;
+ opacity: 0.5;
+ }
+
+ &:hover:not(:disabled) {
+ border-color: $primary;
+ }
+}
diff --git a/src/modules/ProductsPage/ProductsPage.tsx b/src/modules/ProductsPage/ProductsPage.tsx
new file mode 100644
index 00000000000..438bab35036
--- /dev/null
+++ b/src/modules/ProductsPage/ProductsPage.tsx
@@ -0,0 +1,183 @@
+import { useState, useEffect, useMemo } from 'react';
+import { useLocation, useSearchParams } from 'react-router-dom';
+import { Product } from '../../types/Product';
+import { getProducts } from '../../api/Products';
+import { ProductCard } from '../shared/components/ProductCard/ProductCard';
+import { Loader } from '../../components/Loader/Loader';
+import styles from './ProductsPage.module.scss';
+import classname from 'classnames';
+import { Breadcrumbs } from '../../components/Breadcrumbs/Breadcrumbs';
+
+export const ProductsPage = () => {
+ const [products, setProducts] = useState{product.name}
+ +
+
+
+
+
+
+
+ {images.map(image => (
+
+
+ setSelectedImage(image)}
+ >
+ 
+
+ ))}
+
+ 
+
+
+
+
+ Available colors
+
+
+
+ {colors.map(color => (
+
+ ))}
+
+
+ Select capacity
+
+
+
+ {capacities.map(capacity => (
+
+ {capacity}
+
+ ))}
+
+
+
+ ${product.priceDiscount}
+
+ ${product.priceRegular}
+
+
+
+
+
+
+
+
+
+
+ Screen
+ {product.screen}
+
+
+ Resolution
+ {product.resolution}
+
+
+ Processor
+ {product.processor}
+
+
+ RAM
+ {product.ram}
+
+
+
+
+
+
+
+ About
+ {description.map(section => ( +
+
+ ))}
+ {section.title}
+ {/* FIX: Handle text as an array of strings */} + {Array.isArray(section.text) ? ( + section.text.map(paragraph => ( ++ {paragraph} +
+ )) + ) : ( +{section.text}
+ )} +
+
+ Tech specs
+
+ Screen
+ {product.screen}
+
+
+ Resolution
+ {product.resolution}
+
+
+ Processor
+ {product.processor}
+
+
+ RAM
+ {product.ram}
+
+
+ Built in memory
+ {product.capacity}
+
+
+ Camera
+ {product.camera}
+
+
+ Zoom
+ {product.zoom}
+
+
+ Cell
+ {cell.join(', ')}
+
+
+
+
+
+ );
+};
diff --git a/src/modules/shared/components/ProductCard/ProductCard.module.scss b/src/modules/shared/components/ProductCard/ProductCard.module.scss
new file mode 100644
index 00000000000..36fdf32b3cc
--- /dev/null
+++ b/src/modules/shared/components/ProductCard/ProductCard.module.scss
@@ -0,0 +1,172 @@
+@use "sass:color";
+@import '../../../../styles/utils';
+
+.image {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+
+ transition: transform 0.3s ease-in-out;
+}
+
+.card {
+ width: 100%;
+ height: 506px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ border: 1px solid #E2E6E9;
+ border-radius: 8px;
+ background-color: $white;
+ padding: 32px 0;
+ transition: box-shadow 0.3s ease-in-out;
+
+ &:hover {
+ box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
+
+ .image {
+ transform: scale(1.1);
+ }
+ }
+}
+
+.imageWrapper {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 208px;
+ height: 196px;
+ margin-bottom: 24px;
+
+ a {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ justify-content: center;
+ align-items: center;
+ }
+}
+
+.info {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.title {
+ width: 208px;
+ height: 58px;
+ font-size: 14px;
+ color: $primary;
+}
+
+.priceContainer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 108px;
+ height: 31px;
+ gap: 8px;
+}
+
+.price {
+ color: $primary;
+ font-size: 22px;
+ font-weight: 800;
+ line-height: 140%;
+ letter-spacing: 0%;
+}
+
+.fullPrice {
+ color: $secondary;
+ font-weight: 600;
+ font-size: 22px;
+ line-height: 100%;
+ letter-spacing: 0%;
+ text-decoration: line-through;
+}
+
+.divider {
+ width: 100%;
+ height: 1px;
+ background-color: #E2E6E9;
+ margin: 8px 0;
+}
+
+.specs {
+ width: 208px;
+ height: 77px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ gap: 8px;
+}
+
+.spec {
+ align-items: center;
+ display: flex;
+ justify-content: space-between;
+ font-size: 12px;
+
+ span:first-child {
+ color: $secondary;
+ }
+
+ span:last-child {
+ color: #313237;
+ }
+}
+
+.actions {
+ width: 208px;
+ height: 40px;
+ display: flex;
+ justify-content: space-between;
+ margin-top: 16px;
+}
+
+.addToCart {
+ width: 160px;
+ height: 40px;
+ border-radius: 8px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: $orange;
+ color: $white;
+ border: none;
+ font-weight: 700;
+ cursor: pointer;
+ transition: backgroundcolor 0.3s;
+
+ &:hover {
+ background-color: color.adjust($orange, $lightness: 5%);
+ }
+
+
+}
+
+.added {
+ background-color: #8d3b01;
+
+ &:hover {
+ background-color: #8d3b01;
+ }
+ }
+
+.addToFavorite {
+ width: 40px;
+ height: 40px;
+ border: 1px solid #B4BDC3;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: transparent;
+ cursor: pointer;
+ transition: border-color 0.3s background-color 0.3s;
+
+ &:hover {
+ border-color: $primary;
+ }
+}
diff --git a/src/modules/shared/components/ProductCard/ProductCard.tsx b/src/modules/shared/components/ProductCard/ProductCard.tsx
new file mode 100644
index 00000000000..fec90473ea1
--- /dev/null
+++ b/src/modules/shared/components/ProductCard/ProductCard.tsx
@@ -0,0 +1,105 @@
+import React from 'react';
+import styles from './ProductCard.module.scss';
+import classname from 'classnames';
+import { Product } from '../../../../types/Product';
+import { Link } from 'react-router-dom';
+import { useFavorites } from '../../context/FavoritesContext';
+import { useCart } from '../../context/CartContext';
+
+type Props = {
+ product: Product;
+};
+
+export const ProductCard: React.FCMobile phones
} + {category === 'tablets' &&Tablets
} + {category === 'accessories' && ( +Accessories
+ )} +{products.length} models
+ + {!isLoading && !isError && products.length > 0 && ( +
+
+ )}
+
+ {isLoading &&
+ {/*eslint-disable-next-line jsx-a11y/label-has-associated-control*/}
+
+
+
+
+
+ {/*eslint-disable-next-line jsx-a11y/label-has-associated-control*/}
+
+
+
+
+ {visibleProducts.map(product => (
+
+ )}
+
+ {!isLoading && !isError && perPage !== 'all' && totalPages > 1 && (
+
+
+
+ {pages.map(page => (
+
+ ))}
+
+
+
+ )}
+
+ {products.length === 0 && !isLoading && !isError && (
+ There are no {category} yet
+ )} +
+
+ );
+};
diff --git a/src/modules/shared/components/ProductsSlider/ProductsSlider.module.scss b/src/modules/shared/components/ProductsSlider/ProductsSlider.module.scss
new file mode 100644
index 00000000000..cc2dc042e75
--- /dev/null
+++ b/src/modules/shared/components/ProductsSlider/ProductsSlider.module.scss
@@ -0,0 +1,76 @@
+@import '../../../../styles/utils';
+
+.slider {
+ margin-bottom: 80px;
+}
+
+.header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 24px;
+}
+
+.title {
+ font-size: 32px;
+ font-weight: 800;
+ color: $primary;
+ margin: 0;
+}
+
+.buttons {
+ display: flex;
+ gap: 16px;
+}
+
+.button {
+ width: 32px;
+ height: 32px;
+ border: 1px solid #B4BDC3;
+ border-radius: 50%;
+ background: transparent;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+ transition: all 0.3s;
+ padding: 0;
+
+ img {
+ width: 16px;
+ height: 16px;
+ object-fit: contain;
+ }
+
+ &:hover:not(.disabled) {
+ border-color: $primary;
+ }
+
+ &.disabled {
+ cursor: default;
+ opacity: 0.5;
+ border-color: #E2E6E9;
+ }
+}
+
+
+.frame {
+ overflow: hidden;
+ width: 100%;
+}
+
+.list {
+ display: flex;
+ gap: 16px;
+ transition: transform 1s ease;
+
+ > * {
+ flex-shrink: 0;
+ width: 272px;
+ }
+}
+
+.cardWrapper {
+ flex-shrink: 0;
+ width: 272px;
+}
diff --git a/src/modules/shared/components/ProductsSlider/ProductsSlider.tsx b/src/modules/shared/components/ProductsSlider/ProductsSlider.tsx
new file mode 100644
index 00000000000..7b6b273d903
--- /dev/null
+++ b/src/modules/shared/components/ProductsSlider/ProductsSlider.tsx
@@ -0,0 +1,107 @@
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import styles from './ProductsSlider.module.scss';
+import { Product } from '../../../../types/Product';
+import { ProductCard } from '../ProductCard/ProductCard';
+
+type Props = {
+ title: string;
+ products: Product[];
+ showDiscount?: boolean;
+ scrollOnCardClick?: boolean;
+};
+
+export const ProductsSlider: React.FC
+
+
+
+
+
+
+
+
+ {product.name}
+ + +
+ ${product.price}
+ ${product.fullPrice}
+
+
+
+
+
+
+
+
+ Screen
+ {product.screen}
+
+
+ Capacity
+ {product.capacity}
+
+
+ RAM
+ {product.ram}
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/modules/shared/context/CartContext.tsx b/src/modules/shared/context/CartContext.tsx
new file mode 100644
index 00000000000..3626e2ff13c
--- /dev/null
+++ b/src/modules/shared/context/CartContext.tsx
@@ -0,0 +1,85 @@
+import { createContext, useContext, useMemo } from 'react';
+import { Product } from '../../../types/Product';
+import { CartItem } from '../../../types/CartItem';
+import { useLocalStorage } from '../../../hooks/useLocalStorage';
+
+type CartContextType = {
+ cart: CartItem[];
+ addToCart: (product: Product) => void;
+ removeFromCart: (productId: string) => void;
+ increaseQuantity: (productId: string) => void;
+ decreaseQuantity: (productId: string) => void;
+ clearCart: () => void;
+ totalCount: number;
+};
+
+const CartContext = createContext
+
+
+ {title}
+ +
+
+
+
+
+
+
+
+ {products.map(product => (
+
+
+
+ ))}
+