+ })
+
+ {name}
+ + +
+ ${price}
+ {hasDiscount && ${fullPrice}}
+
+
+ + +
-
+
- + Screen + {screen} + +
- + Capacity + {capacity} + +
- + RAM + {ram} + +
+
+
+
+
+
+ );
+};
diff --git a/src/modules/CartPage/components/CartItem/CartItem.module.scss b/src/modules/CartPage/components/CartItem/CartItem.module.scss
new file mode 100644
index 00000000000..d46c9ce488b
--- /dev/null
+++ b/src/modules/CartPage/components/CartItem/CartItem.module.scss
@@ -0,0 +1,126 @@
+@use '../../../../styles/mixins' as *;
+@use '../../../../styles/variables' as *;
+
+.item {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ padding: 16px;
+ border: 1px solid $color-elements;
+
+ @include on-tablet {
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ }
+}
+
+.info {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.remove {
+ width: 16px;
+ height: 16px;
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ @include hover-transition(opacity);
+
+ &:hover {
+ opacity: 0.6;
+ }
+
+ img {
+ width: 16px;
+ height: 16px;
+ }
+}
+
+.link {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 16px;
+
+ .image {
+ width: 80px;
+ height: 80px;
+ object-fit: contain;
+ flex-shrink: 0;
+ }
+
+ .name {
+ @include body-text;
+
+ color: $color-primary;
+ flex: 1;
+ min-width: 120px;
+ }
+
+ @include hover-scale;
+
+ &:hover .name {
+ color: $color-secondary;
+ }
+}
+
+
+.controls {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ @include on-tablet {
+ gap: 24px;
+ }
+}
+
+.quantity {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.quantityBtn {
+ width: 32px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: 1px solid $color-icons;
+
+ @include button-text;
+
+ color: $color-primary;
+
+ @include hover-transition(border-color);
+
+ &:disabled {
+ color: $color-icons;
+ cursor: not-allowed;
+ }
+
+ &:hover:not(:disabled) {
+ border-color: $color-primary;
+ }
+}
+
+.quantityValue {
+ @include h4;
+
+ min-width: 24px;
+ text-align: center;
+}
+
+.price {
+ @include h3;
+
+ color: $color-primary;
+ min-width: 80px;
+ text-align: right;
+}
diff --git a/src/modules/CartPage/components/CartItem/CartItem.tsx b/src/modules/CartPage/components/CartItem/CartItem.tsx
new file mode 100644
index 00000000000..3270dc8b674
--- /dev/null
+++ b/src/modules/CartPage/components/CartItem/CartItem.tsx
@@ -0,0 +1,67 @@
+import { Link } from 'react-router-dom';
+import { CartItem as CartItemType } from '../../../../types';
+import { useCart } from '../../../../context';
+import { getImageUrl } from '../../../../utils';
+import { ICONS } from '../../../../constants';
+import styles from './CartItem.module.scss';
+
+type Props = {
+ item: CartItemType;
+};
+
+export const CartItem = ({ item }: Props) => {
+ const { removeFromCart, increaseQuantity, decreaseQuantity } = useCart();
+ const { product, quantity } = item;
+
+ return (
+ Cart
+ + {cartItems.length === 0 ? ( +Your cart is empty
+ ) : ( +
+
+ )}
+
+ {cartItems.map(item => (
+
+
+
+
+ +
+ ${totalAmount}
++ Total for {totalQuantity} item{totalQuantity !== 1 ? 's' : ''} +
++ +
+ {/* Remove button + image + name */}
+
+ );
+};
diff --git a/src/modules/CartPage/components/CartItem/index.ts b/src/modules/CartPage/components/CartItem/index.ts
new file mode 100644
index 00000000000..186b364ebdf
--- /dev/null
+++ b/src/modules/CartPage/components/CartItem/index.ts
@@ -0,0 +1 @@
+export { CartItem } from './CartItem';
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/CategoryPage/CategoryPage.module.scss b/src/modules/CategoryPage/CategoryPage.module.scss
new file mode 100644
index 00000000000..5baeaf6fb99
--- /dev/null
+++ b/src/modules/CategoryPage/CategoryPage.module.scss
@@ -0,0 +1,81 @@
+@use '../../styles/mixins' as *;
+@use '../../styles/variables' as *;
+
+.page {
+ @include page-container;
+
+ display: flex;
+ flex-direction: column;
+ padding-bottom: 64px;
+}
+
+.title {
+ @include h1;
+}
+
+.count {
+ @include button-text;
+
+ color: $color-secondary;
+ padding-top: 8px;
+}
+
+.controls {
+ display: flex;
+ gap: 16px;
+ padding-top: 32px;
+
+ & > :first-child {
+ width: 176px;
+ }
+
+ // Items on page: narrower
+ & > :last-child {
+ width: 128px;
+ }
+
+ @include on-tablet {
+ padding-top: 40px;
+
+ & > :first-child {
+ width: 187px;
+ }
+
+ & > :last-child {
+ width: 136px;
+ }
+ }
+}
+
+.pagination {
+ padding-top: 40px;
+ display: flex;
+ justify-content: center;
+
+ @include on-tablet {
+ padding-top: 40px;
+ }
+}
+
+// ── Tablet ──
+@include on-tablet {
+ .page {
+ padding-top: 0;
+ padding-bottom: 40px;
+ }
+
+ .title {
+ padding-top: 40px;
+ }
+
+ .controls {
+ padding-top: 40px;
+ }
+}
+
+// ── Desktop ──
+@include on-desktop {
+ .page {
+ padding-bottom: 40px;
+ }
+}
diff --git a/src/modules/CategoryPage/CategoryPage.tsx b/src/modules/CategoryPage/CategoryPage.tsx
new file mode 100644
index 00000000000..04ff9df62cb
--- /dev/null
+++ b/src/modules/CategoryPage/CategoryPage.tsx
@@ -0,0 +1,127 @@
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { getProductsByCategory } from '../../api';
+import { Product, Category, SortBy } from '../../types';
+import { ProductsList } from './components/ProductsList';
+import { Dropdown } from '../shared/components/Dropdown';
+import { Loader } from '../shared/components/Loader';
+import { Pagination } from './components/Pagination';
+import { useQueryParams } from '../../hooks';
+import styles from './CategoryPage.module.scss';
+
+const categoryTitles: Record
+
+
+
+ })
+
+
+
+ {/* Quantity controls + price */}
+ {product.name}
+ +
+
+
+
+ {quantity}
+
+
+
+ ${product.price * quantity}
+
+
+ );
+};
diff --git a/src/modules/CategoryPage/components/Pagination/Pagination.module.scss b/src/modules/CategoryPage/components/Pagination/Pagination.module.scss
new file mode 100644
index 00000000000..56bfaa065aa
--- /dev/null
+++ b/src/modules/CategoryPage/components/Pagination/Pagination.module.scss
@@ -0,0 +1,69 @@
+@use '../../../../styles/mixins' as *;
+@use '../../../../styles/variables' as *;
+
+.pagination {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ gap: 8px;
+}
+
+.pageItem {
+ // styling lives on .pageLink inside
+
+ &.arrow {
+ // Add 8px extra margin to create 16px total gap (8px base + 8px extra)
+ &:first-child {
+ margin-right: 8px;
+ rotate: 90deg;
+ }
+
+ &:last-child {
+ margin-left: 8px;
+ rotate: -90deg;
+ }
+ }
+}
+
+.pageLink {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ border: 1px solid $color-elements;
+ background: $color-white;
+
+ @include button-text;
+
+ color: $color-primary;
+ text-decoration: none;
+ cursor: pointer;
+ position: relative;
+
+ @include hover-transition(border-color);
+
+ &:hover {
+ border-color: $color-primary;
+ color: $color-primary;
+ z-index: 1;
+ }
+}
+
+.disabled .pageLink {
+ opacity: 0.5;
+ cursor: not-allowed;
+ pointer-events: none;
+}
+
+.pageItem.active .pageLink {
+ background: $color-primary;
+ border-color: $color-primary;
+ color: $color-white;
+ z-index: 1;
+ cursor: default;
+ pointer-events: none;
+}
diff --git a/src/modules/CategoryPage/components/Pagination/Pagination.tsx b/src/modules/CategoryPage/components/Pagination/Pagination.tsx
new file mode 100644
index 00000000000..12c647ec4eb
--- /dev/null
+++ b/src/modules/CategoryPage/components/Pagination/Pagination.tsx
@@ -0,0 +1,115 @@
+import React from 'react';
+import styles from './Pagination.module.scss';
+import { ICONS } from '../../../../constants';
+
+type Props = {
+ total: number;
+ perPage: number;
+ currentPage?: number;
+ onPageChange: (page: number) => void;
+};
+
+export const Pagination: React.FC{title}
+{products.length} models
+ + {!loading && !error && products.length > 1 && ( +
+
+ )}
+
+ {loading && Something went wrong. Please try again.
} + + {!loading && !error && products.length === 0 &&No products found.
} + + {!loading && !error && products.length > 0 && ( + <> +
+
+ )}
+
+ )}
+ -
+
- + + + + {visiblePages.map(page => { + return ( +
- + + + ); + })} + +
- + + +
+ {products.map(product => (
+
+);
diff --git a/src/modules/CategoryPage/components/ProductsList/index.ts b/src/modules/CategoryPage/components/ProductsList/index.ts
new file mode 100644
index 00000000000..ae9d590cdbd
--- /dev/null
+++ b/src/modules/CategoryPage/components/ProductsList/index.ts
@@ -0,0 +1 @@
+export { ProductsList } from './ProductsList';
diff --git a/src/modules/CategoryPage/index.ts b/src/modules/CategoryPage/index.ts
new file mode 100644
index 00000000000..ceaf8ad24ed
--- /dev/null
+++ b/src/modules/CategoryPage/index.ts
@@ -0,0 +1 @@
+export { CategoryPage } from './CategoryPage';
diff --git a/src/modules/FavouritesPage/FavouritesPage.module.scss b/src/modules/FavouritesPage/FavouritesPage.module.scss
new file mode 100644
index 00000000000..f5bdcef9fad
--- /dev/null
+++ b/src/modules/FavouritesPage/FavouritesPage.module.scss
@@ -0,0 +1,65 @@
+@use '../../styles/mixins' as *;
+@use '../../styles/variables' as *;
+
+.page {
+ @include page-container;
+
+ display: flex;
+ flex-direction: column;
+ padding-top: 24px;
+ padding-bottom: 64px;
+ gap: 24px;
+}
+
+.title {
+ @include h1;
+
+ padding-top: 24px;
+}
+
+.count {
+ @include button-text;
+
+ color: $color-secondary;
+}
+
+.empty {
+ @include h2;
+
+ color: $color-secondary;
+ text-align: center;
+ padding: 40px 0;
+}
+
+.grid {
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+}
+
+@include on-tablet {
+ .page {
+ padding-top: 0;
+ padding-bottom: 40px;
+ }
+
+ .title {
+ padding-top: 40px;
+ }
+
+ .grid {
+ flex-flow: row wrap;
+ gap: 16px;
+ row-gap: 40px;
+
+ & > * {
+ width: 272px;
+ }
+ }
+}
+
+@include on-desktop {
+ .page {
+ padding-bottom: 40px;
+ }
+}
diff --git a/src/modules/FavouritesPage/FavouritesPage.tsx b/src/modules/FavouritesPage/FavouritesPage.tsx
new file mode 100644
index 00000000000..a2a0274ea1e
--- /dev/null
+++ b/src/modules/FavouritesPage/FavouritesPage.tsx
@@ -0,0 +1,24 @@
+import { useProducts } from '../../context';
+import { ProductCard } from '../shared/components/ProductCard';
+import styles from './FavouritesPage.module.scss';
+
+export const FavouritesPage = () => {
+ const { favorites } = useProducts();
+
+ return (
+
+
+ );
+};
diff --git a/src/modules/FavouritesPage/index.ts b/src/modules/FavouritesPage/index.ts
new file mode 100644
index 00000000000..0a16512c056
--- /dev/null
+++ b/src/modules/FavouritesPage/index.ts
@@ -0,0 +1 @@
+export { FavouritesPage } from './FavouritesPage';
diff --git a/src/modules/HomePage/HomePage.module.scss b/src/modules/HomePage/HomePage.module.scss
new file mode 100644
index 00000000000..dfde0b91186
--- /dev/null
+++ b/src/modules/HomePage/HomePage.module.scss
@@ -0,0 +1,76 @@
+@use '../../styles/mixins' as *;
+
+.homePage {
+ @include page-container;
+}
+
+.productCatalog {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ margin: -1px;
+ padding: 0;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border: 0;
+}
+
+.title {
+ @include h1;
+
+ padding-top: 24px;
+
+ @include on-tablet {
+ padding-top: 32px;
+ }
+
+ @include on-desktop {
+ padding-top: 56px;
+ }
+}
+
+.sections {
+ display: flex;
+ flex-direction: column;
+ gap: 56px;
+ padding-top: 24px;
+ padding-bottom: 64px;
+
+ @include on-tablet {
+ gap: 64px;
+ padding-top: 32px;
+ padding-bottom: 64px;
+ }
+
+ @include on-desktop {
+ gap: 80px;
+ padding-top: 56px;
+ padding-bottom: 80px;
+ }
+}
+
+.section {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+}
+
+.sectionTitle {
+ @include h2;
+}
+
+.cardGrid {
+ display: flex;
+ flex-direction: column;
+ gap: 30px;
+
+ @include on-tablet {
+ flex-flow: row wrap;
+ gap: 16px;
+
+ & > * {
+ width: 272px;
+ }
+ }
+}
diff --git a/src/modules/HomePage/HomePage.tsx b/src/modules/HomePage/HomePage.tsx
new file mode 100644
index 00000000000..c9f87368922
--- /dev/null
+++ b/src/modules/HomePage/HomePage.tsx
@@ -0,0 +1,106 @@
+import { useEffect, useState } from 'react';
+import { getProducts } from '../../api';
+import { Product } from '../../types';
+import { useProductCounts } from '../../hooks';
+import { BANNER_IMAGES } from '../../constants';
+import styles from './HomePage.module.scss';
+import { Loader } from '../shared/components/Loader';
+import { ShopByCategory } from './components/ShopByCategory';
+import { PicturesSlider } from './components/PicturesSlider';
+import { ProductsSlider } from './components/ProductsSlider';
+
+const BANNER_SLIDES = [
+ {
+ id: 1,
+ image: BANNER_IMAGES.PHONES,
+ alt: 'New phones — latest models',
+ },
+ {
+ id: 2,
+ image: BANNER_IMAGES.TABLETS,
+ alt: 'New tablets — power and portability',
+ },
+ {
+ id: 3,
+ image: BANNER_IMAGES.ACCESSORIES,
+ alt: 'Accessories — complete your setup',
+ },
+];
+
+export const HomePage = () => {
+ const [allProducts, setAllProducts] = useStateFavourites
+{favorites.length} items
+ + {favorites.length === 0 ? ( +Your favourites list is empty
+ ) : ( +
+ {favorites.map(product => (
+
+ )}
+
+
+ );
+};
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..fccd8503617
--- /dev/null
+++ b/src/modules/HomePage/components/PicturesSlider/PicturesSlider.module.scss
@@ -0,0 +1,130 @@
+@use '../../../../styles/mixins' as *;
+@use '../../../../styles/variables' as *;
+
+// Outer wrapper — column: image row on top, dots below
+.slider {
+ display: flex;
+ flex-direction: column;
+ gap: 16px; // space between image and dots
+}
+
+.main {
+ display: flex;
+ align-items: center;
+ margin-inline: calc(-1 * $page-padding-mobile);
+
+ @include on-tablet {
+ margin-inline: 0;
+ gap: 19px;
+ }
+
+ @include on-desktop {
+ gap: 16px;
+ }
+}
+
+.arrow {
+ display: none;
+
+ @include on-tablet {
+ display: flex;
+ flex-shrink: 0;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 189px;
+ background: $color-white;
+ border: 1px solid $color-elements;
+ cursor: pointer;
+
+ @include hover-transition(border-color);
+
+ &:hover {
+ border-color: $color-primary;
+ }
+
+ img {
+ width: 16px;
+ height: 16px;
+ }
+
+ @include on-desktop {
+ height: 400px;
+ }
+ }
+}
+
+.arrowPrev img {
+ transform: rotate(90deg);
+}
+
+.arrowNext img {
+ transform: rotate(-90deg);
+}
+
+// Track clips the sliding strip
+.track {
+ flex: 1;
+ overflow: hidden;
+ height: 320px;
+
+ @include on-tablet {
+ height: 189px;
+ }
+
+ @include on-desktop {
+ height: 400px;
+ }
+}
+
+
+.slides {
+ display: flex;
+ height: 100%;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ transition: transform 0.3s ease;
+}
+
+.slide {
+ flex: 0 0 100%;
+ height: 100%;
+}
+
+.image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ display: block;
+ user-select: none;
+}
+
+.dots {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 8px;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.dot {
+ width: 14px;
+ height: 4px;
+ background: $color-elements;
+ border: none;
+ cursor: pointer;
+ padding: 0;
+
+ @include hover-transition(background-color);
+
+ &:hover {
+ background: $color-secondary;
+ }
+}
+
+.dotActive {
+ 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..e9c779f89f2
--- /dev/null
+++ b/src/modules/HomePage/components/PicturesSlider/PicturesSlider.tsx
@@ -0,0 +1,107 @@
+import React, { useState, useRef } from 'react';
+import { useInterval } from '../../../../hooks';
+import { ICONS } from '../../../../constants';
+import styles from './PicturesSlider.module.scss';
+
+type Slide = {
+ id: number;
+ image: string;
+ alt: string;
+};
+
+type Props = {
+ slides: Slide[];
+};
+
+const AUTOPLAY_DELAY = 5000;
+const SWIPE_THRESHOLD = 10;
+
+export const PicturesSlider = ({ slides }: Props) => {
+ const [current, setCurrent] = useState(0);
+ const total = slides.length;
+ const touchStartX = useRefProduct Catalog
+ +Welcome to Nice Gadgets store!
+ +
+
+
+
+
+ {loading &&
+
+
+
+
+
+ {loading &&
+
+ Something went wrong. Please try again.
} + {!loading && !error && ( +Shop by category
+ {loading &&Something went wrong. Please try again.
} + {!loading && !error &&Something went wrong. Please try again.
} + {!loading && !error && ( +
+ {/* Row: prev arrow + track + next arrow */}
+
+ );
+};
diff --git a/src/modules/HomePage/components/PicturesSlider/index.ts b/src/modules/HomePage/components/PicturesSlider/index.ts
new file mode 100644
index 00000000000..3d16f0bbb89
--- /dev/null
+++ b/src/modules/HomePage/components/PicturesSlider/index.ts
@@ -0,0 +1 @@
+export { PicturesSlider } from './PicturesSlider';
diff --git a/src/modules/HomePage/components/ProductsSlider/ProductsSlider.module.scss b/src/modules/HomePage/components/ProductsSlider/ProductsSlider.module.scss
new file mode 100644
index 00000000000..d2ec77e34e2
--- /dev/null
+++ b/src/modules/HomePage/components/ProductsSlider/ProductsSlider.module.scss
@@ -0,0 +1,75 @@
+@use '../../../../styles/mixins' as *;
+@use '../../../../styles/variables' as *;
+
+.slider {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+}
+
+.header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.title {
+ @include h2;
+}
+
+.controls {
+ display: flex;
+ gap: 16px;
+}
+
+.arrow {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ border: 1px solid $color-icons;
+ background: transparent;
+ cursor: pointer;
+ transition: border-color $transition;
+
+ &:hover:not(:disabled) {
+ border-color: $color-primary;
+ }
+}
+
+.arrowDisabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+.arrowIcon {
+ width: 16px;
+ height: 16px;
+}
+
+.arrowIconLeft {
+ transform: rotate(90deg);
+}
+
+.arrowIconRight {
+ transform: rotate(-90deg);
+}
+
+.viewport {
+ overflow: hidden;
+}
+
+.track {
+ display: flex;
+ gap: 16px;
+ transition: transform 0.3s ease;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.item {
+ flex: 0 0 272px;
+ width: 272px;
+}
diff --git a/src/modules/HomePage/components/ProductsSlider/ProductsSlider.tsx b/src/modules/HomePage/components/ProductsSlider/ProductsSlider.tsx
new file mode 100644
index 00000000000..6b6cacb2e3c
--- /dev/null
+++ b/src/modules/HomePage/components/ProductsSlider/ProductsSlider.tsx
@@ -0,0 +1,104 @@
+import { useRef, useState, useEffect } from 'react';
+import { Product } from '../../../../types';
+import { ProductCard } from '../../../shared/components/ProductCard';
+import { ICONS } from '../../../../constants';
+import styles from './ProductsSlider.module.scss';
+
+const CARD_WIDTH = 272;
+const GAP = 16;
+const STEP = CARD_WIDTH + GAP;
+
+interface Props {
+ title: string;
+ products: Product[];
+ showDiscount?: boolean;
+}
+
+export const ProductsSlider = ({
+ title,
+ products,
+ showDiscount = true,
+}: Props) => {
+ const trackRef = useRef
+
+
+
+
+ {/* Dots below — never overlapping image */}
+
+
+
+
+ -
+ {slides.map(slide => (
+
-
+
+
+ ))}
+
-
+ {slides.map((slide, index) => (
+
- + + ))} +
+
+ );
+};
diff --git a/src/modules/HomePage/components/ProductsSlider/index.ts b/src/modules/HomePage/components/ProductsSlider/index.ts
new file mode 100644
index 00000000000..0a5bb986628
--- /dev/null
+++ b/src/modules/HomePage/components/ProductsSlider/index.ts
@@ -0,0 +1 @@
+export { ProductsSlider } from './ProductsSlider';
diff --git a/src/modules/HomePage/components/ShopByCategory/ShopByCategory.module.scss b/src/modules/HomePage/components/ShopByCategory/ShopByCategory.module.scss
new file mode 100644
index 00000000000..f103bc26561
--- /dev/null
+++ b/src/modules/HomePage/components/ShopByCategory/ShopByCategory.module.scss
@@ -0,0 +1,59 @@
+@use '../../../../styles/mixins' as *;
+@use '../../../../styles/variables' as *;
+
+.list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ @include on-tablet {
+ flex-direction: row;
+ gap: 16px;
+ }
+}
+
+.item {
+ flex: 1;
+}
+
+.link {
+ display: block;
+ text-decoration: none;
+
+ @include hover-scale;
+}
+
+.imageWrapper {
+ width: 100%;
+ aspect-ratio: 3 / 2;
+ overflow: hidden;
+ background: $color-surface-1;
+ margin-bottom: 16px;
+}
+
+.image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ display: block;
+
+ @include hover-transition(transform);
+}
+
+.title {
+ @include button-text;
+
+ font-weight: 600;
+ color: $color-primary;
+ padding-bottom: 4px;
+}
+
+.count {
+ @include body-text;
+
+ font-weight: 500;
+ color: $color-secondary;
+}
diff --git a/src/modules/HomePage/components/ShopByCategory/ShopByCategory.tsx b/src/modules/HomePage/components/ShopByCategory/ShopByCategory.tsx
new file mode 100644
index 00000000000..c7b4ab0e7be
--- /dev/null
+++ b/src/modules/HomePage/components/ShopByCategory/ShopByCategory.tsx
@@ -0,0 +1,58 @@
+import { Link } from 'react-router-dom';
+import { AppRoutes } from '../../../../utils/routes';
+import { CATEGORY_IMAGES } from '../../../../constants';
+import styles from './ShopByCategory.module.scss';
+
+interface ProductCounts {
+ phones: number;
+ tablets: number;
+ accessories: number;
+}
+
+type Props = {
+ counts: ProductCounts;
+};
+
+const CATEGORIES = [
+ {
+ title: 'Mobile phones',
+ route: AppRoutes.PHONES,
+ image: CATEGORY_IMAGES.PHONES,
+ countKey: 'phones' as const,
+ },
+ {
+ title: 'Tablets',
+ route: AppRoutes.TABLETS,
+ image: CATEGORY_IMAGES.TABLETS,
+ countKey: 'tablets' as const,
+ },
+ {
+ title: 'Accessories',
+ route: AppRoutes.ACCESSORIES,
+ image: CATEGORY_IMAGES.ACCESSORIES,
+ countKey: 'accessories' as const,
+ },
+];
+
+export const ShopByCategory = ({ counts }: Props) => {
+ return (
+
+
+
+ {title}
+ +
+
+
+
+
+
+
+ -
+ {products.map(product => (
+
-
+
+
+ ))}
+
-
+ {CATEGORIES.map(({ title, route, image, countKey }) => (
+
-
+
+ ++
+
{title}
+{counts[countKey]} models
+ +
+ ))}
+
+ 
+
+ );
+};
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..dfa83f20923
--- /dev/null
+++ b/src/modules/ProductDetailsPage/ProductDetailsPage.module.scss
@@ -0,0 +1,393 @@
+@use '../../styles/mixins' as *;
+@use '../../styles/variables' as *;
+
+.page {
+ @include page-container;
+
+ padding-bottom: 64px;
+}
+
+.pageNotFound {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 24px;
+ padding-top: 56px;
+ text-align: center;
+}
+
+// Back button
+.back {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ margin-bottom: 16px;
+ background: none;
+ border: none;
+ cursor: pointer;
+ font-size: $font-size-small;
+ color: $color-secondary;
+ transition: color $transition;
+
+ &:hover { color: $color-primary; }
+}
+
+.title {
+ @include h2;
+
+ margin-bottom: 32px;
+}
+
+.notFound {
+ @include h2;
+}
+
+.notFoundImage {
+ width: 100%;
+ max-width: 560px;
+ height: auto;
+ object-fit: contain;
+}
+
+// Main: gallery + controls side-by-side on tablet+
+.main {
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+ margin-bottom: 56px;
+
+ @include on-tablet {
+ flex-direction: row;
+ gap: 16px;
+ }
+
+ @include on-desktop {
+ gap: 64px;
+ }
+}
+
+// Gallery
+.gallery {
+ display: flex;
+ flex-direction: column-reverse;
+ gap: 16px;
+
+ @include on-tablet {
+ flex-direction: row;
+ flex: 1;
+ }
+}
+
+.thumbnails {
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+
+ @include on-tablet {
+ flex-direction: column;
+ }
+}
+
+.thumb {
+ width: 50px;
+ height: 50px;
+ padding: 4px;
+ border: 1px solid $color-elements;
+ border-radius: 4px;
+ background: $color-white;
+ cursor: pointer;
+ transition: border-color $transition;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ }
+
+ &:hover {
+ border-color: $color-primary;
+ }
+}
+
+.thumbActive {
+ border-color: $color-primary;
+}
+
+.mainImage {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.mainImg {
+ width: 100%;
+ max-width: 300px;
+ object-fit: contain;
+
+ @include on-desktop { max-width: 440px; }
+}
+
+// Controls panel
+.controls {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ @include on-tablet {
+ width: 237px;
+ flex-shrink: 0;
+ }
+
+ @include on-desktop { width: 320px; }
+}
+
+.optionGroup {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.optionLabel {
+ font-size: $font-size-small;
+ color: $color-secondary;
+}
+
+// Color buttons
+.colorList {
+ display: flex;
+ gap: 8px;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.colorBtn {
+ width: 30px;
+ height: 30px;
+ border-radius: 50%;
+ border: 2px solid $color-white;
+ outline: 1px solid $color-elements;
+ cursor: pointer;
+ transition: outline-color $transition;
+
+ &:hover { outline-color: $color-secondary; }
+}
+
+.colorBtnActive {
+ outline-color: $color-primary;
+}
+
+// Capacity buttons
+.capacityList {
+ display: flex;
+ gap: 8px;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.capacityBtn {
+ padding: 4px 8px;
+ border: 1px solid $color-icons;
+ background: $color-white;
+ cursor: pointer;
+ font-size: $font-size-button;
+ font-weight: 600;
+ transition: border-color $transition, background $transition, color $transition;
+
+ &:hover {
+ border-color: $color-primary;
+ }
+}
+
+.capacityBtnActive {
+ background: $color-primary;
+ color: $color-white;
+ border-color: $color-primary;
+}
+
+// Divider
+.divider {
+ height: 1px;
+ background: $color-elements;
+}
+
+// Price
+.priceRow {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.priceDiscount {
+ font-size: $font-size-h3;
+ font-weight: 700;
+ color: $color-primary;
+}
+
+.priceRegular {
+ font-size: $font-size-body;
+ color: $color-secondary;
+ text-decoration: line-through;
+}
+
+// Actions
+.actions {
+ display: flex;
+ gap: 8px;
+}
+
+.cartBtn {
+ flex: 1;
+ height: 48px;
+ background: $color-primary;
+ color: $color-white;
+ border: none;
+ cursor: pointer;
+ font-size: $font-size-button;
+ font-weight: 700;
+ transition: background $transition;
+
+ &:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ }
+
+ &:hover:not(:disabled) { background: $color-secondary; }
+}
+
+.cartBtnAdded {
+ background: $color-white;
+ color: $color-green;
+ border: 1px solid $color-elements;
+
+ &:hover:not(:disabled) { background: $color-white; }
+}
+
+.favBtn {
+ width: 48px;
+ height: 48px;
+ border: 1px solid $color-icons;
+ background: $color-white;
+ cursor: pointer;
+ font-size: 20px;
+ color: $color-primary;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: border-color $transition;
+
+ &:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ }
+
+ &:hover:not(:disabled) {
+ border-color: $color-primary;
+ }
+}
+
+.favBtnActive {
+ color: $color-red;
+}
+
+// Short specs under actions
+.shortSpecs {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+ li {
+ display: flex;
+ justify-content: space-between;
+ font-size: $font-size-small;
+
+ span:first-child {
+ color: $color-secondary;
+ }
+
+ span:last-child {
+ color: $color-primary;
+ font-weight: 700;
+ }
+ }
+}
+
+// About + Tech specs two-column on desktop
+.details {
+ display: flex;
+ flex-direction: column;
+ gap: 56px;
+ margin-bottom: 56px;
+
+ @include on-desktop {
+ flex-direction: row;
+ gap: 64px;
+
+ & > * { flex: 1; }
+ }
+}
+
+.sectionTitle {
+ @include h2;
+
+ margin-bottom: 16px;
+}
+
+.descBlock {
+ margin-top: 32px;
+}
+
+.descTitle {
+ font-size: $font-size-h4;
+ font-weight: 700;
+ margin-bottom: 16px;
+}
+
+.descText {
+ font-size: $font-size-body;
+ line-height: $line-height-body;
+ color: $color-secondary;
+
+ & + & { margin-top: 8px; }
+}
+
+.specsList {
+ margin-top: 30px;
+ list-style: none;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+ @include on-tablet {
+ margin-top: 25px;
+ }
+
+ li {
+ display: flex;
+ justify-content: space-between;
+ font-size: $font-size-body;
+
+ span:first-child {
+ color: $color-secondary;
+ }
+
+ span:last-child {
+ color: $color-primary;
+ font-weight: 700;
+ text-align: right;
+ }
+ }
+}
+
+.suggestedSection {
+ margin-top: 56px;
+}
diff --git a/src/modules/ProductDetailsPage/ProductDetailsPage.tsx b/src/modules/ProductDetailsPage/ProductDetailsPage.tsx
new file mode 100644
index 00000000000..556df8233f4
--- /dev/null
+++ b/src/modules/ProductDetailsPage/ProductDetailsPage.tsx
@@ -0,0 +1,346 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import {
+ getProductDetails,
+ getProducts,
+ getSuggestedProducts,
+} from '../../api';
+import { Product, ProductDetails } from '../../types';
+import { Category, CATEGORIES } from '../../types';
+import { ICONS, NOTFOUND_IMAGES } from '../../constants';
+import { useCart } from '../../context';
+import { useProducts } from '../../context';
+import { getImageUrl } from '../../utils';
+import { Loader } from '../shared/components/Loader';
+import { ProductsSlider } from '../HomePage/components/ProductsSlider';
+import styles from './ProductDetailsPage.module.scss';
+
+export const ProductDetailsPage = () => {
+ const { category, productId } = useParams<{
+ category: string;
+ productId: string;
+ }>();
+ const navigate = useNavigate();
+
+ const [details, setDetails] = useStatePage not found
+
+
+ );
+ }
+
+ if (notFound || !details) {
+ return (
+
+ 
+
+ );
+ }
+
+ if (error) {
+ return (
+ Product was not found
+
+
+ );
+ }
+
+ const inCart = product ? isInCart(product.id) : false;
+ const inFav = product ? isFavorite(product.id) : false;
+
+ return (
+ Something went wrong. Please try again.
+
+
+
+
+
+ )}
+
+ );
+};
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/shared/components/.gitkeep b/src/modules/shared/components/.gitkeep
new file mode 100644
index 00000000000..4e91e61b6e7
--- /dev/null
+++ b/src/modules/shared/components/.gitkeep
@@ -0,0 +1,2 @@
+// Shared components barrel export
+
diff --git a/src/modules/shared/components/Breadcrumbs/Breadcrumbs.module.scss b/src/modules/shared/components/Breadcrumbs/Breadcrumbs.module.scss
new file mode 100644
index 00000000000..62feac3f5f9
--- /dev/null
+++ b/src/modules/shared/components/Breadcrumbs/Breadcrumbs.module.scss
@@ -0,0 +1,49 @@
+@use '../../../../styles/mixins' as *;
+@use '../../../../styles/variables' as *;
+
+.breadcrumbs {
+ @include page-container;
+
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding-top: 24px;
+ margin-bottom: 24px;
+ flex-wrap: wrap;
+
+ @include on-tablet {
+ margin-bottom: 16px;
+ }
+}
+
+.breadcrumbLink {
+ display: flex;
+ align-items: center;
+ text-decoration: none;
+
+ @include small-text;
+
+ color: $color-primary;
+
+ @include hover-transition(color);
+
+ &:hover {
+ color: $color-secondary;
+ }
+}
+
+.homeIcon {
+ width: 16px;
+ height: 16px;
+}
+
+.breadcrumbArrow {
+ width: 16px;
+ height: 16px;
+}
+
+.breadcrumbCurrent {
+ @include small-text;
+
+ color: $color-secondary;
+}
diff --git a/src/modules/shared/components/Breadcrumbs/Breadcrumbs.tsx b/src/modules/shared/components/Breadcrumbs/Breadcrumbs.tsx
new file mode 100644
index 00000000000..9a5043a9eda
--- /dev/null
+++ b/src/modules/shared/components/Breadcrumbs/Breadcrumbs.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { ICONS } from '../../../../constants';
+import styles from './Breadcrumbs.module.scss';
+
+type BreadcrumbItem = {
+ label: string;
+ to?: string;
+};
+
+type Props = {
+ links: BreadcrumbItem[];
+};
+
+export const Breadcrumbs: React.FC{details.name}
+ +
+
+
+
+
+
+ -
+ {details.images.map((src, i) => (
+
- + + + ))} +
+ })
+
+
+
+
+
+
+
+
+ Available colors
+-
+ {details.colorsAvailable.map(color => (
+
- + + ))} +
+
+
+
+
+ {/* Price */}
+ Select capacity
+-
+ {details.capacityAvailable.map(cap => (
+
- + + + ))} +
+
+ ${details.priceDiscount}
+
+ ${details.priceRegular}
+
+
+
+
+
+
+
+
+ -
+
- + Screen + {details.screen} + +
- + Resolution + {details.resolution} + +
- + Processor + {details.processor} + +
- + RAM + {details.ram} + +
+
+
+
+
+
+
+
+ {suggested.length > 0 && (
+ About
+ + {details.description.map(block => ( +
+
+ ))}
+ {block.title}
+ {block.text.map(text => ( ++ {text} +
+ ))} +Tech specs
+ +-
+
- + Screen + {details.screen} + +
- + Resolution + {details.resolution} + +
- + Processor + {details.processor} + +
- + RAM + {details.ram} + +
- + Capacity + {details.capacity} + + {details.camera && ( +
- + Camera + {details.camera} + + )} + {details.zoom && ( +
- + Zoom + {details.zoom} + + )} +
- + Cell + {details.cell.join(', ')} + +
+ {label && {label}}
+
+
+ );
+};
diff --git a/src/modules/shared/components/Dropdown/index.ts b/src/modules/shared/components/Dropdown/index.ts
new file mode 100644
index 00000000000..c0ad316fc26
--- /dev/null
+++ b/src/modules/shared/components/Dropdown/index.ts
@@ -0,0 +1 @@
+export { Dropdown } from './Dropdown';
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..1b01403ca0f
--- /dev/null
+++ b/src/modules/shared/components/Footer/Footer.module.scss
@@ -0,0 +1,145 @@
+@use '../../../../styles/mixins' as *;
+@use '../../../../styles/variables' as *;
+
+.footer {
+ box-shadow: 0 -1px 0 0 $color-elements;
+ margin-top: auto;
+}
+
+.container {
+ @include page-container;
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding-top: 32px;
+ padding-bottom: 32px;
+
+ @include on-tablet {
+ flex-direction: row;
+ align-items: center;
+ padding-top: 42.5px;
+ padding-bottom: 42.5px;
+ justify-content: space-between;
+ }
+}
+
+.logo {
+ display: flex;
+ align-items: center;
+ flex-shrink: 0;
+ margin-bottom: 32px;
+
+ img {
+ width: 64px;
+ height: 22px;
+ object-fit: contain;
+ }
+
+ @include hover-scale;
+
+ @include on-tablet {
+ margin-bottom: 0;
+ margin-right: 0;
+ justify-content: flex-start;
+ }
+}
+
+.navList {
+ list-style: none;
+ padding: 0;
+ margin: 0 0 32px;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ @include on-tablet {
+ flex-direction: row;
+ gap: 13.5px;
+ margin: 0;
+ justify-content: flex-start;
+ flex: 1;
+ }
+
+ @include on-desktop {
+ gap: 107px;
+ }
+}
+
+.navLink {
+ display: block;
+ font-family: $font-family;
+ font-size: $font-size-uppercase;
+ font-weight: 800;
+ line-height: $line-height-uppercase;
+ letter-spacing: $letter-spacing-uppercase;
+ text-transform: uppercase;
+ color: $color-secondary;
+ text-decoration: none;
+
+ @include hover-transition(color);
+
+ &:hover {
+ color: $color-primary;
+ }
+}
+
+.backToTopArrow {
+ width: 32px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: 1px solid $color-icons;
+ flex-shrink: 0;
+ transition: border-color $transition, background-color $transition;
+
+ img {
+ width: 16px;
+ height: 16px;
+ transform: rotate(180deg);
+ transition: filter $transition;
+ }
+}
+
+.backToTop {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ align-self: center;
+ background: none;
+ border: none;
+ cursor: pointer;
+ font-family: $font-family;
+ font-size: $font-size-uppercase;
+ font-weight: 800;
+ line-height: $line-height-uppercase;
+ letter-spacing: $letter-spacing-uppercase;
+ text-transform: uppercase;
+ color: $color-secondary;
+
+ @include hover-transition(color);
+
+ &:hover {
+ color: $color-primary;
+
+ .backToTopArrow {
+ border-color: $color-primary;
+ }
+ }
+
+ &:active {
+ .backToTopArrow {
+ background-color: $color-primary;
+ border-color: $color-primary;
+
+ img {
+ filter: invert(1);
+ }
+ }
+ }
+
+ @include on-tablet {
+ flex-shrink: 0;
+ }
+}
diff --git a/src/modules/shared/components/Footer/Footer.tsx b/src/modules/shared/components/Footer/Footer.tsx
new file mode 100644
index 00000000000..e971bec1e57
--- /dev/null
+++ b/src/modules/shared/components/Footer/Footer.tsx
@@ -0,0 +1,70 @@
+import { Link } from 'react-router-dom';
+import { AppRoutes } from '../../../../utils/routes';
+import { ICONS } from '../../../../constants';
+import styles from './Footer.module.scss';
+
+export const Footer = () => {
+ const handleBackToTop = () => {
+ window.scrollTo({ top: 0, behavior: 'smooth' });
+ };
+
+ return (
+
+ );
+};
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..b25fbeca702
--- /dev/null
+++ b/src/modules/shared/components/Header/Header.module.scss
@@ -0,0 +1,278 @@
+@use '../../../../styles/mixins' as *;
+@use '../../../../styles/variables' as *;
+
+.header {
+ position: sticky;
+ top: 0;
+ z-index: 100;
+ width: 100%;
+ height: 48px;
+ background-color: $color-white;
+ box-shadow: 0 1px 0 0 $color-elements;
+
+ @include on-desktop {
+ height: 64px;
+ }
+}
+
+.container {
+ height: 100%;
+ display: flex;
+ align-items: center;
+}
+
+.logo {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 96px;
+ height: 48px;
+ flex-shrink: 0;
+
+ img {
+ width: 64px;
+ height: 22px;
+ object-fit: contain;
+
+ @include on-desktop {
+ width: 80px;
+ height: 28px;
+ }
+ }
+
+ @include on-desktop {
+ width: 128px;
+ height: 64px;
+ }
+
+ @include hover-scale;
+}
+
+// Tablet+ nav — hidden on mobile
+.nav {
+ display: none;
+ height: 100%;
+
+ @include on-tablet {
+ display: flex;
+ padding-left: 16px;
+ }
+
+ @include on-desktop {
+ padding-left: 24px;
+ }
+}
+
+.navList {
+ list-style: none;
+ display: flex;
+ align-items: stretch;
+ gap: 32px;
+
+ @include on-desktop {
+ gap: 64px;
+ }
+}
+
+.navLink {
+ display: flex;
+ align-items: center;
+ height: 100%;
+
+ @include nav-link;
+}
+
+.navLinkActive {
+ color: $color-primary;
+
+ &::after {
+ transform: scaleX(1);
+ }
+}
+
+// Right side actions
+.actions {
+ display: flex;
+ align-items: stretch;
+ margin-left: auto;
+ height: 100%;
+}
+
+// Tablet+ icon buttons (favourites, cart) — hidden on mobile
+.iconButton {
+ display: none;
+
+ @include on-tablet {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 48px;
+ height: 48px;
+ border: 1px solid $color-elements;
+ border-bottom: 2px solid transparent;
+ flex-shrink: 0;
+ position: relative;
+
+ @include hover-transition(border-color);
+
+ &:hover {
+ border-color: $color-secondary;
+ }
+
+ &.iconButtonActive {
+ border-bottom: 3px solid $color-primary;
+ }
+
+ img {
+ width: 16px;
+ height: 16px;
+ object-fit: contain;
+ }
+ }
+
+ @include on-desktop {
+ height: 64px;
+ width: 64px;
+ }
+}
+
+.badge {
+ position: absolute;
+ top: 30%;
+ right: 43%;
+ min-width: 14px;
+ height: 14px;
+ padding: 0 3px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: $color-red;
+ color: $color-white;
+ font-size: 9px;
+ font-weight: 700;
+ border-radius: 50%;
+ border: 1px solid $color-white;
+
+ @include on-tablet {
+ top: 25%;
+ right: 25%;
+ }
+
+ @include on-desktop {
+ top: 30%;
+ right: 25%;
+ }
+}
+
+// Mobile-only menu button — hidden on tablet+
+.menuButton {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 48px;
+ height: 48px;
+ background: none;
+ border: 1px solid $color-elements;
+ cursor: pointer;
+ flex-shrink: 0;
+
+ @include hover-transition(border-color);
+
+ &:hover {
+ border-color: $color-secondary;
+ }
+
+ img {
+ width: 16px;
+ height: 16px;
+ object-fit: contain;
+ }
+
+ @include on-tablet {
+ display: none;
+ }
+}
+
+// Mobile slide-in menu
+.mobileMenu {
+ position: fixed;
+ top: 48px;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ background-color: $color-white;
+ z-index: 95;
+ transform: translateX(-100%);
+ transition: transform 0.7s ease;
+ overflow-y: auto;
+
+ @include on-tablet {
+ display: none;
+ }
+}
+
+.mobileMenuOpen {
+ transform: translateX(0);
+}
+
+.mobileNavList {
+ list-style: none;
+ width: 100%;
+ padding-top: 24px;
+ margin: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 32px;
+}
+
+.mobileNavLink {
+ display: block;
+ padding-bottom: 8px;
+
+ @include nav-link;
+}
+
+.mobileNavLinkActive {
+ color: $color-primary;
+
+ &::after {
+ transform: scaleX(1);
+ }
+}
+
+// Bottom favourites + cart — pinned to bottom of mobile menu
+.menuBottomActions {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ display: flex;
+ border-top: 1px solid $color-elements;
+}
+
+.menuIconButton {
+ flex: 1;
+ height: 64px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: 1px solid $color-elements;
+ border-bottom: 2px solid transparent;
+ position: relative;
+
+ @include hover-transition(border-color);
+
+ &:hover {
+ border-color: $color-secondary;
+ }
+
+ &.menuIconButtonActive {
+ border-bottom-color: $color-primary;
+ }
+
+ img {
+ width: 16px;
+ height: 16px;
+ }
+}
diff --git a/src/modules/shared/components/Header/Header.tsx b/src/modules/shared/components/Header/Header.tsx
new file mode 100644
index 00000000000..fc632f5c315
--- /dev/null
+++ b/src/modules/shared/components/Header/Header.tsx
@@ -0,0 +1,147 @@
+import { useState } from 'react';
+import { Link, NavLink } from 'react-router-dom';
+import { AppRoutes } from '../../../../utils/routes';
+import { ICONS } from '../../../../constants';
+import { useProducts, useCart } from '../../../../context';
+import styles from './Header.module.scss';
+
+export const Header = () => {
+ const [menuOpen, setMenuOpen] = useState(false);
+ const { favorites } = useProducts();
+ const { totalQuantity } = useCart();
+
+ const navLinks = [
+ { to: AppRoutes.HOME, label: 'Home' },
+ { to: AppRoutes.PHONES, label: 'Phones' },
+ { to: AppRoutes.TABLETS, label: 'Tablets' },
+ { to: AppRoutes.ACCESSORIES, label: 'Accessories' },
+ ];
+
+ return (
+ <>
+
+
+
+ {isOpen && (
+
+ -
+ {options.map(option => (
+
- + + + ))} +
+ {/* Logo */}
+ setMenuOpen(false)}
+ >
+ 
+
+
+ {/* Tablet+ nav links */}
+
+
+ {/* Right side buttons */}
+
+
+ {/* Tablet+ icon buttons */}
+
+ `${styles.iconButton}${isActive ? ` ${styles.iconButtonActive}` : ''}`
+ }
+ aria-label="Favourites"
+ >
+ 
+ {favorites.length > 0 && (
+ {favorites.length}
+ )}
+
+
+ `${styles.iconButton}${isActive ? ` ${styles.iconButtonActive}` : ''}`
+ }
+ aria-label="Cart"
+ >
+ 
+ {totalQuantity > 0 && (
+ {totalQuantity}
+ )}
+
+
+ {/* Mobile-only menu button */}
+
+
+
+
+ {!isHomePage && breadcrumbLinks.length > 0 && (
+
+
+
+
+ );
+};
diff --git a/src/modules/shared/components/Loader/Loader.module.scss b/src/modules/shared/components/Loader/Loader.module.scss
new file mode 100644
index 00000000000..b9a382e9757
--- /dev/null
+++ b/src/modules/shared/components/Loader/Loader.module.scss
@@ -0,0 +1,25 @@
+.loader {
+ display: flex;
+ width: 100%;
+ justify-content: center;
+ align-items: center;
+
+ .content {
+ border-radius: 50%;
+ width: 2em;
+ height: 2em;
+ margin: 1em auto;
+ border: 0.3em solid #ddd;
+ border-left-color: #000;
+ animation: load8 1.2s infinite linear;
+ }
+}
+
+@keyframes load8 {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
diff --git a/src/modules/shared/components/Loader/Loader.tsx b/src/modules/shared/components/Loader/Loader.tsx
new file mode 100644
index 00000000000..329d74fe68c
--- /dev/null
+++ b/src/modules/shared/components/Loader/Loader.tsx
@@ -0,0 +1,7 @@
+import styles from './Loader.module.scss';
+
+export const Loader = () => (
+
+
+
+);
diff --git a/src/modules/shared/components/Loader/index.ts b/src/modules/shared/components/Loader/index.ts
new file mode 100644
index 00000000000..d5ce981151f
--- /dev/null
+++ b/src/modules/shared/components/Loader/index.ts
@@ -0,0 +1 @@
+export * from './Loader';
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..8cf8e056dfa
--- /dev/null
+++ b/src/modules/shared/components/ProductCard/ProductCard.module.scss
@@ -0,0 +1,165 @@
+@use '../../../../styles/mixins' as *;
+@use '../../../../styles/variables' as *;
+
+.card {
+ width: 100%;
+ padding: 32px;
+ min-height: 500px;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ border: 1px solid $color-elements;
+ background-color: $color-white;
+}
+
+.name {
+ @include button-text;
+
+ color: $color-primary;
+}
+
+.linkContainer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-decoration: none;
+ color: inherit;
+ gap: 8px;
+
+ @include hover-scale;
+
+ &:hover .name {
+ color: $color-secondary;
+ }
+}
+
+
+.imageWrapper {
+ height: 196px;
+ flex-shrink: 1; // ← shrinks if long text needs space
+ min-height: 80px; // ← never goes smaller than this
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 8px;
+}
+
+.image {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+}
+
+
+.prices {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.price {
+ font-size: $font-size-h3;
+ line-height: $line-height-h3;
+ font-weight: 700;
+ color: $color-primary;
+}
+
+.fullPrice {
+ font-size: $font-size-h3;
+ line-height: $line-height-h3;
+ font-weight: 500;
+ color: $color-secondary;
+ text-decoration: line-through;
+}
+
+.divider {
+ border: none;
+ border-top: 1px solid $color-elements;
+ margin: 0;
+}
+
+.specs {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.specRow {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.specLabel {
+ font-size: $font-size-small;
+ line-height: $line-height-small;
+ font-weight: 600;
+ color: $color-secondary;
+}
+
+.specValue {
+ font-size: $font-size-small;
+ line-height: $line-height-small;
+ font-weight: 600;
+ color: $color-primary;
+}
+
+.buttons {
+ display: flex;
+ gap: 8px;
+ margin-top: auto;
+}
+
+.addToCart {
+ flex: 1;
+ height: 40px;
+ background-color: $color-primary;
+ color: $color-white;
+ font-size: $font-size-button;
+ line-height: $line-height-button;
+ font-weight: 700;
+ border: none;
+ cursor: pointer;
+ transition: box-shadow $transition;
+
+ @include hover-transition(box-shadow);
+
+ &:hover {
+ box-shadow: 0 3px 13px 0 rgba(23, 32, 49, 0.4);
+ }
+}
+
+.addToCartActive {
+ background-color: $color-white;
+ color: $color-green;
+ border: 1px solid $color-green;
+}
+
+.favourites {
+ width: 40px;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: $color-white;
+ border: 1px solid $color-icons;
+ cursor: pointer;
+ flex-shrink: 0;
+ transition: box-shadow $transition;
+
+ @include hover-transition(box-shadow);
+
+
+ &:hover {
+ border-color: $color-primary;
+ box-shadow: 0 3px 13px 0 rgba(23, 32, 49, 0.4);
+ }
+
+ img {
+ width: 16px;
+ height: 16px;
+ }
+}
diff --git a/src/modules/shared/components/ProductCard/ProductCard.tsx b/src/modules/shared/components/ProductCard/ProductCard.tsx
new file mode 100644
index 00000000000..497a84ec531
--- /dev/null
+++ b/src/modules/shared/components/ProductCard/ProductCard.tsx
@@ -0,0 +1,85 @@
+import { Link } from 'react-router-dom';
+import { Product } from '../../../../types';
+import { useProducts, useCart } from '../../../../context';
+import { getImageUrl } from '../../../../utils';
+import { ICONS } from '../../../../constants';
+import styles from './ProductCard.module.scss';
+
+interface Props {
+ product: Product;
+ showDiscount?: boolean;
+}
+
+export const ProductCard = ({ product, showDiscount = true }: Props) => {
+ const {
+ name,
+ price,
+ fullPrice,
+ image,
+ screen,
+ capacity,
+ ram,
+ category,
+ itemId,
+ } = product;
+ const hasDiscount = showDiscount && price !== fullPrice;
+ const { isFavorite, toggleFavorite } = useProducts();
+ const isInFavorites = isFavorite(product.id);
+ const { isInCart, addToCart } = useCart();
+ const inCart = isInCart(product.id);
+
+ return (
+ + +