+ ${price}
+ {hasDiscount && ${fullPrice}}
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ if (loading) {
+ return Cart
+ +
+
+ Your cart is empty
+ + + Browse Phones + +
+
+
+
+ );
+ }
+
+ return (
+ Cart
+ +{error}
+ + +
+
+
+
+ );
+};
diff --git a/src/modules/CartPage/index.ts b/src/modules/CartPage/index.ts
new file mode 100644
index 00000000000..203fb0ea4bd
--- /dev/null
+++ b/src/modules/CartPage/index.ts
@@ -0,0 +1 @@
+export { CartPage } from './CartPage';
diff --git a/src/modules/FavoritesPage/FavoritesPage.module.scss b/src/modules/FavoritesPage/FavoritesPage.module.scss
new file mode 100644
index 00000000000..97dce66a1d5
--- /dev/null
+++ b/src/modules/FavoritesPage/FavoritesPage.module.scss
@@ -0,0 +1,59 @@
+.page {
+ max-width: var(--content-max-width);
+ margin: 0 auto;
+ padding: 40px 16px 80px;
+}
+
+.title {
+ font-size: 40px;
+ font-weight: 800;
+ color: var(--color-primary);
+ margin-bottom: 8px;
+}
+
+.count {
+ font-size: 14px;
+ color: var(--color-secondary);
+ margin-bottom: 32px;
+}
+
+.empty {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 16px;
+ padding: 48px 0;
+}
+
+.emptyText {
+ font-size: 20px;
+ font-weight: 600;
+ color: var(--color-secondary);
+}
+
+.emptyLink {
+ display: inline-flex;
+ align-items: center;
+ padding: 10px 24px;
+ background-color: var(--color-primary);
+ color: var(--color-bg);
+ font-size: 14px;
+ font-weight: 700;
+ border-radius: 8px;
+ transition: opacity var(--transition-base);
+
+ &:hover {
+ opacity: 0.8;
+ }
+}
+
+.errorText {
+ color: var(--color-red);
+ margin-bottom: 16px;
+}
+
+.noResults {
+ font-size: 16px;
+ color: var(--color-secondary);
+ padding: 24px 0;
+}
diff --git a/src/modules/FavoritesPage/FavoritesPage.tsx b/src/modules/FavoritesPage/FavoritesPage.tsx
new file mode 100644
index 00000000000..b67d85152f5
--- /dev/null
+++ b/src/modules/FavoritesPage/FavoritesPage.tsx
@@ -0,0 +1,78 @@
+import { useCallback, useMemo } from 'react';
+import { Link, useSearchParams } from 'react-router-dom';
+
+import { getProducts } from '../shared/api/apiClient';
+import { useAsync } from '../shared/hooks/useAsync';
+import { useFavorites } from '../shared/context';
+import { Loader } from '../shared/components/Loader';
+import { ProductsList } from '../shared/components/ProductsList';
+import styles from './FavoritesPage.module.scss';
+
+export const FavoritesPage = () => {
+ const { favorites } = useFavorites();
+ const [searchParams] = useSearchParams();
+ const query = (searchParams.get('query') ?? '').trim().toLowerCase();
+
+ const fetchProducts = useCallback(() => getProducts(), []);
+ const { data: products, loading, error, reload } = useAsync(fetchProducts);
+
+ const favoriteProducts = useMemo(
+ () => (products ?? []).filter(p => favorites.includes(p.itemId)),
+ [products, favorites],
+ );
+ const filteredFavorites = useMemo(() => {
+ if (!query) {
+ return favoriteProducts;
+ }
+
+ return favoriteProducts.filter(product =>
+ product.name.toLowerCase().includes(query),
+ );
+ }, [favoriteProducts, query]);
+
+ if (favorites.length === 0) {
+ return (
+ Cart
+ +
+
+ -
+ {rows.map(({ id, quantity, product }) => (
+
-
+
+
+
+
+ + + + {product.name} + + +
+ + + {quantity} + + ++ + + ${product.price * quantity} + +
+ ))}
+
+
+ + +
+ ${totalPrice}
+ ++ Total for{' '} + {totalQuantity === 1 ? '1 item' : `${totalQuantity} items`} +
+ ++ + +
+
+ );
+ }
+
+ if (loading) {
+ return Favorites
+
+
+ You have no favorite items yet.
+ + Browse Phones + +
+
+ );
+ }
+
+ return (
+ + Something went wrong: {String(error)} +
+ +
+
+ );
+};
diff --git a/src/modules/FavoritesPage/index.ts b/src/modules/FavoritesPage/index.ts
new file mode 100644
index 00000000000..cc5cab74bca
--- /dev/null
+++ b/src/modules/FavoritesPage/index.ts
@@ -0,0 +1 @@
+export { FavoritesPage } from './FavoritesPage';
diff --git a/src/modules/HomePage/HomePage.module.scss b/src/modules/HomePage/HomePage.module.scss
new file mode 100644
index 00000000000..457b72c820a
--- /dev/null
+++ b/src/modules/HomePage/HomePage.module.scss
@@ -0,0 +1,56 @@
+.page {
+ padding-bottom: 80px;
+}
+
+.heading {
+ font-size: 32px;
+ font-weight: 800;
+ color: var(--color-primary);
+ line-height: 1.3;
+ padding: 24px 0;
+
+ @media (min-width: 640px) {
+ font-size: 48px;
+ padding: 56px 0;
+ }
+}
+
+.picturesSlider {
+ width: 100%;
+ margin-bottom: 56px;
+
+ @media (min-width: 640px) {
+ margin-bottom: 64px;
+ }
+}
+
+.container {
+ max-width: var(--content-max-width);
+ margin: 0 auto;
+ padding: 0 16px;
+
+ @media (min-width: 1200px) {
+ max-width: 1360px;
+ }
+}
+
+.section {
+ width: 100%;
+ margin-bottom: 80px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+}
+
+.sectionTitle {
+ font-size: 22px;
+ font-weight: 800;
+ color: var(--color-primary);
+ margin-bottom: 24px;
+}
+
+.error {
+ color: var(--color-red);
+ font-size: 14px;
+}
diff --git a/src/modules/HomePage/HomePage.tsx b/src/modules/HomePage/HomePage.tsx
new file mode 100644
index 00000000000..fbf01fcbfcd
--- /dev/null
+++ b/src/modules/HomePage/HomePage.tsx
@@ -0,0 +1,114 @@
+import { useMemo } from 'react';
+
+import { getProducts } from '../shared/api/apiClient';
+import { Loader } from '../shared/components/Loader';
+import { PicturesSlider } from '../shared/components/PicturesSlider';
+import { ProductsSlider } from '../shared/components/ProductsSlider';
+import { ShopByCategory } from '../shared/components/ShopByCategory';
+import { useAsync } from '../shared/hooks/useAsync';
+import styles from './HomePage.module.scss';
+
+export const HomePage = () => {
+ const { data: products, loading, error, reload } = useAsync(getProducts);
+
+ const hotPriceProducts = useMemo(() => {
+ if (!products) {
+ return [];
+ }
+
+ return [...products]
+ .sort((a, b) => b.fullPrice - b.price - (a.fullPrice - a.price))
+ .slice(0, 16);
+ }, [products]);
+
+ const brandNewProducts = useMemo(() => {
+ if (!products) {
+ return [];
+ }
+
+ return [...products].sort((a, b) => b.year - a.year).slice(0, 16);
+ }, [products]);
+
+ const categoryCounts = useMemo(() => {
+ if (!products) {
+ return { phones: 0, tablets: 0, accessories: 0 };
+ }
+
+ return {
+ phones: products.filter(p => p.category === 'phones').length,
+ tablets: products.filter(p => p.category === 'tablets').length,
+ accessories: products.filter(p => p.category === 'accessories').length,
+ };
+ }, [products]);
+
+ return (
+ Favorites
+{filteredFavorites.length} items
+ + {filteredFavorites.length === 0 && query ? ( ++ There are no products matching the query +
+ ) : ( +
+
+ );
+};
diff --git a/src/modules/HomePage/index.ts b/src/modules/HomePage/index.ts
new file mode 100644
index 00000000000..0799f479a25
--- /dev/null
+++ b/src/modules/HomePage/index.ts
@@ -0,0 +1 @@
+export { HomePage } from './HomePage';
diff --git a/src/modules/NotFoundPage/NotFoundPage.module.scss b/src/modules/NotFoundPage/NotFoundPage.module.scss
new file mode 100644
index 00000000000..3694c13bb55
--- /dev/null
+++ b/src/modules/NotFoundPage/NotFoundPage.module.scss
@@ -0,0 +1,37 @@
+.page {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 80px 24px;
+ text-align: center;
+ gap: 24px;
+}
+
+.image {
+ max-width: 320px;
+ width: 100%;
+}
+
+.title {
+ font-size: 32px;
+ font-weight: 800;
+ color: var(--color-primary);
+}
+
+.link {
+ display: inline-flex;
+ align-items: center;
+ padding: 12px 32px;
+ background-color: var(--color-primary);
+ color: var(--color-bg);
+ font-size: 14px;
+ font-weight: 700;
+ letter-spacing: 0.4px;
+ border-radius: 2px;
+ transition: opacity var(--transition-base);
+
+ &:hover {
+ opacity: 0.8;
+ }
+}
diff --git a/src/modules/NotFoundPage/NotFoundPage.tsx b/src/modules/NotFoundPage/NotFoundPage.tsx
new file mode 100644
index 00000000000..6dc0869bb63
--- /dev/null
+++ b/src/modules/NotFoundPage/NotFoundPage.tsx
@@ -0,0 +1,17 @@
+import { Link } from 'react-router-dom';
+
+import styles from './NotFoundPage.module.scss';
+
+export const NotFoundPage = () => (
+
+
+
+ Product Catalog
+Welcome to Nice Gadgets store!
+
+
+
+
+
+
+
+ {loading &&
+
+
+
+
+
+ {loading &&
+
+ + {error}{' '} + +
+ )} + + {!loading && !error && ( ++ Shop by category +
+ ++ {error}{' '} + +
+ )} + + {!loading && !error && ( +
+ 
+
+);
diff --git a/src/modules/NotFoundPage/index.ts b/src/modules/NotFoundPage/index.ts
new file mode 100644
index 00000000000..642c600088e
--- /dev/null
+++ b/src/modules/NotFoundPage/index.ts
@@ -0,0 +1 @@
+export { NotFoundPage } from './NotFoundPage';
diff --git a/src/modules/ProductDetailsPage/ProductDetailsPage.module.scss b/src/modules/ProductDetailsPage/ProductDetailsPage.module.scss
new file mode 100644
index 00000000000..602b4b4f6c8
--- /dev/null
+++ b/src/modules/ProductDetailsPage/ProductDetailsPage.module.scss
@@ -0,0 +1,482 @@
+.page {
+ max-width: var(--content-max-width);
+ margin: 0 auto;
+ padding: 40px 16px 80px;
+}
+
+.statusBlock {
+ margin: 40px auto 0;
+ max-width: 560px;
+ padding: 32px;
+ border: 1px solid var(--color-border);
+ background: var(--color-card);
+}
+
+.statusTitle {
+ font-size: 32px;
+ font-weight: 800;
+ color: var(--color-primary);
+ margin-bottom: 12px;
+}
+
+.statusText {
+ font-size: 14px;
+ color: var(--color-secondary);
+ margin-bottom: 24px;
+}
+
+.statusActions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 12px;
+}
+
+.statusPrimaryBtn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ height: 40px;
+ padding: 0 24px;
+ border: 1px solid transparent;
+ background: var(--color-accent);
+ color: var(--color-white);
+ font-size: 14px;
+ font-weight: 700;
+ transition: background-color var(--transition-base);
+
+ &:hover {
+ background: var(--color-accent-hover);
+ }
+}
+
+.statusSecondaryLink {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ height: 40px;
+ padding: 0 24px;
+ border: 1px solid var(--color-border);
+ color: var(--color-primary);
+ font-size: 14px;
+ font-weight: 700;
+ transition: border-color var(--transition-base);
+
+ &:hover {
+ border-color: var(--color-primary);
+ }
+}
+
+.backBtn {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ font-size: 14px;
+ font-weight: 700;
+ color: var(--color-secondary);
+ margin-bottom: 16px;
+ transition: color var(--transition-base);
+
+ &:hover {
+ color: var(--color-primary);
+ }
+}
+
+.breadcrumb {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 12px;
+ margin-bottom: 24px;
+}
+
+.breadcrumbLink {
+ color: var(--color-secondary);
+ transition: color var(--transition-base);
+
+ &:hover {
+ color: var(--color-primary);
+ }
+}
+
+.breadcrumbSep {
+ color: var(--color-secondary);
+}
+
+.breadcrumbCurrent {
+ color: var(--color-primary);
+ font-weight: 700;
+}
+
+.title {
+ font-size: 32px;
+ font-weight: 800;
+ color: var(--color-primary);
+ margin-bottom: 32px;
+}
+
+.hero {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 16px;
+ margin-bottom: 56px;
+
+ @media (min-width: 900px) {
+ grid-template-columns: 80px minmax(0, 560px) minmax(280px, 320px);
+ gap: 64px;
+ align-items: start;
+ }
+}
+
+.selectors {
+ margin-bottom: 24px;
+}
+
+.selectorGroup {
+ margin-bottom: 16px;
+ padding-bottom: 16px;
+ border-bottom: 1px solid var(--color-border);
+}
+
+.selectorGroup:last-child {
+ margin-bottom: 0;
+}
+
+.selectorHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 12px;
+}
+
+.selectorLabel {
+ font-size: 12px;
+ color: var(--color-secondary);
+ margin-bottom: 8px;
+}
+
+.productCode {
+ font-size: 12px;
+ color: var(--color-secondary);
+ margin-bottom: 8px;
+}
+
+.colorList {
+ display: flex;
+ gap: 8px;
+}
+
+.colorInput {
+ position: absolute;
+ opacity: 0;
+ pointer-events: none;
+}
+
+.colorBtn {
+ display: block;
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ cursor: pointer;
+ border: 2px solid var(--color-bg);
+ box-shadow: 0 0 0 1px var(--color-border);
+ transition: box-shadow var(--transition-base);
+
+ &:hover {
+ box-shadow: 0 0 0 1px var(--color-secondary);
+ }
+ .colorInput:checked + & {
+ box-shadow: 0 0 0 2px var(--color-primary);
+ }
+}
+
+.capacityList {
+ display: flex;
+ gap: 8px;
+ flex-wrap: wrap;
+}
+
+.capacityInput {
+ position: absolute;
+ opacity: 0;
+ pointer-events: none;
+}
+
+.capacityBtn {
+ display: inline-flex;
+ cursor: pointer;
+ padding: 8px 16px;
+ border: 1px solid var(--color-border);
+ border-radius: 4px;
+ font-size: 14px;
+ font-weight: 700;
+ color: var(--color-primary);
+ transition:
+ border-color var(--transition-base),
+ background-color var(--transition-base),
+ color var(--transition-base);
+
+ &:hover {
+ border-color: var(--color-primary);
+ }
+
+ .capacityInput:checked + & {
+ background-color: var(--color-primary);
+ color: var(--color-bg);
+ border-color: var(--color-primary);
+ }
+}
+
+.thumbnails {
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+ overflow-x: auto;
+ order: 2;
+
+ @media (min-width: 900px) {
+ flex-direction: column;
+ overflow: visible;
+ order: 1;
+ }
+}
+
+.thumbBtn {
+ width: 80px;
+ height: 80px;
+ border: 2px solid var(--color-border);
+ border-radius: 8px;
+ overflow: hidden;
+ padding: 4px;
+ transition: border-color var(--transition-base);
+
+ &:hover {
+ border-color: var(--color-secondary);
+ }
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ }
+}
+
+.thumbBtnActive {
+ border-color: var(--color-primary);
+}
+
+.details {
+ order: 3;
+
+ @media (min-width: 900px) {
+ order: 3;
+ max-width: 320px;
+ }
+}
+
+.priceRow {
+ display: flex;
+ align-items: baseline;
+ gap: 8px;
+ margin: 0 0 16px;
+}
+
+.priceDiscount {
+ font-size: 32px;
+ font-weight: 800;
+ color: var(--color-primary);
+ line-height: 1;
+}
+
+.priceRegular {
+ font-size: 22px;
+ color: var(--color-secondary);
+ text-decoration: line-through;
+}
+
+.actions {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+ margin-bottom: 24px;
+}
+
+.cartButton {
+ flex: 1;
+ height: 48px;
+ background-color: var(--color-accent);
+ color: var(--color-white);
+ font-size: 14px;
+ font-weight: 600;
+ letter-spacing: 0.4px;
+ border-radius: 0;
+ border: 1px solid transparent;
+ transition:
+ background-color var(--transition-base),
+ color var(--transition-base),
+ border-color var(--transition-base);
+
+ &:hover {
+ background-color: var(--color-accent-hover);
+ border-color: var(--color-accent-hover);
+ color: var(--color-white);
+ }
+}
+
+.cartButtonAdded {
+ background-color: var(--color-surface);
+ color: var(--color-primary);
+ border-color: var(--color-primary);
+ cursor: default;
+}
+
+.favoriteButton {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ width: 48px;
+ height: 48px;
+ border: 1px solid var(--color-border);
+ border-radius: 0;
+ color: var(--color-primary);
+ transition: border-color var(--transition-base);
+
+ &:hover {
+ border-color: var(--color-primary);
+ }
+}
+
+.favoriteButtonActive {
+ color: var(--color-red);
+ border-color: var(--color-red);
+
+ svg {
+ fill: currentColor;
+ }
+}
+
+.shortSpecs {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.shortSpecRow {
+ display: flex;
+ justify-content: space-between;
+ gap: 12px;
+ font-size: 12px;
+}
+
+.shortSpecLabel {
+ color: var(--color-secondary);
+}
+
+.shortSpecValue {
+ color: var(--color-primary);
+ font-weight: 700;
+ text-align: right;
+}
+
+.infoGrid {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 56px;
+ margin-bottom: 56px;
+
+ @media (min-width: 900px) {
+ grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
+ gap: 64px;
+ align-items: start;
+ }
+}
+
+.about {
+ border-top: 1px solid var(--color-border);
+ padding-top: 32px;
+}
+
+.aboutTitle {
+ font-size: 22px;
+ font-weight: 800;
+ color: var(--color-primary);
+ margin-bottom: 32px;
+}
+
+.aboutSection {
+ margin-bottom: 32px;
+}
+
+.aboutSectionTitle {
+ font-size: 20px;
+ font-weight: 700;
+ color: var(--color-primary);
+ margin-bottom: 16px;
+}
+
+.aboutText {
+ font-size: 14px;
+ line-height: 1.75;
+ color: var(--color-secondary);
+
+ & + & {
+ margin-top: 12px;
+ }
+}
+
+.techSpecs {
+ border-top: 1px solid var(--color-border);
+ padding-top: 32px;
+}
+
+.techSpecsTitle {
+ font-size: 22px;
+ font-weight: 800;
+ color: var(--color-primary);
+ margin-bottom: 24px;
+}
+
+.specRow {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 8px 0;
+ border-bottom: 1px solid var(--color-border);
+}
+
+.specLabel {
+ font-size: 14px;
+ color: var(--color-secondary);
+}
+
+.specValue {
+ font-size: 14px;
+ font-weight: 700;
+ color: var(--color-primary);
+ text-align: right;
+ max-width: 60%;
+}
+
+.suggested {
+ border-top: 1px solid var(--color-border);
+ padding-top: 32px;
+ margin-bottom: 56px;
+}
+
+.mainImage {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 320px;
+ order: 1;
+
+ img {
+ max-height: 520px;
+ max-width: 100%;
+ object-fit: contain;
+ }
+
+ @media (min-width: 900px) {
+ order: 2;
+ }
+}
diff --git a/src/modules/ProductDetailsPage/ProductDetailsPage.tsx b/src/modules/ProductDetailsPage/ProductDetailsPage.tsx
new file mode 100644
index 00000000000..1277ff6c476
--- /dev/null
+++ b/src/modules/ProductDetailsPage/ProductDetailsPage.tsx
@@ -0,0 +1,555 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Link, useNavigate, useParams } from 'react-router-dom';
+
+import {
+ getCategoryProductDetails,
+ getProductDetails,
+ getProducts,
+ getSuggestedProducts,
+} from '../shared/api/apiClient';
+import { ProductsSlider } from '../shared/components/ProductsSlider';
+import { useAsync } from '../shared/hooks/useAsync';
+import { Loader } from '../shared/components/Loader';
+import { useCart, useFavorites } from '../shared/context';
+import type { ProductCategory } from '../shared/types/product';
+import type { ProductDetails } from '../shared/types/productDetails';
+import styles from './ProductDetailsPage.module.scss';
+
+const CATEGORY_LABELS: Record
+ Page not found
+ + Go to home page + +
+
+ );
+ }
+
+ if (!product) {
+ const categoryPath = fallbackCategory ? `/${fallbackCategory}` : '/';
+ const categoryLabel = fallbackCategory
+ ? CATEGORY_LABELS[fallbackCategory]
+ : 'Home';
+
+ const handleFallbackBack = () => {
+ if (window.history.state?.idx > 0) {
+ navigate(-1);
+ } else {
+ navigate(categoryPath);
+ }
+ };
+
+ return (
+
+
+ Something went wrong
+{String(error)}
+
+
+
+
+
+ );
+ }
+
+ const category = product.category;
+
+ const handleBack = () => {
+ if (window.history.state?.idx > 0) {
+ navigate(-1);
+ } else {
+ navigate(`/${category}`);
+ }
+ };
+
+ const handleVariantChange = (nextColor: string, nextCapacity: string) => {
+ const matchedId = findVariantId(
+ product.namespaceId,
+ nextColor,
+ nextCapacity,
+ variants ?? [],
+ );
+
+ if (!matchedId || matchedId === productId) {
+ return;
+ }
+
+ navigate(`/product/${matchedId}`, { replace: true });
+ };
+
+ const handleSuggestedOpen = () => {
+ window.scrollTo({ top: 0, behavior: 'smooth' });
+ };
+
+ const inCart = isInCart(product.id);
+ const favorite = isFavorite(product.id);
+
+ return (
+
+
+ Product was not found
++ The requested product does not exist or has no details. +
+
+
+
+
+ Go to {categoryLabel}
+
+
+
+
+
+
+
+
+ {suggestedLoading && !suggested?.length &&
+
+ );
+};
diff --git a/src/modules/ProductDetailsPage/index.ts b/src/modules/ProductDetailsPage/index.ts
new file mode 100644
index 00000000000..ec50c119343
--- /dev/null
+++ b/src/modules/ProductDetailsPage/index.ts
@@ -0,0 +1 @@
+export { ProductDetailsPage } from './ProductDetailsPage';
diff --git a/src/modules/ProductsPage/ProductsPage.module.scss b/src/modules/ProductsPage/ProductsPage.module.scss
new file mode 100644
index 00000000000..de6a3cb320b
--- /dev/null
+++ b/src/modules/ProductsPage/ProductsPage.module.scss
@@ -0,0 +1,167 @@
+.page {
+ max-width: var(--content-max-width);
+ margin: 0 auto;
+ padding: 40px 16px 80px;
+
+ @media (min-width: 1200px) {
+ padding: 24px 32px 80px;
+ }
+}
+
+.breadcrumb {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 24px;
+}
+
+.breadcrumbLink {
+ display: inline-flex;
+ color: var(--color-primary);
+}
+
+.breadcrumbSep,
+.breadcrumbCurrent {
+ font-size: 12px;
+ color: var(--color-secondary);
+}
+
+.title {
+ font-size: 48px;
+ font-weight: 800;
+ line-height: 1.15;
+ color: var(--color-primary);
+ margin-bottom: 8px;
+}
+
+.count {
+ font-size: 14px;
+ color: var(--color-secondary);
+ margin-bottom: 40px;
+}
+
+.status {
+ font-size: 16px;
+ color: var(--color-secondary);
+ margin-bottom: 16px;
+}
+
+.reloadBtn {
+ padding: 12px 24px;
+ background-color: var(--color-primary);
+ color: var(--color-bg);
+ font-size: 14px;
+ font-weight: 700;
+ border-radius: 8px;
+}
+
+.noResults {
+ font-size: 16px;
+ color: var(--color-secondary);
+ padding: 40px 0;
+}
+
+.controls {
+ display: flex;
+ gap: 16px;
+ flex-wrap: wrap;
+ margin-bottom: 32px;
+}
+
+.controlGroup {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.controlLabel {
+ font-size: 12px;
+ font-weight: 600;
+ color: var(--color-secondary);
+ text-transform: none;
+ letter-spacing: 0;
+}
+
+.selectWrapper {
+ position: relative;
+
+ &::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ right: 12px;
+ width: 0;
+ height: 0;
+ transform: translateY(-50%);
+ border-top: 5px solid var(--color-primary);
+ border-right: 4px solid transparent;
+ border-left: 4px solid transparent;
+ pointer-events: none;
+ }
+}
+
+.select {
+ height: 56px;
+ min-width: 136px;
+ padding: 0 36px 0 16px;
+ border: 1px solid transparent;
+ border-radius: 0;
+ background-color: #323542;
+ color: var(--color-primary);
+ font-size: 22px;
+ font-weight: 700;
+ cursor: pointer;
+ appearance: none;
+ transition: border-color var(--transition-base);
+
+ &:hover,
+ &:focus {
+ border-color: var(--color-icons);
+ outline: none;
+ }
+}
+
+.selectWide {
+ width: 176px;
+}
+
+.selectNarrow {
+ width: 128px;
+}
+
+.pagination {
+ display: flex;
+ gap: 8px;
+ justify-content: center;
+ flex-wrap: wrap;
+ margin-top: 40px;
+}
+
+.pageBtn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 32px;
+ height: 32px;
+ padding: 0 8px;
+ border: 1px solid var(--color-border);
+ border-radius: 8px;
+ background-color: var(--color-surface);
+ color: var(--color-primary);
+ font-size: 14px;
+ font-weight: 700;
+ transition:
+ border-color var(--transition-base),
+ background-color var(--transition-base),
+ color var(--transition-base);
+
+ &:hover {
+ border-color: var(--color-primary);
+ }
+}
+
+.pageBtnActive {
+ background-color: var(--color-primary);
+ color: var(--color-bg);
+ border-color: var(--color-primary);
+}
diff --git a/src/modules/ProductsPage/ProductsPage.tsx b/src/modules/ProductsPage/ProductsPage.tsx
new file mode 100644
index 00000000000..e600fc2beb7
--- /dev/null
+++ b/src/modules/ProductsPage/ProductsPage.tsx
@@ -0,0 +1,343 @@
+import { type ChangeEvent, useCallback, useEffect, useMemo } from 'react';
+import { Link, useSearchParams } from 'react-router-dom';
+import cn from 'classnames';
+
+import { getProducts } from '../shared/api/apiClient';
+import { useAsync } from '../shared/hooks/useAsync';
+import { ProductsList } from '../shared/components/ProductsList';
+import { Loader } from '../shared/components/Loader';
+import type { Product, ProductCategory } from '../shared/types/product';
+import styles from './ProductsPage.module.scss';
+
+type SortKey = 'age' | 'title' | 'price';
+type PerPage = '4' | '8' | '16' | 'all';
+
+type Props = {
+ category: ProductCategory;
+};
+
+type ParamsUpdate = {
+ query?: string;
+ sort?: SortKey;
+ perPage?: PerPage;
+ page?: number;
+};
+
+const TITLES: Record{product.name}
+ +
+
+
+ -
+ {product.images.map(img => (
+
- + + + ))} +
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+ Available colors
+ {productCode && ( +ID: {productCode}
+ )} +-
+ {product.colorsAvailable.map(color => (
+
- + + handleVariantChange(color, product.capacity) + } + className={styles.colorInput} + /> + + + ))} +
+
+ Select capacity
+-
+ {product.capacityAvailable.map(cap => (
+
- + handleVariantChange(product.color, cap)} + className={styles.capacityInput} + /> + + + ))} +
+
+ ${product.priceDiscount}
+
+ ${product.priceRegular}
+
+
+
+
+
+
+
+
+
+
+
+ Screen
+ {product.screen}
+
+
+ Resolution
+
+ {product.resolution}
+
+
+
+ Processor
+ {product.processor}
+
+
+ RAM
+ {product.ram}
+
+
+
+
+
+
+
+
+
+ About
+ {product.description.map(section => ( +
+
+ ))}
+ {section.title}
+ {section.text.map(paragraph => ( ++ {paragraph} +
+ ))} +Tech specs
+ {[ + { label: 'Screen', value: product.screen }, + { label: 'Resolution', value: product.resolution }, + { label: 'Processor', value: product.processor }, + { label: 'RAM', value: product.ram }, + { label: 'Capacity', value: product.capacity }, + ...(product.camera + ? [{ label: 'Camera', value: product.camera }] + : []), + ...(product.zoom ? [{ label: 'Zoom', value: product.zoom }] : []), + { label: 'Cell', value: product.cell.join(', ') }, + ].map(({ label, value }) => ( +
+ {label}
+ {value}
+
+ ))}
+
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+ );
+ }
+
+ if (products?.length === 0) {
+ return (
+ Something went wrong: {error}
+ +
+
+ );
+ }
+
+ return (
+ {TITLES[category]}
++ There are no {TITLES[category].toLowerCase()} yet +
+
+
+
+
+ );
+};
diff --git a/src/modules/ProductsPage/index.ts b/src/modules/ProductsPage/index.ts
new file mode 100644
index 00000000000..0569c38ebe0
--- /dev/null
+++ b/src/modules/ProductsPage/index.ts
@@ -0,0 +1 @@
+export { ProductsPage } from './ProductsPage';
diff --git a/src/modules/shared/api/apiClient.ts b/src/modules/shared/api/apiClient.ts
new file mode 100644
index 00000000000..2e62cb60ca4
--- /dev/null
+++ b/src/modules/shared/api/apiClient.ts
@@ -0,0 +1,75 @@
+import type { Product, ProductCategory } from '../types/product';
+import type { ProductDetails } from '../types/productDetails';
+import {
+ detailsImagesOverrides,
+ productImageOverrides,
+} from '../config/imageOverrides';
+
+const BASE_URL = `${import.meta.env.BASE_URL}api`;
+
+const fetchJson = async {TITLES[category]}
+{totalItems} models
+ +
+
+
+ {totalItems === 0 && query ? (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + There are no {TITLES[category].toLowerCase()} matching «{query}» +
+ ) : ( +
+ {Array.from({ length: totalPages }, (_, i) => i + 1).map(p => (
+
+ ))}
+
+ )}
+
+
+
+
+
+);
diff --git a/src/modules/shared/components/AppLayout/index.ts b/src/modules/shared/components/AppLayout/index.ts
new file mode 100644
index 00000000000..763c036689d
--- /dev/null
+++ b/src/modules/shared/components/AppLayout/index.ts
@@ -0,0 +1 @@
+export { AppLayout } from './AppLayout';
diff --git a/src/modules/shared/components/Footer/Footer.module.scss b/src/modules/shared/components/Footer/Footer.module.scss
new file mode 100644
index 00000000000..ee2f7145642
--- /dev/null
+++ b/src/modules/shared/components/Footer/Footer.module.scss
@@ -0,0 +1,109 @@
+.footer {
+ background-color: var(--color-header-bg);
+ border-top: 1px solid var(--color-header-border);
+}
+
+.inner {
+ max-width: 1360px;
+ margin: 0 auto;
+ padding: 0 16px;
+ height: 80px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ @media (max-width: 639px) {
+ height: auto;
+ min-height: 250px;
+ width: 100%;
+ padding: 24px 20px;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: center;
+ gap: 12px;
+ }
+}
+
+.logo {
+ font-size: 11px;
+ font-weight: 800;
+ color: var(--color-header-text);
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ line-height: 1.4;
+}
+
+.logoOk {
+ display: inline-block;
+ color: #f8d449;
+ font-size: 10px;
+ line-height: 1;
+ transform: translateY(-2px);
+}
+
+.nav {
+ display: flex;
+ gap: 32px;
+
+ @media (max-width: 639px) {
+ flex-direction: column;
+ gap: 10px;
+ align-items: flex-start;
+ }
+}
+
+.link {
+ font-size: 12px;
+ font-weight: 700;
+ letter-spacing: 1px;
+ text-transform: uppercase;
+ color: #f1f2f9;
+
+ &:hover {
+ color: var(--color-header-text);
+ }
+}
+
+.backToTop {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ color: var(--color-secondary);
+
+ @media (max-width: 639px) {
+ gap: 8px;
+ align-self: center;
+ margin-top: 20px;
+ }
+
+ &:hover {
+ color: var(--color-header-text);
+ }
+}
+
+.backToTopText {
+ font-size: 12px;
+ font-weight: 700;
+ letter-spacing: 1px;
+ text-transform: uppercase;
+
+ @media (max-width: 639px) {
+ letter-spacing: 0.5px;
+ text-transform: none;
+ }
+}
+
+.backToTopIcon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 36px;
+ height: 36px;
+ background-color: rgba(255, 255, 255, 0.12);
+ color: var(--color-white);
+ transition: background-color var(--transition-base);
+
+ .backToTop:hover & {
+ background-color: rgba(255, 255, 255, 0.2);
+ }
+}
diff --git a/src/modules/shared/components/Footer/Footer.tsx b/src/modules/shared/components/Footer/Footer.tsx
new file mode 100644
index 00000000000..6741c4789f9
--- /dev/null
+++ b/src/modules/shared/components/Footer/Footer.tsx
@@ -0,0 +1,69 @@
+import styles from './Footer.module.scss';
+
+const GITHUB_REPO_URL = 'https://github.com/ProKesha/react_phone-catalog';
+const GITHUB_PROFILE_URL = 'https://github.com/ProKesha';
+const LICENSE_URL =
+ 'https://github.com/ProKesha/react_phone-catalog/blob/HEAD/LICENSE';
+
+const handleScrollToTop = () => {
+ window.scrollTo({ top: 0, behavior: 'smooth' });
+};
+
+export const Footer = () => (
+
+);
diff --git a/src/modules/shared/components/Footer/index.ts b/src/modules/shared/components/Footer/index.ts
new file mode 100644
index 00000000000..65e2506faf5
--- /dev/null
+++ b/src/modules/shared/components/Footer/index.ts
@@ -0,0 +1 @@
+export { Footer } from './Footer';
diff --git a/src/modules/shared/components/Header/Header.module.scss b/src/modules/shared/components/Header/Header.module.scss
new file mode 100644
index 00000000000..4326f4bedde
--- /dev/null
+++ b/src/modules/shared/components/Header/Header.module.scss
@@ -0,0 +1,299 @@
+.header {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: var(--header-height);
+ background-color: var(--color-header-bg);
+ border-bottom: 1px solid var(--color-header-border);
+ z-index: 100;
+}
+
+.inner {
+ display: flex;
+ align-items: stretch;
+ justify-content: space-between;
+ height: 100%;
+}
+
+.left {
+ display: flex;
+ align-items: stretch;
+}
+
+.logo {
+ display: flex;
+ align-items: center;
+ padding: 0 24px;
+ flex-shrink: 0;
+
+ &Text {
+ font-size: 10px;
+ font-weight: 800;
+ color: var(--color-header-text);
+ text-transform: uppercase;
+ letter-spacing: 0.8px;
+ line-height: 1.3;
+ }
+
+ &Ok {
+ display: inline-block;
+ color: #f8d449;
+ font-size: 9px;
+ line-height: 1;
+ transform: translateY(-2px);
+ }
+}
+
+.nav {
+ display: flex;
+ align-items: stretch;
+
+ @media (max-width: 639px) {
+ display: none;
+ }
+}
+
+.navLink {
+ display: flex;
+ align-items: center;
+ padding: 0 16px;
+ font-size: 12px;
+ font-weight: 700;
+ letter-spacing: 1px;
+ text-transform: uppercase;
+ color: var(--color-secondary);
+ position: relative;
+
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 16px;
+ right: 16px;
+ height: 3px;
+ background-color: transparent;
+ transition: background-color var(--transition-base);
+ }
+
+ &:hover {
+ color: var(--color-header-text);
+
+ &::after {
+ background-color: var(--color-header-text);
+ }
+ }
+}
+
+.navLinkActive {
+ color: var(--color-header-text);
+
+ &::after {
+ background-color: var(--color-header-text);
+ }
+}
+
+.actions {
+ display: flex;
+ align-items: stretch;
+
+ @media (max-width: 639px) {
+ display: none;
+ }
+}
+
+.iconLink svg,
+.mobileIconLink svg {
+ transition: opacity var(--transition-base);
+}
+
+.iconLink {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 64px;
+ border-left: 1px solid var(--color-header-border);
+ color: var(--color-header-text);
+ position: relative;
+
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 3px;
+ background-color: transparent;
+ transition: background-color var(--transition-base);
+ }
+
+ &:hover svg {
+ opacity: 0.7;
+ }
+}
+
+.iconLinkActive {
+ &::after {
+ background-color: var(--color-header-text);
+ }
+}
+
+.hamburger {
+ display: none;
+ align-items: center;
+ justify-content: center;
+ width: 64px;
+ border-left: 1px solid var(--color-header-border);
+ color: var(--color-header-text);
+ flex-shrink: 0;
+
+ @media (max-width: 639px) {
+ display: flex;
+ }
+}
+
+.mobileMenu {
+ position: fixed;
+ inset: var(--header-height) 0 0 0;
+ background-color: var(--color-header-bg);
+ z-index: 99;
+ display: flex;
+ flex-direction: column;
+ border-top: 1px solid var(--color-header-border);
+}
+
+.mobileNav {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
+ padding-top: 24px;
+}
+
+.mobileNavLink {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ padding: 20px 24px;
+ font-size: 12px;
+ font-weight: 700;
+ letter-spacing: 1px;
+ text-transform: uppercase;
+ color: var(--color-secondary);
+ border-bottom: none;
+ transition: color var(--transition-base);
+
+ &:hover {
+ color: var(--color-header-text);
+ }
+}
+
+.mobileNavLinkActive {
+ color: var(--color-header-text);
+}
+
+.mobileActions {
+ margin-top: auto;
+ display: flex;
+ border-top: 1px solid var(--color-header-border);
+}
+
+.mobileIconLink {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex: 1;
+ height: 64px;
+ border-right: 1px solid var(--color-header-border);
+ color: var(--color-secondary);
+ position: relative;
+
+ &:last-child {
+ border-right: none;
+ }
+
+ &:hover svg {
+ opacity: 0.7;
+ }
+}
+
+.mobileIconLinkActive {
+ color: var(--color-header-text);
+
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 3px;
+ background-color: var(--color-header-text);
+ }
+}
+
+.search {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 0 16px;
+ border-left: 1px solid var(--color-header-border);
+ min-width: 176px;
+}
+
+.searchIcon {
+ flex-shrink: 0;
+ color: var(--color-secondary);
+}
+
+.searchInput {
+ flex: 1;
+ background: transparent;
+ border: none;
+ outline: none;
+ color: var(--color-header-text);
+ font-size: 14px;
+ min-width: 0;
+
+ &::placeholder {
+ color: var(--color-secondary);
+ }
+
+ &::-webkit-search-cancel-button {
+ display: none;
+ }
+}
+
+.searchClear {
+ background: none;
+ border: none;
+ padding: 0;
+ color: var(--color-secondary);
+ cursor: pointer;
+ font-size: 14px;
+ line-height: 1;
+ flex-shrink: 0;
+ transition: color var(--transition-base);
+
+ &:hover {
+ color: var(--color-header-text);
+ }
+}
+
+.badge {
+ position: absolute;
+ top: 8px;
+ right: 8px;
+ min-width: 16px;
+ height: 16px;
+ background-color: var(--color-red);
+ color: var(--color-white);
+ border-radius: 8px;
+ font-size: 10px;
+ font-weight: 700;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0 4px;
+ pointer-events: none;
+}
diff --git a/src/modules/shared/components/Header/Header.tsx b/src/modules/shared/components/Header/Header.tsx
new file mode 100644
index 00000000000..0f6c96c46bc
--- /dev/null
+++ b/src/modules/shared/components/Header/Header.tsx
@@ -0,0 +1,319 @@
+import { type ChangeEvent, useEffect, useState } from 'react';
+import { NavLink, useLocation, useSearchParams } from 'react-router-dom';
+import cn from 'classnames';
+
+import { useDebounce } from '../../hooks/useDebounce';
+import { useCart, useFavorites } from '../../context';
+import styles from './Header.module.scss';
+
+type NavLinkState = { isActive: boolean };
+
+const NAV_LINKS = [
+ { path: '/', label: 'Home', end: true },
+ { path: '/phones', label: 'Phones', end: false },
+ { path: '/tablets', label: 'Tablets', end: false },
+ { path: '/accessories', label: 'Accessories', end: false },
+];
+
+const SEARCH_ROUTES = ['/phones', '/tablets', '/accessories', '/favorites'];
+
+const SEARCH_PLACEHOLDER: Record
+
+
+ {isMenuOpen && (
+
+
+
+ Nice 👌
+
+ Gadgets + +
+
+
+
+
+ + Gadgets + +
+ {showSearch && (
+
+ {favoritesCount > 0 && (
+ {favoritesCount}
+ )}
+
+
+
+
+ {cartCount > 0 && {cartCount}}
+
+
+
+
+
+
+
+
+
+
+ {inputValue && (
+
+ )}
+
+ )}
+
+
+
+
+
+ )}
+
+
+ {favoritesCount > 0 && (
+ {favoritesCount}
+ )}
+
+
+
+
+ {cartCount > 0 && (
+ {cartCount}
+ )}
+
+
+
+
+
+
+);
diff --git a/src/modules/shared/components/Loader/index.ts b/src/modules/shared/components/Loader/index.ts
new file mode 100644
index 00000000000..d7027885251
--- /dev/null
+++ b/src/modules/shared/components/Loader/index.ts
@@ -0,0 +1 @@
+export { Loader } from './Loader';
diff --git a/src/modules/shared/components/PicturesSlider/PicturesSlider.module.scss b/src/modules/shared/components/PicturesSlider/PicturesSlider.module.scss
new file mode 100644
index 00000000000..954b35a2c7e
--- /dev/null
+++ b/src/modules/shared/components/PicturesSlider/PicturesSlider.module.scss
@@ -0,0 +1,109 @@
+.slider {
+ width: 100%;
+}
+
+.content {
+ aspect-ratio: 1 / 1;
+
+ @media (min-width: 640px) {
+ display: grid;
+ grid-template-columns: 32px minmax(0, 1fr) 32px;
+ height: 400px;
+ aspect-ratio: auto;
+ }
+}
+
+.viewport {
+ overflow: hidden;
+ height: 100%;
+ background: #000;
+}
+
+.track {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ transition: transform 0.5s ease-in-out;
+}
+
+.slide {
+ flex: 0 0 100%;
+ max-width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+
+.picture {
+ display: block;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+
+.image {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ display: block;
+
+ @media (min-width: 640px) {
+ object-fit: cover;
+ object-position: center;
+ }
+}
+
+.prevBtn {
+ grid-column: 1;
+}
+
+.nextBtn {
+ grid-column: 3;
+}
+
+.prevBtn,
+.nextBtn {
+ display: none;
+
+ @media (min-width: 640px) {
+ align-self: stretch;
+ width: 32px;
+ height: 100%;
+ border: 1px solid var(--color-border);
+ background: #323542;
+ color: var(--color-primary);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition:
+ border-color var(--transition-base),
+ background-color var(--transition-base);
+
+ &:hover {
+ border-color: var(--color-primary);
+ background: #4a4d58;
+ }
+ }
+}
+
+.dots {
+ display: flex;
+ justify-content: center;
+ gap: 8px;
+ margin-top: 18px;
+}
+
+.dot {
+ width: 14px;
+ height: 4px;
+ border-radius: 2px;
+ background: var(--color-secondary);
+ transition: background-color var(--transition-base);
+
+ &:hover {
+ background: var(--color-primary);
+ }
+}
+
+.dotActive {
+ background: var(--color-primary);
+}
diff --git a/src/modules/shared/components/PicturesSlider/PicturesSlider.tsx b/src/modules/shared/components/PicturesSlider/PicturesSlider.tsx
new file mode 100644
index 00000000000..dea01bb3dab
--- /dev/null
+++ b/src/modules/shared/components/PicturesSlider/PicturesSlider.tsx
@@ -0,0 +1,127 @@
+import { useEffect, useState } from 'react';
+
+import styles from './PicturesSlider.module.scss';
+
+const BASE = import.meta.env.BASE_URL;
+
+const SLIDES = [
+ {
+ src: `${BASE}img/banners/Banner.png`,
+ mobileSrc: `${BASE}img/banners/Banner-mobile.png`,
+ alt: 'iPhone 14 Pro banner',
+ },
+ { src: `${BASE}img/banners/slide-2.png`, alt: 'New tablets' },
+ { src: `${BASE}img/banners/slide-3.png`, alt: 'New accessories' },
+];
+
+const PREV_PATH = 'M11 2L5 8l6 6';
+const NEXT_PATH = 'M5 2l6 6-6 6';
+
+export const PicturesSlider = () => {
+ const [index, setIndex] = useState(0);
+ const count = SLIDES.length;
+
+ useEffect(() => {
+ const timer = setInterval(() => {
+ setIndex(i => (i + 1) % count);
+ }, 5000);
+
+ return () => clearInterval(timer);
+ }, [count]);
+
+ const prev = () => setIndex(i => (i - 1 + count) % count);
+ const next = () => setIndex(i => (i + 1) % count);
+
+ return (
+
+
+ );
+};
diff --git a/src/modules/shared/components/PicturesSlider/index.ts b/src/modules/shared/components/PicturesSlider/index.ts
new file mode 100644
index 00000000000..3d16f0bbb89
--- /dev/null
+++ b/src/modules/shared/components/PicturesSlider/index.ts
@@ -0,0 +1 @@
+export { PicturesSlider } from './PicturesSlider';
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..14b8099e83e
--- /dev/null
+++ b/src/modules/shared/components/ProductCard/ProductCard.module.scss
@@ -0,0 +1,162 @@
+.card {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ background-color: var(--color-card);
+ border: 1px solid var(--color-border);
+ border-radius: 0;
+ padding: 24px;
+ transition:
+ border-color var(--transition-base),
+ box-shadow var(--transition-base);
+
+ &:hover {
+ border-color: var(--color-primary);
+ box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.08);
+ }
+}
+
+.imageLink {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 196px;
+ margin-bottom: 16px;
+}
+
+.image {
+ max-height: 100%;
+ object-fit: contain;
+ transition: transform 0.3s ease-in-out;
+
+ .card:hover & {
+ transform: scale(1.1);
+ }
+}
+
+.name {
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 1.5;
+ color: var(--color-primary);
+ margin-bottom: 12px;
+ display: -webkit-box;
+ overflow: hidden;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+
+ &:hover {
+ color: var(--color-secondary);
+ }
+}
+
+.prices {
+ display: flex;
+ align-items: baseline;
+ gap: 8px;
+ margin-bottom: 8px;
+}
+
+.price {
+ font-size: 22px;
+ font-weight: 800;
+ color: var(--color-primary);
+}
+
+.fullPrice {
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--color-secondary);
+ text-decoration: line-through;
+}
+
+.divider {
+ border: none;
+ border-top: 1px solid var(--color-border);
+ margin-bottom: 8px;
+}
+
+.specs {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+ margin-bottom: 12px;
+}
+
+.specRow {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-size: 12px;
+}
+
+.specLabel {
+ color: var(--color-secondary);
+}
+
+.specValue {
+ font-weight: 700;
+ color: var(--color-primary);
+}
+
+.actions {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+}
+
+.cartButton {
+ flex: 1;
+ height: 40px;
+ background-color: var(--color-accent);
+ color: var(--color-white);
+ font-size: 14px;
+ font-weight: 600;
+ letter-spacing: 0.4px;
+ border-radius: 0;
+ border: 1px solid transparent;
+ transition:
+ background-color var(--transition-base),
+ color var(--transition-base),
+ border-color var(--transition-base);
+
+ &:hover {
+ background-color: var(--color-accent-hover);
+ border-color: var(--color-accent-hover);
+ color: var(--color-white);
+ }
+}
+
+.cartButtonAdded {
+ background-color: var(--color-surface);
+ color: var(--color-primary);
+ border-color: var(--color-primary);
+ cursor: default;
+}
+
+.favoriteButton {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ width: 40px;
+ height: 40px;
+ border: 1px solid var(--color-border);
+ border-radius: 0;
+ color: var(--color-primary);
+ transition: border-color var(--transition-base);
+
+ &:hover {
+ border-color: var(--color-primary);
+ }
+}
+
+.favoriteButtonActive {
+ color: var(--color-red);
+ border-color: var(--color-red);
+
+ svg {
+ fill: currentColor;
+ }
+}
diff --git a/src/modules/shared/components/ProductCard/ProductCard.tsx b/src/modules/shared/components/ProductCard/ProductCard.tsx
new file mode 100644
index 00000000000..397f98f5a6c
--- /dev/null
+++ b/src/modules/shared/components/ProductCard/ProductCard.tsx
@@ -0,0 +1,119 @@
+import { Link } from 'react-router-dom';
+
+import type { Product } from '../../types/product';
+import { useCart, useFavorites } from '../../context';
+import styles from './ProductCard.module.scss';
+
+const HEART_PATH =
+ 'M8 13c-.24 0-.47-.09-.65-.25C5.48 11.13 2 8.09 2 5.25 ' +
+ '2 3.46 3.4 2 5.12 2 6.16 2 7.13 2.53 7.7 3.39L8 3.84l.3-.45' +
+ 'C8.87 2.53 9.84 2 10.88 2 12.6 2 14 3.46 14 5.25c0 2.84-3.48 ' +
+ '5.88-5.35 7.5-.18.16-.41.25-.65.25z';
+
+type Props = {
+ product: Product;
+ showFullPrice?: boolean;
+ onOpen?: () => void;
+};
+
+type SpecRowProps = {
+ label: string;
+ value: string;
+};
+
+const SpecRow = ({ label, value }: SpecRowProps) => (
+
+
+
+
+
+
+
+
+
+
+ {SLIDES.map(slide => (
+
+
+
+ {slide.mobileSrc && (
+ 
+
+
+ ))}
+
+ {SLIDES.map((slide, i) => (
+
+
+ {label}
+ {value}
+
+);
+
+export const ProductCard = ({
+ product,
+ showFullPrice = true,
+ onOpen,
+}: Props) => {
+ const { itemId, name, image, price, fullPrice, screen, capacity, ram } =
+ product;
+
+ const { isFavorite, toggle } = useFavorites();
+ const { isInCart, add } = useCart();
+ const hasDiscount = showFullPrice && fullPrice > price;
+
+ return (
+ + +
-
+ {products.map(product => (
+
-
+
+
+ ))}
+
+
+ );
+};
diff --git a/src/modules/shared/components/ProductsSlider/index.ts b/src/modules/shared/components/ProductsSlider/index.ts
new file mode 100644
index 00000000000..0a5bb986628
--- /dev/null
+++ b/src/modules/shared/components/ProductsSlider/index.ts
@@ -0,0 +1 @@
+export { ProductsSlider } from './ProductsSlider';
diff --git a/src/modules/shared/components/ShopByCategory/ShopByCategory.module.scss b/src/modules/shared/components/ShopByCategory/ShopByCategory.module.scss
new file mode 100644
index 00000000000..ac50e3655a3
--- /dev/null
+++ b/src/modules/shared/components/ShopByCategory/ShopByCategory.module.scss
@@ -0,0 +1,48 @@
+.grid {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 16px;
+
+ @media (min-width: 640px) {
+ grid-template-columns: repeat(3, 1fr);
+ }
+}
+
+.card {
+ display: block;
+}
+
+.imageWrapper {
+ overflow: hidden;
+ border-radius: 0;
+ background: #6d6474;
+ margin-bottom: 16px;
+ aspect-ratio: 1 / 1;
+}
+
+li:nth-child(2) .imageWrapper {
+ background: #8d8d92;
+}
+
+li:nth-child(3) .imageWrapper {
+ background: #973d5f;
+}
+
+.image {
+ width: 100%;
+ height: 100%;
+ display: block;
+ object-fit: contain;
+}
+
+.title {
+ font-size: 22px;
+ font-weight: 800;
+ color: var(--color-primary);
+ margin-bottom: 4px;
+}
+
+.count {
+ font-size: 14px;
+ color: var(--color-secondary);
+}
diff --git a/src/modules/shared/components/ShopByCategory/ShopByCategory.tsx b/src/modules/shared/components/ShopByCategory/ShopByCategory.tsx
new file mode 100644
index 00000000000..8632ba5926e
--- /dev/null
+++ b/src/modules/shared/components/ShopByCategory/ShopByCategory.tsx
@@ -0,0 +1,46 @@
+import { Link } from 'react-router-dom';
+
+import styles from './ShopByCategory.module.scss';
+
+const BASE = import.meta.env.BASE_URL;
+
+const CATEGORIES = [
+ {
+ title: 'Mobile phones',
+ image: `${BASE}img/category-phones.webp`,
+ to: '/phones',
+ countKey: 'phones',
+ },
+ {
+ title: 'Tablets',
+ image: `${BASE}img/category-tablets.webp`,
+ to: '/tablets',
+ countKey: 'tablets',
+ },
+ {
+ title: 'Accessories',
+ image: `${BASE}img/category-accessories.webp`,
+ to: '/accessories',
+ countKey: 'accessories',
+ },
+];
+
+type Props = {
+ counts: Record
+
+
+ + {title} +
+ +
+
+
+
+
+ - 0
+ ? { '--desktop-track-shift': `${shiftTrackDesktopPx}px` }
+ : undefined
+ }
+ >
+ {products.map(product => (
+
-
+
+
+ ))}
+
-
+ {CATEGORIES.map(({ title, image, to, countKey }) => (
+
-
+
+ ++
+
{title}
+{counts[countKey]} models
+ +
+ ))}
+