From f1a91de4879ce46d042504e8677ec13b0bac9e82 Mon Sep 17 00:00:00 2001
From: OlehTereshchuk <olehtereshchuk@ukr.net>
Date: Wed, 15 Jan 2020 00:11:11 +0200
Subject: [PATCH] 1-4

---
 .stylelintrc.js                       |   2 +-
 README.md                             |  22 ++--
 package.json                          |   9 +-
 public/images/appstore.png            | Bin 0 -> 3656 bytes
 public/images/arrow-down.svg          |   3 +
 public/images/close.svg               |   3 +
 public/images/delivery.svg            |   4 +
 public/images/facebook.svg            |   3 +
 public/images/google-play.png         | Bin 0 -> 4112 bytes
 public/images/instagram.svg           |   5 +
 public/images/logo-footer.svg         |   4 +
 public/images/logo.svg                |   4 +
 public/images/place.svg               |   3 +
 public/images/search.svg              |   3 +
 public/images/twitter.svg             |   3 +
 public/images/world.svg               |   3 +
 public/index.html                     |   2 +
 src/App.css                           |   1 -
 src/App.js                            |  17 ++-
 src/components/Error.js               |  20 ++++
 src/components/Footer.js              |  80 ++++++++++++++
 src/components/Header.js              | 149 ++++++++++++++++++++++++++
 src/components/Input.js               |  80 ++++++++++++++
 src/components/Loader.js              |  24 +++++
 src/components/RestaurantCard.js      |  29 +++++
 src/components/RestaurantsListPage.js |  72 +++++++++++++
 src/components/Select.js              |  51 +++++++++
 src/index.js                          |  10 +-
 src/store/errorReducer.js             |  17 +++
 src/store/loadDataFromServer.js       |   7 ++
 src/store/loadingReducer.js           |  23 ++++
 src/store/restaurantsReducer.js       |  17 +++
 src/store/store.js                    |  43 ++++++++
 src/styles/Error.scss                 |  20 ++++
 src/styles/Footer.scss                | 143 ++++++++++++++++++++++++
 src/styles/Header.scss                |  97 +++++++++++++++++
 src/styles/Input.scss                 |  47 ++++++++
 src/styles/Loader.scss                | 102 ++++++++++++++++++
 src/styles/Page.scss                  |   6 ++
 src/styles/RestaurantCard.scss        |  37 +++++++
 src/styles/RestaurantsList.scss       |  17 +++
 src/styles/Select.scss                |  33 ++++++
 src/styles/default.scss               |  47 ++++++++
 src/styles/extends.scss               |  16 +++
 src/styles/variables.scss             |   7 ++
 45 files changed, 1265 insertions(+), 20 deletions(-)
 create mode 100644 public/images/appstore.png
 create mode 100644 public/images/arrow-down.svg
 create mode 100644 public/images/close.svg
 create mode 100644 public/images/delivery.svg
 create mode 100644 public/images/facebook.svg
 create mode 100644 public/images/google-play.png
 create mode 100644 public/images/instagram.svg
 create mode 100644 public/images/logo-footer.svg
 create mode 100644 public/images/logo.svg
 create mode 100644 public/images/place.svg
 create mode 100644 public/images/search.svg
 create mode 100644 public/images/twitter.svg
 create mode 100644 public/images/world.svg
 delete mode 100644 src/App.css
 create mode 100644 src/components/Error.js
 create mode 100644 src/components/Footer.js
 create mode 100644 src/components/Header.js
 create mode 100644 src/components/Input.js
 create mode 100644 src/components/Loader.js
 create mode 100644 src/components/RestaurantCard.js
 create mode 100644 src/components/RestaurantsListPage.js
 create mode 100644 src/components/Select.js
 create mode 100644 src/store/errorReducer.js
 create mode 100644 src/store/loadDataFromServer.js
 create mode 100644 src/store/loadingReducer.js
 create mode 100644 src/store/restaurantsReducer.js
 create mode 100644 src/store/store.js
 create mode 100644 src/styles/Error.scss
 create mode 100644 src/styles/Footer.scss
 create mode 100644 src/styles/Header.scss
 create mode 100644 src/styles/Input.scss
 create mode 100644 src/styles/Loader.scss
 create mode 100644 src/styles/Page.scss
 create mode 100644 src/styles/RestaurantCard.scss
 create mode 100644 src/styles/RestaurantsList.scss
 create mode 100644 src/styles/Select.scss
 create mode 100644 src/styles/default.scss
 create mode 100644 src/styles/extends.scss
 create mode 100644 src/styles/variables.scss

diff --git a/.stylelintrc.js b/.stylelintrc.js
index f3a4e74..d5fdb09 100644
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -1,4 +1,4 @@
 module.exports = {
   extends: "@mate-academy/stylelint-config",
-  rules: {}
+  rules: {},
 };
diff --git a/README.md b/README.md
index 84c7a15..85b7b99 100644
--- a/README.md
+++ b/README.md
@@ -15,13 +15,13 @@ Base API url: https://mate-uber-eats-api.herokuapp.com/api/v1/
     - use `redux-thunk` to handle async actions
     - create separate component for restaurant card
     - use https://mate-uber-eats-api.herokuapp.com/api/v1/restaurants endpoint to fetch data
-    - accept optional query parameter `location`: `london|kyiv` 
-    - `RestaurantCard` should be clickable fully (not only the image) 
+    - accept optional query parameter `location`: `london|kyiv`
+    - `RestaurantCard` should be clickable fully (not only the image)
 2. Implement basic header markup
 3. Implement footer
 4. Add functionality and styles for mobile and tablet versions
     - `Location`, `Deliver now` and `Search` should be replaced whith buttons on the small screens.
-    Block with inputs should apper below the header after click on the button. 
+    Block with inputs should apper below the header after click on the button.
 5. Implement `RestaurantPage`
     - use `uuid` in the URL
     - fetch data from https://mate-uber-eats-api.herokuapp.com/api/v1/restaurants/:uuid
@@ -57,7 +57,7 @@ Base API url: https://mate-uber-eats-api.herokuapp.com/api/v1/
     - open basket sidebar when click on busket button, close on click outside or close icon
     - add item to basket when click submit in MenuItemModal
     - show list added items in basket
-    - add ability to change item count, remove item 
+    - add ability to change item count, remove item
     - when user click edit on item - open MenuItemModal with additional remove button. After submit, edit current item instead of add new one
     - clear basket when user click order button
 5. Restore user session after close-open tab
@@ -69,27 +69,27 @@ Base API url: https://mate-uber-eats-api.herokuapp.com/api/v1/
 
 ## Workflow
 - Fork the repository with task
-- Clone forked repository 
+- Clone forked repository
     ```bash
     git clone git@github.com:<user_name>/<task_repository>.git
     ```
 - Run `npm install` to install dependencies.
 - Then develop
 
-## Development mode 
+## Development mode
 - Run `npm start` to start development server on `http://localhost:3000`
