diff --git a/package-lock.json b/package-lock.json index 3f3efaac38..dc3006d779 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2121,9 +2121,9 @@ } }, "@mate-academy/scripts": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.2.0.tgz", - "integrity": "sha512-tQJkIK7KlRHSXkNiI79yGoSFAocFFY765RHOvCoPjCmLjLWeKVx9MY0x2rFMnnneg83rvcvGdVg9DvvUqRXfag==", + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.2.8.tgz", + "integrity": "sha512-MqvuqrG8UUzQkRc375ZUIOd23nJ0BYqae/Nn5t01aDutSqZnz1ye65W4sLHiSuQJGIuHRO0CEyJxAO72wX1efw==", "dev": true, "requires": { "@octokit/rest": "^17.11.2", @@ -2264,12 +2264,12 @@ }, "dependencies": { "@octokit/types": { - "version": "6.34.0", - "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.34.0.tgz", - "integrity": "sha512-s1zLBjWhdEI2zwaoSgyOFoKSl109CUcVBCc7biPJ3aAf6LGLU6szDvi31JPU7bxfla2lqfhjbbg/5DdFNxOwHw==", + "version": "6.41.0", + "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.41.0.tgz", + "integrity": "sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg==", "dev": true, "requires": { - "@octokit/openapi-types": "^11.2.0" + "@octokit/openapi-types": "^12.11.0" } } } @@ -2300,12 +2300,12 @@ }, "dependencies": { "@octokit/types": { - "version": "6.34.0", - "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.34.0.tgz", - "integrity": "sha512-s1zLBjWhdEI2zwaoSgyOFoKSl109CUcVBCc7biPJ3aAf6LGLU6szDvi31JPU7bxfla2lqfhjbbg/5DdFNxOwHw==", + "version": "6.41.0", + "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.41.0.tgz", + "integrity": "sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg==", "dev": true, "requires": { - "@octokit/openapi-types": "^11.2.0" + "@octokit/openapi-types": "^12.11.0" } }, "is-plain-object": { @@ -2334,12 +2334,12 @@ }, "dependencies": { "@octokit/types": { - "version": "6.34.0", - "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.34.0.tgz", - "integrity": "sha512-s1zLBjWhdEI2zwaoSgyOFoKSl109CUcVBCc7biPJ3aAf6LGLU6szDvi31JPU7bxfla2lqfhjbbg/5DdFNxOwHw==", + "version": "6.41.0", + "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.41.0.tgz", + "integrity": "sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg==", "dev": true, "requires": { - "@octokit/openapi-types": "^11.2.0" + "@octokit/openapi-types": "^12.11.0" } }, "universal-user-agent": { @@ -2351,27 +2351,27 @@ } }, "@octokit/openapi-types": { - "version": "11.2.0", - "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-11.2.0.tgz", - "integrity": "sha512-PBsVO+15KSlGmiI8QAzaqvsNlZlrDlyAJYcrXBCvVUxCp7VnXjkwPoFHgjEJXx3WF9BAwkA6nfCUA7i9sODzKA==", + "version": "12.11.0", + "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-12.11.0.tgz", + "integrity": "sha512-VsXyi8peyRq9PqIz/tpqiL2w3w80OgVMwBHltTml3LmVvXiphgeqmY9mvBw9Wu7e0QWk/fqD37ux8yP5uVekyQ==", "dev": true }, "@octokit/plugin-paginate-rest": { - "version": "2.17.0", - "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-2.17.0.tgz", - "integrity": "sha512-tzMbrbnam2Mt4AhuyCHvpRkS0oZ5MvwwcQPYGtMv4tUa5kkzG58SVB0fcsLulOZQeRnOgdkZWkRUiyBlh0Bkyw==", + "version": "2.21.3", + "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-2.21.3.tgz", + "integrity": "sha512-aCZTEf0y2h3OLbrgKkrfFdjRL6eSOo8komneVQJnYecAxIej7Bafor2xhuDJOIFau4pk0i/P28/XgtbyPF0ZHw==", "dev": true, "requires": { - "@octokit/types": "^6.34.0" + "@octokit/types": "^6.40.0" }, "dependencies": { "@octokit/types": { - "version": "6.34.0", - "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.34.0.tgz", - "integrity": "sha512-s1zLBjWhdEI2zwaoSgyOFoKSl109CUcVBCc7biPJ3aAf6LGLU6szDvi31JPU7bxfla2lqfhjbbg/5DdFNxOwHw==", + "version": "6.41.0", + "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.41.0.tgz", + "integrity": "sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg==", "dev": true, "requires": { - "@octokit/openapi-types": "^11.2.0" + "@octokit/openapi-types": "^12.11.0" } } } @@ -2418,12 +2418,12 @@ }, "dependencies": { "@octokit/types": { - "version": "6.34.0", - "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.34.0.tgz", - "integrity": "sha512-s1zLBjWhdEI2zwaoSgyOFoKSl109CUcVBCc7biPJ3aAf6LGLU6szDvi31JPU7bxfla2lqfhjbbg/5DdFNxOwHw==", + "version": "6.41.0", + "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.41.0.tgz", + "integrity": "sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg==", "dev": true, "requires": { - "@octokit/openapi-types": "^11.2.0" + "@octokit/openapi-types": "^12.11.0" } }, "is-plain-object": { @@ -2452,12 +2452,12 @@ }, "dependencies": { "@octokit/types": { - "version": "6.34.0", - "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.34.0.tgz", - "integrity": "sha512-s1zLBjWhdEI2zwaoSgyOFoKSl109CUcVBCc7biPJ3aAf6LGLU6szDvi31JPU7bxfla2lqfhjbbg/5DdFNxOwHw==", + "version": "6.41.0", + "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.41.0.tgz", + "integrity": "sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg==", "dev": true, "requires": { - "@octokit/openapi-types": "^11.2.0" + "@octokit/openapi-types": "^12.11.0" } } } @@ -2569,9 +2569,9 @@ } }, "@sinonjs/text-encoding": { - "version": "0.7.1", - "resolved": "https://registry.npmjs.org/@sinonjs/text-encoding/-/text-encoding-0.7.1.tgz", - "integrity": "sha512-+iTbntw2IZPb/anVDbypzfQa+ay64MW0Zo8aJ8gZPWMMK6/OubMVb6lUPMagqjOPnmtauXnFCACVl3O7ogjeqQ==", + "version": "0.7.2", + "resolved": "https://registry.npmjs.org/@sinonjs/text-encoding/-/text-encoding-0.7.2.tgz", + "integrity": "sha512-sXXKG+uL9IrKqViTtao2Ws6dy0znu9sOaP1di/jKGW1M6VssO8vlpXCQcpZ+jisQ1tTFAC5Jo/EOzFbggBagFQ==", "dev": true }, "@stylelint/postcss-css-in-js": { @@ -4142,9 +4142,9 @@ } }, "before-after-hook": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.2.tgz", - "integrity": "sha512-3pZEU3NT5BFUo/AD5ERPWOgQOCZITni6iavr5AUw5AUwQjMlI0kzu5btnyD39AF0gUEsDPwJT+oY1ORBJijPjQ==", + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.3.tgz", + "integrity": "sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ==", "dev": true }, "bfj": { @@ -6306,6 +6306,14 @@ } } }, + "dom7": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/dom7/-/dom7-3.0.0.tgz", + "integrity": "sha512-oNlcUdHsC4zb7Msx7JN3K0Nro1dzJ48knvBOnDPKJ2GV9wl1i5vydJZUSyOfrkKFDZEud/jBsTk92S/VGSAe/g==", + "requires": { + "ssr-window": "^3.0.0-alpha.1" + } + }, "domain-browser": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz", @@ -12219,7 +12227,7 @@ "lodash.get": { "version": "4.4.2", "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz", - "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=", + "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==", "dev": true }, "lodash.isempty": { @@ -12402,9 +12410,9 @@ "integrity": "sha512-WY9wjJNQt9+PZilnLbuFKM+SwDull9+6IAguOrarOMoOHTcJ9GnXSO11+Gw6c7xtDkBkthR57OZMtZKYr+1CEw==" }, "macos-release": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/macos-release/-/macos-release-2.5.0.tgz", - "integrity": "sha512-EIgv+QZ9r+814gjJj0Bt5vSLJLzswGmSUbUpbi9AIr/fsN2IWFBl2NucV9PAiek+U1STK468tEkxmVYUtuAN3g==", + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/macos-release/-/macos-release-2.5.1.tgz", + "integrity": "sha512-DXqXhEM7gW59OjZO8NIjBCz9AQ1BEMrfiOAl4AYByHCtVHRF4KoGNO8mqQeM8lRCtQe/UnJ4imO/d2HdkKsd+A==", "dev": true }, "magic-string": { @@ -13267,7 +13275,7 @@ "isarray": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", - "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=", + "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==", "dev": true }, "path-to-regexp": { @@ -13298,9 +13306,9 @@ } }, "node-fetch": { - "version": "2.6.7", - "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz", - "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==", + "version": "2.6.12", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.12.tgz", + "integrity": "sha512-C/fGU2E8ToujUivIO0H+tpQ6HWo4eEmchoPIoXtxCrVghxdKq+QOHqEZW7tuP3KlV3bC8FRMO5nMCC7Zm1VP6g==", "dev": true, "requires": { "whatwg-url": "^5.0.0" @@ -13309,19 +13317,19 @@ "tr46": { "version": "0.0.3", "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", - "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=", + "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==", "dev": true }, "webidl-conversions": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", - "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=", + "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==", "dev": true }, "whatwg-url": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", - "integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=", + "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==", "dev": true, "requires": { "tr46": "~0.0.3", @@ -17507,6 +17515,11 @@ "tweetnacl": "~0.14.0" } }, + "ssr-window": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-3.0.0.tgz", + "integrity": "sha512-q+8UfWDg9Itrg0yWK7oe5p/XRCJpJF9OBtXfOPgSJl+u3Xd5KI328RUEvUqSMVM9CiQUEf1QdBzJMkYGErj9QA==" + }, "ssri": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz", @@ -18069,6 +18082,15 @@ "util.promisify": "~1.0.0" } }, + "swiper": { + "version": "6.8.4", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-6.8.4.tgz", + "integrity": "sha512-O+buF9Q+sMA0H7luMS8R59hCaJKlpo8PXhQ6ZYu6Rn2v9OsFd4d1jmrv14QvxtQpKAvL/ZiovEeANI/uDGet7g==", + "requires": { + "dom7": "^3.0.0", + "ssr-window": "^3.0.0" + } + }, "symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", diff --git a/package.json b/package.json index b554f8b8b0..fcf0a55bee 100755 --- a/package.json +++ b/package.json @@ -10,14 +10,15 @@ "bulma": "^0.9.3", "react": "^17.0.2", "react-dom": "^17.0.2", - "react-scripts": "^4.0.3" + "react-scripts": "^4.0.3", + "swiper": "^6.8.4" }, "devDependencies": { "@cypress/webpack-dev-server": "^1.8.4", "@mate-academy/cypress-tools": "^1.0.4", "@mate-academy/eslint-config-react": "*", "@mate-academy/eslint-config-react-typescript": "*", - "@mate-academy/scripts": "^1.2.1", + "@mate-academy/scripts": "^1.2.8", "@mate-academy/students-ts-config": "*", "@mate-academy/stylelint-config": "*", "@types/node": "^17.0.23", diff --git a/public/images/BannerHomePage.png b/public/images/BannerHomePage.png new file mode 100644 index 0000000000..0a7bf8ea55 Binary files /dev/null and b/public/images/BannerHomePage.png differ diff --git a/public/images/LOGO.png b/public/images/LOGO.png new file mode 100644 index 0000000000..f320a4c06d Binary files /dev/null and b/public/images/LOGO.png differ diff --git a/public/images/icons/ArrowDown.svg b/public/images/icons/ArrowDown.svg new file mode 100644 index 0000000000..8819d342b3 --- /dev/null +++ b/public/images/icons/ArrowDown.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/images/icons/ArrowLeft.svg b/public/images/icons/ArrowLeft.svg new file mode 100644 index 0000000000..abdbd71aee --- /dev/null +++ b/public/images/icons/ArrowLeft.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/images/icons/ArrowRight.svg b/public/images/icons/ArrowRight.svg new file mode 100644 index 0000000000..2f44f37df4 --- /dev/null +++ b/public/images/icons/ArrowRight.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/images/icons/ArrowUp.svg b/public/images/icons/ArrowUp.svg new file mode 100644 index 0000000000..1579b82014 --- /dev/null +++ b/public/images/icons/ArrowUp.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/images/icons/HeartLike.svg b/public/images/icons/HeartLike.svg new file mode 100644 index 0000000000..8bc545b074 --- /dev/null +++ b/public/images/icons/HeartLike.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/images/icons/HeartLikeFilled.svg b/public/images/icons/HeartLikeFilled.svg new file mode 100644 index 0000000000..089b4d6d6c --- /dev/null +++ b/public/images/icons/HeartLikeFilled.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/images/icons/Home.svg b/public/images/icons/Home.svg new file mode 100644 index 0000000000..8cdc044a35 --- /dev/null +++ b/public/images/icons/Home.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/images/icons/Search.svg b/public/images/icons/Search.svg new file mode 100644 index 0000000000..8685c5b0cd --- /dev/null +++ b/public/images/icons/Search.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/images/icons/ShoppingbagCart.svg b/public/images/icons/ShoppingbagCart.svg new file mode 100644 index 0000000000..a44e90731e --- /dev/null +++ b/public/images/icons/ShoppingbagCart.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/images/preview-category-accessories.png b/public/images/preview-category-accessories.png new file mode 100644 index 0000000000..5ed772c82e Binary files /dev/null and b/public/images/preview-category-accessories.png differ diff --git a/public/images/preview-category-phone.png b/public/images/preview-category-phone.png new file mode 100644 index 0000000000..debce1a69f Binary files /dev/null and b/public/images/preview-category-phone.png differ diff --git a/public/images/preview-category-tablets.png b/public/images/preview-category-tablets.png new file mode 100644 index 0000000000..f663ca067f Binary files /dev/null and b/public/images/preview-category-tablets.png differ diff --git a/public/images/product-card-img.png b/public/images/product-card-img.png new file mode 100644 index 0000000000..a7e8012d2c Binary files /dev/null and b/public/images/product-card-img.png differ diff --git a/src/App.scss b/src/App.scss index 71bc413aad..dca804f1bd 100644 --- a/src/App.scss +++ b/src/App.scss @@ -1 +1,21 @@ -// not empty +@font-face { + font-family: Mont-Regular; + src: url('../src/fonts/Mont-Regular.otf') format('truetype'); +} +@font-face { + font-family: Mont-SemiBold; + src: url('../src/fonts/Mont-SemiBold.otf') format('truetype'); +} +@font-face { + font-family: Mont-Bold; + src: url('../src/fonts/Mont-Bold.otf') format('truetype'); +} + +html, +body { + margin: 0; +} + +.App { + font-family: Mont-Regular; +} diff --git a/src/App.tsx b/src/App.tsx index a1715e52b3..318a8cd619 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,8 +1,16 @@ import './App.scss'; +import { HomePage } from './pages/HomePage'; +import { PhonesPage } from './pages/PhonesPage'; +import { Footer } from './pages/components/Footer'; +import { Header } from './pages/components/Header'; + const App = () => (
-

React Phone Catalog

+
+ + +
); diff --git a/src/api/banners.json b/src/api/banners.json new file mode 100644 index 0000000000..c7b25e65fe --- /dev/null +++ b/src/api/banners.json @@ -0,0 +1,54 @@ +[ + { + "age": 0, + "id": "banner1", + "type": "banner", + "imageUrl": "images/BannerHomePage.png", + "name": "Banner phones", + "snippet": "Best phones in our shop", + "price": 100, + "discount": 0, + "screen": "Full size", + "capacity": "", + "ram": "" + }, + { + "age": 0, + "id": "banner2", + "type": "banner", + "imageUrl": "images/BannerHomePage.png", + "name": "Banner phones", + "snippet": "Best phones in our shop", + "price": 100, + "discount": 0, + "screen": "Full size", + "capacity": "", + "ram": "" + }, + { + "age": 0, + "id": "banner3", + "type": "banner", + "imageUrl": "images/BannerHomePage.png", + "name": "Banner phones", + "snippet": "Best phones in our shop", + "price": 100, + "discount": 0, + "screen": "Full size", + "capacity": "", + "ram": "" + }, + { + "age": 0, + "id": "banner4", + "type": "banner", + "imageUrl": "images/BannerHomePage.png", + "name": "Banner phones", + "snippet": "Best phones in our shop", + "price": 100, + "discount": 0, + "screen": "Full size", + "capacity": "", + "ram": "" + } +] diff --git a/src/fonts/Mont-Bold.otf b/src/fonts/Mont-Bold.otf new file mode 100644 index 0000000000..7f1598293a Binary files /dev/null and b/src/fonts/Mont-Bold.otf differ diff --git a/src/fonts/Mont-Regular.otf b/src/fonts/Mont-Regular.otf new file mode 100644 index 0000000000..d5543feaf0 Binary files /dev/null and b/src/fonts/Mont-Regular.otf differ diff --git a/src/fonts/Mont-SemiBold.otf b/src/fonts/Mont-SemiBold.otf new file mode 100644 index 0000000000..a9fa16a9c5 Binary files /dev/null and b/src/fonts/Mont-SemiBold.otf differ diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx new file mode 100644 index 0000000000..8fda3d304a --- /dev/null +++ b/src/pages/HomePage.tsx @@ -0,0 +1,105 @@ +/* eslint-disable jsx-a11y/anchor-is-valid */ +import { FC } from 'react'; + +// import { useSwiper } from 'swiper/react'; +import { ProductsSlider } from './components/ProductsSlider'; +import '../styles/blocks/home-page.scss'; +import { Slider } from './components/Slider'; + +import slides from '../api/banners.json'; + +export const HomePage: FC = () => { + // const swiper = useSwiper(); + + return ( + <> +
+ +
+ + +
+
+ + +
+
+ 1 + 2 + 3 +
+
+ +
+ +
+

