+
+ );
+};
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/ContactsPage/ContactsPage.module.scss b/src/modules/ContactsPage/ContactsPage.module.scss
new file mode 100644
index 00000000000..5dc4a78c793
--- /dev/null
+++ b/src/modules/ContactsPage/ContactsPage.module.scss
@@ -0,0 +1,45 @@
+@use '@/styles/variables' as *;
+@use '@/styles/mixins' as *;
+
+.container {
+ padding-bottom: $spacing-3xl;
+
+ @include content-width;
+}
+
+.title {
+ margin-bottom: $spacing-xl;
+}
+
+.grid {
+ display: grid;
+ gap: $spacing-lg;
+
+ @include media-up($breakpoint-tablet) {
+ grid-template-columns: 1fr 1fr;
+ }
+}
+
+.card {
+ display: flex;
+ flex-direction: column;
+ gap: $spacing-sm;
+ padding: $spacing-lg;
+ border: 1px solid $color-elements;
+ border-radius: 8px;
+}
+
+.cardTitle {
+ margin-bottom: $spacing-xs;
+ color: $color-primary;
+}
+
+.link {
+ text-decoration: underline;
+ color: $color-primary;
+ transition: opacity $transition-base;
+
+ &:hover {
+ opacity: 0.7;
+ }
+}
diff --git a/src/modules/ContactsPage/ContactsPage.tsx b/src/modules/ContactsPage/ContactsPage.tsx
new file mode 100644
index 00000000000..222cd9db0f8
--- /dev/null
+++ b/src/modules/ContactsPage/ContactsPage.tsx
@@ -0,0 +1,48 @@
+import { Breadcrumbs } from '../shared/components/Breadcrumbs';
+import styles from './ContactsPage.module.scss';
+
+export const ContactsPage = () => {
+ return (
+ Cart
+ + {cartItems.length === 0 ? ( +Your cart is empty
+ ) : ( +
+
+ )}
+ -
+ {cartItems.map(item => (
+
-
+
+
+ ))}
+
+
+ + +
+
+
+
+ ${cartTotal}
+Total for {cartCount} items
++ + +
+
+ );
+};
diff --git a/src/modules/ContactsPage/index.ts b/src/modules/ContactsPage/index.ts
new file mode 100644
index 00000000000..02d17d0341a
--- /dev/null
+++ b/src/modules/ContactsPage/index.ts
@@ -0,0 +1 @@
+export { ContactsPage } from './ContactsPage';
diff --git a/src/modules/FavoritesPage/FavoritesPage.module.scss b/src/modules/FavoritesPage/FavoritesPage.module.scss
new file mode 100644
index 00000000000..63ea5dd6300
--- /dev/null
+++ b/src/modules/FavoritesPage/FavoritesPage.module.scss
@@ -0,0 +1,14 @@
+@use '@/styles/variables' as *;
+@use '@/styles/mixins' as *;
+
+.page {
+ @include content-width;
+}
+
+.empty {
+ margin-top: $spacing-2xl;
+ font-size: 20px;
+ font-weight: 600;
+ text-align: center;
+ color: $color-secondary;
+}
\ No newline at end of file
diff --git a/src/modules/FavoritesPage/FavoritesPage.tsx b/src/modules/FavoritesPage/FavoritesPage.tsx
new file mode 100644
index 00000000000..52e8bb9ae91
--- /dev/null
+++ b/src/modules/FavoritesPage/FavoritesPage.tsx
@@ -0,0 +1,20 @@
+import { useFavorites } from '@/contexts/FavoritesContext';
+import { Breadcrumbs } from '../shared/components/Breadcrumbs';
+import { ProductsList } from '../shared/components/ProductsList';
+import styles from './FavoritesPage.module.scss';
+
+export const FavoritesPage = () => {
+ const { favorites } = useFavorites();
+
+ return (
+ Contacts
+ +
+
+
+
+
+
+
+ Our Store
+123 Gadget Street
+Kyiv, 01001, Ukraine
+Mon – Fri: 9:00 – 20:00
+Sat – Sun: 10:00 – 18:00
+Get in Touch
++ Email:{' '} + + support@nicegadgets.com + +
++ Phone:{' '} + + +38 (044) 123-45-67 + +
++ GitHub:{' '} + + react_phone-catalog + +
+
+
+ );
+};
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..7a8dda92210
--- /dev/null
+++ b/src/modules/HomePage/HomePage.module.scss
@@ -0,0 +1,32 @@
+@use '@/styles/variables' as *;
+@use '@/styles/mixins' as *;
+
+.page {
+ @include content-width;
+}
+
+.hiddenTitle {
+ @include visually-hidden;
+}
+
+.pageTitle {
+ margin-top: $spacing-lg;
+ margin-bottom: $spacing-lg;
+ font-size: 32px;
+ font-weight: 800;
+ line-height: 41px;
+ letter-spacing: -0.01em;
+
+
+ @include media-up($breakpoint-tablet) {
+ margin-top: $spacing-xl;
+ margin-bottom: $spacing-xl;
+ font-size: 48px;
+ line-height: 56px;
+ }
+
+ @include media-up($breakpoint-desktop) {
+ margin-top: 56px;
+ margin-bottom: 56px;
+ }
+}
diff --git a/src/modules/HomePage/HomePage.tsx b/src/modules/HomePage/HomePage.tsx
new file mode 100644
index 00000000000..f9e65db2cd7
--- /dev/null
+++ b/src/modules/HomePage/HomePage.tsx
@@ -0,0 +1,18 @@
+import { WelcomeSlider } from './components/WelcomeSlider';
+import { ProductsSlider } from './components/ProductsSlider';
+import { ShopByCategory } from './components/ShopByCategory';
+import styles from './HomePage.module.scss';
+
+export const HomePage = () => {
+ return (
+ Favorites page
+ {favorites.length === 0 ? ( +You have no favorites yet
+ ) : ( +
+
+ );
+};
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..b3af827f34b
--- /dev/null
+++ b/src/modules/HomePage/components/ProductsSlider/ProductsSlider.module.scss
@@ -0,0 +1,98 @@
+@use '@/styles/variables' as *;
+@use '@/styles/mixins' as *;
+
+.section {
+ width: 100%;
+ margin-top: $spacing-2xl;
+ margin-bottom: $spacing-2xl;
+
+ :global(.swiper) {
+ padding: $spacing-sm;
+ margin: -$spacing-sm;
+ }
+
+ :global(.swiper-wrapper) {
+ align-items: stretch;
+ }
+
+ :global(.swiper-slide) {
+ width: 212px;
+ height: auto;
+
+ @include media-up($breakpoint-tablet) {
+ width: 237px;
+ }
+
+ @include media-up($breakpoint-desktop) {
+ width: auto;
+ }
+ }
+}
+
+.header {
+ @include flex-between;
+
+ gap: $spacing-md;
+ margin-bottom: $spacing-md;
+
+ @include media-up($breakpoint-tablet) {
+ margin-bottom: $spacing-lg;
+ }
+}
+
+.title {
+ margin: 0;
+ font-family: $font-family-base;
+ font-size: 22px;
+ font-weight: 800;
+ line-height: 140%;
+ color: $color-primary;
+
+ @include media-up($breakpoint-tablet) {
+ font-size: 32px;
+ line-height: 41px;
+ letter-spacing: -0.01em;
+ }
+}
+
+.controls {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: $spacing-md;
+}
+
+.navBtn {
+ @include flex-center;
+
+ flex-shrink: 0;
+
+ width: 32px;
+ height: 32px;
+ background: $color-white;
+ border: 1px solid $color-icons;
+ cursor: pointer;
+ color: $color-primary;
+ transition: border-color $transition-base,
+ color $transition-base;
+
+ &:hover:not(:disabled) {
+ border-color: $color-primary;
+ }
+}
+
+.navBtnLeft {
+ img {
+ transform: rotate(180deg);
+ }
+}
+
+.navBtnDisabled {
+ border-color: $color-elements;
+ cursor: default;
+ color: $color-icons;
+
+ img {
+ opacity: 0.4;
+ }
+}
diff --git a/src/modules/HomePage/components/ProductsSlider/ProductsSlider.tsx b/src/modules/HomePage/components/ProductsSlider/ProductsSlider.tsx
new file mode 100644
index 00000000000..f83e0029036
--- /dev/null
+++ b/src/modules/HomePage/components/ProductsSlider/ProductsSlider.tsx
@@ -0,0 +1,104 @@
+import { useEffect, useRef, useState } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Navigation } from 'swiper/modules';
+import type { Swiper as SwiperType } from 'swiper';
+import 'swiper/css';
+
+import { ProductCard } from '../../../shared/components/ProductCard';
+import type { Product } from '@/types/Product';
+import styles from './ProductsSlider.module.scss';
+import iconChevron from '@/assets/icons/icon-chevron.svg';
+
+type SliderType = 'brand-new' | 'hot-prices' | 'you-may-also-like';
+
+type Props = {
+ title: string;
+ type: SliderType;
+};
+
+export const ProductsSlider = ({ title, type }: Props) => {
+ const [products, setProducts] = useStateProduct Catalog
+Welcome to Nice Gadgets store!
+ +
+
+
+ {products.length > 0 && (
+ {title}
+ +
+
+
+
+
+ Shop by category
+ +
+ {categories.map(({ name, path, bg, image }) => {
+ const key = path.slice(1);
+
+ return (
+
+
+
+ 
+
+
+
+
+
+ );
+ })}
+ {name}
+{counts[key] ?? 0} models
+
+
+ );
+};
diff --git a/src/modules/HomePage/components/WelcomeSlider/index.ts b/src/modules/HomePage/components/WelcomeSlider/index.ts
new file mode 100644
index 00000000000..e8a86640cfa
--- /dev/null
+++ b/src/modules/HomePage/components/WelcomeSlider/index.ts
@@ -0,0 +1 @@
+export { WelcomeSlider } from './WelcomeSlider';
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..6b0e3cf95b1
--- /dev/null
+++ b/src/modules/NotFoundPage/NotFoundPage.module.scss
@@ -0,0 +1,27 @@
+@use '@/styles/variables' as *;
+@use '@/styles/mixins' as *;
+
+.container {
+ @include content-width;
+
+ h1 {
+ display: flex;
+ justify-content: center;
+ margin-top: 200px;
+ }
+}
+
+.homeLink {
+ display: block;
+ margin-top: $spacing-lg;
+ font-size: 16px;
+ font-weight: 600;
+ text-align: center;
+ text-decoration: none;
+ color: $color-primary;
+ transition: opacity $transition-base;
+
+ &:hover {
+ opacity: 0.7;
+ }
+}
diff --git a/src/modules/NotFoundPage/NotFoundPage.tsx b/src/modules/NotFoundPage/NotFoundPage.tsx
new file mode 100644
index 00000000000..4781479dcf8
--- /dev/null
+++ b/src/modules/NotFoundPage/NotFoundPage.tsx
@@ -0,0 +1,13 @@
+import { Link } from 'react-router-dom';
+import styles from './NotFoundPage.module.scss';
+
+export const NotFoundPage = () => {
+ return (
+
+
+ {SLIDES.map((slide, i) => (
+
+ 
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+ );
+};
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/PhonesPage/PhonesPage.tsx b/src/modules/PhonesPage/PhonesPage.tsx
new file mode 100644
index 00000000000..e005b6b3a38
--- /dev/null
+++ b/src/modules/PhonesPage/PhonesPage.tsx
@@ -0,0 +1,5 @@
+import { CatalogPage } from '../shared/components/CatalogPage';
+
+export const PhonesPage = () => (
+ Page not found
+ + Go to Home page + +{error}
; + } + + if (!product) { + returnProduct was not found
; + } + + const categoryLabel = CATEGORY_LABELS[product.category] ?? product.category; + + return ( +
+
+ );
+};
diff --git a/src/modules/ProductDetailsPage/components/ImageSlider/ImageSlider.module.scss b/src/modules/ProductDetailsPage/components/ImageSlider/ImageSlider.module.scss
new file mode 100644
index 00000000000..50411433e5c
--- /dev/null
+++ b/src/modules/ProductDetailsPage/components/ImageSlider/ImageSlider.module.scss
@@ -0,0 +1,87 @@
+@use '@/styles/variables' as *;
+@use '@/styles/mixins' as *;
+
+.wrapper {
+ display: flex;
+ flex-direction: column;
+ gap: $spacing-md;
+
+ @include media-up($breakpoint-tablet) {
+ flex-direction: row;
+ align-items: flex-start;
+ }
+}
+
+.thumbnails {
+ display: flex;
+ flex-direction: row;
+ gap: $spacing-sm;
+ order: 2;
+ overflow-x: auto;
+
+ @include media-up($breakpoint-tablet) {
+ flex-direction: column;
+ order: 1;
+ }
+
+ @include media-up($breakpoint-desktop) {
+ gap: $spacing-md;
+ }
+}
+
+.thumb {
+ flex-shrink: 0;
+ width: 51px;
+ aspect-ratio: 51 / 49;
+ padding: 0;
+ background: none;
+ border: 1px solid $color-elements;
+ cursor: pointer;
+ transition: border-color $transition-base;
+
+ @include media-up($breakpoint-tablet) {
+ width: 35px;
+ height: 35px;
+ }
+
+ @include media-up($breakpoint-desktop) {
+ width: 80px;
+ height: 80px;
+ }
+
+ img {
+ display: block;
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ }
+}
+
+.thumb:hover {
+ border-color: $color-icons;
+}
+
+.thumbActive {
+ border-color: $color-primary;
+}
+
+.mainImage {
+ order: 1;
+ min-width: 0;
+
+ @include media-up($breakpoint-tablet) {
+ order: 2;
+ flex: 1;
+ }
+}
+
+.swiper {
+ width: 100%;
+}
+
+.slide {
+ display: block;
+ width: 100%;
+ aspect-ratio: 1;
+ object-fit: contain;
+}
diff --git a/src/modules/ProductDetailsPage/components/ImageSlider/ImageSlider.tsx b/src/modules/ProductDetailsPage/components/ImageSlider/ImageSlider.tsx
new file mode 100644
index 00000000000..d71ff617700
--- /dev/null
+++ b/src/modules/ProductDetailsPage/components/ImageSlider/ImageSlider.tsx
@@ -0,0 +1,61 @@
+import { useRef, useState } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import type { Swiper as SwiperType } from 'swiper';
+import 'swiper/css';
+import cn from 'classnames';
+import styles from './ImageSlider.module.scss';
+
+type Props = {
+ images: string[];
+ alt: string;
+};
+
+export const ImageSlider = ({ images, alt }: Props) => {
+ const [activeIndex, setActiveIndex] = useState(0);
+ const swiperRef = useRef{product.name}
+ +
+
+
+ {detail && (
+
+ {detail &&
+
+ {detail && (
+ <>
+
+
+ ID: {detail.id}
+ Available colors
+
+
+
+ +
+ +
+
+ )}
+
+
+
+
+ {detail.colorsAvailable.map(color => (
+
+ ))}
+
+ + +
+ Select capacity
+
+
+
+ {detail.capacityAvailable.map(cap => (
+
+ ))}
+
+ + +
+ ${detail.priceDiscount}
+
+ ${detail.priceRegular}
+
+
+
+
+
+
+
+
+ -
+ {(
+ [
+ ['Screen', detail.screen],
+ ['Resolution', detail.resolution],
+ ['Processor', detail.processor],
+ ['RAM', detail.ram],
+ ] as [string, string][]
+ ).map(([label, value]) => (
+
- {label} +
- {value} +
+
+ ))}
+
+
+
+
+
+
+
+ )}
+
+ About
+ {detail.description.map((item, idx) => ( +
+
+ ))}
+ {item.title}
+ {item.text.map((para, pIdx) => ( ++ {para} +
+ ))} +Tech specs
+-
+ {TECH_SPEC_FIELDS.map(([label, key]): [string, string] => {
+ const raw = detail[key];
+ const value = Array.isArray(raw) ? raw.join(', ') : String(raw);
+
+ return [label, value];
+ })
+ .filter(([, value]) => Boolean(value))
+ .map(([label, value]) => (
+
- {label} +
- {value} +
+
+ ))}
+
+
+ );
+};
diff --git a/src/modules/ProductDetailsPage/components/ImageSlider/index.ts b/src/modules/ProductDetailsPage/components/ImageSlider/index.ts
new file mode 100644
index 00000000000..c2e4006d494
--- /dev/null
+++ b/src/modules/ProductDetailsPage/components/ImageSlider/index.ts
@@ -0,0 +1 @@
+export { ImageSlider } from './ImageSlider';
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/RightsPage/RightsPage.module.scss b/src/modules/RightsPage/RightsPage.module.scss
new file mode 100644
index 00000000000..50a65301a05
--- /dev/null
+++ b/src/modules/RightsPage/RightsPage.module.scss
@@ -0,0 +1,31 @@
+@use '@/styles/variables' as *;
+@use '@/styles/mixins' as *;
+
+.container {
+ padding-bottom: $spacing-3xl;
+
+ @include content-width;
+}
+
+.title {
+ margin-bottom: $spacing-xl;
+}
+
+.section {
+ margin-bottom: $spacing-xl;
+}
+
+.sectionTitle {
+ margin-bottom: $spacing-sm;
+ color: $color-primary;
+}
+
+.link {
+ text-decoration: underline;
+ color: $color-primary;
+ transition: opacity $transition-base;
+
+ &:hover {
+ opacity: 0.7;
+ }
+}
diff --git a/src/modules/RightsPage/RightsPage.tsx b/src/modules/RightsPage/RightsPage.tsx
new file mode 100644
index 00000000000..b76bcfe6465
--- /dev/null
+++ b/src/modules/RightsPage/RightsPage.tsx
@@ -0,0 +1,57 @@
+import { Breadcrumbs } from '../shared/components/Breadcrumbs';
+import styles from './RightsPage.module.scss';
+
+export const RightsPage = () => {
+ const year = new Date().getFullYear();
+
+ return (
+
+ {images.map((src, i) => (
+
+ ))}
+
+
+
+ {
+ swiperRef.current = s;
+ }}
+ onSlideChange={s => setActiveIndex(s.activeIndex)}
+ slidesPerView={1}
+ className={styles.swiper}
+ >
+ {images.map((src, i) => (
+
+ 
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/modules/RightsPage/index.ts b/src/modules/RightsPage/index.ts
new file mode 100644
index 00000000000..aef12bd2231
--- /dev/null
+++ b/src/modules/RightsPage/index.ts
@@ -0,0 +1 @@
+export { RightsPage } from './RightsPage';
diff --git a/src/modules/TabletsPage/TabletsPage.tsx b/src/modules/TabletsPage/TabletsPage.tsx
new file mode 100644
index 00000000000..a78f09a7087
--- /dev/null
+++ b/src/modules/TabletsPage/TabletsPage.tsx
@@ -0,0 +1,5 @@
+import { CatalogPage } from '../shared/components/CatalogPage';
+
+export const TabletsPage = () => (
+ Rights & Legal
+ +Copyright
++ © {year} Nice Gadgets. All rights reserved. All content, trademarks, + and brand identifiers on this site are the property of Nice Gadgets or + their respective owners. +
+License
++ This project is open-source and available under the{' '} + + MIT License + + . You are free to use, copy, modify, and distribute this software with + attribution. +
+Disclaimer
++ Product images and descriptions are provided for informational + purposes only. Nice Gadgets is not responsible for typographical + errors or inaccuracies in product specifications. +
+Privacy
++ We do not collect personal data beyond what is necessary to process + your order. Cart and favorites data is stored locally in your browser + and never shared with third parties. +
+
+
+
+
+
+ );
+};
diff --git a/src/modules/shared/MainLayout/index.ts b/src/modules/shared/MainLayout/index.ts
new file mode 100644
index 00000000000..bfa7d492fe3
--- /dev/null
+++ b/src/modules/shared/MainLayout/index.ts
@@ -0,0 +1 @@
+export { MainLayout } from './MainLayout';
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..91cc5347035
--- /dev/null
+++ b/src/modules/shared/components/Breadcrumbs/Breadcrumbs.module.scss
@@ -0,0 +1,57 @@
+@use '@/styles/variables' as *;
+
+.root {
+ display: flex;
+ align-items: center;
+ gap: $spacing-sm;
+ height: 16px;
+ margin-top: $spacing-lg;
+ margin-bottom: $spacing-lg;
+}
+
+.home {
+ display: flex;
+ align-items: center;
+ color: $color-primary;
+ transition: color $transition-base;
+
+ &:hover {
+ color: $color-secondary;
+ }
+}
+
+.item {
+ display: flex;
+ align-items: center;
+ gap: $spacing-sm;
+}
+
+.chevron {
+ display: flex;
+ align-items: center;
+ color: $color-icons;
+}
+
+.link {
+ position: relative;
+ top: 1px;
+ font-size: 12px;
+ font-weight: 600;
+ line-height: 1;
+ text-decoration: none;
+ color: $color-primary;
+ transition: color $transition-base;
+
+ &:hover {
+ color: $color-secondary;
+ }
+}
+
+.current {
+ position: relative;
+ top: 1px;
+ font-size: 12px;
+ font-weight: 600;
+ line-height: 1;
+ 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..4bcb4fa9a12
--- /dev/null
+++ b/src/modules/shared/components/Breadcrumbs/Breadcrumbs.tsx
@@ -0,0 +1,85 @@
+import { Link } from 'react-router-dom';
+import styles from './Breadcrumbs.module.scss';
+
+type BreadcrumbItem = {
+ label: string;
+ path?: string;
+};
+
+type Props = {
+ items: BreadcrumbItem[];
+};
+
+/* eslint-disable max-len */
+const HOME_OUTER_PATH =
+ 'M7.59.807a.67.67 0 0 1 .82 0l6 4.667c.162.126.257.32.257.526v7.333a2 2 0 0 1-2 2H3.334a2 2 0 0 1-2-2V6c0-.206.094-.4.257-.526zm-4.923 5.52v7.006a.667.667 0 0 0 .667.667h9.333a.666.666 0 0 0 .667-.667V6.326L8 2.178z';
+const HOME_INNER_PATH =
+ 'M5.334 8c0-.368.298-.667.666-.667h4c.368 0 .667.299.667.667v6.667a.667.667 0 1 1-1.333 0v-6H6.667v6a.667.667 0 0 1-1.333 0z';
+/* eslint-enable max-len */
+
+const HomeIcon = () => (
+
+);
+
+const ChevronIcon = () => (
+
+);
+
+export const Breadcrumbs = ({ items }: Props) => {
+ return (
+
+ );
+};
diff --git a/src/modules/shared/components/Breadcrumbs/index.ts b/src/modules/shared/components/Breadcrumbs/index.ts
new file mode 100644
index 00000000000..28140a257ff
--- /dev/null
+++ b/src/modules/shared/components/Breadcrumbs/index.ts
@@ -0,0 +1 @@
+export { Breadcrumbs } from './Breadcrumbs';
diff --git a/src/modules/shared/components/CartItem/CartItem.module.scss b/src/modules/shared/components/CartItem/CartItem.module.scss
new file mode 100644
index 00000000000..3c6fed33243
--- /dev/null
+++ b/src/modules/shared/components/CartItem/CartItem.module.scss
@@ -0,0 +1,148 @@
+@use '@/styles/variables' as *;
+@use '@/styles/mixins' as *;
+
+.root {
+ display: flex;
+ flex-direction: column;
+ gap: $spacing-md;
+ padding: $spacing-md;
+ background: $color-white;
+ border: 1px solid $color-elements;
+
+ @include media-up($breakpoint-tablet) {
+ flex-direction: row;
+ align-items: center;
+ gap: $spacing-lg;
+ padding: $spacing-lg;
+ }
+}
+
+.topRow {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: $spacing-md;
+
+ @include media-up($breakpoint-tablet) {
+ flex: 1;
+ min-width: 0;
+ }
+}
+
+.closeBtn {
+ display: flex;
+ flex-shrink: 0;
+ justify-content: center;
+ align-items: center;
+ width: 16px;
+ height: 16px;
+ padding: 0;
+ background: none;
+ border: none;
+ opacity: 0.5;
+ cursor: pointer;
+ transition: opacity $transition-base;
+
+ &:hover {
+ opacity: 1;
+ }
+
+ img {
+ display: block;
+ width: 16px;
+ height: 16px;
+ }
+}
+
+.image {
+ flex-shrink: 0;
+ width: 80px;
+ height: 80px;
+ object-fit: contain;
+}
+
+.name {
+ flex-grow: 1;
+ min-width: 0;
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 1.5;
+ color: $color-primary;
+}
+
+.bottomRow {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ height: 32px;
+
+ @include media-up($breakpoint-tablet) {
+ flex-shrink: 0;
+ gap: $spacing-lg;
+ height: auto;
+ }
+}
+
+.counter {
+ display: flex;
+ flex-shrink: 0;
+ align-items: center;
+ width: 96px;
+ height: 32px;
+}
+
+.counterBtn {
+ @include flex-center;
+
+ flex-shrink: 0;
+ width: 32px;
+ height: 32px;
+ background: none;
+ cursor: pointer;
+ transition: border-color $transition-base;
+
+ img {
+ display: block;
+ width: 16px;
+ height: 16px;
+ }
+
+ &:disabled {
+ opacity: 0.4;
+ cursor: default;
+ }
+}
+
+.counterMinus {
+ border: 1px solid $color-elements;
+
+ &:not(:disabled):hover {
+ border-color: $color-primary;
+ }
+}
+
+.counterPlus {
+ border: 1px solid $color-icons;
+
+ &:not(:disabled):hover {
+ border-color: $color-primary;
+ }
+}
+
+.counterValue {
+ flex: 1;
+ font-size: 14px;
+ font-weight: 600;
+ text-align: center;
+ color: $color-primary;
+}
+
+.price {
+ margin: 0;
+ font-size: 22px;
+ font-weight: 800;
+ line-height: 1.4;
+ white-space: nowrap;
+ color: $color-primary;
+}
\ No newline at end of file
diff --git a/src/modules/shared/components/CartItem/CartItem.tsx b/src/modules/shared/components/CartItem/CartItem.tsx
new file mode 100644
index 00000000000..eb5451a45bd
--- /dev/null
+++ b/src/modules/shared/components/CartItem/CartItem.tsx
@@ -0,0 +1,63 @@
+import classNames from 'classnames';
+import type { CartItem as CartItemType } from '@/types/CartItem';
+import { useCart } from '@/contexts/CartContext';
+import closeIcon from '@/assets/icons/icon-close.svg';
+import minusIcon from '@/assets/icons/icon-minus.svg';
+import plusIcon from '@/assets/icons/icon-plus.svg';
+import styles from './CartItem.module.scss';
+
+type Props = {
+ item: CartItemType;
+};
+
+export const CartItem = ({ item }: Props) => {
+ const { removeFromCart, updateQuantity } = useCart();
+ const { product, quantity } = item;
+
+ const handleDecrement = () => updateQuantity(product.id, quantity - 1);
+ const handleIncrement = () => updateQuantity(product.id, quantity + 1);
+
+ return (
+
+
+ );
+};
diff --git a/src/modules/shared/components/CartItem/index.ts b/src/modules/shared/components/CartItem/index.ts
new file mode 100644
index 00000000000..186b364ebdf
--- /dev/null
+++ b/src/modules/shared/components/CartItem/index.ts
@@ -0,0 +1 @@
+export { CartItem } from './CartItem';
diff --git a/src/modules/shared/components/CatalogPage/CatalogPage.module.scss b/src/modules/shared/components/CatalogPage/CatalogPage.module.scss
new file mode 100644
index 00000000000..640d5c1545f
--- /dev/null
+++ b/src/modules/shared/components/CatalogPage/CatalogPage.module.scss
@@ -0,0 +1,80 @@
+@use '@/styles/variables' as *;
+@use '@/styles/mixins' as *;
+
+.page {
+ @include content-width;
+}
+
+.title {
+ margin: $spacing-lg 0 $spacing-sm;
+ font-size: 32px;
+ font-weight: 800;
+ line-height: 41px;
+ letter-spacing: -0.01em;
+ color: $color-primary;
+
+ @include media-up($breakpoint-tablet) {
+ margin-top: $spacing-2xl;
+ }
+}
+
+.count {
+ margin: 0;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 21px;
+ color: $color-secondary;
+}
+
+.error {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: $spacing-md;
+ padding: $spacing-3xl 0;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 21px;
+ color: $color-primary;
+}
+
+.controls {
+ display: flex;
+ gap: $spacing-md;
+ margin-top: $spacing-lg;
+ margin-bottom: $spacing-lg;
+}
+
+.sortControl {
+ flex: 1;
+
+ @include media-up($breakpoint-tablet) {
+ flex: none;
+ width: 187px;
+ }
+}
+
+.perPageControl {
+ flex: 1;
+
+ @include media-up($breakpoint-tablet) {
+ flex: none;
+ width: 136px;
+ }
+}
+
+.reloadButton {
+ padding: 9px $spacing-xl 7px;
+ background-color: $color-primary;
+ border: none;
+ cursor: pointer;
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 21px;
+ color: $color-white;
+ transition: background-color $transition-base;
+
+ &:hover {
+ background-color: $color-hover;
+ }
+}
diff --git a/src/modules/shared/components/CatalogPage/CatalogPage.tsx b/src/modules/shared/components/CatalogPage/CatalogPage.tsx
new file mode 100644
index 00000000000..c02c92b5dfb
--- /dev/null
+++ b/src/modules/shared/components/CatalogPage/CatalogPage.tsx
@@ -0,0 +1,227 @@
+import { useEffect, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import type { Product } from '@/types/Product';
+import { Breadcrumbs } from '../Breadcrumbs';
+import { ProductsList } from '../ProductsList';
+import { Loader } from '../Loader';
+import { Dropdown } from '../Dropdown';
+import { Pagination } from '../Pagination';
+import styles from './CatalogPage.module.scss';
+
+type Category = 'phones' | 'tablets' | 'accessories';
+type SortKey = 'age' | 'title' | 'price';
+
+type Props = {
+ category: Category;
+ title: string;
+};
+
+const EMPTY_MESSAGES: Record
+
+
+ 
+
+ {product.name}
+
+
+
+
+
+
+ {quantity}
+
+
+ ${product.price * quantity}
+
+
+ );
+};
diff --git a/src/modules/shared/components/CatalogPage/index.ts b/src/modules/shared/components/CatalogPage/index.ts
new file mode 100644
index 00000000000..8decfd6bf14
--- /dev/null
+++ b/src/modules/shared/components/CatalogPage/index.ts
@@ -0,0 +1 @@
+export { CatalogPage } from './CatalogPage';
diff --git a/src/modules/shared/components/Dropdown/Dropdown.module.scss b/src/modules/shared/components/Dropdown/Dropdown.module.scss
new file mode 100644
index 00000000000..86c2438191e
--- /dev/null
+++ b/src/modules/shared/components/Dropdown/Dropdown.module.scss
@@ -0,0 +1,59 @@
+@use '@/styles/variables' as *;
+@use '@/styles/mixins' as *;
+
+.wrapper {
+ display: flex;
+ flex-direction: column;
+ gap: $spacing-xs;
+}
+
+.label {
+ font-size: 12px;
+ font-weight: 700;
+ line-height: 15px;
+ color: $color-secondary;
+}
+
+.selectWrapper {
+ position: relative;
+ display: flex;
+ align-items: center;
+}
+
+.select {
+ width: 100%;
+ height: 40px;
+ padding-right: $spacing-2xl;
+ padding-left: 12px;
+ background: $color-white;
+ border: 1px solid $color-icons;
+ cursor: pointer;
+ font-size: 14px;
+ font-weight: 700;
+ line-height: 21px;
+ color: $color-primary;
+ transition: border-color $transition-base;
+ -webkit-appearance: none;
+
+ appearance: none;
+
+ &:hover,
+ &:focus {
+ border-color: $color-primary;
+ outline: none;
+ }
+}
+
+.chevron {
+ position: absolute;
+ right: 12px;
+ display: flex;
+ align-items: center;
+ pointer-events: none;
+ color: $color-secondary;
+ transition: color $transition-base;
+}
+
+.selectWrapper:hover .chevron {
+ color: $color-primary;
+}
diff --git a/src/modules/shared/components/Dropdown/Dropdown.tsx b/src/modules/shared/components/Dropdown/Dropdown.tsx
new file mode 100644
index 00000000000..d78e0be87c6
--- /dev/null
+++ b/src/modules/shared/components/Dropdown/Dropdown.tsx
@@ -0,0 +1,52 @@
+import { useId } from 'react';
+import styles from './Dropdown.module.scss';
+
+type Option = { value: string; label: string };
+
+type Props = {
+ label: string;
+ value: string;
+ options: Option[];
+ onChange: (value: string) => void;
+};
+
+const ChevronIcon = () => (
+
+);
+
+export const Dropdown = ({ label, value, options, onChange }: Props) => {
+ const selectId = useId();
+
+ return (
+ {title}
+ + {isLoading ? ( +
+
+ ) : products.length === 0 ? (
+ Something went wrong
+ +{EMPTY_MESSAGES[category]}
+ ) : ( + <> +{products.length} models
+
+
+
+
+
+
+
+
+
+ );
+};
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/Loader/Loader.module.scss b/src/modules/shared/components/Loader/Loader.module.scss
new file mode 100644
index 00000000000..01c682c46ed
--- /dev/null
+++ b/src/modules/shared/components/Loader/Loader.module.scss
@@ -0,0 +1,27 @@
+@use '@/styles/variables' as *;
+@use '@/styles/mixins' as *;
+
+@keyframes spin {
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+.root {
+ @include flex-center;
+
+ padding: $spacing-2xl 0;
+
+ @include media-up($breakpoint-tablet) {
+ padding: $spacing-3xl 0;
+ }
+}
+
+.spinner {
+ width: $spacing-2xl;
+ height: $spacing-2xl;
+ border: 4px solid $color-elements;
+ border-top-color: $color-primary;
+ border-radius: 50%;
+ animation: spin 0.8s linear infinite;
+}
diff --git a/src/modules/shared/components/Loader/Loader.tsx b/src/modules/shared/components/Loader/Loader.tsx
new file mode 100644
index 00000000000..990fdfbbfbb
--- /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..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/Pagination/Pagination.module.scss b/src/modules/shared/components/Pagination/Pagination.module.scss
new file mode 100644
index 00000000000..58d2c8d003c
--- /dev/null
+++ b/src/modules/shared/components/Pagination/Pagination.module.scss
@@ -0,0 +1,81 @@
+@use '@/styles/variables' as *;
+@use '@/styles/mixins' as *;
+
+.root {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: $spacing-sm;
+ width: fit-content;
+ padding: 0;
+ margin: $spacing-2xl auto;
+ list-style: none;
+}
+
+.button {
+ @include flex-center;
+
+ width: 32px;
+ height: 32px;
+ padding: 0;
+ background: $color-white;
+ border: none;
+ cursor: pointer;
+ transition: border-color $transition-base;
+}
+
+.arrow {
+ border: 1px solid $color-icons;
+ color: $color-primary;
+
+ &:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ }
+
+ &:hover:not(:disabled) {
+ border-color: $color-primary;
+ }
+}
+
+.icon {
+ display: flex;
+}
+
+.arrowLeft .icon {
+ transform: scaleX(-1);
+}
+
+.page {
+ border: 1px solid $color-elements;
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 21px;
+ color: $color-primary;
+
+ &:hover {
+ border-color: $color-primary;
+ }
+}
+
+.ellipsis {
+ display: flex;
+ justify-content: center;
+ align-items: flex-end;
+ width: 32px;
+ height: 32px;
+ padding-bottom: $spacing-xs;
+ font-size: 14px;
+ font-weight: 600;
+ color: $color-secondary;
+}
+
+.active {
+ background: $color-primary;
+ border-color: transparent;
+ color: $color-white;
+
+ &:hover {
+ border-color: transparent;
+ }
+}
diff --git a/src/modules/shared/components/Pagination/Pagination.tsx b/src/modules/shared/components/Pagination/Pagination.tsx
new file mode 100644
index 00000000000..5c371a9cfaf
--- /dev/null
+++ b/src/modules/shared/components/Pagination/Pagination.tsx
@@ -0,0 +1,155 @@
+import { useMemo } from 'react';
+import cn from 'classnames';
+import styles from './Pagination.module.scss';
+
+const BUTTON_SIZE = 32;
+const BUTTON_GAP = 8;
+const BREAKPOINT_TABLET = 640;
+const BREAKPOINT_DESKTOP = 1200;
+const PADDING_MOBILE = 32; // 16px × 2 sides
+const PADDING_TABLET = 48; // 24px × 2 sides
+const PADDING_DESKTOP = 64; // 32px × 2 sides
+// Minimum width: 7 buttons (< 1 ... X ... N >) with delta=0
+const MIN_PAGINATION_WIDTH = 7 * BUTTON_SIZE + 6 * BUTTON_GAP;
+// Each delta level adds 2 buttons (left + right of current)
+const WIDTH_PER_DELTA = 2 * (BUTTON_SIZE + BUTTON_GAP);
+
+type PageItem = number | 'ellipsis-left' | 'ellipsis-right';
+
+type Props = {
+ currentPage: number;
+ totalPages: number;
+ onPageChange: (page: number) => void;
+};
+
+function getVisiblePages(
+ current: number,
+ total: number,
+ delta: number,
+): PageItem[] {
+ const rangeStart = Math.max(2, current - delta);
+ const rangeEnd = Math.min(total - 1, current + delta);
+
+ const result: PageItem[] = [1];
+
+ if (rangeStart > 2) {
+ result.push('ellipsis-left');
+ }
+
+ for (let i = rangeStart; i <= rangeEnd; i++) {
+ result.push(i);
+ }
+
+ if (rangeEnd < total - 1) {
+ result.push('ellipsis-right');
+ }
+
+ if (total > 1) {
+ result.push(total);
+ }
+
+ return result;
+}
+
+const ChevronRight = () => (
+
+);
+
+export const Pagination = ({
+ currentPage,
+ totalPages,
+ onPageChange,
+}: Props) => {
+ const delta = useMemo(() => {
+ const horizontalPadding =
+ window.innerWidth >= BREAKPOINT_DESKTOP
+ ? PADDING_DESKTOP
+ : window.innerWidth >= BREAKPOINT_TABLET
+ ? PADDING_TABLET
+ : PADDING_MOBILE;
+ const available = window.innerWidth - horizontalPadding;
+
+ return Math.min(
+ totalPages,
+ Math.max(
+ 0,
+ Math.floor((available - MIN_PAGINATION_WIDTH) / WIDTH_PER_DELTA),
+ ),
+ );
+ }, [totalPages]);
+
+ const handlePageClick = (page: number) => {
+ if (page === currentPage) {
+ return;
+ }
+
+ onPageChange(page);
+ };
+
+ return (
+
+ );
+};
diff --git a/src/modules/shared/components/Pagination/index.ts b/src/modules/shared/components/Pagination/index.ts
new file mode 100644
index 00000000000..0a1fd4dad6c
--- /dev/null
+++ b/src/modules/shared/components/Pagination/index.ts
@@ -0,0 +1 @@
+export { Pagination } from './Pagination';
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..b3525c79209
--- /dev/null
+++ b/src/modules/shared/components/ProductCard/ProductCard.module.scss
@@ -0,0 +1,164 @@
+@use 'sass:color';
+@use '@/styles/variables' as *;
+@use '@/styles/mixins' as *;
+
+.card {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: $spacing-sm;
+ width: 100%;
+ height: 100%;
+ padding: $spacing-xl;
+ background: $color-white;
+ border: 1px solid $color-elements;
+ box-sizing: border-box;
+ transition: box-shadow $transition-base;
+
+ &:hover {
+ z-index: 1;
+ box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
+ }
+}
+
+.imageWrapper {
+ display: flex;
+ flex-grow: 1;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+}
+
+.image {
+ max-width: 100%;
+ max-height: 100%;
+ object-fit: contain;
+ transition: transform $transition-base;
+
+ .card:hover & {
+ transform: scale(1.1);
+ }
+}
+
+.titleWrapper {
+ width: 100%;
+ padding-top: $spacing-md;
+}
+
+.title {
+ margin: 0;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 21px;
+ text-decoration: none;
+ color: $color-primary;
+}
+
+.price {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: $spacing-sm;
+}
+
+.currentPrice {
+ font-size: 22px;
+ font-weight: 800;
+ line-height: 140%;
+ color: $color-primary;
+}
+
+.oldPrice {
+ font-size: 22px;
+ font-weight: 600;
+ line-height: 28px;
+ text-decoration: line-through;
+ color: $color-secondary;
+}
+
+.divider {
+ align-self: stretch;
+ width: 100%;
+ height: 1px;
+ background: $color-elements;
+}
+
+.specs {
+ display: flex;
+ flex-direction: column;
+ gap: $spacing-sm;
+ width: 100%;
+ padding: $spacing-sm 0;
+}
+
+.spec {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+}
+
+.specLabel {
+ font-size: 12px;
+ font-weight: 600;
+ line-height: 15px;
+ color: $color-secondary;
+}
+
+.specValue {
+ font-size: 12px;
+ font-weight: 600;
+ line-height: 15px;
+ text-align: right;
+ color: $color-primary;
+}
+
+.buttons {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: $spacing-sm;
+ width: 100%;
+}
+
+.addToCart {
+ @include flex-center;
+
+ flex: 1;
+ height: 40px;
+ background: $color-primary;
+ border: none;
+ cursor: pointer;
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 21px;
+ color: $color-white;
+ transition: background $transition-base;
+
+ &:hover {
+ background: color.adjust($color-primary, $lightness: 10%);
+ }
+}
+
+.addToFavorites {
+ @include flex-center;
+
+ flex-shrink: 0;
+
+ width: 40px;
+ height: 40px;
+ background: $color-white;
+ border: 1px solid $color-icons;
+ cursor: pointer;
+ transition: border-color $transition-base;
+
+ &:hover {
+ border-color: $color-primary;
+ }
+
+ 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..5ef4b937714
--- /dev/null
+++ b/src/modules/shared/components/ProductCard/ProductCard.tsx
@@ -0,0 +1,84 @@
+import { Link } from 'react-router-dom';
+import heartIcon from '@/assets/icons/icon-favorites.svg';
+import heartIconSelected from '@/assets/icons/icon-favorites-selected.svg';
+import type { Product } from '@/types/Product';
+import { useFavorites } from '@/contexts/FavoritesContext';
+import { useCart } from '@/contexts/CartContext';
+import styles from './ProductCard.module.scss';
+
+type Props = {
+ product: Product;
+ hideOldPrice?: boolean;
+};
+
+export const ProductCard = ({ product, hideOldPrice = false }: Props) => {
+ const hasDiscount = !hideOldPrice && product.fullPrice > product.price;
+ const { toggleFavorite, isFavorite } = useFavorites();
+ const isProductFavorited = isFavorite(product.id);
+ const { toggleCart, isInCart } = useCart();
+ const isProductInCart = isInCart(product.id);
+
+ return (
+
+
+ );
+};
diff --git a/src/modules/shared/components/ProductCard/index.ts b/src/modules/shared/components/ProductCard/index.ts
new file mode 100644
index 00000000000..c4f2778191c
--- /dev/null
+++ b/src/modules/shared/components/ProductCard/index.ts
@@ -0,0 +1 @@
+export { ProductCard } from './ProductCard';
diff --git a/src/modules/shared/components/ProductsList/ProductsList.module.scss b/src/modules/shared/components/ProductsList/ProductsList.module.scss
new file mode 100644
index 00000000000..ca5bac86635
--- /dev/null
+++ b/src/modules/shared/components/ProductsList/ProductsList.module.scss
@@ -0,0 +1,9 @@
+@use '@/styles/variables' as *;
+@use '@/styles/mixins' as *;
+
+.productsList {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(229px, 1fr));
+ gap: $spacing-md;
+ margin-top: $spacing-lg;
+}
diff --git a/src/modules/shared/components/ProductsList/ProductsList.tsx b/src/modules/shared/components/ProductsList/ProductsList.tsx
new file mode 100644
index 00000000000..2049f7fb887
--- /dev/null
+++ b/src/modules/shared/components/ProductsList/ProductsList.tsx
@@ -0,0 +1,17 @@
+import type { Product } from '@/types/Product';
+import { ProductCard } from '../ProductCard';
+import styles from './ProductsList.module.scss';
+
+type Props = {
+ products: Product[];
+};
+
+export const ProductsList = ({ products }: Props) => {
+ return (
+
+
+
+
+
+
+
+
+ {product.name}
+
+
+
+
+ ${product.price}
+ {hasDiscount && (
+ ${product.fullPrice}
+ )}
+
+
+
+
+
+
+
+
+ Screen
+ {product.screen}
+
+
+ Capacity
+ {product.capacity}
+
+
+ RAM
+ {product.ram}
+
+
+
+
+
+
+ {products.map(product => (
+
+ );
+};
diff --git a/src/modules/shared/components/ProductsList/index.ts b/src/modules/shared/components/ProductsList/index.ts
new file mode 100644
index 00000000000..ae9d590cdbd
--- /dev/null
+++ b/src/modules/shared/components/ProductsList/index.ts
@@ -0,0 +1 @@
+export { ProductsList } from './ProductsList';
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
new file mode 100644
index 00000000000..f005fe87476
--- /dev/null
+++ b/src/styles/_fonts.scss
@@ -0,0 +1,127 @@
+@font-face {
+ font-family: Mont;
+ src: url('@/assets/fonts/Mont-Thin.woff2') format('woff2');
+ font-weight: 100;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Mont;
+ src: url('@/assets/fonts/Mont-ThinItalic.woff2') format('woff2');
+ font-weight: 100;
+ font-style: italic;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Mont;
+ src: url('@/assets/fonts/Mont-ExtraLight.woff2') format('woff2');
+ font-weight: 200;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Mont;
+ src: url('@/assets/fonts/Mont-ExtraLightItalic.woff2') format('woff2');
+ font-weight: 200;
+ font-style: italic;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Mont;
+ src: url('@/assets/fonts/Mont-Light.woff2') format('woff2');
+ font-weight: 300;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Mont;
+ src: url('@/assets/fonts/Mont-LightItalic.woff2') format('woff2');
+ font-weight: 300;
+ font-style: italic;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Mont;
+ src: url('@/assets/fonts/Mont-Regular.woff2') format('woff2');
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Mont;
+ src: url('@/assets/fonts/Mont-RegularItalic.woff2') format('woff2');
+ font-weight: 400;
+ font-style: italic;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Mont;
+ src: url('@/assets/fonts/Mont-SemiBold.woff2') format('woff2');
+ font-weight: 600;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Mont;
+ src: url('@/assets/fonts/Mont-SemiBoldItalic.woff2') format('woff2');
+ font-weight: 600;
+ font-style: italic;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Mont;
+ src: url('@/assets/fonts/Mont-Bold.woff2') format('woff2');
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Mont;
+ src: url('@/assets/fonts/Mont-BoldItalic.woff2') format('woff2');
+ font-weight: 700;
+ font-style: italic;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Mont;
+ src: url('@/assets/fonts/Mont-Heavy.woff2') format('woff2');
+ font-weight: 800;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Mont;
+ src: url('@/assets/fonts/Mont-HeavyItalic.woff2') format('woff2');
+ font-weight: 800;
+ font-style: italic;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Mont;
+ src: url('@/assets/fonts/Mont-Black.woff2') format('woff2');
+ font-weight: 900;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Mont;
+ src: url('@/assets/fonts/Mont-BlackItalic.woff2') format('woff2');
+ font-weight: 900;
+ font-style: italic;
+ font-display: swap;
+}
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
new file mode 100644
index 00000000000..1904a203109
--- /dev/null
+++ b/src/styles/_mixins.scss
@@ -0,0 +1,122 @@
+@use 'variables' as *;
+
+/// Applies styles from the given breakpoint and up (mobile-first).
+/// Example: @include media-up($breakpoint-tablet) { ... }
+@mixin media-up($breakpoint) {
+ @media (min-width: $breakpoint) {
+ @content;
+ }
+}
+
+/// Applies styles below the given breakpoint (exclusive).
+/// Uses -1px to avoid overlap with media-up at the same value.
+@mixin media-down($breakpoint) {
+ @media (max-width: ($breakpoint - 1px)) {
+ @content;
+ }
+}
+
+/// Applies styles within a range: from $from to $to (exclusive).
+/// Useful for targeting only a specific viewport segment.
+@mixin media-between($from, $to) {
+ @media (min-width: $from) and (max-width: ($to - 1px)) {
+ @content;
+ }
+}
+
+/// Main layout grid based on design specs:
+/// mobile: 4 columns, tablet: 12, desktop: 24 (fixed container).
+/// Use on parent layout wrappers/sections.
+@mixin layout-grid {
+ display: grid;
+ grid-template-columns: repeat($grid-columns-mobile, minmax(0, 1fr));
+ column-gap: $grid-gutter;
+ padding-inline: $grid-padding-mobile;
+
+ @include media-up($breakpoint-tablet) {
+ grid-template-columns: repeat($grid-columns-tablet, minmax(0, 1fr));
+ padding-inline: $grid-padding-tablet;
+ }
+
+ @include media-up($breakpoint-desktop) {
+ grid-template-columns: repeat($grid-columns-desktop, $grid-desktop-column-width);
+ width: $grid-desktop-container;
+ padding-inline: 0;
+ margin-inline: auto;
+ }
+}
+
+/// Controls how many columns an item spans per breakpoint.
+/// Use on children inside a layout-grid container.
+/// tablet/desktop fallback to the previous value if omitted.
+@mixin grid-span($mobile, $tablet: $mobile, $desktop: $tablet) {
+ grid-column: span $mobile;
+
+ @include media-up($breakpoint-tablet) {
+ grid-column: span $tablet;
+ }
+
+ @include media-up($breakpoint-desktop) {
+ grid-column: span $desktop;
+ }
+}
+
+/// Controls the starting grid column per breakpoint.
+/// Combine with grid-span for precise positioning.
+@mixin grid-start($mobile, $tablet: $mobile, $desktop: $tablet) {
+ grid-column-start: $mobile;
+
+ @include media-up($breakpoint-tablet) {
+ grid-column-start: $tablet;
+ }
+
+ @include media-up($breakpoint-desktop) {
+ grid-column-start: $desktop;
+ }
+}
+
+/// Quick flex centering on both axes.
+/// Great for icons, buttons, loaders, empty states.
+@mixin flex-center {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+/// Flex layout with space-between and vertical centering.
+/// Common for header rows, toolbars, card tops.
+@mixin flex-between {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+/// Content container similar to Bootstrap container:
+/// max-width + centered + responsive horizontal paddings.
+@mixin content-width {
+ max-width: $content-max-width;
+ padding: 0 $content-padding-mobile;
+ margin: 0 auto;
+
+ @include media-up($breakpoint-tablet) {
+ padding: 0 $content-padding-tablet;
+ }
+
+ @include media-up($breakpoint-desktop) {
+ padding: 0 $content-padding-desktop;
+ }
+}
+
+/// Visually hides an element while keeping it accessible
+/// for screen readers (a11y helper).
+@mixin visually-hidden {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ border: 0;
+ white-space: nowrap;
+ clip: rect(0, 0, 0, 0);
+}
diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss
new file mode 100644
index 00000000000..3fdf9961c9f
--- /dev/null
+++ b/src/styles/_reset.scss
@@ -0,0 +1,76 @@
+// https://piccalil.li/blog/a-modern-css-reset
+
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+ margin: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role='list'],
+ol[role='list'] {
+ list-style: none;
+}
+
+/* Set core root defaults */
+html:focus-within {
+ scroll-behavior: smooth;
+}
+
+/* Set core body defaults */
+body {
+ min-height: 100vh;
+ text-rendering: optimizeSpeed;
+ line-height: 1.5;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+ text-decoration-skip-ink: auto;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+ display: block;
+ max-width: 100%;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+ font: inherit;
+}
+
+/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+ html:focus-within {
+ scroll-behavior: auto;
+ }
+
+ *,
+ *::before,
+ *::after {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ scroll-behavior: auto !important;
+ }
+}
diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss
new file mode 100644
index 00000000000..9c5fb9ee2ac
--- /dev/null
+++ b/src/styles/_typography.scss
@@ -0,0 +1,103 @@
+@use 'variables' as *;
+
+body {
+ font-family: $font-family-base;
+ color: $color-primary;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ margin: 0;
+ font-family: $font-family-base;
+ color: $color-primary;
+}
+
+h1 {
+ font-size: 32px;
+ font-weight: 700;
+ line-height: 41px;
+ letter-spacing: -0.01em;
+
+ @media (min-width: $breakpoint-tablet) {
+ font-size: 48px;
+ line-height: 56px;
+ }
+}
+
+h2 {
+ font-size: 22px;
+ font-weight: 700;
+ line-height: 31px;
+ letter-spacing: 0;
+
+ @media (min-width: $breakpoint-tablet) {
+ font-size: 32px;
+ line-height: 41px;
+ letter-spacing: -0.01em;
+ }
+}
+
+h3 {
+ font-size: 20px;
+ font-weight: 600;
+ line-height: 26px;
+ letter-spacing: 0;
+
+ @media (min-width: $breakpoint-tablet) {
+ font-size: 22px;
+ font-weight: 700;
+ line-height: 31px;
+ }
+}
+
+h4 {
+ font-size: 16px;
+ font-weight: 600;
+ line-height: 20px;
+ letter-spacing: 0;
+
+ @media (min-width: $breakpoint-tablet) {
+ font-size: 20px;
+ line-height: 26px;
+ }
+}
+
+.body-text,
+p {
+ margin: 0;
+ font-family: $font-family-base;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 21px;
+ letter-spacing: 0;
+ color: $color-primary;
+}
+
+.button-text {
+ font-family: $font-family-base;
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 21px;
+ letter-spacing: 0;
+}
+
+.small-text {
+ font-family: $font-family-base;
+ font-size: 12px;
+ font-weight: 600;
+ line-height: 15px;
+ letter-spacing: 0;
+}
+
+.uppercase-text {
+ font-family: $font-family-base;
+ font-size: 12px;
+ font-weight: 700;
+ line-height: 11px;
+ letter-spacing: 0.04em;
+ text-transform: uppercase;
+}
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
new file mode 100644
index 00000000000..a88ce921fa2
--- /dev/null
+++ b/src/styles/_variables.scss
@@ -0,0 +1,55 @@
+// Colors
+$color-primary: #313237;
+$color-secondary: #89939a;
+$color-icons: #b4bdc3;
+$color-elements: #e2e6e9;
+$color-bg: #fafbfc;
+$color-white: #fff;
+$color-border: #e2e6e9;
+$color-hover: #dcdfe1;
+$color-error: #eb5757;
+$color-success: #27ae60;
+
+// Typography
+$font-family-base: 'Mont', 'Helvetica Neue', Arial, sans-serif;
+$font-size-base: 16px;
+$line-height-base: 1.5;
+
+// Breakpoints
+$breakpoint-mobile: 320px;
+$breakpoint-tablet: 640px;
+$breakpoint-desktop: 1200px;
+
+// Spacing
+$spacing-xs: 4px;
+$spacing-sm: 8px;
+$spacing-md: 16px;
+$spacing-lg: 24px;
+$spacing-xl: 32px;
+$spacing-2xl: 48px;
+$spacing-3xl: 64px;
+
+// Layout
+$content-max-width: 1200px;
+$content-padding-mobile: 16px;
+$content-padding-tablet: 24px;
+$content-padding-desktop: 32px;
+
+// Transitions
+$transition-base: 0.3s ease;
+
+// Grid
+$grid-gutter: 16px;
+$grid-columns-mobile: 4;
+$grid-columns-tablet: 12;
+$grid-columns-desktop: 24;
+$grid-padding-mobile: 16px;
+$grid-padding-tablet: 24px;
+$grid-desktop-container: 1200px;
+$grid-desktop-column-width: 32px;
+
+// Elements
+$header-height-mobile: 48px;
+$header-height-desktop: 64px;
+$logo-width-mobile: 64px;
+$logo-width-desktop: 80px;
diff --git a/src/styles/index.scss b/src/styles/index.scss
new file mode 100644
index 00000000000..036b6c72b63
--- /dev/null
+++ b/src/styles/index.scss
@@ -0,0 +1,3 @@
+@use 'fonts';
+@use 'reset';
+@use 'typography';
diff --git a/src/types/CartItem.ts b/src/types/CartItem.ts
new file mode 100644
index 00000000000..d189582dce0
--- /dev/null
+++ b/src/types/CartItem.ts
@@ -0,0 +1,6 @@
+import type { Product } from './Product';
+
+export type CartItem = {
+ product: Product;
+ quantity: number;
+};
diff --git a/src/types/Product.ts b/src/types/Product.ts
new file mode 100644
index 00000000000..8111167715a
--- /dev/null
+++ b/src/types/Product.ts
@@ -0,0 +1,14 @@
+export type Product = {
+ id: number;
+ category: string;
+ itemId: string;
+ name: string;
+ fullPrice: number;
+ price: number;
+ screen: string;
+ capacity: string;
+ color: string;
+ ram: string;
+ year: number;
+ image: string;
+};
diff --git a/src/types/ProductDetail.ts b/src/types/ProductDetail.ts
new file mode 100644
index 00000000000..10c381238ea
--- /dev/null
+++ b/src/types/ProductDetail.ts
@@ -0,0 +1,21 @@
+export type ProductDetail = {
+ id: string;
+ category: string;
+ namespaceId: string;
+ name: string;
+ capacityAvailable: string[];
+ capacity: string;
+ priceRegular: number;
+ priceDiscount: number;
+ colorsAvailable: string[];
+ color: string;
+ images: string[];
+ description: { title: string; text: string[] }[];
+ screen: string;
+ resolution: string;
+ processor: string;
+ ram: string;
+ camera: string;
+ zoom: string;
+ cell: string[];
+};
diff --git a/src/utils/storage.ts b/src/utils/storage.ts
new file mode 100644
index 00000000000..828525a29d1
--- /dev/null
+++ b/src/utils/storage.ts
@@ -0,0 +1,9 @@
+export function loadFromStorage