+
+
+
+ );
+};
diff --git a/src/components/BucketPage/index.ts b/src/components/BucketPage/index.ts
new file mode 100644
index 0000000000..f6de2ace7a
--- /dev/null
+++ b/src/components/BucketPage/index.ts
@@ -0,0 +1 @@
+export * from './BucketPage';
diff --git a/src/components/Category/Category.module.scss b/src/components/Category/Category.module.scss
new file mode 100644
index 0000000000..80ca33ced5
--- /dev/null
+++ b/src/components/Category/Category.module.scss
@@ -0,0 +1,41 @@
+@import '../../utils/mixins';
+@import '../../utils/vars';
+
+.category_blocks_block {
+ margin-bottom: 40px;
+ grid-column: 1 / -1;
+
+ @include hover(transform, scale(1.05));
+
+ @include on-tablet {
+ margin-bottom: 0;
+ grid-column: span 4;
+ }
+
+ @include on-desktop {
+ grid-column: span 8;
+ }
+
+ img {
+ width: 100%;
+ margin-bottom: 24px;
+ }
+
+ h2 {
+ width: fit-content;
+ }
+
+ h3 {
+ font-size: 20px;
+ margin-bottom: 8px;
+ color: black;
+ width: fit-content;
+ }
+
+ p {
+ width: fit-content;
+ color: #89939A;
+ font-size: 14px;
+
+ }
+}
diff --git a/src/components/Category/Category.tsx b/src/components/Category/Category.tsx
new file mode 100644
index 0000000000..0960d3d579
--- /dev/null
+++ b/src/components/Category/Category.tsx
@@ -0,0 +1,45 @@
+import { useAppSelector } from '../../app/hooks';
+import styles from './Category.module.scss';
+import { Link } from 'react-router-dom';
+
+export const Category = () => {
+ const products = useAppSelector(state => state.products.items);
+
+ const mobileAmount = products.filter(
+ product => product.category === 'phones',
+ ).length;
+ const tabletsAmount = products.filter(
+ product => product.category === 'tablets',
+ ).length;
+ const accessoriesAmount = products.filter(
+ product => product.category === 'accessories',
+ ).length;
+
+ return (
+ <>
+
+
+ 
+
+
+
+ Back
+Cart
+ + {products.length === 0 ? ( +Your cart is empty
+ ) : ( +
+
+ )}
+
+ {products.map(product => (
+
+
+
+ ))}
+
+ ![]()
handleDeleteProduct(product)}
+ className={
+ // eslint-disable-next-line max-len
+ styles.bucket__generalProducts_products_product_section_close
+ }
+ src="img/icons/icon-close.svg"
+ alt="close"
+ />
+ 
+
+ {product.name}
+
+
+
+
+ handleDecrementQuantity(product.id)}
+ style={{
+ borderColor: product.quantity === 1 ? '#E2E6E9' : '',
+ cursor:
+ product.quantity === 1 ? 'not-allowed' : 'inherit',
+ }}
+ >
+ {product.quantity === 1 ? (
+ 
+ ) : (
+ 
+ )}
+
+
+ ) : (
+
+ )}
+ + {product.quantity} +
+ {
+ handleAddQuantity(product.id);
+ }}
+ >
+ 
+
+
+ + ${product.price * product.quantity} +
+
+
+
+
+
+ + ${finalSum()} +
+Total for {bucketAmount} items
+
+ 
+
+
+
+
+
+ Mobile phones
+{`${mobileAmount} models`}
+
+ 
+
+
+
+
+
+ Tablets
+{`${tabletsAmount} models`}
+
+ 
+
+
+
+ );
+};
diff --git a/src/components/Category/index.ts b/src/components/Category/index.ts
new file mode 100644
index 0000000000..5c45122686
--- /dev/null
+++ b/src/components/Category/index.ts
@@ -0,0 +1 @@
+export * from './Category';
diff --git a/src/components/DiscountItemList/DiscountItemList.module.scss b/src/components/DiscountItemList/DiscountItemList.module.scss
new file mode 100644
index 0000000000..25adba2eb4
--- /dev/null
+++ b/src/components/DiscountItemList/DiscountItemList.module.scss
@@ -0,0 +1,57 @@
+@import '../../utils/mixins';
+@import '../../utils/vars';
+
+.newModels {
+ &_title {
+ margin-bottom: 24px;
+
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+
+ h2 {
+ width: 40%;
+ font-size: 22px;
+
+ @include on-tablet {
+ width: 100%;
+ font-size: 32px;
+ }
+ }
+
+ &__buttons {
+ display: flex;
+ flex-direction: row;
+ gap: 16px;
+
+ button {
+ cursor: pointer;
+ background-color: unset;
+ width: 40px;
+ height: 40px;
+ box-sizing: border-box;
+ border: 1px solid;
+ border-color: #B4BDC3;
+ line-height: 45px;
+ text-align: center;
+
+ &:disabled {
+ border-color: $color-for-borders;
+ cursor: unset;
+ }
+ }
+ }
+ }
+}
+
+.itemsList {
+ @include page-grid;
+
+ div {
+ grid-column: span 4;
+
+ @include on-desktop {
+ grid-column: span 6;
+ }
+ }
+}
diff --git a/src/components/DiscountItemList/DiscountItemList.tsx b/src/components/DiscountItemList/DiscountItemList.tsx
new file mode 100644
index 0000000000..e154e65866
--- /dev/null
+++ b/src/components/DiscountItemList/DiscountItemList.tsx
@@ -0,0 +1,84 @@
+import { useState, useEffect } from 'react';
+import { useAppSelector } from '../../app/hooks';
+import styles from './DiscountItemList.module.scss';
+import { ItemsProduct } from '../ItemsProduct/ItemsProduct';
+
+export const DiscountItemList = () => {
+ const products = useAppSelector(state => state.products.items);
+ const [currentIndex, setCurrentIndex] = useState(0);
+ const [itemsPerPage, setItemsPerPage] = useState(4);
+
+ useEffect(() => {
+ const updateItemsPerPage = () => {
+ if (window.innerWidth <= 640) {
+ setItemsPerPage(1);
+ } else {
+ setItemsPerPage(4);
+ }
+ };
+
+ // Update items per page on component mount and window resize
+ updateItemsPerPage();
+ window.addEventListener('resize', updateItemsPerPage);
+
+ return () => {
+ window.removeEventListener('resize', updateItemsPerPage);
+ };
+ }, []);
+
+ const handleNext = () => {
+ if (currentIndex + itemsPerPage < products.length) {
+ setCurrentIndex(prevIndex => prevIndex + itemsPerPage);
+ }
+ };
+
+ const handlePrev = () => {
+ if (currentIndex - itemsPerPage >= 0) {
+ setCurrentIndex(prevIndex => prevIndex - itemsPerPage);
+ }
+ };
+
+ const currentItems = products.slice(
+ currentIndex,
+ currentIndex + itemsPerPage,
+ );
+
+ return (
+ <>
+
+ Accessories
+{`${accessoriesAmount} models`}
+
+
+
+ Hot prices
+
+
+
+
+
+ {currentItems.map(product => (
+
+
+ );
+};
diff --git a/src/components/DiscountItemList/index.ts b/src/components/DiscountItemList/index.ts
new file mode 100644
index 0000000000..384d5878b0
--- /dev/null
+++ b/src/components/DiscountItemList/index.ts
@@ -0,0 +1 @@
+export * from './DiscountItemList';
diff --git a/src/components/FavoritesPage/FavoritesPage.module.scss b/src/components/FavoritesPage/FavoritesPage.module.scss
new file mode 100644
index 0000000000..f93e5ce593
--- /dev/null
+++ b/src/components/FavoritesPage/FavoritesPage.module.scss
@@ -0,0 +1,53 @@
+@import '../../utils/mixins';
+@import '../../utils/vars';
+
+.favorites {
+ margin: 24px 0 80px;
+
+ @include content-padding-inline;
+
+ &_route {
+ margin-bottom: 24px;
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+ justify-content: left;
+ align-items: center;
+
+ @include on-tablet {
+ margin-bottom: 40px;
+ }
+
+ p {
+ color: $color-for-main-text;
+ font-size: 12px;
+ }
+ }
+
+ &_title {
+ font-size: 32px;
+ margin-bottom: 8px;
+
+ @include on-tablet {
+ font-size: 48px;
+ }
+ }
+
+ &_text {
+ margin-bottom: 40px;
+ color: $color-for-main-text;
+ font-size: 14px;
+ }
+
+ &_list {
+ @include page-grid;
+
+ div {
+ grid-column: span 4;
+
+ @include on-tablet {
+ grid-column: span 6;
+ }
+ }
+ }
+}
diff --git a/src/components/FavoritesPage/FavoritesPage.tsx b/src/components/FavoritesPage/FavoritesPage.tsx
new file mode 100644
index 0000000000..a492590ab5
--- /dev/null
+++ b/src/components/FavoritesPage/FavoritesPage.tsx
@@ -0,0 +1,36 @@
+import { Link } from 'react-router-dom';
+import styles from './FavoritesPage.module.scss';
+import { useAppSelector } from '../../app/hooks';
+import { ItemsProduct } from '../ItemsProduct';
+
+export const FavoritesPage = () => {
+ const favourites = useAppSelector(state => state.addedFavorites.items);
+
+ return (
+ <>
+
+
+
+ );
+};
diff --git a/src/components/FavoritesPage/index.ts b/src/components/FavoritesPage/index.ts
new file mode 100644
index 0000000000..b3a884b188
--- /dev/null
+++ b/src/components/FavoritesPage/index.ts
@@ -0,0 +1 @@
+export * from './FavoritesPage';
diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss
new file mode 100644
index 0000000000..29cb8f4357
--- /dev/null
+++ b/src/components/Footer/Footer.module.scss
@@ -0,0 +1,82 @@
+@import '../../utils/mixins';
+@import '../../utils/vars';
+
+.container {
+ border-top: 1px solid;
+ border-color: $color-for-borders;
+
+ @include content-padding-inline;
+}
+
+.footer_wrapper {
+ padding: 32px 0;
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+
+ @include on-tablet {
+ align-items: center;
+ flex-direction: row;
+ justify-content: space-between;
+ }
+
+ &_logo {
+ width: fit-content;
+
+ @include hover(transform, scale(1.05));
+ }
+
+ &Navbar {
+ ul {
+ padding: 0;
+ margin: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ list-style-type: none;
+ color: $color-for-main-text;
+ font-size: 12px;
+ text-transform: uppercase;
+
+
+ @include on-tablet {
+ flex-direction: row;
+ }
+
+ @include on-desktop {
+ gap: 100px;
+ }
+
+ li {
+ @include hover(transform, scale(1.05));
+ }
+ }
+
+ a {
+ color: $color-for-main-text;
+ }
+ }
+
+ &ButtonToTop {
+ justify-content: center;
+ font-size: 12px;
+ color: $color-for-main-text;
+ display: flex;
+ flex-direction: row;
+ gap: 16px;
+ align-items: center;
+
+ p {
+ white-space: nowrap;
+ }
+
+ img {
+ width: 16px;
+ padding: 8px;
+ border: 1px solid;
+ cursor: pointer;
+
+ @include hover(transform, scale(1.05));
+ }
+ }
+}
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
new file mode 100644
index 0000000000..0e28f71efe
--- /dev/null
+++ b/src/components/Footer/Footer.tsx
@@ -0,0 +1,54 @@
+import { Link } from 'react-router-dom';
+import styles from './Footer.module.scss';
+
+export const Footer = () => {
+ const scrollToTop = () => {
+ window.scrollTo({ top: 0, behavior: 'smooth' });
+ };
+
+ return (
+ <>
+
+
+ 
+
+ 
+
+
+
+
+
+ Favourites
+Favourites
+ +{favourites.length} items
+ +
+ {favourites.map(favorite => (
+
+
+
+
+ );
+};
diff --git a/src/components/Footer/index.ts b/src/components/Footer/index.ts
new file mode 100644
index 0000000000..ddcc5a9cd1
--- /dev/null
+++ b/src/components/Footer/index.ts
@@ -0,0 +1 @@
+export * from './Footer';
diff --git a/src/components/GeneralItemsList.tsx/GeneralItemsList.module.scss b/src/components/GeneralItemsList.tsx/GeneralItemsList.module.scss
new file mode 100644
index 0000000000..3ba169825a
--- /dev/null
+++ b/src/components/GeneralItemsList.tsx/GeneralItemsList.module.scss
@@ -0,0 +1,17 @@
+@import '../../utils/mixins';
+@import '../../utils/vars';
+
+.itemsListPhones {
+ margin-bottom: 40px;
+ grid-row-gap: 40px;
+
+ @include page-grid;
+
+ div {
+ grid-column: 1 / -1;
+
+ @include on-tablet {
+ grid-column: span 6;
+ }
+ }
+}
diff --git a/src/components/GeneralItemsList.tsx/GeneralItemsList.tsx b/src/components/GeneralItemsList.tsx/GeneralItemsList.tsx
new file mode 100644
index 0000000000..337c1fa5c8
--- /dev/null
+++ b/src/components/GeneralItemsList.tsx/GeneralItemsList.tsx
@@ -0,0 +1,21 @@
+import { Product } from '../../types/products';
+import { ItemsProduct } from '../ItemsProduct/ItemsProduct';
+import styles from './GeneralItemsList.module.scss';
+
+export type GeneralItemsProps = {
+ filteredProducts: Product[];
+};
+
+export const GeneralItemsList: React.FC
+
+ 
+
+
+
+
+
+
+
+
+
+ -
+
+
- github + + +
- contacts + + +
- rights + +
+ 
+
+ Back to top
+
+
+ {filteredProducts.map(phone => (
+
+
+ );
+};
diff --git a/src/components/GeneralItemsList.tsx/index.ts b/src/components/GeneralItemsList.tsx/index.ts
new file mode 100644
index 0000000000..389593e012
--- /dev/null
+++ b/src/components/GeneralItemsList.tsx/index.ts
@@ -0,0 +1 @@
+export * from './GeneralItemsList';
diff --git a/src/components/GeneralProductsPage/GeneralProductsPage.module.scss b/src/components/GeneralProductsPage/GeneralProductsPage.module.scss
new file mode 100644
index 0000000000..6c6e4d0397
--- /dev/null
+++ b/src/components/GeneralProductsPage/GeneralProductsPage.module.scss
@@ -0,0 +1,159 @@
+@import '../../utils/mixins';
+@import '../../utils/vars';
+
+.phonesPage {
+ padding: 24px 0 80px;
+
+ @include content-padding-inline;
+
+ &_route {
+ margin-bottom: 24px;
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+ justify-content: left;
+ align-items: center;
+
+ @include on-tablet {
+ margin-bottom: 40px;
+ }
+
+ p {
+ color: $color-for-main-text;
+ font-size: 12px;
+ }
+ }
+
+ &_title {
+ margin-bottom: 8px;
+ font-size: 32px;
+
+ @include on-tablet {
+ font-size: 48px;
+ }
+ }
+
+ &_amountOfPhones {
+ margin-bottom: 40px;
+ font-size: 14px;
+ color: $color-for-main-text;
+ }
+
+ &_filters {
+ margin-bottom: 24px;
+ display: flex;
+ flex-direction: row;
+ gap: 16px;
+
+ @include page-grid;
+
+ &_dropdown {
+ grid-column: span 2;
+ position: relative;
+ display: inline-block;
+
+ &_text {
+ color: $color-for-main-text;
+ font-size: 14px;
+ margin-bottom: 4px;
+ }
+
+ @include on-tablet {
+ grid-column: span 4;
+ }
+
+ &_dropbtn {
+ // width: 100%;
+ white-space: nowrap;
+ background-color: unset;
+ border: 1px solid;
+ border-color: #B4BDC3;
+ padding: 10px 12px;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+
+ &_text {
+ font-size: 16px;
+ color: $color-for-buttons;
+ }
+ }
+
+ &_dropdownContent {
+ margin-top: 2px;
+ display: none;
+ position: absolute;
+ background-color: #fff;
+ width: 100%;
+ box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+ z-index: 1;
+
+ a {
+ color: $color-for-main-text;
+ padding: 12px 16px;
+ text-decoration: none;
+ display: block;
+ }
+ }
+ }
+
+ &_dropdown:hover &_dropdown_dropdownContent {
+ display: block;
+ cursor: pointer;
+ }
+
+ &_dropdown_dropdownContent a:hover {color: $color-for-buttons;}
+ &_dropdown:hover &_dropdown_dropbtn {border-color: $color-for-buttons;}
+ }
+}
+
+.pagination {
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+ justify-content: center;
+
+ &__pageButton {
+ width: 32px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: none;
+ background-color: unset;
+ cursor: pointer;
+
+ &:hover {
+ border: 1px solid $color-for-borders;
+ }
+
+ &_press {
+ background-color: $color-for-buttons;
+ color: white;
+ }
+ }
+}
+
+.activePage {
+ cursor: pointer;
+ border: none;
+ width: 32px;
+ height: 32px;
+ color: white;
+ background-color: $color-for-buttons;
+}
+
+.page {
+ cursor: pointer;
+ border: none;
+ border: 1px solid;
+ border-color: $color-for-borders;
+ width: 32px;
+ height: 32px;
+ color: black;
+ background-color: white;
+
+ &_dots {
+ cursor: pointer;
+ }
+}
diff --git a/src/components/GeneralProductsPage/GeneralProductsPage.tsx b/src/components/GeneralProductsPage/GeneralProductsPage.tsx
new file mode 100644
index 0000000000..433d9ff9b5
--- /dev/null
+++ b/src/components/GeneralProductsPage/GeneralProductsPage.tsx
@@ -0,0 +1,211 @@
+import { Link, useLocation } from 'react-router-dom';
+import styles from './GeneralProductsPage.module.scss';
+import { useAppDispatch, useAppSelector } from '../../app/hooks';
+import { Product } from '../../types/products';
+import { useMemo, useState } from 'react';
+import {
+ setCurrentPage,
+ setItemsPerPage,
+} from '../../features/getProductsSlice';
+import { GeneralItemsList } from '../GeneralItemsList.tsx';
+import { Loader } from '../Loader';
+
+export const GeneralProductsPage = () => {
+ const dispatch = useAppDispatch();
+ const [selectedOrder, setSelectedOrder] = useState('Newest');
+ const [selectedAmount, setSelectedAmount] = useState('4');
+ const category = useLocation().pathname.slice(1);
+
+ const generalProducts = useAppSelector(state => state.products.items);
+ const loadedGeneralProducts = useAppSelector(state => state.products.loaded);
+ const errorGeneralProducts = useAppSelector(state => state.products.hasError);
+ const itemsPerPage = useAppSelector(state => state.products.itemsPerPage);
+ const currentPage = useAppSelector(state => state.products.currentPage);
+
+ function ucFirst(str: string | undefined) {
+ if (!str) {
+ return str;
+ }
+
+ return str[0].toUpperCase() + str.slice(1);
+ }
+
+ const specificProducts: Product[] = useMemo(() => {
+ return generalProducts.filter(product => product.category === category);
+ }, [generalProducts, category]);
+
+ const sortedProducts = useMemo(() => {
+ switch (selectedOrder) {
+ case 'Newest':
+ return [...specificProducts].sort((a, b) => b.year - a.year);
+ case 'Cheapest':
+ return [...specificProducts].sort((a, b) => a.price - b.price);
+ case 'Alphabetically':
+ return [...specificProducts].sort((a, b) =>
+ a.name.localeCompare(b.name),
+ );
+ default:
+ return specificProducts;
+ }
+ }, [specificProducts, selectedOrder]);
+
+ const startIndex = (currentPage - 1) * itemsPerPage;
+ const endIndex = startIndex + itemsPerPage;
+ const paginatedProducts = sortedProducts.slice(startIndex, endIndex);
+
+ const handleSort = (sortType: string) => {
+ setSelectedOrder(sortType);
+ };
+
+ const handleItemsPerPageChange = (amount: string) => {
+ setSelectedAmount(amount);
+ dispatch(setItemsPerPage(Number(amount) || specificProducts.length));
+ dispatch(setCurrentPage(1));
+ };
+
+ const handlePageChange = (pageNumber: number) => {
+ dispatch(setCurrentPage(pageNumber));
+ };
+
+ const totalPages = Math.ceil(specificProducts.length / itemsPerPage);
+
+ const pagesToShow = () => {
+ const range = 2;
+ const pages = [];
+
+ if (totalPages <= 5) {
+ for (let i = 1; i <= totalPages; i++) {
+ pages.push(i);
+ }
+ } else {
+ pages.push(1);
+
+ if (currentPage > range + 1) {
+ pages.push('...');
+ }
+
+ const start = Math.max(2, currentPage - range);
+ const end = Math.min(totalPages - 1, currentPage + range);
+
+ for (let i = start; i <= end; i++) {
+ pages.push(i);
+ }
+
+ if (currentPage < totalPages - range) {
+ pages.push('...');
+ }
+
+ pages.push(totalPages);
+ }
+
+ return pages;
+ };
+
+ if (!loadedGeneralProducts) {
+ return
+ Failed to load products. Please try again.
+
+ );
+ }
+
+ if (generalProducts.length === 0) {
+ return There are no {category} yet.
; + } + + return ( +
+
+ );
+};
diff --git a/src/components/GeneralProductsPage/index.ts b/src/components/GeneralProductsPage/index.ts
new file mode 100644
index 0000000000..b3a1eafbc4
--- /dev/null
+++ b/src/components/GeneralProductsPage/index.ts
@@ -0,0 +1 @@
+export * from './GeneralProductsPage';
diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss
new file mode 100644
index 0000000000..639c2b9cc5
--- /dev/null
+++ b/src/components/Header/Header.module.scss
@@ -0,0 +1,190 @@
+@import '../../utils/mixins';
+@import '../../utils/vars';
+
+.topbar {
+ border-bottom: 1px solid;
+ border-color: $color-for-borders;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ transform: translateY(0);
+ transition: transform 0.5s ease-in-out;
+
+ .topbar.open {
+ transform: translateY(-20px);
+ }
+
+ @include on-desktop {
+ padding-inline: 18px;
+ }
+
+ &LogoAndButtons {
+ padding-inline: 16px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 16px;
+
+ @include on-desktop {
+ gap: 24px;
+ }
+
+ &__logo {
+ padding: 18px 0;
+ }
+
+ &_buttons {
+ display: none;
+
+ @include on-tablet {
+ display: block;
+ }
+ ul {
+ padding: 0;
+ margin: 0;
+ display: flex;
+ color: $color-for-main-text;
+ flex-direction: row;
+ gap: 32px;
+ list-style-type: none;
+ font-size: 13px;
+ text-transform: uppercase;
+ height: 100%;
+
+ @include on-desktop {
+ gap: 64px;
+ }
+
+ li {
+ height: 70px;
+ }
+ }
+
+ a {
+ line-height: 70px;
+ position: relative;
+ display: block;
+ height: 100%;
+
+ &:hover {
+ color: black;
+ }
+ }
+
+ &_isActive {
+ color: black;
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: -2px;
+ left: 0;
+ width: 100%;
+ height: 3px;
+ background-color: black;
+ }
+ }
+ }
+
+ img {
+ @include hover(transform, scale(1.05));
+ }
+ }
+
+ &Icons {
+ position: relative;
+ flex-direction: row;
+ display: none;
+ align-items: center;
+
+ @include on-tablet {
+ display: flex;
+ }
+
+ & > :first-child {
+ border-left: 1px solid;
+ border-right: 1px solid;
+ border-color: $color-for-borders;
+ }
+
+ &_icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ position: relative;
+
+ &_isActive {
+ color: black;
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 3px;
+ background-color: black;
+ }
+ }
+
+ &_inside {
+ width: 16px;
+ padding: 0 24px;
+ }
+
+ &__amountFav {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 14px;
+ height: 14px;
+ border: 1px solid;
+ border-color: white;
+ box-sizing: border-box;
+ background-color: #EB5757;
+ color: white;
+ font-size: 9px;
+ border-radius: 50%;
+ position: absolute;
+ top: 18px;
+ right: 20px;
+ }
+
+ &__amountBucket {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 14px;
+ height: 14px;
+ border: 1px solid;
+ border-color: white;
+ box-sizing: border-box;
+ background-color: #EB5757;
+ color: white;
+ font-size: 9px;
+ border-radius: 50%;
+ position: absolute;
+ top: 18px;
+ right: 18px;
+ }
+ }
+
+ &_menu {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-left: 1px solid;
+ border-color: $color-for-borders;
+ position: relative;
+ cursor: pointer;
+
+ &_button {
+ width: 16px;
+ padding: 0 24px;
+ }
+
+ @include on-tablet {
+ display: none;
+ }
+ }
+ }
+}
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
new file mode 100644
index 0000000000..ee918e7087
--- /dev/null
+++ b/src/components/Header/Header.tsx
@@ -0,0 +1,131 @@
+import { Link, NavLink, useLocation } from 'react-router-dom';
+import styles from './Header.module.scss';
+import classNames from 'classnames';
+import { useEffect, useState } from 'react';
+import { useAppSelector } from '../../app/hooks';
+
+export const Header = () => {
+ const getLinkClass = ({ isActive }: { isActive: boolean }) =>
+ classNames({ [styles.topbarLogoAndButtons_buttons_isActive]: isActive });
+
+ const getAdditionalButtonsClass = ({ isActive }: { isActive: boolean }) =>
+ classNames({ [styles.topbarIcons_icon_isActive]: isActive });
+
+ const favouriteAmount = useAppSelector(
+ state => state.addedFavorites.items,
+ ).length;
+
+ const bucketProducts = useAppSelector(state => state.addBucket.items);
+
+ const bucketAmount = bucketProducts.reduce((total, product) => {
+ return total + product.quantity;
+ }, 0);
+
+ const [isMenuOpen, setIsMenuOpen] = useState(false);
+ const location = useLocation();
+
+ useEffect(() => {
+ if (location.pathname === '/menu') {
+ setIsMenuOpen(true);
+ } else {
+ setIsMenuOpen(false);
+ }
+ }, [location]);
+
+ const handleMenuToggle = () => {
+ setIsMenuOpen(prevState => !prevState);
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ {ucFirst(category)}
+
+
+ {ucFirst(category)}
++ {specificProducts.length} models +
+
+
+
+ 
+
+
+
+
+
+ Sort by
+ ++ {selectedOrder} +
+
+
+
+
+ {pagesToShow().map((page, index) =>
+ typeof page === 'number' ? (
+
+ ) : (
+
+ {page}
+
+ ),
+ )}
+
+
+
+ );
+};
diff --git a/src/components/Header/index.ts b/src/components/Header/index.ts
new file mode 100644
index 0000000000..266dec8a1b
--- /dev/null
+++ b/src/components/Header/index.ts
@@ -0,0 +1 @@
+export * from './Header';
diff --git a/src/components/HomePage/HomePage.module.scss b/src/components/HomePage/HomePage.module.scss
new file mode 100644
index 0000000000..438c3eb4ef
--- /dev/null
+++ b/src/components/HomePage/HomePage.module.scss
@@ -0,0 +1,58 @@
+@import '../../utils/mixins';
+@import '../../utils/vars';
+
+.generalHomePage {
+ display: flex;
+ flex-direction: column;
+ gap: 56px;
+
+ @include content-padding-inline;
+
+ @include on-tablet {
+ margin: 32px 0 96px;
+ }
+
+ @include on-desktop {
+ gap: 80px;
+ margin: 56px 0 112px;
+ margin-left: auto;
+ margin-right: auto;
+ }
+}
+
+.greeting {
+
+ &__title {
+ font-size: 32px;
+ margin-bottom: 24px;
+
+ @include on-tablet {
+ font-size: 48px;
+ margin-bottom: 32px;
+ }
+
+ @include on-desktop {
+ margin-bottom: 56px
+ }
+ }
+}
+
+.category {
+ &_title {
+ font-size: 22px;
+ margin-bottom: 24px;
+
+ @include on-tablet {
+ font-size: 32px;
+ }
+ }
+
+ &_blocks {
+ @include page-grid;
+
+ }
+}
+
+.hotPrices {
+ font-size: 22px;
+}
diff --git a/src/components/HomePage/HomePage.tsx b/src/components/HomePage/HomePage.tsx
new file mode 100644
index 0000000000..fa6b707059
--- /dev/null
+++ b/src/components/HomePage/HomePage.tsx
@@ -0,0 +1,55 @@
+import { useEffect } from 'react';
+import { useAppDispatch, useAppSelector } from '../../app/hooks';
+import { getProductsAsync } from '../../features/getProductsSlice';
+import { ItemsList } from '../ItemsList/ItemsList';
+import { Loader } from '../Loader';
+import { SliderMain } from '../SliderMain';
+import styles from './HomePage.module.scss';
+import { Category } from '../Category';
+import { DiscountItemList } from '../DiscountItemList';
+
+export const HomePage = () => {
+ const dispatch = useAppDispatch();
+ const loadedItems = useAppSelector(state => state.products.loaded);
+
+ useEffect(() => {
+ dispatch(getProductsAsync());
+ }, [dispatch]);
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+ {favouriteAmount > 0 && {favouriteAmount}}
+
+
+
+ 
+
+
+
+
+ {bucketAmount > 0 && {bucketAmount}}
+
+
+ {isMenuOpen ? (
+
+ 
+
+ ) : (
+
+ 
+
+ )}
+
+
+
+ ) : (
+
+
+
+ )}
+
+
+
+
+ {loadedItems ? (
+
+
+ ) : (
+
+
+
+ {loadedItems ? (
+
+
+ ) : (
+
+
+ );
+};
diff --git a/src/components/HomePage/index.ts b/src/components/HomePage/index.ts
new file mode 100644
index 0000000000..11e53da674
--- /dev/null
+++ b/src/components/HomePage/index.ts
@@ -0,0 +1 @@
+export * from './HomePage';
diff --git a/src/components/ItemInformation/ItemInformation.module.scss b/src/components/ItemInformation/ItemInformation.module.scss
new file mode 100644
index 0000000000..e5f8fb2616
--- /dev/null
+++ b/src/components/ItemInformation/ItemInformation.module.scss
@@ -0,0 +1,457 @@
+@import '../../utils/mixins';
+@import '../../utils/vars';
+
+.itemInformation {
+ @include content-padding-inline;
+
+ margin: 24px 0 80px;
+
+ &_route {
+ margin-bottom: 24px;
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+ justify-content: left;
+ align-items: center;
+
+ @include on-tablet {
+ margin-bottom: 40px;
+ }
+
+ h3 {
+ margin-top: 2px;
+ color: $color-for-buttons;
+ font-size: 12px;
+ }
+
+ p {
+ color: $color-for-main-text;
+ font-size: 12px;
+ }
+ }
+
+ &_buttonBack {
+ margin-bottom: 16px;
+ display: flex;
+ flex-direction: row;
+ gap: 4px;
+
+ p {
+ margin-top: 2px;
+ color: $color-for-main-text;
+ font-size: 12px;
+ }
+ }
+
+ &_title {
+ margin-bottom: 36px;
+ font-size: 22px;
+
+ @include on-tablet {
+ font-size: 32px;
+ }
+ }
+
+ &_generalInfo {
+ @include page-grid;
+
+ margin-bottom: 40px;
+
+ @include on-tablet {
+ margin-bottom: 64px;
+ }
+
+ @include on-desktop {
+ margin-bottom: 80px;
+ }
+
+ &_mainImage {
+ grid-column: 1 /-1;
+ margin-bottom: 16px;
+
+ @include on-tablet {
+ grid-column: 2 / 8;
+ }
+
+ @include on-desktop {
+ grid-column: 3 / 13;
+ }
+
+ img {
+ width: 100%;
+ height: 280px;
+ object-fit: contain;
+
+ @include on-desktop {
+ height: 464px;
+ }
+ }
+ }
+
+ &_additionalImgOnPhone {
+ margin-bottom: 40px;
+ grid-column: 1 / -1;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+
+ @include on-tablet {
+ display: none;
+ }
+
+ div {
+ width: 66px;
+ height: 66px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ img {
+ padding: 2px;
+ width: 60px;
+ height: 60px;
+ object-fit: contain;
+ }
+ }
+
+ &_additionalImgOnTablet {
+ display: none;
+
+ @include on-tablet {
+ grid-column: 1 / 2;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ }
+
+ @include on-desktop {
+ grid-column: 1 / 3;
+ }
+
+ div {
+ width: 66px;
+ height: 66px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ img {
+ width: 60px;
+ height: 60px;
+ object-fit: contain;
+ }
+ }
+
+ &_edit {
+ grid-column: 1 / -1;
+
+ @include on-tablet {
+ grid-column: 8 / 13;
+ }
+
+ @include on-desktop {
+ grid-column: 14 / 25;
+ }
+
+ &__wrapper {
+ display: flex;
+ flex-direction: column;
+ }
+
+ &__colours {
+ margin-bottom: 24px;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+ p {
+ font-size: 12px;
+ color: $color-for-main-text;
+ }
+
+ &_circles {
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+
+ div {
+ width: 36px;
+ height: 36px;
+ border: 2px solid;
+ border-color: $color-for-borders;
+ border-radius: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ div {
+ width: 30px;
+ height: 30px;
+ }
+
+ &:hover {
+ border-color: #B4BDC3;
+ }
+
+ }
+ }
+ }
+
+ &__string {
+ margin-bottom: 24px;
+ width: 100%;
+ height: 1px;
+ background-color: $color-for-borders;
+
+ @include on-tablet {
+ width: 70%;
+ }
+
+ &1 {
+ margin-bottom: 32px;
+ width: 100%;
+ height: 1px;
+ background-color: $color-for-borders;
+
+ @include on-tablet {
+ width: 70%;
+ }
+ }
+ }
+
+ &_storage {
+ margin-bottom: 24px;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+ p {
+ font-size: 12px;
+ color: $color-for-main-text;
+ }
+ }
+
+ .capacityOptions {
+ margin-top: 8px;
+ display: flex;
+ gap: 8px;
+ }
+
+ .capacityLink {
+ text-decoration: none;
+ }
+
+ .capacityBox {
+ width: 56px;
+ height: 32px;
+ border: 1px solid $color-for-borders;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &:hover {
+ border-color: $color-for-buttons;
+ }
+
+ &.active {
+ background-color: black;
+ }
+ }
+
+ .capacityText {
+ color: black;
+ font-size: 14px;
+ line-height: 32px;
+ }
+
+ .activeText {
+ color: white;
+ }
+
+ &__prices {
+ margin-bottom: 16px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 8px;
+
+
+ h3 {
+ color: $color-for-title;
+ font-size: 32px;
+
+ }
+
+ p {
+ color: $color-for-main-text;
+ font-size: 22px;
+ text-decoration: line-through;
+ }
+ }
+ }
+
+ &_buttons {
+ display: flex;
+ flex-direction: row;
+ height: 48px;
+ justify-content: space-between;
+ margin-bottom: 32px;
+
+ @include on-tablet {
+ justify-content: unset;
+ gap: 8px;
+ }
+
+ &_add {
+ height: 48px;
+ color: $color-for-white-text;
+ background-color: $color-for-buttons;
+ border: 1px solid;
+ border-color: $color-for-buttons;
+ box-sizing: border-box;
+ width: 85%;
+ line-height: 48px;
+ text-align: center;
+ font-size: 14px;
+
+ @include on-tablet {
+ width: 70%;
+ }
+
+ &:hover {
+ cursor: pointer;
+ box-shadow: 4px 4px 4px 0 rgba(0,0,0,0.2);
+ }
+ }
+
+ &_favourite {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 48px;
+ height: 48px;
+ border: 1px solid;
+ box-sizing: border-box;
+ border-color: #B4BDC3;
+ line-height: 50px;
+ text-align: center;
+
+ &:hover {
+ cursor: pointer;
+ border-color: $color-for-buttons;
+ }
+ }
+ }
+
+ &_info {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ gap: 8px;
+ width: 100%;
+
+ @include on-tablet {
+ width: 90%;
+ }
+
+ @include on-desktop {
+ width: 81%;
+ }
+
+ &_string {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+
+ &__title {
+ color: $color-for-main-text;
+ font-size: 14px;
+ }
+
+ &__text {
+ font-size: 14px;
+ color: $color-for-buttons;
+ }
+ }
+ }
+ }
+
+ &_info {
+ margin-bottom: 64px;
+
+ @include page-grid;
+
+ @include on-tablet {
+ margin-bottom: 80px;
+ }
+ &_title {
+ margin-bottom: 16px;
+ font-size: 22px;
+ }
+
+ &_string {
+ margin-bottom: 32px;
+ width: 100%;
+ height: 1px;
+ background-color: $color-for-borders;
+ }
+
+ &_about {
+ grid-column: 1 / -1;
+
+ @include on-desktop {
+ grid-column: span 12;
+ }
+
+ &_description {
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+
+ &_title {
+ margin-bottom: 16px;
+ font-size: 20px;
+ color: $color-for-buttons;
+ }
+
+ &_text {
+ font-size: 14px;
+ color: $color-for-main-text;
+ }
+ }
+ }
+
+ &_techSpecs {
+ grid-column: 1 / -1;
+
+ @include on-desktop {
+ grid-column: 14 / 25;
+ }
+
+ &_description {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+
+ &_opt {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+
+ &__title {
+ color: $color-for-main-text;
+ font-size: 14px;
+ }
+
+ &__text {
+ font-size: 14px;
+ color: $color-for-buttons;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/components/ItemInformation/ItemInformation.tsx b/src/components/ItemInformation/ItemInformation.tsx
new file mode 100644
index 0000000000..1a5d46c729
--- /dev/null
+++ b/src/components/ItemInformation/ItemInformation.tsx
@@ -0,0 +1,556 @@
+import { Link, useParams } from 'react-router-dom';
+import styles from './ItemInformation.module.scss';
+import { useAppDispatch, useAppSelector } from '../../app/hooks';
+import { getAllProductsAsync } from '../../features/getAllProductsSlice';
+import React, { useEffect, useState } from 'react';
+import { Loader } from '../Loader';
+import { addFavorite, removeFavorite } from '../../features/addFavoritesSlice';
+import { addBucket, removeBucket } from '../../features/addProductSlice';
+import { ItemsList } from '../ItemsList/ItemsList';
+
+export const ItemInformation = () => {
+ const { productId } = useParams();
+
+ useEffect(() => {
+ window.scrollTo(0, 0);
+ }, [productId]);
+
+ // список, лоадер та можлива помилка для конкретного селектора
+ const items = useAppSelector(state => state.allProducts.items);
+ const loaded = useAppSelector(state => state.allProducts.loaded);
+ const error = useAppSelector(state => state.allProducts.error);
+ const currentProduct = items.find(item => item.id === productId); // продукт, з яким потрібно працювати в цьому компоненті
+ const [currentImage, setCurrentImage] = useState(currentProduct?.images[0]);
+ const dispatch = useAppDispatch();
+ const favourites = useAppSelector(state => state.addedFavorites.items);
+ const bucketProducts = useAppSelector(state => state.addBucket.items);
+ const isClickedOnFavourite = favourites.some(
+ fav => fav.itemId === currentProduct?.id,
+ );
+ const isClickedOnBucket = bucketProducts.some(
+ bucket => bucket.itemId === currentProduct?.id,
+ );
+
+ // функція для добавлення favourite
+ const generalProducts = useAppSelector(state => state.products.items);
+
+ const handleAddDeleteFavourites = () => {
+ const productToToggle = generalProducts.find(
+ product => product.itemId === currentProduct?.id,
+ );
+
+ if (!productToToggle) {
+ return;
+ }
+
+ if (isClickedOnFavourite) {
+ dispatch(removeFavorite(productToToggle));
+ } else {
+ dispatch(addFavorite(productToToggle));
+ }
+ };
+
+ const handleAddDeleteBucket = () => {
+ const productToToggle = generalProducts.find(
+ product => product.itemId === currentProduct?.id,
+ );
+
+ if (!productToToggle) {
+ return;
+ }
+
+ if (isClickedOnBucket) {
+ dispatch(removeBucket(productToToggle.id));
+ } else {
+ dispatch(addBucket({ ...productToToggle, quantity: 1 }));
+ }
+ };
+
+ // оновлення картинки при запуску сторінки
+ useEffect(() => {
+ setCurrentImage(currentProduct?.images[0]);
+ }, [currentProduct]);
+
+ // виклик redux
+ useEffect(() => {
+ dispatch(getAllProductsAsync());
+ }, [dispatch]);
+
+ const isClickedOnImage = (image: string) => {
+ setCurrentImage(image);
+ };
+
+ // обробка лоадера
+ if (!loaded) {
+ return + Welcome to Nice Gadgets store! +
+Shop by category
+ +
+
+
+ Failed to load products. Please try again.
+
+ );
+ }
+
+ function ucFirst(str: string | undefined) {
+ if (!str) {
+ return str;
+ }
+
+ return str[0].toUpperCase() + str.slice(1);
+ }
+
+ return (
+
+ 
+
+ );
+};
diff --git a/src/components/ItemInformation/index.ts b/src/components/ItemInformation/index.ts
new file mode 100644
index 0000000000..4ce539d56a
--- /dev/null
+++ b/src/components/ItemInformation/index.ts
@@ -0,0 +1 @@
+export * from './ItemInformation';
diff --git a/src/components/ItemsList/ItemsList.module.scss b/src/components/ItemsList/ItemsList.module.scss
new file mode 100644
index 0000000000..25adba2eb4
--- /dev/null
+++ b/src/components/ItemsList/ItemsList.module.scss
@@ -0,0 +1,57 @@
+@import '../../utils/mixins';
+@import '../../utils/vars';
+
+.newModels {
+ &_title {
+ margin-bottom: 24px;
+
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+
+ h2 {
+ width: 40%;
+ font-size: 22px;
+
+ @include on-tablet {
+ width: 100%;
+ font-size: 32px;
+ }
+ }
+
+ &__buttons {
+ display: flex;
+ flex-direction: row;
+ gap: 16px;
+
+ button {
+ cursor: pointer;
+ background-color: unset;
+ width: 40px;
+ height: 40px;
+ box-sizing: border-box;
+ border: 1px solid;
+ border-color: #B4BDC3;
+ line-height: 45px;
+ text-align: center;
+
+ &:disabled {
+ border-color: $color-for-borders;
+ cursor: unset;
+ }
+ }
+ }
+ }
+}
+
+.itemsList {
+ @include page-grid;
+
+ div {
+ grid-column: span 4;
+
+ @include on-desktop {
+ grid-column: span 6;
+ }
+ }
+}
diff --git a/src/components/ItemsList/ItemsList.tsx b/src/components/ItemsList/ItemsList.tsx
new file mode 100644
index 0000000000..6ba73a339c
--- /dev/null
+++ b/src/components/ItemsList/ItemsList.tsx
@@ -0,0 +1,96 @@
+import { useAppSelector } from '../../app/hooks';
+import { ItemsProduct } from '../ItemsProduct';
+import styles from './ItemsList.module.scss';
+import { useEffect, useState } from 'react';
+
+export const ItemsList = () => {
+ const products = useAppSelector(state => state.products.items);
+
+ const newProducts = products.filter(product => product.year === 2022);
+
+ const [currentIndex, setCurrentIndex] = useState(0);
+ const [itemsPerPage, setItemsPerPage] = useState(4);
+
+ useEffect(() => {
+ const updateItemsPerPage = () => {
+ if (window.innerWidth <= 640) {
+ setItemsPerPage(1);
+ } else {
+ setItemsPerPage(4);
+ }
+ };
+
+ updateItemsPerPage();
+ window.addEventListener('resize', updateItemsPerPage);
+
+ return () => {
+ window.removeEventListener('resize', updateItemsPerPage);
+ };
+ }, []);
+
+ const handleNext = () => {
+ if (currentIndex + itemsPerPage < newProducts.length) {
+ setCurrentIndex(prevIndex => prevIndex + itemsPerPage);
+ }
+ };
+
+ const handlePrev = () => {
+ if (currentIndex - itemsPerPage >= 0) {
+ setCurrentIndex(prevIndex => prevIndex - itemsPerPage);
+ }
+ };
+
+ const currentItems = newProducts.slice(
+ currentIndex,
+ currentIndex + itemsPerPage,
+ );
+
+ let title = 'Brand new models';
+
+ if (
+ location.pathname.startsWith('/phones/') ||
+ location.pathname.startsWith('/tablets/') ||
+ location.pathname.startsWith('/accessories/')
+ ) {
+ title = 'You may also like';
+ }
+
+ return (
+ <>
+
+
+ 
+
+ 
+
+
+
+
+
+
+
+ {ucFirst(currentProduct?.category)}
+
+ {currentProduct?.name}
+
+ Back
+ +{currentProduct?.name}
+ +
+ {/* on tablet */}
+
+
+
+ {currentProduct?.images.map(image => (
+
+ {/** */}
+
+
+ ![]()
{
+ isClickedOnImage(image);
+ }}
+ src={`./${image}`}
+ alt="img"
+ />
+
+ ))}
+
+ 
+
+
+ {/* on phone */}
+
+ {currentProduct?.images.map(image => (
+
+ {/** */}
+
+
+ ![]()
{
+ isClickedOnImage(image);
+ }}
+ src={`./${currentImage}`}
+ alt="img"
+ style={{
+ border: currentImage === image ? '1px solid #313237' : '',
+ }}
+ />
+
+ ))}
+
+
+
+
+
+
+
+
+ Available colors
+
+ {currentProduct?.colorsAvailable.map(color => (
+
+
+
+
+
+
+ ))}
+
+
+
+
+
+ Select capacity
+
+ {currentProduct?.capacityAvailable.map(capacity => (
+
+
+
+
+
+ ))}
+ + {capacity} +
+
+
+
+ ${currentProduct?.priceDiscount}
+${currentProduct?.priceRegular}
+
+
+
+ {isClickedOnBucket ? (
+
+ Selected
+ ) : ( +Add to cart
+ )} + {
+ handleAddDeleteFavourites();
+ }}
+ className={styles.itemInformation_generalInfo_buttons_favourite}
+ >
+ {isClickedOnFavourite ? (
+ 
+ ) : (
+ 
+ )}
+
+
+ ) : (
+
+ )}
+
+
+
+
+ + Screen +
++ {currentProduct?.screen} +
+
+
+ + Resolution +
++ {currentProduct?.resolution} +
+
+
+ + Processor +
++ {currentProduct?.processor} +
+
+
+ + RAM +
++ {currentProduct?.ram} +
+
+
+
+
+
+ About
+ +
+ {currentProduct?.description.map((desc, index) => (
+
+
+ ))}
+
+
+
+ + {desc.title} +
++ {desc.text} +
+
+
+ Tech specs
+ + +
+
+
+ ) : (
+
+
+
+
+ + Screen +
++ {currentProduct?.screen} +
+
+
+
+ + Resolution +
++ {currentProduct?.resolution} +
+
+
+
+ + Processor +
++ {currentProduct?.processor} +
+
+
+
+ + RAM +
++ {currentProduct?.ram} +
+
+
+
+ {currentProduct?.category !== 'accessories' ? (
+ + Built in memory +
++ {currentProduct?.capacity} +
+
+
+
+ + Camera +
++ {currentProduct?.camera} +
+
+
+ + Zoom +
++ {currentProduct?.zoom} +
+
+
+ + Cell +
++ {currentProduct?.cell} +
+
+
+
+
+
+ {title}
+
+
+
+
+
+ {currentItems.map(product => (
+
+
+ );
+};
diff --git a/src/components/ItemsList/index.ts b/src/components/ItemsList/index.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/components/ItemsProduct/ItemsProduct.module.scss b/src/components/ItemsProduct/ItemsProduct.module.scss
new file mode 100644
index 0000000000..5fb338f12a
--- /dev/null
+++ b/src/components/ItemsProduct/ItemsProduct.module.scss
@@ -0,0 +1,117 @@
+@import '../../utils/mixins';
+@import '../../utils/vars';
+
+.product {
+ padding: 32px;
+ border: 1px solid;
+ border-color: $color-for-borders;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ overflow: hidden;
+
+ &:hover {
+ box-shadow: 8px 8px 8px 0 rgba(0,0,0,0.2);
+ }
+
+ &_image {
+ margin-bottom: 16px;
+ max-width: 100%;
+ height: 55%;
+ display: block;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &_img {
+ max-width: 100%;
+ max-height: 100%;
+ object-fit: contain;
+ }
+ }
+
+ &_title {
+ height: 30px;
+ font-size: 14px;
+ text-align: left;
+ }
+
+ &_price {
+ font-size: 22px;
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+
+
+ &_noDisc {
+ color: $color-for-main-text;
+ text-decoration: line-through;
+ }
+ }
+
+ &_line {
+ width: 100%;
+ height: 1px;
+ background-color: $color-for-borders;
+ }
+
+ &_characteristic {
+ padding: 8px 0;
+
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+ &_cond {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+
+ font-size: 12px;
+
+ &_name {
+ color: $color-for-main-text;
+ }
+ }
+ }
+
+ &_buttons {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+
+ &_add {
+ height: 40px;
+ color: $color-for-white-text;
+ background-color: $color-for-buttons;
+ border: 1px solid;
+ border-color: $color-for-borders;
+ box-sizing: border-box;
+ width: 70%;
+ line-height: 40px;
+ text-align: center;
+ font-size: 14px;
+
+ &:hover {
+ cursor: pointer;
+ box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2);
+ }
+ }
+
+ &_favourite {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 40px;
+ height: 40px;
+ border: 1px solid;
+ box-sizing: border-box;
+ border-color: #B4BDC3;
+
+ &:hover {
+ cursor: pointer;
+ border-color: $color-for-buttons;
+ }
+ }
+ }
+}
diff --git a/src/components/ItemsProduct/ItemsProduct.tsx b/src/components/ItemsProduct/ItemsProduct.tsx
new file mode 100644
index 0000000000..fe01f9fdcc
--- /dev/null
+++ b/src/components/ItemsProduct/ItemsProduct.tsx
@@ -0,0 +1,121 @@
+import { Link } from 'react-router-dom';
+import { useAppDispatch, useAppSelector } from '../../app/hooks';
+import { Product } from '../../types/products';
+import { addFavorite, removeFavorite } from '../../features/addFavoritesSlice';
+import { addBucket, removeBucket } from '../../features/addProductSlice';
+import styles from './ItemsProduct.module.scss';
+
+type Props = {
+ product: Product;
+ discount: boolean;
+};
+
+export const ItemsProduct: React.FC
+
+ 
+
+
+ );
+};
diff --git a/src/components/ItemsProduct/index.ts b/src/components/ItemsProduct/index.ts
new file mode 100644
index 0000000000..c57162120f
--- /dev/null
+++ b/src/components/ItemsProduct/index.ts
@@ -0,0 +1 @@
+export * from '../ItemsProduct/ItemsProduct';
diff --git a/src/components/Loader/Loader.scss b/src/components/Loader/Loader.scss
new file mode 100644
index 0000000000..18d5fcf375
--- /dev/null
+++ b/src/components/Loader/Loader.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);
+ }
+}
\ No newline at end of file
diff --git a/src/components/Loader/Loader.tsx b/src/components/Loader/Loader.tsx
new file mode 100644
index 0000000000..dc5a52d28a
--- /dev/null
+++ b/src/components/Loader/Loader.tsx
@@ -0,0 +1,7 @@
+import './Loader.scss';
+
+export const Loader = () => (
+ {product.name}
+ +
+ {discount ? (
+ <>
+
+
+
+
+ + ${product.price || product.priceDiscount} +
++ ${product.fullPrice || product.priceRegular} +
+ + ) : ( ++ ${product.fullPrice || product.priceRegular} +
+ )} +
+
+
+
+
+
+ Screen
++ {product.screen} +
+
+
+
+ Capacity
++ {product.capacity} +
+
+
+ RAM
++ {product.ram} +
+
+
+
+ {isClickedOnBucket ? (
+
+ Selected
+ ) : ( +Add to cart
+ )} +
+ {isClickedOnFavourite ? (
+ 
+ ) : (
+
+ )}
+
+
+ ) : (
+
+ )}
+
+
+
+);
diff --git a/src/components/Loader/index.ts b/src/components/Loader/index.ts
new file mode 100644
index 0000000000..d5ce981151
--- /dev/null
+++ b/src/components/Loader/index.ts
@@ -0,0 +1 @@
+export * from './Loader';
diff --git a/src/components/SliderMain/SiderMain.tsx b/src/components/SliderMain/SiderMain.tsx
new file mode 100644
index 0000000000..15e3bc935a
--- /dev/null
+++ b/src/components/SliderMain/SiderMain.tsx
@@ -0,0 +1,66 @@
+import { useCallback, useEffect, useState } from 'react';
+import styles from './SliderMain.module.scss';
+
+export const SliderMain = () => {
+ const [currentIndex, setCurrentIndex] = useState(0);
+ const images = [
+ 'img/homePage/banner-accessories.png',
+ 'img/homePage/banner-phones.png',
+ 'img/homePage/banner-tablets.png',
+ ];
+
+ const handlePrev = () => {
+ setCurrentIndex((prevIndex: number) =>
+ prevIndex === 0 ? images.length - 1 : prevIndex - 1,
+ );
+ };
+
+ const handleNext = useCallback(() => {
+ setCurrentIndex((prevIndex: number) =>
+ prevIndex === images.length - 1 ? 0 : prevIndex + 1,
+ );
+ }, [images.length]);
+
+ const handleClickOnLowerSwitch = (index: number) => {
+ setCurrentIndex(index);
+ };
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ handleNext();
+ }, 5000);
+
+ return () => clearInterval(interval);
+ }, [images.length, handleNext]);
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+ {images.map((_, index) => (
+
+
+ );
+};
diff --git a/src/components/SliderMain/SliderMain.module.scss b/src/components/SliderMain/SliderMain.module.scss
new file mode 100644
index 0000000000..e348b42bdd
--- /dev/null
+++ b/src/components/SliderMain/SliderMain.module.scss
@@ -0,0 +1,63 @@
+@import '../../utils/mixins';
+@import '../../utils/vars';
+
+.slider {
+ position: relative;
+ height: 60vh;
+ align-items: center;
+ margin-bottom: 8px;
+
+ @include page-grid;
+
+ &_buttonLeft, &_buttonRight {
+ grid-column: span 1;
+ border: 1px solid #B4BDC3;
+ background: none;
+ width: 40px;
+ height: 100%;
+ display: none;
+ cursor: pointer;
+
+ img {
+ width: 20px;
+ height: 20px;
+ }
+
+ @include on-tablet {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ }
+
+ &_img {
+ background-position: center top;
+ background-repeat: no-repeat;
+ background-size: cover;
+ height: 100%;
+ grid-column: 1 / -1;
+ transition: background-image 0.3s ease-out;
+
+ @include on-tablet {
+ grid-column: 2 / -2;
+ }
+ }
+
+ &_lowerSwitches {
+ display: flex;
+ justify-content: center;
+ gap: 8px;
+
+ .switch {
+ background-color: #E2E6E9;
+ width: 14px;
+ height: 4px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+ }
+
+ .active {
+ background-color:#313237;
+ }
+ }
+}
diff --git a/src/components/SliderMain/index.ts b/src/components/SliderMain/index.ts
new file mode 100644
index 0000000000..77f724302b
--- /dev/null
+++ b/src/components/SliderMain/index.ts
@@ -0,0 +1 @@
+export * from './SiderMain';
diff --git a/src/features/addFavoritesSlice.tsx b/src/features/addFavoritesSlice.tsx
new file mode 100644
index 0000000000..da1b735d26
--- /dev/null
+++ b/src/features/addFavoritesSlice.tsx
@@ -0,0 +1,33 @@
+/* eslint-disable no-param-reassign */
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { Product } from '../types/products';
+
+export interface FavoritesState {
+ items: Product[];
+}
+
+const initialState: FavoritesState = {
+ items: JSON.parse(localStorage.getItem('favorites') || '[]'),
+};
+
+const addFavoritesSlice = createSlice({
+ name: 'addedFavorites',
+ initialState,
+ reducers: {
+ addFavorite: (state, action: PayloadAction {
+ handleClickOnLowerSwitch(index);
+ }}
+ >
+ ))}
+