├── src
    ├── assets
    │   ├── image1.png
    │   ├── image2.png
    │   ├── image3.png
    │   ├── image4.png
    │   ├── image6.png
    │   ├── image7.png
    │   ├── image5.jpeg
    │   └── plate-vegan.png
    ├── global.css
    ├── setupTests.js
    ├── index.js
    ├── routes.js
    └── pages
    │   └── Home
    │       ├── style.css
    │       └── index.js
├── .gitignore
├── public
    └── index.html
├── package.json
└── README.md


/src/assets/image1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lorenalgm/taste/HEAD/src/assets/image1.png


--------------------------------------------------------------------------------
/src/assets/image2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lorenalgm/taste/HEAD/src/assets/image2.png


--------------------------------------------------------------------------------
/src/assets/image3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lorenalgm/taste/HEAD/src/assets/image3.png


--------------------------------------------------------------------------------
/src/assets/image4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lorenalgm/taste/HEAD/src/assets/image4.png


--------------------------------------------------------------------------------
/src/assets/image6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lorenalgm/taste/HEAD/src/assets/image6.png


--------------------------------------------------------------------------------
/src/assets/image7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lorenalgm/taste/HEAD/src/assets/image7.png


--------------------------------------------------------------------------------
/src/assets/image5.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lorenalgm/taste/HEAD/src/assets/image5.jpeg


--------------------------------------------------------------------------------
/src/assets/plate-vegan.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lorenalgm/taste/HEAD/src/assets/plate-vegan.png


--------------------------------------------------------------------------------
/src/global.css:
--------------------------------------------------------------------------------
1 | html, *{
2 |     margin: 0;
3 |     padding: 0;
4 |     font-family: 'Montserrat', sans-serif;
5 |     text-decoration: none;
6 | }
7 | 
8 | 


--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom/extend-expect';
6 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import Routes from './routes';
 4 | import './global.css';
 5 | 
 6 | ReactDOM.render(
 7 |   <React.StrictMode>
 8 |     <Routes />
 9 |   </React.StrictMode>,
10 |   document.getElementById('root')
11 | );
12 | 


--------------------------------------------------------------------------------
/src/routes.js:
--------------------------------------------------------------------------------
 1 | import { Route, Switch, BrowserRouter } from 'react-router-dom';
 2 | import React from 'react';
 3 | import Home from './pages/Home';
 4 | 
 5 | function Routes(){
 6 |     return(
 7 |         <BrowserRouter>
 8 |             <Switch>
 9 |                 <Route path="/" exact component={Home} />
10 |             </Switch>
11 |         </BrowserRouter>
12 |     )
13 | }
14 | 
15 | export default Routes;


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap" rel="stylesheet">
 8 |     <meta name="theme-color" content="#000000" />
 9 |     <meta
10 |       name="description"
11 |       content="Taste"
12 |     />
13 |     <title>Taste</title>
14 |   </head>
15 |   <body>
16 |     <noscript>You need to enable JavaScript to run this app.</noscript>
17 |     <div id="root"></div>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "taste",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^4.2.4",
 7 |     "@testing-library/react": "^9.3.2",
 8 |     "@testing-library/user-event": "^7.1.2",
 9 |     "react": "^16.13.1",
