+
+
+
+
+ {bannerImgs.map((img, imgIdx) => {
+ let position = 'nextSlide';
+
+ if (imgIdx === index) {
+ position = 'activeSlide';
+ }
+
+ if (
+ imgIdx === index - 1 ||
+ (index === 0 && imgIdx === bannerImgs.length - 1)
+ ) {
+ position = 'lastSlide';
+ }
+
+ return (
+
+ ![{img.url.split('-')[1].split('.')[0].toUpperCase()}]({img.url})
+
+ );
+ })}
+
+
+
+
+
+ {img.title}
+{img.subtitle}
+ +
+
+ -
+ {getTotalImgs().map(idx => {
+ return (
+ ) => {
+ e.preventDefault();
+ setIndex(idx);
+ }}
+ >
+
+
+ );
+ })}
+
+
+ );
+};
diff --git a/src/components/CartCheckout/CartCheckout.style.scss b/src/components/CartCheckout/CartCheckout.style.scss
new file mode 100644
index 0000000000..aabaafe451
--- /dev/null
+++ b/src/components/CartCheckout/CartCheckout.style.scss
@@ -0,0 +1,44 @@
+.cartCheckout {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 24px;
+ margin-block: 32px;
+ grid-column: 1/-1;
+ gap: 16px;
+ border: 1px solid $c-elements;
+ height: 200px;
+
+ @include on-desktop {
+ grid-column: span 8;
+ margin: 0;
+ }
+
+ &__container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ }
+ &__totalItems {
+ font-size: 14px;
+ font-family: Mont, sans-serif;
+ font-weight: regular;
+ color: $c-secondary;
+ }
+ &__button {
+ width: 100%;
+ position: relative;
+ margin: 16px;
+ &::before {
+ content: '';
+ position: absolute;
+ top: -16px;
+ left: 0;
+ height: 1px;
+ width: 100%;
+ background-color: $c-elements;
+ }
+ }
+}
diff --git a/src/components/CartGrid/CartGrid.component.tsx b/src/components/CartGrid/CartGrid.component.tsx
new file mode 100644
index 0000000000..0266f8b33e
--- /dev/null
+++ b/src/components/CartGrid/CartGrid.component.tsx
@@ -0,0 +1,18 @@
+import { ProductSummary } from '../../types/ProductSummary';
+import { CartProductCard } from '../CartProductCard/CartProductCard.component';
+
+type Props = {
+ cart: ProductSummary[];
+};
+
+export const CartGrid: React.FC
+
+ {`$${totalPrice}`}
+{`Total for ${totalCartItems} ${totalCartItems < 2 ? 'item' : 'items'}`}
+
+
+
+ {cart.map(product => (
+
+
+ );
+};
diff --git a/src/components/CartGrid/CartGrid.style.scss b/src/components/CartGrid/CartGrid.style.scss
new file mode 100644
index 0000000000..5be5674548
--- /dev/null
+++ b/src/components/CartGrid/CartGrid.style.scss
@@ -0,0 +1,11 @@
+.cartGrid {
+ grid-column: 1/-1;
+ row-gap: 16px;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+
+ @include on-desktop {
+ grid-column: span 16;
+ }
+}
diff --git a/src/components/CartProductCard/CartProductCard.component.tsx b/src/components/CartProductCard/CartProductCard.component.tsx
new file mode 100644
index 0000000000..3905c2bab3
--- /dev/null
+++ b/src/components/CartProductCard/CartProductCard.component.tsx
@@ -0,0 +1,77 @@
+import { useContext } from 'react';
+import { Icon } from '../base/Icon/Icon.component';
+import {
+ DispatchContext,
+ StatesContext,
+} from '../../store/GlobalStateProvider';
+import { ProductSummary } from '../../types/ProductSummary';
+
+type Props = {
+ product: ProductSummary;
+};
+
+export const CartProductCard: React.FC
+
+ );
+};
diff --git a/src/components/CartProductCard/CartProductCard.style.scss b/src/components/CartProductCard/CartProductCard.style.scss
new file mode 100644
index 0000000000..47a0c24fb5
--- /dev/null
+++ b/src/components/CartProductCard/CartProductCard.style.scss
@@ -0,0 +1,71 @@
+.cartCard {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-evenly;
+ height: 160px;
+ width: 100%;
+ padding: 16px;
+ border: 1px solid $c-elements;
+ gap: 16px;
+
+ @include on-tablet {
+ flex-direction: row;
+ height: 128px;
+ padding: 24px;
+ gap: 24px;
+ }
+
+ @include on-desktop {
+ flex-direction: row;
+ }
+ &__image {
+ height: 100%;
+ width: 100%;
+ object-fit: contain;
+ }
+ &__container {
+ width: 100%;
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
+ gap: 16px;
+ height: 80px;
+
+ @include on-tablet {
+ gap: 24px;
+ }
+
+ @include on-desktop {
+ gap: 24px;
+ }
+ }
+ &__counterAndPrice {
+ display: flex;
+ width: 100%;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+
+ @include on-tablet {
+ justify-content: space-evenly;
+ }
+
+ @include on-desktop {
+ justify-content: space-evenly;
+ }
+ }
+ &__counter {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-direction: row;
+ &-number {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 32px;
+ height: 32px;
+ }
+ }
+}
diff --git a/src/components/CategoryTitle/CategoryTitle.component.tsx b/src/components/CategoryTitle/CategoryTitle.component.tsx
new file mode 100644
index 0000000000..9e6fdcf162
--- /dev/null
+++ b/src/components/CategoryTitle/CategoryTitle.component.tsx
@@ -0,0 +1,17 @@
+type Props = {
+ title: string;
+ productsCount?: number;
+};
+
+export const CategoryTitle: React.FC
+ 
+
+ {product.name}
+
+
+
+
+ + {product.quantity && `$${product.price * product.quantity}`} +
+{title}
+ {title !== 'Cart' && ( + + {productsCount} {title === 'Favorites' ? 'item(s)' : 'model(s)'} + + )} +{page}
+
+ );
+ }
+
+ function createDots() {
+ return ...
;
+ }
+
+ if (!totalPages) {
+ return No pages
;
+ }
+
+ if (totalPages < 7) {
+ for (let i = 1; i <= totalPages; i++) {
+ pagination.push(createLink(i));
+ }
+
+ return pagination;
+ }
+
+ while (p <= totalPages) {
+ if (
+ p <= 2 ||
+ p >= totalPages - 2 ||
+ (p >= currentPage - 1 && p <= currentPage + 1)
+ ) {
+ pagination.push(createLink(p));
+ p++;
+ } else {
+ pagination.push(createDots());
+ p = p < currentPage ? currentPage - 1 : totalPages - 2;
+ }
+ }
+
+ return pagination;
+};
diff --git a/src/components/Pagination/Pagination.component.tsx b/src/components/Pagination/Pagination.component.tsx
new file mode 100644
index 0000000000..7e0e74b447
--- /dev/null
+++ b/src/components/Pagination/Pagination.component.tsx
@@ -0,0 +1,48 @@
+import cn from 'classnames';
+import { NumberPaginator } from './NumberPaginator/NumberPaginator.component';
+
+type Props = {
+ pageNumbers: number[];
+ currentPage: number;
+ onPageClick: (page: number) => void;
+};
+
+export const Pagination: React.FC
+ {
+ e.preventDefault();
+ onPageClick(currentPage - 1);
+ }}
+ >
+
+ );
+};
diff --git a/src/components/Pagination/Pagination.style.scss b/src/components/Pagination/Pagination.style.scss
new file mode 100644
index 0000000000..e0cfaa6432
--- /dev/null
+++ b/src/components/Pagination/Pagination.style.scss
@@ -0,0 +1,35 @@
+.pagination {
+ grid-column: 1/-1;
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ gap: 16px;
+ &__numbers {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ justify-content: center;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ }
+ &__item {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: 1px solid $c-elements;
+ height: 32px;
+ width: 32px;
+ &--active {
+ background-color: $c-primary;
+ }
+ }
+ &__link {
+ text-decoration: none;
+ color: $c-primary;
+ &--active {
+ color: $c-white;
+ }
+ }
+}
diff --git a/src/components/ProductDetailsCarousel/ProductDetailsCarousel.component.tsx b/src/components/ProductDetailsCarousel/ProductDetailsCarousel.component.tsx
new file mode 100644
index 0000000000..ee480cb6d1
--- /dev/null
+++ b/src/components/ProductDetailsCarousel/ProductDetailsCarousel.component.tsx
@@ -0,0 +1,127 @@
+import { TouchEvent, useContext, useEffect, useState } from 'react';
+import { StatesContext } from '../../store/GlobalStateProvider';
+import cn from 'classnames';
+
+export const ProductDetailsCarousel = () => {
+ const { selectedProduct } = useContext(StatesContext);
+ const [index, setIndex] = useState
+ <
+
+
+
+ >
+
+
+
+
+ );
+ }
+
+ return;
+};
diff --git a/src/components/ProductDetailsCarousel/ProductDetailsCarousel.style.scss b/src/components/ProductDetailsCarousel/ProductDetailsCarousel.style.scss
new file mode 100644
index 0000000000..063fe63068
--- /dev/null
+++ b/src/components/ProductDetailsCarousel/ProductDetailsCarousel.style.scss
@@ -0,0 +1,121 @@
+.carousel {
+ display: flex;
+ width: 100%;
+ flex-direction: column;
+ padding-top: 8px;
+ padding-bottom: 16px;
+ gap: 8px;
+
+ @include on-tablet {
+ grid-column: 1 / span 7;
+ grid-row: 1;
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+
+ @include on-desktop {
+ grid-column: 1 / span 12;
+ grid-row: 1;
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+ &__container {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ height: 100%;
+
+ @include on-tablet {
+ display: grid;
+ grid-template: repeat(7, 1fr);
+ column-gap: 16px;
+ }
+
+ @include on-desktop {
+ display: grid;
+ grid-template-columns: repeat(12, 32px);
+ column-gap: 16px;
+ }
+ }
+ &__frame {
+ cursor: grab;
+ display: flex;
+ width: 100%;
+ height: 0;
+ padding-top: 100%;
+ overflow: hidden;
+ position: relative;
+
+ @include on-tablet {
+ grid-column: 2 / span 6;
+ }
+
+ @include on-desktop {
+ grid-column: 3 / span 10;
+ }
+ }
+ &__item {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ justify-content: center;
+ position: absolute;
+ transition: all $transition-duration;
+ &--activetSlide {
+ opacity: 1;
+ }
+ &--lastSlide {
+ opacity: 0;
+ }
+ &--nextSlide {
+ opacity: 0;
+ }
+ }
+ &__img-preview {
+ @include on-tablet {
+ grid-column: 1 / span 1;
+ grid-row: 1;
+ }
+
+ @include on-desktop {
+ grid-column: 1 / span 2;
+ grid-row: 1;
+ }
+ &-list {
+ display: flex;
+ align-items: center;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ gap: 8px;
+ height: 50px;
+
+ @include on-tablet {
+ flex-direction: column;
+ }
+
+ @include on-desktop {
+ flex-direction: column;
+ }
+ }
+ &-item {
+ height: 50px;
+ width: 50px;
+ border: 1px solid $c-elements;
+ transition: all $transition-duration;
+ &--active {
+ border: 1px solid $c-primary;
+ }
+ &:hover {
+ border: 1px solid $c-primary;
+ }
+ }
+ &-image {
+ height: 100%;
+ width: 100%;
+ object-fit: contain;
+ }
+ }
+}
diff --git a/src/components/ProductDetailsDescription/ProductDetailsDescription.component.tsx b/src/components/ProductDetailsDescription/ProductDetailsDescription.component.tsx
new file mode 100644
index 0000000000..be46f994ec
--- /dev/null
+++ b/src/components/ProductDetailsDescription/ProductDetailsDescription.component.tsx
@@ -0,0 +1,30 @@
+import { useContext } from 'react';
+import { StatesContext } from '../../store/GlobalStateProvider';
+import { Line } from '../base/Line/Line.component';
+
+export const ProductDetailsDescription = () => {
+ const { selectedProduct } = useContext(StatesContext);
+
+ if (selectedProduct) {
+ return (
+
+
+
+ {selectedProduct.images.map((img, imgIdx) => {
+ let position = 'nextSlide';
+
+ if (imgIdx === index) {
+ position = 'activeSlide';
+ }
+
+ if (
+ imgIdx === index - 1 ||
+ (index === 0 && imgIdx === selectedProduct.images.length - 1)
+ ) {
+ position = 'lastSlide';
+ }
+
+ return (
+
+
+ 
+
+ );
+ })}
+
+
+ -
+ {selectedProduct.images.map((img, idx) => (
+
-
+ ) => {
+ e.preventDefault();
+ setIndex(idx);
+ }}
+ >
+
+ ))}
+
+
+ );
+ }
+
+ return 'selectedProduct not found';
+};
diff --git a/src/components/ProductDetailsDescription/ProductDetailsDescription.style.scss b/src/components/ProductDetailsDescription/ProductDetailsDescription.style.scss
new file mode 100644
index 0000000000..4aa0fbaa93
--- /dev/null
+++ b/src/components/ProductDetailsDescription/ProductDetailsDescription.style.scss
@@ -0,0 +1,19 @@
+.productDetailsDescription {
+ grid-column: 1/-1;
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+ &__header {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ }
+ &__desc {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ }
+ &__text {
+ color: $c-secondary;
+ }
+}
diff --git a/src/components/ProductDetailsMain/ProductDetailsMain.component.tsx b/src/components/ProductDetailsMain/ProductDetailsMain.component.tsx
new file mode 100644
index 0000000000..c37ec130a9
--- /dev/null
+++ b/src/components/ProductDetailsMain/ProductDetailsMain.component.tsx
@@ -0,0 +1,85 @@
+import { useContext, useEffect, useState } from 'react';
+import { StatesContext } from '../../store/GlobalStateProvider';
+// eslint-disable-next-line max-len
+import { Line } from '../base/Line/Line.component';
+import cn from 'classnames';
+import { Price } from '../base/Price/Price.component';
+import { getProductsSummary } from '../../api/products';
+import { ProductSummary } from '../../types/ProductSummary';
+import { CardButtons } from '../base/CardButtons/CardButtons.component';
+import { SpecsMini } from '../base/SpecsMini/SpecsMini.component';
+import { colors } from '../../utils/colors';
+
+export const ProductDetailsMain: React.FC = () => {
+ const { selectedProduct } = useContext(StatesContext);
+ const [product, setProduct] = useState
+
+ {selectedProduct.description.map((desc, idx) => (
+ About
+
+
+ ))}
+ {desc.title}
+ {desc.text.map((t, i) => ( + + {t} + + ))} +
+
+ );
+ }
+
+ return 'no selectedProduct';
+};
diff --git a/src/components/ProductDetailsMain/ProductDetailsMain.style.scss b/src/components/ProductDetailsMain/ProductDetailsMain.style.scss
new file mode 100644
index 0000000000..2c12424191
--- /dev/null
+++ b/src/components/ProductDetailsMain/ProductDetailsMain.style.scss
@@ -0,0 +1,99 @@
+.productDetailsMain {
+ grid-row: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+
+ @include on-tablet {
+ grid-column: 8 / span 5;
+ grid-row: 1;
+ }
+
+ @include on-desktop {
+ grid-column: 14 / span 7;
+ grid-row: 1;
+ }
+
+ h2 {
+ grid-column: 1/-1;
+ }
+
+ &__colors {
+ grid-column: 1/-1;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ cursor: pointer;
+
+ &-text {
+ color: $c-secondary;
+ }
+ &-button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 50%;
+ width: 100%;
+ height: 100%;
+ border: 2px solid $c-white;
+ &-bg {
+ margin: 0;
+ padding: 0;
+ border: 1px solid $c-elements;
+ border-radius: 50%;
+ width: 32px;
+ height: 32px;
+ background-color: transparent;
+ transition: all $transition-duration;
+ &--selected, &:hover {
+ border: 1px solid $c-primary;
+ }
+ }
+ }
+ &-button-container {
+ grid-column: 1/-1;
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+ }
+ }
+ &__capacity {
+ grid-column: 1/-1;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ &-text {
+ color: $c-secondary;
+ }
+ &-container {
+ display: flex;
+ flex-direction: row;
+ height: 32px;
+ gap: 8px;
+ }
+ &-button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: $c-primary;
+ background: $c-white;
+ border: 1px solid $c-icons;
+ height: 100%;
+ width: auto;
+ padding-inline: 8px;
+ transition: all $transition-duration;
+ &--selected,
+ &:hover {
+ color: $c-white;
+ background: $c-primary;
+ }
+ }
+ }
+ &__price {
+ grid-column: 1/-1;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ margin-block: 8px;
+ }
+}
diff --git a/src/components/ProductDetailsSpecs/ProductDetailsSpecs.component.tsx b/src/components/ProductDetailsSpecs/ProductDetailsSpecs.component.tsx
new file mode 100644
index 0000000000..4006c05dd9
--- /dev/null
+++ b/src/components/ProductDetailsSpecs/ProductDetailsSpecs.component.tsx
@@ -0,0 +1,68 @@
+import { useContext } from 'react';
+import { StatesContext } from '../../store/GlobalStateProvider';
+import { Line } from '../base/Line/Line.component';
+
+export const ProductDetailsSpecs = () => {
+ const { selectedProduct } = useContext(StatesContext);
+
+ if (selectedProduct) {
+ return (
+
+
+ Available colors
+
+
+
+ {selectedProduct.colorsAvailable.map((c, i) => (
+
+ ))}
+
+
+
+ Select capacity
+
+
+
+ {selectedProduct.capacityAvailable.map((c, i) => (
+
+ ))}
+
+
+
+
+
+ );
+ }
+
+ return 'something wrong';
+};
diff --git a/src/components/ProductDetailsSpecs/ProductDetailsSpecs.style.scss b/src/components/ProductDetailsSpecs/ProductDetailsSpecs.style.scss
new file mode 100644
index 0000000000..3b20be1b44
--- /dev/null
+++ b/src/components/ProductDetailsSpecs/ProductDetailsSpecs.style.scss
@@ -0,0 +1,24 @@
+.productDetailsSpecs {
+ grid-column: 1/-1;
+ display: flex;
+ flex-direction: column;
+ gap: 30px;
+ &__title {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ }
+ &__specs {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ }
+ &__line {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ }
+ &__key {
+ color: $c-secondary;
+ }
+}
diff --git a/src/components/ProductGrid/ProductGrid.component.tsx b/src/components/ProductGrid/ProductGrid.component.tsx
new file mode 100644
index 0000000000..32ec7f6281
--- /dev/null
+++ b/src/components/ProductGrid/ProductGrid.component.tsx
@@ -0,0 +1,119 @@
+import { useEffect, useMemo, useState } from 'react';
+import { ProductCard } from '../base/ProductCard/ProductCard.component';
+import { ProductSummary } from '../../types/ProductSummary';
+import { getPageNumbers } from '../../utils/getPageNumbers';
+import { Pagination } from '../Pagination/Pagination.component';
+import { SortOptions } from '../SortOptions/SortOptions.component';
+import { useSearchParams } from 'react-router-dom';
+
+type Props = {
+ productsArray: ProductSummary[];
+ pagination?: boolean;
+};
+function getVisibleProducts(
+ products: ProductSummary[],
+ page: number,
+ perPage: number,
+) {
+ const start = (page - 1) * perPage;
+ const end = start + perPage;
+
+ return products.slice(start, end);
+}
+
+export const ProductGrid: React.FC
+
+ Tech specs
+
+
+
+
+ Screen
+
+ {selectedProduct.screen}
+
+
+
+ Resolution
+
+ {selectedProduct.resolution}
+
+
+
+ Processor
+
+ {selectedProduct.processor}
+
+
+
+ {selectedProduct.category !== 'accessories' && (
+ <>
+ RAM
+
+ {selectedProduct.ram}
+
+
+
+ Camera
+
+ {selectedProduct.camera}
+
+
+
+
+ )}
+ Zoom
+
+ {selectedProduct.zoom}
+
+
+
+ Cell
+
+ {selectedProduct.cell.join(', ')}
+
+ Shop by category
+
+ {categories.map(cat => (
+
+
+
+ 
+
+
+
+
+
+ ))}
+
+
+ {cat.title}
+ + {cat.productsCount} models + +
+ Sort by:
+
+
+
+ Items on page:
+
+
+ Welcome to Nice Gadgets store!
+
+ {title}
+
+ );
+};
diff --git a/src/components/base/Button/Button.style.scss b/src/components/base/Button/Button.style.scss
new file mode 100644
index 0000000000..b044e7e0d3
--- /dev/null
+++ b/src/components/base/Button/Button.style.scss
@@ -0,0 +1,25 @@
+.button {
+ cursor: pointer;
+ width: 100%;
+ height: 40px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: none;
+ background: $c-primary;
+ font-family: Mont, sans-serif;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 21px;
+ color: $c-white;
+ &--cart {
+ &-added {
+ border: 1px solid $c-elements;
+ color: $c-green;
+ background-color: $c-white;
+ }
+ }
+ &--checkout {
+ width: 100%;
+ }
+}
diff --git a/src/components/base/CardButtons/CardButtons.component.tsx b/src/components/base/CardButtons/CardButtons.component.tsx
new file mode 100644
index 0000000000..2edd44bad8
--- /dev/null
+++ b/src/components/base/CardButtons/CardButtons.component.tsx
@@ -0,0 +1,72 @@
+import { useContext, useState, useEffect } from 'react';
+// eslint-disable-next-line max-len
+import {
+ StatesContext,
+ DispatchContext,
+} from '../../../store/GlobalStateProvider';
+import { ProductSummary } from '../../../types/ProductSummary';
+import { Button } from '../Button/Button.component';
+import { Icon } from '../Icon/Icon.component';
+
+type Props = {
+ product: ProductSummary;
+};
+
+export const CardButtons: React.FC
+
+
+ );
+};
diff --git a/src/components/base/CardButtons/CardButtons.style.scss b/src/components/base/CardButtons/CardButtons.style.scss
new file mode 100644
index 0000000000..34df1626fa
--- /dev/null
+++ b/src/components/base/CardButtons/CardButtons.style.scss
@@ -0,0 +1,7 @@
+.cardButtons {
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+ align-items: center;
+ justify-content: space-between;
+}
diff --git a/src/components/base/Footer/Footer.component.tsx b/src/components/base/Footer/Footer.component.tsx
new file mode 100644
index 0000000000..2764f9c8a8
--- /dev/null
+++ b/src/components/base/Footer/Footer.component.tsx
@@ -0,0 +1,43 @@
+import { Icon } from '../Icon/Icon.component';
+
+export const Footer = () => {
+ return (
+
+ );
+};
diff --git a/src/components/base/Footer/Footer.style.scss b/src/components/base/Footer/Footer.style.scss
new file mode 100644
index 0000000000..95a914f186
--- /dev/null
+++ b/src/components/base/Footer/Footer.style.scss
@@ -0,0 +1,82 @@
+.footer {
+ grid-column: 1/-1;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ gap: 32px;
+ padding-block: 32px;
+ padding-inline: 16px;
+ margin-block: 24px;
+ box-shadow: 0 -1px 0 0 #e2e6e9;
+
+ a {
+ text-decoration: none;
+ }
+
+ @include on-tablet {
+ flex-direction: row;
+ padding-inline: 24px
+ }
+
+ @include on-desktop {
+ flex-direction: row;
+ padding-inline: 32px
+ }
+
+ &__logo {
+ display: flex;
+ width: 100%;
+ height: 32px;
+ }
+ &__nav {
+ display: flex;
+ width: 100%;
+ align-items: center;
+ &-list {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ flex-direction: column;
+ gap: 16px;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+
+ @include on-tablet {
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ @include on-desktop {
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ }
+ }
+ &-link {
+ text-decoration: none;
+ text-transform: uppercase;
+ color: $c-secondary;
+ font-family: Mont-bold, sans-serif;
+ font-weight: 800;
+ font-size: 12px;
+ }
+ }
+ &__backTop {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ gap: 16px;
+
+ @include on-tablet {
+ justify-content: end;
+ }
+
+ @include on-desktop {
+ justify-content: end;
+ }
+ }
+}
diff --git a/src/components/base/Header/Header.component.tsx b/src/components/base/Header/Header.component.tsx
new file mode 100644
index 0000000000..10d0acc79a
--- /dev/null
+++ b/src/components/base/Header/Header.component.tsx
@@ -0,0 +1,70 @@
+import { useContext } from 'react';
+import useMediaQuery from '../../../utils/useMediaQuery';
+import { Icon } from '../../base/Icon/Icon.component';
+import { Nav } from '../../base/Nav/Nav.component';
+import cn from 'classnames';
+import {
+ DispatchContext,
+ StatesContext,
+} from '../../../store/GlobalStateProvider';
+import { Link } from 'react-router-dom';
+
+export const Header = () => {
+ const dispatch = useContext(DispatchContext);
+ const { isMenuOpen } = useContext(StatesContext);
+ const { favorites, totalCartItems } = useContext(StatesContext);
+ const isMobile = useMediaQuery('(max-width: 640px');
+ const handleClick = () => {
+ if (isMobile) {
+ if (isMenuOpen) {
+ dispatch({ type: 'isMenuOpen', payload: false });
+ } else {
+ dispatch({ type: 'isMenuOpen', payload: true });
+ }
+ }
+
+ return isMenuOpen;
+ };
+
+ return (
+
+
+
+ 
+
+
+
+ {!isMobile && }
+
+
+ {isMobile ? (
+
+
+ = ({ navStyle }) => {
+ const [categories, setCategories] = useState([]);
+ const dispatch = useContext(DispatchContext);
+ const { isMenuOpen } = useContext(StatesContext);
+ const isMobile = useMediaQuery('(max-width: 640px');
+ const handleClick = () => {
+ if (isMobile) {
+ if (isMenuOpen) {
+ dispatch({ type: 'isMenuOpen', payload: false });
+ } else {
+ dispatch({ type: 'isMenuOpen', payload: true });
+ }
+ }
+
+ return isMenuOpen;
+ };
+
+ useEffect(() => {
+ getCategories().then(cats => setCategories(cats));
+ }, []);
+
+ return (
+
+ );
+};
diff --git a/src/components/base/Nav/Nav.style.scss b/src/components/base/Nav/Nav.style.scss
new file mode 100644
index 0000000000..1e8d9c5db2
--- /dev/null
+++ b/src/components/base/Nav/Nav.style.scss
@@ -0,0 +1,66 @@
+.nav {
+ display: flex;
+
+ &__list {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ &--menu {
+ gap: 16px;
+ flex-direction: column;
+ }
+ &--bar {
+ @include on-tablet {
+ gap: 32px;
+ }
+
+ @include on-desktop {
+ gap: 64px;
+ }
+ }
+ }
+ &__link {
+ @extend %uppercase;
+
+ text-align: left;
+ text-decoration: none;
+ color: $c-secondary;
+ position: relative;
+ transition: all $transition-duration;
+ &::after {
+ content: '';
+ position: absolute;
+ height: 1px;
+ width: 100%;
+ bottom: 0;
+ background: $c-primary;
+ transition: all $transition-duration;
+ transform: scaleX(0);
+ }
+ &:hover {
+ transition: all $transition-duration;
+ color: $c-primary;
+ &::after{
+ transform: scaleX(1);
+ }
+ }
+
+
+ &--bar {
+ line-height: 48px;
+
+ @include on-desktop {
+ line-height: 64px;
+ }
+ }
+ &--menu {
+ padding-block: 8px;
+ &:hover::after {
+ height: 2px;
+ }
+ }
+ }
+}
diff --git a/src/components/base/Price/Price.component.tsx b/src/components/base/Price/Price.component.tsx
new file mode 100644
index 0000000000..808a9db31b
--- /dev/null
+++ b/src/components/base/Price/Price.component.tsx
@@ -0,0 +1,35 @@
+import { ProductSummary } from '../../../types/ProductSummary';
+import { calculateDiscount } from '../../../utils/calculateDiscount';
+
+type Props = {
+ showDiscount?: boolean;
+ product: ProductSummary;
+};
+
+export const Price: React.FC = ({ showDiscount, product }) => {
+ if (product) {
+ return (
+ = ({ product, showDiscount }) => {
+ return (
+ = ({
+ title,
+ products,
+ showDiscount,
+}) => {
+ const [index, setIndex] = useState(0);
+ const [cardWidth, setCardWidth] = useState(0);
+ const [onScreenCount, setOnScreenCount] = useState(0);
+ const [scrollSteps, setScrollSteps] = useState(0);
+ const cardRef = useRef(null);
+ const frameRef = useRef(null);
+ const sliderRef = useRef(null);
+ const [touchPosition, setTouchPosition] = useState(null);
+
+ const configureSlider = useCallback(() => {
+ const { current: card } = cardRef;
+ const { current: frame } = frameRef;
+ const { current: slider } = sliderRef;
+
+ if (card && frame && slider) {
+ setCardWidth(card.offsetWidth + cardGap * 2);
+ setOnScreenCount(Math.floor(frame.offsetWidth / cardWidth));
+ setScrollSteps(Math.floor(slider.offsetWidth / cardWidth));
+ }
+ }, [cardRef, sliderRef, frameRef, cardWidth]);
+
+ const prev = () => {
+ if (index < 0) {
+ setIndex(index + scrollSteps);
+ }
+ };
+
+ const next = () => {
+ if (index > -(products.length - 1 - onScreenCount)) {
+ setIndex(index - scrollSteps);
+ }
+ };
+
+ const handleTouchStart = (e: TouchEvent) => {
+ const touchDown = e.touches[0].clientX;
+
+ setTouchPosition(touchDown);
+ };
+
+ const handleTouchMove = (e: TouchEvent) => {
+ const touchDown = touchPosition;
+
+ if (touchDown === null) {
+ return;
+ }
+
+ const currentTouch = e.touches[0].clientX;
+ const diff = touchDown - currentTouch;
+
+ if (diff > 8) {
+ next();
+ }
+
+ if (diff < -8) {
+ prev();
+ }
+
+ setTouchPosition(null);
+ };
+
+ useEffect(() => {
+ configureSlider();
+ }, [configureSlider, products]);
+
+ return (
+
+
+ );
+};
diff --git a/src/components/base/ProductSlider/ProductSlider.style.scss b/src/components/base/ProductSlider/ProductSlider.style.scss
new file mode 100644
index 0000000000..5fac9a411b
--- /dev/null
+++ b/src/components/base/ProductSlider/ProductSlider.style.scss
@@ -0,0 +1,49 @@
+.productSlider {
+ grid-column: 1/-1;
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+
+ &__header {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ &-icons {
+ display: flex;
+ flex-direction: row;
+ gap: 16px;
+ }
+ }
+ &__frame {
+ width: 100%;
+ overflow: hidden;
+ }
+ &__list {
+ transition: $transition-duration;
+ width: 100%;
+ display: grid;
+ grid-auto-columns: $grid-auto-col-mobile;
+ grid-auto-flow: column;
+ column-gap: 16px;
+
+ @include on-tablet {
+ grid-auto-columns: $grid-auto-col-tablet;
+ }
+
+ @include on-desktop {
+ grid-auto-columns: 32px;
+ }
+ }
+
+ &__card {
+ grid-column: span $gridSpan-slider-card-mobile;
+
+ @include on-tablet {
+ grid-column: span $gridSpan-slider-card-tablet;
+ }
+
+ @include on-desktop {
+ grid-column: span $gridSpan-slider-card-desktop;
+ }
+ }
+}
diff --git a/src/components/base/SpecsMini/SpecsMini.component.tsx b/src/components/base/SpecsMini/SpecsMini.component.tsx
new file mode 100644
index 0000000000..657d601a06
--- /dev/null
+++ b/src/components/base/SpecsMini/SpecsMini.component.tsx
@@ -0,0 +1,24 @@
+import { ProductSummary } from '../../../types/ProductSummary';
+
+type Props = {
+ product: ProductSummary;
+};
+
+export const SpecsMini: React.FC = ({ product }) => {
+ return (
+
+
+
+ );
+};
diff --git a/src/pages/Cart/Cart.style.scss b/src/pages/Cart/Cart.style.scss
new file mode 100644
index 0000000000..dea157abd9
--- /dev/null
+++ b/src/pages/Cart/Cart.style.scss
@@ -0,0 +1,10 @@
+.cart-page {
+ &__link {
+ text-decoration: none;
+ }
+
+ padding-block: 24px;
+
+ @include grid-page;
+ @include inline-padding;
+}
diff --git a/src/pages/Catalog/Catalog.page.tsx b/src/pages/Catalog/Catalog.page.tsx
new file mode 100644
index 0000000000..abb1f7d5a1
--- /dev/null
+++ b/src/pages/Catalog/Catalog.page.tsx
@@ -0,0 +1,47 @@
+import { Navigate, useParams } from 'react-router-dom';
+// eslint-disable-next-line max-len
+import { ProductGrid } from '../../components/ProductGrid/ProductGrid.component';
+// eslint-disable-next-line max-len
+import { CategoryTitle } from '../../components/CategoryTitle/CategoryTitle.component';
+// eslint-disable-next-line max-len
+import { NavigationPath } from '../../components/NavigationPath/NavigationPath.component';
+import { StatesContext } from '../../store/GlobalStateProvider';
+import { useContext, useEffect, useState } from 'react';
+import { getCategoryByCatId } from '../../api/products';
+import { Category } from '../../types/Category';
+
+export const CatalogPage: React.FC = () => {
+ const { category: categoryId } = useParams();
+ const { products } = useContext(StatesContext);
+ const [category, setCategory] = useState();
+ const [isReady, setIsReady] = useState(false);
+
+ useEffect(() => {
+ if (categoryId) {
+ getCategoryByCatId(categoryId)
+ .then(cat => {
+ setCategory(cat);
+ })
+ .finally(() => setIsReady(true));
+ }
+ }, [categoryId]);
+
+ if (isReady && !category) {
+ return
+
+ );
+ } else {
+ return 'Loading... Wait a second!';
+ }
+};
diff --git a/src/pages/Catalog/Catalog.style.scss b/src/pages/Catalog/Catalog.style.scss
new file mode 100644
index 0000000000..69cfad4abf
--- /dev/null
+++ b/src/pages/Catalog/Catalog.style.scss
@@ -0,0 +1,7 @@
+.catalog-page {
+ row-gap: 24px;
+ padding-block: 24px;
+
+ @include grid-page;
+ @include inline-padding;
+}
diff --git a/src/pages/Favorites/Favorites.page.tsx b/src/pages/Favorites/Favorites.page.tsx
new file mode 100644
index 0000000000..af8902606a
--- /dev/null
+++ b/src/pages/Favorites/Favorites.page.tsx
@@ -0,0 +1,20 @@
+// eslint-disable-next-line max-len
+import { CategoryTitle } from '../../components/CategoryTitle/CategoryTitle.component';
+// eslint-disable-next-line max-len
+import { NavigationPath } from '../../components/NavigationPath/NavigationPath.component';
+// eslint-disable-next-line max-len
+import { ProductGrid } from '../../components/ProductGrid/ProductGrid.component';
+import { StatesContext } from '../../store/GlobalStateProvider';
+import { useContext } from 'react';
+
+export const FavoritesPage = () => {
+ const { favorites } = useContext(StatesContext);
+
+ return (
+
+
+ );
+};
diff --git a/src/pages/Favorites/Favorites.style.scss b/src/pages/Favorites/Favorites.style.scss
new file mode 100644
index 0000000000..02386818cb
--- /dev/null
+++ b/src/pages/Favorites/Favorites.style.scss
@@ -0,0 +1,7 @@
+.favorites-page {
+ row-gap: 24px;
+ padding-block: 24px;
+
+ @include grid-page;
+ @include inline-padding;
+}
diff --git a/src/pages/Home/Home.page.tsx b/src/pages/Home/Home.page.tsx
new file mode 100644
index 0000000000..1d4ebd21e1
--- /dev/null
+++ b/src/pages/Home/Home.page.tsx
@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+// eslint-disable-next-line max-len
+import { ProductSlider } from '../../components/base/ProductSlider/ProductSlider.component';
+// eslint-disable-next-line max-len
+import { ShopByCategory } from '../../components/ShopByCategory/ShopByCategory.component';
+import { Welcome } from '../../components/Welcome/Welcome.component';
+import { calculateDiscount } from '../../utils/calculateDiscount';
+import { getProductsSummary } from '../../api/products';
+import { ProductSummary } from '../../types/ProductSummary';
+
+export const HomePage = () => {
+ const [sortByYear, setSortByYear] = useState([]);
+ const [sortByDiscount, setSortByDiscount] = useState([]);
+
+ useEffect(() => {
+ getProductsSummary().then(products => {
+ setSortByYear([...products].sort((a, b) => b.year - a.year));
+ setSortByDiscount(
+ [...products].sort(
+ (a, b) => calculateDiscount(b) - calculateDiscount(a),
+ ),
+ );
+ });
+ }, []);
+
+ return (
+
+ 
+
+);
diff --git a/src/pages/NotFound/NotFound.style.scss b/src/pages/NotFound/NotFound.style.scss
new file mode 100644
index 0000000000..217b525972
--- /dev/null
+++ b/src/pages/NotFound/NotFound.style.scss
@@ -0,0 +1,13 @@
+.notFound {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ width: 100%;
+ justify-content: center;
+ align-items: center;
+ &__image {
+ height: 50%;
+ width: 50%;
+ margin: 40px;
+ }
+}
diff --git a/src/pages/ProductDetails/ProductDetails.page.tsx b/src/pages/ProductDetails/ProductDetails.page.tsx
new file mode 100644
index 0000000000..006af85079
--- /dev/null
+++ b/src/pages/ProductDetails/ProductDetails.page.tsx
@@ -0,0 +1,76 @@
+import { useContext, useEffect, useState } from 'react';
+// eslint-disable-next-line max-len
+import { NavigationPath } from '../../components/NavigationPath/NavigationPath.component';
+import {
+ DispatchContext,
+ StatesContext,
+} from '../../store/GlobalStateProvider';
+import { useParams } from 'react-router-dom';
+import { getProductsSummary, locateProduct } from '../../api/products';
+import { BackPath } from '../../components/BackPath/BackPath.component';
+// eslint-disable-next-line max-len
+import { ProductDetailsMain } from '../../components/ProductDetailsMain/ProductDetailsMain.component';
+// eslint-disable-next-line max-len
+import { ProductDetailsDescription } from '../../components/ProductDetailsDescription/ProductDetailsDescription.component';
+// eslint-disable-next-line max-len
+import { ProductDetailsSpecs } from '../../components/ProductDetailsSpecs/ProductDetailsSpecs.component';
+// eslint-disable-next-line max-len
+import { ProductSlider } from '../../components/base/ProductSlider/ProductSlider.component';
+import { ProductSummary } from '../../types/ProductSummary';
+// eslint-disable-next-line max-len
+import { ProductDetailsCarousel } from '../../components/ProductDetailsCarousel/ProductDetailsCarousel.component';
+
+export const ProductDetailsPage = () => {
+ const { productId } = useParams();
+ const { category: categoryId } = useParams();
+ const { categories, isReady, selectedProduct } = useContext(StatesContext);
+ const dispatch = useContext(DispatchContext);
+ const category = categories.find(cat => cat.id === categoryId);
+ const [suggested, setSuggested] = useState();
+
+ useEffect(() => {
+ locateProduct(productId as string, categoryId as string).then(prod => {
+ if (prod) {
+ dispatch({ type: 'selectedProduct', payload: prod });
+ }
+
+ return;
+ });
+ }, [categoryId, dispatch, productId]);
+
+ useEffect(() => {
+ getProductsSummary().then(prods => {
+ setSuggested(prods.filter(p => p.category === selectedProduct?.category));
+ });
+ }, [selectedProduct]);
+
+ if (category && isReady && selectedProduct) {
+ return (
+ (initialStates);
+export const DispatchContext = createContext(() => {});
+
+type Props = {
+ children: React.ReactNode;
+};
+
+export const GlobalStateProvider: React.FC = ({ children }) => {
+ const [states, dispatch] = useReducer(reducer, initialStates);
+
+ return (
+
+ {children}
+
+ );
+};
diff --git a/src/styles/base.scss b/src/styles/base.scss
new file mode 100644
index 0000000000..e32dac2cc2
--- /dev/null
+++ b/src/styles/base.scss
@@ -0,0 +1,8 @@
+@import './base/reset';
+@import './base/fonts';
+@import './base/colors';
+@import './base/vars';
+@import './base/classes';
+@import './base/mixins';
+@import './base/extends';
+@import './base/typography';
diff --git a/src/styles/base/classes.scss b/src/styles/base/classes.scss
new file mode 100644
index 0000000000..8b1a393741
--- /dev/null
+++ b/src/styles/base/classes.scss
@@ -0,0 +1 @@
+// empty
diff --git a/src/styles/base/colors.scss b/src/styles/base/colors.scss
new file mode 100644
index 0000000000..49b8726003
--- /dev/null
+++ b/src/styles/base/colors.scss
@@ -0,0 +1,8 @@
+$c-primary: #313237;
+$c-secondary: #89939A;
+$c-icons: #B4BDC3;
+$c-elements: #E2E6E9;
+$c-hover-bg: #FAFBFC;
+$c-white: #FFF;
+$c-green: #27AE60;
+$c-red: #EB5757;
diff --git a/src/styles/base/extends.scss b/src/styles/base/extends.scss
new file mode 100644
index 0000000000..2367d70d95
--- /dev/null
+++ b/src/styles/base/extends.scss
@@ -0,0 +1,105 @@
+%font-mont-regular {
+ font-family: Mont, Arial, Helvetica, sans-serif;
+ font-weight: 400;
+ font-style: normal;
+}
+
+%font-mont-bold {
+ font-family: Mont-Bold, Arial, Helvetica, sans-serif;
+ font-weight: 700;
+ font-style: normal;
+}
+%font-mont-semibold {
+ font-family: Mont-SemiBold, Arial, Helvetica, sans-serif;
+ font-weight: 600;
+ font-style: normal;
+}
+
+%h1 {
+ @extend %font-mont-bold;
+
+ font-size: 48px;
+ line-height: 56px;
+ letter-spacing: -0.01em;
+
+ @include on-mobile {
+ font-size: 32px;
+ line-height: 41px;
+ }
+}
+
+%h2 {
+ @extend %font-mont-bold;
+
+ font-size: 32px;
+ line-height: 41px;
+ letter-spacing: -0.01em;
+
+ @include on-mobile {
+ font-size: 22px;
+ line-height: 31px;
+ }
+}
+
+%h3 {
+ @extend %font-mont-bold;
+
+ font-size: 22px;
+ line-height: 31px;
+ letter-spacing: 0;
+
+ @include on-mobile {
+ font-family: Mont-bold, Arial, Helvetica, sans-serif;
+ font-style: normal;
+ font-weight: 600;
+ font-size: 20px;
+ line-height: 26px;
+ }
+}
+
+%h4 {
+ @extend %font-mont-semibold;
+
+ font-size: 20px;
+ line-height: 26px;
+ letter-spacing: 0;
+
+ @include on-mobile {
+ font-size: 16px;
+ line-height: 20px;
+ }
+}
+
+%uppercase {
+ @extend %font-mont-bold;
+
+ text-transform: uppercase;
+ font-size: 12px;
+ line-height: 11px;
+ letter-spacing: 0.04em;
+}
+
+%buttons {
+ @extend %font-mont-semibold;
+
+ font-size: 14px;
+ line-height: 21px;
+ letter-spacing: 0;
+}
+
+%body-text {
+ @extend %font-mont-regular;
+
+ font-size: 12px;
+ line-height: 15px;
+ letter-spacing: 0;
+}
+
+%small-text {
+ @extend %font-mont-semibold;
+
+ font-size: 12px;
+ line-height: 15px;
+ letter-spacing: 0;
+}
+
diff --git a/src/styles/base/fonts.scss b/src/styles/base/fonts.scss
new file mode 100644
index 0000000000..aa6d744e69
--- /dev/null
+++ b/src/styles/base/fonts.scss
@@ -0,0 +1,23 @@
+@font-face {
+ src: local('Mont-Bold');
+ src: url('../../../public/fonts/Mont-Bold.otf');
+ font-family: Mont-Bold;
+ font-weight: 700;
+ font-style: normal;
+}
+
+@font-face {
+ src: local('Mont-SemiBold');
+ src: url('../../../public/fonts/Mont-SemiBold.otf');
+ font-family: Mont-SemiBold;
+ font-weight: 600;
+ font-style: normal;
+}
+
+@font-face {
+ src: local('Mont-Regular');
+ src: url('../../../public/fonts/Mont-Regular.otf');
+ font-family: Mont;
+ font-weight: 400;
+ font-style: normal;
+}
diff --git a/src/styles/base/mixins.scss b/src/styles/base/mixins.scss
new file mode 100644
index 0000000000..d0e953e11e
--- /dev/null
+++ b/src/styles/base/mixins.scss
@@ -0,0 +1,53 @@
+@import './vars';
+
+@mixin on-mobile {
+ @media screen and (max-width: $max-width-mobile) {
+ @content;
+ }
+}
+
+@mixin on-tablet {
+ @media screen and (min-width: $min-width-tablet) and (max-width: $max-width-tablet) {
+ @content;
+ }
+}
+
+@mixin on-desktop {
+ @media screen and (min-width: $min-width-desktop) {
+ @content;
+ }
+}
+
+@mixin on-big-desktop {
+ @media screen and (min-width: $min-width-big-desktop) {
+ @content;
+ }
+}
+
+@mixin grid-page {
+ display: grid;
+ justify-content: center;
+ grid-auto-rows: auto;
+ column-gap: $grid-cols-gap;
+ grid-template-columns: repeat($grid-cols-mobile, 1fr);
+
+ @include on-tablet {
+ grid-template-columns: repeat($grid-cols-tablet, 1fr);
+ }
+
+ @include on-desktop {
+ grid-template-columns: repeat($grid-cols-desktop, 32px);
+ }
+}
+
+@mixin inline-padding {
+ padding-inline: 16px;
+
+ @include on-tablet {
+ padding-inline: 24px;
+ }
+
+ @include on-desktop {
+ padding-inline: 0;
+ }
+}
diff --git a/src/styles/base/reset.scss b/src/styles/base/reset.scss
new file mode 100644
index 0000000000..1def60cbde
--- /dev/null
+++ b/src/styles/base/reset.scss
@@ -0,0 +1,47 @@
+/*
+ 1. Use a more-intuitive box-sizing model.
+*/
+*, *::before, *::after {
+ box-sizing: border-box;
+}
+
+/*
+ 2. Remove default margin
+*/
+* {
+ margin: 0;
+}
+
+/*
+ Typographic tweaks!
+ 3. Add accessible line-height
+ 4. Improve text rendering
+*/
+body {
+ line-height: 1.5;
+ -webkit-font-smoothing: antialiased;
+}
+
+/*
+ 5. Improve media defaults
+*/
+img, picture, video, canvas, svg {
+ display: block;
+ max-width: 100%;
+}
+
+/*
+ 6. Remove built-in form typography styles
+*/
+input, button, textarea, select {
+ font: inherit;
+}
+
+/*
+ 7. Avoid text overflows
+*/
+p, h1, h2, h3, h4, h5, h6 {
+ overflow-wrap: break-word;
+}
+
+
diff --git a/src/styles/base/typography.scss b/src/styles/base/typography.scss
new file mode 100644
index 0000000000..a65d6c3ab0
--- /dev/null
+++ b/src/styles/base/typography.scss
@@ -0,0 +1,19 @@
+h1 {
+ @extend %h1;
+}
+
+h2 {
+ @extend %h2;
+}
+
+h3 {
+ @extend %h3;
+}
+
+h4 {
+ @extend %h4;
+}
+
+body {
+ @extend %body-text;
+}
diff --git a/src/styles/base/vars.scss b/src/styles/base/vars.scss
new file mode 100644
index 0000000000..b65330083e
--- /dev/null
+++ b/src/styles/base/vars.scss
@@ -0,0 +1,27 @@
+$min-width-mobile: 320px;
+$max-width-mobile: 639px;
+$min-width-tablet: 640px;
+$max-width-tablet: 1199px;
+$min-width-desktop: 1200px;
+$min-width-big-desktop: 1201px;
+$grid-cols-mobile: 4;
+$grid-cols-tablet: 12;
+$grid-cols-desktop: 24;
+$grid-cols-gap: 16px;
+$grid-auto-col-mobile: calc(
+ (100% - (($grid-cols-mobile - 1) * $grid-cols-gap)) / $grid-cols-mobile
+);
+$grid-auto-col-tablet: calc(
+ (100% - (($grid-cols-tablet - 1) * $grid-cols-gap)) / $grid-cols-tablet
+);
+$gridSpan-slider-card-mobile: 3;
+$gridSpan-slider-card-tablet: 5;
+$gridSpan-slider-card-desktop: 6;
+$gridSpan-catalog-card-mobile: 4;
+$gridSpan-catalog-card-tablet: 4;
+$gridSpan-catalog-card-desktop: 6;
+$productSlider-translate-value: calc(
+ -1 * (($grid-auto-col-mobile) + ($grid-cols-gap)) * $gridSpan-slider-card-mobile
+);
+$transition-duration: 0.3s ease-in-out;
+$baseIconPath: '/public/img/icons/';
diff --git a/src/styles/components.scss b/src/styles/components.scss
new file mode 100644
index 0000000000..16002b73a9
--- /dev/null
+++ b/src/styles/components.scss
@@ -0,0 +1,28 @@
+@import '../components/base/Header/Header.style';
+@import '../components/base/CardButtons/CardButtons.style';
+@import '../components/base/Price/Price.style';
+@import '../components/base/SpecsMini/SpecsMini.style';
+@import '../components/base/Nav/Nav.style';
+@import '../components/base/Icon/Icon.style';
+@import '../components/base/Line/Line.style';
+@import '../components/base/Button/Button.style';
+@import '../components/base/ProductCard/ProductCard.style';
+@import '../components/base/ProductCard/ProductCardLoader.style';
+@import '../components/base/ProductSlider/ProductSlider.style';
+@import '../components/base/Footer/Footer.style';
+@import '../components/Welcome/Welcome.style';
+@import '../components/BannerSlider/BannerSlider.style';
+@import '../components/ShopByCategory/ShopByCategory.style';
+@import '../components/NavigationPath/NavigationPath.style';
+@import '../components/CategoryTitle/CategoryTitle.style';
+@import '../components/ProductGrid/ProductGrid.style';
+@import '../components/SortOptions/SortOptions.style';
+@import '../components/Pagination/Pagination.style';
+@import '../components/BackPath/BackPath.style';
+@import '../components/CartGrid/CartGrid.style';
+@import '../components/CartCheckout/CartCheckout.style';
+@import '../components/CartProductCard/CartProductCard.style';
+@import '../components/ProductDetailsMain/ProductDetailsMain.style';
+@import '../components/ProductDetailsCarousel/ProductDetailsCarousel.style';
+@import '../components/ProductDetailsDescription/ProductDetailsDescription.style';
+@import '../components/ProductDetailsSpecs/ProductDetailsSpecs.style';
diff --git a/src/styles/pages.scss b/src/styles/pages.scss
new file mode 100644
index 0000000000..75def9c574
--- /dev/null
+++ b/src/styles/pages.scss
@@ -0,0 +1,8 @@
+@import '../App';
+@import '../pages/Menu/Menu.style';
+@import '../pages/Home/Home.style';
+@import '../pages/Catalog/Catalog.style';
+@import '../pages/ProductDetails/ProductDetails.style';
+@import '../pages/Favorites/Favorites.style';
+@import '../pages/Cart/Cart.style';
+@import '../pages/NotFound/NotFound.style';
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
new file mode 100644
index 0000000000..2238c75bf0
--- /dev/null
+++ b/src/styles/theme.scss
@@ -0,0 +1 @@
+@forward "./base/*" // verificar se importa
diff --git a/src/types/Category.ts b/src/types/Category.ts
new file mode 100644
index 0000000000..f94de344a2
--- /dev/null
+++ b/src/types/Category.ts
@@ -0,0 +1,9 @@
+import { ProductSummary } from './ProductSummary';
+
+export type Category = {
+ id: string;
+ title: string;
+ bannerImg: string;
+ products: ProductSummary[];
+ productsCount: number;
+};
diff --git a/src/types/ProductSpecs.ts b/src/types/ProductSpecs.ts
new file mode 100644
index 0000000000..cb19ac4eab
--- /dev/null
+++ b/src/types/ProductSpecs.ts
@@ -0,0 +1,38 @@
+/* eslint-disable @typescript-eslint/indent */
+export type Description = {
+ title: string;
+ text: string[];
+};
+
+export type Variant = {
+ [key: string]: {
+ id: string;
+ available: boolean;
+ };
+};
+
+export type Variants = {
+ [key: string]: Variant;
+};
+
+export type ProductSpecs = {
+ id: string;
+ category: string;
+ namespaceId: string;
+ name: string;
+ capacityAvailable: string[];
+ capacity: string;
+ priceRegular: number;
+ priceDiscount: number;
+ colorsAvailable: string[];
+ color: string;
+ images: string[];
+ description: Description[];
+ screen: string;
+ resolution: string;
+ processor: string;
+ ram: string;
+ camera?: string;
+ zoom?: string;
+ cell: string[];
+};
diff --git a/src/types/ProductSummary.ts b/src/types/ProductSummary.ts
new file mode 100644
index 0000000000..78aba0490a
--- /dev/null
+++ b/src/types/ProductSummary.ts
@@ -0,0 +1,12 @@
+export type ProductSummary = {
+ id: number;
+ category: string;
+ itemId: string;
+ name: string;
+ fullPrice: number;
+ price: number;
+ year: number;
+ image: string;
+ quantity: number;
+ [key: string]: string | number;
+};
diff --git a/src/types/State.ts b/src/types/State.ts
new file mode 100644
index 0000000000..735145836d
--- /dev/null
+++ b/src/types/State.ts
@@ -0,0 +1,15 @@
+import { Category } from './Category';
+import { ProductSpecs } from './ProductSpecs';
+import { ProductSummary } from './ProductSummary';
+
+export interface States {
+ products: ProductSummary[];
+ productSpecs: ProductSpecs[];
+ cart: ProductSummary[];
+ favorites: ProductSummary[];
+ categories: Category[];
+ isMenuOpen: boolean;
+ isReady: boolean;
+ totalCartItems: number;
+ selectedProduct: ProductSpecs | undefined;
+}
diff --git a/src/utils/calculateDiscount.ts b/src/utils/calculateDiscount.ts
new file mode 100644
index 0000000000..db3a143e90
--- /dev/null
+++ b/src/utils/calculateDiscount.ts
@@ -0,0 +1,8 @@
+import { ProductSummary } from '../types/ProductSummary';
+
+export function calculateDiscount(product: ProductSummary) {
+ const priceDifference = product.fullPrice - product.price;
+ const percentageDiscount = (priceDifference * 100) / product.fullPrice;
+
+ return percentageDiscount;
+}
diff --git a/src/utils/colors.tsx b/src/utils/colors.tsx
new file mode 100644
index 0000000000..db99a1afea
--- /dev/null
+++ b/src/utils/colors.tsx
@@ -0,0 +1,27 @@
+export type Colors = {
+ [key: string]: string;
+};
+export const colors: Colors = {
+ black: '#4C4C4C',
+ spaceblack: '#565C6A',
+ green: '#5b7E65',
+ yellow: '#EED96C',
+ white: '#F0F0F0',
+ purple: '#CACDF5',
+ red: '#B1081B',
+ gold: '#F4E4D1',
+ sierrablue: '#AAC6E3',
+ graphite: '#96959D',
+ silver: '#AAAAAF',
+ spacegray: '#B6ADA7',
+ 'space gray': '#B6ADA7',
+ blue: '#6B89B3',
+ 'sky blue': '#7CACD0',
+ 'rose gold': '#FDD8D3',
+ rosegold: '#FDD8D3',
+ starlight: '#E8E0D5',
+ pink: '#FD889A',
+ midnightgreen: '#626B64',
+ midnight: '#31373F',
+ coral: '#F19584',
+};
diff --git a/src/utils/getLocalStorage.ts b/src/utils/getLocalStorage.ts
new file mode 100644
index 0000000000..b1c415fa77
--- /dev/null
+++ b/src/utils/getLocalStorage.ts
@@ -0,0 +1,13 @@
+export function getLocalStorage(key: string, value: T) {
+ const data = localStorage.getItem(key);
+
+ if (data === null) {
+ return value;
+ }
+
+ try {
+ return JSON.parse(data);
+ } catch (e) {
+ return value;
+ }
+}
diff --git a/src/utils/getNumbers.ts b/src/utils/getNumbers.ts
new file mode 100644
index 0000000000..ab24e2b564
--- /dev/null
+++ b/src/utils/getNumbers.ts
@@ -0,0 +1,9 @@
+export function getNumbers(from: number, to: number): number[] {
+ const numbers = [];
+
+ for (let n = from; n <= to; n += 1) {
+ numbers.push(n);
+ }
+
+ return numbers;
+}
diff --git a/src/utils/getPageNumbers.ts b/src/utils/getPageNumbers.ts
new file mode 100644
index 0000000000..c558bb32ee
--- /dev/null
+++ b/src/utils/getPageNumbers.ts
@@ -0,0 +1,8 @@
+import { getNumbers } from './getNumbers';
+
+export function getPageNumbers(
+ itemsTotal: number,
+ itemsPerPage: number,
+): number[] {
+ return getNumbers(1, Math.ceil(itemsTotal / itemsPerPage));
+}
diff --git a/src/utils/getRandomNumber.ts b/src/utils/getRandomNumber.ts
new file mode 100644
index 0000000000..6a52a364eb
--- /dev/null
+++ b/src/utils/getRandomNumber.ts
@@ -0,0 +1,5 @@
+export function getRandomNumber() {
+ return [...Array(6)]
+ .map(() => Math.floor(Math.random() * 16).toString(16))
+ .join('');
+}
diff --git a/src/utils/useMediaQuery.ts b/src/utils/useMediaQuery.ts
new file mode 100644
index 0000000000..9c77b3ecbb
--- /dev/null
+++ b/src/utils/useMediaQuery.ts
@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+
+export default function useMediaQuery(query: string) {
+ const [matches, setMatches] = useState(false);
+
+ useEffect(() => {
+ const mediaQuery = window.matchMedia(query);
+
+ setMatches(mediaQuery.matches);
+ const handler = (event: MediaQueryListEvent) => setMatches(event.matches);
+
+ mediaQuery.addEventListener('change', handler);
+
+ return () => mediaQuery.removeEventListener('change', handler);
+ }, [query]);
+
+ return matches;
+}
0,
+ [`icon--${iconUse}-border`]: border,
+ [`icon--${iconUse}-border-disabled`]: border && disabled,
+ [`icon--${iconUse}`]: !iconSize,
+ [`icon--${iconUse}-${iconSize}`]: iconSize,
+ })}
+ />
+ {(iconUse === 'bar' || iconUse === 'menu') && length !== 0 && (
+
+ );
+};
diff --git a/src/components/base/Icon/Icon.style.scss b/src/components/base/Icon/Icon.style.scss
new file mode 100644
index 0000000000..44e6312f3b
--- /dev/null
+++ b/src/components/base/Icon/Icon.style.scss
@@ -0,0 +1,147 @@
+.icon {
+ cursor: pointer;
+ &__wrapper {
+ position: relative;
+ }
+ &__content {
+ position: absolute;
+ display: inline-block;
+ text-align: center;
+ height: 13px;
+ width: 13px;
+ top: 21%;
+ right: 22%;
+ color: $c-white;
+ font-family: Mont, sans-serif;
+ font-size: 0.4rem;
+
+ @include on-desktop {
+ top: 28%;
+ right: 29%;
+ }
+ }
+
+ &--bar {
+ height: 48px;
+ width: 48px;
+ &-border {
+ box-shadow: -1px 0 0 0 $c-elements;
+ }
+
+ @include on-desktop {
+ height: 64px;
+ width: 64px;
+ }
+ }
+
+ &--button {
+ &-border {
+ border: 1px solid $c-icons;
+ &-disabled {
+ border: 1px solid $c-elements;
+ }
+ }
+ &-16 {
+ height: 16px;
+ width: 16px;
+ }
+ &-32 {
+ height: 32px;
+ width: 32px;
+ }
+ &-40 {
+ height: 40px;
+ width: 40px;
+ }
+ }
+
+ &--menu-page {
+ width: 100%;
+ height: 64px;
+ box-shadow: -1px -1px 0 0 $c-elements;
+ position: relative;
+ &:hover::after {
+ content: '';
+ position: absolute;
+ height: 2px;
+ width: 100%;
+ bottom: 0;
+ background: $c-primary;
+ }
+ }
+
+ &--menu {
+ background: url('../../../..' + $baseIconPath + 'menu.svg') no-repeat center;
+ }
+
+ &--favorite {
+ background: url('../../../..' + $baseIconPath + 'heart.svg') no-repeat center;
+ &-added {
+ background: url('../../../..' + $baseIconPath + 'heart-filled.svg') no-repeat
+ center;
+ }
+ &-counter {
+ background: url('../../../..' + $baseIconPath + 'heart-counter.svg')
+ no-repeat center;
+ }
+ }
+
+ &--cart {
+ background: url('../../../..' + $baseIconPath + 'cart.svg') no-repeat center;
+ &-counter {
+ background: url('../../../..' + $baseIconPath + 'cart-counter.svg') no-repeat
+ center;
+ }
+ }
+
+ &--close {
+ background: url('../../../..' + $baseIconPath + 'close.svg') no-repeat center;
+ }
+
+ &--chevron-left {
+ background: url('../../../..' + $baseIconPath + 'chevron-left.svg') no-repeat
+ center;
+ &-disabled {
+ background: url('../../../..' + $baseIconPath + 'chevron-left-disabled.svg')
+ no-repeat center;
+ }
+ }
+
+ &--chevron-right {
+ background: url('../../../..' + $baseIconPath + 'chevron-right.svg') no-repeat
+ center;
+ &-disabled {
+ background: url('../../../..' + $baseIconPath + 'chevron-right-disabled.svg')
+ no-repeat center;
+ }
+ }
+
+ &--chevron-up {
+ background: url('../../../..' + $baseIconPath + 'chevron-up.svg') no-repeat
+ center;
+ }
+
+ &--home {
+ background: url('../../../..' + $baseIconPath + 'home.svg') no-repeat center;
+ &-disabled {
+ background: url('../../../..' + $baseIconPath + 'home-disabled.svg')
+ no-repeat center;
+ }
+ }
+
+ &--minus {
+ background: url('../../../..' + $baseIconPath + 'minus.svg') no-repeat center;
+ &-disabled {
+ background: url('../../../..' + $baseIconPath + 'minus-disabled.svg')
+ no-repeat center;
+ }
+ }
+
+ &--plus {
+ background: url('../../../..' + $baseIconPath + 'plus.svg') no-repeat center;
+ &-disabled {
+ background: url('../../../..' + $baseIconPath + 'plus-disabled.svg')
+ no-repeat center;
+ }
+ }
+}
diff --git a/src/components/base/Line/Line.component.tsx b/src/components/base/Line/Line.component.tsx
new file mode 100644
index 0000000000..f8657ec017
--- /dev/null
+++ b/src/components/base/Line/Line.component.tsx
@@ -0,0 +1 @@
+export const Line = () => ;
diff --git a/src/components/base/Line/Line.style.scss b/src/components/base/Line/Line.style.scss
new file mode 100644
index 0000000000..fb3ff3427e
--- /dev/null
+++ b/src/components/base/Line/Line.style.scss
@@ -0,0 +1,6 @@
+.line {
+ height: 1px;
+ width: 100%;
+ display: inline-block;
+ background: $c-elements;
+}
diff --git a/src/components/base/Nav/Nav.component.tsx b/src/components/base/Nav/Nav.component.tsx
new file mode 100644
index 0000000000..6adb8f12dc
--- /dev/null
+++ b/src/components/base/Nav/Nav.component.tsx
@@ -0,0 +1,65 @@
+import cn from 'classnames';
+import { Link } from 'react-router-dom';
+import {
+ DispatchContext,
+ StatesContext,
+} from '../../../store/GlobalStateProvider';
+import { useContext, useEffect, useState } from 'react';
+import { getCategories } from '../../../api/products';
+import { Category } from '../../../types/Category';
+import useMediaQuery from '../../../utils/useMediaQuery';
+
+type Props = {
+ navStyle: string;
+};
+
+export const Nav: React.FC{length}
+ )}
+
+ {showDiscount ? (
+ <>
+
+ );
+ }
+
+ return;
+};
diff --git a/src/components/base/Price/Price.style.scss b/src/components/base/Price/Price.style.scss
new file mode 100644
index 0000000000..b084080841
--- /dev/null
+++ b/src/components/base/Price/Price.style.scss
@@ -0,0 +1,17 @@
+.price {
+ display: flex;
+ width: 100%;
+ justify-content: start;
+ gap: 8px;
+ align-items: center;
+ position: relative;
+ &-discount {
+ color: $c-red;
+ }
+ &-full {
+ font-family: Mont-semibold, sans-serif;
+ font-size: 22px;
+ text-decoration: line-through;
+ color: $c-secondary;
+ }
+}
diff --git a/src/components/base/ProductCard/ProductCard.component.tsx b/src/components/base/ProductCard/ProductCard.component.tsx
new file mode 100644
index 0000000000..c921a5f8b0
--- /dev/null
+++ b/src/components/base/ProductCard/ProductCard.component.tsx
@@ -0,0 +1,31 @@
+import { ProductSummary } from '../../../types/ProductSummary';
+import { Link } from 'react-router-dom';
+import { Price } from '../Price/Price.component';
+import { SpecsMini } from '../SpecsMini/SpecsMini.component';
+import { CardButtons } from '../CardButtons/CardButtons.component';
+import { Line } from '../Line/Line.component';
+
+type Props = {
+ product: ProductSummary;
+ showDiscount: boolean;
+};
+
+export const ProductCard: React.FC
+
+ ${product.price}
+${product.fullPrice}
+ + {calculateDiscount(product).toFixed(1)}% OFF +
+ + ) : ( + <> +
+
+
+ )}
+ ${product.fullPrice}
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/base/ProductCard/ProductCard.style.scss b/src/components/base/ProductCard/ProductCard.style.scss
new file mode 100644
index 0000000000..7d2a9e8e02
--- /dev/null
+++ b/src/components/base/ProductCard/ProductCard.style.scss
@@ -0,0 +1,44 @@
+.card {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ padding: 32px;
+ border: 1px solid $c-elements;
+ gap: 8px;
+ &__link {
+ text-decoration: none;
+ color: $c-primary;
+ }
+ &__image-wrapper {
+ width: 100%;
+ height: 0;
+ padding-top: 100%;
+ position: relative;
+ transition: all $transition-duration;
+ &:hover {
+ transform: scale(1.1);
+ }
+ }
+ &__image {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ object-fit: contain;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ gap: 24px;
+ }
+ &__product-name {
+ display: flex;
+ align-items: flex-end;
+ font-family: Mont, sans-serif;
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 21px;
+ padding-top: 16px;
+ }
+}
diff --git a/src/components/base/ProductCard/ProductCardLoader.component.tsx b/src/components/base/ProductCard/ProductCardLoader.component.tsx
new file mode 100644
index 0000000000..29d1190f7b
--- /dev/null
+++ b/src/components/base/ProductCard/ProductCardLoader.component.tsx
@@ -0,0 +1,60 @@
+export const ProductCardLoader = () => (
+ {product.name}
+
+
+
+);
diff --git a/src/components/base/ProductCard/ProductCardLoader.style.scss b/src/components/base/ProductCard/ProductCardLoader.style.scss
new file mode 100644
index 0000000000..bb1c03a228
--- /dev/null
+++ b/src/components/base/ProductCard/ProductCardLoader.style.scss
@@ -0,0 +1,88 @@
+.cardLoader {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ padding: 32px;
+ border: 1px solid $c-elements;
+ gap: 8px;
+ grid-column: span 4;
+
+ @include on-desktop {
+ grid-column: span 6;
+ }
+ &__image {
+ box-sizing: border-box;
+ display: block;
+ width: 100%;
+ height: 60%;
+
+ }
+ &__specs {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ gap: 8px;
+ }
+ &__buttons {
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+ align-items: center;
+ justify-content: space-between;
+ }
+}
+
+.block1 {
+ display: block;
+ width: 70%;
+ height: 21px;
+ color: $c-primary;
+ padding-top: 16px;
+}
+
+.block2 {
+ width: 78px;
+ height: 8px;
+ margin-bottom: 8px;
+}
+
+.block3 {
+ width: 131px;
+ height: 10px;
+ margin-bottom: 8px;
+}
+
+.button {
+ &--L {
+ height: 40px;
+ background-color: $c-elements;
+ width: 83%;
+ }
+ &--S {
+ height: 40px;
+ background-color: $c-elements;
+ width: 17%;
+ }
+}
+
+.line {
+ height: 1px;
+ width: 100%;
+ background-color: $c-elements;
+ display: inline-block;
+}
+
+.fpo {
+ display: block;
+ height: 100%;
+ width: 100%;
+}
+
+.pulsate {
+ background: linear-gradient(-45deg, #ddd, #f0f0f0, #ddd, #f0f0f0);
+ background-size: 400% 400%;
+ -webkit-animation: Gradient 2.25s ease infinite;
+ -moz-animation: Gradient 2.25s ease infinite;
+ animation: Gradient 2.25s ease infinite;
+}
diff --git a/src/components/base/ProductSlider/ProductSlider.component.tsx b/src/components/base/ProductSlider/ProductSlider.component.tsx
new file mode 100644
index 0000000000..4adea8e7b5
--- /dev/null
+++ b/src/components/base/ProductSlider/ProductSlider.component.tsx
@@ -0,0 +1,131 @@
+import { useCallback, useEffect, useRef, useState, TouchEvent } from 'react';
+import { ProductCard } from '../ProductCard/ProductCard.component';
+import { Icon } from '../Icon/Icon.component';
+import { ProductSummary } from '../../../types/ProductSummary';
+
+type Props = {
+ title: string;
+ products: ProductSummary[];
+ showDiscount: boolean;
+};
+const cardGap = 8;
+
+export const ProductSlider: React.FC
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+ {products.map((product, idx) => (
+
+
+
+ ))}
+
+
+ );
+};
diff --git a/src/components/base/SpecsMini/SpecsMini.style.scss b/src/components/base/SpecsMini/SpecsMini.style.scss
new file mode 100644
index 0000000000..85e1815009
--- /dev/null
+++ b/src/components/base/SpecsMini/SpecsMini.style.scss
@@ -0,0 +1,20 @@
+.specsMini {
+ @extend %small-text;
+
+ grid-column: 1/-1;
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ gap: 8px;
+
+ &-line {
+ display: flex;
+ justify-content: space-between;
+ }
+ &-title {
+ color: $c-secondary;
+ }
+ &-content {
+ color: $c-primary;
+ }
+}
diff --git a/src/index.tsx b/src/index.tsx
index 50470f1508..62cfb52d41 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,5 @@
import { createRoot } from 'react-dom/client';
-import { App } from './App';
+import './main.scss';
+import { Root } from './Root';
-createRoot(document.getElementById('root') as HTMLElement).render(
+
+ Screen
+ {product.screen}
+
+
+ Capacity
+ {product.capacity}
+
+
+ RAM
+ {product.ram}
+
+
+ );
+};
diff --git a/src/pages/Home/Home.style.scss b/src/pages/Home/Home.style.scss
new file mode 100644
index 0000000000..32a7e73b06
--- /dev/null
+++ b/src/pages/Home/Home.style.scss
@@ -0,0 +1,6 @@
+.home-page {
+ row-gap: 56px;
+
+ @include grid-page;
+ @include inline-padding;
+}
diff --git a/src/pages/Menu/Menu.page.tsx b/src/pages/Menu/Menu.page.tsx
new file mode 100644
index 0000000000..8700980b59
--- /dev/null
+++ b/src/pages/Menu/Menu.page.tsx
@@ -0,0 +1,52 @@
+import { Link } from 'react-router-dom';
+import { Icon } from '../../components/base/Icon/Icon.component';
+import { Nav } from '../../components/base/Nav/Nav.component';
+import { useContext } from 'react';
+import {
+ DispatchContext,
+ StatesContext,
+} from '../../store/GlobalStateProvider';
+
+export const MenuPage = () => {
+ const { favorites, cart, isMenuOpen } = useContext(StatesContext);
+ const dispatch = useContext(DispatchContext);
+ const handleClick = () => {
+ if (isMenuOpen) {
+ dispatch({ type: 'isMenuOpen', payload: false });
+ } else {
+ dispatch({ type: 'isMenuOpen', payload: true });
+ }
+
+ return isMenuOpen;
+ };
+
+ return (
+ <>
+
+
+
+ );
+};
diff --git a/src/pages/Menu/Menu.style.scss b/src/pages/Menu/Menu.style.scss
new file mode 100644
index 0000000000..7153f228bd
--- /dev/null
+++ b/src/pages/Menu/Menu.style.scss
@@ -0,0 +1,40 @@
+.menu {
+ position: fixed;
+ display: none;
+ height: 100%;
+ top: 49px;
+ left: 0;
+ right: 0;
+ z-index: 999;
+ background-color: $c-white;
+ &-isOpen {
+ display: block;
+ }
+
+ &__container {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+ height: calc(100vh - 48px);
+ width: 100vw;
+
+ background-color: $c-white;
+ &-link {
+ width: 100%;
+ }
+ &-nav {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ padding-top: 24px;
+ padding-inline: 16px;
+ }
+ &-icons {
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ }
+ }
+}
diff --git a/src/pages/NotFound/NotFound.page.tsx b/src/pages/NotFound/NotFound.page.tsx
new file mode 100644
index 0000000000..bce3ae8f79
--- /dev/null
+++ b/src/pages/NotFound/NotFound.page.tsx
@@ -0,0 +1,7 @@
+export const NotFound = () => (
+
+
+
+
+
+
+
+ Page not found!
+≽ܫ≼
+
+
+ );
+ } else {
+ return 'Loading... Please wait';
+ }
+};
diff --git a/src/pages/ProductDetails/ProductDetails.style.scss b/src/pages/ProductDetails/ProductDetails.style.scss
new file mode 100644
index 0000000000..9a6e05d8f0
--- /dev/null
+++ b/src/pages/ProductDetails/ProductDetails.style.scss
@@ -0,0 +1,39 @@
+.productDetails-page {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ padding-block: 24px;
+
+ @include inline-padding;
+ @include grid-page;
+
+ &__suggested {
+ grid-column: 1/-1;
+ padding-block: 32px;
+ }
+}
+
+.title {
+ grid-column: 1/-1;
+}
+
+.productDetailCard {
+ grid-column: 1/-1;
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ gap: 16px;
+
+ @include on-tablet {
+ display: grid;
+ grid-template-columns: repeat(12, 1fr);
+ column-gap: 16px;
+ }
+
+ @include on-desktop {
+ display: grid;
+ grid-template-columns: repeat(24, 32px);
+ column-gap: 16px;
+ }
+}
diff --git a/src/store/GlobalStateProvider.tsx b/src/store/GlobalStateProvider.tsx
new file mode 100644
index 0000000000..fda10f97f9
--- /dev/null
+++ b/src/store/GlobalStateProvider.tsx
@@ -0,0 +1,104 @@
+import { createContext, useReducer } from 'react';
+import { States } from '../types/State';
+import { ProductSummary } from '../types/ProductSummary';
+import { Category } from '../types/Category';
+import { getLocalStorage } from '../utils/getLocalStorage';
+import { ProductSpecs } from '../types/ProductSpecs';
+
+const initialStates = {
+ products: [],
+ productSpecs: [],
+ cart: getLocalStorage('cart', []),
+ favorites: getLocalStorage('favs', []),
+ categories: [],
+ isMenuOpen: false,
+ isReady: false,
+ totalCartItems: 0,
+ selectedProduct: undefined,
+};
+
+type Action =
+ | { type: 'loadCategories'; payload: Category[] }
+ | { type: 'updateCart'; payload: ProductSummary[] }
+ | { type: 'updateTotalCartItems'; payload: number }
+ | { type: 'updateFavorites'; payload: ProductSummary[] }
+ | { type: 'increaseQuantity'; payload: number }
+ | { type: 'decreaseQuantity'; payload: number }
+ | { type: 'isMenuOpen'; payload: boolean }
+ | { type: 'isReady'; payload: boolean }
+ | { type: 'selectedProduct'; payload: ProductSpecs };
+
+type DispatchContextType = {
+ (action: Action): void;
+};
+function reducer(states: States, action: Action) {
+ let newStates: States = { ...states };
+
+ switch (action.type) {
+ case 'loadCategories':
+ newStates = { ...newStates, categories: action.payload };
+ break;
+ case 'updateCart':
+ newStates = { ...newStates, cart: action.payload };
+ break;
+ case 'updateTotalCartItems':
+ newStates = { ...newStates, totalCartItems: action.payload };
+ break;
+ case 'updateFavorites':
+ newStates = { ...newStates, favorites: action.payload };
+ break;
+ case 'increaseQuantity':
+ newStates = {
+ ...newStates,
+ cart: states.cart.map(p =>
+ p.id === action.payload
+ ? { ...p, quantity: (p.quantity ?? 1) + 1 }
+ : p,
+ ),
+ };
+ break;
+ case 'decreaseQuantity':
+ newStates = {
+ ...newStates,
+ cart: states.cart.map(p =>
+ p.id === action.payload
+ ? { ...p, quantity: (p.quantity ?? 1) - 1 }
+ : p,
+ ),
+ };
+ break;
+ case 'isMenuOpen':
+ newStates = { ...newStates, isMenuOpen: action.payload };
+ break;
+ case 'isReady':
+ newStates = { ...newStates, isReady: action.payload };
+ break;
+ case 'selectedProduct':
+ newStates = { ...newStates, selectedProduct: action.payload };
+ break;
+ default:
+ return states;
+ }
+
+ localStorage.setItem('favs', JSON.stringify(newStates.favorites));
+ localStorage.setItem('cart', JSON.stringify(newStates.cart));
+
+ return newStates;
+}
+
+export const StatesContext = createContext{selectedProduct.name}
+
+
+
+
+ )}
+