From f5c6705c444374ed3cd49d4c695b8902646f411e Mon Sep 17 00:00:00 2001 From: Korolko Anastasiia Date: Mon, 28 Oct 2024 20:41:46 +0200 Subject: [PATCH 01/32] add solution --- index.html | 4 + package-lock.json | 9 +- package.json | 2 +- public/img/Category/categoryFirst.svg | 9 + public/img/Category/categorySecond.svg | 9 + public/img/Category/categoryThird.svg | 9 + public/img/banner/Banner.svg | 9 + public/img/hotPrice/iPhone1.svg | 9 + public/img/hotPrice/iPhone2.svg | 9 + public/img/hotPrice/iPhone3.svg | 9 + public/img/hotPrice/iPhone4.svg | 9 + public/img/iPhones/iphone-fhour.svg | 9 + public/img/iPhones/iphone-first.svg | 9 + public/img/iPhones/iphone-three.svg | 9 + public/img/iPhones/iphone-two.svg | 9 + public/img/icons/ArrowRight.svg | 3 + public/img/icons/ArrowUp.svg | 3 + public/img/icons/Favourites.svg | 3 + public/img/icons/Home 2.svg | 4 + public/img/icons/Home.svg | 4 + public/img/icons/ShoppingBag.svg | 5 + public/img/icons/StrokeLeft.svg | 3 + public/img/icons/StrokeRight.svg | 3 + public/img/logo/Logo.svg | 25 + src/App.scss | 678 +++++++++++++++++- src/App.tsx | 399 ++++++++++- src/assets/icons.ts | 16 + src/assets/image.ts | 11 + src/components/Button/Button.module.scss | 0 src/components/Button/Button.tsx | 0 src/components/Button/index.ts | 0 src/components/Loader/Loader.module.scss | 30 + src/components/Loader/Loader.tsx | 7 + src/components/Loader/index.ts | 1 + .../PaginationAndSorting.scss | 0 .../PaginationAndSorting.tsx | 0 src/components/PaginationAndSorting/index.ts | 0 .../ProductCard/ProductCard.module.scss | 0 src/components/ProductCard/ProductCard.tsx | 51 ++ src/components/ProductCard/index.ts | 0 src/index.tsx | 4 + src/layout/Footer.module.scss | 0 src/layout/Footer.tsx | 58 ++ src/layout/Header.module.scss | 0 src/layout/Header.tsx | 115 +++ src/layout/MainLayout.module.scss | 0 src/layout/MainLayout.tsx | 0 src/layout/index.ts | 0 .../AccessoriesPage.module.scss | 0 .../AccessoriesPage/AccessoriesPage.tsx | 142 ++++ .../components/Accessories.module.scss | 0 .../components/AccessoriesList.tsx | 19 + .../Pagination/Pagination.module.scss | 0 .../components/Pagination/Pagination.tsx | 56 ++ .../components/Pagination/index.ts | 0 .../AccessoriesPage/components/index.ts | 0 src/modules/AccessoriesPage/index.ts | 0 .../FavoritesPage/FavoritesPage.module.scss | 0 src/modules/FavoritesPage/FavoritesPage.tsx | 0 src/modules/FavoritesPage/index.ts | 0 src/modules/HomePage/HomePage.module.scss | 0 src/modules/HomePage/HomePage.tsx | 0 .../PicturesSlider/PicturesSlider.tsx | 0 src/modules/HomePage/index.ts | 0 .../NotFoundPage/NotFoundPage.module.scss | 0 src/modules/NotFoundPage/NotFoundPage.tsx | 0 src/modules/NotFoundPage/index.ts | 0 src/modules/PhonesPage/PhonesPage.module.scss | 0 src/modules/PhonesPage/PhonesPage.tsx | 151 ++++ .../Pagination/Pagination.module.scss | 0 .../ProductsList/Pagination/Pagination.tsx | 56 ++ .../ProductsList/Pagination/index.ts | 0 .../ProductsList/ProductsList.module.scss | 0 .../components/ProductsList/ProductsList.tsx | 17 + .../components/ProductsList/index.ts | 0 src/modules/PhonesPage/index.ts | 0 .../ProductDetailsPage.module.scss | 286 ++++++++ .../ProductDetailsPage/ProductDetailsPage.tsx | 360 ++++++++++ src/modules/ProductDetailsPage/index.ts | 0 src/modules/ProductPage/CartPage.module.scss | 0 src/modules/ProductPage/ProductPage.tsx | 124 ++++ src/modules/ProductPage/index.ts | 0 .../ProductsPage/ProductsPage.module.scss | 1 + src/modules/ProductsPage/ProductsPage.tsx | 58 ++ src/modules/ProductsPage/index.ts | 0 .../TabletsPage/TabletsPage.module.scss | 0 src/modules/TabletsPage/TabletsPage.tsx | 142 ++++ src/modules/TabletsPage/index.ts | 0 src/styles/layout.module.scss | 31 + src/types/Accessories.ts | 24 + src/types/Footer.ts | 5 + src/types/Phones.ts | 0 src/types/ProductCard.ts | 15 + 93 files changed, 3022 insertions(+), 11 deletions(-) create mode 100644 public/img/Category/categoryFirst.svg create mode 100644 public/img/Category/categorySecond.svg create mode 100644 public/img/Category/categoryThird.svg create mode 100644 public/img/banner/Banner.svg create mode 100644 public/img/hotPrice/iPhone1.svg create mode 100644 public/img/hotPrice/iPhone2.svg create mode 100644 public/img/hotPrice/iPhone3.svg create mode 100644 public/img/hotPrice/iPhone4.svg create mode 100644 public/img/iPhones/iphone-fhour.svg create mode 100644 public/img/iPhones/iphone-first.svg create mode 100644 public/img/iPhones/iphone-three.svg create mode 100644 public/img/iPhones/iphone-two.svg create mode 100644 public/img/icons/ArrowRight.svg create mode 100644 public/img/icons/ArrowUp.svg create mode 100644 public/img/icons/Favourites.svg create mode 100644 public/img/icons/Home 2.svg create mode 100644 public/img/icons/Home.svg create mode 100644 public/img/icons/ShoppingBag.svg create mode 100644 public/img/icons/StrokeLeft.svg create mode 100644 public/img/icons/StrokeRight.svg create mode 100644 public/img/logo/Logo.svg create mode 100644 src/assets/icons.ts create mode 100644 src/assets/image.ts create mode 100644 src/components/Button/Button.module.scss create mode 100644 src/components/Button/Button.tsx create mode 100644 src/components/Button/index.ts create mode 100644 src/components/Loader/Loader.module.scss create mode 100644 src/components/Loader/Loader.tsx create mode 100644 src/components/Loader/index.ts create mode 100644 src/components/PaginationAndSorting/PaginationAndSorting.scss create mode 100644 src/components/PaginationAndSorting/PaginationAndSorting.tsx create mode 100644 src/components/PaginationAndSorting/index.ts create mode 100644 src/components/ProductCard/ProductCard.module.scss create mode 100644 src/components/ProductCard/ProductCard.tsx create mode 100644 src/components/ProductCard/index.ts create mode 100644 src/layout/Footer.module.scss create mode 100644 src/layout/Footer.tsx create mode 100644 src/layout/Header.module.scss create mode 100644 src/layout/Header.tsx create mode 100644 src/layout/MainLayout.module.scss create mode 100644 src/layout/MainLayout.tsx create mode 100644 src/layout/index.ts create mode 100644 src/modules/AccessoriesPage/AccessoriesPage.module.scss create mode 100644 src/modules/AccessoriesPage/AccessoriesPage.tsx create mode 100644 src/modules/AccessoriesPage/components/Accessories.module.scss create mode 100644 src/modules/AccessoriesPage/components/AccessoriesList.tsx create mode 100644 src/modules/AccessoriesPage/components/Pagination/Pagination.module.scss create mode 100644 src/modules/AccessoriesPage/components/Pagination/Pagination.tsx create mode 100644 src/modules/AccessoriesPage/components/Pagination/index.ts create mode 100644 src/modules/AccessoriesPage/components/index.ts create mode 100644 src/modules/AccessoriesPage/index.ts create mode 100644 src/modules/FavoritesPage/FavoritesPage.module.scss create mode 100644 src/modules/FavoritesPage/FavoritesPage.tsx create mode 100644 src/modules/FavoritesPage/index.ts create mode 100644 src/modules/HomePage/HomePage.module.scss create mode 100644 src/modules/HomePage/HomePage.tsx create mode 100644 src/modules/HomePage/PicturesSlider/PicturesSlider.tsx create mode 100644 src/modules/HomePage/index.ts create mode 100644 src/modules/NotFoundPage/NotFoundPage.module.scss create mode 100644 src/modules/NotFoundPage/NotFoundPage.tsx create mode 100644 src/modules/NotFoundPage/index.ts create mode 100644 src/modules/PhonesPage/PhonesPage.module.scss create mode 100644 src/modules/PhonesPage/PhonesPage.tsx create mode 100644 src/modules/PhonesPage/components/ProductsList/Pagination/Pagination.module.scss create mode 100644 src/modules/PhonesPage/components/ProductsList/Pagination/Pagination.tsx create mode 100644 src/modules/PhonesPage/components/ProductsList/Pagination/index.ts create mode 100644 src/modules/PhonesPage/components/ProductsList/ProductsList.module.scss create mode 100644 src/modules/PhonesPage/components/ProductsList/ProductsList.tsx create mode 100644 src/modules/PhonesPage/components/ProductsList/index.ts create mode 100644 src/modules/PhonesPage/index.ts create mode 100644 src/modules/ProductDetailsPage/ProductDetailsPage.module.scss create mode 100644 src/modules/ProductDetailsPage/ProductDetailsPage.tsx create mode 100644 src/modules/ProductDetailsPage/index.ts create mode 100644 src/modules/ProductPage/CartPage.module.scss create mode 100644 src/modules/ProductPage/ProductPage.tsx create mode 100644 src/modules/ProductPage/index.ts create mode 100644 src/modules/ProductsPage/ProductsPage.module.scss create mode 100644 src/modules/ProductsPage/ProductsPage.tsx create mode 100644 src/modules/ProductsPage/index.ts create mode 100644 src/modules/TabletsPage/TabletsPage.module.scss create mode 100644 src/modules/TabletsPage/TabletsPage.tsx create mode 100644 src/modules/TabletsPage/index.ts create mode 100644 src/styles/layout.module.scss create mode 100644 src/types/Accessories.ts create mode 100644 src/types/Footer.ts create mode 100644 src/types/Phones.ts create mode 100644 src/types/ProductCard.ts diff --git a/index.html b/index.html index 095fb3a453..a49ea264d7 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,10 @@ Vite + React + TS + + + +
diff --git a/package-lock.json b/package-lock.json index 836b9e63b4..45255c8d43 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,7 +20,7 @@ }, "devDependencies": { "@cypress/react18": "^2.0.1", - "@mate-academy/scripts": "^1.8.5", + "@mate-academy/scripts": "^1.9.12", "@mate-academy/students-ts-config": "*", "@mate-academy/stylelint-config": "*", "@types/node": "^20.14.10", @@ -1184,10 +1184,11 @@ } }, "node_modules/@mate-academy/scripts": { - "version": "1.8.5", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.8.5.tgz", - "integrity": "sha512-mHRY2FkuoYCf5U0ahIukkaRo5LSZsxrTSgMJheFoyf3VXsTvfM9OfWcZIDIDB521kdPrScHHnRp+JRNjCfUO5A==", + "version": "1.9.12", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.9.12.tgz", + "integrity": "sha512-/OcmxMa34lYLFlGx7Ig926W1U1qjrnXbjFJ2TzUcDaLmED+A5se652NcWwGOidXRuMAOYLPU2jNYBEkKyXrFJA==", "dev": true, + "license": "MIT", "dependencies": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", diff --git a/package.json b/package.json index ae251685c8..4385087661 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ }, "devDependencies": { "@cypress/react18": "^2.0.1", - "@mate-academy/scripts": "^1.8.5", + "@mate-academy/scripts": "^1.9.12", "@mate-academy/students-ts-config": "*", "@mate-academy/stylelint-config": "*", "@types/node": "^20.14.10", diff --git a/public/img/Category/categoryFirst.svg b/public/img/Category/categoryFirst.svg new file mode 100644 index 0000000000..f3e914d9ad --- /dev/null +++ b/public/img/Category/categoryFirst.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/img/Category/categorySecond.svg b/public/img/Category/categorySecond.svg new file mode 100644 index 0000000000..6d7a3e71b5 --- /dev/null +++ b/public/img/Category/categorySecond.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/img/Category/categoryThird.svg b/public/img/Category/categoryThird.svg new file mode 100644 index 0000000000..7c4a5d5256 --- /dev/null +++ b/public/img/Category/categoryThird.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/img/banner/Banner.svg b/public/img/banner/Banner.svg new file mode 100644 index 0000000000..5d559319fc --- /dev/null +++ b/public/img/banner/Banner.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/img/hotPrice/iPhone1.svg b/public/img/hotPrice/iPhone1.svg new file mode 100644 index 0000000000..fa3a47f5de --- /dev/null +++ b/public/img/hotPrice/iPhone1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/img/hotPrice/iPhone2.svg b/public/img/hotPrice/iPhone2.svg new file mode 100644 index 0000000000..e026543929 --- /dev/null +++ b/public/img/hotPrice/iPhone2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/img/hotPrice/iPhone3.svg b/public/img/hotPrice/iPhone3.svg new file mode 100644 index 0000000000..8a2f7604ba --- /dev/null +++ b/public/img/hotPrice/iPhone3.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/img/hotPrice/iPhone4.svg b/public/img/hotPrice/iPhone4.svg new file mode 100644 index 0000000000..65e3c6bb12 --- /dev/null +++ b/public/img/hotPrice/iPhone4.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/img/iPhones/iphone-fhour.svg b/public/img/iPhones/iphone-fhour.svg new file mode 100644 index 0000000000..89af76d1bb --- /dev/null +++ b/public/img/iPhones/iphone-fhour.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/img/iPhones/iphone-first.svg b/public/img/iPhones/iphone-first.svg new file mode 100644 index 0000000000..cad93efc36 --- /dev/null +++ b/public/img/iPhones/iphone-first.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/img/iPhones/iphone-three.svg b/public/img/iPhones/iphone-three.svg new file mode 100644 index 0000000000..d0214f09a9 --- /dev/null +++ b/public/img/iPhones/iphone-three.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/img/iPhones/iphone-two.svg b/public/img/iPhones/iphone-two.svg new file mode 100644 index 0000000000..26b3e1bfdb --- /dev/null +++ b/public/img/iPhones/iphone-two.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/img/icons/ArrowRight.svg b/public/img/icons/ArrowRight.svg new file mode 100644 index 0000000000..03ad5615d3 --- /dev/null +++ b/public/img/icons/ArrowRight.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/img/icons/ArrowUp.svg b/public/img/icons/ArrowUp.svg new file mode 100644 index 0000000000..b9d6fc4836 --- /dev/null +++ b/public/img/icons/ArrowUp.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/img/icons/Favourites.svg b/public/img/icons/Favourites.svg new file mode 100644 index 0000000000..8caddd8d94 --- /dev/null +++ b/public/img/icons/Favourites.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/img/icons/Home 2.svg b/public/img/icons/Home 2.svg new file mode 100644 index 0000000000..8a0cbc105b --- /dev/null +++ b/public/img/icons/Home 2.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/img/icons/Home.svg b/public/img/icons/Home.svg new file mode 100644 index 0000000000..e16ca7d794 --- /dev/null +++ b/public/img/icons/Home.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/img/icons/ShoppingBag.svg b/public/img/icons/ShoppingBag.svg new file mode 100644 index 0000000000..380aed0a0a --- /dev/null +++ b/public/img/icons/ShoppingBag.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/img/icons/StrokeLeft.svg b/public/img/icons/StrokeLeft.svg new file mode 100644 index 0000000000..86f1a3972e --- /dev/null +++ b/public/img/icons/StrokeLeft.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/img/icons/StrokeRight.svg b/public/img/icons/StrokeRight.svg new file mode 100644 index 0000000000..3844c03173 --- /dev/null +++ b/public/img/icons/StrokeRight.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/img/logo/Logo.svg b/public/img/logo/Logo.svg new file mode 100644 index 0000000000..d59f941639 --- /dev/null +++ b/public/img/logo/Logo.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/App.scss b/src/App.scss index 71bc413aad..a22f7406f6 100644 --- a/src/App.scss +++ b/src/App.scss @@ -1 +1,677 @@ -// not empty +// not empty +.header { + width: 100%; + height: 64px; + display: flex; + justify-content: space-between; + align-items: center; + font-family: "Montserrat", sans-serif; + margin-bottom: 56px; + + + &__logo { + display: flex; + gap: 48px; + margin-left: 24px; + } + + &__nav-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + // flex-direction: row; + gap: 64px; + } + + &__nav-link { + position: relative; + font-size: 12px; + font-weight: 700; + letter-spacing: 2px; + text-align: left; + color: greenyellow; + // color: #ffffff; + // color: #78b829; + + text-decoration: none; + transition: color 0.3s; + + &:hover { + color: #f0f0f0; + } + } + + &__nav-link.active::after { + content: ''; + position: absolute; + bottom: -26px; + height: 3px; + display: block; + width: 100%; + background-color: rgb(255, 253, 253); + } +} + +.main { + max-width: 1136px; + margin: 0 auto; + font-family: "Poppins", sans-serif; + + &__title { + margin-bottom: 56px; + font-size: 48px; + font-weight: 800; + color: #ffff; + } +} + +.section { + position: relative; + width: 100%; + overflow: hidden; + box-sizing: border-box; + margin-bottom: 80px; + + &__header { + display: flex; + justify-content: space-between; + } + + &__title { + margin-bottom: 24px; + color: #ffff; + } + + &__image { + width: 100%; + display: block; + margin-bottom: 40px; + } + + &__icons { + position: absolute; + top: 50%; + left: 0; + right: 0; + display: flex; + justify-content: space-between; + padding: 0 20px; + transform: translateY(-50%); + pointer-events: none; + } + + &.section__icon { + width: 8px; + height: auto; + pointer-events: auto; + cursor: pointer; + } +} + +.slider-indicators { + position: absolute; + bottom: 10px; + left: 50%; + transform: translateX(-50%); + display: flex; + gap: 10px; +} + +.slider-indicator { + width: 20px; + height: 4px; + background-color: #ffff; + border-radius: 20%; + opacity: 0.5; + transition: opacity 0.3s ease; + cursor: pointer; +} + +.slider-indicator.active { + opacity: 1; + background-color: #bd3eac; +} + +.header__icon--favourites { + margin-right: 48px; +} + +.header__icon--bag { + margin-right: 24px; +} + +.product-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + box-sizing: border-box; + gap: 16px; + margin-bottom: 40px; + width: 100%; +} + +.product-card { + // border: 1px solid #5a96b9; + width: 237px; + height: 512px; + + background: linear-gradient(20deg, #01201f 0%, #054946 20%, #76c4b8 40%, #d3d0ab 60%, #1c1b1b 80%, #000000 100%); + background: linear-gradient(135deg, #001408 ,#04581a, #748a61, #d3d0ab 60%, #1c1b1b 80%, #000000 100%); + + border-radius: 30px; + background: linear-gradient(150deg, #164a41 , #4d774e, #9dc88d, #d3d0ab 60%, #1c1b1b 80%, #000000 100%); + + background: linear-gradient(135deg, #081201 0%, #162108 , #7b9463 20%, #1c1b1b , #000000 100%); + background: rgb(30, 28, 28); + // background: linear-gradient(135deg, #000000 70%, #32607a 40%, #000000 70%,#092420, #0c7c69); + // background: #122f26; + // box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6); + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 32px; + color:#F1F2F9; + transition: box-shadow 0.3s ease, transform 0.3s ease; + + // width: 100%; + // height: 100%; + + &:hover { + // box-shadow: 0 4px 10px rgba(50, 48, 48, 4); + box-shadow: 0 10px 10px rgba(205, 236, 94, 0.4); + background: #0d0d0d; + + } + + &__image { + width: 100%; + margin-bottom: 16px; + height: 196px; + object-fit: contain; + transition: transform 0.3s ease; + } + + &__title { + color: rgb(222, 218, 218); + font-weight: 600; + font-size: 14px; + margin-bottom: 8px; + } + + // &__content { + // flex-grow: 1; + // } + + &__price { + position: relative; + display: flex; + margin-bottom: 24px; + font-size: 22px; + font-weight: 800; + + &-value { + &--new { + font-weight: 800; + font-size: 22px; + margin-right: 7px; + } + + &--old { + font-weight: 600; + font-size: 22px; + color: #363837; + } + } + + &::after { + content: ''; + position: absolute; + bottom: -8px; + left: 0; + width: 100%; + background-color: #ffff; + height: 0.8px; + + } + } + + &__specs { + font-size: 12px; + margin-bottom: 16px; + } + + &__details { + display: flex; + justify-content: space-between; + margin-bottom: 8px; + } + + &__property { + font-weight: 600; + color: #5c5c5c; + } + + &__value { + font-weight: 600; + color: #ffffff; + } + + &__actions { + display: flex; + justify-content: space-between; + align-items: center; + } + + &__button { + color: rgb(83, 82, 82); + border: none; + border-radius: 30px; + padding: 8px 16px; + cursor: pointer; + width: 160px; + height: 40px; + margin-right: 20px; + font-weight: 700; + font-size: 14px; + line-height: 21px; + transition: all 0.7s ease; + // background: linear-gradient(45deg, #092602,#747474, #a8f379); + // background: linear-gradient(45deg, #092602,#e1e39f, #273c1a); + + // background: linear-gradient(120deg,#a8e063, #07ad86, #000000); + + // background: linear-gradient(45deg,#f1ea9c, #024c29); + background-color: #78b829; + // background-color: greenyellow; + + + + } + + &__button:hover { + background: linear-gradient(120deg, #000000, #064d6c, #57788c,); + color: rgb(143, 143, 145); + scale: 1.1; + background: #304d0d; + // opacity: 0.5; + // background-color: black; + // color: white; + + } + + &__icon { + cursor: pointer; + height: 16px; + width: 16px; + } +} + +.product-card:hover .product-card__image { + transform: scale(1.1); +} + +.categories { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 16px; + margin-bottom: 81px; +} +.category { + border-radius: 16px; + padding: 24px; + // text-align: center; + + &__image { + width: 100%; + max-height: 320px; + margin-bottom: 16px; + background: linear-gradient(120deg, #27a36b, #133c33, #082b1c); + border-radius: 30px; + } + + &__title { + margin-bottom: 8px; + font-size: 20px; + font-weight: 700; + color: #ffff; + } + + &__count { + color: #38715e; + } +} + +.footer__container { + display: flex; + justify-content: space-between; + max-width: 1136px; + margin: 0 auto; + font-family: "Poppins", sans-serif; +} + +.footer__nav-list { + display: flex; + gap: 106px; +} +.footer__nav-link { + text-decoration: none; + font-size: 12px; + font-weight: 800; + color: #ffff; +} + +.footer__elements { + display: flex; + justify-content: space-between; +} +.footer__text { + font-weight: 700px; + font-size: 12px; + color: #89939A; +} +.footer__image { + margin-left: 16px; + height: 16px; + width: 16px; +} + + +.product-content { + display: flex; + justify-content: space-between; + border: 1px solid yellow; +} + +.product-gallery__thumbnails { + display: flex; + flex-direction: column; + gap: 16px; + border: 1px solid #04581a; +} + +.thumbnail { + width: 80px; + height: 80px; + cursor: pointer; + border: 1px solid #B4BDC4; + border-radius: 4px; + padding: 4px; +} + +.thumbnail.active { + border-color: #d0d00c; +} + +.thumbnail img { + width: 100%; + height: 100%; + object-fit: contain; +} + +.product-gallery__main-image { + width: 464px; + height: 464px; + border: 1px solid #E2E6E9; + border-radius: 4px; + padding: 8px; +} + +.main-image-container img { + width: 100%; + height: 100%; + object-fit: contain; +} + +.product-info { + display: flex; + flex-direction: column; + justify-content: space-between; + color: #ffff; + width: 320px; + height: 512px; + background: rgb(30, 28, 28); + padding: 32px; + color:#F1F2F9; + transition: box-shadow 0.3s ease, transform 0.3s ease; +} + +.product-page { + max-width: 1136px; + margin: 0 auto; + font-family: "Poppins", sans-serif; + display: flex; + justify-content: space-between; + gap: 64px; + margin-bottom: 48px; +} +.product-id { + color: #ffff; +} + +.picker-title { + color: #75767F; + font-family: "Poppins", sans-serif; + font-size: 12px; + font-weight: 700; + line-height: 15.34px; + text-align: left; + margin-bottom: 8px; +} + +.color-picker__options { + position: relative; + display: flex; + + +} +.color-picker__option { + width: 32px; + height: 32px; + border: 2px solid transparent; + margin-right: 8px; + border-radius: 50%; + cursor: pointer; + transition: border 0.3s; + + &:active { + border-color: #2f542f; + } + + + &::after { + content: ''; + position: absolute; + bottom: -24px; + left: 0; + width: 100%; + border: 1px solid #3B3E4A + + } +} + + + +.color-picker__option--gold { + background-color: #EFD4B8; +} + +.color-picker__option--green { + background-color: #546F6B; +} + +.color-picker__option--black { + background-color: #424242; +} + +.color-picker__option--white { + background-color: #F4F4F4; +} + +.capacity-picker__options { + display: flex; + position: relative; + + &::after { + content: ''; + position: absolute; + bottom: -24px; + left: 0; + width: 100%; + border: 1px solid #3B3E4A; + } +} +.capacity-picker__option { + width: 56px; + height: 32px; + margin-right: 8px; + outline: none; + font-family: "Poppins", sans-serif; + font-size: 14px; + font-weight: 600; + line-height: 21px; + text-align: center; + background: none; + border: 1px solid #4A4D58; + color: #F1F2F9; + cursor: pointer; + + &:active { + border-color: #515251; + background-color: white; + color: black; + } +} + + + +.product-actions { + display: flex; + justify-content: space-between; + align-items: center; + + &__button { + color: rgb(83, 82, 82); + border: none; + border-radius: 30px; + padding: 8px 16px; + cursor: pointer; + width: 263px; + height: 48px; + margin-right: 20px; + font-weight: 700; + font-size: 14px; + line-height: 21px; + transition: all 0.7s ease; + background-color: #78b829; + + } + + &__button:hover { + background: linear-gradient(120deg, #000000, #064d6c, #57788c,); + color: rgb(143, 143, 145); + scale: 1.1; + background: #304d0d; + } + + &__icon { + cursor: pointer; + height: 16px; + width: 16px; + } +} + + + + +.specs { + font-size: 12px; + margin-bottom: 16px; + + &__details { + display: flex; + justify-content: space-between; + margin-bottom: 8px; + } + + &__property { + font-family: "Poppins", sans-serif; + font-size: 12px; + font-weight: 600; + line-height: 15.34px; + text-align: left; + color: #89939A; + } + + &__value { + font-weight: 700; + color: #F1F2F9; + font-size: 12px; + } +} + +.product-info__id { + color: #4A4D58; + font-size: 12px; + font-weight: 600; + +} + +.products-details { + display: flex; + justify-content: space-between; +} + +.products-details__title { + font-family: "Poppins", sans-serif; + color: #F1F2F9; + font-size: 22px; + font-weight: 700; + margin-bottom: 48px; +} +.section-title { + font-size: 20px; + font-weight: 700; + color: #F1F2F9; + +} + +.about { + // margin-right: 64px; + max-width: 559px; +} + +.about__text { + color: #75767F; + font-family: "Poppins", sans-serif; + font-size: 14px; + font-weight: 600; + line-height: 21px; + text-align: left; + +} + +.specs { + font-size: 12px; + margin-bottom: 16px; + + &__details { + display: flex; + justify-content: space-between; + margin-bottom: 8px; + } + + &__property { + font-family: "Poppins", sans-serif; + font-size: 12px; + font-weight: 600; + line-height: 15.34px; + text-align: left; + color: #89939A; + } + + &__value { + font-weight: 700; + color: #F1F2F9; + font-size: 12px; + } +} diff --git a/src/App.tsx b/src/App.tsx index 372e4b4206..6ea1003917 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,396 @@ +// import './App.scss'; + +// export const App = () => ( +//
+//

Product Catalog

+//
+// ); + +// import './App.scss'; +// import styles from '../src/styles/layout.module.scss'; +// import logo from '../public/img/logo/Logo.svg'; +// import favouritesIcon from '../public/img/icons/Favourites.svg'; +// import shoppingBagIcon from '../public/img/icons/ShoppingBag.svg'; +// // import { logo, favouritesIcon, shoppingBagIcon } from './assets/icons'; +// // import { strokeLeft, strokeRight } from './assets/icons'; +// import banner from '../public/img/banner/Banner.svg'; +// import strokeLeft from '../public/img/icons/StrokeLeft.svg'; +// import strokeRight from '../public/img/icons/StrokeRight.svg'; +// import iPhone from '../public/img/iPhones/iphone-first.svg'; +// import iPhoneSecond from '../public/img/iPhones/iphone-two.svg'; +// import iPhoneThird from '../public/img/iPhones/iphone-three.svg'; +// import iPhoneFourth from '../public/img/iPhones/iphone-fhour.svg'; +// // import { iPhone, iPhoneSecond, iPhoneThird, iPhoneFourth } from './assets/image'; +// import categoryFirst from '../public/img/Category/categoryFirst.svg'; +// import categorySecond from '../public/img/Category/categorySecond.svg'; +// import categoryThird from '../public/img/Category/categoryThird.svg'; +// import hotPriceFirst from '../public/img/hotPrice/iPhone1.svg'; +// import hotPriceSecond from '../public/img/hotPrice/iPhone2.svg'; +// import hotPriceThird from '../public/img/hotPrice/iPhone3.svg'; +// import hotPriceFourth from '../public/img/hotPrice/iPhone4.svg'; +// import arrowUp from '../public/img/icons/ArrowUp.svg'; + +// export const App: React.FC = () => { +// return ( +//
+ +//
+//
+// +// Logo +// +// +//
+ +//
+// +// Favourites +// +// +// Shopping Bag +// +//
+//
+ +//
+//

Welcome to Nice Gadgets store!

+ +//
+// Banner +//
+// Previous +// Next +//
+//
+// +// +// +//
+//
+ +//
+//

Brand new models

+//
+//
+// iPhone +//

Apple iPhone 14 Pro 128GB Silver (MQ023)

+//

$999

+//
+//
+// Screen +// 6.1”OLED +//
+//
+// Capacity +// 128 GB +//
+//
+// RAM +// 6 GB +//
+//
+//
+// +// Favourites +//
+//
+ +//
+// iPhone +//

Apple iPhone 14 Pro 128GB Deep Purple (MQ0G3)

+//

$999

+//
+//
+// Screen: +// 6.1”OLED +//
+//
+// Capacity +// 128 GB +//
+//
+// RAM +// 6 GB +//
+//
+//
+// +// Favourites +//
+//
+//
+// iPhone +//

Apple iPhone 14 Plus 128GB PRODUCT GOLD (MQ513)

+//

$999

+//
+//
+// Screen: +// 6.7”OLED +//
+//
+// Capacity: +// 128 GB +//
+//
+// RAM: +// 6 GB +//
+//
+//
+// +// Favourites +//
+//
+//
+// iPhone +//

Apple iPhone 14 Plus 128GB PRODUCT Red (MQ513)

+//

$859

+//
+//
+// Screen: +// 6.7”OLED +//
+//
+// Capacity: +// 128 GB +//
+//
+// RAM: +// 6 GB +//
+//
+//
+// +// Favourites +//
+//
+//
+//
+ +//
+//

Shop by category

+//
+//
+// Phones +//

Mobile phones

+//

95 models

+//
+//
+// Tablets +//

Tablets

+//

95 models

+//
+//
+// Accessories +//

Accessories

+//

95 models

+//
+//
+//
+ +//
+//
+//   

Hot prices

+//   Previous +//   Next +//
+ +//
+//
+// +//

Apple iPhone 11 Pro Max 64GB Gold (iMT9G2FS/A)

+//
+//

$799

+//

$999

+//
+//
+//
+// Screen +// 6.1”OLED +//
+//
+// Capacity +// 64 GB +//
+//
+// RAM +// 4 GB +//
+//
+//
+// +// Favourites +//
+//
+ +//
+// +//

Apple iPhone 11 Pro Max 64GB Gold (iMT9G2FS/A)

+//
+//

$799

+//

$999

+//
+//
+//
+// Screen +// 6.5”OLED +//
+//
+// Capacity +// 64 GB +//
+//
+// RAM +// 4 GB +//
+//
+//
+// +// Favourites +//
+//
+ +//
+// +//

Apple iPhone 11 Pro Max 64GB Gold (iMT9G2FS/A)

+//
+//

$799

+//

$999

+//
+//
+//
+// Screen +// 6.5”OLED +//
+//
+// Capacity +// 64 GB +//
+//
+// RAM +// 4 GB +//
+//
+//
+// +// Favourites +//
+//
+ +//
+// +//

Apple iPhone 11 Pro Max 64GB Gold (iMT9G2FS/A)

+//
+//

$799

+//

$999

+//
+//
+//
+// Screen +// 6.5”OLED +//
+//
+// Capacity +// 64 GB +//
+//
+// RAM +// 4 GB +//
+//
+//
+// +// Favourites +//
+//
+//
+//
+//
+ +// +//
+// ); +// }; + +// src/App.tsx +import React from 'react'; +import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; +import { Header } from './layout/Header'; +import { Footer } from './layout/Footer'; import './App.scss'; +import styles from '../src/styles/layout.module.scss'; +import { useRef } from 'react'; +import PhonesPage from './modules/PhonesPage/PhonesPage'; +import ProductsPage from './modules/ProductsPage/ProductsPage'; +import AccessoriesPage from './modules/AccessoriesPage/AccessoriesPage'; +import TabletsPage from './modules/TabletsPage/TabletsPage'; +import { ProductDetailsPage } from './modules/ProductDetailsPage/ProductDetailsPage'; + +export const App: React.FC = () => { + const topRef = useRef(null); -export const App = () => ( -
-

Product Catalog

-
-); + return ( + +
+
+
+ + } /> + } /> + } /> + } /> + } /> + Favourites Page
} /> + Shopping Bag Page} + /> + Page not found} /> + + +