+
+
+
+
+ {t(StrCode.WelcomeMessage)}
+
+
+
+ );
+};
diff --git a/src/modules/HomePage/components/CategoryBlock/CategoryBlock.tsx b/src/modules/HomePage/components/CategoryBlock/CategoryBlock.tsx
new file mode 100644
index 0000000000..f1be2092e8
--- /dev/null
+++ b/src/modules/HomePage/components/CategoryBlock/CategoryBlock.tsx
@@ -0,0 +1,92 @@
+import { useTranslation } from 'react-i18next';
+import {
+ CategoryImageStyled,
+ CategoryItemStyled,
+ CategoryTextStyled,
+ CategoryTitleStyled,
+ CategotyStyled,
+ ContainerImgStyled,
+ ContainerStyled,
+ SecondTextStyled,
+} from './styled';
+import { StrCode } from '../../../../utils/enums';
+import { useAppSelector } from '../../../../hooks/hookStore';
+import { useTheme } from '../../../../components/Themes/ThemeProvider';
+
+const CategoryBlock = () => {
+ const { t } = useTranslation();
+ const { phones } = useAppSelector(state => state.phones);
+ const { tables } = useAppSelector(state => state.tables);
+ const { accessories } = useAppSelector(state => state.accessories);
+ const { theme } = useTheme();
+
+ return (
+ Product Catalog
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {t(StrCode.Screen)}
+ {product.screen}
+
+
+
+ {t(StrCode.Resolution)}
+ {product.resolution}
+
+
+
+ {t(StrCode.Processor)}
+ {product.processor}
+
+
+
+ {t(StrCode.Ram)}
+ {product.ram}
+
+ {item.title}
+ {item.text}
+
+ {t(StrCode.Screen)}
+ {product.screen}
+
+
+
+ {t(StrCode.Resolution)}
+ {product.resolution}
+
+
+
+ {t(StrCode.Processor)}
+ {product.processor}
+
+
+
+ {t(StrCode.Ram)}
+ {product.ram}
+
+
+
+ {t(StrCode.BuiltMemory)}
+ {product.capacity}
+
+
+ {!!product.camera && (
+
+ {t(StrCode.Camera)}
+ {product.camera}
+
+ )}
+
+ {!!product.zoom && (
+
+ {t(StrCode.Zoom)}
+ {product.zoom}
+
+ )}
+
+
+ {t(StrCode.Cell)}
+
+ {product.cell.join(', ')}
+
+
+
+
+ {titleName[variant]}
+
+ {`${productsLength} ${t(StrCode.Models)}`}
+
+
+
+
+
+
+
+
+
+
+ {productNoYet[variant]}
+
+
+
+
+ )}
+
+
+
+ );
+};
+
+export default ProductsPage;
diff --git a/src/modules/ProductsPage/components/Pagination/Pagination.tsx b/src/modules/ProductsPage/components/Pagination/Pagination.tsx
new file mode 100644
index 0000000000..21d60e66ad
--- /dev/null
+++ b/src/modules/ProductsPage/components/Pagination/Pagination.tsx
@@ -0,0 +1,169 @@
+import { Button } from '../../../../components/Button/Button';
+import { useTheme } from '../../../../components/Themes/ThemeProvider';
+import { VECTOR_SVG } from '../../../../utils/SVG';
+import { ListItemStyled, PaginationStyled } from './styled';
+
+type Props = {
+ total: number;
+ perPage: string;
+ currentPage: number;
+ onPageChange: (value: number) => void;
+};
+
+const Pagination: React.FC{firstTitleH1[variant]}
+ +...
}
+
+ {(() => {
+ let startPage: number;
+ let endPage: number;
+
+ if (currentPage === 1 || currentPage === 2) {
+ startPage = 2;
+ endPage = 4;
+ } else if (
+ currentPage === pageCount[pageCount.length - 1] ||
+ currentPage === pageCount[pageCount.length - 2]
+ ) {
+ startPage = pageCount[pageCount.length - 4];
+ endPage = pageCount[pageCount.length - 2];
+ } else {
+ startPage = currentPage - 1;
+ endPage = currentPage + 1;
+ }
+
+ return Array.from(
+ { length: endPage - startPage + 1 },
+ (_, i) => startPage + i,
+ ).map(page => (
+ ...
+ )}
+
+ navigateTo(item)}>{item}
+
+ ))}
+
+
+ {name}
+
+
+
+
+
+
+
+
+
+ {products.length === 0
+ ? [1, 2, 3, 4, 5, 6].map(item => (
+
+
+ );
+};
+
+export default ProductsSlider;
diff --git a/src/modules/_shared/ProductsSlider/styled.ts b/src/modules/_shared/ProductsSlider/styled.ts
new file mode 100644
index 0000000000..6a9e8733d5
--- /dev/null
+++ b/src/modules/_shared/ProductsSlider/styled.ts
@@ -0,0 +1,56 @@
+import styled from 'styled-components';
+import { media } from '../../../utils/const';
+
+const ProductStyled = styled.div`
+ display: flex;
+ justify-content: space-between;
+ color: ${({ theme }) => theme.textColor};
+ padding-inline: 16px;
+ margin-bottom: 24px;
+
+ ${media.desktop} {
+ padding: 0;
+ }
+
+ > * {
+ width: 50%;
+ }
+`;
+
+const TitleStyled = styled.h2`
+ font-weight: 800;
+ font-family: 'Mont-Bold', sans-serif;
+ font-size: 22px;
+ line-height: 30.8px;
+ margin: 0;
+
+ ${media.tablet} {
+ font-size: 32px;
+ line-height: 41px;
+ }
+`;
+
+const ButtonsBlockStyled = styled.div`
+ display: flex;
+ justify-content: right;
+ align-items: center;
+ gap: 16px;
+`;
+
+const ItemsStyled = styled.div`
+ display: flex;
+ overflow: hidden;
+ overflow-x: scroll;
+ gap: 16px;
+ padding-inline: 16px;
+
+ ${media.desktop} {
+ padding: 0;
+ }
+
+ &::-webkit-scrollbar {
+ display: none;
+ }
+`;
+
+export { TitleStyled, ProductStyled, ButtonsBlockStyled, ItemsStyled };
diff --git a/src/modules/_shared/Skeleton/Skeleton.tsx b/src/modules/_shared/Skeleton/Skeleton.tsx
new file mode 100644
index 0000000000..1cb6778c45
--- /dev/null
+++ b/src/modules/_shared/Skeleton/Skeleton.tsx
@@ -0,0 +1,35 @@
+import styled, { keyframes } from 'styled-components';
+
+const shimmer = keyframes`
+ 0% {
+ background-position: -200px 0;
+ }
+ 100% {
+ background-position: calc(200px + 100%) 0;
+ }
+`;
+
+const SkeletonWrapper = styled.div`
+ display: inline-block;
+ width: 100%;
+ height: 100%;
+ background-color: #e0e0e0;
+ background-image: linear-gradient(
+ 90deg,
+ #e0e0e0 0px,
+ #f0f0f0 40px,
+ #e0e0e0 80px
+ );
+ background-size: 200px 100%;
+ background-repeat: no-repeat;
+ border-radius: 4px;
+ animation: ${shimmer} 1.5s infinite linear;
+`;
+
+export const Skeleton: React.FC<{
+ width?: string;
+ height?: string;
+ flexSrink?: string;
+}> = ({ width, height }) => {
+ return
+ {t(StrCode.Screen)}
+ {product.screen}
+
+
+
+ {t(StrCode.Capacity)}
+ {product.capacity}
+
+
+
+ {t(StrCode.Ram)}
+ {product.ram}
+
+