+
+
+ {`$${fullPrice}`}
+{price}
+
+
+
+
+ Screen
+{screen}
+
+
+ Capacity
+{capacity}
+
+
+ RAM
+{ram}
+
+
+
+
+
+
+ );
+};
+
+export const App = () => {
+ const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+ const openMenu = () => {
+ setIsMenuOpen(true);
+ document.body.style.overflow = 'hidden';
+ };
+
+ const closeMenu = () => {
+ setIsMenuOpen(false);
+ document.body.style.overflow = '';
+ };
+
+ return (
+ Product Catalog
+
+
+
+
+
+
+
+
+
+
+
+ );
+ })}
+
+ );
+};
diff --git a/src/components/AboutProduct/index.js b/src/components/AboutProduct/index.js
new file mode 100644
index 0000000000..046edc0496
--- /dev/null
+++ b/src/components/AboutProduct/index.js
@@ -0,0 +1 @@
+export * from './AboutProduct';
diff --git a/src/components/AddToFavourites/AddToFavourites.module.scss b/src/components/AddToFavourites/AddToFavourites.module.scss
new file mode 100644
index 0000000000..aa92152060
--- /dev/null
+++ b/src/components/AddToFavourites/AddToFavourites.module.scss
@@ -0,0 +1,26 @@
+@import '../../utils/variables';
+
+.addToFavourites {
+ background-image: url(../../img/icons/heart.png);
+ background-size: 16px 16px;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-color: var(--color-button);
+ border: 1px solid var(--color-button-border);
+ border-radius: 48px;
+
+ &--dark {
+ background-image: url(../../img/icons/night_theme_heart.png);
+ }
+
+ &--added {
+ background-image: url(../../img/icons/heart_yellow.png);
+ background-color: var(--color-button-disabled);
+ border: 1px solid var(--color-button-border-disabled);
+ }
+
+ &:hover {
+ background-color: var(--color-button-hover);
+ border: 1px solid var(--color-button-border-hover);
+ }
+}
diff --git a/src/components/AddToFavourites/AddToFavourites.tsx b/src/components/AddToFavourites/AddToFavourites.tsx
new file mode 100644
index 0000000000..b87f975495
--- /dev/null
+++ b/src/components/AddToFavourites/AddToFavourites.tsx
@@ -0,0 +1,47 @@
+import React, { useContext } from 'react';
+import styles from './AddToFavourites.module.scss';
+import classNames from 'classnames';
+import { Products } from '../../utils/types';
+import { FavoritesContext } from '../../context/FavoritesContext';
+import { useTheme } from '../../context/ThemeContext';
+
+type Props = {
+ size: 's' | 'm';
+ product: Products;
+};
+export const AddToFavourites: React.FC
+ About
+
+ {product.description.map((desc: ProductDescription, index) => {
+ return (
+
+ {desc.title}
+
+ {desc.text}
+
+
+ 
+
+
+ {category}
+
+
+ );
+};
diff --git a/src/components/Breadcrumbs/index.js b/src/components/Breadcrumbs/index.js
new file mode 100644
index 0000000000..ce977548b1
--- /dev/null
+++ b/src/components/Breadcrumbs/index.js
@@ -0,0 +1 @@
+export * from './Breadcrumbs';
diff --git a/src/components/CartIsEmpty/CartIsEmpty.module.scss b/src/components/CartIsEmpty/CartIsEmpty.module.scss
new file mode 100644
index 0000000000..29eee9db52
--- /dev/null
+++ b/src/components/CartIsEmpty/CartIsEmpty.module.scss
@@ -0,0 +1,20 @@
+@import '../../utils/mixins';
+
+.cartIsEmpty {
+ &__container {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 20px;
+ }
+ &__image {
+ width: 100px;
+ height: 100px;
+
+ @include on-tablet {
+ width: 200px;
+ height: 200px;
+ }
+ }
+}
diff --git a/src/components/CartIsEmpty/CartIsEmpty.tsx b/src/components/CartIsEmpty/CartIsEmpty.tsx
new file mode 100644
index 0000000000..e60028af11
--- /dev/null
+++ b/src/components/CartIsEmpty/CartIsEmpty.tsx
@@ -0,0 +1,18 @@
+import { BASE_URL } from '../../utils/constants';
+import { Title } from '../Title';
+import styles from './CartIsEmpty.module.scss';
+
+export const CartIsEmpty = () => {
+ return (
+ {name}
+
+
+ );
+};
diff --git a/src/components/CartIsEmpty/index.js b/src/components/CartIsEmpty/index.js
new file mode 100644
index 0000000000..4955d89fda
--- /dev/null
+++ b/src/components/CartIsEmpty/index.js
@@ -0,0 +1 @@
+export * from './CartIsEmpty';
diff --git a/src/components/CartProduct/CartProduct.module.scss b/src/components/CartProduct/CartProduct.module.scss
new file mode 100644
index 0000000000..ecc3b2d9b2
--- /dev/null
+++ b/src/components/CartProduct/CartProduct.module.scss
@@ -0,0 +1,92 @@
+@import '../../utils/mixins';
+@import '../../utils/variables';
+
+.cartProduct {
+ width: 100%;
+ height: 160px;
+ padding: 16px;
+ border: 1px solid var(--color-grey-third);
+ background-color: var(--color-card-background);
+ border-radius: 16px;
+
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ &:hover {
+ box-shadow: 0 2px 16px 0 #0000001a;
+ }
+
+ @include on-tablet {
+ padding: 24px;
+ flex-direction: row;
+ justify-content: space-between;
+ gap: 24px;
+ }
+
+ &__top {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ @include on-tablet {
+ gap: 24px;
+ }
+ }
+
+ &__bottom {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ @include on-tablet {
+ gap: 50px;
+ }
+ }
+
+ &__buttons {
+ display: flex;
+ gap: 14px;
+ align-items: center;
+ }
+
+ &__buttonClose {
+ background-color: var(--color-card-background);
+ border: none;
+ }
+
+ &__deleteIcon {
+ width: 16px;
+ height: 16px;
+ background-image: url(../../img/icons/close-grey.png);
+ background-repeat: no-repeat;
+ background-position: center;
+ }
+
+ &__image {
+ width: 80px;
+ height: 80px;
+ object-fit: contain;
+ }
+
+ &__name {
+ color: var(--color-black);
+ width: 128px;
+
+ @include body-text;
+
+ @include on-tablet {
+ width: 136px;
+ }
+
+ @include on-desktop {
+ width: 100%;
+ }
+ }
+
+ &__quantity {
+ color: var(--color-black);
+
+ @include body-text;
+ }
+}
diff --git a/src/components/CartProduct/CartProduct.tsx b/src/components/CartProduct/CartProduct.tsx
new file mode 100644
index 0000000000..cec379863e
--- /dev/null
+++ b/src/components/CartProduct/CartProduct.tsx
@@ -0,0 +1,90 @@
+import React, { useContext } from 'react';
+import styles from './CartProduct.module.scss';
+import { CartItem } from '../../utils/types';
+import { QuantityButton } from '../QuantityButton';
+import { Title } from '../Title';
+import { CartContext } from '../../context/CartContext';
+import { BASE_URL } from '../../utils/constants';
+
+type Props = {
+ cartProduct: CartItem;
+};
+export const CartProduct: React.FC
+ Your cart is empty
+ 
+
+
+
+
+ );
+};
diff --git a/src/components/CartProduct/index.js b/src/components/CartProduct/index.js
new file mode 100644
index 0000000000..2e149fe78e
--- /dev/null
+++ b/src/components/CartProduct/index.js
@@ -0,0 +1 @@
+export * from './CartProduct';
diff --git a/src/components/CheckoutButton/CheckoutButton.module.scss b/src/components/CheckoutButton/CheckoutButton.module.scss
new file mode 100644
index 0000000000..5a688a6083
--- /dev/null
+++ b/src/components/CheckoutButton/CheckoutButton.module.scss
@@ -0,0 +1,18 @@
+@import '../../utils/mixins';
+@import '../../utils/variables';
+
+.checkoutButton {
+ width: 100%;
+ height: 48px;
+ background-color: var(--color-accent);
+ border: 1px solid var(--color-accent-button-border);
+ border: none;
+ border-radius: 48px;
+
+ @include buttons-text;
+
+ &:hover {
+ background-color: var(--color-accent-button-hover);
+ box-shadow: 0 3px 13px 0 #17203166;
+ }
+}
diff --git a/src/components/CheckoutButton/CheckoutButton.tsx b/src/components/CheckoutButton/CheckoutButton.tsx
new file mode 100644
index 0000000000..ad6fe2cd62
--- /dev/null
+++ b/src/components/CheckoutButton/CheckoutButton.tsx
@@ -0,0 +1,49 @@
+import { useContext } from 'react';
+import styles from './CheckoutButton.module.scss';
+import { useState } from 'react';
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+import { CartContext } from '../../context/CartContext';
+import './modal.scss';
+
+export const CheckoutButton = () => {
+ const { setCart } = useContext(CartContext);
+ const [show, setShow] = useState(false);
+
+ const handleClose = () => setShow(false);
+ const handleShow = () => setShow(true);
+ const handleClear = () => {
+ setCart([]);
+ handleClose();
+ };
+
+ return (
+ <>
+
+
+
+
+
+ 
+
+ {product.name}
+
+
+
+ {
+ handleQantityDecrease(cartProduct.id);
+ }}
+ />
+ {
+ handleQantityIncrease(cartProduct.id);
+ }}
+ />
+
+ {cartProduct.quantity}
+
+ {`$${product.price}`}
+
+
+
+
+ Checkout is not implemented yet. Do you want to clear the Cart?
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/CheckoutButton/index.js b/src/components/CheckoutButton/index.js
new file mode 100644
index 0000000000..1e42f0b9ae
--- /dev/null
+++ b/src/components/CheckoutButton/index.js
@@ -0,0 +1 @@
+export * from './CheckoutButton';
diff --git a/src/components/CheckoutButton/modal.scss b/src/components/CheckoutButton/modal.scss
new file mode 100644
index 0000000000..940e2b6aef
--- /dev/null
+++ b/src/components/CheckoutButton/modal.scss
@@ -0,0 +1,28 @@
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins';
+@import 'bootstrap/scss/transitions';
+@import 'bootstrap/scss/bootstrap-utilities';
+@import 'bootstrap/scss/modal';
+@import 'bootstrap/scss/buttons';
+@import '../../utils/variables';
+
+.custom-modal {
+ .modal-content {
+ font-size: 18px;
+ }
+ .modal-footer {
+ .btn {
+ border-radius: 48px;
+ }
+ .btn-secondary {
+ background-color: var(--color-grey);
+ }
+ .btn-primary {
+ width: 84px;
+ height: 38px;
+ border: none;
+ background-color: var(--color-accent);
+ }
+ }
+}
diff --git a/src/components/DarkThemeButton/DarkThemeButton.module.scss b/src/components/DarkThemeButton/DarkThemeButton.module.scss
new file mode 100644
index 0000000000..2f08ced706
--- /dev/null
+++ b/src/components/DarkThemeButton/DarkThemeButton.module.scss
@@ -0,0 +1,31 @@
+@import '../../utils/mixins';
+@import '../../utils/variables';
+
+.darkThemeButton {
+ width: 48px;
+ height: 48px;
+ box-shadow: -1px 0 0 0 var(--color-grey-third);
+ border-bottom: 1px solid var(--color-grey-third);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ @include on-desktop {
+ width: 64px;
+ height: 64px;
+ }
+
+ &__btn {
+ width: 20px;
+ height: 20px;
+ outline: none;
+ border: none;
+
+ background-color: transparent;
+ background-image: url(../../img/icons/night_theme_btn.png);
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
+ }
+}
diff --git a/src/components/DarkThemeButton/DarkThemeButton.tsx b/src/components/DarkThemeButton/DarkThemeButton.tsx
new file mode 100644
index 0000000000..a401bb641c
--- /dev/null
+++ b/src/components/DarkThemeButton/DarkThemeButton.tsx
@@ -0,0 +1,15 @@
+import { useTheme } from '../../context/ThemeContext';
+import styles from './DarkThemeButton.module.scss';
+
+export const DarkThemeButton = () => {
+ const { isDarkTheme, toggleTheme } = useTheme();
+
+ return (
+
+
+ );
+};
diff --git a/src/components/DarkThemeButton/index.js b/src/components/DarkThemeButton/index.js
new file mode 100644
index 0000000000..80839bb086
--- /dev/null
+++ b/src/components/DarkThemeButton/index.js
@@ -0,0 +1 @@
+export * from './DarkThemeButton';
diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss
new file mode 100644
index 0000000000..15321b34f3
--- /dev/null
+++ b/src/components/Footer/Footer.module.scss
@@ -0,0 +1,67 @@
+@import '../../utils/mixins';
+@import '../../utils/variables';
+
+.footer {
+ height: $footer-height-mobile;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ padding: 32px 16px;
+ border-top: 1px solid var(--color-grey-third);
+ background-color: var(--color-header-footer);
+
+ @include on-tablet {
+ height: $footer-height-tablet;
+ padding: 32px;
+ flex-direction: row;
+ align-items: center;
+ }
+
+ &__logo {
+ display: block;
+ width: 89px;
+ height: 32px;
+ }
+
+ &__contacts {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ @include on-tablet {
+ flex-direction: row;
+ gap: 14px;
+ }
+
+ @include on-desktop {
+ gap: 106px;
+ }
+ }
+
+ &__contact {
+ display: block;
+ color: var(--color-footer-links);
+ text-decoration: none;
+ text-transform: uppercase;
+ font-weight: 800;
+ line-height: 11px;
+ letter-spacing: 4%;
+
+ &:hover {
+ color: var(--color-grey);
+ }
+ }
+
+ &__back {
+ align-self: center;
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ }
+
+ &__back-title {
+ color: var(--color-grey);
+
+ @include small-text;
+ }
+}
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
new file mode 100644
index 0000000000..e755386d1d
--- /dev/null
+++ b/src/components/Footer/Footer.tsx
@@ -0,0 +1,52 @@
+import { Link } from 'react-router-dom';
+import logo from '../../img/logo.png';
+import logoDarkTheme from '../../img/night_theme_logo.png';
+import styles from './Footer.module.scss';
+import { ArrowButton } from '../ArrowButton';
+import { ArrowType } from '../../utils/types';
+import { useTheme } from '../../context/ThemeContext';
+
+export const Footer = () => {
+ const { isDarkTheme } = useTheme();
+
+ return (
+
+ );
+};
diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js
new file mode 100644
index 0000000000..ddcc5a9cd1
--- /dev/null
+++ b/src/components/Footer/index.js
@@ -0,0 +1 @@
+export * from './Footer';
diff --git a/src/components/GoBack/GoBack.module.scss b/src/components/GoBack/GoBack.module.scss
new file mode 100644
index 0000000000..d0ab7c8778
--- /dev/null
+++ b/src/components/GoBack/GoBack.module.scss
@@ -0,0 +1,15 @@
+@import '../../utils/mixins';
+@import '../../utils/variables';
+
+.goBack {
+ @include small-text;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: var(--color-grey);
+
+ &:hover {
+ color: var(--color-black);
+ }
+}
diff --git a/src/components/GoBack/GoBack.tsx b/src/components/GoBack/GoBack.tsx
new file mode 100644
index 0000000000..0af209567b
--- /dev/null
+++ b/src/components/GoBack/GoBack.tsx
@@ -0,0 +1,25 @@
+import { useNavigate } from 'react-router-dom';
+import styles from './GoBack.module.scss';
+import React from 'react';
+import { useTheme } from '../../context/ThemeContext';
+
+type Props = {
+ children: React.ReactNode;
+};
+export const GoBack: React.FC+ {isDarkTheme ? 'OFF' : 'ON'} +
+ + navigate(-1)}
+ style={{
+ cursor: 'pointer',
+ color: isDarkTheme ? '#F1F2F9' : '#89939A',
+ }}
+ >
+ {children}
+
+ );
+};
diff --git a/src/components/GoBack/index.js b/src/components/GoBack/index.js
new file mode 100644
index 0000000000..7a534e1e6b
--- /dev/null
+++ b/src/components/GoBack/index.js
@@ -0,0 +1 @@
+export * from './GoBack';
diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss
new file mode 100644
index 0000000000..4cac5124ef
--- /dev/null
+++ b/src/components/Header/Header.module.scss
@@ -0,0 +1,109 @@
+@import '../../utils/mixins';
+@import '../../utils/variables';
+
+.header {
+ height: $header-height-mobile;
+ display: none;
+ background-color: var(--color-header-footer);
+ border-bottom: 1px solid var(--color-grey-third);
+
+ @include on-tablet {
+ display: flex;
+ justify-content: space-between;
+ }
+
+ @include on-desktop {
+ height: $header-height-desktop;
+ }
+
+ &--mobile {
+ display: flex;
+ justify-content: space-between;
+
+ @include on-tablet {
+ display: none;
+ }
+ }
+
+ &__menuButton {
+ display: block;
+ width: 48px;
+ height: 48px;
+ background-size: 16px 16px;
+ background-repeat: no-repeat;
+ background-position: center;
+ box-shadow: -1px 0 0 0 var(--color-grey-third);
+ border: none;
+ border-bottom: 1px solid var(--color-grey-third);
+ background-color: #fff;
+ background-image: url(../../img/icons/menu.png);
+
+ &--dark {
+ background-color: #0f1121;
+ background-image: url(../../img/icons/menu-white.png);
+ }
+
+ @include on-desktop {
+ width: 64px;
+ height: 64px;
+ }
+ }
+
+ &__left {
+ display: flex;
+ gap: 16px;
+
+ @include on-tablet {
+ gap: 24px;
+ }
+ }
+
+ &__right {
+ display: flex;
+ }
+
+ &__logo {
+ display: flex;
+ margin: 13px 16px;
+ width: 64px;
+ height: 22px;
+
+ @include on-desktop {
+ margin: 18px 24px;
+ width: 80px;
+ height: 28px;
+ }
+ }
+
+ &__nav {
+ height: 100%;
+ display: flex;
+ align-items: center;
+
+ &_list {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ list-style: none;
+ gap: 32px;
+ }
+
+ &_link {
+ @include nav-link-styles;
+
+ display: flex;
+ align-items: center;
+ height: 100%;
+
+ &:hover {
+ color: var(--color-black);
+ }
+ }
+
+ &_item {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ }
+ }
+}
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
new file mode 100644
index 0000000000..eefbbde5ae
--- /dev/null
+++ b/src/components/Header/Header.tsx
@@ -0,0 +1,130 @@
+import { NavLink, Link } from 'react-router-dom';
+import { IconType } from '../../utils/types';
+import { HeaderIcon } from '../HeaderIcon';
+
+import logo from '../../img/logo.png';
+import logoDarkTheme from '../../img/night_theme_logo.png';
+import styles from './Header.module.scss';
+import React, { useContext } from 'react';
+import { CartContext } from '../../context/CartContext';
+import { FavoritesContext } from '../../context/FavoritesContext';
+import { useTheme } from '../../context/ThemeContext';
+import { DarkThemeButton } from '../DarkThemeButton';
+import classNames from 'classnames';
+import { BASE_URL } from '../../utils/constants';
+
+type Props = {
+ onMenuClick: () => void;
+ closeMenu: () => void;
+};
+
+export const Header: React.FC
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/HeaderIcon/index.js b/src/components/HeaderIcon/index.js
new file mode 100644
index 0000000000..3aac0d9d1f
--- /dev/null
+++ b/src/components/HeaderIcon/index.js
@@ -0,0 +1 @@
+export * from './HeaderIcon';
diff --git a/src/components/Loader/Loader.module.scss b/src/components/Loader/Loader.module.scss
new file mode 100644
index 0000000000..36624981d2
--- /dev/null
+++ b/src/components/Loader/Loader.module.scss
@@ -0,0 +1,25 @@
+.loader {
+ display: flex;
+ width: 100%;
+ justify-content: center;
+ align-items: center;
+
+ &__content {
+ border-radius: 50%;
+ width: 2em;
+ height: 2em;
+ margin: 1em auto;
+ border: 0.3em solid #ddd;
+ border-left-color: #000;
+ animation: load8 1.2s infinite linear;
+ }
+}
+
+@keyframes load8 {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
diff --git a/src/components/Loader/Loader.tsx b/src/components/Loader/Loader.tsx
new file mode 100644
index 0000000000..887221a135
--- /dev/null
+++ b/src/components/Loader/Loader.tsx
@@ -0,0 +1,7 @@
+import styles from './Loader.module.scss';
+
+export const Loader = () => (
+
+
+ )}
+
+
+
+);
diff --git a/src/components/Loader/index.js b/src/components/Loader/index.js
new file mode 100644
index 0000000000..d5ce981151
--- /dev/null
+++ b/src/components/Loader/index.js
@@ -0,0 +1 @@
+export * from './Loader';
diff --git a/src/components/Menu/Menu.module.scss b/src/components/Menu/Menu.module.scss
new file mode 100644
index 0000000000..1507f96ded
--- /dev/null
+++ b/src/components/Menu/Menu.module.scss
@@ -0,0 +1,84 @@
+@import '../../utils/variables';
+@import '../../utils/mixins';
+
+.menu {
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ background-color: var(--color-page-background);
+
+ @include on-tablet {
+ display: none;
+ }
+
+ &__closeButton {
+ display: block;
+ width: 48px;
+ height: 48px;
+ background-size: 16px 16px;
+ background-repeat: no-repeat;
+ background-position: center;
+ box-shadow: -1px 0 0 0 var(--color-grey-third);
+ border: none;
+ background-color: var(--color-page-background);
+ background-image: url(../../img/icons/close.png);
+
+ &--dark {
+ background-image: url(../../img/icons/close-white.png);
+ }
+
+ @include on-desktop {
+ width: 64px;
+ height: 64px;
+ }
+ }
+
+ &__top-bar {
+ display: flex;
+ margin-bottom: 24px;
+ justify-content: space-between;
+ box-shadow: 0 1px 0 0 var(--color-grey-third);
+ background-color: var(--color-page-background);
+ }
+
+ &__bottom {
+ display: flex;
+ border: 1px solid var(--color-grey-second);
+ }
+
+ &__logo {
+ display: flex;
+ margin: 13px 16px;
+ width: 64px;
+ height: 22px;
+ }
+
+ &__nav_list {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 16px;
+ list-style: none;
+ }
+
+ &__nav_link {
+ @include nav-link-styles;
+
+ height: 100%;
+ display: flex;
+ align-items: center;
+
+ &:hover {
+ color: var(--color-black);
+ }
+ }
+
+ &__nav_item {
+ height: 27px;
+
+ &:hover {
+ border-bottom: 2px solid var(--color-black);
+ }
+ }
+}
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
new file mode 100644
index 0000000000..e74bea0cf4
--- /dev/null
+++ b/src/components/Menu/Menu.tsx
@@ -0,0 +1,95 @@
+import React, { useContext } from 'react';
+import { IconType } from '../../utils/types';
+import { HeaderIcon } from '../HeaderIcon';
+import styles from './Menu.module.scss';
+import { Link } from 'react-router-dom';
+import { CartContext } from '../../context/CartContext';
+import { FavoritesContext } from '../../context/FavoritesContext';
+import { useTheme } from '../../context/ThemeContext';
+import logo from '../../img/logo.png';
+import logoDarkTheme from '../../img/night_theme_logo.png';
+import { BASE_URL } from '../../utils/constants';
+
+type Props = {
+ closeMenu: () => void;
+};
+
+export const Menu: React.FC
+
+ );
+};
diff --git a/src/components/Pagination/index.js b/src/components/Pagination/index.js
new file mode 100644
index 0000000000..e016c96b72
--- /dev/null
+++ b/src/components/Pagination/index.js
@@ -0,0 +1 @@
+export * from './Pagination';
diff --git a/src/components/ProductCard/ProductCard.module.scss b/src/components/ProductCard/ProductCard.module.scss
new file mode 100644
index 0000000000..d284030b46
--- /dev/null
+++ b/src/components/ProductCard/ProductCard.module.scss
@@ -0,0 +1,113 @@
+@import '../../utils/variables';
+@import '../../utils/mixins';
+
+.productCard {
+ height: 440px;
+ padding: 32px;
+ display: flex;
+ gap: 8px;
+ flex-direction: column;
+ background-color: var(--color-card-background);
+ border: 1px solid var(--color-card-border);
+ border-radius: 8px;
+
+ &:hover {
+ cursor: pointer;
+ box-shadow: 0 2px 16px 0 #0000001a;
+ }
+
+ @include on-tablet {
+ height: 506px;
+ }
+
+ &__imagewrapper {
+ display: flex;
+ width: 100%;
+ min-height: 109px;
+
+ @include on-tablet {
+ min-height: 181px;
+ }
+
+ @include on-desktop {
+ height: 196px;
+ }
+ }
+
+ &__image {
+ display: block;
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ transition: transform 0.3s ease-in-out;
+
+ &:hover {
+ transform: scale(1.1);
+ }
+ }
+
+ &__title {
+ @include body-text;
+
+ padding-top: 16px;
+ text-decoration: none;
+ color: var(--color-black);
+ }
+
+ &__prices {
+ display: flex;
+ gap: 8px;
+ }
+
+ &__fullprice {
+ font-size: 22px;
+ font-weight: 800;
+ line-height: 30px;
+ color: var(--color-black);
+ }
+
+ &__price {
+ font-size: 22px;
+ font-weight: 600;
+ line-height: 29px;
+ color: var(--color-grey);
+ text-decoration: line-through;
+ text-decoration-color: var(--color-grey);
+ position: relative;
+ }
+
+ &__line {
+ height: 1px;
+ width: 100%;
+ border-bottom: 1px solid var(--color-grey-second);
+ }
+
+ &__features-wrapper {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ padding-block: 8px;
+ }
+
+ &__features {
+ display: flex;
+ justify-content: space-between;
+ }
+
+ &__feature {
+ @include small-text;
+
+ color: var(--color-grey);
+ }
+
+ &__feature-value {
+ font-weight: 700;
+ line-height: 15.34px;
+ color: var(--color-black);
+ }
+
+ &__buttons {
+ display: flex;
+ gap: 8px;
+ }
+}
diff --git a/src/components/ProductCard/ProductCard.tsx b/src/components/ProductCard/ProductCard.tsx
new file mode 100644
index 0000000000..dc591e4105
--- /dev/null
+++ b/src/components/ProductCard/ProductCard.tsx
@@ -0,0 +1,60 @@
+import styles from './ProductCard.module.scss';
+import React from 'react';
+import { Products } from '../../utils/types';
+import { ToBuyButton } from '../ToBuyButton';
+import { AddToFavourites } from '../AddToFavourites';
+import { Link } from 'react-router-dom';
+import { BASE_URL } from '../../utils/constants';
+
+type Props = {
+ product: Products;
+ width?: number;
+};
+
+export const ProductCard: React.FC
+
+
+
+
+ {
+ pagesAmount <= 5 ? (
+ pagesAmountArray.map((pageNumber: number) => (
+
+ ))
+ ) : (
+ /* eslint-disable @typescript-eslint/indent */
+ <>
+ {slicedArray[slicedArray.length - 1] === pagesAmount ||
+ slicedArray[slicedArray.length - 1] + 1 === pagesAmount ? (
+ pagesAmountArray.slice(-5).map((pageNumber: number) => (
+
+ ))
+ ) : (
+ <>
+ {slicedArray.map((pageNumber: number) => (
+
+ ))}
+
+
+
+
+
+ )}
+
+ )
+ /* eslint-enable @typescript-eslint/indent */
+ }
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/ProductSlider/index.js b/src/components/ProductSlider/index.js
new file mode 100644
index 0000000000..5349238270
--- /dev/null
+++ b/src/components/ProductSlider/index.js
@@ -0,0 +1 @@
+export * from './ProductSlider';
diff --git a/src/components/ProductsList/ProductsList.module.scss b/src/components/ProductsList/ProductsList.module.scss
new file mode 100644
index 0000000000..1b6af699f3
--- /dev/null
+++ b/src/components/ProductsList/ProductsList.module.scss
@@ -0,0 +1,33 @@
+@import '../../utils/mixins';
+
+.products {
+ &__list {
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+
+ @include on-tablet {
+ display: grid;
+ grid-template-columns: repeat(12, 1fr);
+ gap: 40px 16px;
+ }
+
+ @include on-desktop {
+ grid-template-columns: repeat(24, 1fr);
+ }
+ }
+
+ &__item {
+ @include on-tablet {
+ grid-column: span 6;
+ }
+
+ @include on-media-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..3e07f9183a
--- /dev/null
+++ b/src/components/ProductsList/ProductsList.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { ProductCard } from '../ProductCard';
+import { Products } from '../../utils/types';
+import styles from './ProductsList.module.scss';
+
+type Props = {
+ products: Products[];
+};
+export const ProductsList: React.FC
+ {title}
+
+
+ = displayedProducts.length - 1}
+ />
+
+
+
+
+ {displayedProducts?.map(displayedProduct => (
+
+
+ {products.map((product: Products) => {
+ return (
+
+ );
+};
diff --git a/src/components/ProductsList/index.js b/src/components/ProductsList/index.js
new file mode 100644
index 0000000000..09f9887f27
--- /dev/null
+++ b/src/components/ProductsList/index.js
@@ -0,0 +1 @@
+export * from './ProductsList';
diff --git a/src/components/QuantityButton/QuantityButton.module.scss b/src/components/QuantityButton/QuantityButton.module.scss
new file mode 100644
index 0000000000..85136946c1
--- /dev/null
+++ b/src/components/QuantityButton/QuantityButton.module.scss
@@ -0,0 +1,47 @@
+@import '../../utils/mixins';
+@import '../../utils/variables';
+
+.quantityButton {
+ display: block;
+ width: 32px;
+ height: 32px;
+
+ border: 1px solid var(--color-button-border);
+ background-color: var(--color-button);
+ border-radius: 48px;
+
+ background-size: 16px 16px;
+ background-repeat: no-repeat;
+ background-position: center;
+
+ &:hover {
+ border: 1px solid var(--color-button-border-hover);
+ background-color: var(--color-button-hover);
+ }
+
+ &--plus {
+ background-image: url(../../img/icons/plus.png);
+ }
+
+ &--plus-dark {
+ background-image: url(../../img/icons/plus-white.png);
+ }
+
+ &--minus {
+ background-image: url(../../img/icons/minus.png);
+ }
+
+ &--minus-dark {
+ background-image: url(../../img/icons/minus-white.png);
+ }
+
+ &--disabled {
+ background-image: url(../../img/icons/minus-grey.png);
+ background-color: var(--color-button-disabled);
+ border-color: var(--color-button-border-disabled);
+
+ &:hover {
+ background-color: var(--color-page-background);
+ }
+ }
+}
diff --git a/src/components/QuantityButton/QuantityButton.tsx b/src/components/QuantityButton/QuantityButton.tsx
new file mode 100644
index 0000000000..4f59763a18
--- /dev/null
+++ b/src/components/QuantityButton/QuantityButton.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import styles from './QuantityButton.module.scss';
+import classNames from 'classnames';
+import { useTheme } from '../../context/ThemeContext';
+
+type Props = {
+ type: 'plus' | 'minus';
+ disabled?: boolean;
+ onClick?: () => void;
+};
+
+export const QuantityButton: React.FC
+
+ );
+ })}
+ {number}
;
+};
diff --git a/src/components/QuantityIndicator/index.js b/src/components/QuantityIndicator/index.js
new file mode 100644
index 0000000000..e6dae3e3b9
--- /dev/null
+++ b/src/components/QuantityIndicator/index.js
@@ -0,0 +1 @@
+export * from './QuantityIndicator';
diff --git a/src/components/ShopByCategory/ShopByCategory.module.scss b/src/components/ShopByCategory/ShopByCategory.module.scss
new file mode 100644
index 0000000000..2e602041b1
--- /dev/null
+++ b/src/components/ShopByCategory/ShopByCategory.module.scss
@@ -0,0 +1,62 @@
+@import '../../utils/mixins';
+@import '../../utils/variables';
+
+.shopByCategory {
+ &__title {
+ margin-bottom: 24px;
+ }
+
+ &__categories {
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+
+ @include on-tablet {
+ display: grid;
+ grid-template-columns: repeat(12, 1fr);
+ gap: 16px;
+ }
+
+ @include on-desktop {
+ grid-template-columns: repeat(24, 32px);
+ }
+ }
+
+ &__category {
+ @include on-tablet {
+ grid-column: span 4;
+ }
+
+ @include on-desktop {
+ grid-column: span 8;
+ }
+ }
+
+ &__link {
+ display: block;
+ width: 100%;
+ aspect-ratio: 1 / 1;
+ }
+
+ &__image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ margin-bottom: 24px;
+ transition: transform 0.3s ease-in-out;
+
+ &:hover {
+ transform: scale(1.05);
+ }
+ }
+
+ &__category-title {
+ margin-bottom: 4px;
+ }
+
+ &__quantity {
+ color: var(--color-grey);
+
+ @include body-text;
+ }
+}
diff --git a/src/components/ShopByCategory/ShopByCategory.tsx b/src/components/ShopByCategory/ShopByCategory.tsx
new file mode 100644
index 0000000000..be61dec85b
--- /dev/null
+++ b/src/components/ShopByCategory/ShopByCategory.tsx
@@ -0,0 +1,83 @@
+import styles from './ShopByCategory.module.scss';
+import { Title } from '../Title';
+import { fetchProducts } from '../../utils/fetch';
+import { useEffect, useState } from 'react';
+import { Products } from '../../utils/types';
+import { Link } from 'react-router-dom';
+import { BASE_URL } from '../../utils/constants';
+
+export const ShopByCategory = () => {
+ const [phones, setPhones] = useState
+
+ );
+};
diff --git a/src/components/ShopByCategory/index.js b/src/components/ShopByCategory/index.js
new file mode 100644
index 0000000000..8081526324
--- /dev/null
+++ b/src/components/ShopByCategory/index.js
@@ -0,0 +1 @@
+export * from './ShopByCategory';
diff --git a/src/components/Slider/Slider.module.scss b/src/components/Slider/Slider.module.scss
new file mode 100644
index 0000000000..f364e515f5
--- /dev/null
+++ b/src/components/Slider/Slider.module.scss
@@ -0,0 +1,53 @@
+@import '../../utils/mixins';
+@import '../../utils/variables';
+
+.slider {
+ display: none;
+
+ @include on-tablet {
+ display: block;
+ }
+
+ &__images {
+ display: flex;
+ gap: 19px;
+ }
+
+ &__image {
+ display: block;
+ object-fit: cover;
+
+ width: 100%;
+ aspect-ratio: 1 / 1;
+ border: 1px solid var(--color-grey-second);
+
+ @include on-tablet {
+ border-radius: 8px;
+ width: 100%;
+ height: 189px;
+ }
+
+ @include on-desktop {
+ height: 400px;
+ }
+ }
+
+ &__buttons {
+ display: flex;
+ justify-content: center;
+ gap: 4px;
+ }
+
+ &__button {
+ display: block;
+ margin: 10px 5px;
+ width: 14px;
+ height: 4px;
+ border: none;
+ background-color: var(--color-grey-second);
+
+ &--active {
+ background-color: var(--color-black);
+ }
+ }
+}
diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx
new file mode 100644
index 0000000000..8d8338957a
--- /dev/null
+++ b/src/components/Slider/Slider.tsx
@@ -0,0 +1,74 @@
+import styles from './Slider.module.scss';
+
+import { useEffect, useState } from 'react';
+import image1 from '/img/banners/image1.png';
+import image2 from '/img/banners/image2.png';
+import image3 from '/img/banners/image3.png';
+import { ArrowButton } from '../ArrowButton';
+import { ArrowType } from '../../utils/types';
+import classNames from 'classnames';
+
+const IMAGES = [image1, image2, image3];
+
+export const Slider = () => {
+ const [imageIndex, setImageIndex] = useState(0);
+
+ // #region functions
+
+ const goToPreviousImage = () => {
+ setImageIndex(prevIndex =>
+ prevIndex > 0 ? prevIndex - 1 : IMAGES.length - 1,
+ );
+ };
+
+ const goToNextImage = () => {
+ setImageIndex(prevIndex =>
+ prevIndex < IMAGES.length - 1 ? prevIndex + 1 : 0,
+ );
+ };
+
+ useEffect(() => {
+ const intervalId = setInterval(goToNextImage, 5000);
+
+ return () => clearInterval(intervalId);
+ }, [imageIndex]);
+
+ // #endregion
+
+ return (
+ <>
+
+ Shop by category
+
+
+
+
+
+ 
+
+
+
+
+
+ Mobile phones
+
+ {`${phones.length} models`}
+
+
+ 
+
+
+
+
+
+ Tablets
+
+ {`${tablets.length} models`}
+
+
+ 
+
+
+
+
+
+ Accessories
+
+ {`${accessories.length} models`}
+
+
+
+ );
+};
diff --git a/src/components/Slider/index.js b/src/components/Slider/index.js
new file mode 100644
index 0000000000..f48a854158
--- /dev/null
+++ b/src/components/Slider/index.js
@@ -0,0 +1 @@
+export * from './Slider';
diff --git a/src/components/SortProducts/SortProducts.module.scss b/src/components/SortProducts/SortProducts.module.scss
new file mode 100644
index 0000000000..20c581f246
--- /dev/null
+++ b/src/components/SortProducts/SortProducts.module.scss
@@ -0,0 +1,15 @@
+@import '../../utils/mixins';
+@import '../../utils/variables';
+
+.selects {
+ margin-bottom: 24px;
+ display: flex;
+ gap: 16px;
+
+ &__label {
+ @include small-text;
+
+ color: var(--color-grey);
+ margin-bottom: 4px;
+ }
+}
diff --git a/src/components/SortProducts/SortProducts.tsx b/src/components/SortProducts/SortProducts.tsx
new file mode 100644
index 0000000000..9562c77c85
--- /dev/null
+++ b/src/components/SortProducts/SortProducts.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import { SortType } from '../../utils/types';
+import Dropdown from 'react-bootstrap/Dropdown';
+import styles from './SortProducts.module.scss';
+import './dropdown.scss';
+
+type Props = {
+ selectedSortType: string;
+ searchParams: URLSearchParams;
+ setSearchParams: (value: URLSearchParams) => void;
+ itemsOnPage: string;
+};
+export const SortProducts: React.FC
+ 
+
+
+ {IMAGES.map((_, index) => {
+ return (
+
+ );
+ })}
+
+
+
+ );
+};
diff --git a/src/components/SortProducts/dropdown.scss b/src/components/SortProducts/dropdown.scss
new file mode 100644
index 0000000000..ae1d29f0ed
--- /dev/null
+++ b/src/components/SortProducts/dropdown.scss
@@ -0,0 +1,77 @@
+@import '../../utils/mixins';
+@import '../../utils/variables';
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins';
+@import 'bootstrap/scss/dropdown';
+
+.dropdown-toggle {
+ display: flex !important;
+ align-items: center;
+ width: 136px;
+ height: 40px;
+ padding: 10px 12px !important;
+ font-family: inherit;
+ font-size: 14px !important;
+ line-height: 21px !important;
+ border: 1px solid var(--color-button-border) !important;
+ border-radius: 8px !important;
+ background-color: var(--color-dropdownfield-background) !important;
+ color: var(--color-black) !important;
+ position: relative;
+
+ &::after {
+ display: none;
+ }
+
+ &::before {
+ content: '';
+ background-image: url(../../img/icons/arrow_down_grey.png);
+ background-size: contain;
+ background-repeat: no-repeat;
+ width: 16px;
+ height: 16px;
+ position: absolute;
+ right: 12px;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+
+ &:hover {
+ border-color: var(--color-grey) !important;
+ }
+
+ &:focus {
+ border-color: var(--color-black) !important;
+ }
+
+ @include on-tablet {
+ width: 187px;
+ }
+
+ @include on-desktop {
+ width: 176px;
+ }
+}
+
+.dropdown-menu {
+ width: 100%;
+ background-color: var(--color-dropdown-background);
+ border: 1px solid var(--color-grey-third) !important;
+ box-shadow: 0 2px 15px 0 #0000000d !important;
+ border-radius: 8px;
+ padding-block: 8px;
+}
+
+.dropdown-item {
+ @include body-text;
+
+ color: var(--color-grey);
+ padding: 6px 12px;
+ cursor: pointer;
+
+ &:hover {
+ color: var(--color-dropdown-hover-text);
+ background-color: var(--color-dropdown-hover);
+ }
+}
diff --git a/src/components/SortProducts/index.js b/src/components/SortProducts/index.js
new file mode 100644
index 0000000000..ac7f01588a
--- /dev/null
+++ b/src/components/SortProducts/index.js
@@ -0,0 +1 @@
+export * from './SortProducts';
diff --git a/src/components/Swiper/Swiper.scss b/src/components/Swiper/Swiper.scss
new file mode 100644
index 0000000000..8abe0fd669
--- /dev/null
+++ b/src/components/Swiper/Swiper.scss
@@ -0,0 +1,56 @@
+@import '../../utils/mixins';
+
+@media (min-width: 640px) {
+ .swiper {
+ display: none;
+ }
+}
+
+.swiper-container {
+ width: 100%;
+ height: 100%;
+ position: relative !important;
+ z-index: 0 !important;
+ padding-bottom: 20px;
+ overflow: hidden;
+}
+
+.swiper-slide {
+ display: flex;
+ align-items: flex-end;
+ justify-content: center;
+ background-color: transparent;
+}
+
+.swiper-slide img {
+ width: 100%;
+ aspect-ratio: 1 / 1;
+ object-fit: cover;
+ padding-bottom: 40px;
+ display: block;
+}
+
+.swiper-pagination {
+ bottom: 5px !important;
+ text-align: center;
+ position: absolute;
+ z-index: 1;
+ height: 25px;
+ background-color: transparent;
+ padding: 0;
+}
+
+.swiper-pagination-bullet {
+ width: 14px;
+ height: 4px;
+ background-color: #b4bdc3;
+ border-radius: 0;
+ display: inline-block;
+ margin: 0 15px 0 0 !important;
+ cursor: pointer;
+ opacity: 1;
+}
+
+.swiper-pagination-bullet-active {
+ background-color: #313237;
+}
diff --git a/src/components/Swiper/Swiper.tsx b/src/components/Swiper/Swiper.tsx
new file mode 100644
index 0000000000..7ea45f1027
--- /dev/null
+++ b/src/components/Swiper/Swiper.tsx
@@ -0,0 +1,31 @@
+// import React from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Pagination } from 'swiper/modules';
+import 'swiper/css';
+import 'swiper/css/pagination';
+import './Swiper.scss';
+
+import image1 from '/img/banners/image1.png';
+import image2 from '/img/banners/image2.png';
+import image3 from '/img/banners/image3.png';
+
+export const MobileSwiper = () => {
+ return (
+
+
+
+
+
+ {selectedSortType === SortType.newest
+ ? 'Newest'
+ : selectedSortType === SortType.alpha
+ ? 'Alphabetically'
+ : 'Cheapest'}
+
+
+
+ Newest
+
+ Alphabetically
+
+ Cheapest
+
+
+
+
+
+
+
+
+ {itemsOnPage === 'all' ? 'All' : itemsOnPage}
+
+
+
+ all
+ 4
+ 8
+ 16
+
+
+
+
+
+ );
+};
diff --git a/src/components/TechSpecs/index.js b/src/components/TechSpecs/index.js
new file mode 100644
index 0000000000..eada3132a0
--- /dev/null
+++ b/src/components/TechSpecs/index.js
@@ -0,0 +1 @@
+export * from './TechSpecs';
diff --git a/src/components/Title/Title.module.scss b/src/components/Title/Title.module.scss
new file mode 100644
index 0000000000..8db05d2d81
--- /dev/null
+++ b/src/components/Title/Title.module.scss
@@ -0,0 +1,58 @@
+@import '../../utils/mixins';
+
+.h1 {
+ font-size: 32px;
+ font-weight: 700;
+ line-height: 41px;
+ letter-spacing: -0.01em;
+ color: var(--color-titles);
+
+ @include on-tablet {
+ font-size: 48px;
+ line-height: 56px;
+ }
+}
+
+.h2 {
+ font-size: 22px;
+ font-weight: 700;
+ line-height: 31px;
+ letter-spacing: 0;
+ color: var(--color-titles);
+
+ @include on-tablet {
+ font-size: 32px;
+ line-height: 41px;
+ letter-spacing: -0.01em;
+ }
+}
+
+.h3 {
+ font-size: 20px;
+ font-weight: 600;
+ line-height: 26px;
+ letter-spacing: 0;
+ color: var(--color-titles);
+
+ @include on-tablet {
+ font-size: 22px;
+ font-weight: 700;
+ line-height: 31px;
+ letter-spacing: 0;
+ }
+}
+
+.h4 {
+ font-size: 16px;
+ font-weight: 600;
+ line-height: 20px;
+ letter-spacing: 0;
+ color: var(--color-titles);
+
+ @include on-tablet {
+ font-size: 20px;
+ font-weight: 600;
+ line-height: 26px;
+ letter-spacing: 0;
+ }
+}
diff --git a/src/components/Title/Title.tsx b/src/components/Title/Title.tsx
new file mode 100644
index 0000000000..9ac578c08d
--- /dev/null
+++ b/src/components/Title/Title.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import styles from './Title.module.scss';
+
+type Props = {
+ level: 1 | 2 | 3 | 4;
+ children: React.ReactNode;
+};
+export const Title: React.FC
+ Tech specs
+
+
+
+
+
+ Screen
++ {product.screen} +
+
+
+ Resolution
++ {product.resolution} +
+
+
+ Processor
++ {product.processor} +
+
+
+ RAM
+{product.ram}
+
+
+ + Built in memory +
++ {product.capacity} +
+
+
+ Camera
++ {product.camera} +
+
+
+ Zoom
++ {product.zoom} +
+
+
+ Cell
++ {product.cell} +
+
+
+ );
+};
diff --git a/src/pages/CartPage/index.js b/src/pages/CartPage/index.js
new file mode 100644
index 0000000000..90c010237a
--- /dev/null
+++ b/src/pages/CartPage/index.js
@@ -0,0 +1 @@
+export * from './CartPage';
diff --git a/src/pages/Catalog/Catalog.module.scss b/src/pages/Catalog/Catalog.module.scss
new file mode 100644
index 0000000000..e5ef38da22
--- /dev/null
+++ b/src/pages/Catalog/Catalog.module.scss
@@ -0,0 +1,69 @@
+@import '../../utils/mixins';
+@import '../../utils/variables';
+
+.catalog {
+ &__navigation {
+ padding-top: 24px;
+ padding-bottom: 24px;
+ display: flex;
+ gap: 8px;
+
+ @include on-tablet {
+ padding-bottom: 40px;
+ }
+ }
+
+ &__current-page {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-weight: 600;
+ color: var(--color-grey);
+ line-height: 15px;
+ text-transform: capitalize;
+ }
+
+ &__title {
+ padding-bottom: 8px;
+ }
+
+ &__quantity {
+ color: var(--color-grey);
+ padding-bottom: 32px;
+
+ @include body-text;
+
+ @include on-tablet {
+ padding-bottom: 40px;
+ }
+ }
+ &__list {
+ padding-bottom: 24px;
+
+ @include on-tablet {
+ padding-bottom: 40px;
+ }
+ }
+
+ &__error {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ align-items: center;
+ }
+
+ &__reload {
+ background-color: var(--color-accent);
+ border: none;
+ border-radius: 48px;
+ padding: 12px 24px;
+ color: white;
+ cursor: pointer;
+
+ @include buttons-text;
+
+ &:hover {
+ box-shadow: 0 3px 13px 0 #17203166;
+ }
+ }
+}
diff --git a/src/pages/Catalog/Catalog.tsx b/src/pages/Catalog/Catalog.tsx
new file mode 100644
index 0000000000..9638937808
--- /dev/null
+++ b/src/pages/Catalog/Catalog.tsx
@@ -0,0 +1,177 @@
+import styles from './Catalog.module.scss';
+
+import { NavLink, useParams } from 'react-router-dom';
+import { Title } from '../../components/Title';
+import { useEffect, useState } from 'react';
+import { fetchProducts } from '../../utils/fetch';
+import { Products, SortType } from '../../utils/types';
+import { Loader } from '../../components/Loader';
+import { ProductsList } from '../../components/ProductsList';
+import { SortProducts } from '../../components/SortProducts';
+import { useSearchParams } from 'react-router-dom';
+import { Pagination } from '../../components/Pagination';
+import { NotFoundPage } from '../NotFoundPage';
+import homeIcon from '../../img/icons/home.png';
+import homeIconDark from '../../img/icons/night_theme_home.png';
+import { useTheme } from '../../context/ThemeContext';
+import { ArrowGrey } from '../../components/ArrowGrey';
+import { BASE_URL } from '../../utils/constants';
+
+export const Catalog = () => {
+ // #region state
+ const [products, setProducts] = useState
+
+ Back
+
+
+ Cart
+
+
+ {cart.length === 0 &&
+
+ )}
+
+ {cart.map((cartItem: CartItem) => (
+
+
+
+
+ {'$' + calculateTotalPrice(cart)}
+
+
+ {`Total for ${calculateTotalAmount(cart)} items`}
+
+
+ );
+};
diff --git a/src/pages/Catalog/index.js b/src/pages/Catalog/index.js
new file mode 100644
index 0000000000..50d66eb125
--- /dev/null
+++ b/src/pages/Catalog/index.js
@@ -0,0 +1 @@
+export * from './Catalog';
diff --git a/src/pages/Favorites/Favorites.module.scss b/src/pages/Favorites/Favorites.module.scss
new file mode 100644
index 0000000000..3fc5a03b69
--- /dev/null
+++ b/src/pages/Favorites/Favorites.module.scss
@@ -0,0 +1,52 @@
+@import '../../utils/mixins';
+@import '../../utils/variables';
+
+.favorites {
+ &__navigation {
+ padding-top: 24px;
+ padding-bottom: 24px;
+ display: flex;
+ gap: 8px;
+
+ @include on-tablet {
+ padding-bottom: 40px;
+ }
+ }
+
+ &__current-page {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-weight: 600;
+ color: var(--color-grey);
+ line-height: 15px;
+ text-transform: capitalize;
+ }
+
+ &__title {
+ padding-bottom: 8px;
+ }
+
+ &__quantity {
+ color: var(--color-grey);
+ padding-bottom: 32px;
+
+ @include body-text;
+
+ @include on-tablet {
+ padding-bottom: 40px;
+ }
+ }
+
+ &__list {
+ padding-bottom: 56px;
+
+ @include on-tablet {
+ padding-bottom: 64px;
+ }
+
+ @include on-desktop {
+ padding-bottom: 80px;
+ }
+ }
+}
diff --git a/src/pages/Favorites/Favorites.tsx b/src/pages/Favorites/Favorites.tsx
new file mode 100644
index 0000000000..7377122c65
--- /dev/null
+++ b/src/pages/Favorites/Favorites.tsx
@@ -0,0 +1,41 @@
+import { NavLink } from 'react-router-dom';
+import styles from './Favorites.module.scss';
+import { Title } from '../../components/Title';
+import { useContext } from 'react';
+import { FavoritesContext } from '../../context/FavoritesContext';
+import { ProductsList } from '../../components/ProductsList';
+import homeIcon from '../../img/icons/home.png';
+import homeIconDark from '../../img/icons/night_theme_home.png';
+import { useTheme } from '../../context/ThemeContext';
+import { ArrowGrey } from '../../components/ArrowGrey';
+import { BASE_URL } from '../../utils/constants';
+
+export const Favorites = () => {
+ const { favorites } = useContext(FavoritesContext);
+ const { isDarkTheme } = useTheme();
+
+ return (
+
+
+
+
+
+
+ {isLoading && {category}
+
+
+ )}
+
+ {!isLoading && !errorMessage && products.length === 0 && (
+ {errorMessage}
+ +{`There are no ${category} yet`}
+ )} + + {!isLoading && !errorMessage && displayedProducts.length > 0 && ( + <> +
+ {pageTitle}
+
+ + {`${products.length} models`} +
+
+
+
+ )}
+
+ {pagesAmount > 1 && (
+
+
+ );
+};
diff --git a/src/pages/Favorites/index.js b/src/pages/Favorites/index.js
new file mode 100644
index 0000000000..c3ffcf8b38
--- /dev/null
+++ b/src/pages/Favorites/index.js
@@ -0,0 +1 @@
+export * from './Favorites';
diff --git a/src/pages/HomePage/HomePage.module.scss b/src/pages/HomePage/HomePage.module.scss
new file mode 100644
index 0000000000..76e67c7b95
--- /dev/null
+++ b/src/pages/HomePage/HomePage.module.scss
@@ -0,0 +1,27 @@
+@import '../../utils/mixins';
+
+.homePage {
+ &__title {
+ padding-block: 24px;
+
+ @include on-tablet {
+ padding-block: 32px;
+ }
+
+ @include on-desktop {
+ padding-block: 56px;
+ }
+ }
+
+ &__section {
+ margin-bottom: 56px;
+
+ @include on-tablet {
+ margin-bottom: 64px;
+ }
+
+ @include on-desktop {
+ margin-bottom: 80px;
+ }
+ }
+}
diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx
new file mode 100644
index 0000000000..903d669e0c
--- /dev/null
+++ b/src/pages/HomePage/HomePage.tsx
@@ -0,0 +1,38 @@
+import { ProductSlider } from '../../components/ProductSlider';
+import { MobileSwiper } from '../../components/Swiper';
+import { Title } from '../../components/Title';
+import { ProductCategory, SortType } from '../../utils/types';
+import { Slider } from '../../components/Slider';
+import styles from './HomePage.module.scss';
+import { ShopByCategory } from '../../components/ShopByCategory';
+
+export const HomePage = () => {
+ return (
+
+
+
+
+
+ Favorites
+
+ Favourites
+
+ {`${favorites.length} items`}
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/pages/HomePage/index.js b/src/pages/HomePage/index.js
new file mode 100644
index 0000000000..11e53da674
--- /dev/null
+++ b/src/pages/HomePage/index.js
@@ -0,0 +1 @@
+export * from './HomePage';
diff --git a/src/pages/NotFoundPage/NotFoundPage.module.scss b/src/pages/NotFoundPage/NotFoundPage.module.scss
new file mode 100644
index 0000000000..53dc267d83
--- /dev/null
+++ b/src/pages/NotFoundPage/NotFoundPage.module.scss
@@ -0,0 +1,22 @@
+@import '../../utils/mixins';
+
+.notFoundPage {
+ &__container {
+ padding-top: 100px;
+ align-items: center;
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ gap: 50px;
+ }
+
+ &__image {
+ width: 200px;
+ height: 200px;
+
+ @include on-tablet {
+ width: 300px;
+ height: 300px;
+ }
+ }
+}
diff --git a/src/pages/NotFoundPage/NotFoundPage.tsx b/src/pages/NotFoundPage/NotFoundPage.tsx
new file mode 100644
index 0000000000..64fb69a13a
--- /dev/null
+++ b/src/pages/NotFoundPage/NotFoundPage.tsx
@@ -0,0 +1,18 @@
+import { Title } from '../../components/Title';
+import styles from './NotFoundPage.module.scss';
+import image from '../../img/notFound/page-not-found.png';
+
+export const NotFoundPage = () => {
+ return (
+
+ Welcome to Nice Gadgets store!
+
+
+
+ );
+};
diff --git a/src/pages/NotFoundPage/index.js b/src/pages/NotFoundPage/index.js
new file mode 100644
index 0000000000..6197aa75aa
--- /dev/null
+++ b/src/pages/NotFoundPage/index.js
@@ -0,0 +1 @@
+export * from './NotFoundPage';
diff --git a/src/pages/ProductDetailsPage/ProductDetailsPage.module.scss b/src/pages/ProductDetailsPage/ProductDetailsPage.module.scss
new file mode 100644
index 0000000000..01240ab4f0
--- /dev/null
+++ b/src/pages/ProductDetailsPage/ProductDetailsPage.module.scss
@@ -0,0 +1,287 @@
+@import '../../utils/mixins';
+@import '../../utils/variables';
+
+.productDetails {
+ &__goback {
+ display: flex;
+ gap: 4px;
+ padding-bottom: 16px;
+ }
+
+ &__error {
+ text-align: center;
+ padding-top: 30px;
+ }
+
+ &__errorMessage {
+ padding-bottom: 20px;
+ }
+
+ &__errorImage {
+ width: 150px;
+ height: 150px;
+
+ @include on-tablet {
+ width: 200px;
+ height: 200px;
+ }
+
+ @include on-desktop {
+ width: 250px;
+ height: 250px;
+ }
+ }
+
+ &__title {
+ padding-bottom: 32px;
+
+ @include on-tablet {
+ padding-bottom: 40px;
+ }
+ }
+
+ &__top {
+ padding-bottom: 56px;
+
+ @include on-tablet {
+ display: grid;
+ grid-template-columns: repeat(12, 1fr);
+ column-gap: 16px;
+ padding-bottom: 64px;
+ }
+
+ @include on-desktop {
+ grid-template-columns: repeat(24, 32px);
+ padding-bottom: 80px;
+ }
+ }
+
+ &__imageContainer {
+ width: 100%;
+ aspect-ratio: 1 / 1;
+ padding-bottom: 16px;
+
+ @include on-tablet {
+ padding-bottom: 0;
+ grid-column: 2 / 8;
+ }
+
+ @include on-desktop {
+ grid-column: 3 / 13;
+ }
+ }
+
+ &__image {
+ width: 100%;
+ height: 100%;
+ object-position: center;
+ object-fit: contain;
+ }
+
+ &__images {
+ display: flex;
+ gap: 8px;
+ padding-bottom: 40px;
+
+ @include on-tablet {
+ flex-direction: column;
+ grid-column: 1 / 2;
+ grid-row: 1;
+ padding-bottom: 0;
+ }
+
+ @include on-desktop {
+ grid-column: 1 / 3;
+ grid-row: 1;
+ }
+ }
+
+ &__details {
+ width: 100%;
+
+ @include on-tablet {
+ grid-column: 8 / -1;
+ }
+
+ @include on-desktop {
+ grid-column: 14 / 21;
+ }
+ }
+
+ &__images-item {
+ height: 49px;
+ padding: 5px;
+ border-radius: 4px;
+ border: 1px solid var(--color-grey-second);
+ object-fit: contain;
+
+ @include on-tablet {
+ width: 100%;
+ height: auto;
+ aspect-ratio: 1 / 1;
+ padding: 3px;
+ }
+
+ &--active {
+ border: 1px solid var(--color-black);
+ }
+ }
+
+ &__label {
+ @include small-text;
+
+ color: var(--color-grey);
+ padding-bottom: 8px;
+ }
+
+ &__selectors {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ padding-bottom: 32px;
+ }
+
+ &__selectorButtons {
+ display: flex;
+ gap: 8px;
+ padding-bottom: 24px;
+ flex-wrap: wrap;
+ }
+
+ &__colorButtonContainer {
+ box-sizing: border-box;
+ width: 32px;
+ height: 32px;
+ border-radius: 36px;
+ border: 1px solid var(--color-border-icons);
+
+ &:hover {
+ border-color: var(--color-grey);
+ }
+
+ &--active {
+ border: 1px solid var(--color-black);
+ }
+ }
+
+ &__colorButton {
+ margin: 0;
+ appearance: none;
+ width: 100%;
+ height: 100%;
+ border: 2px solid var(--color-page-background);
+ border-radius: 36px;
+ }
+
+ &__line {
+ width: 100%;
+ border-bottom: 1px solid var(--color-grey-third);
+ }
+
+ &__capacity {
+ @include body-text;
+
+ height: 32px;
+ padding-inline: 8px;
+ font-family: inherit;
+ background-color: var(--color-page-background);
+ color: var(--color-black);
+ border-radius: 4px;
+ border: 1px solid var(--color-grey-second);
+
+ &--active {
+ color: var(--color-white);
+ background-color: var(--color-black);
+ border: none;
+ }
+ }
+
+ &__prices {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding-bottom: 16px;
+ }
+
+ &__discountPrice {
+ font-size: 22px;
+ font-weight: 500;
+ line-height: 28px;
+ text-decoration: line-through;
+ color: var(--color-grey);
+ }
+
+ &__buttons {
+ display: flex;
+ gap: 8px;
+ padding-bottom: 32px;
+ align-items: center;
+ }
+
+ &__characteristics {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ }
+
+ &__characteristic {
+ display: flex;
+ justify-content: space-between;
+ }
+
+ &__characteristicName {
+ font-weight: 500;
+ color: var(--color-grey);
+
+ @include small-text;
+ }
+ &__characteristicValue {
+ font-weight: 500;
+ color: var(--color-black);
+
+ @include small-text;
+ }
+
+ &__description {
+ display: flex;
+ flex-direction: column;
+ gap: 56px;
+ padding-bottom: 56px;
+
+ @include on-tablet {
+ gap: 64px;
+ padding-bottom: 64px;
+ }
+
+ @include on-desktop {
+ display: grid;
+ grid-template-columns: repeat(24, 32px);
+ column-gap: 16px;
+ padding-bottom: 80px;
+ }
+ }
+
+ &__about {
+ @include on-desktop {
+ grid-column: 1 / 13;
+ }
+ }
+
+ &__specs {
+ @include on-desktop {
+ grid-column: 14 / 24;
+ }
+ }
+
+ &__slider {
+ padding-bottom: 56px;
+
+ @include on-tablet {
+ padding-bottom: 64px;
+ }
+
+ @include on-desktop {
+ padding-bottom: 80px;
+ }
+ }
+}
diff --git a/src/pages/ProductDetailsPage/ProductDetailsPage.tsx b/src/pages/ProductDetailsPage/ProductDetailsPage.tsx
new file mode 100644
index 0000000000..cc4050e19c
--- /dev/null
+++ b/src/pages/ProductDetailsPage/ProductDetailsPage.tsx
@@ -0,0 +1,295 @@
+import { useNavigate, useParams } from 'react-router-dom';
+import { fetchProduct, fetchProductsItem } from '../../utils/fetch';
+import { useEffect, useState } from 'react';
+import { Product, Products, SortType } from '../../utils/types';
+import styles from './ProductDetailsPage.module.scss';
+import { Loader } from '../../components/Loader';
+import { Breadcrumbs } from '../../components/Breadcrumbs';
+import { GoBack } from '../../components/GoBack';
+import { Title } from '../../components/Title';
+import classNames from 'classnames';
+import { colors } from '../../utils/colors';
+import { ToBuyButton } from '../../components/ToBuyButton';
+import { AddToFavourites } from '../../components/AddToFavourites';
+import { AboutProduct } from '../../components/AboutProduct';
+import { TechSpecs } from '../../components/TechSpecs';
+import { ProductSlider } from '../../components/ProductSlider';
+import { useTheme } from '../../context/ThemeContext';
+import blackArrow from '../../img/icons/arrow_left_black.png';
+import whiteArrow from '../../img/icons/arrow_left_white.png';
+import { BASE_URL } from '../../utils/constants';
+
+export const ProductDetailsPage = () => {
+ // #region state
+ const [isLoading, setIsLoading] = useState(false);
+ const [displayedProduct, setDisplayedProduct] = useState
+ 
+ Oooops... page not found
+
+
+ {isLoading &&
+ );
+};
diff --git a/src/pages/ProductDetailsPage/index.js b/src/pages/ProductDetailsPage/index.js
new file mode 100644
index 0000000000..6615089e5e
--- /dev/null
+++ b/src/pages/ProductDetailsPage/index.js
@@ -0,0 +1 @@
+export * from './ProductDetailsPage';
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
new file mode 100644
index 0000000000..30da896298
--- /dev/null
+++ b/src/react-app-env.d.ts
@@ -0,0 +1 @@
+// /
+ 
+
+ )}
+ {!isLoading && !errorMessage && displayedProduct && category && (
+ <>
+ + {errorMessage} +
+
+
+
+
+ Back
+
+
+ {displayedProduct.name}
+
+
+
+
+ 
+
+
+
+ {displayedProduct.images.map((image, index) => {
+ return (
+ 
{
+ setDisplayedImageIndex(index);
+ }}
+ />
+ );
+ })}
+
+
+
+
+
+
+
+
+ + Available colors +
+
+ {displayedProduct?.colorsAvailable.map(color => {
+ return (
+
+
+
+ handleColorChange(color)}
+ />
+
+ );
+ })}
+
+
+ + Select capacity +
+
+ {displayedProduct?.capacityAvailable.map(
+ (capacity: string) => {
+ return (
+
+ );
+ },
+ )}
+
+
+
+ {`$${displayedProduct.priceRegular}`}
+
+ {`$${displayedProduct.priceDiscount}`}
+
+ {displayedProductInCategory && (
+ <>
+
+
+
+
+
+ + Screen +
++ {displayedProduct.screen} +
+
+
+ + Resolution +
++ {displayedProduct.resolution} +
+
+
+ + Processor +
++ {displayedProduct.processor} +
+
+
+ + RAM +
++ {displayedProduct.ram} +
+
+
+
+
+
+
+
+
+
+ )}
+