+
+ );
+};
diff --git a/src/components/Breadcrumbs/Breadcrumbs.module.scss b/src/components/Breadcrumbs/Breadcrumbs.module.scss
new file mode 100644
index 00000000000..221bdf90f90
--- /dev/null
+++ b/src/components/Breadcrumbs/Breadcrumbs.module.scss
@@ -0,0 +1,65 @@
+@import '../../styles/variables';
+@import '../../styles/mixins';
+
+.breadcrumbs {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 24px;
+ height: 16px;
+
+ &__link {
+ display: flex;
+ align-items: center;
+ text-decoration: none;
+ color: $c-text-secondary;
+ font-family: inherit;
+ font-size: 12px;
+ font-weight: 700;
+ transition: color 0.3s ease;
+
+ &:hover {
+ color: $c-text-primary;
+
+ img {
+ opacity: 1;
+ }
+ }
+ }
+
+ &__current {
+ color: $c-text-secondary;
+ font-family: inherit;
+ font-size: 12px;
+ font-weight: 700;
+
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 150px;
+
+ @include tablet {
+ max-width: 300px;
+ }
+
+ @include desktop {
+ max-width: 500px;
+ }
+ }
+
+ &__icon {
+ width: 16px;
+ height: 16px;
+ display: block;
+ object-fit: contain;
+ transition: opacity 0.3s ease;
+ }
+
+ &__divider {
+ width: 16px;
+ height: 16px;
+ display: block;
+ object-fit: contain;
+ opacity: 0.5;
+ }
+}
diff --git a/src/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx
new file mode 100644
index 00000000000..c411af73d67
--- /dev/null
+++ b/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -0,0 +1,62 @@
+import { Link } from 'react-router-dom';
+import styles from './Breadcrumbs.module.scss';
+
+interface Props {
+ category: string;
+ productName?: string;
+}
+
+export const Breadcrumbs = ({ category, productName }: Props) => {
+ const formatCategory = (str: string) => {
+ if (!str) {
+ return '';
+ }
+
+ return str.charAt(0).toUpperCase() + str.slice(1);
+ };
+
+ return (
+
+ );
+};
diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss
new file mode 100644
index 00000000000..d23be7c0370
--- /dev/null
+++ b/src/components/Footer/Footer.module.scss
@@ -0,0 +1,113 @@
+@import '../../styles/variables';
+@import '../../styles/mixins';
+
+.footer {
+ border-top: 1px solid $c-border;
+ background-color: $c-bg-dark;
+}
+
+.content {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 32px 16px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 32px;
+
+ @include tablet {
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ height: 96px;
+ padding: 0 16px;
+ }
+}
+
+.logo {
+ display: flex;
+ align-items: center;
+}
+
+.links {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 16px;
+
+ @include tablet {
+ flex-direction: row;
+ align-items: center;
+ }
+
+ @include desktop {
+ gap: 100px;
+ }
+}
+
+.link {
+ font-family: inherit;
+ font-weight: 800;
+ font-size: 12px;
+ letter-spacing: 0.04em;
+ text-transform: uppercase;
+ color: $c-text-secondary;
+ text-decoration: none;
+ transition: color 0.3s ease;
+
+ &:hover {
+ color: $c-text-primary;
+ }
+}
+
+.back_text {
+ font-family: inherit;
+ font-size: 12px;
+ font-weight: 600;
+ color: $c-text-secondary;
+ transition: color 0.3s ease;
+}
+
+.back_btn {
+ width: 32px;
+ height: 32px;
+ background-color: #323542;
+ border: 1px solid transparent;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ transition: border-color 0.3s ease, background-color 0.3s ease;
+
+ img {
+ width: 16px;
+ height: 16px;
+ opacity: 0.5;
+ transition: opacity 0.3s ease;
+ }
+}
+
+.back {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ cursor: pointer;
+ align-self: center;
+
+ @include tablet {
+ align-self: auto;
+ }
+
+ &:hover .back_btn {
+ background-color: #4A4D58;
+ border-color: $c-border;
+
+ img {
+ opacity: 1;
+ }
+ }
+
+ &:hover .back_text {
+ color: $c-text-primary;
+ }
+}
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
new file mode 100644
index 00000000000..7c62cb880b6
--- /dev/null
+++ b/src/components/Footer/Footer.tsx
@@ -0,0 +1,46 @@
+import { Link } from 'react-router-dom';
+import styles from './Footer.module.scss';
+
+export const Footer = () => {
+ const scrollToTop = () => {
+ 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..679c4d8433c
--- /dev/null
+++ b/src/components/Header/Header.module.scss
@@ -0,0 +1,164 @@
+@import '../../styles/variables';
+@import '../../styles/mixins';
+
+.header {
+ position: sticky;
+ top: 0;
+ z-index: 100;
+ background-color: $c-bg-dark;
+ height: 48px;
+ border-bottom: 1px solid $c-border;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ @include desktop {
+ height: 64px;
+ }
+
+ &__left {
+ display: flex;
+ align-items: center;
+ height: 100%;
+ padding-left: 16px;
+
+ @include tablet {
+ padding-left: 24px;
+ }
+
+ @include desktop {
+ padding-left: 32px;
+ }
+ }
+
+ &__logo {
+ display: flex;
+ align-items: center;
+ height: 100%;
+ margin-right: 32px;
+
+ @include desktop {
+ margin-right: 64px;
+ }
+
+ img {
+ height: 28px;
+ }
+ }
+
+ &__nav {
+ display: none;
+ height: 100%;
+
+ @include tablet {
+ display: flex;
+ gap: 32px;
+ }
+ }
+
+ &__link {
+ text-decoration: none;
+ color: $c-text-secondary;
+ font-weight: 800;
+ font-size: 12px;
+ letter-spacing: 0.04em;
+ text-transform: uppercase;
+ display: flex;
+ align-items: center;
+ height: 100%;
+ border-bottom: 3px solid transparent;
+ padding-top: 3px;
+ transition: color 0.3s ease;
+
+ &:hover {
+ color: $c-text-primary;
+ }
+
+ &--active {
+ color: $c-text-primary;
+ border-bottom: 3px solid $c-text-primary;
+ }
+ }
+
+ &__right {
+ display: none;
+ height: 100%;
+
+ @include tablet {
+ display: flex;
+ }
+ }
+
+ &__icon-wrapper {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 48px;
+ height: 100%;
+ border-left: 1px solid $c-border;
+ color: $c-text-primary;
+ text-decoration: none;
+ transition: background-color 0.3s;
+
+ @include desktop {
+ width: 64px;
+ }
+
+ &:hover {
+ background-color: $c-selected;
+ }
+
+ img {
+ width: 16px;
+ height: 16px;
+ }
+ }
+
+ &__badge {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ background-color: $c-accent-red;
+ color: #fff;
+ font-size: 10px;
+ font-weight: bold;
+ width: 14px;
+ height: 14px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ @include desktop {
+ top: 16px;
+ right: 16px;
+ }
+ }
+
+ &__menu-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 48px;
+ height: 100%;
+ background: transparent;
+ border: none;
+ border-left: 1px solid $c-border;
+ cursor: pointer;
+ transition: background-color 0.3s;
+
+ @include tablet {
+ display: none;
+ }
+
+ &:hover {
+ background-color: $c-selected;
+ }
+
+ img {
+ width: 16px;
+ height: 16px;
+ }
+ }
+}
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
new file mode 100644
index 00000000000..7296fd456b0
--- /dev/null
+++ b/src/components/Header/Header.tsx
@@ -0,0 +1,95 @@
+import { useEffect, useState } from 'react';
+import { Link, NavLink, useLocation } from 'react-router-dom';
+import cn from 'classnames';
+import { useAppSelector } from '../../store/hooks';
+import styles from './Header.module.scss';
+import { MobileMenu } from '../MobileMenu/MobileMenu';
+
+const NAV_LINKS = [
+ { to: '/', text: 'Home' },
+ { to: '/phones', text: 'Phones' },
+ { to: '/tablets', text: 'Tablets' },
+ { to: '/accessories', text: 'Accessories' },
+];
+
+const getLinkClass = ({ isActive }: { isActive: boolean }) =>
+ cn(styles.header__link, {
+ [styles['header__link--active']]: isActive,
+ });
+
+export const Header = () => {
+ const [isMenuOpen, setIsMenuOpen] = useState(false);
+ const location = useLocation();
+
+ const cartItems = useAppSelector(state => state.cart.items);
+ const favoritesItems = useAppSelector(state => state.favorites.items);
+
+ const cartTotalQuantity = cartItems.reduce(
+ (total, item) => total + item.quantity,
+ 0,
+ );
+ const favTotalQuantity = favoritesItems.length;
+
+ useEffect(() => {
+ if (isMenuOpen) {
+ document.body.style.overflow = 'hidden';
+ } else {
+ document.body.style.overflow = '';
+ }
+
+ return () => {
+ document.body.style.overflow = '';
+ };
+ }, [isMenuOpen]);
+
+ useEffect(() => {
+ setIsMenuOpen(false);
+ }, [location.pathname]);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ {BANNERS.map((banner, index) => (
+ 
+ ))}
+
+
+ {BANNERS.map((_, index) => (
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ 
+ {favTotalQuantity > 0 && (
+ {favTotalQuantity}
+ )}
+
+
+
+ 
+ {cartTotalQuantity > 0 && (
+ {cartTotalQuantity}
+ )}
+
+
+
+
+
+
+ {favTotalQuantity > 0 && (
+ {favTotalQuantity}
+ )}
+
+
+
+
+ {cartTotalQuantity > 0 && (
+ {cartTotalQuantity}
+ )}
+
+
+
+
+
+ );
+};
diff --git a/src/components/ProductCard/ProductCard.module.scss b/src/components/ProductCard/ProductCard.module.scss
new file mode 100644
index 00000000000..41f69dbc68b
--- /dev/null
+++ b/src/components/ProductCard/ProductCard.module.scss
@@ -0,0 +1,186 @@
+@import '../../styles/variables';
+@import '../../styles/mixins';
+
+.card {
+ width: 100%;
+ max-width: 400px;
+ height: 440px;
+ background-color: $c-bg-card;
+ padding: 24px;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ transition: box-shadow 0.3s ease, transform 0.3s ease;
+
+ @include tablet {
+ height: 506px;
+ padding: 32px;
+ }
+
+ &:hover {
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+ }
+
+ &__image_link {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 150px;
+ margin-bottom: 24px;
+ overflow: hidden;
+
+ @include tablet {
+ height: 196px;
+ }
+ }
+
+ &__image {
+ max-width: 100%;
+ max-height: 100%;
+ object-fit: contain;
+ transition: transform 0.3s ease;
+
+ .card__image_link:hover & {
+ transform: scale(1.1);
+ }
+ }
+
+ &__title {
+ height: 42px;
+ color: $c-text-primary;
+ text-decoration: none;
+ font-size: 14px;
+ line-height: 21px;
+ font-weight: 600;
+ margin-bottom: 8px;
+
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+
+ &__prices {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ height: 31px;
+ margin-bottom: 8px;
+ }
+
+ &__price_current {
+ font-size: 22px;
+ font-weight: 800;
+ color: $c-text-primary;
+ }
+
+ &__price_full {
+ font-size: 14px;
+ font-weight: 500;
+ color: $c-text-secondary;
+ text-decoration: line-through;
+ }
+
+ &__divider {
+ height: 1px;
+ background-color: $c-border;
+ border: none;
+ margin-bottom: 8px;
+ }
+
+ &__specs {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ width: 100%;
+ height: 77px;
+ }
+
+ &__spec {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-size: 12px;
+ width: 100%;
+
+ &_title {
+ color: $c-text-secondary;
+ flex-shrink: 0;
+ margin-right: 8px;
+ }
+
+ &_value {
+ color: $c-text-primary;
+ font-weight: 600;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ text-align: right;
+ }
+ }
+
+ &__actions {
+ display: flex;
+ gap: 8px;
+ width: 100%;
+ height: 40px;
+ margin-top: auto;
+ }
+
+ &__button {
+ height: 40px;
+ border: none;
+ font-family: inherit;
+ font-weight: 600;
+ font-size: 14px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.3s ease;
+ }
+
+ &__button_add {
+ flex: 1;
+ background-color: $c-primary;
+ color: #fff;
+
+ &:hover {
+ background-color: $c-primary-hover;
+ }
+ }
+
+ &__button_added {
+ flex: 1;
+ background-color: transparent;
+ color: #fff;
+ border: 1px solid $c-border;
+
+ &:hover {
+ border-color: $c-text-primary;
+ }
+ }
+
+ &__button_fav {
+ width: 40px;
+ flex-shrink: 0;
+ background-color: transparent;
+ border: 1px solid $c-border;
+ color: $c-text-primary;
+
+ &:hover {
+ border-color: $c-text-primary;
+ }
+
+ &--active {
+ color: $c-accent-red;
+ border-color: $c-border;
+ }
+ }
+}
diff --git a/src/components/ProductCard/ProductCard.tsx b/src/components/ProductCard/ProductCard.tsx
new file mode 100644
index 00000000000..e99587072c3
--- /dev/null
+++ b/src/components/ProductCard/ProductCard.tsx
@@ -0,0 +1,103 @@
+import { Link } from 'react-router-dom';
+import cn from 'classnames';
+import { Product } from '../../types/Product';
+import { useAppDispatch, useAppSelector } from '../../store/hooks';
+import { addToCart } from '../../store/cartSlice';
+import { toggleFavorite } from '../../store/favoritesSlice';
+import styles from './ProductCard.module.scss';
+
+interface Props {
+ product: Product;
+ hideOldPrice?: boolean;
+}
+
+export const ProductCard = ({ product, hideOldPrice }: Props) => {
+ const dispatch = useAppDispatch();
+ const cartItems = useAppSelector(state => state.cart.items);
+ const favoritesItems = useAppSelector(state => state.favorites.items);
+
+ const isAddedToCart = cartItems.some(item => item.id === product.id);
+ const isFavorite = favoritesItems.some(item => item.id === product.id);
+
+ const productLink = `/${product.category}/${product.itemId || product.id}`;
+
+ const handleAddToCart = () => {
+ if (!isAddedToCart) {
+ dispatch(addToCart(product));
+ }
+ };
+
+ const currentImage =
+ product.image ||
+ product.imageUrl ||
+ (product.images ? product.images[0] : '');
+
+ const imageSrc = `./${currentImage.startsWith('/') ? currentImage.slice(1) : currentImage}`;
+
+ return (
+ -
+ {pages.map(page => (
+
- + + + ))} +
+
+ 
+
+
+
+ {product.name}
+
+
+
+ +
+ );
+};
diff --git a/src/components/ProductsList/ProductsList.module.scss b/src/components/ProductsList/ProductsList.module.scss
new file mode 100644
index 00000000000..b097c8c485b
--- /dev/null
+++ b/src/components/ProductsList/ProductsList.module.scss
@@ -0,0 +1,6 @@
+.list {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
+ gap: 16px;
+ justify-items: center;
+}
diff --git a/src/components/ProductsList/ProductsList.tsx b/src/components/ProductsList/ProductsList.tsx
new file mode 100644
index 00000000000..e5ce24a4b1d
--- /dev/null
+++ b/src/components/ProductsList/ProductsList.tsx
@@ -0,0 +1,17 @@
+import { Product } from '../../types/Product';
+import { ProductCard } from '../ProductCard/ProductCard';
+import styles from './ProductsList.module.scss';
+
+interface Props {
+ products: Product[];
+}
+
+export const ProductsList = ({ products }: Props) => {
+ return (
+
+
+ ${product.price || product.priceDiscount}
+
+ {!hideOldPrice && (product.fullPrice || product.priceRegular) && (
+
+ ${product.fullPrice || product.priceRegular}
+
+ )}
+
+
+ + +
+
+
+
+ Screen
+ {product.screen}
+
+
+ Capacity
+ {product.capacity}
+
+
+ RAM
+ {product.ram}
+
+
+
+
+
+
+
+ {products.map(product => (
+
+ );
+};
diff --git a/src/components/ProductsSlider/ProductsSlider.module.scss b/src/components/ProductsSlider/ProductsSlider.module.scss
new file mode 100644
index 00000000000..be71e828517
--- /dev/null
+++ b/src/components/ProductsSlider/ProductsSlider.module.scss
@@ -0,0 +1,81 @@
+@import '../../styles/variables';
+@import '../../styles/mixins';
+
+.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: $c-text-primary;
+ }
+
+ &__buttons {
+ display: flex;
+ gap: 16px;
+ }
+
+ &__btn {
+ width: 32px;
+ height: 32px;
+ background-color: #323542;
+ border: 1px solid $c-border;
+ border-radius: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+ transition: all 0.3s;
+
+ img {
+ width: 16px;
+ height: 16px;
+ transition: opacity 0.3s;
+ }
+
+ &:disabled {
+ opacity: 0.3;
+ cursor: not-allowed;
+ border-color: $c-border;
+ background-color: transparent;
+ }
+
+ &:hover:not(:disabled) {
+ background-color: #4A4D58;
+ border-color: $c-border;
+ }
+
+ }
+
+ &__track_container {
+ overflow: hidden;
+ }
+
+ &__track {
+ display: flex;
+ gap: 16px;
+ overflow-x: auto;
+ scroll-behavior: smooth;
+ scroll-snap-type: x mandatory;
+ padding-bottom: 16px;
+
+ &::-webkit-scrollbar { display: none; }
+
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+ }
+
+ &__item {
+ scroll-snap-align: start;
+ flex-shrink: 0;
+ width: 272px;
+ max-width: 100%;
+ }
+}
diff --git a/src/components/ProductsSlider/ProductsSlider.tsx b/src/components/ProductsSlider/ProductsSlider.tsx
new file mode 100644
index 00000000000..8ae9a94db9f
--- /dev/null
+++ b/src/components/ProductsSlider/ProductsSlider.tsx
@@ -0,0 +1,83 @@
+import { useRef, useState, useEffect } from 'react';
+import { Product } from '../../types/Product';
+import { ProductCard } from '../ProductCard/ProductCard';
+import styles from './ProductsSlider.module.scss';
+
+interface Props {
+ title: string;
+ products: Product[];
+ hideOldPrice?: boolean;
+}
+
+export const ProductsSlider = ({ title, products, hideOldPrice }: Props) => {
+ const trackRef = useRef
+
+
+ {title}
+
+
+
+
+
+
+
+ {products.map(product => (
+
+
+
+ ))}
+ Shop by category
+ +
+
+
+
+ 
+
+
+
+
+
+
+
+ Mobile phones
+ 95 models +
+ 
+
+
+
+
+
+
+
+ Tablets
+ 24 models +
+ 
+
+
+
+
+
+ Accessories
+ 100 models +
+
+
+
+ );
+};
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/CatalogPage/CatalogPage.module.scss b/src/modules/CatalogPage/CatalogPage.module.scss
new file mode 100644
index 00000000000..88ccf4f84fb
--- /dev/null
+++ b/src/modules/CatalogPage/CatalogPage.module.scss
@@ -0,0 +1,135 @@
+@import '../../styles/variables';
+@import '../../styles/mixins';
+
+.page {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 24px 16px 64px;
+
+ display: flex;
+ flex-direction: column;
+ min-height: 80vh;
+
+ &__breadcrumbs {
+ margin-bottom: 24px;
+ }
+
+ &__list_container {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ }
+
+ &__title {
+ font-size: 32px;
+ font-weight: 800;
+ color: $c-text-primary;
+ margin-bottom: 8px;
+ text-transform: capitalize;
+ }
+
+ &__count {
+ display: block;
+ font-size: 14px;
+ color: $c-text-secondary;
+ font-weight: 600;
+ margin-bottom: 32px;
+ }
+
+ &__filters {
+ display: flex;
+ gap: 16px;
+ margin-bottom: 24px;
+
+ & > div {
+ flex: 1;
+
+ @include tablet {
+ flex: none;
+ width: 176px;
+ }
+ }
+ }
+
+ &__filter {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ width: 100%;
+ }
+
+ &__label {
+ font-size: 12px;
+ font-weight: 600;
+ color: $c-text-secondary;
+ }
+
+ &__select {
+ height: 40px;
+ width: 100%;
+ padding: 0 16px;
+ background-color: #323542;
+ border: 1px solid $c-border;
+ color: $c-text-primary;
+ font-family: inherit;
+ font-weight: 600;
+ border-radius: 0;
+ cursor: pointer;
+
+ option {
+ background-color: $c-bg-elements;
+ color: $c-text-primary;
+ }
+
+ &:hover {
+ border-color: #905BFF;
+ }
+ }
+
+ &__message {
+ text-align: center;
+ padding: 40px;
+ color: $c-text-secondary;
+ font-size: 18px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 16px;
+ }
+
+ &__reload_btn {
+ padding: 8px 24px;
+ background-color: transparent;
+ border: 1px solid $c-border;
+ color: $c-text-primary;
+ font-family: inherit;
+ font-size: 14px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s ease;
+
+ &:hover {
+ border-color: $c-text-primary;
+ background-color: rgba(255, 255, 255, 0.05);
+ }
+ }
+}
+
+.grid {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 40px 16px;
+ margin-bottom: 40px;
+
+ @include tablet {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ @media (min-width: 768px) {
+ grid-template-columns: repeat(3, 1fr);
+ }
+
+ @include desktop {
+ grid-template-columns: repeat(4, 1fr);
+ }
+}
diff --git a/src/modules/CatalogPage/CatalogPage.tsx b/src/modules/CatalogPage/CatalogPage.tsx
new file mode 100644
index 00000000000..5e39ab904ab
--- /dev/null
+++ b/src/modules/CatalogPage/CatalogPage.tsx
@@ -0,0 +1,175 @@
+import { useState, useEffect } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { Product } from '../../types/Product';
+import { getProductsByCategory } from '../../api/products';
+import { ProductsList } from '../../components/ProductsList/ProductsList';
+import styles from './CatalogPage.module.scss';
+import { Pagination } from '../../components/Pagination/Pagination';
+import { Breadcrumbs } from '../../components/Breadcrumbs/Breadcrumbs';
+
+interface Props {
+ category: 'phones' | 'tablets' | 'accessories';
+}
+
+export const CatalogPage = ({ category }: Props) => {
+ const [products, setProducts] = useStateCart
+ + {cartItems.length === 0 ? ( +Your cart is empty
+ ) : ( +
+
+ )}
+
+ {cartItems.map(item => {
+ const imageSrc =
+ item.product.image ||
+ item.product.imageUrl ||
+ item.product.images?.[0] ||
+ '';
+ const finalImage = `./${imageSrc.startsWith('/') ? imageSrc.slice(1) : imageSrc}`;
+ const itemPrice =
+ item.product.priceDiscount || item.product.price;
+
+ return (
+
+
+
+
+ );
+ })}
+
+
+
+
+ 
+
+
+
+ {item.product.name}
+
+
+
+
+
+
+
+
+ {item.quantity}
+
+
+
+
+
+ ${itemPrice}
+
+
+
+
+ ${totalAmount}
+
+ Total for {totalItemsCount} items
+
+
+
+
+
+ );
+};
diff --git a/src/modules/CatalogPage/index.ts b/src/modules/CatalogPage/index.ts
new file mode 100644
index 00000000000..1cad0ffbfe4
--- /dev/null
+++ b/src/modules/CatalogPage/index.ts
@@ -0,0 +1 @@
+export * from './CatalogPage';
diff --git a/src/modules/ContactsPage/ContactsPage.module.scss b/src/modules/ContactsPage/ContactsPage.module.scss
new file mode 100644
index 00000000000..30fe610f81c
--- /dev/null
+++ b/src/modules/ContactsPage/ContactsPage.module.scss
@@ -0,0 +1,23 @@
+@import '../../styles/variables';
+
+.page {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 48px 16px;
+ text-align: center;
+ flex: 1;
+
+ &__title {
+ font-size: 32px;
+ font-weight: 800;
+ color: $c-text-primary;
+ margin-bottom: 24px;
+ }
+
+ &__text {
+ font-size: 16px;
+ line-height: 1.5;
+ color: $c-text-secondary;
+ font-weight: 600;
+ }
+}
diff --git a/src/modules/ContactsPage/ContactsPage.tsx b/src/modules/ContactsPage/ContactsPage.tsx
new file mode 100644
index 00000000000..704f797e3f6
--- /dev/null
+++ b/src/modules/ContactsPage/ContactsPage.tsx
@@ -0,0 +1,14 @@
+import styles from './ContactsPage.module.scss';
+
+export const ContactsPage = () => {
+ return (
+ {category}
+ {products.length} models + + {!isLoading && !isError && products.length > 0 && ( +
+
+ )}
+
+ {isLoading &&
+
+
+
+
+
+
+
+
+ Loading...
}
+ {isError && (
+
+ Something went wrong.
+
+
+ )}
+ {!isLoading && !isError && products.length === 0 && (
+ There are no {category} yet.
+ )}
+
+ {!isLoading && !isError && visibleProducts.length > 0 && (
+
+
+ )}
+
+
+ );
+};
diff --git a/src/modules/FavoritesPage/FavoritesPage.module.scss b/src/modules/FavoritesPage/FavoritesPage.module.scss
new file mode 100644
index 00000000000..619caa073f9
--- /dev/null
+++ b/src/modules/FavoritesPage/FavoritesPage.module.scss
@@ -0,0 +1,32 @@
+@import '../../styles/variables';
+@import '../../styles/mixins';
+
+.page {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 24px 16px 64px;
+
+ &__breadcrumbs {
+ margin-bottom: 24px;
+ }
+
+ &__title {
+ font-size: 32px;
+ font-weight: 800;
+ margin-bottom: 8px;
+ color: $c-text-primary;
+ }
+
+ &__count {
+ color: $c-text-secondary;
+ font-size: 14px;
+ margin-bottom: 32px;
+ display: block;
+ }
+
+ &__empty {
+ font-size: 20px;
+ color: $c-text-secondary;
+ padding: 40px 0;
+ }
+}
diff --git a/src/modules/FavoritesPage/FavoritesPage.tsx b/src/modules/FavoritesPage/FavoritesPage.tsx
new file mode 100644
index 00000000000..890107b108a
--- /dev/null
+++ b/src/modules/FavoritesPage/FavoritesPage.tsx
@@ -0,0 +1,27 @@
+import { useAppSelector } from '../../store/hooks';
+import { Breadcrumbs } from '../../components/Breadcrumbs/Breadcrumbs';
+import { ProductsList } from '../../components/ProductsList/ProductsList';
+import styles from './FavoritesPage.module.scss';
+
+export const FavoritesPage = () => {
+ const favorites = useAppSelector(state => state.favorites.items);
+
+ return (
+ Contacts
+
+ This is a placeholder for the contacts page.
+
+ Feel free to reach out to our support team!
+
+
+ );
+};
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.tsx b/src/modules/HomePage/HomePage.tsx
new file mode 100644
index 00000000000..367d6500bf9
--- /dev/null
+++ b/src/modules/HomePage/HomePage.tsx
@@ -0,0 +1,48 @@
+import { useState, useEffect } from 'react';
+import { Product } from '../../types/Product';
+import { getHotProducts, getBrandNewProducts } from '../../api/products';
+import { ProductsSlider } from '../../components/ProductsSlider/ProductsSlider';
+import { BannerSlider } from '../../components/BannerSlider/BannerSlider';
+import { ShopByCategory } from '../../components/ShopByCategory/ShopByCategory'; // ДОДАНО ІМПОРТ
+
+export const HomePage = () => {
+ const [hotProducts, setHotProducts] = useState
+
+
+ Favorites
+ {favorites.length} items + + {favorites.length === 0 ? ( ++ You have not added any products to favorites 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.tsx b/src/modules/NotFoundPage/NotFoundPage.tsx
new file mode 100644
index 00000000000..6eced6a4ee3
--- /dev/null
+++ b/src/modules/NotFoundPage/NotFoundPage.tsx
@@ -0,0 +1,15 @@
+import { Link } from 'react-router-dom';
+
+export const NotFoundPage = () => {
+ return (
+ Product Catalog
+ +Loading...
+ ) : (
+ <>
+
+
+ );
+};
diff --git a/src/modules/NotFoundPage/indext.ts b/src/modules/NotFoundPage/indext.ts
new file mode 100644
index 00000000000..6197aa75aa8
--- /dev/null
+++ b/src/modules/NotFoundPage/indext.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..eda77e30858
--- /dev/null
+++ b/src/modules/ProductDetailsPage/ProductDetailsPage.module.scss
@@ -0,0 +1,371 @@
+@import '../../styles/variables';
+@import '../../styles/mixins';
+
+.loader, .not_found {
+ text-align: center;
+ padding: 100px;
+ font-size: 24px;
+ color: $c-text-primary;
+}
+
+.container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 24px 16px 64px;
+}
+
+.back_button {
+ background: transparent;
+ border: none;
+ color: #F1F2F9;
+ font-family: inherit;
+ font-size: 14px;
+ font-weight: 600;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin: 24px 0;
+ padding: 0;
+ transition: color 0.3s;
+
+ &:hover {
+ color: #905BFF;
+ }
+}
+
+.title {
+ font-size: 32px;
+ font-weight: 800;
+ color: $c-text-primary;
+ margin-bottom: 40px;
+}
+
+.main_grid {
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+ margin-bottom: 80px;
+
+ @include tablet {
+ flex-direction: row;
+ justify-content: space-between;
+ gap: 32px;
+ }
+
+ @include desktop {
+ gap: 64px;
+ }
+}
+
+.gallery {
+ display: flex;
+ flex-direction: column-reverse;
+ gap: 16px;
+ width: 100%;
+
+ @include tablet {
+ flex-direction: row;
+ width: auto;
+ flex: 1;
+ }
+}
+
+.thumbnails {
+ display: flex;
+ gap: 16px;
+ overflow-x: auto;
+
+ &::-webkit-scrollbar { display: none; }
+
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+
+ @include tablet {
+ flex-direction: column;
+ }
+}
+
+.thumb {
+ width: 50px;
+ height: 50px;
+ flex-shrink: 0;
+ border: 1px solid $c-border;
+ cursor: pointer;
+ padding: 4px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: border-color 0.3s;
+
+ @include tablet {
+ width: 64px;
+ height: 64px;
+ }
+
+ @include desktop {
+ width: 80px;
+ height: 80px;
+ }
+
+ img {
+ max-width: 100%;
+ max-height: 100%;
+ object-fit: contain;
+ }
+}
+
+.thumb_active {
+ border-color: $c-text-primary;
+}
+
+.main_image {
+ width: 100%;
+ aspect-ratio: 1 / 1;
+ max-width: 464px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ img {
+ max-width: 100%;
+ max-height: 100%;
+ object-fit: contain;
+ }
+}
+
+.controls {
+ width: 100%;
+
+ @include tablet {
+ max-width: 320px;
+ flex-shrink: 0;
+ }
+}
+
+.section {
+ margin-bottom: 24px;
+ padding-bottom: 24px;
+ border-bottom: 1px solid $c-border;
+}
+
+.section_header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 8px;
+}
+
+.section_label {
+ display: block;
+ font-size: 12px;
+ color: $c-text-secondary;
+ font-weight: 600;
+}
+
+.item_id {
+ font-size: 12px;
+ font-weight: 600;
+ color: $c-text-secondary;
+}
+
+.colors {
+ display: flex;
+ gap: 8px;
+ flex-wrap: wrap;
+}
+
+.color_circle {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ border: 2px solid transparent;
+ cursor: pointer;
+ box-shadow: 0 0 0 1px $c-border inset;
+
+ &_active {
+ border-color: $c-text-primary;
+ box-shadow: 0 0 0 2px $c-bg-dark inset;
+ }
+}
+
+.capacities {
+ display: flex;
+ gap: 8px;
+ flex-wrap: wrap;
+}
+
+.cap_box {
+ border: 1px solid $c-border;
+ padding: 8px 16px;
+ font-size: 14px;
+ font-weight: 600;
+ color: $c-text-primary;
+ cursor: pointer;
+ transition: all 0.3s;
+
+ &_active {
+ background-color: $c-text-primary;
+ color: $c-bg-dark;
+ border-color: $c-text-primary;
+ }
+}
+
+.price_block {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 16px;
+}
+
+.price_discount {
+ font-size: 32px;
+ font-weight: 800;
+ color: $c-text-primary;
+}
+
+.price_regular {
+ font-size: 22px;
+ color: $c-text-secondary;
+ text-decoration: line-through;
+}
+
+.actions {
+ display: flex;
+ gap: 8px;
+ margin-bottom: 32px;
+ height: 48px;
+}
+
+.add_to_cart {
+ flex: 1;
+ background-color: #905BFF;
+ color: #fff;
+ border: none;
+ font-weight: 700;
+ font-size: 14px;
+ font-family: inherit;
+ cursor: pointer;
+ transition: background-color 0.3s;
+
+ &:not(.added_to_cart):hover {
+ background-color: #A378FF;
+ }
+}
+
+.added_to_cart {
+ background-color: transparent;
+ border: 1px solid $c-border;
+ color: #fff;
+}
+
+.fav_button {
+ width: 48px;
+ flex-shrink: 0;
+ background-color: transparent;
+ border: 1px solid $c-border;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ transition: border-color 0.3s;
+
+ &:hover {
+ border-color: $c-text-secondary;
+ }
+
+ &_active {
+ border-color: $c-border;
+ }
+}
+
+.fav_icon {
+ width: 16px;
+ height: 16px;
+}
+
+.quick_specs {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.spec_item {
+ display: flex;
+ justify-content: space-between;
+ font-size: 12px;
+
+ span:first-child {
+ color: $c-text-secondary;
+ }
+
+ span:last-child {
+ color: $c-text-primary;
+ font-weight: 600;
+ }
+}
+
+.details_grid {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 64px;
+ margin-bottom: 80px;
+
+ @include desktop {
+ grid-template-columns: 1fr 1fr;
+ }
+}
+
+.section_title {
+ font-size: 24px;
+ font-weight: 800;
+ color: $c-text-primary;
+ margin-bottom: 32px;
+ padding-bottom: 16px;
+ border-bottom: 1px solid $c-border;
+}
+
+.desc_block {
+ margin-bottom: 32px;
+
+ h3 {
+ font-size: 20px;
+ font-weight: 700;
+ color: $c-text-primary;
+ margin-bottom: 16px;
+ }
+
+ p {
+ font-size: 14px;
+ line-height: 1.5;
+ color: $c-text-secondary;
+ margin-bottom: 16px;
+ }
+}
+
+.specs_table {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.spec_row {
+ display: flex;
+ justify-content: space-between;
+ font-size: 14px;
+
+ span:first-child {
+ color: $c-text-secondary;
+ }
+
+ span:last-child {
+ color: $c-text-primary;
+ font-weight: 600;
+ text-align: right;
+ max-width: 60%;
+ }
+}
+
+.suggested {
+ margin-top: 80px;
+}
diff --git a/src/modules/ProductDetailsPage/ProductDetailsPage.tsx b/src/modules/ProductDetailsPage/ProductDetailsPage.tsx
new file mode 100644
index 00000000000..1de43bb52e4
--- /dev/null
+++ b/src/modules/ProductDetailsPage/ProductDetailsPage.tsx
@@ -0,0 +1,285 @@
+import { useEffect, useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { ProductDetails, Product } from '../../types/Product';
+import { getProductDetails, getSuggestedProducts } from '../../api/products';
+import { Breadcrumbs } from '../../components/Breadcrumbs/Breadcrumbs';
+import { ProductsSlider } from '../../components/ProductsSlider/ProductsSlider';
+import { useAppDispatch, useAppSelector } from '../../store/hooks';
+import { addToCart } from '../../store/cartSlice';
+import { toggleFavorite } from '../../store/favoritesSlice';
+import cn from 'classnames';
+import styles from './ProductDetailsPage.module.scss';
+import { getImageUrl } from '../../api/getImageUrl';
+
+const COLOR_HEX: RecordPage not found
+ + Go to Home page + +Loading...
;
+ }
+
+ if (!product) {
+ return Product not found
;
+ }
+
+ return (
+
+ ) => {
+ const product = action.payload;
+ const existingItem = state.items.find(
+ cartItem => cartItem.id === product.id,
+ );
+
+ if (existingItem) {
+ return;
+ }
+
+ state.items.push({
+ id: product.id,
+ quantity: 1,
+ product,
+ });
+ },
+
+ removeFromCart: (state, action: PayloadAction) => {
+ state.items = state.items.filter(
+ cartItem => cartItem.id !== action.payload,
+ );
+ },
+
+ updateQuantity: (
+ state,
+ action: PayloadAction<{ id: string; quantity: number }>,
+ ) => {
+ const { id, quantity } = action.payload;
+ const itemToUpdate = state.items.find(cartItem => cartItem.id === id);
+
+ if (itemToUpdate && quantity > 0) {
+ itemToUpdate.quantity = quantity;
+ }
+ },
+
+ clearCart: state => {
+ state.items = [];
+ },
+ },
+});
+
+export const { addToCart, removeFromCart, updateQuantity, clearCart } =
+ cartSlice.actions;
+
+export default cartSlice.reducer;
diff --git a/src/store/favoritesSlice.ts b/src/store/favoritesSlice.ts
new file mode 100644
index 00000000000..cd975207e49
--- /dev/null
+++ b/src/store/favoritesSlice.ts
@@ -0,0 +1,43 @@
+/* eslint-disable no-param-reassign */
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { Product } from '../types/Product';
+
+export interface FavoritesState {
+ items: Product[];
+}
+
+const loadFavoritesFromStorage = (): Product[] => {
+ try {
+ const saved = localStorage.getItem('favorites');
+
+ return saved ? JSON.parse(saved) : [];
+ } catch (e) {
+ return [];
+ }
+};
+
+const initialState: FavoritesState = {
+ items: loadFavoritesFromStorage(),
+};
+
+const favoritesSlice = createSlice({
+ name: 'favorites',
+ initialState,
+ reducers: {
+ toggleFavorite: (state, action: PayloadAction) => {
+ const product = action.payload;
+ const existingIndex = state.items.findIndex(
+ item => item.id === product.id,
+ );
+
+ if (existingIndex >= 0) {
+ state.items.splice(existingIndex, 1);
+ } else {
+ state.items.push(product);
+ }
+ },
+ },
+});
+
+export const { toggleFavorite } = favoritesSlice.actions;
+export default favoritesSlice.reducer;
diff --git a/src/store/hooks.ts b/src/store/hooks.ts
new file mode 100644
index 00000000000..f92270e7bd9
--- /dev/null
+++ b/src/store/hooks.ts
@@ -0,0 +1,5 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
+import type { RootState, AppDispatch } from './index';
+
+export const useAppDispatch: () => AppDispatch = useDispatch;
+export const useAppSelector: TypedUseSelectorHook = useSelector;
diff --git a/src/store/index.ts b/src/store/index.ts
new file mode 100644
index 00000000000..4660861fed4
--- /dev/null
+++ b/src/store/index.ts
@@ -0,0 +1,20 @@
+import { configureStore } from '@reduxjs/toolkit';
+import cartReducer from './cartSlice';
+import favoritesReducer from './favoritesSlice';
+
+export const store = configureStore({
+ reducer: {
+ cart: cartReducer,
+ favorites: favoritesReducer,
+ },
+});
+
+store.subscribe(() => {
+ const state = store.getState();
+
+ localStorage.setItem('cart', JSON.stringify(state.cart.items));
+ localStorage.setItem('favorites', JSON.stringify(state.favorites.items));
+});
+
+export type RootState = ReturnType;
+export type AppDispatch = typeof store.dispatch;
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
new file mode 100644
index 00000000000..b07ea2873db
--- /dev/null
+++ b/src/styles/_mixins.scss
@@ -0,0 +1,13 @@
+@import './variables';
+
+@mixin tablet {
+ @media (min-width: $bp-tablet) {
+ @content;
+ }
+}
+
+@mixin desktop {
+ @media (min-width: $bp-desktop) {
+ @content;
+ }
+}
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
new file mode 100644
index 00000000000..13e1d7f5d13
--- /dev/null
+++ b/src/styles/_variables.scss
@@ -0,0 +1,16 @@
+$c-bg-dark: #0F1121;
+$c-bg-card: #161827;
+$c-bg-elements: #161618;
+$c-text-primary: #fff;
+$c-text-secondary: #75767f;
+$c-accent-purple: #9056ec;
+$c-accent-red: #eb5757;
+$c-border: #323542;
+$c-primary: #905BFF;
+$c-primary-hover: #A378FF;
+$c-selected: #323542;
+$c-border: #323542;
+$font-family: 'Mont', sans-serif;
+$bp-mobile: 320px;
+$bp-tablet: 640px;
+$bp-desktop: 1200px;
diff --git a/src/types/CartItem.ts b/src/types/CartItem.ts
new file mode 100644
index 00000000000..e22f60a5541
--- /dev/null
+++ b/src/types/CartItem.ts
@@ -0,0 +1,7 @@
+import { Product } from './Product';
+
+export interface CartItem {
+ id: string;
+ quantity: number;
+ product: Product;
+}
diff --git a/src/types/Product.ts b/src/types/Product.ts
new file mode 100644
index 00000000000..90032fd2c8b
--- /dev/null
+++ b/src/types/Product.ts
@@ -0,0 +1,37 @@
+export interface Product {
+ id: string;
+ category: string;
+ phoneId?: string;
+ itemId?: string;
+ name: string;
+ fullPrice: number;
+ price: number;
+ priceRegular?: number;
+ priceDiscount?: number;
+ screen: string;
+ capacity: string;
+ color: string;
+ ram: string;
+ year: number;
+ image: string;
+ imageUrl?: string;
+ images?: string[];
+}
+
+export interface ProductDescription {
+ title: string;
+ text: string[];
+}
+
+export interface ProductDetails extends Product {
+ namespaceId: string;
+ capacityAvailable: string[];
+ colorsAvailable: string[];
+ description: ProductDescription[];
+ resolution: string;
+ processor: string;
+ zoom?: string;
+ cell: string[];
+ camera?: string;
+ images: string[];
+}
diff --git a/vite.config.ts b/vite.config.ts
index 5a33944a9b4..4c1c856a931 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,6 +2,10 @@ import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
-export default defineConfig({
- plugins: [react()],
-})
+export default defineConfig(({ command }) => {
+ return {
+ plugins: [react()],
+ // Якщо ти назвав репозиторій на гітхабі інакше — зміни назву між слешами
+ base: command === 'build' ? '/react_phone-catalog/' : '/',
+ };
+});
{product.name}
+ +
+
+ );
+};
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/RightsPage/RightsPage.module.scss b/src/modules/RightsPage/RightsPage.module.scss
new file mode 100644
index 00000000000..30fe610f81c
--- /dev/null
+++ b/src/modules/RightsPage/RightsPage.module.scss
@@ -0,0 +1,23 @@
+@import '../../styles/variables';
+
+.page {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 48px 16px;
+ text-align: center;
+ flex: 1;
+
+ &__title {
+ font-size: 32px;
+ font-weight: 800;
+ color: $c-text-primary;
+ margin-bottom: 24px;
+ }
+
+ &__text {
+ font-size: 16px;
+ line-height: 1.5;
+ color: $c-text-secondary;
+ font-weight: 600;
+ }
+}
diff --git a/src/modules/RightsPage/RightsPage.tsx b/src/modules/RightsPage/RightsPage.tsx
new file mode 100644
index 00000000000..e4148444a74
--- /dev/null
+++ b/src/modules/RightsPage/RightsPage.tsx
@@ -0,0 +1,14 @@
+import styles from './RightsPage.module.scss';
+
+export const RightsPage = () => {
+ return (
+
+
+
+
+ {product.images?.map(img => (
+
+ setMainImage(img)}
+ >
+ {/* ВИКОРИСТОВУЄМО getImageUrl */}
+ })
+
+ ))}
+
+ {/* ВИКОРИСТОВУЄМО getImageUrl */}
+ })
+
+
+
+
+
+
+
+ Available colors
+
+ ID:{' '}
+ {product.namespaceId
+ ? Math.floor(Math.random() * 900000) + 100000
+ : '802390'}
+
+
+
+
+ {product.colorsAvailable.map(color => (
+
+
+ handleColorChange(color)}
+ />
+ ))}
+
+
+ Select capacity
+
+
+
+ {product.capacityAvailable.map(cap => (
+
+ handleCapacityChange(cap)}
+ >
+ {cap}
+
+ ))}
+
+
+ ${product.priceDiscount || product.price}
+
+
+ ${product.priceRegular || product.fullPrice}
+
+
+
+
+
+
+
+
+
+
+
+ Screen {product.screen}
+
+
+ Resolution {product.resolution}
+
+
+ Processor {product.processor}
+
+
+ RAM {product.ram}
+
+
+
+
+
+
+
+ About
+ {product.description?.map(desc => ( +
+
+ ))}
+ {desc.title}
+ {desc.text.map((p, index) => ( +{p}
+ ))} +
+
+ Tech specs
+
+
+
+ Screen {product.screen}
+
+
+ Resolution {product.resolution}
+
+
+ Processor {product.processor}
+
+
+ RAM {product.ram}
+
+
+ Capacity {product.capacity}
+
+
+ Camera {product.camera}
+
+
+ Zoom {product.zoom}
+
+
+ Cell {product.cell?.join(', ') || 'N/A'}
+
+
+
+
+
+ );
+};
diff --git a/src/store/cartSlice.ts b/src/store/cartSlice.ts
new file mode 100644
index 00000000000..48a4c23a9af
--- /dev/null
+++ b/src/store/cartSlice.ts
@@ -0,0 +1,62 @@
+/* eslint-disable no-param-reassign */
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { CartItem } from '../types/CartItem';
+import { Product } from '../types/Product';
+
+export interface CartState {
+ items: CartItem[];
+}
+
+const initialState: CartState = {
+ items: [],
+};
+
+const cartSlice = createSlice({
+ name: 'cart',
+ initialState,
+ reducers: {
+ addToCart: (state, action: PayloadActionRights
+
+ All rights reserved © Nice Gadgets 2026.
+
+ Terms and conditions apply.
+