About
+ {Array.isArray(phoneDetails.description) + && phoneDetails.description.map(article => ( +
+
+ ))}
+ + {article.title && article.title} +
+ {article.text.map(text => ( ++ {text} +
+ ))} +
+ {!searchBarValue ? (
+ <>
+
+ );
+};
diff --git a/src/pages/CardPage.tsx b/src/pages/CardPage.tsx
new file mode 100644
index 0000000000..5894a09be6
--- /dev/null
+++ b/src/pages/CardPage.tsx
@@ -0,0 +1,78 @@
+/* eslint-disable no-prototype-builtins */
+import { FC, useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import '../styles/styles.scss';
+// eslint-disable-next-line import/no-cycle
+import { CardedProduct } from './components/CardedProduct';
+import { useAppSelector } from '../app/hooks';
+import { PopUp } from './components/PopUp';
+// eslint-disable-next-line import/no-cycle
+import { phoneCardSelector } from '../app/selector';
+
+export const CardPage: FC = () => {
+ const cardedPhones = useAppSelector(phoneCardSelector);
+ const [popUpState, setPopUpState] = useState(false);
+
+ const handlePopUp = () => {
+ setPopUpState(true);
+ };
+
+ useEffect(() => {
+ if (popUpState) {
+ document.body.style.overflow = 'hidden';
+ window.scrollTo({
+ top: 0,
+ behavior: 'smooth',
+ });
+ } else {
+ document.body.style.overflow = 'auto';
+ }
+ }, [popUpState]);
+
+ return (
+ Accessories
++ {`${accessoriesSearched.length} models`} +
+ {accessoriesSearched.length > 0 && ( +
+
+ )}
+
+ ) : (
+
+
+ Sort by
+
+
+ Items on page
+{`${accessoriesSearched.length} results`}
+ )} + + {statusLadingProducts === AsyncStatus.LOADING ? ( +
+
+ );
+};
diff --git a/src/pages/FavoritesPage.tsx b/src/pages/FavoritesPage.tsx
new file mode 100644
index 0000000000..4403501d29
--- /dev/null
+++ b/src/pages/FavoritesPage.tsx
@@ -0,0 +1,28 @@
+import { FC } from 'react';
+import Breadcrumbs from './components/Breadcrumbs';
+import { ProductsList } from './components/ProductsList';
+import { useAppSelector } from '../app/hooks';
+import { filteringVisibleSearchedProducts } from '../app/utils';
+import { favoriteProductsSelector, searchBarSelector } from '../app/selector';
+
+export const FavoritesPage: FC = () => {
+ const favoritesPhones = useAppSelector(favoriteProductsSelector);
+ const searchBarValue = useAppSelector(searchBarSelector);
+
+ const phonesSearched = filteringVisibleSearchedProducts(
+ favoritesPhones, searchBarValue,
+ );
+
+ return (
+
+ {popUpState && (
+ Back
+
+
+
+ Back
+
+ Cart
+ {cardedPhones.length < 0 ? ( +Add something to card...
+ ) : ( +
+
+ )}
+ -
+ {cardedPhones.map(card => (
+
-
+
+
+ ))}
+
+
+ {`$${cardedPhones.reduce((a, i) => a + (i.amount * i.value.price), 0)}`}
+{`Total for ${cardedPhones.reduce((a, i) => a + i.amount, 0)} items`}
+ +
+
+ );
+};
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
new file mode 100644
index 0000000000..e5b101ace4
--- /dev/null
+++ b/src/pages/HomePage.tsx
@@ -0,0 +1,132 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react';
+import { Link } from 'react-router-dom';
+import '../styles/styles.scss';
+import { ProductsSlider } from './components/ProductsSlider';
+import { PreviewSlider } from './components/PreviewSlider';
+import { Product } from '../types/Product';
+import { useAppSelector } from '../app/hooks';
+import { AsyncStatus } from '../types/AsyncStatus';
+import { Loader } from './components/Loader';
+import {
+ phonesSelector,
+ phonesStatusSelector,
+ productsSelector,
+} from '../app/selector';
+
+export const HomePage: React.FC = () => {
+ const phones: Product[] = useAppSelector(phonesSelector);
+ const statusLadingPhones = useAppSelector(phonesStatusSelector);
+ const tabletsAmount = useAppSelector(productsSelector).filter(
+ p => p.type === 'tablet',
+ ).length;
+ const accessoryAmount = useAppSelector(productsSelector).filter(
+ p => p.type === 'accessory',
+ ).length;
+
+ const hotPricePhones = [...phones].sort(
+ (a: Product, b: Product) => {
+ const aValue = (a.fullPrice - a.price) / a.fullPrice;
+ const bValue = (b.fullPrice - b.price) / b.fullPrice;
+
+ return aValue - bValue;
+ },
+ );
+
+ const brandNewModels = [...phones].sort(
+ (a: Product, b: Product) => +b.year - +a.year,
+ );
+
+ const images = [
+ { imgUrl: 'images/banner-phones.png', id: '01' },
+ { imgUrl: 'images/banner-phones.png', id: '02' },
+ { imgUrl: 'images/banner-phones.png', id: '03' },
+ ];
+
+ return (
+ <>
+
+
+ Favourites
++ {`${favoritesPhones.length} items`} +
+
+
+
+
+ );
+};
diff --git a/src/pages/PhonesPage.tsx b/src/pages/PhonesPage.tsx
new file mode 100644
index 0000000000..f0f384deb1
--- /dev/null
+++ b/src/pages/PhonesPage.tsx
@@ -0,0 +1,130 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import {
+ FC, useEffect, useState,
+} from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+import Breadcrumbs from './components/Breadcrumbs';
+import { ProductsList } from './components/ProductsList';
+// eslint-disable-next-line import/no-cycle
+// import CustomSelect from './components/CustomSelect';
+import { Product } from '../types/Product';
+
+import '../styles/styles.scss';
+import { Pagination } from './components/Pagination';
+import {
+ updateStateProductsAndUrl,
+ useAppDispatch,
+ useAppSelector,
+} from '../app/hooks';
+import { Loader } from './components/Loader';
+import { AsyncStatus } from '../types/AsyncStatus';
+import { incrementAsync as loadedPhones } from '../features/phones/phonesSlice';
+// eslint-disable-next-line import/no-cycle
+import CustomSelect from './components/CustomSelect';
+import { SortByOptions } from '../types/SortByOptions';
+import { SelectAmountItems } from '../types/SelectAmountItems';
+import { filteringVisibleSearchedProducts } from '../app/utils';
+import { itemsOnPageOptions, sortByOptions } from '../types/SelectOptionsArr';
+import { phonesSelector, phonesStatusSelector } from '../app/selector';
+
+export const PhonesPage: FC = () => {
+ const phones: Product[] = useAppSelector(phonesSelector);
+ const statusLadingPhones = useAppSelector(phonesStatusSelector);
+ const [selectedOptions, setSelectedOptions] = useState({
+ sortBy: SortByOptions.AGE,
+ itemsShow: SelectAmountItems.SIXTEEN,
+ });
+
+ const [visiblePhones, setVisiblePhones] = useState
+
+ {images.map(img => (
+ 
+ ))}
+
+
+
+
+ ))}
+
+
+
+ + Hot prices +
+ {statusLadingPhones === AsyncStatus.LOADING ? ( +
+
+
+ Shop by category
+
+
+
+
+ 
+
+
+
+
+ + Mobile phones +
+{`${phones.length} models`}
+
+
+ 
+
+
+
+
+ + Tablets +
+{`${tabletsAmount} models`}
+
+
+ 
+
+
+
+
+ + Accessories +
+{`${accessoryAmount} models`}
+
+
+ + Brand new models +
+ {statusLadingPhones === AsyncStatus.LOADING ? ( +
+ {!searchBarValue ? (
+ <>
+
+ );
+};
diff --git a/src/pages/ProductDetailsPage.tsx b/src/pages/ProductDetailsPage.tsx
new file mode 100644
index 0000000000..92f3f279e3
--- /dev/null
+++ b/src/pages/ProductDetailsPage.tsx
@@ -0,0 +1,193 @@
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable max-len */
+import { FC, useEffect, useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import Breadcrumbs from './components/Breadcrumbs';
+import '../styles/styles.scss';
+import { useAppDispatch, useAppSelector } from '../app/hooks';
+import { Product } from '../types/Product';
+import { Loader } from './components/Loader';
+import { incrementAsyncOld, incrementAsync as loadPhoneDetails } from '../features/PhoneDetails/phoneDetailsSlice';
+import { AsyncStatus } from '../types/AsyncStatus';
+import { ProductsSlider } from './components/ProductsSlider';
+import {
+ favoriteProductsSelector,
+ phoneCardSelector,
+ phonesDetaildStatusSelector,
+ phonesDetailsSelector,
+ phonesSelector,
+ phonesStatusSelector,
+ productsSelector,
+ selectedPhoneSelector,
+} from '../app/selector';
+import { setInCardPhone, unsetFromCardPhone } from '../features/PhonesInCard/phonesInCardSlice';
+import { incrementAsync as loadPhones } from '../features/phones/phonesSlice';
+import { KeyJson } from '../types/KeyJson';
+import { setFavoritePhone, unsetFavoritePhone } from '../features/PhonesFavorites/phonesFavoritesSlice';
+import { DesriptionNewApi } from './components/DesriptionApi';
+import { incrementAsync as loadProducts } from '../features/products/productsSlice';
+
+export const ProductDetailsPage: FC = () => {
+ const dispatch = useAppDispatch();
+ const selectedProduct = useAppSelector(selectedPhoneSelector);
+ const phonesFromServer = useAppSelector(phonesSelector);
+ const productFromServer = useAppSelector(productsSelector);
+ const statusPhones = useAppSelector(phonesStatusSelector);
+ const phoneDetails = useAppSelector(phonesDetailsSelector);
+ const phoneDetailsStatus = useAppSelector(phonesDetaildStatusSelector);
+ const cardedPhones = useAppSelector(phoneCardSelector);
+ const favoritesPhones = useAppSelector(favoriteProductsSelector);
+ const [brandNewModels, setBrandNewModels] = useStateMobile phones
++ {`${visiblePhones.length} models`} +
+
+
+
+ ) : (
+
+
+ Sort by
+
+
+ Items on page
+{`${phonesSearched.length} results`}
+ )} + {statusLadingPhones === AsyncStatus.LOADING ? ( +
+ {isLoading ? (
+ 
+ Back
+
+
+ );
+};
diff --git a/src/pages/TabletsPage.tsx b/src/pages/TabletsPage.tsx
new file mode 100644
index 0000000000..f7d284f693
--- /dev/null
+++ b/src/pages/TabletsPage.tsx
@@ -0,0 +1,137 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import {
+ FC, useEffect, useState,
+} from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+import Breadcrumbs from './components/Breadcrumbs';
+import { ProductsList } from './components/ProductsList';
+
+import '../styles/styles.scss';
+import { Pagination } from './components/Pagination';
+import {
+ updateStateProductsAndUrl,
+ useAppDispatch,
+ useAppSelector,
+} from '../app/hooks';
+import { Loader } from './components/Loader';
+import { AsyncStatus } from '../types/AsyncStatus';
+import {
+ incrementAsync as loadedProducts,
+} from '../features/products/productsSlice';
+import { Product } from '../types/Product';
+import { SortByOptions } from '../types/SortByOptions';
+import { SelectAmountItems } from '../types/SelectAmountItems';
+import { filteringVisibleSearchedProducts } from '../app/utils';
+import { itemsOnPageOptions, sortByOptions } from '../types/SelectOptionsArr';
+import CustomSelect from './components/CustomSelect';
+import {
+ productsSelector,
+ productsStatusSelector,
+ searchBarSelector,
+} from '../app/selector';
+
+export const TabletsPage: FC = () => {
+ const products: Product[] = useAppSelector(productsSelector);
+ const statusLadingProducts = useAppSelector(productsStatusSelector);
+ const [selectedOptions, setSelectedOptions] = useState({
+ sortBy: SortByOptions.AGE,
+ itemsShow: SelectAmountItems.SIXTEEN,
+ });
+ const [visibleProducts, setVisibleProducts] = useState
+ Back
+
+ + {phoneDetails.name} +
+
+
+
+ )}
+ You may also like
+ {statusPhones === AsyncStatus.IDLE && brandNewModels.length && ( +
+ {!searchBarValue ? (
+ <>
+
+ );
+};
diff --git a/src/pages/components/BreadcrumbItem.tsx b/src/pages/components/BreadcrumbItem.tsx
new file mode 100644
index 0000000000..458f8f2b2a
--- /dev/null
+++ b/src/pages/components/BreadcrumbItem.tsx
@@ -0,0 +1,34 @@
+// BreadcrumbItem.js
+import { FC } from 'react';
+import '../../styles/styles.scss';
+import { NavLink } from 'react-router-dom';
+
+type Props = {
+ text: string,
+ link: string,
+};
+
+const BreadcrumbItem: FCTablets
++ {`${tabletsSearched.length} models`} +
+ {tabletsSearched.length > 0 && ( +
+
+ )}
+
+ ) : (
+
+
+ Sort by
+
+
+ Items on page
+{`${tabletsSearched.length} results`}
+ )} + + {statusLadingProducts === AsyncStatus.LOADING ? ( +
+ 
+ {capitalizeFirstLetter(text)}
+
+
+ 
+
+ + {card.value.name} +
+
+
+
+ {card.amount}
+ +{`$${card.value.price}`}
+ + ); +}; diff --git a/src/pages/components/CustomSelect.tsx b/src/pages/components/CustomSelect.tsx new file mode 100644 index 0000000000..2cb835841a --- /dev/null +++ b/src/pages/components/CustomSelect.tsx @@ -0,0 +1,98 @@ +/* eslint-disable jsx-a11y/click-events-have-key-events */ +/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ +/* eslint-disable jsx-a11y/no-static-element-interactions */ +import { + Dispatch, FC, SetStateAction, useState, useEffect, +} from 'react'; +import classNames from 'classnames'; +// eslint-disable-next-line import/no-cycle +import '../../styles/styles.scss'; +import { SortByOptions } from '../../types/SortByOptions'; +import { SelectAmountItems } from '../../types/SelectAmountItems'; + +type Props = { + options: { text: string, value: SortByOptions | SelectAmountItems }[], + defaultOption: string, + onChange: Dispatch
+
+ );
+};
+
+export default CustomSelect;
diff --git a/src/pages/components/DesriptionApi.tsx b/src/pages/components/DesriptionApi.tsx
new file mode 100644
index 0000000000..749de9c01f
--- /dev/null
+++ b/src/pages/components/DesriptionApi.tsx
@@ -0,0 +1,238 @@
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import { FC } from 'react';
+import classNames from 'classnames';
+import { PhoneDetails } from '../../types/PhoneDetails';
+import { SavedCard } from '../../types/SavedCard';
+import { Product } from '../../types/Product';
+
+type Props = {
+ phoneDetails: PhoneDetails,
+ bigImgIndex: number,
+ capacityIndex: number,
+ onGalleryImg: (index: number) => void,
+ onCapacityItem: (index: number) => void,
+ cardedPhones: SavedCard[],
+ onCardedProducts: () => void,
+ favoritesPhones: Product[],
+ onFavoritesProducts: () => void,
+ onColorItem: (index: number) => void,
+ colorIndex: number,
+};
+
+export const DesriptionNewApi: FC{selectedOption}
+ {isOpen && (
+ -
+ {options.map((option) => (
+
- handleOptionClick(option)} + > + {option.text} + + ))} +
+
+
+ {phoneDetails.images.map((img, index) => (
+ 
onGalleryImg(index)}
+ />
+ ))}
+
+
+ 
+
+
+
+
+
+ {phoneDetails.capacityAvailable && (
+ Available colors
+-
+ {phoneDetails.colorsAvailable.map((color, index) => (
+
- onColorItem(index)} + > + + + + ))} +
+
+ )}
+ Select capacity
+-
+ {phoneDetails.capacityAvailable.map((item, index) => (
+
- onCapacityItem(index)} + > + {item} + + + ))} +
+
+
+
+ {`${phoneDetails.priceDiscount}$`}
+{`${phoneDetails.priceRegular}$`}
+
+
+
+
+
+
+ -
+
+
- Screen +
- + {phoneDetails.screen} + +
- Resolution +
- + {phoneDetails.resolution} + +
- Processor +
- + {phoneDetails.processor} + +
- RAM +
- {phoneDetails.ram} +
Tech specs
+ {phoneDetails.cell && ( +-
+
- Screen +
- {phoneDetails.screen} +
- Resolution +
- + {phoneDetails.resolution} + +
- Processor +
- + {phoneDetails.processor} + +
- RAM +
- {phoneDetails.ram} +
- Built in memory +
- + {phoneDetails.capacity} + +
- Camera +
- + {phoneDetails.camera} + +
- Zoom +
- {phoneDetails.zoom} +
- Cell +
-
+ {phoneDetails.cell ? (
+ phoneDetails.cell.map((item, index) => (
+
+ {`${item}${index !== phoneDetails.cell.length - 1 ? ',' : ''}`} +
+ )) + ) : ( + '' + )} +
+
+
+
+
+
+
+ {showSearchBar && ( classNames(
+ 'favorites-card-buttons__link',
+ { 'favorites-card-buttons__link--active': isActive },
+ )}
+ >
+ 
+ {productsFavoriteCount > 0 && (
+
+ classNames(
+ 'favorites-card-buttons__link',
+ { 'favorites-card-buttons__link--active': isActive },
+ )}
+ >
+ 
+ {productsInCardCount > 0 && (
+
+
+
+ {productsFavoriteCount > 0 && (
+
+ {productsFavoriteCount}
+
+ )}
+
+ {productsInCardCount > 0 && (
+
+ {productsInCardCount}
+
+ )}
+
+
+
+);
diff --git a/src/pages/components/Loader/index.tsx b/src/pages/components/Loader/index.tsx
new file mode 100644
index 0000000000..d5ce981151
--- /dev/null
+++ b/src/pages/components/Loader/index.tsx
@@ -0,0 +1 @@
+export * from './Loader';
diff --git a/src/pages/components/Pagination.tsx b/src/pages/components/Pagination.tsx
new file mode 100644
index 0000000000..e8dbfd33e0
--- /dev/null
+++ b/src/pages/components/Pagination.tsx
@@ -0,0 +1,70 @@
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable no-plusplus */
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react';
+import '../../styles/styles.scss';
+import { useSearchParams } from 'react-router-dom';
+import classNames from 'classnames';
+
+type Props = {
+ phonesPepPege: number,
+ totalPhones: number,
+ onPaginate: (pagenumber: number) => void,
+};
+
+export const Pagination: React.FC-
+
- handlePagination(+page - 1)}
+ >
+
+
+ {pageNumers.map(number => (
+
- handlePagination(number)} + > + {number} + + ))} +
- handlePagination(+page + 1)}
+ >
+
+
+
+
+ );
+};
diff --git a/src/pages/components/PreviewSlider.tsx b/src/pages/components/PreviewSlider.tsx
new file mode 100644
index 0000000000..8765aea202
--- /dev/null
+++ b/src/pages/components/PreviewSlider.tsx
@@ -0,0 +1,129 @@
+/* eslint-disable jsx-a11y/control-has-associated-label */
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import React, {
+ useState, useEffect, cloneElement, useRef,
+} from 'react';
+import classNames from 'classnames';
+import '../../styles/styles.scss';
+
+type Props = {
+ children: JSX.Element[];
+};
+
+const PICTURE_SIZE = 100;
+const INTERVAL_DELAY = 5000;
+
+export const PreviewSlider: React.FC
+
+ + We are sorry, but this feature is not implemented yet +
+ +
+
+
+
+ );
+});
diff --git a/src/pages/components/ProductCard.tsx b/src/pages/components/ProductCard.tsx
new file mode 100644
index 0000000000..2bb46533c9
--- /dev/null
+++ b/src/pages/components/ProductCard.tsx
@@ -0,0 +1,178 @@
+import { FC, useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import classNames from 'classnames';
+
+import { Product } from '../../types/Product';
+import '../../styles/styles.scss';
+import { useAppDispatch, useAppSelector } from '../../app/hooks';
+import { SelectedStatus } from '../../types/SelectedStatus';
+import {
+ setPhone,
+} from '../../features/selectedPhone/selectedPhoneSlice';
+import {
+ setFavoritePhone, unsetFavoritePhone,
+} from '../../features/PhonesFavorites/phonesFavoritesSlice';
+import {
+ setInCardPhone, unsetFromCardPhone,
+} from '../../features/PhonesInCard/phonesInCardSlice';
+import {
+ favoriteProductsSelector,
+ phoneCardSelector,
+ selectedPhoneSelector,
+ selectedPhoneStatusSelector,
+} from '../../app/selector';
+import { KeyJson } from '../../types/KeyJson';
+
+type Props = {
+ product: Product;
+};
+
+export const ProductCard: FC{pages}
+
+ {pages.map((page, index) => (
+
+
+
+
+ 
+
+ );
+};
diff --git a/src/pages/components/ProductsList.tsx b/src/pages/components/ProductsList.tsx
new file mode 100644
index 0000000000..89a25adce9
--- /dev/null
+++ b/src/pages/components/ProductsList.tsx
@@ -0,0 +1,53 @@
+import { FC } from 'react';
+import '../../styles/styles.scss';
+import { useLocation } from 'react-router-dom';
+import { Product } from '../../types/Product';
+import { ProductCard } from './ProductCard';
+import { useAppSelector } from '../../app/hooks';
+import {
+ favoriteProductsSelector,
+ searchBarSelector,
+} from '../../app/selector';
+
+type Props = {
+ products: Product[],
+};
+
+export const ProductsList: FC+ {product.name} +
+ +
+
+ {`${price}$`}
+ {price !== fullPrice && ( ++ {`${fullPrice}$`} +
+ )} +-
+
- Screen +
- {product.screen} +
- Capacity +
- {product.capacity} +
- RAM +
- {product.ram} +
+
+
+
+ { messageForZeroProducts }
+ ) : ( +-
+ {products.map(product => (
+
-
+
+
+ ))}
+
{noSearchedResultMessage}
+ )} + {location.pathname === '/favorites' && !searchBarValue && ( +{messageForZeroFavorites}
+ )} + + ); +}; diff --git a/src/pages/components/ProductsSlider.tsx b/src/pages/components/ProductsSlider.tsx new file mode 100644 index 0000000000..6816dc8efd --- /dev/null +++ b/src/pages/components/ProductsSlider.tsx @@ -0,0 +1,82 @@ +// import { ProductCard } from './ProductCard'; +import { + FC, useEffect, useState, +} from 'react'; +import '../../styles/styles.scss'; +import { Product } from '../../types/Product'; +import { ProductCard } from './ProductCard'; + +type Props = { + phones: Product[]; +}; + +const PICTURE_SIZE = 288; // 272px cardsize + 16px gap between product-cards +const VISIBLE_SIZE_ROW = 1136; // 1136px visible length of Home-page; + +export const ProductsSlider: FC
+
+ );
+};
diff --git a/src/pages/components/SearchBar.tsx b/src/pages/components/SearchBar.tsx
new file mode 100644
index 0000000000..793263d9c5
--- /dev/null
+++ b/src/pages/components/SearchBar.tsx
@@ -0,0 +1,60 @@
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import { FC } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useAppDispatch, useAppSelector } from '../../app/hooks';
+import {
+ setSearchingValue, unsetSearchingValue,
+} from '../../features/SearchBar/searchBarSlice';
+import '../../styles/styles.scss';
+import { searchBarSelector } from '../../app/selector';
+
+export const SearchBar: FC = () => {
+ const dispatch = useAppDispatch();
+ const location = useLocation();
+ const searchValue = useAppSelector(searchBarSelector);
+
+ const handleSearchCheange = (
+ event: React.ChangeEvent
+
+
+
+
+ {products.map(product => (
+
+
+
+ ))}
+
+
+
+
+ );
+};
diff --git a/src/styles/blocks/breadcrumb.scss b/src/styles/blocks/breadcrumb.scss
new file mode 100644
index 0000000000..b00fcedcd3
--- /dev/null
+++ b/src/styles/blocks/breadcrumb.scss
@@ -0,0 +1,27 @@
+.breadcrumb {
+ &__breadcrumb-list {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+ list-style: none;
+ padding: 0;
+ }
+}
+
+.breadcrumb-item {
+
+ &__link {
+ height: 16px;
+ display: flex;
+ gap: 8px;
+ align-items: center;
+ text-decoration: none;
+ color: var(--gray-secondary, #89939a);
+ font-family: Mont-SemiBold, Arial, Helvetica, sans-serif;
+ font-size: 12px;
+
+ &::first-letter {
+ text-transform: capitalize;
+ }
+ }
+}
diff --git a/src/styles/blocks/burger-menu.scss b/src/styles/blocks/burger-menu.scss
new file mode 100644
index 0000000000..1aad39c020
--- /dev/null
+++ b/src/styles/blocks/burger-menu.scss
@@ -0,0 +1,68 @@
+.burger-menu {
+ display: none;
+ position: absolute;
+ padding-top: 40px;
+ top: 0;
+ left: 0;
+ z-index: 4;
+ height: 100vh;
+ width: 100%;
+ background-color: #ecececea;
+
+ &__nav-burger {
+ @include width($breakpoint__s);
+ margin: auto;
+ }
+
+ &--active {
+ display: block;
+ }
+}
+
+.hamburger-button {
+ display: none;
+ background-color: transparent;
+ border: 0;
+ padding: 0;
+}
+
+.nav-burger {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+
+ &__logo-containter {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ height: 64px;
+ }
+
+ &__logo {
+ width: 40px;
+ }
+
+ &__burger-menu-button {
+ justify-content: flex-end;
+ margin-left: auto;
+ background-color: transparent;
+ border: 0;
+ }
+ &__link {
+ text-decoration: none;
+ color: var(--gray-secondary, #89939A);
+
+ /* Uppercase */
+ font-family: Mont-Bold;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 22px; /* 91.667% */
+ letter-spacing: 0.48px;
+ text-transform: uppercase;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+}
diff --git a/src/styles/blocks/card-page-media.scss b/src/styles/blocks/card-page-media.scss
new file mode 100644
index 0000000000..0c4e10c701
--- /dev/null
+++ b/src/styles/blocks/card-page-media.scss
@@ -0,0 +1,90 @@
+@include desktop() {
+ .card-page {
+ @include paddingInline($paddingLaptop);
+ width: $breakpoint__l;
+ }
+ .order-content__item-ored {
+ width: 602px;
+ }
+ .order-content__checkout-block {
+ width: 298px;
+ }
+ .checkout-block__checkout-button {
+ width: 90%;
+ }
+}
+@include laptop() {
+ .card-page {
+ @include paddingInline(0);
+ width: $breakpoint__m;
+ }
+ .order-content__item-ored {
+ width: 513px;
+ height: 100px;
+ }
+ .order-content__checkout-block {
+ width: 234px;
+ }
+ .checkout-block__checkout-button {
+ width: 90%;
+ }
+ .item-ored__product-img {
+ margin-left: 15px;
+ }
+ .item-ored__delete-button {
+ margin-left: 15px;
+ }
+ .item-ored__product-name {
+ margin-left: 20px;
+ width: 178px;
+ }
+ .item-ored__price-product {
+ margin-inline: 21px 20px;
+ }
+}
+@include tablet() {
+ .card-page {
+ @include paddingInline(10);
+ @include width($breakpoint__s);
+ }
+ .card-page__order-content {
+ flex-direction: column;
+ }
+ .order-content__item-ored {
+ width: 100%;
+ }
+ .order-content__checkout-block {
+ width: 100%;
+ }
+}
+@include mobile() {
+ .card-page {
+ @include paddingInline(10);
+ @include width($breakpoint__sx);
+ }
+ .order-content__item-ored {
+ flex-direction: column;
+ height: 328px;
+ justify-content: center;
+ gap: 10px;
+ padding-top: 10px;
+ }
+ .item-ored__product-name {
+ margin-left: 49px;
+ }
+ .img-container {
+ flex-direction: row-reverse;
+ gap: 10px;
+ }
+ .item-ored__product-img {
+ margin-top: 30px;
+ width: 100px;
+ height: 100px;
+ }
+ .item-ored__product-name {
+ margin-block: 5px;
+ }
+ .item-ored__price-product {
+ margin-block: 5px;
+ }
+}
diff --git a/src/styles/blocks/cart-page.scss b/src/styles/blocks/cart-page.scss
new file mode 100644
index 0000000000..b952cb57f0
--- /dev/null
+++ b/src/styles/blocks/cart-page.scss
@@ -0,0 +1,165 @@
+.card-page {
+ @include pageMaxWidth;
+ width: 1440px;
+ margin: auto;
+ padding-block: 40px 87px;
+ flex-grow: 1;
+ &__back-link {
+ display: flex;
+ align-items: center;
+ text-decoration: none;
+ color: var(--gray-secondary, #89939a);
+ margin-bottom: 16px;
+
+ /* Small text 12 */
+ font-family: Mont-SemiBold, Arial, Helvetica, sans-serif;
+ font-size: 12px;
+ font-style: normal;
+ line-height: normal;
+ }
+ &__title {
+ margin-bottom: 24px;
+ color: $gray-primary;
+
+ /* H1 */
+ font-family: Mont-Bold, Arial, Helvetica, sans-serif;
+ font-size: 32px;
+ font-style: normal;
+ line-height: normal;
+ letter-spacing: -0.32px;
+ }
+ &__order-content {
+ display: flex;
+ gap: 16px;
+ justify-content: flex-end;
+ }
+}
+
+.order-content {
+ &__list-ored {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ }
+ &__item-ored {
+ display: flex;
+ align-items: center;
+ width: 752px;
+ height: 128px;
+ flex-shrink: 0;
+ margin-bottom: 16px;
+ }
+ &__checkout-block {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 368px;
+ height: 206px;
+ flex-shrink: 0;
+ border: 1px solid $gray-elements;
+ }
+}
+
+.item-ored {
+ border: 1px solid $gray-elements;
+ &__delete-button {
+ background-color: transparent;
+ border: 0;
+ cursor: pointer;
+ margin-left: 31px;
+ }
+ &__product-img {
+ width: 66px;
+ height: 66px;
+ flex-shrink: 0;
+ margin-left: 31px;
+
+ }
+ &__product-name {
+ width: 295px;
+ margin-left: 49px;
+
+ color: $gray-primary;
+
+ /* Body text 14 */
+ font-family: Mont-Regular, Arial, Helvetica, sans-serif;
+ font-size: 14px;
+ font-style: normal;
+ line-height: 21px; /* 150% */
+ }
+ &__product-count-inc,
+ &__product-count-deg {
+ width: 32px;
+ height: 32px;
+ flex-shrink: 0;
+ background-color: #fff;
+ border: 1px solid $gray-elements;
+ cursor: pointer;
+ &:hover {
+ border-color: $gray-primary;
+ }
+ }
+ &__count-value {
+ margin-inline: 13px;
+ }
+ &__price-product {
+ margin-inline: 43px 40px;
+ color: $gray-primary;
+
+ /* H2 */
+ font-family: Mont-Bold, Arial, Helvetica, sans-serif;
+ font-size: 22px;
+ font-style: normal;
+ line-height: 140%; /* 30.8px */
+ }
+}
+
+.count-container {
+ display: flex;
+ align-items: center;
+}
+.img-container {
+ display: flex;
+}
+.checkout-block {
+ &__total-price-amout {
+ margin: 0;
+ margin-top: 24px;
+ color: $gray-primary;
+
+ /* H1 */
+ font-family: Mont-Bold, Arial, Helvetica, sans-serif;
+ font-size: 32px;
+ font-style: normal;
+ line-height: normal;
+ letter-spacing: -0.32px;
+ }
+ &__total-items-amout {
+ box-sizing: border-box;
+ width: 90%;
+ margin: 0;
+ padding-bottom: 24px;
+ margin-bottom: 24px;
+ border-bottom: 1px solid #e2e6e9;
+ color: $gray-secondary;
+ text-align: center;
+
+ /* Body text 14 */
+ font-size: 14px;
+ font-style: normal;
+ line-height: 21px; /* 150% */
+ }
+ &__checkout-button {
+ width: 320px;
+ height: 48px;
+ flex-shrink: 0;
+ bottom: 0;
+ background-color: #313237;
+ color: #fff;
+
+ &:hover {
+ background-color: #fff;
+ color: #313237;
+ }
+ }
+}
diff --git a/src/styles/blocks/custom-select.scss b/src/styles/blocks/custom-select.scss
new file mode 100644
index 0000000000..651c4d126b
--- /dev/null
+++ b/src/styles/blocks/custom-select.scss
@@ -0,0 +1,54 @@
+/* Basic styling for the custom select container */
+.custom-select {
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ width: 176px;
+ height: 40px;
+ padding: 10px 0 9px 12px;
+ flex-shrink: 0;
+ position: relative;
+ border: 1px solid #ccc;
+ cursor: pointer;
+
+ color: $gray-primary;
+
+ font-family: Mont-SemiBold, Arial, Helvetica, sans-serif;
+ font-size: 14px;
+ font-style: normal;
+ line-height: 21px; /* 150% */
+}
+
+.options {
+ box-sizing: border-box;
+ width: 176px;
+
+ display: none;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ margin: 0 4px 0 0;
+ background-color: #fff;
+ border: 1px solid #ccc;
+ list-style: none;
+ padding: 8px 1px;
+
+ &__option {
+ box-sizing: border-box;
+
+ color: #89939a;
+ width: 176px;
+ height: 32px;
+ padding: 6px 0 5px 12px;
+ cursor: pointer;
+
+ &:hover {
+ background-color: #fafbfc;
+ color: #313237;
+ }
+ }
+}
+
+.options--opened {
+ display: block;
+}
diff --git a/src/styles/blocks/favorites-page-media.scss b/src/styles/blocks/favorites-page-media.scss
new file mode 100644
index 0000000000..c5dc703bb3
--- /dev/null
+++ b/src/styles/blocks/favorites-page-media.scss
@@ -0,0 +1,24 @@
+@include desktop() {
+ .favorites-page {
+ @include paddingInline($paddingLaptop);
+ width: $breakpoint__l;
+ }
+}
+@include laptop() {
+ .favorites-page {
+ @include paddingInline(0);
+ width: $breakpoint__m;
+ }
+}
+@include tablet() {
+ .favorites-page {
+ @include paddingInline(10);
+ @include width($breakpoint__s);
+ }
+}
+@include mobile() {
+ .favorites-page {
+ @include paddingInline(10);
+ @include width($breakpoint__sx);
+ }
+}
diff --git a/src/styles/blocks/favorites-page.scss b/src/styles/blocks/favorites-page.scss
new file mode 100644
index 0000000000..fd107b116e
--- /dev/null
+++ b/src/styles/blocks/favorites-page.scss
@@ -0,0 +1,27 @@
+.favorites-page {
+ @include pageMaxWidth;
+ width: 1440px;
+ margin: auto;
+ flex-grow: 1;
+ padding-bottom: 80px;
+ display: flex;
+ flex-direction: column;
+ &__title {
+ margin-block: 40px 8px;
+ color: $gray-primary;
+
+ /* H1 */
+ font-family: Mont-Bold, Arial, Helvetica, sans-serif;
+ font-size: 32px;
+ font-style: normal;
+ line-height: normal;
+ letter-spacing: -0.32px;
+ }
+ &__items-amount {
+ color: $gray-secondary;
+
+ font-size: 14px;
+ font-style: normal;
+ line-height: 21px; /* 150% */
+ }
+}
diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss
new file mode 100644
index 0000000000..6d6bbc0087
--- /dev/null
+++ b/src/styles/blocks/footer.scss
@@ -0,0 +1,54 @@
+.footer {
+ background: #fff;
+ box-shadow: 0 -1px 0 0 #e2e6e9;
+ &__content {
+ display: flex;
+ @include pageMaxWidth;
+ display: flex;
+ height: 96px;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ &__link {
+ text-decoration: none;
+ color: $gray-secondary;
+
+ font-family: Mont-Bold, Arial, Helvetica, sans-serif;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 11px; /* 91.667% */
+ letter-spacing: 0.48px;
+ text-transform: uppercase;
+ }
+ &__container {
+ display: flex;
+ gap: 64px;
+ }
+ &__backtotop-button {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 32px;
+ height: 32px;
+ background-color: #fff;
+ border: 1px solid #b4bdc3;
+ cursor: pointer;
+ &::before {
+ content: "Back to top";
+ position: absolute;
+ width: max-content;
+ right: 48px;
+
+ color: $gray-secondary;
+
+ /* Small text 12 */
+ font-family: Mont-SemiBold, Arial, Helvetica, sans-serif;
+ font-size: 12px;
+ font-style: normal;
+ line-height: normal;
+ }
+ }
+}
diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss
new file mode 100644
index 0000000000..ac39ef7159
--- /dev/null
+++ b/src/styles/blocks/header.scss
@@ -0,0 +1,90 @@
+.header {
+ background: $gray-white;
+ box-shadow: 0 1px 0 0 #d2e6e9;
+ &__content {
+ @include pageMaxWidth;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ text-transform: uppercase;
+ height: 64px;
+ margin: auto;
+ }
+
+ &__favorites-card-buttons {
+ display: flex;
+ }
+}
+
+.nav {
+ display: flex;
+ gap: 64px;
+
+ &__link {
+ display: inline-block;
+ height: 100%;
+ padding-block: 27px 24px;
+ text-decoration: none;
+ font-family: Mont-Bold, Arial, Helvetica, sans-serif;
+ font-size: 12px;
+ line-height: 11px;
+ letter-spacing: 0.04em;
+
+ color: #89939a;
+ &--active {
+ color: $gray-primary;
+ border-bottom: 3px solid $gray-primary;
+ }
+ }
+ &__burger-menu-button {
+ opacity: 1;
+ &--is-active {
+ opacity: 0;
+ }
+ }
+}
+
+.favorites-card-buttons {
+ &__link {
+ width: 64px;
+ height: 64px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ background: $gray-white;
+ box-shadow: -1px 0 0 0 #e2e6e9;
+ border-right: 1px solid #e2e6e9;
+ &--active {
+ color: $gray-primary;
+ border-bottom: 3px solid $gray-primary;
+ }
+ position: relative;
+ }
+ &__icon {
+ width: 16px;
+ height: 16px;
+ }
+ &__amount-of-products {
+ position: absolute;
+ display: flex;
+ box-sizing: border-box;
+ align-items: center;
+ justify-content: center;
+ z-index: 3;
+ background-color: #eb5757;
+ width: 15px;
+ height: 15px;
+ border-radius: 50%;
+ border: 1px solid #fff;
+ text-decoration: none;
+ color: $gray-white;
+ text-align: center;
+ font-family: Mont-SemiBold, Arial, Helvetica, sans-serif;
+ font-size: 9px;
+ font-style: normal;
+ line-height: normal;
+ left: 33px;
+ top: 18px;
+ }
+}
diff --git a/src/styles/blocks/home-page-media.scss b/src/styles/blocks/home-page-media.scss
new file mode 100644
index 0000000000..26fa39e1cd
--- /dev/null
+++ b/src/styles/blocks/home-page-media.scss
@@ -0,0 +1,178 @@
+@include desktop() {
+ .header__content {
+ @include paddingInline($paddingLaptop);
+ @include width($breakpoint__l);
+ }
+ .nav {
+ gap: 32px;
+ }
+ .home-page {
+ @include paddingInline($paddingLaptop);
+ @include width($breakpoint__l);
+ }
+ .preview-slider {
+ height: 319px;
+ &__container {
+ @include paddingInline(0);
+ @include width($breakpoint__l)
+ }
+ }
+ .pictures__picture {
+ height: 319px;
+ }
+ .products-slider__container-buttons {
+ left: 843px;
+ }
+ .category__img {
+ width: 296px;
+ }
+ .footer__content {
+ @include paddingInline($paddingLaptop);
+ @include width($breakpoint__l);
+ }
+}
+
+@include laptop() {
+ .header__content {
+ @include paddingInline(0);
+ @include width($breakpoint__m);
+ }
+ .home-page {
+ @include paddingInline(0);
+ @include width($breakpoint__m);
+ }
+ .preview-slider {
+ height: 260px;
+ &__container {
+ @include paddingInline(0);
+ @include width($breakpoint__m)
+ }
+ }
+ .pictures__picture {
+ height: 260px;
+ }
+ .products-slider__container-buttons {
+ left: 687px;
+ }
+ .category__img {
+ width: 245px;
+ }
+ .footer__content {
+ @include paddingInline(0);
+ @include width($breakpoint__m);
+ }
+}
+
+@include tablet() {
+ .header {
+ &__content {
+ @include paddingInline(10);
+ @include width($breakpoint__s);
+ }
+ &__nav {
+ display: none;
+ }
+ }
+ .home-page {
+ @include paddingInline(10);
+ @include width($breakpoint__s);
+ }
+ .preview-slider {
+ height: 187px;
+ &__container {
+ @include paddingInline(10);
+ @include width($breakpoint__s)
+ }
+ }
+ .pictures__picture {
+ height: 187px;
+ }
+ .products-slider__container-products {
+ gap: 8px;
+
+ }
+ .product-card {
+ width: 280px;
+ }
+ .products-slider__container-buttons {
+ left: 497px;
+ }
+ .category__img {
+ width: 175px;
+ }
+ .footer__content {
+ @include width($breakpoint__s);
+ margin: auto;
+ }
+ .hamburger-button {
+ display: block;
+ }
+}
+
+@include mobile() {
+ .header {
+ &__content {
+ @include paddingInline(10);
+ @include width($breakpoint__sx);
+ }
+ &__nav {
+ display: none;
+ }
+ }
+ .home-page {
+ @include paddingInline(10);
+ @include width($breakpoint__sx);
+ }
+ .preview-slider {
+ height: 127px;
+ &__container {
+ @include paddingInline(10);
+ @include width($breakpoint__sx)
+ }
+ }
+ .pictures__picture {
+ height: 127px;
+ }
+ .products-slider__container-products {
+ gap: 8px;
+ }
+ .product-card {
+ width: 280px;
+ }
+ .products-slider__container-buttons {
+ left: 221px;
+ }
+ .shop-by-category__container {
+ flex-direction: column;
+ }
+ .category__img {
+ width: 100%;
+ }
+ .brand-new__title {
+ width: 190px;
+ }
+ .footer {
+ @include paddingInline(10);
+ padding-block: 30px;
+ display: flex;
+ justify-content: center;
+ padding-inline: 0;
+ margin: 0;
+ &__content {
+ @include width($breakpoint__sx);
+ display: flex;
+ flex-direction: column;
+ margin: auto;
+ }
+ &__container {
+ gap: 45px;
+ }
+ .footer__backtotop-button {
+ width: 40px;
+ }
+ }
+ .burger-menu__nav-burger {
+ @include paddingInline(10);
+ @include width($breakpoint__sx);
+ }
+}
diff --git a/src/styles/blocks/home-page.scss b/src/styles/blocks/home-page.scss
new file mode 100644
index 0000000000..61d74935bd
--- /dev/null
+++ b/src/styles/blocks/home-page.scss
@@ -0,0 +1,110 @@
+.home-page {
+ @include pageMaxWidth;
+ &__preview-slider {
+ margin-bottom: 72px;
+ }
+ &__hot-prices {
+ margin-bottom: 80px;
+ }
+ &__shop-by-category {
+ margin-bottom: 80px;
+ }
+
+ &__brand-new {
+ margin-bottom: 80px;
+ }
+}
+
+.preview-slider {
+ display: flex;
+ gap: 16px;
+ margin-top: 40px;
+ height: 400px;
+
+ &__button {
+ width: 32px;
+ background: $gray-white;
+ border: 1px solid #b4bdc3;
+ cursor: pointer;
+ }
+
+ &__pictures {
+ width: 100%;
+ background-color: #808080;
+ }
+ &__container {
+ width: 1040px;
+ }
+}
+
+.pictures {
+ display: flex;
+ overflow: hidden;
+ &__picture {
+ width: 100%;
+ object-fit: fill;
+ }
+}
+
+.pagination {
+ text-align: center;
+ &__indicator {
+ cursor: pointer;
+ width: 15px;
+ height: 5px;
+ background-color: #b4bdc3;
+ border: #b4bdc3;
+ margin-inline: 5px;
+
+ &--active {
+ background-color: black;
+ }
+ }
+}
+
+.hot-prices {
+ &__title {
+ font-family: Mont-Bold, Arial, Helvetica, sans-serif;
+ }
+}
+
+.shop-by-category {
+ &__title {
+ font-family: Mont-Bold, Arial, Helvetica, sans-serif;
+ }
+ &__container {
+ display: flex;
+ gap: 16px;
+ }
+}
+
+.category {
+ &__link {
+ display: inline-block;
+ box-sizing: border-box;
+ height: fit-content;
+ margin-bottom: 24px;
+ }
+ &__title {
+ margin: 0;
+
+ font-family: Mont-SemiBold, Arial, Helvetica, sans-serif;
+ color: $gray-primary;
+
+ /* H3 */
+ font-size: 20px;
+ line-height: normal;
+ }
+ &__description {
+ margin: 0;
+ color: $gray-secondary;
+
+ /* Body text 14 */
+ font-size: 14px;
+ line-height: 21px; /* 150% */
+ }
+}
+
+.brand-new {
+ font-family: Mont-Bold, Arial, Helvetica, sans-serif;
+}
diff --git a/src/styles/blocks/info-messages.scss b/src/styles/blocks/info-messages.scss
new file mode 100644
index 0000000000..38ee3b41bd
--- /dev/null
+++ b/src/styles/blocks/info-messages.scss
@@ -0,0 +1,4 @@
+.info-messages {
+ font-family: Mont-Regular;
+ font-size: 21px;
+}
diff --git a/src/styles/blocks/pagination.scss b/src/styles/blocks/pagination.scss
new file mode 100644
index 0000000000..b0e6f1d251
--- /dev/null
+++ b/src/styles/blocks/pagination.scss
@@ -0,0 +1,26 @@
+.pagination {
+ display: flex;
+ gap: 8px;
+ justify-content: center;
+ margin-top: 18px;
+ list-style: none;
+ padding: 0;
+ &__items {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-sizing: border-box;
+ width: 32px;
+ height: 32px;
+ flex-shrink: 0;
+ border: 1px solid #e2e6e9;
+ cursor: pointer;
+ &:hover {
+ border: 1px solid $gray-primary;
+ }
+ &--isActive {
+ color: #fff;
+ background-color: #313237;
+ }
+ }
+}
diff --git a/src/styles/blocks/phones-page-media.scss b/src/styles/blocks/phones-page-media.scss
new file mode 100644
index 0000000000..58fd675abc
--- /dev/null
+++ b/src/styles/blocks/phones-page-media.scss
@@ -0,0 +1,93 @@
+@include desktop() {
+ .phones-page {
+ @include paddingInline($paddingLaptop);
+ @include width($breakpoint__l);
+ }
+ .search-bar {
+ width: 268px;
+ &__clear-button {
+ left: 231px;
+ }
+ }
+ .pagination {
+ @include width($breakpoint__l);
+ }
+ .products-list {
+ grid-template-columns: repeat(3, 1fr);
+ }
+ .product-card {
+ justify-content: center;
+ width: 100%;
+ }
+}
+
+@include laptop() {
+ .phones-page {
+ @include paddingInline(0);
+ width: $breakpoint__m;
+ }
+ .search-bar {
+ width: 188px;
+ &__clear-button {
+ left: 159px;
+ }
+ &__search-bar-input {
+ padding-left: 12px;
+ }
+ }
+ .pagination {
+ @include width($breakpoint__s);
+ gap: 9px;
+ }
+ .products-list {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+@include tablet() {
+ .phones-page {
+ @include paddingInline(10);
+ @include width($breakpoint__s);
+ }
+ .search-bar {
+ width: 268px;
+ &__clear-button {
+ left: 231px;
+ }
+ &__search-bar-input {
+ padding-left: 24px;
+ }
+ }
+ .product-card {
+ padding-inline: 27px;
+ }
+}
+
+@include mobile() {
+ .phones-page {
+ @include paddingInline(10);
+ @include width($breakpoint__sx);
+ }
+ .search-bar {
+ width: 178px;
+ &__clear-button {
+ left: 149px;
+ }
+ &__search-bar-input {
+ padding-left: 12px;
+ font-size: 12px;
+ }
+ }
+ .custom-select {
+ width: 132px;
+ }
+ .favorites-card-buttons__link {
+ width: 43px;
+ }
+ .favorites-card-buttons__amount-of-products {
+ left: 23px;
+ }
+ .products-list {
+ grid-template-columns: 1fr;
+ }
+}
diff --git a/src/styles/blocks/phones-page.scss b/src/styles/blocks/phones-page.scss
new file mode 100644
index 0000000000..b0d99fb632
--- /dev/null
+++ b/src/styles/blocks/phones-page.scss
@@ -0,0 +1,70 @@
+.phones-page {
+ @include pageMaxWidth;
+ flex-grow: 1;
+ box-sizing: border-box;
+ margin: auto;
+ margin-bottom: 80px;
+ &__title {
+ margin: 0;
+ margin-bottom: 8px;
+ color: $gray-primary;
+
+ /* H1 */
+ font-family: Mont-Bold, Arial, Helvetica, sans-serif;
+ font-size: 32px;
+ line-height: normal;
+ letter-spacing: -0.32px;
+ }
+ &__amount-phone-text {
+ margin: 0;
+ margin-bottom: 40px;
+ color: $gray-secondary;
+
+ /* Body text 14 */
+ font-size: 14px;
+ line-height: 21px; /* 150% */
+ }
+
+ &__result-items {
+ margin-block: 24px;
+ color: $gray-secondary;
+
+ /* Body text 14 */
+ font-size: 14px;
+ font-style: normal;
+ line-height: 21px; /* 150% */
+ }
+}
+
+.filter {
+ display: flex;
+ gap: 16px;
+ &__title {
+ margin: 0;
+ margin-bottom: 4px;
+ color: $gray-secondary;
+
+ /* Small text 12 */
+ font-family: Mont-SemiBold, Arial, Helvetica, sans-serif;
+ font-size: 12px;
+ font-style: normal;
+ line-height: normal;
+ }
+ &__selector {
+ width: 174px;
+ height: 40px;
+ flex-shrink: 0;
+ padding: 10px 12px 9px;
+ font-family: Mont-Regular, Arial, Helvetica, sans-serif;
+ border: 1px solid #b4bdc3;
+
+ &--items {
+ padding: 10px 12px 9px;
+ height: 40px;
+
+ &:hover {
+ background-color: $gray-background;
+ }
+ }
+ }
+}
diff --git a/src/styles/blocks/pop-up.scss b/src/styles/blocks/pop-up.scss
new file mode 100644
index 0000000000..8f822b6c0c
--- /dev/null
+++ b/src/styles/blocks/pop-up.scss
@@ -0,0 +1,42 @@
+.pop-up {
+ position: absolute;
+ z-index: 2;
+ width: 100vw;
+ height: 100vh;
+ background-color: #ffffff80;
+ top: 0;
+ left: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.content-pop-up {
+ display: flex;
+ background-color: #ffffffe2;
+ height: 150px;
+ border: 1px solid #eb5757;
+ padding-left: 20px;
+ &__title-message {
+ display: flex;
+ align-items: center;
+ color: $gray-secondary;
+ font-family: Mont-SemiBold;
+ font-size: 20px;
+ margin-right: 10px;
+ }
+ &__close-button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: transparent;
+ height: 28px;
+ border: 0;
+ &:hover {
+ background-color: #fff;
+ }
+ }
+ &:hover {
+ border-color:#27ae60;
+ }
+}
diff --git a/src/styles/blocks/product-card.scss b/src/styles/blocks/product-card.scss
new file mode 100644
index 0000000000..8b81ce4905
--- /dev/null
+++ b/src/styles/blocks/product-card.scss
@@ -0,0 +1,122 @@
+.product-card {
+ display: grid;
+ justify-content: center;
+ box-sizing: border-box;
+ width: 272px;
+ height: 507px;
+ border: 1px solid $gray-elements;
+ background: $gray-white;
+ padding: 32px 32px 24px;
+
+ &__link {
+ text-decoration: none;
+ color: $gray-primary;
+ }
+
+ &__phone-img {
+ box-sizing: border-box;
+ width: 208px;
+ height: 208px;
+ padding-inline: 12px;
+ margin-bottom: 24px;
+ }
+
+ &__title {
+ display: block;
+ min-height: 42px;
+ margin: 0;
+ margin-bottom: 8px;
+ font-family: Mont-Regular, Arial, Helvetica, sans-serif;
+ color: $gray-primary;
+
+ font-size: 14px;
+ line-height: 21px; /* 150% */
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+
+ &__price {
+ display: inline-block;
+ margin: 0;
+ color: $gray-primary;
+ margin-right: 8px;
+
+ /* H2 */
+ font-family: Mont-Bold, Arial, Helvetica, sans-serif;
+ font-size: 22px;
+ line-height: 140%; /* 30.8px */
+
+ &--discount {
+ color: $gray-secondary;
+ font-family: Mont-SemiBold, Arial, Helvetica, sans-serif;
+ line-height: normal;
+ text-decoration-line: line-through;
+ }
+ }
+
+ &__container {
+ display: flex;
+ gap: 8px;
+ }
+
+ &__add-to-card {
+ box-sizing: border-box;
+ width: 176px;
+ height: 40px;
+ background-color: #313237;
+
+ color: $gray-white;
+ font-family: Mont-SemiBold, Arial, Helvetica, sans-serif;
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 21px; /* 150% */
+ cursor: pointer;
+
+ &--is-added {
+ color: #27ae60;
+ background-color: #e2e6e9;
+ border: 1px solid $gray-elements;
+ }
+ &:hover {
+ box-shadow: 0 3px 13px 0 rgba(23, 32, 49, 0.26);
+ }
+ }
+
+ &__add-to-favorites {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ box-sizing: border-box;
+ gap: 8px;
+ width: 40px;
+ height: 40px;
+ border: 1px solid $gray-icons-placeholders;
+ background-color: #fff;
+
+ cursor: pointer;
+ &:hover {
+ border-color: #313237;
+ }
+ }
+}
+
+.description-phone {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ border-top: 1px solid #e2e6e9;
+ margin-block: 8px 16px;
+ padding-top: 16px;
+
+ font-family: Mont-SemiBold, Arial, Helvetica, sans-serif;
+ font-size: 12px;
+
+ &--title {
+ color: $gray-secondary;
+ }
+}
+
+.add-to-favorites__icon {
+ width: 16px;
+ height: 16px;
+}
diff --git a/src/styles/blocks/product-details-page-media.scss b/src/styles/blocks/product-details-page-media.scss
new file mode 100644
index 0000000000..a758a7ba16
--- /dev/null
+++ b/src/styles/blocks/product-details-page-media.scss
@@ -0,0 +1,183 @@
+@include desktop() {
+ .product-details-page {
+ @include paddingInline($paddingLaptop);
+ width: $breakpoint__l;
+ }
+ .big-img-container {
+ margin-inline: 15px 27px;
+ }
+}
+@include laptop() {
+ .product-details-page {
+ @include paddingInline(0);
+ width: $breakpoint__m;
+ }
+ .product-details-page__product-section {
+ margin-bottom: 70px;
+ }
+ .big-img-container {
+ width: 337px;
+ margin: 0;
+ &__big-img {
+ height: 407px;
+ }
+ }
+ .choose-section__colors-picker {
+ padding-bottom: 12px;
+ }
+ .capasity-picker {
+ padding-bottom: 12px;
+ }
+ .prices-amount {
+ margin-block: 22px 12px;
+ }
+ .buttons-buy-like {
+ gap: 5%;
+ }
+ .product-details-page__product-articles {
+ margin-bottom: 70px;
+ }
+}
+@include tablet() {
+ .product-details-page {
+ @include paddingInline(10);
+ @include width($breakpoint__s);
+ }
+ .product-details-page__title {
+ font-size: 27px;
+ }
+ .product-details-page__product-section {
+ margin-bottom: 40px;
+ }
+ .big-img-container {
+ width: 274px;
+ margin: 0;
+ &__big-img {
+ height: 345px;
+ }
+ }
+ .choose-section {
+ width: 200px;
+ }
+ .capasity-picker__items {
+ width: 60px;
+ }
+ .buttons-buy-like__add-to-card {
+ width: 143px;
+ }
+ .product-details-page__product-articles {
+ margin-bottom: 40px;
+ }
+ .tech-specs__tech-specs-list {
+ grid-template-columns: 85px 170px;
+ }
+}
+@include mobile() {
+ .product-details-page {
+ @include paddingInline(10);
+ @include width($breakpoint__sx);
+ }
+ .breadcrumb-item__link {
+ gap: 4px;
+ font-size: 9px;
+ }
+ .product-details-page__title {
+ font-size: 15px;
+ }
+ .product-details-page__product-section {
+ margin-bottom: 0;
+ }
+ .big-img-container {
+ width: 150px;
+ margin: 0;
+ &__big-img {
+ height: 193px;
+ }
+ }
+ .small-img-container__img {
+ width: 40px;
+ height: 40px;
+
+ }
+ .gallery {
+ flex-direction: column;
+ }
+ .gallery__small-img-container {
+ flex-direction: row;
+ gap: 0;
+ flex-wrap: wrap;
+ }
+ .colors-picker__list {
+ gap: 4px;
+ }
+ .items-colors {
+ width: 25px;
+ height: 25px;
+ }
+ .items-colors__color {
+ width: 23px;
+ height: 23px;
+ }
+ .capasity-picker__items {
+ width: 35px;
+ font-size: 9px;
+
+ }
+ .choose-section {
+ width: 127px;
+ }
+ .buy-buttons__prices-amount {
+ gap: 6px;
+ }
+ .prices-amount {
+ margin-block: 12px 10px;
+ }
+ .prices-amount__price {
+ font-size: 22px;
+ }
+ .buttons-buy-like__add-to-card {
+ width: 80px;
+ height: 35px;
+ font-size: 10px;
+ }
+ .buttons-buy-like__add-to-favorites {
+ height: 35px;
+ width: 35px;
+ }
+ .description-product {
+ grid-template-columns: 27px 80px;
+ font-size: 8px;
+ gap: 4px;
+ }
+ .product-articles {
+ flex-direction: column;
+ gap: 30px;
+ }
+ .product-articles__article-about {
+ width: 300px;
+ }
+ .article-about__title {
+ font-size: 15px;
+ margin-block: 12px;
+ }
+ .article-about__sub-title {
+ margin-block: 12px 5px;
+ font-size: 13px;
+ }
+ .article-about__text {
+ margin-block: 4px;
+ font-size: 10px;
+ }
+ .tech-specs {
+ width: 300px;
+ &__tech-specs-list {
+ grid-template-columns: 100px 200px;
+ }
+ &__title {
+ font-size: 15px;
+ }
+ }
+ .you-may-like__title {
+ font-size: 15px;
+ }
+}
diff --git a/src/styles/blocks/product-details-page.scss b/src/styles/blocks/product-details-page.scss
new file mode 100644
index 0000000000..1f148326a8
--- /dev/null
+++ b/src/styles/blocks/product-details-page.scss
@@ -0,0 +1,375 @@
+.product-details-page {
+ @include pageMaxWidth;
+ &__link-move-back {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ text-decoration: none;
+ color: $gray-secondary;
+
+ /* Small text 12 */
+ font-family: Mont-SemiBold, Arial, Helvetica, sans-serif;
+ font-size: 12px;
+ font-style: normal;
+ line-height: normal;
+ }
+
+ &__title {
+ color: $gray-primary;
+
+ font-family: Mont-Bold, Arial, Helvetica, sans-serif;
+ font-size: 32px;
+ font-style: normal;
+ line-height: normal;
+ letter-spacing: -0.32px;
+ }
+
+ &__product-section {
+ margin-bottom: 80px;
+ }
+ &__product-articles {
+ margin-bottom: 80px;
+ }
+ &__you-may-like {
+ margin-bottom: 80px;
+ }
+}
+
+.link-move-back__arrow {
+ width: 16px;
+ height: 16px;
+ flex-shrink: 0;
+}
+
+.product-section {
+ display: flex;
+}
+
+.choose-section {
+ &__colors-picker {
+ padding-bottom: 24px;
+ border-bottom: 1px solid #e2e6e9;
+ }
+}
+
+.gallery {
+ display: flex;
+ &__small-img-container {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ cursor: pointer;
+ }
+}
+
+.small-img-container {
+ &__img {
+ box-sizing: border-box;
+ width: 80px;
+ height: 80px;
+ flex-shrink: 0;
+ padding-inline: 10px;
+ }
+}
+
+.big-img-container {
+ display: flex;
+ justify-content: center;
+ padding: 11px;
+ margin-inline: 28px 75px;
+ width: 442px;
+
+ &__big-img {
+ height: 442px;
+ flex-shrink: 0;
+ }
+}
+
+.colors-picker {
+ &__title {
+ color: $gray-secondary;
+
+ /* Small text 12 */
+ font-family: Mont-SemiBold, Arial, Helvetica, sans-serif;
+ font-size: 12px;
+ font-style: normal;
+ line-height: normal;
+ }
+ &__items-colors {
+ list-style: none;
+ padding: 0;
+ }
+ &__list {
+ display: flex;
+ flex-wrap: wrap;
+ padding: 0;
+ gap: 8px;
+ margin: 0;
+ }
+}
+
+.items-colors {
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 100%;
+ width: 32px;
+ height: 32px;
+ padding: 0;
+ margin: 0;
+ background-color: #e2e6e9;
+ &:hover {
+ background-color: #313237;
+ }
+
+ &__color {
+ display: flex;
+ box-sizing: border-box;
+ justify-self: center;
+ align-items: center;
+ width: 29px;
+ height: 29px;
+ flex-shrink: 0;
+ border-radius: 50%;
+ margin: 0;
+ border: 2px solid #fff;
+
+ &--active {
+ transform: scale(1.1);
+ border-color: #313237;
+ }
+ }
+}
+
+.capasity-picker {
+ padding-bottom: 24px;
+ border-bottom: 1px solid #e2e6e9;
+ &__title {
+ color: $gray-secondary;
+
+ /* Small text 12 */
+ font-family: Mont-SemiBold, Arial, Helvetica, sans-serif;
+ font-size: 12px;
+ font-style: normal;
+ line-height: normal;
+ }
+ &__list {
+ display: flex;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ gap: 8px;
+ }
+ &__items {
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 63px;
+ height: 32px;
+ flex-shrink: 0;
+ border: 1px solid $gray-icons-placeholders;
+ &:hover {
+ border-color: $gray-primary;
+ }
+ &--active {
+ background-color: $gray-primary;
+ color: #fff;
+ }
+ }
+}
+
+.buy-buttons {
+ &__prices-amount {
+ display: flex;
+ gap: 8px;
+ }
+}
+
+.prices-amount {
+ display: flex;
+ align-items: center;
+ margin-block: 32px 16px;
+ &__price {
+ margin: 0;
+ color: $gray-primary;
+
+ /* H1 */
+ font-family: Mont-Bold, Arial, Helvetica, sans-serif;
+ font-size: 32px;
+ font-style: normal;
+ line-height: normal;
+ letter-spacing: -0.32px;
+ &--discount {
+ color: $gray-secondary;
+ font-family: Mont-Regular, Arial, Helvetica, sans-serif;
+ font-size: 22px;
+ font-style: normal;
+ line-height: normal;
+ text-decoration: line-through;
+ }
+ }
+}
+
+.buttons-buy-like {
+ display: flex;
+ gap: 8%;
+ &__add-to-card {
+ width: 263px;
+ height: 48px;
+ flex-shrink: 0;
+ background-color: $gray-primary;
+ color: $gray-white;
+ text-align: center;
+ font-family: Mont-SemiBold, Arial, Helvetica, sans-serif;
+ font-size: 14px;
+ font-style: normal;
+ line-height: 21px; /* 150% */
+ cursor: pointer;
+ &--is-added {
+ color: #27ae60;
+ background-color: #e2e6e9;
+ border: 1px solid $gray-elements;
+ }
+ &:hover {
+ box-shadow: 0 3px 13px 0 rgba(23, 32, 49, 0.26);
+ }
+ }
+ &__add-to-favorites {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 48px;
+ height: 48px;
+ flex-shrink: 0;
+ background-color: #fff;
+ border: 1px solid #b4bdc3;
+ cursor: pointer;
+ &:hover {
+ border-color: #313237;
+ }
+ }
+}
+
+.details-product {
+ &__description-product {
+ margin-top: 32px;
+ }
+}
+
+.description-product {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ margin-block: 8px 16px;
+ padding-top: 16px;
+ row-gap: 8px;
+
+ /* Small text 12 */
+ font-family: Mont-SemiBold, Arial, Helvetica, sans-serif;
+ font-size: 12px;
+
+ &--title {
+ color: $gray-secondary;
+
+ }
+}
+
+.product-articles {
+ display: flex;
+ gap: 64px;
+ &__article-about {
+ width: 559px;
+ }
+}
+
+.article-about {
+ &__title {
+ padding-bottom: 6px;
+ border-bottom: 1px solid #e2e6e9;
+ color: $gray-primary;
+ margin-bottom: 32px;
+
+ /* H2 */
+ font-family: Mont-Bold, Arial, Helvetica, sans-serif;
+ font-size: 22px;
+ font-style: normal;
+ line-height: 140%; /* 30.8px */
+ }
+ &__sub-title {
+ color: $gray-primary;
+ margin-block: 32px 16px;
+
+ /* H3 */
+ font-family: Mont-SemiBold, Arial, Helvetica, sans-serif;
+ font-size: 20px;
+ font-style: normal;
+ line-height: normal;
+ }
+ &__text {
+ color: #89939a;
+
+ /* Body text 14 */
+ font-family: Mont-Regular, Arial, Helvetica, sans-serif;
+ font-size: 14px;
+ font-style: normal;
+ line-height: 21px; /* 150% */
+ }
+}
+
+.tech-specs {
+ width: 512px;
+ &__title {
+ padding-bottom: 6px;
+ border-bottom: 1px solid #e2e6e9;
+ color: $gray-primary;
+ margin-bottom: 32px;
+
+ /* H2 */
+ font-family: Mont-Bold, Arial, Helvetica, sans-serif;
+ font-size: 22px;
+ font-style: normal;
+ line-height: 140%; /* 30.8px */
+ }
+ &__tech-specs-list {
+ display: grid;
+ grid-template-columns: 1fr 2fr;
+ row-gap: 8px;
+ }
+}
+
+.tech-specs-list {
+ &--title {
+ color: $gray-secondary;
+
+ /* Body text 14 */
+ font-family: Mont-Regular, Arial, Helvetica, sans-serif;
+ font-size: 14px;
+ font-style: normal;
+ line-height: 21px; /* 150% */
+ }
+ &--value {
+ text-align: end;
+ display: flex;
+ justify-content: end;
+ flex-wrap: wrap;
+ font-size: 14px;
+ &-cell {
+ margin: 1px;
+ font-size: 14px;
+ }
+ }
+}
+
+.you-may-like {
+ &__title {
+ color: $gray-primary;
+
+ /* H1 */
+ font-family: Mont-Bold, Arial, Helvetica, sans-serif;
+ font-size: 32px;
+ font-style: normal;
+ line-height: normal;
+ letter-spacing: -0.32px;
+ }
+}
diff --git a/src/styles/blocks/products-list.scss b/src/styles/blocks/products-list.scss
new file mode 100644
index 0000000000..5ac499e4b6
--- /dev/null
+++ b/src/styles/blocks/products-list.scss
@@ -0,0 +1,12 @@
+.products-list {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ max-width: 1136px;
+
+ gap: 16px;
+ padding: 0;
+
+ &__item {
+ list-style: none;
+ }
+}
diff --git a/src/styles/blocks/products-slider.scss b/src/styles/blocks/products-slider.scss
new file mode 100644
index 0000000000..9c6e4cd338
--- /dev/null
+++ b/src/styles/blocks/products-slider.scss
@@ -0,0 +1,30 @@
+.products-slider {
+ // display: flex;
+ position: relative;
+
+ &__container-buttons {
+ display: flex;
+ gap: 16px;
+ position: absolute;
+ top: -60px;
+ left: 1054px;
+ z-index: 2;
+ }
+ &__buttons {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ border: 1px solid #e2e6e9;
+ background-color: #fff;
+ padding: 0;
+ cursor: pointer;
+ }
+ &__container-products {
+ display: flex;
+ overflow: hidden;
+ width: 100%;
+ gap: 16px;
+ }
+}
diff --git a/src/styles/blocks/search-bar.scss b/src/styles/blocks/search-bar.scss
new file mode 100644
index 0000000000..ecb31d61e2
--- /dev/null
+++ b/src/styles/blocks/search-bar.scss
@@ -0,0 +1,38 @@
+.search-bar {
+ position: relative;
+ box-sizing: border-box;
+ width: 327px;
+ height: 64px;
+
+ flex-shrink: 0;
+ &__search-bar-input {
+ box-sizing: border-box;
+ padding-left: 24px;
+ height: 64px;
+ width: 99%;
+ border: 0;
+ background-color: $gray-white;
+ box-shadow: -1px 0 0 0 #e2e6e9;
+
+ color: $gray-icons-placeholders;
+ font-family: Mont-SemiBold, Arial, Helvetica, sans-serif;
+ font-size: 14px;
+ font-style: normal;
+ line-height: normal;
+
+ &:focus {
+ color: $gray-primary;
+ background-color: $gray-background;
+ box-shadow: -1px 0 0 0 #e2e6e9;
+ outline: 0;
+ }
+ }
+ &__clear-button {
+ cursor: pointer;
+ background-color: transparent;
+ border: 0;
+ position: absolute;
+ top: 24px;
+ left: 287px;
+ }
+}
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
new file mode 100644
index 0000000000..5e122456ab
--- /dev/null
+++ b/src/styles/styles.scss
@@ -0,0 +1,26 @@
+@import "./utils/mixins";
+@import "./utils/media_breakpoints.scss";
+
+@import "./blocks/breadcrumb";
+@import "./blocks/header";
+@import "./blocks/home-page";
+@import "./blocks/phones-page";
+@import "./blocks/product-card";
+@import "./blocks/product-details-page";
+@import "./blocks/products-list";
+@import "./blocks/products-slider";
+@import "./blocks/footer";
+@import "./blocks/custom-select";
+@import "./blocks/pagination";
+@import "./blocks/favorites-page";
+@import "./blocks/search-bar";
+@import "./blocks/cart-page";
+@import "./blocks/info-messages";
+@import "./blocks/pop-up";
+@import "./blocks/burger-menu";
+
+@import "./blocks/home-page-media";
+@import "./blocks/phones-page-media";
+@import "./blocks/favorites-page-media";
+@import "./blocks/card-page-media";
+@import "./blocks/product-details-page-media";
diff --git a/src/styles/utils/media_breakpoints.scss b/src/styles/utils/media_breakpoints.scss
new file mode 100644
index 0000000000..d508735e09
--- /dev/null
+++ b/src/styles/utils/media_breakpoints.scss
@@ -0,0 +1,23 @@
+@mixin desktop() {
+ @media (max-width: $breakpoint__xl) {
+ @content;
+ }
+}
+
+@mixin laptop() {
+ @media (max-width: $breakpoint__l) {
+ @content;
+ }
+}
+
+@mixin tablet() {
+ @media (max-width: $breakpoint__m) {
+ @content;
+ }
+}
+
+@mixin mobile() {
+ @media (max-width: $breakpoint__s) {
+ @content;
+ }
+}
diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss
new file mode 100644
index 0000000000..5eb90f3ffb
--- /dev/null
+++ b/src/styles/utils/mixins.scss
@@ -0,0 +1,31 @@
+@mixin pageMaxWidth() {
+ max-width: 1440px;
+ box-sizing: border-box;
+ padding-inline: 152px;
+ margin: auto;
+}
+
+@mixin paddingInline($value) {
+ padding-inline: $value;
+}
+@mixin width($value) {
+ max-width: $value;
+}
+@mixin hight($value) {
+ height: $value;
+}
+
+$gray-elements: #e2e6e9;
+$gray-primary: #313237;
+$gray-secondary: #89939a;
+$gray-white: #fff;
+$gray-background: #fafbfc;
+$gray-icons-placeholders: #b4bdc3;
+
+$breakpoint__xl: 1400px;
+$breakpoint__l: 1024px;
+$breakpoint__m: 767px;
+$breakpoint__s: 576px;
+$breakpoint__sx: 300px;
+
+$paddingLaptop: 52px;
diff --git a/src/types/AsyncStatus.ts b/src/types/AsyncStatus.ts
new file mode 100644
index 0000000000..bc6d40f47d
--- /dev/null
+++ b/src/types/AsyncStatus.ts
@@ -0,0 +1,5 @@
+export enum AsyncStatus {
+ IDLE = 'idle',
+ LOADING = 'loading',
+ FAILED = 'failed',
+}
diff --git a/src/types/KeyJson.ts b/src/types/KeyJson.ts
new file mode 100644
index 0000000000..ae482482dc
--- /dev/null
+++ b/src/types/KeyJson.ts
@@ -0,0 +1,4 @@
+export enum KeyJson {
+ CARD = 'cardedPhones',
+ DETAILS = 'productDetails',
+}
diff --git a/src/types/OldApiPhoneDetails.ts b/src/types/OldApiPhoneDetails.ts
new file mode 100644
index 0000000000..d3a189c0fc
--- /dev/null
+++ b/src/types/OldApiPhoneDetails.ts
@@ -0,0 +1,49 @@
+export type OldApiPhoneDetails = {
+ id: string,
+ additionalFeatures: string,
+ android: {
+ os: string,
+ ui: string,
+ },
+ camera: {
+ features: string[],
+ primary: string,
+ }
+ availability: string[],
+ battery: {
+ standbyTime: string,
+ talkTime: string,
+ type: string,
+ },
+ images: string[],
+ connectivity: {
+ bluetooth: string,
+ cell: string,
+ gps: string,
+ infrared: boolean,
+ wifi: string,
+ [key: string]: string | boolean,
+ },
+ display: {
+ screenResolution: string,
+ screenSize: string,
+ touchScreen: boolean,
+ },
+ hardware: {
+ accelerometer: boolean,
+ audioJack: string,
+ cpu: string,
+ fmRadio: boolean,
+ physicalKeyboard: boolean,
+ usb: string,
+ },
+ sizeAndWeight: {
+ dimensions: string[],
+ weight: string,
+ },
+ storage: {
+ flash: string,
+ ram: string,
+ },
+ description: string,
+};
diff --git a/src/types/PhoneDetails.ts b/src/types/PhoneDetails.ts
new file mode 100644
index 0000000000..bbb150175b
--- /dev/null
+++ b/src/types/PhoneDetails.ts
@@ -0,0 +1,24 @@
+export type PhoneDetails = {
+ id: string,
+ namespaceId: string,
+ name: string,
+ capacity: string,
+ capacityAvailable: string[],
+ priceRegular: number,
+ priceDiscount: number,
+ colorsAvailable: string[],
+ color: string,
+ images: string[],
+ description: [
+ { title: string, text: string[] },
+ { title: string, text: string[] },
+ { title: string, text: string[] },
+ ],
+ screen: string,
+ resolution: string,
+ processor: string,
+ ram: string,
+ camera: string,
+ zoom: string,
+ cell: string[],
+};
diff --git a/src/types/Product.ts b/src/types/Product.ts
new file mode 100644
index 0000000000..959c29b534
--- /dev/null
+++ b/src/types/Product.ts
@@ -0,0 +1,21 @@
+export type Product = {
+ id: string,
+ category: string,
+ phoneId: string,
+ itemId: string,
+ name: string,
+ fullPrice: number,
+ price: number,
+ screen: string,
+ capacity: string,
+ color: string,
+ ram: string
+ year: number,
+ age: number,
+ type: string
+ image: string,
+ imageUrl: string,
+ imgUrl: string,
+ snippet: string,
+ discount: number,
+};
diff --git a/src/types/SavedCard.ts b/src/types/SavedCard.ts
new file mode 100644
index 0000000000..eb7b54e607
--- /dev/null
+++ b/src/types/SavedCard.ts
@@ -0,0 +1,7 @@
+import { Product } from './Product';
+
+export type SavedCard = {
+ id: string,
+ amount: number,
+ value: Product,
+};
diff --git a/src/types/SelectAmountItems.ts b/src/types/SelectAmountItems.ts
new file mode 100644
index 0000000000..1a49044435
--- /dev/null
+++ b/src/types/SelectAmountItems.ts
@@ -0,0 +1,6 @@
+export enum SelectAmountItems {
+ FORTH = '4',
+ EIGHT = '8',
+ SIXTEEN = '16',
+ ALL = 'all',
+}
diff --git a/src/types/SelectOptionsArr.ts b/src/types/SelectOptionsArr.ts
new file mode 100644
index 0000000000..7c8c868cd5
--- /dev/null
+++ b/src/types/SelectOptionsArr.ts
@@ -0,0 +1,14 @@
+import { SelectAmountItems } from './SelectAmountItems';
+import { SortByOptions } from './SortByOptions';
+
+export const sortByOptions = [
+ { text: 'Newest', value: SortByOptions.AGE },
+ { text: 'Cheapest', value: SortByOptions.PRICE },
+ { text: 'Alphabetically', value: SortByOptions.NAME },
+];
+export const itemsOnPageOptions = [
+ { text: '4', value: SelectAmountItems.FORTH },
+ { text: '8', value: SelectAmountItems.EIGHT },
+ { text: '16', value: SelectAmountItems.SIXTEEN },
+ { text: 'ALL', value: SelectAmountItems.ALL },
+];
diff --git a/src/types/SelectedOptions.ts b/src/types/SelectedOptions.ts
new file mode 100644
index 0000000000..13f6e6a703
--- /dev/null
+++ b/src/types/SelectedOptions.ts
@@ -0,0 +1,7 @@
+import { SelectAmountItems } from './SelectAmountItems';
+import { SortByOptions } from './SortByOptions';
+
+export type SelectedOptions = {
+ sortBy: SortByOptions,
+ itemsShow: SelectAmountItems,
+};
diff --git a/src/types/SelectedStatus.ts b/src/types/SelectedStatus.ts
new file mode 100644
index 0000000000..3c3f479ec1
--- /dev/null
+++ b/src/types/SelectedStatus.ts
@@ -0,0 +1,4 @@
+export enum SelectedStatus {
+ SELECTED = 'selected',
+ UNSELECTED = 'unselected',
+}
diff --git a/src/types/SortByOptions.ts b/src/types/SortByOptions.ts
new file mode 100644
index 0000000000..dd55fe0f87
--- /dev/null
+++ b/src/types/SortByOptions.ts
@@ -0,0 +1,5 @@
+export enum SortByOptions {
+ AGE = 'age',
+ NAME = 'name',
+ PRICE = 'price',
+}
diff --git a/src/utils/fetchClient.ts b/src/utils/fetchClient.ts
new file mode 100644
index 0000000000..61934f8d2a
--- /dev/null
+++ b/src/utils/fetchClient.ts
@@ -0,0 +1,48 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// eslint-disable-next-line max-len
+const BASE_URL = 'https://mate-academy.github.io/react_phone-catalog';
+
+// returns a promise resolved after a given delay
+function wait(delay: number) {
+ return new Promise(resolve => {
+ setTimeout(resolve, delay);
+ });
+}
+
+// To have autocompletion and avoid mistypes
+type RequestMethod = 'GET';
+
+function request