├── .gitignore ├── .gitpod.yml ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── manifest.json └── robots.txt └── src ├── App.jsx ├── Pages ├── Cadastro │ ├── index.jsx │ └── style.css ├── Categorias │ ├── Bones │ │ ├── bones.js │ │ └── index.js │ ├── Calca │ │ └── index.js │ ├── Calcas │ │ └── calca.js │ ├── Camisetas │ │ ├── camisetas.js │ │ └── index.js │ ├── Headphones │ │ ├── head.js │ │ └── index.js │ ├── Tenis │ │ └── index.js │ └── Trabalhe │ │ └── index.js ├── Criar │ └── index.js ├── DetalhesProduto │ └── index.js ├── Home │ └── index.js ├── Informacao │ ├── Blog │ │ └── index.js │ ├── MeusPedidos │ │ └── index.js │ ├── Seguranca │ │ └── index.js │ ├── SobreDripStore │ │ └── index.js │ ├── TrabalheConosco │ │ └── index.js │ └── Wishlist │ │ └── index.js ├── Login │ └── index.js ├── MeusPedidos │ └── index.js ├── NotFound │ ├── imagem.svg │ └── index.jsx ├── PaginaConstrucao │ ├── imagem.svg │ └── index.jsx └── TodosProdutos │ ├── index.jsx │ └── styles.css ├── components ├── BannerFooter │ ├── circulo.png │ ├── index.js │ ├── styles.css │ └── tenis.png ├── CarrocaDetalhesProduto │ ├── Carroca.css │ ├── Carroca.js │ ├── TenisBranco.png │ └── TenisBrancoMaior.png ├── DetalhesProduto │ ├── DetalhesProduto.css │ ├── DetalhesProduto.js │ └── TenisBranco.png ├── Footer │ ├── index.js │ └── logo.svg ├── Header │ ├── Buscar │ │ ├── index.css │ │ └── index.js │ ├── Carrinho │ │ └── index.js │ ├── Nav │ │ ├── index.css │ │ └── index.js │ ├── index.js │ └── style.css ├── Login │ ├── Criar │ │ └── index.js │ ├── img │ │ ├── LogoDigital.png │ │ ├── Original.png │ │ ├── gmail.png │ │ ├── photothumb.db │ │ ├── tenis1.png │ │ └── tenis2.png │ ├── index.css │ └── index.js ├── Produto │ ├── Collection │ │ ├── Linkicons │ │ │ ├── Linkicons.js │ │ │ └── index.css │ │ ├── img │ │ │ ├── Desconto.png │ │ │ ├── FrameC.png │ │ │ ├── FrameCa.png │ │ │ ├── FrameH.png │ │ │ ├── FrameS.png │ │ │ ├── Headset.png │ │ │ ├── Supreme.png │ │ │ └── Tenis.png │ │ ├── index.css │ │ └── index.js │ ├── Comprar │ │ └── index.js │ ├── index.js │ ├── skeakers.png │ └── styles.css ├── Produtos │ ├── Bones │ │ └── index.js │ ├── Calcas │ │ └── index.js │ ├── Camisetas │ │ └── index.js │ ├── Headphones │ │ └── index.js │ ├── Tenis │ │ └── index.js │ └── index.js ├── ProdutosAlta │ ├── produtosAlta.css │ ├── produtosAlta.js │ └── skeakers.png └── carrossel │ ├── img │ ├── bola.png │ └── tenis.png │ ├── index.js │ └── style.css ├── css └── app.css ├── img ├── Digital.png ├── LogoDigital.png ├── Stroke 5.png ├── White-Sneakers-PNG-Clipart 1.png ├── logo.png └── photothumb.db └── index.js /.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 | -------------------------------------------------------------------------------- /.gitpod.yml: -------------------------------------------------------------------------------- 1 | # This configuration file was automatically generated by Gitpod. 2 | # Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file) 3 | # and commit this file to your remote git repository to share the goodness with others. 4 | 5 | tasks: 6 | - init: npm install && npm run build 7 | command: npm run start 8 | 9 | 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## e-commerce 2 | 3 | # Para poder executar o projeto 4 | 5 | acesse `https://nodejs.org/`, baixe e instale no seu computador. 6 | 7 | ### Para executar o projeto 8 | 9 | No terminal, dentro da pasta da aplicação execute: `npm install`. 10 | E depois execute: `npm start`. 11 | 12 | O projeto sera executado em: `http://localhost:3000/`. 13 | Caso a mesma esteja livre. 14 | 15 | ## Link para o figma do projeto 16 | https://www.figma.com/file/cfb4F7ZXMFQmvmTn3PKI4z/DRIP-STORE---DIGITAL-COLLEGE?node-id=309%3A738 17 | 18 | ## Participantes e responsabilidades 19 | 20 | Adrielly: responsavel pelo Banner do rodapé e pela documentação; 21 | 22 | Elias: responsavel pela pagina detalhes do produto e componente produtos em alta; 23 | 24 | Elvis: responsavel pela Navbar da Home, pagina Todos Produtos, arrumar problemas na home e aprovou os pull request; 25 | 26 | Guilherme: responsavel pelo rodapé e paginas placeholder; 27 | 28 | Mario: responsavel pelo componente LinkIcons, os conteudos dentro da pasta produto e o links de retorno pra home page; 29 | 30 | Carlos: responsavel pelo componente Collections e pelas paginas de login; 31 | 32 | Natan: responsavel pelo carrossel da home page; 33 | 34 | Saor: responsavel pela pagina de cadastro, fazer as rotas em app.js, linkar as paginas na main e resolver os problemas depois dos pulls requests. -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "digital-store", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@emotion/react": "^11.10.4", 7 | "@emotion/styled": "^11.10.4", 8 | "@mui/icons-material": "^5.10.9", 9 | "@mui/material": "^5.10.9", 10 | "@testing-library/jest-dom": "^5.16.5", 11 | "@testing-library/react": "^13.4.0", 12 | "@testing-library/user-event": "^13.5.0", 13 | "axios": "^1.1.2", 14 | "bootstrap": "^5.2.2", 15 | "bootstrap-icons": "^1.9.1", 16 | "react": "^18.2.0", 17 | "react-bootstrap": "^2.5.0", 18 | "react-dom": "^18.2.0", 19 | "react-icons": "^4.4.0", 20 | "react-router-dom": "^6.4.2", 21 | "react-scripts": "5.0.1", 22 | "web-vitals": "^2.1.4" 23 | }, 24 | "scripts": { 25 | "start": "react-scripts start", 26 | "build": "react-scripts build", 27 | "test": "react-scripts test", 28 | "eject": "react-scripts eject" 29 | }, 30 | "eslintConfig": { 31 | "extends": [ 32 | "react-app", 33 | "react-app/jest" 34 | ] 35 | }, 36 | "browserslist": { 37 | "production": [ 38 | ">0.2%", 39 | "not dead", 40 | "not op_mini all" 41 | ], 42 | "development": [ 43 | "last 1 chrome version", 44 | "last 1 firefox version", 45 | "last 1 safari version" 46 | ] 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElvisNascimento/e-commerce-react/01ade26d92bf0d10e2d0c29cb14f0b6e462ef1ec/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | Digital Store 14 | 15 | 16 | 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | // import Produtos from "./components/Produtos/index.js"; 2 | import React, { useState } from "react"; 3 | import {Routes, Route} from 'react-router-dom'; 4 | 5 | //import Trabalhe from "./Pages/Categorias/Tenis/tenis.js"; 6 | import Home from "./Pages/Home/index.js"; 7 | import Bones from "./components/Produtos/Bones/"; 8 | import Calcas from "./components/Produtos/Calcas"; 9 | import Camisetas from "./components/Produtos/Camisetas"; 10 | import Headphones from "./components/Produtos/Headphones"; 11 | import Tenis from "./components/Produtos/Tenis/"; 12 | import Login from "./Pages/Login/index.js"; 13 | import Criar from "./Pages/Criar/index.js"; 14 | import Cadastro from "./Pages/Cadastro/index.jsx"; 15 | import TodosProdutos from "./Pages/TodosProdutos/index.jsx"; 16 | import DetalhesProduto from "./components/DetalhesProduto/DetalhesProduto.js"; 17 | import Blog from "./Pages/Informacao/Blog/index.js"; 18 | import MeusPedidos from "./Pages/Informacao/MeusPedidos/index.js"; 19 | import Seguranca from "./Pages/Informacao/Seguranca/index.js"; 20 | import SobreDripStore from "./Pages/Informacao/SobreDripStore/index.js"; 21 | import TrabalheConosco from "./Pages/Informacao/TrabalheConosco/index.js"; 22 | import Wishlist from "./Pages/Informacao/Wishlist/index.js"; 23 | import PaginaConstrucao from "./Pages/PaginaConstrucao/index.jsx"; 24 | import NotFound from "./Pages/NotFound/index.jsx"; 25 | 26 | 27 | export const AppContext = React.createContext(); 28 | 29 | export default function App() { 30 | const [carrinho, setCarrinho] = useState([]); 31 | 32 | return ( 33 | 34 | 35 | 36 | }/> 37 | }/> 38 | }/> 39 | }/> 40 | }/> 41 | }/> 42 | }/> 43 | }/> 44 | }/> 45 | }/> 46 | }/> 47 | }/> 48 | }/> 49 | }/> 50 | }/> 51 | }/> 52 | }/> 53 | }/> 54 | }/> 55 | 56 | }/> 57 | 58 | 59 | 60 | ) 61 | } 62 | -------------------------------------------------------------------------------- /src/Pages/Cadastro/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Footer from "../../components/Footer"; 3 | import Logo from '../../img/LogoDigital.png'; 4 | import './style.css'; 5 | import { Checkbox } from "@mui/material"; 6 | import { pink } from '@mui/material/colors'; 7 | import { Link } from "react-router-dom"; 8 | 9 | export default function Cadastro() { 10 | 11 | return ( 12 | 13 |
14 |
15 | 16 |
17 |
18 | Criar Conta 19 |
20 |
21 |
22 |
23 | Informações Pessoais 24 |
25 |
26 |
27 | 28 | 29 |
30 |
31 | 32 | 33 |
34 |
35 | 36 | 37 |
38 |
39 | 40 | 41 |
42 |
43 |
44 |
45 | Informações de Entrega 46 |
47 |
48 |
49 | 50 | 51 |
52 |
53 | 54 | 55 |
56 |
57 | 58 | 59 |
60 |
61 | 62 | 63 |
64 |
65 | 66 | 67 |
68 |
69 |
70 | 71 | 72 |
73 |
74 | 75 |
76 |
77 |
79 | 80 | ) 81 | } -------------------------------------------------------------------------------- /src/Pages/Cadastro/style.css: -------------------------------------------------------------------------------- 1 | .logo{ 2 | width: 1440px; 3 | height: 80px; 4 | height: 80px; 5 | border-radius: 0px; 6 | padding: 25px 100px 25px 100px; 7 | 8 | } 9 | .criar{ 10 | height: 36px; 11 | width: 440px; 12 | margin-left: 344px; 13 | margin-top: 70px; 14 | 15 | } 16 | span.conta{ 17 | font-weight: 700; 18 | font-size: 32px; 19 | line-height: 36px; 20 | letter-spacing: 1px; 21 | } 22 | .cad{ 23 | background-color: white; 24 | width: 750px; 25 | } 26 | .formu1{ 27 | display: flex; 28 | flex-direction: column; 29 | align-items: flex-start; 30 | padding: 30px; 31 | width: 750px; 32 | height: 538px; 33 | background: white; 34 | border-radius: 4px; 35 | margin-top: 22px; 36 | margin-left: 345px; 37 | gap: 20px; 38 | } 39 | .info{ 40 | width: 165px; 41 | height: 22px; 42 | font-weight: 700; 43 | font-size: 14px; 44 | letter-spacing: 0.75px; 45 | text-align: center; 46 | color: #474747; 47 | } 48 | .quebra{ 49 | width: 690px; 50 | } 51 | .labelNome{ 52 | width: 427.53px; 53 | height: 24px; 54 | font-weight: 700; 55 | font-size: 12px; 56 | line-height: 24px; 57 | color: #474747; 58 | } 59 | .inputNome{ 60 | border: none; 61 | width: 522.24px; 62 | height: 28px; 63 | color: #666666; 64 | font-weight: 400; 65 | font-size: 16px; 66 | line-height: 28px; 67 | margin-top: 21px; 68 | } 69 | .labelCpf{ 70 | width: 427.53px; 71 | height: 24px; 72 | font-weight: 700; 73 | font-size: 12px; 74 | line-height: 24px; 75 | color: #474747; 76 | margin-top: 20px; 77 | } 78 | .inputCpf{ 79 | border: none; 80 | width: 522.24px; 81 | height: 28px; 82 | color: #666666; 83 | font-weight: 400; 84 | font-size: 16px; 85 | line-height: 28px; 86 | margin-top: 21px; 87 | } 88 | .labelEmail{ 89 | width: 427.53px; 90 | height: 24px; 91 | font-weight: 700; 92 | font-size: 12px; 93 | line-height: 24px; 94 | color: #474747; 95 | margin-top: 20px; 96 | } 97 | .inputEmail{ 98 | border: none; 99 | width: 522.24px; 100 | height: 28px; 101 | color: #666666; 102 | font-weight: 400; 103 | font-size: 16px; 104 | line-height: 28px; 105 | margin-top: 21px; 106 | } 107 | .labelCelular{ 108 | width: 427.53px; 109 | height: 24px; 110 | font-weight: 700; 111 | font-size: 12px; 112 | line-height: 24px; 113 | color: #474747; 114 | margin-top: 20px; 115 | } 116 | .inputCelular{ 117 | border: none; 118 | width: 522.24px; 119 | height: 28px; 120 | color: #666666; 121 | font-weight: 400; 122 | font-size: 16px; 123 | line-height: 28px; 124 | margin-top: 21px; 125 | } 126 | .formu2{ 127 | width: 750px; 128 | height: 647px; 129 | display: flex; 130 | flex-direction: column; 131 | align-items: flex-start; 132 | padding: 30px; 133 | gap: 20px; 134 | margin-top: 10px; 135 | margin-left: 345px; 136 | background: white; 137 | border-radius: 4px; 138 | } 139 | .infoE{ 140 | width: 179px; 141 | height: 22px; 142 | font-weight: 700; 143 | font-size: 14px; 144 | letter-spacing: 0.75px; 145 | text-align: center; 146 | color: #474747; 147 | } 148 | .labelEndereco{ 149 | width: 427.53px; 150 | height: 24px; 151 | font-weight: 700; 152 | font-size: 12px; 153 | line-height: 24px; 154 | color: #474747; 155 | } 156 | .inputEndereco{ 157 | border: none; 158 | width: 522.24px; 159 | height: 28px; 160 | color: #666666; 161 | font-weight: 400; 162 | font-size: 16px; 163 | line-height: 28px; 164 | margin-top: 21px; 165 | } 166 | .labelBairro{ 167 | width: 427.53px; 168 | height: 24px; 169 | font-weight: 700; 170 | font-size: 12px; 171 | line-height: 24px; 172 | color: #474747; 173 | margin-top: 20px; 174 | } 175 | .inputBairro{ 176 | border: none; 177 | width: 522.24px; 178 | height: 28px; 179 | color: #666666; 180 | font-weight: 400; 181 | font-size: 16px; 182 | line-height: 28px; 183 | margin-top: 21px; 184 | } 185 | .labelCidade{ 186 | width: 427.53px; 187 | height: 24px; 188 | font-weight: 700; 189 | font-size: 12px; 190 | line-height: 24px; 191 | color: #474747; 192 | margin-top: 20px; 193 | } 194 | .inputCidade{ 195 | border: none; 196 | width: 522.24px; 197 | height: 28px; 198 | color: #666666; 199 | font-weight: 400; 200 | font-size: 16px; 201 | line-height: 28px; 202 | margin-top: 21px; 203 | } 204 | .labelCep{ 205 | width: 427.53px; 206 | height: 24px; 207 | font-weight: 700; 208 | font-size: 12px; 209 | line-height: 24px; 210 | color: #474747; 211 | margin-top: 20px; 212 | } 213 | .inputCep{ 214 | border: none; 215 | width: 522.24px; 216 | height: 28px; 217 | color: #666666; 218 | font-weight: 400; 219 | font-size: 16px; 220 | line-height: 28px; 221 | margin-top: 21px; 222 | } 223 | .labelComp{ 224 | width: 427.53px; 225 | height: 24px; 226 | font-weight: 700; 227 | font-size: 12px; 228 | line-height: 24px; 229 | color: #474747; 230 | margin-top: 20px; 231 | } 232 | .inputComp{ 233 | border: none; 234 | width: 522.24px; 235 | height: 28px; 236 | color: #666666; 237 | font-weight: 400; 238 | font-size: 16px; 239 | line-height: 28px; 240 | margin-top: 21px; 241 | } 242 | .check{ 243 | width: 754px; 244 | margin-left: 344px; 245 | margin-top: 30px; 246 | display: flex; 247 | flex-direction: row; 248 | } 249 | .cBox{ 250 | border: 1px solid #C92071; 251 | width: 22px; 252 | height: 22px; 253 | border-radius: 2px; 254 | accent-color: #C92071; 255 | } 256 | .cBoxLabel{ 257 | width: 718px; 258 | height: 44px; 259 | margin-left: 10px; 260 | font-weight: 500; 261 | font-size: 14px; 262 | line-height: 22px; 263 | color: #474747; 264 | letter-spacing: 0.25px 265 | } 266 | .btnCad{ 267 | display: flex; 268 | align-items: center; 269 | text-align: center; 270 | margin-top: 40px; 271 | margin-left: 344px; 272 | margin-bottom: 153px; 273 | 274 | } 275 | .btnConf{ 276 | align-items: center; 277 | text-align: center; 278 | letter-spacing: 0.75px; 279 | color: #F5F5F5; 280 | border: none; 281 | font-weight: 700; 282 | font-size: 16px; 283 | line-height: 24px; 284 | width: 750px; 285 | height: 48px; 286 | background-color: #C92071; 287 | } -------------------------------------------------------------------------------- /src/Pages/Categorias/Bones/bones.js: -------------------------------------------------------------------------------- 1 | export default function Bones(){ 2 | return( 3 |
4 |

5 | BONÉS 6 |

7 |
8 | ) 9 | } -------------------------------------------------------------------------------- /src/Pages/Categorias/Bones/index.js: -------------------------------------------------------------------------------- 1 | export default function Bones(){ 2 | return( 3 |
4 |

5 | BONÉS 6 |

7 |
8 | ) 9 | } -------------------------------------------------------------------------------- /src/Pages/Categorias/Calca/index.js: -------------------------------------------------------------------------------- 1 | export default function Calcas(){ 2 | return( 3 |
4 |

5 | CALCAS 6 |

7 |
8 | ) 9 | } -------------------------------------------------------------------------------- /src/Pages/Categorias/Calcas/calca.js: -------------------------------------------------------------------------------- 1 | export default function Calcas(){ 2 | return( 3 |
4 |

5 | CALÇAS 6 |

7 |
8 | ) 9 | } -------------------------------------------------------------------------------- /src/Pages/Categorias/Camisetas/camisetas.js: -------------------------------------------------------------------------------- 1 | export default function Camisetas(){ 2 | return( 3 |
4 |

5 | Camisetas 6 |

7 |
8 | ) 9 | } -------------------------------------------------------------------------------- /src/Pages/Categorias/Camisetas/index.js: -------------------------------------------------------------------------------- 1 | export default function Camisetas(){ 2 | return( 3 |
4 |

5 | CAMISETAS 6 |

7 |
8 | ) 9 | } -------------------------------------------------------------------------------- /src/Pages/Categorias/Headphones/head.js: -------------------------------------------------------------------------------- 1 | export default function Headphones(){ 2 | return( 3 |
4 |

5 | Headphones 6 |

7 |
8 | ) 9 | } -------------------------------------------------------------------------------- /src/Pages/Categorias/Headphones/index.js: -------------------------------------------------------------------------------- 1 | export default function Headphones(){ 2 | return( 3 |
4 |

5 | HEADPHONES 6 |

7 |
8 | ) 9 | } -------------------------------------------------------------------------------- /src/Pages/Categorias/Tenis/index.js: -------------------------------------------------------------------------------- 1 | export default function Tenis(){ 2 | return( 3 |
4 |

5 | TÊNIS 6 |

7 |
8 | ) 9 | } -------------------------------------------------------------------------------- /src/Pages/Categorias/Trabalhe/index.js: -------------------------------------------------------------------------------- 1 | export default function Trabalhe(){ 2 | return( 3 |
4 |

5 | TÊNIS 6 |

7 |
8 | ) 9 | } -------------------------------------------------------------------------------- /src/Pages/Criar/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Footer from "../../components/Footer"; 3 | import Criar from "../../components/Login/Criar"; 4 | 5 | export default function CriarConta() { 6 | return( 7 | 8 | 9 |