+ Hot prices +

+ +
+ +
+

Shop by category

+
+
+ + Phone Category + +

+ Mobile phones +

+

95 models

+
+
+ + Phone Category + +

+ Tablets +

+

24 models

+
+
+ + Phone Category + +

+ Accessories +

+

100 models

+
+
+
+ +
+

+ Brand new models +

+ +
+
+ + + ); +}; diff --git a/src/pages/PhonesPage.tsx b/src/pages/PhonesPage.tsx new file mode 100644 index 0000000000..2084324d2a --- /dev/null +++ b/src/pages/PhonesPage.tsx @@ -0,0 +1,81 @@ +import { FC } from 'react'; +import Breadcrumbs from './components/Breadcrumbs'; +import { ProductsList } from './components/ProductsList'; +import '../styles/blocks/phones-page.scss'; + +export const PhonesPage: FC = () => { + const breadcrumbItems = [ + { text: 'Home', link: '/' }, + { text: 'Category', link: '/category' }, + { text: 'Subcategory', link: '/category/subcategory' }, + { text: 'Current Page', link: '/category/subcategory/current-page' }, + ]; + + return ( +
+ +

Mobile phones

+

95 models

+
+
+

Sort by

+ +
+
+

Items on page

+ +
+
+ +
+ ); +}; diff --git a/src/pages/components/BreadcrumbItem.tsx b/src/pages/components/BreadcrumbItem.tsx new file mode 100644 index 0000000000..8d962e4d07 --- /dev/null +++ b/src/pages/components/BreadcrumbItem.tsx @@ -0,0 +1,24 @@ +// BreadcrumbItem.js +import { FC } from 'react'; +import '../../styles/blocks/breadcrumb.scss'; + +type Props = { + text: string, + link: string, +}; + +const BreadcrumbItem: FC = ({ text, link }) => { + return ( + <> + {(text === 'Home') ? ( + + Home icon + + ) : ( + {text} + )} + + ); +}; + +export default BreadcrumbItem; diff --git a/src/pages/components/Breadcrumbs.tsx b/src/pages/components/Breadcrumbs.tsx new file mode 100644 index 0000000000..1624a6e667 --- /dev/null +++ b/src/pages/components/Breadcrumbs.tsx @@ -0,0 +1,27 @@ +// Breadcrumbs.js +import { FC } from 'react'; +import BreadcrumbItem from './BreadcrumbItem'; +import '../../styles/blocks/breadcrumb.scss'; + +type Props = { + items: { text: string; link: string; }[], +}; + +const Breadcrumbs: FC = ({ items }) => { + return ( + + ); +}; + +export default Breadcrumbs; diff --git a/src/pages/components/Footer.tsx b/src/pages/components/Footer.tsx new file mode 100644 index 0000000000..40e5331c38 --- /dev/null +++ b/src/pages/components/Footer.tsx @@ -0,0 +1,20 @@ +import { FC } from 'react'; +import '../../styles/blocks/footer.scss'; + +export const Footer: FC = () => { + return ( + + ); +}; diff --git a/src/pages/components/Header.tsx b/src/pages/components/Header.tsx new file mode 100644 index 0000000000..d3b9068d8a --- /dev/null +++ b/src/pages/components/Header.tsx @@ -0,0 +1,52 @@ +/* eslint-disable jsx-a11y/anchor-is-valid */ +import { FC } from 'react'; +import '../../styles/blocks/header.scss'; + +export const Header: FC = () => { + return ( +
+
+ +
+ + Favorites + + + Shopping bag + +
+
+
+ ); +}; diff --git a/src/pages/components/ProductCard.tsx b/src/pages/components/ProductCard.tsx new file mode 100644 index 0000000000..6804b9acac --- /dev/null +++ b/src/pages/components/ProductCard.tsx @@ -0,0 +1,45 @@ +import { FC } from 'react'; +import '../../styles/blocks/product-card.scss'; + +export const ProductCard: FC = () => { + return ( +
+ Phone +

+ Apple iPhone Xs 64GB Silver (iMT9G2FS/A) +

+

$799

+

$899

+
+
Screen
+
5.8” OLED
+
Capacity
+
64 GB
+
RAM
+
4 GB
+
+
+ + + icon + +
+
+ ); +}; diff --git a/src/pages/components/ProductsList.tsx b/src/pages/components/ProductsList.tsx new file mode 100644 index 0000000000..6f94b23df0 --- /dev/null +++ b/src/pages/components/ProductsList.tsx @@ -0,0 +1,25 @@ +import { FC } from 'react'; +import { ProductCard } from './ProductCard'; +import '../../styles/blocks/products-list.scss'; + +export const ProductsList: FC = () => { + return ( + + ); +}; diff --git a/src/pages/components/ProductsSlider.tsx b/src/pages/components/ProductsSlider.tsx new file mode 100644 index 0000000000..a32f899ea8 --- /dev/null +++ b/src/pages/components/ProductsSlider.tsx @@ -0,0 +1,14 @@ +import { FC } from 'react'; +import { ProductCard } from './ProductCard'; +import '../../styles/blocks/products-slider.scss'; + +export const ProductsSlider: FC = () => { + return ( +
+ + + + +
+ ); +}; diff --git a/src/pages/components/Slider.tsx b/src/pages/components/Slider.tsx new file mode 100644 index 0000000000..18794f5fc9 --- /dev/null +++ b/src/pages/components/Slider.tsx @@ -0,0 +1,51 @@ +/* eslint-disable no-console */ +import { FC } from 'react'; + +import { Swiper, SwiperSlide } from 'swiper/react'; +// import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules'; + +import 'swiper/swiper.min.css'; + +export type Product = { + age: number, + id: string, + type: string, + imageUrl: string, + name: string, + snippet: string, + price: number, + discount: number, + screen: string, + capacity: string, + ram: string +}; + +type Props = { + slides: Product[]; +}; + +export const Slider: FC = ({ slides }) => { + return ( + console.log('slide change')} + onSwiper={(swiper) => console.log(swiper)} + > + {slides.map(slide => ( + + Phones + + ))} + ... + + ); +}; diff --git a/src/styles/blocks/breadcrumb.scss b/src/styles/blocks/breadcrumb.scss new file mode 100644 index 0000000000..2e8f1f7ab3 --- /dev/null +++ b/src/styles/blocks/breadcrumb.scss @@ -0,0 +1,14 @@ +.breadcrumb { + &__breadcrumb-list { + list-style: none; + } + &__breadcrumb-item { + + } +} + +.breadcrumb-item { + &__link { + + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000000..b388ac4884 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,47 @@ +.footer { + display: flex; + box-sizing: border-box; + height: 96px; + padding-inline: 152px; + justify-content: space-between; + align-items: center; + + background: var(--gray-white, #FFF); + box-shadow: 0px -1px 0px 0px #E2E6E9; + &__link { + text-decoration: none; + color: var(--gray-secondary, #89939A); + + /* Uppercase */ + font-family: Mont-Bold; + font-size: 12px; + font-style: normal; + font-weight: 700; + line-height: 11px; /* 91.667% */ + letter-spacing: 0.48px; + text-transform: uppercase; + } + &__container { + display: flex; + gap: 64px; + } + &__backtotop-button { + width: 32px; + height: 32px; + position: relative; + &::before { + content: 'Back to top'; + position: absolute; + width: max-content; + right: 48px; + + color: var(--gray-secondary, #89939A); + + /* Small text 12 */ + font-family: Mont-SemiBold; + font-size: 12px; + font-style: normal; + line-height: normal; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..a792a55fbe --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,54 @@ +.header { + + &__content { + display: flex; + justify-content: space-between; + align-items: center; + text-transform: uppercase; + height: 64px; + background: var(--gray-white, #FFF); + box-shadow: 0px 1px 0px 0px #E2E6E9; + } + + &__nav { + margin-left: 24px; + } + + &__favorites-card-buttons { + display: flex; + } +} + +.nav { + display: flex; + gap: 64px; + + &__link { + display: inline-block; + height: 100%; + + text-decoration: none; + font-size: 12px; + font-weight: 700; + line-height: 11px; + letter-spacing: 0.04em; + + color: #89939A; + } +} + +.favorites-card-buttons--link { + width: 64px; + height: 64px; + display: flex; + align-items: center; + justify-content: center; + + background: var(--gray-white, #FFF); + box-shadow: -1px 0px 0px 0px #E2E6E9; +} + +.favorites-card-buttons--icon { + width: 16px; + height: 16px; +} diff --git a/src/styles/blocks/home-page.scss b/src/styles/blocks/home-page.scss new file mode 100644 index 0000000000..dba2468307 --- /dev/null +++ b/src/styles/blocks/home-page.scss @@ -0,0 +1,95 @@ +.home-page { + padding-inline: 152px; + + &__preview-slider { + margin-bottom: 72px; + } + &__hot-prices { + margin-bottom: 80px; + } + &__shop-by-category { + margin-bottom: 80px; + } + + &__brand-new { + margin-bottom: 80px; + } +} + +.preview-slider { + display: flex; + height: 400px; + gap: 16px; + margin-top: 40px; + + &__button { + width: 32px; + background: #FFF; + border: 1px solid #B4BDC3; + } + + &__container { + } + + &__picture { + width: 1040px; + height: 400px; + + background-color: gray; + } +} + +.pagination { + text-align: center; + &__link { + text-decoration: none; + padding-inline: 10px; + } +} + +.hot-prices { + &__title { + font-family: Mont-Bold; + } +} + +.shop-by-category { + &__title { + font-family: Mont-Bold; + } + &__container { + display: flex; + gap: 16px; + } +} + +.category { + &__link { + display: inline-block; + box-sizing: border-box; + height: 368px; + margin-bottom: 24px; + } + &__title { + margin: 0; + + font-family: Mont-SemiBold; + color: var(--gray-primary, #313237); + + /* H3 */ + font-size: 20px; + line-height: normal; + } + &__description { + margin: 0; + color: var(--gray-secondary, #89939A); + + /* Body text 14 */ + font-size: 14px; + line-height: 21px; /* 150% */ + } +} + +.brand-new { + font-family: Mont-Bold; +} diff --git a/src/styles/blocks/phones-page.scss b/src/styles/blocks/phones-page.scss new file mode 100644 index 0000000000..37279e3178 --- /dev/null +++ b/src/styles/blocks/phones-page.scss @@ -0,0 +1,59 @@ +.phone-page { + padding-inline: 152px; + &__title { + margin: 0; + margin-bottom: 8px; + color: var(--gray-primary, #313237); + + /* H1 */ + font-family: Mont-Bold; + font-size: 32px; + line-height: normal; + letter-spacing: -0.32px; + } + &__amount-phone-text { + margin: 0; + margin-bottom: 40px; + color: var(--gray-secondary, #89939A); + + /* Body text 14 */ + font-size: 14px; + line-height: 21px; /* 150% */ + } + &__filter { + + } +} + +.filter { + display: flex; + gap: 16px; + &__title { + margin: 0; + margin-bottom: 4px; + color: var(--gray-secondary, #89939A); + + /* Small text 12 */ + font-family: Mont-SemiBold; + font-size: 12px; + font-style: normal; + line-height: normal; + } + &__selector { + width: 174px; + height: 40px; + flex-shrink: 0; + padding: 10px 12px 9px; + font-family: Mont-Regular; + border: 1px solid #B4BDC3; + + &--items { + padding: 10px 12px 9px; + height: 40px; + + &:hover { + background-color: var(--gray-background, #FAFBFC);; + } + } + } +} diff --git a/src/styles/blocks/product-card.scss b/src/styles/blocks/product-card.scss new file mode 100644 index 0000000000..3704cabd20 --- /dev/null +++ b/src/styles/blocks/product-card.scss @@ -0,0 +1,97 @@ +.product-card { + box-sizing: border-box; + width: 272px; + height: 507px; + border: 1px solid var(--gray-elements, #E2E6E9); + background: var(--gray-white, #FFF); + padding: 32px 32px 24px; + + &__phone-img { + width: 208px; + height: 208px; + margin-bottom: 24px; + } + + &__title { + color: var(--gray-primary, #313237); + + font-size: 14px; + line-height: 21px; /* 150% */ + } + + &__price { + display: inline-block; + margin: 0; + color: var(--gray-primary, #313237); + margin-right: 8px; + + /* H2 */ + font-family: Mont-Bold; + font-size: 22px; + line-height: 140%; /* 30.8px */ + + &--discount { + color: var(--gray-secondary, #89939A); + font-family: Mont-SemiBold; + line-height: normal; + text-decoration-line: line-through; + } + } + + &__description-phone { + } + + &__container { + display: flex; + gap: 8px; + } + + &__add-to-card { + box-sizing: border-box; + width: 176px; + height: 40px; + background-color: #313237; + + color: var(--gray-white, #FFF); + font-family: Mont-SemiBold; + font-size: 14px; + font-weight: 600; + line-height: 21px; /* 150% */ + } + + &__add-to-favorites { + display: flex; + justify-content: center; + align-items: center; + box-sizing: border-box; + gap: 8px; + width: 40px; + height: 40px; + border: 1px solid var(--gray-icons-placeholders, #B4BDC3); + } +} + +.description-phone { + display: grid; + grid-template-columns: repeat(2, 1fr); + border-top: 1px solid #E2E6E9; + margin-block: 8px 16px; + padding-top: 16px; + + /* Small text 12 */ + font-family: Mont-SemiBold; + font-size: 12px; + + &--title { + color: var(--gray-secondary, #89939A); + } + + &--value { + + } +} + +.add-to-favorites__icon { + width: 16px; + height: 16px; +} diff --git a/src/styles/blocks/products-list.scss b/src/styles/blocks/products-list.scss new file mode 100644 index 0000000000..7e203de5e6 --- /dev/null +++ b/src/styles/blocks/products-list.scss @@ -0,0 +1,7 @@ +.products-list { + display: flex; + flex-wrap: wrap; + &__item { + list-style: none; + } +} diff --git a/src/styles/blocks/products-slider.scss b/src/styles/blocks/products-slider.scss new file mode 100644 index 0000000000..26639e766e --- /dev/null +++ b/src/styles/blocks/products-slider.scss @@ -0,0 +1,4 @@ +.products-slider { + display: flex; + gap: 16px; +}