-    When you run server the command line window will no longer be available for 
-    writing commands until you stop server (`ctrl + c`). All other commands you 
+    When you run server the command line window will no longer be available for
+    writing commands until you stop server (`ctrl + c`). All other commands you
     need to run in new command line window.
 - Follow [HTML, CSS styleguide](https://mate-academy.github.io/style-guides/htmlcss.html)
 - Follow [the simplified JS styleguide](https://mate-academy.github.io/style-guides/javascript-standard-modified)
 - run `npm run lint` to check code style
-- When you finished add correct `homepage` to `package.json` and run `npm run deploy` 
+- When you finished add correct `homepage` to `package.json` and run `npm run deploy`
 - Add links to your demo in readme.md.
-  - `[DEMO LINK](https://<your_account>.github.io/<repo_name>/)` - this will be a 
+  - [DEMO LINK](https://OlehTereshchuk.github.io/react_uber-eats/) - this will be a
   link to your index.html
 - Commit and push all recent changes.
-- Create `Pull Request` from forked repo `(<branch_name>)` to original repo 
+- Create `Pull Request` from forked repo `(<branch_name>)` to original repo
 (`master`).
 - Add a link at `PR` to Google Spreadsheets.
 
diff --git a/package.json b/package.json
index 7bd01de..2068948 100755
--- a/package.json
+++ b/package.json
@@ -7,16 +7,21 @@
   "author": "Mate Academy",
   "license": "GPL-3.0",
   "dependencies": {
+    "classnames": "^2.2.6",
+    "node-sass": "^4.13.0",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-redux": "^7.1.3",
     "react-router-dom": "^5.0.1",
-    "react-scripts": "3.0.1"
+    "react-scripts": "^3.3.0",
+    "redux": "^4.0.5",
+    "redux-thunk": "^2.3.0",
+    "reselect": "^4.0.0"
   },
   "devDependencies": {
     "@mate-academy/eslint-config-react": "*",
     "@mate-academy/stylelint-config": "*",
-    "eslint": "^5.16.0",
     "gh-pages": "^2.1.1",
     "husky": "^1.3.1",
     "lint-staged": "^8.1.5",
diff --git a/public/images/appstore.png b/public/images/appstore.png
new file mode 100644
index 0000000000000000000000000000000000000000..6c2ff057d7a82875e0cf1889073a0b8bb08f873d
GIT binary patch
diff --git a/public/images/arrow-down.svg b/public/images/arrow-down.svg
new file mode 100644
index 0000000..2576a2a
--- /dev/null
+++ b/public/images/arrow-down.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.4175 0L0 1.34583L7 8L14 1.34583L12.5825 0L7 5.30417L1.4175 0Z" fill="white"/>
+</svg>
diff --git a/public/images/close.svg b/public/images/close.svg
new file mode 100644
index 0000000..c784d0c
--- /dev/null
+++ b/public/images/close.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z" fill="black"/>
+</svg>
diff --git a/public/images/delivery.svg b/public/images/delivery.svg
new file mode 100644
index 0000000..ea10186
--- /dev/null
+++ b/public/images/delivery.svg
@@ -0,0 +1,4 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 0C8.82441 0 6.69767 0.645139 4.88873 1.85383C3.07979 3.06253 1.66989 4.78049 0.83733 6.79048C0.00476614 8.80047 -0.21307 11.0122 0.211367 13.146C0.635804 15.2798 1.68345 17.2398 3.22183 18.7782C4.76021 20.3165 6.72022 21.3642 8.85401 21.7886C10.9878 22.2131 13.1995 21.9952 15.2095 21.1627C17.2195 20.3301 18.9375 18.9202 20.1462 17.1113C21.3549 15.3023 22 13.1756 22 11C22 8.08262 20.8411 5.28472 18.7782 3.22182C16.7153 1.15892 13.9174 0 11 0V0ZM11 20.1667C9.18701 20.1667 7.41473 19.629 5.90728 18.6218C4.39983 17.6146 3.22491 16.1829 2.53111 14.5079C1.83731 12.8329 1.65577 10.9898 2.00947 9.21167C2.36317 7.43351 3.23621 5.80017 4.51819 4.51819C5.80017 3.23621 7.43352 2.36317 9.21167 2.00947C10.9898 1.65577 12.8329 1.8373 14.5079 2.5311C16.1829 3.22491 17.6146 4.39982 18.6218 5.90727C19.629 7.41472 20.1667 9.187 20.1667 11C20.164 13.4303 19.1974 15.7604 17.4789 17.4789C15.7604 19.1974 13.4303 20.164 11 20.1667Z" fill="black"/>
+<path d="M11.9173 3.66663H10.084V10.0833V11V11.9166H15.584V10.0833H11.9173V3.66663Z" fill="black"/>
+</svg>
diff --git a/public/images/facebook.svg b/public/images/facebook.svg
new file mode 100644
index 0000000..22565b3
--- /dev/null
+++ b/public/images/facebook.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.1164 0H0.883093C0.395706 0 0 0.394915 0 0.883093V15.1164C0 15.6046 0.395706 16 0.883093 16H8.54587V9.80386H6.46091V7.38879H8.54587V5.60785C8.54587 3.54159 9.80755 2.41586 11.6512 2.41586C12.5351 2.41586 13.293 2.48199 13.5141 2.5107V4.67049L12.2353 4.67101C11.2328 4.67101 11.0395 5.1476 11.0395 5.84654V7.388H13.4311L13.1184 9.80281H11.0392V15.9992H15.1161C15.604 15.9992 16 15.6032 16 15.1164V0.882566C15.9997 0.394915 15.6043 0 15.1164 0Z" fill="white"/>
+</svg>
diff --git a/public/images/google-play.png b/public/images/google-play.png
new file mode 100644
index 0000000000000000000000000000000000000000..b988c6fc6c7bda6b791001fa65940fd525d51c4d
GIT binary patch
diff --git a/public/images/instagram.svg b/public/images/instagram.svg
new file mode 100644
index 0000000..7c3e6a0
--- /dev/null
+++ b/public/images/instagram.svg
@@ -0,0 +1,5 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9175 0H4.74833C2.31372 0 0.333008 1.98081 0.333008 4.41542V11.5846C0.333008 14.0193 2.31372 16 4.74833 16H11.9175C14.3523 16 16.333 14.0192 16.333 11.5846V4.41542C16.3331 1.98081 14.3523 0 11.9175 0ZM14.9135 11.5846C14.9135 13.2365 13.5695 14.5804 11.9176 14.5804H4.74833C3.09649 14.5805 1.75261 13.2365 1.75261 11.5846V4.41542C1.75261 2.76358 3.09649 1.4196 4.74833 1.4196H11.9175C13.5694 1.4196 14.9134 2.76358 14.9134 4.41542V11.5846H14.9135Z" fill="white"/>
+<path d="M8.33276 3.87734C6.05941 3.87734 4.20996 5.72679 4.20996 8.00014C4.20996 10.2734 6.05941 12.1227 8.33276 12.1227C10.6061 12.1227 12.4556 10.2734 12.4556 8.00014C12.4556 5.72679 10.6061 3.87734 8.33276 3.87734ZM8.33276 10.7031C6.84227 10.7031 5.62956 9.49053 5.62956 8.00004C5.62956 6.50947 6.84218 5.29685 8.33276 5.29685C9.82333 5.29685 11.036 6.50947 11.036 8.00004C11.036 9.49053 9.82324 10.7031 8.33276 10.7031Z" fill="white"/>
+<path d="M12.6289 2.67383C12.3554 2.67383 12.0867 2.78456 11.8936 2.97857C11.6995 3.17163 11.5879 3.44041 11.5879 3.71487C11.5879 3.98847 11.6996 4.25715 11.8936 4.45116C12.0866 4.64423 12.3554 4.7559 12.6289 4.7559C12.9034 4.7559 13.1712 4.64423 13.3652 4.45116C13.5592 4.25715 13.67 3.98838 13.67 3.71487C13.67 3.44041 13.5592 3.17163 13.3652 2.97857C13.1722 2.78456 12.9034 2.67383 12.6289 2.67383Z" fill="white"/>
+</svg>
diff --git a/public/images/logo-footer.svg b/public/images/logo-footer.svg
new file mode 100644
index 0000000..c3894d1
--- /dev/null
+++ b/public/images/logo-footer.svg
@@ -0,0 +1,4 @@
+<svg width="145" height="24" viewBox="0 0 145 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M66.8341 9.17115C64.682 9.17115 63.1554 10.8551 63.1554 13.44V22.922H59.8702V6.23213H63.1161V8.27016C63.5164 7.59468 64.0902 7.03857 64.7778 6.65947C65.4655 6.28037 66.242 6.09207 67.0269 6.1141H68.2072V9.17115H66.8341ZM57.6 14.5771C57.6 9.6 54.059 5.87803 49.2669 5.87803C48.1346 5.88572 47.0151 6.11721 45.9726 6.55919C44.9301 7.00117 43.9854 7.64491 43.1926 8.45338C42.3999 9.26185 41.7748 10.2191 41.3534 11.27C40.932 12.321 40.7225 13.4449 40.737 14.5771C40.737 19.5502 44.5731 23.3115 49.5777 23.3115C50.9757 23.3379 52.3595 23.0278 53.6125 22.4075C54.8656 21.7871 55.9511 20.8746 56.7777 19.7469L54.3934 18C53.8464 18.7634 53.1227 19.383 52.284 19.8058C51.4453 20.2285 50.5168 20.4419 49.5777 20.4275C48.2402 20.4212 46.9493 19.936 45.9388 19.0597C44.9283 18.1835 44.2651 16.9743 44.0695 15.6511H57.6079L57.6 14.5771ZM44.1403 13.0466C44.7266 10.501 46.7607 8.7777 49.2275 8.7777C51.6944 8.7777 53.7246 10.501 54.2754 13.0466H44.1403ZM30.3305 5.87803C29.2326 5.87896 28.1458 6.09744 27.1328 6.52086C26.1198 6.94428 25.2008 7.56424 24.4289 8.34492V0H21.1436V22.922H24.3895V20.8052C25.962 22.396 28.1016 23.2974 30.3384 23.3115C31.4986 23.3361 32.6522 23.1289 33.7313 22.7019C34.8104 22.2749 35.7935 21.6368 36.6228 20.8249C37.4521 20.0131 38.1109 19.0438 38.5607 17.974C39.0106 16.9042 39.2423 15.7553 39.2423 14.5948C39.2423 13.4342 39.0106 12.2854 38.5607 11.2155C38.1109 10.1457 37.4521 9.17644 36.6228 8.36458C35.7935 7.55271 34.8104 6.91458 33.7313 6.4876C32.6522 6.06062 31.4986 5.85338 30.3384 5.87803H30.3305ZM30.0944 20.3764C28.9493 20.3818 27.8284 20.047 26.8739 19.4144C25.9194 18.7818 25.1743 17.8798 24.7332 16.8231C24.2921 15.7663 24.1749 14.6024 24.3964 13.4789C24.6179 12.3554 25.1681 11.323 25.9773 10.5127C26.7864 9.70246 27.8181 9.15082 28.9413 8.92779C30.0644 8.70477 31.2286 8.82042 32.2859 9.26007C33.3433 9.69972 34.2462 10.4435 34.8801 11.3972C35.5141 12.3508 35.8504 13.4713 35.8466 14.6164C35.8476 15.3717 35.6995 16.1198 35.4107 16.8177C35.1219 17.5156 34.6981 18.1496 34.1636 18.6833C33.6292 19.217 32.9946 19.6399 32.2963 19.9278C31.598 20.2156 30.8497 20.3627 30.0944 20.3607V20.3764ZM9.04525 20.219C12.2164 20.219 14.6793 17.7875 14.6793 14.1443V0H18.0826V22.922H14.7187V20.7541C13.9328 21.5664 12.9902 22.2107 11.9481 22.6483C10.906 23.0858 9.78596 23.3074 8.65574 23.2997C3.76525 23.2997 0 19.7351 0 14.3292V0H3.46623V14.1639C3.46623 17.8269 5.82689 20.219 9.04525 20.219Z" fill="white"/>
+<path d="M76.3789 0H92.4589V3.93443H80.7225V9.52131H92.1323V13.322H80.7225V19.0033H92.4589V22.9377H76.3789V0ZM136.867 23.3508C141.797 23.3508 144.574 20.9902 144.574 17.7482C144.574 15.4387 142.93 13.7154 139.487 12.9679L135.848 12.2243C133.735 11.8308 133.07 11.4374 133.07 10.6505C133.07 9.63148 134.089 9.0059 135.966 9.0059C138 9.0059 139.507 9.55279 139.9 11.4334H144.165C143.933 7.89246 141.387 5.55541 136.225 5.55541C131.764 5.55541 128.632 7.39672 128.632 10.9652C128.632 13.4321 130.355 15.0374 134.073 15.8203L138.142 16.7607C139.747 17.0754 140.176 17.5082 140.176 18.1731C140.176 19.2315 138.964 19.8964 137.004 19.8964C134.542 19.8964 133.133 19.3495 132.586 17.4689H128.298C128.923 21.002 131.543 23.3508 136.867 23.3508ZM127.058 22.922H122.443C119.547 22.922 117.942 21.12 117.942 18.8459V9.83607H114.696V5.99606H117.958V1.17639H122.246V5.99606H127.058V9.83607H122.246V17.7482C122.246 18.6492 122.872 19.082 123.852 19.082H127.058V22.922ZM108.566 6.00394V7.53049C107.057 6.25411 105.142 5.55677 103.164 5.56328C101.981 5.53838 100.804 5.75002 99.7032 6.18579C98.6024 6.62156 97.5996 7.27269 96.7537 8.10102C95.9077 8.92935 95.2357 9.91821 94.7768 11.0096C94.318 12.1011 94.0817 13.2731 94.0817 14.4571C94.0817 15.641 94.318 16.813 94.7768 17.9045C95.2357 18.9959 95.9077 19.9848 96.7537 20.8131C97.5996 21.6414 98.6024 22.2925 99.7032 22.7283C100.804 23.1641 101.981 23.3757 103.164 23.3508C105.142 23.3594 107.058 22.6618 108.566 21.3836V22.9141H112.843V5.99606L108.566 6.00394ZM103.519 19.6367C102.493 19.6484 101.487 19.3549 100.628 18.7933C99.7692 18.2318 99.0969 17.4277 98.6964 16.4832C98.2958 15.5387 98.1852 14.4964 98.3784 13.4888C98.5716 12.4812 99.0601 11.5539 99.7816 10.8245C100.503 10.0952 101.425 9.59686 102.431 9.39285C103.436 9.18883 104.48 9.28834 105.428 9.67875C106.377 10.0691 107.188 10.7328 107.759 11.5854C108.33 12.438 108.634 13.4409 108.633 14.4669C108.64 15.1432 108.512 15.814 108.257 16.4405C108.002 17.0671 107.626 17.6369 107.149 18.1169C106.673 18.597 106.106 18.9778 105.481 19.2373C104.857 19.4968 104.187 19.6299 103.511 19.6289L103.519 19.6367Z" fill="#5FB709"/>
+</svg>
diff --git a/public/images/logo.svg b/public/images/logo.svg
new file mode 100644
index 0000000..3124de7
--- /dev/null
+++ b/public/images/logo.svg
@@ -0,0 +1,4 @@
+<svg width="146" height="24" viewBox="0 0 146 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M67.713 9.66297C65.5609 9.66297 64.0343 11.3469 64.0343 13.9318V23.4138H60.7491V6.72395H63.995V8.76198C64.3953 8.0865 64.9691 7.53039 65.6567 7.15129C66.3444 6.77219 67.1209 6.5839 67.9058 6.60592H69.0861V9.66297H67.713ZM58.4789 15.0689C58.4789 10.0918 54.9379 6.36985 50.1458 6.36985C49.0135 6.37754 47.894 6.60903 46.8515 7.05101C45.809 7.49299 44.8643 8.13673 44.0715 8.9452C43.2788 9.75367 42.6537 10.7109 42.2323 11.7618C41.8109 12.8128 41.6014 13.9367 41.616 15.0689C41.616 20.042 45.452 23.8033 50.4566 23.8033C51.8546 23.8297 53.2384 23.5197 54.4914 22.8993C55.7445 22.2789 56.83 21.3664 57.6566 20.2387L55.2724 18.4918C54.7253 19.2553 54.0016 19.8749 53.1629 20.2976C52.3243 20.7204 51.3957 20.9337 50.4566 20.9194C49.1191 20.9131 47.8282 20.4278 46.8177 19.5516C45.8072 18.6753 45.144 17.4661 44.9484 16.143H58.4868L58.4789 15.0689ZM45.0192 13.5384C45.6055 10.9928 47.6396 9.26953 50.1064 9.26953C52.5733 9.26953 54.6035 10.9928 55.1543 13.5384H45.0192ZM31.2094 6.36985C30.1115 6.37078 29.0247 6.58926 28.0117 7.01268C26.9987 7.4361 26.0797 8.05606 25.3078 8.83674V0.491821H22.0225V23.4138H25.2684V21.2971C26.8409 22.8878 28.9805 23.7892 31.2173 23.8033C32.3775 23.8279 33.5311 23.6207 34.6102 23.1937C35.6894 22.7667 36.6724 22.1286 37.5017 21.3168C38.331 20.5049 38.9898 19.5356 39.4397 18.4658C39.8895 17.396 40.1212 16.2471 40.1212 15.0866C40.1212 13.926 39.8895 12.7772 39.4397 11.7073C38.9898 10.6375 38.331 9.66826 37.5017 8.8564C36.6724 8.04453 35.6894 7.4064 34.6102 6.97942C33.5311 6.55244 32.3775 6.3452 31.2173 6.36985H31.2094ZM30.9733 20.8682C29.8282 20.8737 28.7073 20.5388 27.7528 19.9062C26.7983 19.2736 26.0532 18.3717 25.6121 17.3149C25.171 16.2582 25.0538 15.0942 25.2753 13.9707C25.4968 12.8472 26.047 11.8148 26.8562 11.0046C27.6654 10.1943 28.697 9.64264 29.8202 9.41961C30.9434 9.19659 32.1075 9.31224 33.1648 9.75189C34.2222 10.1915 35.1251 10.9354 35.7591 11.889C36.393 12.8426 36.7294 13.9631 36.7255 15.1082C36.7265 15.8635 36.5784 16.6116 36.2896 17.3095C36.0008 18.0074 35.577 18.6414 35.0425 19.1751C34.5081 19.7088 33.8735 20.1318 33.1752 20.4196C32.4769 20.7074 31.7286 20.8545 30.9733 20.8525V20.8682ZM9.92415 20.7108C13.0953 20.7108 15.5583 18.2794 15.5583 14.6361V0.491821H18.9615V23.4138H15.5976V21.2459C14.8117 22.0582 13.8691 22.7026 12.827 23.1401C11.7849 23.5777 10.6649 23.7992 9.53465 23.7915C4.64415 23.7915 0.878906 20.2269 0.878906 14.821V0.491821H4.34514V14.6558C4.34514 18.3187 6.70579 20.7108 9.92415 20.7108Z" fill="#262626"/>
+<path d="M77.2578 0.491821H93.3378V4.42625H81.6014V10.0131H93.0112V13.8138H81.6014V19.4951H93.3378V23.4295H77.2578V0.491821ZM137.746 23.8426C142.676 23.8426 145.453 21.482 145.453 18.24C145.453 15.9305 143.809 14.2072 140.366 13.4597L136.727 12.7161C134.614 12.3226 133.949 11.9292 133.949 11.1423C133.949 10.1233 134.968 9.49772 136.845 9.49772C138.879 9.49772 140.386 10.0446 140.779 11.9253H145.044C144.812 8.38428 142.266 6.04723 137.104 6.04723C132.643 6.04723 129.511 7.88854 129.511 11.4571C129.511 13.924 131.234 15.5292 134.952 16.3121L139.02 17.2525C140.626 17.5672 141.055 18 141.055 18.6649C141.055 19.7233 139.843 20.3882 137.883 20.3882C135.42 20.3882 134.012 19.8413 133.465 17.9607H129.176C129.802 21.4938 132.422 23.8426 137.746 23.8426ZM127.937 23.4138H123.322C120.426 23.4138 118.821 21.6118 118.821 19.3377V10.3279H115.575V6.48789H118.837V1.66822H123.125V6.48789H127.937V10.3279H123.125V18.24C123.125 19.141 123.751 19.5738 124.731 19.5738H127.937V23.4138ZM109.445 6.49576V8.02231C107.935 6.74593 106.021 6.04859 104.043 6.0551C102.86 6.0302 101.683 6.24184 100.582 6.67761C99.4813 7.11338 98.4785 7.76451 97.6326 8.59284C96.7866 9.42117 96.1146 10.41 95.6557 11.5015C95.1969 12.5929 94.9606 13.7649 94.9606 14.9489C94.9606 16.1328 95.1969 17.3049 95.6557 18.3963C96.1146 19.4877 96.7866 20.4766 97.6326 21.3049C98.4785 22.1332 99.4813 22.7844 100.582 23.2201C101.683 23.6559 102.86 23.8675 104.043 23.8426C106.021 23.8512 107.936 23.1536 109.445 21.8754V23.4059H113.722V6.48789L109.445 6.49576ZM104.397 20.1285C103.372 20.1402 102.365 19.8467 101.507 19.2852C100.648 18.7237 99.9758 17.9195 99.5753 16.975C99.1747 16.0305 99.0641 14.9882 99.2573 13.9806C99.4505 12.9731 99.939 12.0457 100.661 11.3163C101.382 10.587 102.304 10.0887 103.31 9.88467C104.315 9.68065 105.358 9.78017 106.307 10.1706C107.256 10.561 108.067 11.2246 108.638 12.0772C109.209 12.9298 109.513 13.9328 109.512 14.9587C109.518 15.635 109.391 16.3058 109.136 16.9324C108.881 17.5589 108.505 18.1287 108.028 18.6087C107.552 19.0888 106.985 19.4696 106.36 19.7291C105.736 19.9887 105.066 20.1217 104.39 20.1207L104.397 20.1285Z" fill="#5FB709"/>
+</svg>
diff --git a/public/images/place.svg b/public/images/place.svg
new file mode 100644
index 0000000..ea09167
--- /dev/null
+++ b/public/images/place.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.99184 24C9.99184 24 0 15.5265 0 9.99184C0 4.48163 4.45714 0 9.99184 0C15.5265 0 19.9837 4.48163 19.9837 9.99184C19.9837 15.5265 9.99184 24 9.99184 24ZM9.99184 2.00816C5.58367 2.00816 1.98367 5.58367 1.98367 10.0163C1.98367 14.4245 9.99184 21.0122 9.99184 21.0122C9.99184 21.0122 18 14.4245 18 10.0163C18 5.58367 14.4 2.00816 9.99184 2.00816ZM9.99184 14.0082C7.78776 14.0082 6 12.2204 6 10.0163C6 7.81225 7.78776 6 9.99184 6C12.1959 6 13.9837 7.78776 13.9837 9.99184C13.9837 12.1959 12.1959 14.0082 9.99184 14.0082ZM9.99184 8.00816C8.8898 8.00816 7.98367 8.91429 7.98367 10.0163C7.98367 11.1184 8.8898 12 9.99184 12C11.0939 12 12 11.0939 12 9.99184C12 8.8898 11.0939 8.00816 9.99184 8.00816Z" fill="black"/>
+</svg>
diff --git a/public/images/search.svg b/public/images/search.svg
new file mode 100644
index 0000000..7e37c73
--- /dev/null
+++ b/public/images/search.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.9217 11.0417L15 15M12.8788 6.76471C12.8788 9.94847 10.2196 12.5294 6.93939 12.5294C3.65916 12.5294 1 9.94847 1 6.76471C1 3.58095 3.65916 1 6.93939 1C10.2196 1 12.8788 3.58095 12.8788 6.76471Z" stroke="black" stroke-width="2"/>
+</svg>
diff --git a/public/images/twitter.svg b/public/images/twitter.svg
new file mode 100644
index 0000000..9c8b7bd
--- /dev/null
+++ b/public/images/twitter.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.3333 1.89305C18.6218 2.21429 17.8582 2.43216 17.056 2.52942C17.8751 2.02968 18.5022 1.23702 18.7993 0.295398C18.031 0.758193 17.1829 1.09424 16.2792 1.27641C15.5556 0.489895 14.5262 0 13.3846 0C11.1943 0 9.41835 1.80937 9.41835 4.03969C9.41835 4.35601 9.45338 4.66496 9.52105 4.96039C6.22534 4.79174 3.30294 3.18301 1.34702 0.738495C1.00511 1.33425 0.810611 2.02842 0.810611 2.76943C0.810611 4.1714 1.51132 5.40841 2.57446 6.13213C1.92449 6.10999 1.31318 5.92782 0.77801 5.62502V5.67549C0.77801 7.63256 2.14559 9.2659 3.95895 9.63764C3.62671 9.72873 3.27637 9.7792 2.91394 9.7792C2.65783 9.7792 2.41016 9.75335 2.16733 9.70411C2.6723 11.3104 4.13655 12.4785 5.8714 12.5105C4.51469 13.5937 2.804 14.2374 0.945945 14.2374C0.625807 14.2374 0.310471 14.2177 0 14.182C1.75539 15.3304 3.83938 16 6.07921 16C13.375 16 17.3629 9.84321 17.3629 4.50374L17.3496 3.98063C18.1289 3.41439 18.803 2.70297 19.3333 1.89305Z" fill="white"/>
+</svg>
diff --git a/public/images/world.svg b/public/images/world.svg
new file mode 100644
index 0000000..b8806c7
--- /dev/null
+++ b/public/images/world.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5251 0.99999L10.5251 0.999987C10.4415 0.989444 10.3578 0.978882 10.2729 0.978882C10.2552 0.978882 10.2378 0.981238 10.2205 0.983588C10.2054 0.985622 10.1904 0.987652 10.1754 0.988148C10.1481 0.987651 10.1211 0.985616 10.094 0.98358C10.0628 0.981232 10.0316 0.978882 10 0.978882C4.48607 0.978882 0 5.45581 0 10.9577C0 16.4603 4.48607 20.9365 10 20.9365C10.0317 20.9365 10.0631 20.9342 10.0944 20.932L10.0945 20.932C10.1213 20.93 10.1481 20.9281 10.175 20.9276C10.1902 20.9281 10.2053 20.93 10.2204 20.932C10.2378 20.9343 10.2552 20.9365 10.2729 20.9365C10.3623 20.9365 10.4503 20.9253 10.5382 20.914C10.561 20.9111 10.5837 20.9082 10.6064 20.9055C15.8379 20.5905 20 16.2561 20 10.9577C20 5.6593 15.8379 1.32529 10.6064 1.00989C10.5793 1.00683 10.5522 1.00341 10.5251 0.99999ZM7.00617 2.75938C5.99331 3.92619 5.17045 5.60156 4.71867 7.58022C3.31367 7.42804 2.46581 7.25092 2.12402 7.16895C3.11692 5.12304 4.86741 3.542 7.00617 2.75938ZM1.65096 8.33105C1.38846 9.16001 1.24561 10.0424 1.24561 10.9576C1.24708 12.0328 1.44885 13.0983 1.84061 14.0999C2.24096 14.0033 3.13311 13.8183 4.58132 13.6615C4.42775 12.803 4.33739 11.8995 4.33739 10.9576C4.33817 10.2381 4.38913 9.5196 4.48989 8.80718C2.80168 8.62008 1.88953 8.3952 1.65096 8.33105ZM2.38499 15.2518C2.83785 15.1556 3.64928 15.0099 4.84856 14.8848C5.32035 16.6268 6.08785 18.099 7.00713 19.1568C5.05128 18.4427 3.41303 17.0588 2.38428 15.2518H2.38499ZM5.98828 14.7785C6.63507 17.2782 8.21292 19.1325 9.28435 19.5801V14.6477C8.21292 14.6605 6.91828 14.7097 5.98828 14.7785ZM9.2846 13.4052C8.21318 13.4187 6.75496 13.4736 5.76068 13.5506C5.62389 12.7273 5.58496 11.8563 5.58496 10.9579C5.58496 10.2594 5.59853 9.57939 5.68318 8.92257C6.69282 9.0024 8.21318 9.05978 9.2846 9.07403V13.4048V13.4052ZM5.854 7.69091C6.81186 7.76397 8.21257 7.81814 9.284 7.83133V7.83097V2.33621C8.21257 2.81662 6.45222 4.91288 5.854 7.69091ZM17.8435 7.10074C17.6482 7.16061 16.8567 7.38086 15.2914 7.56582C14.9382 5.69123 14.3007 4.09391 13.4692 2.94064C15.3753 3.76496 16.9253 5.24895 17.8435 7.10038V7.10074ZM14.1368 7.68891C13.55 4.87631 11.7843 2.76115 10.7129 2.31745V7.83146C11.7843 7.81827 13.1943 7.76375 14.1368 7.68891ZM10.7129 9.07406C11.7843 9.06016 13.2861 9.00135 14.2832 8.91867C14.3654 9.57656 14.3861 10.2576 14.3861 10.9579C14.3861 11.8574 14.354 12.7299 14.2211 13.5542C13.2393 13.4751 11.7843 13.418 10.7129 13.4052V9.07406ZM10.7129 14.6477V19.5986V19.599C11.7843 19.1849 13.3707 17.3146 14.0065 14.7814C13.0886 14.7108 11.7843 14.6605 10.7129 14.6477ZM13.4692 18.9757C14.2185 17.9365 14.8153 16.5416 15.1835 14.9033C16.415 15.0448 17.1907 15.2094 17.5817 15.3078C16.6401 16.9385 15.1984 18.2242 13.4692 18.9757ZM15.4803 8.79411C15.6682 10.4179 15.643 12.0593 15.4053 13.6766L15.4056 13.6762C16.9256 13.8544 17.7903 14.069 18.1342 14.1691C18.5306 13.1741 18.7556 12.0925 18.7556 10.9581C18.7551 9.83681 18.5368 8.72626 18.1128 7.68789L18.3138 8.25454C18.2574 8.2745 17.4053 8.56353 15.4803 8.79411Z" fill="white"/>
+</svg>
diff --git a/public/index.html b/public/index.html
index 4269d67..ef75689 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,6 +3,8 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" />
     <title>React Uber eats</title>
   </head>
   <body>
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index 8b13789..0000000
--- a/src/App.css
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/App.js b/src/App.js
index d494a99..89be8ac 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,10 +1,19 @@
 import React from 'react';
-import './App.css';
+import Header from './components/Header';
+import Footer from './components/Footer';
+import RestaurantsListPage from './components/RestaurantsListPage';
+import './styles/Page.scss';
 
 const App = () => (
-  <div className="App">
-    <h1>React Uber eats</h1>
-  </div>
+  <>
+    <Header />
+    <main className="page">
+      <div className="content">
+        <RestaurantsListPage />
+      </div>
+    </main>
+    <Footer />
+  </>
 );
 
 export default App;
diff --git a/src/components/Error.js b/src/components/Error.js
new file mode 100644
index 0000000..daa5ba4
--- /dev/null
+++ b/src/components/Error.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import '../styles/Error.scss';
+
+const Error = ({ message }) => (
+  <div className="error">
+    <p className="error__text">{message}</p>
+    <a href="/" className="error__link">Go to home</a>
+  </div>
+);
+
+Error.propTypes = {
+  message: PropTypes.string,
+};
+
+Error.defaultProps = {
+  message: 'Sorry, something went wrong',
+};
+
+export default Error;
diff --git a/src/components/Footer.js b/src/components/Footer.js
new file mode 100644
index 0000000..7c180a5
--- /dev/null
+++ b/src/components/Footer.js
@@ -0,0 +1,80 @@
+import React from 'react';
+import Select from './Select';
+import '../styles/Footer.scss';
+
+const Footer = () => (
+  <footer className="footer">
+    <div className="content">
+      <section className="footer__top-part">
+        <div className="footer__main">
+          <div className="footer__logo-container">
+            <img
+              src="./images/logo-footer.svg"
+              alt="Uber Eats"
+              className="footer__logo"
+            />
+            <Select
+              name="language"
+              options={[
+                {
+                  value: 'en', label: 'English',
+                },
+                {
+                  value: 'ua', label: 'Ukrainian',
+                },
+              ]}
+              value="en"
+              iconUrl="./images/world.svg"
+            />
+          </div>
+          <div className="footer__mobile-apps">
+            <a className="footer__mobile-app" href="/appstore">
+              <img src="./images/appstore.png" alt="App Store" />
+            </a>
+            <a className="footer__mobile-app" href="/googleplay">
+              <img src="./images/google-play.png" alt="Google Play" />
+            </a>
+          </div>
+        </div>
+        <div className="footer__top-links links">
+          <a href="/about" className="links__link links__link--bold">
+            About UberEats
+          </a>
+          <a href="/readblog" className="links__link">Read our blog</a>
+          <a href="/sign-up" className="links__link">Sign up to deliver</a>
+          <a href="/addrest" className="links__link">Add your restaurant</a>
+        </div>
+        <div className="footer__top-links links">
+          <a href="/gethelp" className="links__link links__link--bold">
+            Get help
+          </a>
+          <a href="/faqs" className="links__link">Read FAQs</a>
+          <a href="/cities" className="links__link">View all cities</a>
+        </div>
+      </section>
+      <section className="footer__bottom-part">
+        <p className="footer__copyright">© 2019 Uber Technologies Inc.</p>
+        <div className="footer__misc">
+          <div className="footer__bottom-links links">
+            <a href="/privacy" className="links__link">Privacy policy</a>
+            <a href="/terms" className="links__link">Terms of  use</a>
+            <a href="/pricing" className="links__link">Pricing</a>
+          </div>
+          <div className="footer__socials social">
+            <a href="www.facebook.com" className="social__link">
+              <img src="./images/facebook.svg" alt="Facebook" />
+            </a>
+            <a href="www.twitter.com" className="social__link">
+              <img src="./images/twitter.svg" alt="Twitter" />
+            </a>
+            <a href="www.instagram.com" className="social__link">
+              <img src="./images/instagram.svg" alt="Instagram" />
+            </a>
+          </div>
+        </div>
+      </section>
+    </div>
+  </footer>
+);
+
+export default Footer;
diff --git a/src/components/Header.js b/src/components/Header.js
new file mode 100644
index 0000000..c51e24f
--- /dev/null
+++ b/src/components/Header.js
@@ -0,0 +1,149 @@
+import React, { useState } from 'react';
+import Input from './Input';
+import '../styles/Header.scss';
+
+const Header = () => {
+  const [inputValues, setInputValues] = useState({
+    address: '',
+    time: '',
+    search: '',
+  });
+  const [isMobileSearchVisible, setMobileSearchVisible] = useState(false);
+  const [isMobileDeliveryVisible, setMobileDeliveryVisible] = useState(false);
+
+  const toggleSearch = () => {
+    setMobileSearchVisible(!isMobileSearchVisible);
+    setMobileDeliveryVisible(false);
+  };
+
+  const toggleDelivery = () => {
+    setMobileDeliveryVisible(!isMobileDeliveryVisible);
+    setMobileSearchVisible(false);
+  };
+
+  const handleChange = ({ target }) => {
+    setInputValues({
+      ...inputValues,
+      [target.name]: target.value,
+    });
+  };
+
+  const closeMobile = () => {
+    setMobileDeliveryVisible(false);
+    setMobileSearchVisible(false);
+  };
+
+  return (
+    <header className="header">
+      <div className="content">
+        <div className="header__inner">
+          <img
+            src="./images/logo.svg"
+            alt="Uber Eats"
+            className="header__logo"
+          />
+
+          <div className="header__delivery-info">
+            <Input
+              name="address"
+              value={inputValues.address}
+              onChange={handleChange}
+              placeholder="Address"
+              iconUrl="./images/place.svg"
+            />
+            <Input
+              name="time"
+              value={inputValues.time}
+              onChange={handleChange}
+              placeholder="Time"
+              type="time"
+            />
+          </div>
+
+          <div className="header__search">
+            <Input
+              name="search"
+              value={inputValues.search}
+              onChange={handleChange}
+              placeholder="Search"
+              iconUrl="./images/search.svg"
+            />
+          </div>
+
+          <div className="header__toggle-buttons">
+            <button
+              type="button"
+              className="header__toggle-btn"
+              onClick={toggleDelivery}
+            >
+              <img
+                src="./images/place.svg"
+                alt="place icon"
+                className="header__toggle-btn--place"
+              />
+            </button>
+
+            <button
+              type="button"
+              className="header__toggle-btn"
+              onClick={toggleSearch}
+            >
+              <img src="./images/search.svg" alt="search icon" />
+            </button>
+          </div>
+
+          <a className="header__link" href="/sign-in">Sign in</a>
+        </div>
+
+        {(isMobileDeliveryVisible || isMobileSearchVisible) && (
+          <div className="header__mobile-controls mobile-controls">
+            {isMobileSearchVisible && (
+              <Input
+                label="Find"
+                name="search"
+                value={inputValues.search}
+                onChange={handleChange}
+                placeholder="Search"
+                iconUrl="./images/search.svg"
+                isSmall={false}
+              />
+            )}
+
+            {isMobileDeliveryVisible && (
+              <>
+                <Input
+                  label="Where"
+                  name="address"
+                  value={inputValues.address}
+                  onChange={handleChange}
+                  placeholder="Address"
+                  iconUrl="./images/place.svg"
+                  isSmall={false}
+                />
+                <Input
+                  label="To"
+                  name="time"
+                  value={inputValues.time}
+                  onChange={handleChange}
+                  placeholder="Time"
+                  type="time"
+                  isSmall={false}
+                />
+              </>
+            )}
+
+            <button
+              type="button"
+              className="mobile-controls__close"
+              onClick={closeMobile}
+            >
+              <img src="./images/close.svg" alt="close icon" />
+            </button>
+          </div>
+        )}
+      </div>
+    </header>
+  );
+};
+
+export default Header;
diff --git a/src/components/Input.js b/src/components/Input.js
new file mode 100644
index 0000000..fc69950
--- /dev/null
+++ b/src/components/Input.js
@@ -0,0 +1,80 @@
+import React, { useState, createRef } from 'react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import '../styles/Input.scss';
+
+const Input = ({
+  iconUrl, value, onChange, placeholder, name, className, type, isSmall, label,
+}) => {
+  const [isFocused, setFocused] = useState(false);
+
+  const handleFocus = () => setFocused(true);
+  const handleBlur = () => setFocused(false);
+  const inputRef = createRef();
+
+  const inputWrapperClass = cx('control__input-wrapper', {
+    'control__input-wrapper--focused': isFocused,
+    [className]: className,
+  });
+
+  const inputClass = cx({
+    'control__input--small': isSmall,
+    'control__input--time': type === 'time',
+  });
+
+  return (
+    // eslint-disable-next-line
+    <label
+      className="control"
+    >
+      {label && (
+        <p className="control__label">
+          {label}
+        </p>
+      )}
+      <div className={inputWrapperClass}>
+        {iconUrl && (
+          <img
+            src={iconUrl}
+            alt={placeholder}
+            className="control__icon"
+          />
+        )}
+        <input
+          ref={inputRef}
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+          name={name}
+          className={inputClass}
+          type={type}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+        />
+      </div>
+    </label>
+  );
+};
+
+Input.propTypes = {
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  iconUrl: PropTypes.string,
+  placeholder: PropTypes.string,
+  isSmall: PropTypes.bool,
+  label: PropTypes.string,
+  type: PropTypes.string,
+};
+
+Input.defaultProps = {
+  type: '',
+  label: '',
+  className: '',
+  iconUrl: '',
+  placeholder: '',
+  isSmall: true,
+};
+
+export default Input;
diff --git a/src/components/Loader.js b/src/components/Loader.js
new file mode 100644
index 0000000..3d17287
--- /dev/null
+++ b/src/components/Loader.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import '../styles/Loader.scss';
+
+const Loader = () => (
+  <div className="loader-container">
+    <div className="lds-default">
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+    </div>
+  </div>
+
+);
+
+export default Loader;
diff --git a/src/components/RestaurantCard.js b/src/components/RestaurantCard.js
new file mode 100644
index 0000000..93356aa
--- /dev/null
+++ b/src/components/RestaurantCard.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import '../styles/RestaurantCard.scss';
+
+const RestaurantCard = ({ imageUrl, title, categories, etaRange, uuid }) => (
+  <div className="restaurant-card">
+    <img src={imageUrl} alt={title} className="restaurant-card__img" />
+    <h2 className="restaurant-card__title">{title}</h2>
+    <div className="restaurant-card__categories">
+      {categories.join(' • ')}
+    </div>
+    <div className="restaurant-card__eta">{etaRange}</div>
+  </div>
+);
+
+RestaurantCard.propTypes = {
+  imageUrl: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  categories: PropTypes.arrayOf(PropTypes.string),
+  etaRange: PropTypes.string,
+  uuid: PropTypes.string.isRequired,
+};
+
+RestaurantCard.defaultProps = {
+  categories: [],
+  etaRange: '',
+};
+
+export default RestaurantCard;
diff --git a/src/components/RestaurantsListPage.js b/src/components/RestaurantsListPage.js
new file mode 100644
index 0000000..c643ce4
--- /dev/null
+++ b/src/components/RestaurantsListPage.js
@@ -0,0 +1,72 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import RestaurantCard from './RestaurantCard';
+import {
+  loadData, getRestaurants, getIsLoading, getError,
+} from '../store/store';
+import '../styles/RestaurantsList.scss';
+import Loader from './Loader';
+import Error from './Error';
+
+const DEFAULT_ETA_RANGE = '20 - 30 min';
+
+const RestaurantsListPage = ({
+  restaurants, loadDataFromServer, isLoading, error,
+}) => {
+  useEffect(() => {
+    loadDataFromServer();
+  }, [loadDataFromServer]);
+
+  if (isLoading) {
+    return <Loader />;
+  }
+
+  if (error) {
+    return <Error message={error} />;
+  }
+
+  return (
+    <div className="restaurants-list">
+      {restaurants.map((
+        { heroImageUrl, title, categories, etaRange, uuid },
+      ) => (
+        <RestaurantCard
+          key={uuid}
+          title={title}
+          categories={categories}
+          etaRange={etaRange.errorMessage
+            ? etaRange.errorMessage
+            : DEFAULT_ETA_RANGE}
+          uuid={uuid}
+          imageUrl={heroImageUrl}
+        />
+      ))}
+    </div>
+  );
+};
+
+const mapStateToProps = state => ({
+  restaurants: getRestaurants(state),
+  isLoading: getIsLoading(state),
+  error: getError(state),
+});
+
+const mapMethodsToProps = {
+  loadDataFromServer: loadData,
+};
+
+RestaurantsListPage.propTypes = {
+  restaurants: PropTypes.arrayOf(PropTypes.object),
+  loadDataFromServer: PropTypes.func.isRequired,
+  error: PropTypes.string,
+  isLoading: PropTypes.bool,
+};
+
+RestaurantsListPage.defaultProps = {
+  restaurants: [],
+  error: null,
+  isLoading: false,
+};
+
+export default connect(mapStateToProps, mapMethodsToProps)(RestaurantsListPage);
diff --git a/src/components/Select.js b/src/components/Select.js
new file mode 100644
index 0000000..f0106e0
--- /dev/null
+++ b/src/components/Select.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import '../styles/Select.scss';
+
+const Select = ({ name, value, onSelect, options, iconUrl }) => (
+  <div className="select">
+    <select
+      value={value}
+      name={name}
+      onChange={onSelect}
+      className="select__input"
+    >
+      {options.map(({ value: optionValue, label }) => (
+        <option
+          key={label}
+          value={optionValue}
+        >
+          {label}
+        </option>
+      ))}
+    </select>
+    {iconUrl && (
+      <img className="select__icon" src={iconUrl} alt="select icon" />
+    )}
+
+    <img
+      src="./images/arrow-down.svg"
+      alt="arrow down"
+      className="select__arrow"
+    />
+  </div>
+);
+
+Select.propTypes = {
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  onSelect: PropTypes.func,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.string,
+    label: PropTypes.string,
+  })),
+  iconUrl: PropTypes.string,
+};
+
+Select.defaultProps = {
+  onSelect: () => {},
+  options: [],
+  iconUrl: '',
+};
+
+export default Select;
diff --git a/src/index.js b/src/index.js
index b597a44..f1c1672 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,13 @@
 import React from 'react';
+import { Provider } from 'react-redux';
 import ReactDOM from 'react-dom';
+import store from './store/store';
 import App from './App';
+import './styles/default.scss';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById('root'),
+);
diff --git a/src/store/errorReducer.js b/src/store/errorReducer.js
new file mode 100644
index 0000000..ca021c5
--- /dev/null
+++ b/src/store/errorReducer.js
@@ -0,0 +1,17 @@
+const LOAD_ERROR = 'LOAD_ERROR';
+
+export const setLoadError = error => ({
+  type: LOAD_ERROR,
+  error,
+});
+
+const errorReducer = (error = null, action) => {
+  switch (action.type) {
+    case LOAD_ERROR:
+      return action.error;
+    default:
+      return error;
+  }
+};
+
+export default errorReducer;
diff --git a/src/store/loadDataFromServer.js b/src/store/loadDataFromServer.js
new file mode 100644
index 0000000..971b93a
--- /dev/null
+++ b/src/store/loadDataFromServer.js
@@ -0,0 +1,7 @@
+const URL = 'https://mate-uber-eats-api.herokuapp.com/api/v1/restaurants';
+
+export const loadDataFromServer = async() => {
+  const response = await fetch(URL);
+
+  return response.json();
+};
diff --git a/src/store/loadingReducer.js b/src/store/loadingReducer.js
new file mode 100644
index 0000000..73680a0
--- /dev/null
+++ b/src/store/loadingReducer.js
@@ -0,0 +1,23 @@
+const START_LOADING = 'START_LOADING';
+const STOP_LOADING = 'STOP_LOADING';
+
+export const startLoading = () => ({
+  type: START_LOADING,
+});
+
+export const stopLoading = () => ({
+  type: STOP_LOADING,
+});
+
+const loadingReducer = (isLoading = false, action) => {
+  switch (action.type) {
+    case START_LOADING:
+      return true;
+    case STOP_LOADING:
+      return false;
+    default:
+      return isLoading;
+  }
+};
+
+export default loadingReducer;
diff --git a/src/store/restaurantsReducer.js b/src/store/restaurantsReducer.js
new file mode 100644
index 0000000..d50296f
--- /dev/null
+++ b/src/store/restaurantsReducer.js
@@ -0,0 +1,17 @@
+const SAVE_RESTAURANTS = 'SAVE_RESTAURANTS';
+
+export const saveRestaurants = restaurants => ({
+  type: SAVE_RESTAURANTS,
+  restaurants,
+});
+
+const restaurantsReducer = (restaurants = null, action) => {
+  switch (action.type) {
+    case SAVE_RESTAURANTS:
+      return action.restaurants;
+    default:
+      return restaurants;
+  }
+};
+
+export default restaurantsReducer;
diff --git a/src/store/store.js b/src/store/store.js
new file mode 100644
index 0000000..46974f5
--- /dev/null
+++ b/src/store/store.js
@@ -0,0 +1,43 @@
+import { createStore, applyMiddleware, combineReducers } from 'redux';
+import thunk from 'redux-thunk';
+import { loadDataFromServer } from './loadDataFromServer';
+import restaurantsReducer, { saveRestaurants } from './restaurantsReducer';
+import loadingReducer, { startLoading, stopLoading } from './loadingReducer';
+import errorReducer, { setLoadError } from './errorReducer';
+
+export const loadData = () => async(dispatch) => {
+  dispatch(startLoading());
+
+  try {
+    const restaurants = await loadDataFromServer();
+
+    dispatch(saveRestaurants(restaurants.data));
+  } catch (e) {
+    dispatch(setLoadError(e.message));
+  }
+
+  dispatch(stopLoading());
+};
+
+const rootReducer = combineReducers({
+  restaurants: restaurantsReducer,
+  isLoading: loadingReducer,
+  error: errorReducer,
+});
+
+export const getRestaurants = (state) => {
+  if (!state.restaurants) {
+    return [];
+  }
+
+  const { feedItems, storesMap } = state.restaurants;
+
+  return feedItems.map(({ uuid }) => storesMap[uuid]);
+};
+
+export const getIsLoading = state => state.isLoading;
+export const getError = state => state.error;
+
+const store = createStore(rootReducer, applyMiddleware(thunk));
+
+export default store;
diff --git a/src/styles/Error.scss b/src/styles/Error.scss
new file mode 100644
index 0000000..955a701
--- /dev/null
+++ b/src/styles/Error.scss
@@ -0,0 +1,20 @@
+@import 'extends';
+
+.error {
+  @extend %absolute-center;
+  flex-flow: column nowrap;
+
+  &__text {
+    font-size: 30px;
+    font-weight: 500;
+  }
+
+  &__link {
+    font-size: 24px;
+
+    &:hover {
+      text-decoration: underline;
+      color: #5eb707;
+    }
+  }
+ }
diff --git a/src/styles/Footer.scss b/src/styles/Footer.scss
new file mode 100644
index 0000000..9be3409
--- /dev/null
+++ b/src/styles/Footer.scss
@@ -0,0 +1,143 @@
+@import "extends";
+@import "variables";
+
+.footer {
+  background-color: #262626;
+  padding: 64px 0;
+
+  @media (max-width: $breakpoint-tablet) {
+    padding: 40px 0;
+  }
+
+  &__main {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: space-between;
+  }
+
+  &__top-part {
+    border-bottom: 1px solid #c4c4c4;
+    margin-bottom: 40px;
+    padding-bottom: 40px;
+  }
+
+  &__logo {
+    margin-right: 40px;
+
+    @media (max-width: $breakpoint-tablet) {
+      margin-bottom: 40px;
+    }
+  }
+
+  &__logo-container {
+    @extend %flex-row;
+    margin-bottom: 40px;
+
+    @media (max-width: $breakpoint-tablet) {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+
+  &__top-part,
+  &__bottom-part {
+    @extend %flex-row;
+    align-items: flex-start;
+
+    @media (max-width: $breakpoint-phone-lg) {
+      flex-direction: column;
+    }
+  }
+
+  &__main,
+  &__copyright {
+    flex-basis: 45vw;
+    padding-right: 40px;
+
+    @media (max-width: $breakpoint-tablet) {
+      margin-left: 0;
+      flex-basis: initial;
+    }
+  }
+
+  &__copyright {
+    color: white;
+    font-size: 14px;
+
+    @media (max-width: $breakpoint-phone-lg) {
+      order: 1;
+    }
+  }
+
+  &__mobile-app {
+    display: inline-block;
+
+    @media (max-width: $breakpoint-tablet) {
+      display: block;
+      margin-bottom: 20px;
+    }
+
+    &:first-of-type {
+      margin-right: 20px;
+
+      @media (max-width: $breakpoint-tablet) {
+        margin-right: 0;
+        margin-bottom: 20px;
+      }
+    }
+  }
+
+  &__top-links {
+    &:last-of-type {
+      margin-left: 10vw;
+
+      @media (max-width: $breakpoint-phone-lg) {
+        margin-left: 0;
+      }
+    }
+  }
+
+  &__bottom-links {
+    @extend %flex-row;
+    margin-bottom: 40px;
+
+    .links__link:not(:last-of-type) {
+      margin-right: 40px;
+    }
+
+    @media (max-width: $breakpoint-phone-lg) {
+      flex-direction: column;
+      align-items: flex-start;
+      margin-top: 20px;
+      order: 1;
+    }
+  }
+
+  &__misc {
+    @media (max-width: $breakpoint-phone-lg) {
+      display: flex;
+      flex-direction: column;
+      margin-top: 20px;
+    }
+  }
+}
+
+.links {
+  &__link {
+    display: block;
+    margin-bottom: 16px;
+    font-weight: 500;
+    color: white;
+    white-space: nowrap;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.social {
+  &__link {
+    margin-right: 20px;
+  }
+}
diff --git a/src/styles/Header.scss b/src/styles/Header.scss
new file mode 100644
index 0000000..c467e06
--- /dev/null
+++ b/src/styles/Header.scss
@@ -0,0 +1,97 @@
+@import "extends";
+@import "variables";
+
+.header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background-color: white;
+  padding: 16px 0;
+
+  &__inner {
+    @extend %flex-row;
+  }
+
+  &__logo {
+    height: 24px;
+    width: auto;
+
+    @media (max-width: $breakpoint-phone) {
+      height: 14px;
+    }
+  }
+
+  &__delivery-info {
+    @extend %flex-row;
+    margin-left: 7vw;
+
+    @media (max-width: $breakpoint-tablet) {
+      display: none;
+    }
+  }
+
+  &__search {
+    margin-left: auto;
+
+    @media (max-width: $breakpoint-tablet) {
+      display: none;
+    }
+  }
+
+  &__link {
+    margin-left: 40px;
+    padding: 12px 0;
+    color: #1f1f1f;
+    white-space: nowrap;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &__toggle-buttons {
+    display: none;
+    margin-left: auto;
+
+    @media (max-width: $breakpoint-tablet) {
+      display: flex;
+    }
+  }
+
+  &__toggle-btn {
+    display: flex;
+    align-items: center;
+    border: 1px solid transparent;
+    padding: 11px 5px;
+    cursor: pointer;
+
+    &:not(:last-of-type) {
+      margin-right: 20px;
+    }
+
+    &:focus {
+      border-color: #e0e0e0;
+    }
+
+    &--place {
+      width: 16px;
+      height: 16px;
+    }
+  }
+}
+
+.mobile-controls {
+  display: none;
+  position: relative;
+  padding-top: 30px;
+
+  @media (max-width: $breakpoint-tablet) {
+    display: flex;
+  }
+
+  &__close {
+    position: absolute;
+    top: 10px;
+    right: 0;
+  }
+}
diff --git a/src/styles/Input.scss b/src/styles/Input.scss
new file mode 100644
index 0000000..fecbf82
--- /dev/null
+++ b/src/styles/Input.scss
@@ -0,0 +1,47 @@
+@import "extends";
+@import "variables";
+
+.control {
+
+  &__input-wrapper {
+    @extend %flex-row;
+    padding: 11px 16px;
+    border: 1px solid $border-color;
+    transition: border-color 300ms;
+
+    &--focused {
+      border-color: darken($border-color, 20);
+    }
+  }
+
+  &__icon {
+    width: 14px;
+    height: 14px;
+    margin-right: 10px;
+  }
+
+  &__input {
+    max-height: 24px;
+    line-height: 24px;
+
+    &--time {
+      max-width: 75px;
+    }
+
+    &--small {
+      @media (max-width: $breakpoint-tablet-lg) {
+        max-width: 75px;
+      }
+    }
+  }
+
+  &__label {
+    font-size: 14px;
+    margin-bottom: 8px;
+    color: #626262;
+  }
+
+  & + & {
+    margin-left: 20px;
+  }
+}
diff --git a/src/styles/Loader.scss b/src/styles/Loader.scss
new file mode 100644
index 0000000..1b50b0a
--- /dev/null
+++ b/src/styles/Loader.scss
@@ -0,0 +1,102 @@
+@import 'extends';
+
+.loader-container {
+  @extend %absolute-center;
+}
+
+.lds-default {
+  display: inline-block;
+  position: relative;
+  width: 80px * 2;
+  height: 80px * 2;
+}
+
+.lds-default div {
+  position: absolute;
+  width: 6px * 2;
+  height: 6px * 2;
+  background: #5eb707;
+  border-radius: 50%;
+  animation: lds-default 1.2s linear infinite;
+}
+
+.lds-default div:nth-child(1) {
+  animation-delay: 0s;
+  top: 37px * 2;
+  left: 66px * 2;
+}
+
+.lds-default div:nth-child(2) {
+  animation-delay: -0.1s;
+  top: 22px * 2;
+  left: 62px * 2;
+}
+
+.lds-default div:nth-child(3) {
+  animation-delay: -0.2s;
+  top: 11px * 2;
+  left: 52px * 2;
+}
+
+.lds-default div:nth-child(4) {
+  animation-delay: -0.3s;
+  top: 7px * 2;
+  left: 37px * 2;
+}
+
+.lds-default div:nth-child(5) {
+  animation-delay: -0.4s;
+  top: 11px * 2;
+  left: 22px * 2;
+}
+
+.lds-default div:nth-child(6) {
+  animation-delay: -0.5s;
+  top: 22px * 2;
+  left: 11px * 2;
+}
+
+.lds-default div:nth-child(7) {
+  animation-delay: -0.6s;
+  top: 37px * 2;
+  left: 7px * 2;
+}
+
+.lds-default div:nth-child(8) {
+  animation-delay: -0.7s;
+  top: 52px * 2;
+  left: 11px * 2;
+}
+
+.lds-default div:nth-child(9) {
+  animation-delay: -0.8s;
+  top: 62px * 2;
+  left: 22px * 2;
+}
+
+.lds-default div:nth-child(10) {
+  animation-delay: -0.9s;
+  top: 66px * 2;
+  left: 37px * 2;
+}
+
+.lds-default div:nth-child(11) {
+  animation-delay: -1s;
+  top: 62px * 2;
+  left: 52px * 2;
+}
+
+.lds-default div:nth-child(12) {
+  animation-delay: -1.1s;
+  top: 52px * 2;
+  left: 62px * 2;
+}
+
+@keyframes lds-default {
+  0%, 20%, 80%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.5);
+  }
+}
diff --git a/src/styles/Page.scss b/src/styles/Page.scss
new file mode 100644
index 0000000..4a63ea4
--- /dev/null
+++ b/src/styles/Page.scss
@@ -0,0 +1,6 @@
+.page {
+  position: relative;
+  padding-top: 40px;
+  min-height: 100vh;
+  margin-bottom: 40px;
+}
diff --git a/src/styles/RestaurantCard.scss b/src/styles/RestaurantCard.scss
new file mode 100644
index 0000000..a163d16
--- /dev/null
+++ b/src/styles/RestaurantCard.scss
@@ -0,0 +1,37 @@
+@import "variables";
+
+.restaurant-card {
+  --height: 367px;
+
+  height: var(--height);
+  width: 100%;
+  cursor: pointer;
+
+  @media (max-width: $breakpoint-phone) {
+    --height: 330px;
+  }
+
+  &__img {
+    height: calc(var(--height) * 0.7);
+    width: 100%;
+    object-fit: cover;
+  }
+
+  &__title {
+    margin: 12px 0 4px;
+  }
+
+  &__categories {
+    font-size: 14px;
+    color: #757575;
+    margin-bottom: 4px;
+  }
+
+  &__eta {
+    display: inline-block;
+    font-size: 14px;
+    font-weight: 700;
+    padding: 2px 8px;
+    background-color: #f5f5f5;
+  }
+}
diff --git a/src/styles/RestaurantsList.scss b/src/styles/RestaurantsList.scss
new file mode 100644
index 0000000..0339e02
--- /dev/null
+++ b/src/styles/RestaurantsList.scss
@@ -0,0 +1,17 @@
+@import "variables";
+
+.restaurants-list {
+  --card-width: 348px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--card-width), 1fr));
+  gap: 40px 20px;
+
+  @media (max-width: $breakpoint-tablet-lg) {
+    --card-width: 340px;
+    row-gap: 20px;
+  }
+
+  @media (max-width: $breakpoint-phone) {
+    --card-width: 280px;
+  }
+}
diff --git a/src/styles/Select.scss b/src/styles/Select.scss
new file mode 100644
index 0000000..d51c967
--- /dev/null
+++ b/src/styles/Select.scss
@@ -0,0 +1,33 @@
+.select {
+  position: relative;
+
+  &__input {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+
+    background-color: transparent;
+    border: 1px solid #979797;
+    border-radius: 0;
+    padding: 10px 40px;
+    color: white;
+    cursor: pointer;
+  }
+
+  &__icon {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 10px;
+    width: 20px;
+    height: 20px;
+  }
+
+  &__arrow {
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    width: 14px;
+    height: 8px;
+    transform: translateY(-50%);
+  }
+}
diff --git a/src/styles/default.scss b/src/styles/default.scss
new file mode 100644
index 0000000..e2b1e8f
--- /dev/null
+++ b/src/styles/default.scss
@@ -0,0 +1,47 @@
+@import "variables";
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+body,
+input,
+a,
+select,
+button {
+  font-family: Roboto, sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+input {
+  border: none;
+  outline: none;
+  background-color: transparent;
+}
+
+a {
+  text-decoration: none;
+}
+
+button {
+  border: none;
+  background: none;
+  outline: none;
+}
+
+.content {
+  max-width: 1160px;
+  padding: 0 34px;
+  margin: 0 auto;
+
+  @media (max-width: $breakpoint-phone) {
+    padding: 0 20px;
+  }
+
+  @media (min-width: $breakpoint-large) {
+    max-width: 1520px;
+  }
+}
diff --git a/src/styles/extends.scss b/src/styles/extends.scss
new file mode 100644
index 0000000..15deefc
--- /dev/null
+++ b/src/styles/extends.scss
@@ -0,0 +1,16 @@
+%flex-row {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+}
+
+%absolute-center {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
new file mode 100644
index 0000000..0ea9a9c
--- /dev/null
+++ b/src/styles/variables.scss
@@ -0,0 +1,7 @@
+$breakpoint-large: 1281px;
+$breakpoint-tablet-lg: 976px;
+$breakpoint-tablet: 768px;
+$breakpoint-phone-lg: 620px;
+$breakpoint-phone: 550px;
+$border-color: #e0e0e0;
+