10 |     "react-dom": "^16.13.1",
11 |     "react-icons": "^3.11.0",
12 |     "react-router-dom": "^5.2.0",
13 |     "react-scripts": "3.4.3"
14 |   },
15 |   "scripts": {
16 |     "start": "react-scripts start",
17 |     "build": "react-scripts build",
18 |     "test": "react-scripts test",
19 |     "eject": "react-scripts eject"
20 |   },
21 |   "eslintConfig": {
22 |     "extends": "react-app"
23 |   },
24 |   "browserslist": {
25 |     "production": [
26 |       ">0.2%",
27 |       "not dead",
28 |       "not op_mini all"
29 |     ],
30 |     "development": [
31 |       "last 1 chrome version",
32 |       "last 1 firefox version",
33 |       "last 1 safari version"
34 |     ]
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <br />
 2 | <p align="center">
 3 |     <h1 align="center">Taste</h1>
 4 | 
 5 |   <p align="center">    
 6 |      O melhor restaurante da cidade     <br />
 7 |     <br />
 8 |   </p> 
 9 | 
10 | ## :checkered_flag: Índice
11 | 
12 | * [Sobre](#bulb-sobre)
13 | * [Demo](#iphone-demo)
14 |   * [Live](#live)  
15 | * [Tecnologias](#computer-tecnologias)
16 | * [Como utilizar](#wrench-como-utilizar)
17 | * [Contatos](#mailbox_with_no_mail-contatos)
18 | 
19 | ## :bulb: Sobre
20 | Taste é um website de um restaurante e seu cardápio
21 | 
22 | 
23 | ## :iphone: Demo
24 | 
25 | ### Live
26 | 
27 | A aplicação poderá ser acessada pelo link: https://taste-git-master.lorenalgm.vercel.app/
28 | 
29 | <p align="center">
30 |     <img src="https://i.ibb.co/QFnC9dx/taste.gif" width="900" height="500" alt="Taste">
31 |  </p>
32 | 
33 | 
34 | ### :computer: Tecnologias:
35 | - ReactJS
36 | - CSS
37 | 
38 | ### :wrench: Como Utilizar
39 | 
40 | 1. Fork ou clone esse repositório:
41 | ```sh 
42 | git@github.com:Lorenalgm/taste.git
43 | ```
44 | 2. Abra o projeto no seu editor de texto
45 | 3. Instale os pacotes e inicie o server!
46 | ```sh 
47 |     yarn
48 |     yarn start
49 | ```
50 | 
51 | ## :mailbox_with_no_mail: Contatos
52 | Linkedin: https://www.linkedin.com/in/lorenagmontes/
53 | 
54 |    
55 | 


--------------------------------------------------------------------------------
/src/pages/Home/style.css:
--------------------------------------------------------------------------------
  1 | header{
  2 |     display: flex;
  3 |     justify-content: space-between;
  4 |     align-items: center;
  5 |     margin: 2rem 10rem;
  6 | }
  7 | 
  8 | .car{
  9 |     background-color: black;
 10 |     color: white;
 11 |     border-radius: 1rem;
 12 |     border-bottom-right-radius: 0;
 13 |     width: 3rem;
 14 |     height: 3rem;
 15 |     display: flex;
 16 |     align-items: center;
 17 |     cursor: pointer;
 18 |     justify-content: center;
 19 | }
 20 | 
 21 | .cart-plus{
 22 |     font-size: 25px;
 23 | }
 24 | 
 25 | .section-hero{
 26 |     display: flex;
 27 |     justify-content: space-between;
 28 |     align-items: center;
 29 |     margin: 0 10rem;
 30 | }
 31 | 
 32 | .hero-content h1{
 33 |     font-size: 42px;
 34 |     max-width: 30rem;
 35 | }
 36 | 
 37 | .see-menu{
 38 |     background-color: black;
 39 |     color: white;
 40 |     padding: 1rem 5rem;
 41 |     display: inline-block;
 42 |     font-weight: bold;
 43 |     border-radius: 1rem;
 44 |     border-bottom-right-radius: 0;
 45 |     cursor: pointer;
 46 |     margin: 2rem 0;
 47 |     box-shadow: 4px 4px 10px rgb(161, 160, 160);
 48 | }
 49 | 
 50 | .food-options{
 51 |     display: flex;
 52 | }
 53 | 
 54 | 
 55 | 
 56 | .option{
 57 |     margin-right: 2rem;
 58 |     background: rgb(246, 243, 243);d: rgb(224, 222, 222);
 59 |     width: 3.2rem;
 60 |     height: 3.2rem;
 61 |     border-radius: 1rem;
 62 |     display: flex;
 63 |     align-items: center;
 64 |     justify-content: center;
 65 |     cursor: pointer;
 66 |     transition: 0.3s ease-out;
 67 |     box-shadow: 4px 4px 10px rgb(175, 173, 173);
 68 | }
 69 | 
 70 | .option:hover{
 71 |     transform: translateY(-10px)
 72 | }
 73 | 
 74 | .option-icon{
 75 |     color: rgb(41, 40, 40);
 76 | }
 77 | 
 78 | .section-principal-options{
 79 |     display: flex;
 80 |     justify-content: space-between;
 81 |     align-items: center;
 82 |     margin: 5rem 10rem;
 83 | }
 84 | 
 85 | .principal-options-images{
 86 |     display: flex;
 87 | }
 88 | 
 89 | .featured{
 90 |     position: relative;
 91 |     margin-right: 1rem;
 92 |     display: flex;
 93 |     align-items: center;
 94 |     justify-content: center;
 95 |     background: rgb(246, 243, 243);
 96 |     width: 13rem;
 97 |     height: 13rem;
 98 |     border-radius: 1rem;
 99 |     box-shadow: 4px 4px 10px rgb(175, 173, 173);
100 | }
101 | 
102 | .featured img{
103 |     bottom: 6rem;
104 |     position: absolute;
105 |     width: 12em;
106 | }
107 | 
108 | .featured .image2{
109 |     bottom: 6.5rem;
110 | }
111 | 
112 | .principal-options-text {
113 |     padding: 3rem;
114 |     display: flex;
115 |     flex-direction: column;
116 |     justify-content: center;
117 |     align-items: center;
118 | }
119 | 
120 | .principal-options-text h3{
121 |     font-size: 30px;
122 |     margin-bottom: 1rem;
123 | }
124 | 
125 | .principal-options-text p{
126 |     line-height: 1.5rem;
127 | }
128 | 
129 | .featured-description{
130 |     position: relative;
131 |     margin-top: 5.5rem;
132 |     line-height: 1.5rem;
133 | }
134 | 
135 | .car-featured{
136 |     position: absolute;
137 |     bottom: -1rem;
138 |     right: 1rem;
139 | }
140 | 
141 | .section-plate{
142 |     display: flex;
143 |     justify-content: space-between;
144 |     align-items: center;
145 |     margin: 0 10rem;
146 |     line-height: 1.5rem;
147 | }
148 | 
149 | .image1{
150 |     width: 30em;
151 | }
152 | 
153 | .plate-content h1{
154 |     margin-bottom: 1rem;
155 | }
156 | 
157 | .section-reserve{
158 |     display: flex;
159 |     justify-content: space-between;
160 |     margin: 5rem 10rem;
161 |     align-items: center;
162 | }
163 | 
164 | footer{
165 |     background-color: black;
166 |     color: white;
167 | }
168 | 
169 | .footer-content{
170 |     margin: 0 10rem;
171 |     padding: 3rem 0;
172 |     line-height: 1.4rem;
173 |     display: flex;
174 |     justify-content: space-between;
175 | }
176 | 
177 | .footer-content h2{
178 |     margin-bottom: .4rem;
179 | }


--------------------------------------------------------------------------------
/src/pages/Home/index.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import image4 from '../../assets/image4.png';
  3 | import image2 from '../../assets/image2.png';
  4 | import image3 from '../../assets/plate-vegan.png';
  5 | import image1 from '../../assets/image1.png';
  6 | import './style.css';
  7 | import { FaCartPlus, FaBeer, FaPizzaSlice, FaHamburger, FaBirthdayCake } from 'react-icons/fa';
  8 | 
  9 | function Home(){
 10 |     return(
 11 |         <div className="container">
 12 |             <header>
 13 |                 <h1>Taste</h1>
 14 |                 <div className="car">
 15 |                     <FaCartPlus className="cart-plus" />
 16 |                 </div>
 17 |             </header>
 18 |             <main>
 19 |                 <div className="section-hero">
 20 |                     <div className="hero-content">
 21 |                         <h1>Comidas deliciosas estão esperando por você</h1>
 22 |                         <a className="see-menu" href="https://github.com/Lorenalgm">Ver menu</a>
 23 | 
 24 |                         <div className="food-options">                            
 25 |                             <div className="option"><FaHamburger className="option-icon" /></div>
 26 |                             <div className="option"><FaBeer className="option-icon" /></div>
 27 |                             <div className="option"><FaBirthdayCake className="option-icon" /></div>
 28 |                             <div className="option"><FaPizzaSlice className="option-icon" /></div>
 29 |                         </div>
 30 |                     </div>
 31 |                     <img src={image4} alt="Food" />
 32 |                 </div>
 33 |                 <div className="section-principal-options">
 34 |                     <div className="principal-options-images">
 35 |                         <div className="featured">
 36 |                             <img className="image2" src={image2} alt="About the food" />
 37 |                             <div className="featured-description">
 38 |                                 <h3>Frango grelhado</h3>
 39 |                                 <p>Com salada</p>
 40 |                                 <p><b>R$20,00</b></p>
 41 |                             </div>
 42 |                             <div className="car car-featured">
 43 |                                 <FaCartPlus className="cart-plus" />
 44 |                             </div>
 45 |                         </div>
 46 |                         <div className="featured">
 47 |                             <img className="image3" src={image3} alt="About the food" />
 48 |                             <div className="featured-description">
 49 |                                 <h3>Risoto</h3>
 50 |                                 <p>Vegano</p>
 51 |                                 <p><b>R$20,00</b></p>
 52 |                             </div>
 53 |                             <div className="car car-featured">
 54 |                                 <FaCartPlus className="cart-plus" />
 55 |                             </div>
 56 |                         </div>
 57 |                     </div>
 58 |                     <div className="principal-options-text">
 59 |                         <h3>Nós temos deliciosas comidas típicas e caseiras</h3>
 60 |                         <p>Experiente os pratos especialmente preparados com todo carinho e qualidade para você.</p>
 61 |                     </div>
 62 |                 </div>
 63 |                 <div className="section-plate">
 64 |                     <div className="plate-content">
 65 |                         <h1>Sabor e qualidade!</h1>
 66 |                         <p>Escolhemos os melhores ingredientes, com altíssima qualidade para oferecer a melhor refeição para você!</p>
 67 |                     </div>
 68 |                     <img className="image1" src={image1} alt="About the food" />
 69 |                 </div>
 70 |                 <div className="section-reserve">
 71 |                     <div className="reservation-content">
 72 |                         <p>Fale conosco</p>
 73 |                         <h1>Gostaria de fazer uma reserva?</h1>
 74 |                     </div>
 75 |                     <a href="https://github.com/Lorenalgm" className="see-menu reserve-now">Reservar agora</a>
 76 |                 </div>
 77 |             </main>
 78 |             <footer>
 79 |                <div className="footer-content">
 80 |                 <div className="title">
 81 |                         <h1>Taste</h1>
 82 |                     </div>
 83 |                     <div className="services">
 84 |                         <h2>Nossos serviços</h2>
 85 |                         <p>Preços</p>
 86 |                         <p>Acompanhamento</p>
 87 |                         <p>Reporte um problema</p>
 88 |                         <p>Termo de serviços</p>
 89 |                     </div>
 90 |                     <div className="company">
 91 |                         <h2>Nossa empresa</h2>
 92 |                         <p>Entre em contato</p>
 93 |                         <p>Equipe</p>
 94 |                     </div>
 95 |                     <div className="address">
 96 |                         <h2>Contato</h2>
 97 |                         <p>Av. FAB, 345 - Centro</p>
 98 |                         <p>@taste</p>
 99 |                         <p>(96)91232-1234</p>
100 |                         <p>contato@taste.com</p>
101 |                     </div>
102 |                </div>
103 |             </footer>
104 |         </div>
105 |     )
106 | }
107 | 
108 | export default Home;
109 | 


--------------------------------------------------------------------------------