{desc.title}
+ {desc.text.map((paragraph, idx) => ( ++ {paragraph} +
+ ))} +
+
+
+
+ );
+};
diff --git a/src/components/ActionButtons/index.ts b/src/components/ActionButtons/index.ts
new file mode 100644
index 0000000000..64917b7b7d
--- /dev/null
+++ b/src/components/ActionButtons/index.ts
@@ -0,0 +1 @@
+export * from './ActionButtons';
diff --git a/src/components/Breadcrumbs/Breadcrumbs.module.scss b/src/components/Breadcrumbs/Breadcrumbs.module.scss
new file mode 100644
index 0000000000..c984036041
--- /dev/null
+++ b/src/components/Breadcrumbs/Breadcrumbs.module.scss
@@ -0,0 +1,35 @@
+@import '../../styles/main';
+
+.breadcrumbs {
+ grid-column: 1 / -1;
+ display: flex;
+ overflow: hidden;
+ gap: 8px;
+ height: 16px;
+}
+
+.chevronSpan {
+ display: block;
+}
+
+.chevronIcon {
+ transform: rotate(180deg);
+ opacity: 0.5;
+}
+
+.label {
+ display: flex;
+ text-align: center;
+ padding-top: 2px;
+ height: 15px;
+ text-decoration: none;
+
+ @extend %small-text;
+
+ color: var(--color-secondary);
+}
+
+
+.active {
+ color: var(--color-primary);
+}
diff --git a/src/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx
new file mode 100644
index 0000000000..2db76b6b60
--- /dev/null
+++ b/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import styles from './Breadcrumbs.module.scss';
+import { getChevronIconSrc, getHomeIconSrc } from '../../servises/iconSrc';
+import { useTheme } from '../../context/ThemeContext';
+import classNames from 'classnames';
+
+type BreadcrumbsProps = {
+ product?: {
+ category: string;
+ name: string;
+ };
+};
+
+export const Breadcrumbs: React.FC
+
+
+
+
+
+
+
+
+ classNames(styles.actionItem, { [styles.isActive]: isActive })
+ }
+ >
+
+
+ classNames(styles.actionItem, { [styles.isActive]: isActive })
+ }
+ >
+
+
+
+ 
+ {favorites.length > 0 && (
+
+
+ {favorites.length}
+ + )} +
+ 
+ {cart.length > 0 && (
+
+
+ + {cart.reduce((sum, item) => sum + item.quantity, 0)} +
+ + )} +
+
+
+
+
+ );
+};
diff --git a/src/components/Header/components/OverlayMenu/index.ts b/src/components/Header/components/OverlayMenu/index.ts
new file mode 100644
index 0000000000..7e36f742e8
--- /dev/null
+++ b/src/components/Header/components/OverlayMenu/index.ts
@@ -0,0 +1 @@
+export * from './OverlayMenu';
diff --git a/src/components/Header/components/ToggleTheme/ToggleTheme.module.scss b/src/components/Header/components/ToggleTheme/ToggleTheme.module.scss
new file mode 100644
index 0000000000..728922823e
--- /dev/null
+++ b/src/components/Header/components/ToggleTheme/ToggleTheme.module.scss
@@ -0,0 +1,33 @@
+@import '../../../../styles/main';
+
+.themeButton {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: -1px 0 0 0 var(--color-elements), 1px 0 0 0 var(--color-elements);
+
+ @extend %uppercase-text;
+
+ color: var(--color-secondary);
+
+ cursor: pointer;
+ background-color: transparent;
+ border: none;
+
+ padding: 0;
+
+ flex-shrink: 0;
+ flex-grow: 0;
+
+ width: $with-icons-tablet;
+ height: $height-on-tablet;
+
+ &:hover {
+ color: var(--color-primary);
+ }
+
+ @include on-desktop {
+ width: $with-icons-desktop;
+ height: $height-on-desktop;
+ }
+}
diff --git a/src/components/Header/components/ToggleTheme/ToggleTheme.tsx b/src/components/Header/components/ToggleTheme/ToggleTheme.tsx
new file mode 100644
index 0000000000..c18a366977
--- /dev/null
+++ b/src/components/Header/components/ToggleTheme/ToggleTheme.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { useTheme } from '../../../../context/ThemeContext';
+import styles from './ToggleTheme.module.scss';
+
+export const ToggleTheme: React.FC = () => {
+ const { theme, toggleTheme } = useTheme();
+
+ return (
+
+ );
+};
diff --git a/src/components/Header/components/ToggleTheme/index.tsx b/src/components/Header/components/ToggleTheme/index.tsx
new file mode 100644
index 0000000000..eae4e1cfdc
--- /dev/null
+++ b/src/components/Header/components/ToggleTheme/index.tsx
@@ -0,0 +1 @@
+export * from './ToggleTheme';
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
new file mode 100644
index 0000000000..5653319dec
--- /dev/null
+++ b/src/components/Header/index.tsx
@@ -0,0 +1 @@
+export { default as Header } from './Header';
diff --git a/src/components/Loader/Loader.module.scss b/src/components/Loader/Loader.module.scss
new file mode 100644
index 0000000000..9ae4116303
--- /dev/null
+++ b/src/components/Loader/Loader.module.scss
@@ -0,0 +1,24 @@
+.loader {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.loaderContent {
+ border-radius: 50%;
+ width: 5em;
+ height: 5em;
+ 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/components/Loader/Loader.tsx b/src/components/Loader/Loader.tsx
new file mode 100644
index 0000000000..3af23d162d
--- /dev/null
+++ b/src/components/Loader/Loader.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import styles from './Loader.module.scss';
+
+export const Loader: React.FC = () => (
+
+
+ classNames(styles.action, { [styles.isActive]: isActive })
+ }
+ >
+
+
+ classNames(styles.action, { [styles.isActive]: isActive })
+ }
+ >
+
+
+
+
+ {favorites.length > 0 && (
+
+
+ {favorites.length}
+ + )} +
+
+ {cart.length > 0 && (
+
+
+ + {cart.reduce((sum, item) => sum + item.quantity, 0)} +
+ + )} +
+
+
+);
diff --git a/src/components/Loader/index.tsx b/src/components/Loader/index.tsx
new file mode 100644
index 0000000000..d5ce981151
--- /dev/null
+++ b/src/components/Loader/index.tsx
@@ -0,0 +1 @@
+export * from './Loader';
diff --git a/src/components/Pagination/Pagination.module.scss b/src/components/Pagination/Pagination.module.scss
new file mode 100644
index 0000000000..07b74717b6
--- /dev/null
+++ b/src/components/Pagination/Pagination.module.scss
@@ -0,0 +1,51 @@
+@import '../../styles/main';
+
+.pagination {
+ grid-column: 1 / -1;
+ display: flex;
+ gap: 8px;
+ align-items: center;
+ justify-content: center;
+}
+
+.button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 32px;
+ height: 32px;
+ flex-shrink: 0;
+ background-color: var(--color-icons);
+ border: 1px solid var(--color-surface);
+ color: var(--color-primary);
+ cursor: pointer;
+
+ &:hover {
+ border: 1px solid var(--color-primary);
+ background-color: var(--color-hover);
+ }
+}
+
+.active {
+ cursor: pointer;
+ border: 1px solid var(--color-primary);
+ background-color: var(--color-primary);
+ color: var(--color-background);
+
+ &:hover {
+ background-color: var(--color-primary);
+ }
+}
+
+.disabled {
+ pointer-events: none;
+ opacity: 0.5;
+
+ &:hover {
+ background-color: transparent;
+ }
+}
+
+.next {
+ transform: rotate(180deg);
+}
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
new file mode 100644
index 0000000000..a8376f2602
--- /dev/null
+++ b/src/components/Pagination/Pagination.tsx
@@ -0,0 +1,99 @@
+import classNames from 'classnames';
+import styles from './Pagination.module.scss';
+import { getChevronIconSrc } from '../../servises/iconSrc';
+import { useTheme } from '../../context/ThemeContext';
+
+interface Props {
+ total: number;
+ perPage: number;
+ currentPage: number;
+ onPageChange: (page: number) => void;
+}
+
+export const Pagination: React.FC-
+
+ {visiblePages().map(page => (
+
+ ))}
+
+
+
+ 
+
+
+
+ );
+};
diff --git a/src/components/ProductCard/index.tsx b/src/components/ProductCard/index.tsx
new file mode 100644
index 0000000000..7ce031c382
--- /dev/null
+++ b/src/components/ProductCard/index.tsx
@@ -0,0 +1 @@
+export * from './ProductCard';
diff --git a/src/components/ProductsList/ProductsList.module.scss b/src/components/ProductsList/ProductsList.module.scss
new file mode 100644
index 0000000000..8d6655a160
--- /dev/null
+++ b/src/components/ProductsList/ProductsList.module.scss
@@ -0,0 +1,93 @@
+@import '../../styles/main';
+
+.ProductsPage {
+ @include section-grid;
+}
+
+.topContainer {
+ grid-column: 1 / -1;
+}
+
+.title {
+ margin-top: 40px;
+
+ @extend %h1-mobile;
+
+ @include on-tablet {
+ @include h1-tablet;
+ }
+}
+
+.count {
+ @extend %body-text;
+
+ color: var(--color-secondary);
+}
+
+.noResults {
+ grid-column: 1 / -1;
+
+ @extend %h3-tablet;
+
+ color: var(--color-secondary);
+}
+
+.filters {
+ margin-top: 16px;
+ grid-column: 1 / -1;
+
+ @include section-grid;
+
+ padding: 0;
+
+ @include on-tablet {
+ padding: 0;
+ }
+}
+
+.sortBy {
+ grid-column: span 2;
+
+ @include on-tablet {
+ grid-column: span 4;
+ }
+}
+
+.perPage {
+ grid-column: span 2;
+
+ @include on-tablet {
+ grid-column: span 3;
+ }
+}
+
+.container {
+ grid-column: 1 / -1;
+ margin-top: 20px;
+ margin-bottom: 40px;
+
+ @include section-grid;
+
+ padding: 0;
+
+ @include on-tablet {
+ padding: 0;
+ }
+}
+
+.product {
+ grid-column: span 4;
+
+ @include on-tablet {
+ grid-column: span 6;
+ }
+
+ @include middle-screen {
+ grid-column: span 4;
+ }
+
+ @include on-desktop {
+ grid-column: span 6;
+ }
+}
+
diff --git a/src/components/ProductsList/ProductsList.tsx b/src/components/ProductsList/ProductsList.tsx
new file mode 100644
index 0000000000..ec267cb6a7
--- /dev/null
+++ b/src/components/ProductsList/ProductsList.tsx
@@ -0,0 +1,168 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { getProductsByCategory } from '../../servises/Products';
+import { Product } from '../../types/Product';
+import { Breadcrumbs } from '../Breadcrumbs';
+import styles from './ProductsList.module.scss';
+import { ProductCard } from '../ProductCard';
+import { Loader } from '../Loader';
+import { Pagination } from '../Pagination';
+import { useSearchParams } from 'react-router-dom';
+import { FilterType, ItemsPerPage } from '../../types/Filter';
+import { sortProducts } from '../../utils/sortProducts';
+import { Dropdown } from '../Dropdown/Dropdown';
+
+type ProductsListProps = {
+ category: string;
+ title: string;
+};
+
+export const ProductsList: React.FC
+
+ {name}
+
+
+
+
+
+
+
+ ${fullPrice}
+ ${price}
+
+
+
+
+
+ Screen
+{screen}
+
+
+
+ Capacity
+{capacity}
+
+
+ RAM
+{ram}
+
+
+ );
+};
diff --git a/src/components/ProductsList/index.ts b/src/components/ProductsList/index.ts
new file mode 100644
index 0000000000..09f9887f27
--- /dev/null
+++ b/src/components/ProductsList/index.ts
@@ -0,0 +1 @@
+export * from './ProductsList';
diff --git a/src/components/ProductsSlider/ProductsSlider.module.scss b/src/components/ProductsSlider/ProductsSlider.module.scss
new file mode 100644
index 0000000000..845175ccfc
--- /dev/null
+++ b/src/components/ProductsSlider/ProductsSlider.module.scss
@@ -0,0 +1,84 @@
+@import '../../styles/main';
+
+.productsSlider {
+ @include section-grid;
+
+ padding-right: 0;
+
+ @include on-tablet {
+ padding-right: 0;
+ }
+}
+
+.topWrapper {
+ grid-column: 1 / -1;
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 24px;
+ padding-right: 16px;
+
+ @include on-tablet {
+ padding-right: 16px;
+ }
+}
+
+.title {
+ @extend %h2-tablet;
+}
+
+.buttons {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 16px;
+}
+
+.button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ width: 32px;
+ height: 32px;
+ background-color: var(--color-icons);
+ border: 1px solid var(--color-surface);
+ border-radius: 5%;
+
+ &:hover {
+ border: 1px solid var(--color-primary);
+ background-color: var(--color-hover);
+ }
+}
+
+.isDisabled {
+ cursor: default;
+ opacity: 0.5;
+
+ &:hover {
+ border: 1px solid var(--color-surface);
+ }
+}
+
+.iconNext {
+ transform: rotate(180deg);
+}
+
+.container {
+ grid-column: 1 / -1;
+ display: flex;
+ overflow: hidden;
+ gap: 16px;
+}
+
+.mainContainer {
+ grid-column: 1 / -1;
+ display: flex;
+ overflow: hidden;
+ gap: 16px;
+}
+
+.sliderWrapper {
+ transition: transform 0.5s ease;
+ will-change: transform;
+}
+
diff --git a/src/components/ProductsSlider/ProductsSlider.tsx b/src/components/ProductsSlider/ProductsSlider.tsx
new file mode 100644
index 0000000000..12771988d8
--- /dev/null
+++ b/src/components/ProductsSlider/ProductsSlider.tsx
@@ -0,0 +1,113 @@
+import React, { useEffect, useState } from 'react';
+import styles from './ProductsSlider.module.scss';
+import { Product } from '../../types/Product';
+import { ProductCard } from '../ProductCard';
+import { getChevronIconSrc } from '../../servises/iconSrc';
+import { useTheme } from '../../context/ThemeContext';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { useSwipeable } from 'react-swipeable';
+import classNames from 'classnames';
+
+type Props = {
+ products: Product[];
+ title: string;
+ isHomePage?: boolean;
+};
+
+export const ProductsSlider: React.FC
+
+
+ {filteredProducts.length === 0 ? (
+ {title}
++ {`${filteredProducts.length} item${products.length > 1 ? 's' : ''}`} +
++ There are no {category} matching your query. +
+ ) : ( + <> +
+
+
+
+ ({
+ value: key,
+ label: value,
+ }))}
+ />
+
+
+
+ ({
+ value,
+ label: value,
+ }))}
+ />
+
+
+ {selectedProducts.map(product => (
+
+
+ {perPage !== 'All' && (
+
+
+ ))}
+
+
+ );
+};
diff --git a/src/components/ProductsSlider/index.ts b/src/components/ProductsSlider/index.ts
new file mode 100644
index 0000000000..68d3ea0012
--- /dev/null
+++ b/src/components/ProductsSlider/index.ts
@@ -0,0 +1 @@
+export * from './ProductsSlider';
diff --git a/src/components/Search/Search.module.scss b/src/components/Search/Search.module.scss
new file mode 100644
index 0000000000..70be92e7f9
--- /dev/null
+++ b/src/components/Search/Search.module.scss
@@ -0,0 +1,53 @@
+@import './../../styles/main';
+
+.search {
+ display: flex;
+ align-items: center;
+ box-shadow: -1px 0 0 0 var(--color-elements), 1px 0 0 0 var(--color-elements);
+ cursor: pointer;
+ background-color: transparent;
+ border: none;
+ overflow: hidden;
+ height: $height-on-tablet;
+ transition: width 0.5s ease;
+
+ @include on-desktop {
+ height: $height-on-desktop;
+ min-width: 320px;
+ }
+
+ &:hover {
+ color: var(--color-primary);
+
+ cursor: text;
+ }
+}
+
+.searchInput {
+ padding: 0 10px;
+ width: 100%;
+ height: 100%;
+ align-items: center;
+ padding-inline: 14px;
+ border: none;
+ outline: none;
+
+ background-color: transparent;
+ color: var(--color-primary);
+
+ @extend %body-text;
+
+ @include on-desktop {
+ padding-inline: 16px;
+ }
+
+ &::placeholder {
+ color: var(--color-secondary);
+
+ @extend %body-text;
+ }
+}
+
+.hidden {
+ display: none;
+}
diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx
new file mode 100644
index 0000000000..41f6216051
--- /dev/null
+++ b/src/components/Search/Search.tsx
@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from 'react';
+import { useLocation, useSearchParams } from 'react-router-dom';
+import styles from './Search.module.scss';
+import classNames from 'classnames';
+import debounce from 'lodash.debounce';
+import { useTheme } from '../../context/ThemeContext';
+
+export const Search: React.FC = () => {
+ const { pathname } = useLocation();
+ const { theme } = useTheme();
+
+ const [searchParams, setSearchParams] = useSearchParams();
+ const [query, setQuery] = useState(searchParams.get('query') || '');
+
+ useEffect(() => {
+ setQuery('');
+ setSearchParams({});
+ }, [pathname, theme]);
+
+ const updateSearchQuery = (value: string) => {
+ const trimmedValue = value.trim();
+ const newQuery = new URLSearchParams(searchParams.toString());
+
+ if (trimmedValue) {
+ newQuery.set('query', trimmedValue);
+ } else {
+ newQuery.delete('query');
+ }
+
+ setSearchParams(newQuery);
+ };
+
+ const debouncedUpdateSearchQuery = debounce(updateSearchQuery, 500);
+
+ const handleSearchChange = (event: React.ChangeEvent
+
+
+ {title}
+
+
+
+
+
+
+ {products.map(product => (
+
+
+
+ ))}
+
+
+
+ );
+};
diff --git a/src/context/AppContext.tsx b/src/context/AppContext.tsx
new file mode 100644
index 0000000000..af49789a49
--- /dev/null
+++ b/src/context/AppContext.tsx
@@ -0,0 +1,121 @@
+import React, { createContext, useCallback, useContext } from 'react';
+import { Product } from '../types/Product';
+import { useLocalStorage } from '../hooks/useLocalStorage';
+import { CartItemProps } from '../types/CartItemProps';
+
+type Props = {
+ children: React.ReactNode;
+};
+
+type AppContextType = {
+ favorites: Product[];
+ addToFavorites: (product: Product) => void;
+ removeFromFavorites: (productId: string) => void;
+ cart: CartItemProps[];
+ addToCart: (product: Product) => void;
+ removeFromCart: (productId: string) => void;
+ updateCartQuantity: (productId: string, quantity: number) => void;
+ calculateTotalPrice: () => number;
+ clearCart: () => void;
+};
+
+const AppContext = createContext
+
+ );
+};
diff --git a/src/modules/CartPage/CartItem/index.tsx b/src/modules/CartPage/CartItem/index.tsx
new file mode 100644
index 0000000000..37a0553540
--- /dev/null
+++ b/src/modules/CartPage/CartItem/index.tsx
@@ -0,0 +1 @@
+export * from './CartItem';
diff --git a/src/modules/CartPage/CartPage.module.scss b/src/modules/CartPage/CartPage.module.scss
new file mode 100644
index 0000000000..64c5655a30
--- /dev/null
+++ b/src/modules/CartPage/CartPage.module.scss
@@ -0,0 +1,136 @@
+@import '../../styles/main';
+
+.cartPage {
+ @include section-grid;
+}
+
+.topContainer {
+ grid-column: 1 / -1;
+ display: flex;
+ width: 100%;
+ flex-direction: column;
+ justify-content: center;
+}
+
+.goBackButton {
+ display: flex;
+ align-items: center;
+ overflow: hidden;
+ gap: 8px;
+ height: 16px;
+ width: 66px;
+ border: 0;
+ cursor: pointer;
+ background-color: transparent;
+}
+
+.goBackText {
+ display: block;
+ padding-top: 2px;
+
+ @extend %small-text;
+
+ color: var(--color-secondary);
+}
+
+.title {
+ margin-top: 40px;
+
+ @extend %h1-mobile;
+
+ @include on-tablet {
+ @include h1-tablet;
+ }
+}
+
+.emptyContainer {
+ grid-column: 1 / -1;
+ display: flex;
+ flex-direction: column;
+ color: var(--color-secondary);
+
+ @extend %h3-tablet;
+}
+
+.container {
+ grid-column: 1 / -1;
+
+ @include section-grid;
+
+ padding: 0;
+ margin-top: 24px;
+
+ @include on-tablet {
+ padding: 0;
+ }
+}
+
+.cartItems {
+ grid-column: 1 / -1;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ margin-bottom: 30px;
+
+ @include on-desktop {
+ grid-column: span 16;
+ }
+}
+
+.bottomContainer {
+ grid-column: 1 / -1;
+ display: flex;
+ width: 100%;
+ flex-direction: column;
+ align-items: center;
+ gap: 16px;
+
+ @include on-desktop {
+ grid-column: span 8;
+ }
+}
+
+.checkout {
+ display: flex;
+ width: 100%;
+ flex-direction: column;
+ align-items: center;
+ gap: 16px;
+ padding: 24px;
+ border: 1px solid var(--color-elements);
+}
+
+.totalPrice {
+ @extend %h2-tablet;
+}
+
+.totalItems {
+ @extend %body-text;
+
+ color: var(--color-secondary);
+}
+
+.divider {
+ width: 100%;
+ height: 1px;
+ background-color: var(--color-elements);
+}
+
+.checkoutButton {
+ width: 100%;
+ height: 48px;
+ background-color: var(--color-button);
+ cursor: pointer;
+ text-align: center;
+
+ @extend %body-text;
+
+ color: var(--color-white);
+ transition: transform $transition-duration ease;
+
+ &:hover {
+ transform: scale(1.05);
+ box-shadow: 0 3px 13px 0 #17203166;
+ background-color: var(--color-button-hover);
+ }
+}
diff --git a/src/modules/CartPage/CartPage.tsx b/src/modules/CartPage/CartPage.tsx
new file mode 100644
index 0000000000..0c7e799a2a
--- /dev/null
+++ b/src/modules/CartPage/CartPage.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import styles from './CartPage.module.scss';
+import { useAppContext } from '../../context/AppContext';
+import { useNavigate } from 'react-router-dom';
+import { getChevronIconSrc } from '../../servises/iconSrc';
+import { useTheme } from '../../context/ThemeContext';
+import { CartItem } from './CartItem';
+
+const CartPage: React.FC = () => {
+ const { cart, calculateTotalPrice, clearCart } = useAppContext();
+ const totalItems = cart.reduce(
+ (total, cartItem) => total + cartItem.quantity,
+ 0,
+ );
+
+ const { theme } = useTheme();
+ const navigate = useNavigate();
+ const chevronIconSrc = getChevronIconSrc(theme);
+
+ const handleCheckout = () => {
+ const confirmClear = window.confirm(
+ 'Checkout is not implemented yet. Do you want to clear the Cart?',
+ );
+
+ if (confirmClear) {
+ clearCart();
+ }
+ };
+
+ return (
+
+
+
+
+
+
+ {name}
+
+
+
+
+
+
+
+
+ {quantity}
+${price}
+
+
+ );
+};
+
+export default CartPage;
diff --git a/src/modules/CartPage/index.ts b/src/modules/CartPage/index.ts
new file mode 100644
index 0000000000..cba584bad9
--- /dev/null
+++ b/src/modules/CartPage/index.ts
@@ -0,0 +1 @@
+export { default as CartPage } from './CartPage';
diff --git a/src/modules/FavoritesPage/FavoritesPage.module.scss b/src/modules/FavoritesPage/FavoritesPage.module.scss
new file mode 100644
index 0000000000..bf0a0acb0d
--- /dev/null
+++ b/src/modules/FavoritesPage/FavoritesPage.module.scss
@@ -0,0 +1,54 @@
+@import '../../styles/main';
+
+.favoritesPage {
+ @include section-grid;
+}
+
+.topContainer {
+ grid-column: 1 / -1;
+ display: flex;
+ width: 100%;
+ flex-direction: column;
+ justify-content: center;
+}
+
+.title {
+ margin-top: 40px;
+
+ @extend %h1-mobile;
+
+ @include on-tablet {
+ @include h1-tablet;
+ }
+}
+
+.count {
+ @extend %body-text;
+
+ color: var(--color-secondary);
+}
+
+.container {
+ grid-column: 1 / -1;
+ margin-top: 40px;
+
+ @include section-grid;
+
+ padding: 0;
+}
+
+.product {
+ grid-column: span 4;
+
+ @include on-tablet {
+ grid-column: span 6;
+ }
+
+ @include middle-screen {
+ grid-column: span 4;
+ }
+
+ @include on-desktop {
+ grid-column: span 6;
+ }
+}
diff --git a/src/modules/FavoritesPage/FavoritesPage.tsx b/src/modules/FavoritesPage/FavoritesPage.tsx
new file mode 100644
index 0000000000..a38cdc5838
--- /dev/null
+++ b/src/modules/FavoritesPage/FavoritesPage.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import styles from './FavoritesPage.module.scss';
+import { useAppContext } from '../../context/AppContext';
+import { ProductCard } from '../../components/ProductCard';
+import { Breadcrumbs } from '../../components/Breadcrumbs';
+
+const FavoritesPage: React.FC = () => {
+ const { favorites } = useAppContext();
+
+ return (
+
+
+ {cart.length === 0 ? (
+
+
+
+ Cart
+
+
+ ) : (
+ Your cart is empty.
+
+
+ )}
+
+ {cart.map(cartItem => (
+
+
+
+
+
+ ${calculateTotalPrice()}
+{`Total for ${totalItems} item${totalItems > 1 ? 's' : ''}`}
+ + +
+
+ );
+};
+
+export default FavoritesPage;
diff --git a/src/modules/FavoritesPage/index.ts b/src/modules/FavoritesPage/index.ts
new file mode 100644
index 0000000000..cfb19c003a
--- /dev/null
+++ b/src/modules/FavoritesPage/index.ts
@@ -0,0 +1 @@
+export { default as FavoritesPage } from './FavoritesPage';
diff --git a/src/modules/HomePage/HomePage.module.scss b/src/modules/HomePage/HomePage.module.scss
new file mode 100644
index 0000000000..f1051c2766
--- /dev/null
+++ b/src/modules/HomePage/HomePage.module.scss
@@ -0,0 +1,20 @@
+@import '../../styles/main';
+
+.homePage {
+ display: flex;
+ flex-direction: column;
+ gap: 80px;
+}
+
+.visuallyHidden{
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ margin: -1px;
+ border: 0;
+ padding: 0;
+ white-space: nowrap;
+ clip-path: inset(100%);
+ clip: rect(0 0 0 0);
+ overflow: hidden;
+}
diff --git a/src/modules/HomePage/HomePage.tsx b/src/modules/HomePage/HomePage.tsx
new file mode 100644
index 0000000000..6c042c085f
--- /dev/null
+++ b/src/modules/HomePage/HomePage.tsx
@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from 'react';
+import styles from './HomePage.module.scss';
+import { PicturesSlider } from './components/PicturesSlider';
+import { Categories } from './components/Categories';
+import { getHotPriceProducts, getNewProducts } from '../../servises/Products';
+import { Product } from '../../types/Product';
+import { Loader } from '../../components/Loader';
+import { ProductsSlider } from '../../components/ProductsSlider';
+
+const HomePage: React.FC = () => {
+ const [newProducts, setNewProducts] = useState
+
+ Favorites
++ {`${favorites.length} item${favorites.length > 1 ? 's' : ''}`} +
+
+ {favorites.map(product => (
+
+
+
+ ))}
+
+
+ );
+};
+
+export default HomePage;
diff --git a/src/modules/HomePage/components/Categories/Categories.module.scss b/src/modules/HomePage/components/Categories/Categories.module.scss
new file mode 100644
index 0000000000..24d8196b5a
--- /dev/null
+++ b/src/modules/HomePage/components/Categories/Categories.module.scss
@@ -0,0 +1,61 @@
+@import '../../../../styles/main';
+
+.categories {
+ @include section-grid;
+}
+
+.title {
+ grid-column: 1 / -1;
+
+ @extend %h2-mobile;
+
+ @include on-tablet {
+ font-family: Mont, sans-serif;
+ font-size: 32px;
+ line-height: 41px;
+ letter-spacing: 0.01em;
+ font-weight: bold;
+ color: var(--color-primary);
+ }
+}
+
+.category {
+ grid-column: 1 / -1;
+
+
+ @include on-tablet {
+ grid-column: span 4;
+ align-self: start;
+ }
+
+ @include on-desktop {
+ grid-column: span 8;
+ }
+}
+
+.link {
+ display: block;
+ text-decoration: none;
+ transition: transform $transition-duration ease;
+}
+
+.image {
+ object-fit: cover;
+ width: 100%;
+ margin-bottom: 10px;
+
+ &:hover {
+ transform: scale(1.05);
+ }
+}
+
+.category__title {
+ @extend %h4-tablet;
+}
+
+.category__subtitle {
+ @extend %body-text;
+
+ color: var(--color-secondary);
+}
+
diff --git a/src/modules/HomePage/components/Categories/Categories.tsx b/src/modules/HomePage/components/Categories/Categories.tsx
new file mode 100644
index 0000000000..8dcdf30019
--- /dev/null
+++ b/src/modules/HomePage/components/Categories/Categories.tsx
@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from 'react';
+import styles from './Categories.module.scss';
+import { Link } from 'react-router-dom';
+import { ShopByCategoryMap } from '../Helpers/ShopByCategoryMap';
+import { getProductsByCategory } from '../../../../servises/Products';
+import { BASE_URL } from '../../../../utils/const';
+
+export const Categories: React.FC = () => {
+ const [phonesCount, setPhonesCount] = useState(0);
+ const [tabletsCount, setTabletsCount] = useState(0);
+ const [accessoriesCount, setAccessoriesCount] = useState(0);
+
+ useEffect(() => {
+ const fetchProductCounts = async () => {
+ const categories = ['phones', 'tablets', 'accessories'];
+
+ const productCounts = await Promise.all(
+ categories.map(category => getProductsByCategory(category)),
+ );
+
+ setPhonesCount(productCounts[0].length);
+ setTabletsCount(productCounts[1].length);
+ setAccessoriesCount(productCounts[2].length);
+ };
+
+ fetchProductCounts();
+ }, []);
+
+ return (
+ Product Catalog
+ {isLoading ? ( +
+
+
+
+ );
+};
diff --git a/src/modules/HomePage/components/Categories/index.tsx b/src/modules/HomePage/components/Categories/index.tsx
new file mode 100644
index 0000000000..79c7c7dcde
--- /dev/null
+++ b/src/modules/HomePage/components/Categories/index.tsx
@@ -0,0 +1 @@
+export * from './Categories';
diff --git a/src/modules/HomePage/components/Helpers/PicturesSliderMap.ts b/src/modules/HomePage/components/Helpers/PicturesSliderMap.ts
new file mode 100644
index 0000000000..c2d2e41846
--- /dev/null
+++ b/src/modules/HomePage/components/Helpers/PicturesSliderMap.ts
@@ -0,0 +1,17 @@
+export const PicturesSliderMap = [
+ {
+ id: 1,
+ src: './img/banner-phones.png',
+ title: 'phones',
+ },
+ {
+ id: 2,
+ src: './img/banner-tablets.png',
+ title: 'tablets',
+ },
+ {
+ id: 3,
+ src: './img/banner-accessories.png',
+ title: 'accessories',
+ },
+];
diff --git a/src/modules/HomePage/components/Helpers/ShopByCategoryMap.ts b/src/modules/HomePage/components/Helpers/ShopByCategoryMap.ts
new file mode 100644
index 0000000000..14d9428e00
--- /dev/null
+++ b/src/modules/HomePage/components/Helpers/ShopByCategoryMap.ts
@@ -0,0 +1,20 @@
+export const ShopByCategoryMap = [
+ {
+ id: 1,
+ src: './img/category-phones.png',
+ title: 'Mobile phones',
+ path: '/phones',
+ },
+ {
+ id: 2,
+ src: './img/category-tablets.png',
+ title: 'Tablets',
+ path: '/tablets',
+ },
+ {
+ id: 3,
+ src: './img/category-accessories.png',
+ title: 'Accessories',
+ path: '/accessories',
+ },
+];
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 0000000000..4c0cc30042
--- /dev/null
+++ b/src/modules/HomePage/components/PicturesSlider/PicturesSlider.module.scss
@@ -0,0 +1,114 @@
+@import '../../../../styles/main';
+
+.slider {
+ @include section-grid;
+
+ padding-inline: 0;
+}
+
+.container {
+ grid-column: 1 / -1;
+ display: flex;
+ overflow: hidden;
+ width: 100%;
+ height: 320px;
+
+
+ @include on-tablet {
+ grid-column: 2 / -2;
+ height: 360px;
+ }
+
+ @include middle-screen {
+ height: 410px;
+ }
+
+ @include on-desktop {
+ height: 432px;
+ }
+}
+
+.link {
+ display: flex;
+ align-items: center;
+ min-width: 100%;
+ height: 100%;
+ cursor: pointer;
+}
+
+.image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+
+ flex-shrink: 0;
+
+ transition: transform $transition-duration ease;
+}
+
+.button {
+ display: none;
+ width: 32px;
+ height: 100%;
+ background-color: var(--color-icons);
+ border: 1px solid var(--color-surface);
+ border-radius: 4px;
+ cursor: pointer;
+
+ @include on-tablet {
+ display: block;
+ grid-column: span 1;
+ }
+
+ &:hover {
+ border: 1px solid var(--color-primary);
+ background-color: var(--color-hover);
+ }
+}
+
+.next {
+ @include on-tablet {
+ justify-self: end;
+ }
+}
+
+.iconNext {
+ transform : rotate(180deg);
+}
+
+
+.dashes {
+ grid-column: 1 / -1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 4px;
+ height: 24px;
+
+ @include on-tablet {
+ grid-column: 6 / 8;
+ }
+
+ @include on-desktop {
+ grid-column: 12 / 14;
+ }
+}
+
+.dashContainer {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 24px;
+ height: 24px;
+ cursor: pointer;
+}
+
+.dash {
+ height: 4px;
+ width: 14px;
+ background-color: var(--color-surface);
+
+ &.active {
+ background-color: var(--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 0000000000..ff22c24707
--- /dev/null
+++ b/src/modules/HomePage/components/PicturesSlider/PicturesSlider.tsx
@@ -0,0 +1,98 @@
+import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import styles from './PicturesSlider.module.scss';
+import { PicturesSliderMap } from '../Helpers/PicturesSliderMap';
+import { useTheme } from '../../../../context/ThemeContext';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { useSwipeable } from 'react-swipeable';
+import { getChevronIconSrc } from '../../../../servises/iconSrc';
+import { Link } from 'react-router-dom';
+import { BASE_URL } from '../../../../utils/const';
+
+export const PicturesSlider: React.FC = () => {
+ const [currentIndex, setCurrentIndex] = useState(0);
+ const { theme } = useTheme();
+
+ const chevronIconSrc = getChevronIconSrc(theme);
+
+ useEffect(() => {
+ const intervalId = setInterval(() => {
+ setCurrentIndex(prevIndex => (prevIndex + 1) % PicturesSliderMap.length);
+ }, 5000);
+
+ return () => clearInterval(intervalId);
+ }, []);
+
+ const handlePrevClick = () => {
+ setCurrentIndex(prevIndex =>
+ prevIndex === 0 ? PicturesSliderMap.length - 1 : prevIndex - 1,
+ );
+ };
+
+ const handleNextClick = () => {
+ setCurrentIndex(prevIndex =>
+ prevIndex === PicturesSliderMap.length - 1 ? 0 : prevIndex + 1,
+ );
+ };
+
+ const handlers = useSwipeable({
+ onSwipedLeft: () => handleNextClick(),
+ onSwipedRight: () => handlePrevClick(),
+ });
+
+ return (
+ Shop by category
+ + {ShopByCategoryMap.map(({ id, src, title, path }) => ( +
+
+ 
+
+
+ ))}
+ {title}
+ + + + {(title === 'Mobile phones' && `${phonesCount} models`) || + (title === 'Tablets' && `${tabletsCount} models`) || + (title === 'Accessories' && `${accessoriesCount} models`)} + + + +
+
+
+ );
+};
diff --git a/src/modules/HomePage/components/PicturesSlider/index.tsx b/src/modules/HomePage/components/PicturesSlider/index.tsx
new file mode 100644
index 0000000000..81a373f3aa
--- /dev/null
+++ b/src/modules/HomePage/components/PicturesSlider/index.tsx
@@ -0,0 +1 @@
+export * from './PicturesSlider';
diff --git a/src/modules/HomePage/index.ts b/src/modules/HomePage/index.ts
new file mode 100644
index 0000000000..6ba9fc8ac9
--- /dev/null
+++ b/src/modules/HomePage/index.ts
@@ -0,0 +1 @@
+export { default as HomePage } from './HomePage';
diff --git a/src/modules/NotFoundPage/NotFoundPage.module.scss b/src/modules/NotFoundPage/NotFoundPage.module.scss
new file mode 100644
index 0000000000..8ec3e111a4
--- /dev/null
+++ b/src/modules/NotFoundPage/NotFoundPage.module.scss
@@ -0,0 +1,11 @@
+@import '../../styles/main';
+
+.notFoundPage {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ @extend %h2-mobile;
+}
+
+
diff --git a/src/modules/NotFoundPage/NotFoundPage.tsx b/src/modules/NotFoundPage/NotFoundPage.tsx
new file mode 100644
index 0000000000..1bf958df67
--- /dev/null
+++ b/src/modules/NotFoundPage/NotFoundPage.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import styles from './NotFoundPage.module.scss';
+
+export const NotFoundPage: React.FC = () => {
+ return (
+
+ {PicturesSliderMap.map(({ id, src, title }) => (
+
+
+
+ ))}
+
+
+
+
+ {PicturesSliderMap.map(({ id }, index) => (
+ setCurrentIndex(index)}
+ className={styles.dashContainer}
+ onKeyDown={() => setCurrentIndex(index)}
+ aria-label={`Slide ${index + 1}`}
+ >
+
+
+ ))}
+
+
+
+ );
+};
diff --git a/src/modules/NotFoundPage/index.ts b/src/modules/NotFoundPage/index.ts
new file mode 100644
index 0000000000..6197aa75aa
--- /dev/null
+++ b/src/modules/NotFoundPage/index.ts
@@ -0,0 +1 @@
+export * from './NotFoundPage';
diff --git a/src/modules/PhonesPage/PhonesPage.module.scss b/src/modules/PhonesPage/PhonesPage.module.scss
new file mode 100644
index 0000000000..19b4146bf7
--- /dev/null
+++ b/src/modules/PhonesPage/PhonesPage.module.scss
@@ -0,0 +1 @@
+@import '../../styles/main';
diff --git a/src/modules/PhonesPage/PhonesPage.tsx b/src/modules/PhonesPage/PhonesPage.tsx
new file mode 100644
index 0000000000..0af2f5c0a3
--- /dev/null
+++ b/src/modules/PhonesPage/PhonesPage.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { ProductsList } from '../../components/ProductsList';
+
+export const PhonesPage: React.FC = () => {
+ const location = useLocation();
+
+ const category = location.pathname.split('/')[1];
+
+ return Oops, page not found
+No product found or failed to load product details.
;
+ }
+
+ return (
+
+
+ );
+};
+
+export default ProductDetailsPage;
diff --git a/src/modules/ProductDetailsPage/components/Description/Description.module.scss b/src/modules/ProductDetailsPage/components/Description/Description.module.scss
new file mode 100644
index 0000000000..db5e9ad540
--- /dev/null
+++ b/src/modules/ProductDetailsPage/components/Description/Description.module.scss
@@ -0,0 +1,60 @@
+@import '../../../../styles/main';
+
+
+.section {
+ grid-column: 1 / -1;
+
+ @include on-desktop {
+ grid-column: 1 / 13;
+ }
+}
+
+.descriptionSection {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+.sectionTitle {
+ @extend %h3-mobile;
+
+ color: var(--color-primary);
+
+ @include on-tablet {
+ font-family: Mont, sans-serif;
+ font-size: 22px;
+ line-height: 31.8px;
+ letter-spacing: 0;
+ font-weight: 800;
+ color: var(--color-primary);
+ }
+}
+
+.divider {
+ width: 100%;
+ height: 1px;
+ background-color: var(--color-elements);
+}
+
+.descriptionTitle {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ @extend %h4-mobile;
+
+ @include on-tablet {
+ font-family: Mont, sans-serif;
+ font-size: 20px;
+ line-height: 26px;
+ font-weight: 600;
+ letter-spacing: 0;
+ color: var(--color-primary);
+ }
+}
+
+.descriptionText {
+ @extend %body-text;
+
+ color: var(--color-secondary);
+}
diff --git a/src/modules/ProductDetailsPage/components/Description/Description.tsx b/src/modules/ProductDetailsPage/components/Description/Description.tsx
new file mode 100644
index 0000000000..80e2e2bc5b
--- /dev/null
+++ b/src/modules/ProductDetailsPage/components/Description/Description.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import styles from './Description.module.scss';
+import classNames from 'classnames';
+
+type DescriptionProps = {
+ description: {
+ map(
+ arg0: (
+ desc: { title: string; text: string[] },
+ index: number,
+ ) => import('react/jsx-runtime').JSX.Element,
+ ): React.ReactNode;
+ };
+};
+
+export const Description: React.FC
+
+
+ {productDetails.name}
+About
+ + + {description.map( + (desc: { title: string; text: string[] }, index: number) => ( +
+
+ );
+};
diff --git a/src/modules/ProductDetailsPage/components/ImageGallery/index.ts b/src/modules/ProductDetailsPage/components/ImageGallery/index.ts
new file mode 100644
index 0000000000..9d76db4f79
--- /dev/null
+++ b/src/modules/ProductDetailsPage/components/ImageGallery/index.ts
@@ -0,0 +1 @@
+export * from './ImageGallery';
diff --git a/src/modules/ProductDetailsPage/components/MainControls/MainControls.module.scss b/src/modules/ProductDetailsPage/components/MainControls/MainControls.module.scss
new file mode 100644
index 0000000000..0b42683edf
--- /dev/null
+++ b/src/modules/ProductDetailsPage/components/MainControls/MainControls.module.scss
@@ -0,0 +1,121 @@
+@import '../../../../styles/main';
+
+.mainControls {
+ grid-column: 1 / -1;
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+
+ @include on-tablet {
+ grid-column: 8 / -1;
+ }
+
+ @include on-desktop {
+ grid-column: 14 / -5;
+
+ }
+}
+
+.divider {
+ width: 100%;
+ height: 1px;
+ background-color: var(--color-elements);
+}
+
+.selector {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+ @extend %small-text;
+
+ color: var(--color-secondary);
+}
+
+.buttons {
+ display: flex;
+ gap: 8px;
+}
+
+.colorButtonContainer {
+ width: 32px;
+ height: 32px;
+ border: 2px solid var(--color-surface);
+ border-radius: 50%;
+ padding: 2px;
+}
+
+.colorButton {
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ border: 0;
+ padding: 4px;
+ cursor: pointer;
+
+}
+
+.activeColorsAvailable {
+ border: 2px solid var(--color-primary);
+}
+
+.capacityButton {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding-top: 3px;
+ padding-inline: 4px;
+ height: 32px;
+ border: 1px solid var(--color-surface);
+ background-color: transparent;
+ color: var(--color-primary);
+ cursor: pointer;
+
+ @extend %body-text;
+
+}
+
+.active {
+ border: 1px solid var(--color-primary);
+ background-color: var(--color-primary);
+ color: var(--color-background);
+}
+
+.price {
+ display: flex;
+ gap: 8px;
+
+ @extend %h3-tablet;
+}
+
+.existPrice {
+ color: var(--color-primary);
+}
+
+.hotPrice {
+ display: flex;
+ color: var(--color-secondary);
+}
+
+.specsList {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.specs {
+ display: flex;
+ justify-content: space-between;
+}
+
+.specsKey {
+ @extend %body-text;
+
+ color: var(--color-secondary);
+}
+
+.specsValue {
+ @extend %body-text;
+
+ color: var(--color-primary);
+}
diff --git a/src/modules/ProductDetailsPage/components/MainControls/MainControls.tsx b/src/modules/ProductDetailsPage/components/MainControls/MainControls.tsx
new file mode 100644
index 0000000000..ed5b1913ea
--- /dev/null
+++ b/src/modules/ProductDetailsPage/components/MainControls/MainControls.tsx
@@ -0,0 +1,109 @@
+import React from 'react';
+import classNames from 'classnames';
+import styles from './MainControls.module.scss';
+import { ProductDetails } from '../../../../types/ProductDetails';
+import { ActionButtons } from '../../../../components/ActionButtons';
+import { Product } from '../../../../types/Product';
+// eslint-disable-next-line max-len
+import { fetchProductByColorAndCapacity } from '../../../../servises/ProductsDetails';
+import { useNavigate } from 'react-router-dom';
+
+type Props = {
+ productDetails: ProductDetails;
+ setProductDetails: (productDetails: ProductDetails) => void;
+ product: Product;
+};
+
+export const MainControls: React.FC
+ {images.map(image => (
+ setSelectedImage(image)}
+ />
+ ))}
+
+
+
+ {images.map((image, index) => (
+
+ ))}
+
+
+ {images.map(image => (
+ setSelectedImage(image)}
+ />
+ ))}
+
+
+
+ );
+};
diff --git a/src/modules/ProductDetailsPage/components/MainControls/index.ts b/src/modules/ProductDetailsPage/components/MainControls/index.ts
new file mode 100644
index 0000000000..0444e1d193
--- /dev/null
+++ b/src/modules/ProductDetailsPage/components/MainControls/index.ts
@@ -0,0 +1 @@
+export * from './MainControls';
diff --git a/src/modules/ProductDetailsPage/components/TechSpecs/TechSpecs.module.scss b/src/modules/ProductDetailsPage/components/TechSpecs/TechSpecs.module.scss
new file mode 100644
index 0000000000..4e56cd8c2f
--- /dev/null
+++ b/src/modules/ProductDetailsPage/components/TechSpecs/TechSpecs.module.scss
@@ -0,0 +1,59 @@
+@import '../../../../styles/main';
+
+.section {
+ grid-column: 1 / -1;
+
+ @include on-desktop {
+ grid-column: 14 / -1;
+ }
+}
+
+.techSpecsSection {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+.sectionTitle {
+ @extend %h3-mobile;
+
+ color: var(--color-primary);
+
+ @include on-tablet {
+ font-family: Mont, sans-serif;
+ font-size: 22px;
+ line-height: 31.8px;
+ letter-spacing: 0;
+ font-weight: 800;
+ color: var(--color-primary);
+ }
+}
+
+.divider {
+ width: 100%;
+ height: 1px;
+ background-color: var(--color-elements);
+}
+
+.specsList {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.specs {
+ display: flex;
+ justify-content: space-between;
+}
+
+.specsKey {
+ @extend %body-text;
+
+ color: var(--color-secondary);
+}
+
+.specsValue {
+ @extend %body-text;
+
+ color: var(--color-primary);
+}
diff --git a/src/modules/ProductDetailsPage/components/TechSpecs/TechSpecs.tsx b/src/modules/ProductDetailsPage/components/TechSpecs/TechSpecs.tsx
new file mode 100644
index 0000000000..d55ae622bd
--- /dev/null
+++ b/src/modules/ProductDetailsPage/components/TechSpecs/TechSpecs.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import styles from './TechSpecs.module.scss';
+import { ProductDetails } from '../../../../types/ProductDetails';
+import classNames from 'classnames';
+
+type TechSpecsProps = {
+ productDetails: ProductDetails;
+};
+
+export const TechSpecs: React.FC
+
+
+
+
+ Available colors
+ +
+ {productDetails.colorsAvailable.map(color => (
+
+
+
+ ))}
+
+
+
+
+
+ Select Capacity
+ +
+ {productDetails.capacityAvailable.map(capacity => (
+
+ ))}
+
+
+
+
+ {product && ${productDetails.priceRegular}
+ ${productDetails.priceDiscount}
+ -
+
- + Screen + {productDetails.screen} + + +
- + Resolution + {productDetails.resolution} + + +
- + Processor + {productDetails.processor} + +
Tech specs
+ + +-
+
- + Screen + {productDetails.screen} + + +
- + Resolution + {productDetails.resolution} + + +
- + Processor + {productDetails.processor} + + +
- + Ram + {productDetails.ram} + + +
- + Built in memory + {productDetails.capacity} + + + {productDetails.camera && ( +
- + Camera + {productDetails.camera} + + )} + + {productDetails.zoom && ( +
- + Zoom + {productDetails.zoom} + + )} + +
- + Cell + + {productDetails.cell.join(', ')} + + +