├── doc ├── slide.gif └── layout │ ├── buybox.png │ ├── footer.png │ ├── gallery.png │ ├── header.png │ ├── layout.png │ ├── section.png │ ├── home-page.png │ ├── filter-group.png │ ├── product-card.png │ ├── product-gallery.png │ ├── product-listing.png │ ├── product-view-page.png │ ├── product-listing-page.png │ ├── product-options-circle.png │ └── product-options-square.png ├── public ├── collection-1.png ├── collection-2.png ├── collection-3.png ├── home-slide-1.jpeg ├── home-slide-2.jpeg ├── home-slide-3.jpeg ├── home-slide-4.jpeg ├── home-slide-5.jpeg ├── home-slide-6.jpeg ├── home-slide-7.jpeg ├── home-slide-8.jpeg ├── produc-image-1.jpeg ├── produc-image-2.jpeg ├── produc-image-3.jpeg ├── produc-image-4.jpeg ├── produc-image-5.jpeg ├── product-thumb-1.jpeg ├── product-thumb-2.jpeg ├── product-thumb-3.jpeg ├── product-thumb-4.jpeg └── product-thumb-5.jpeg ├── assets ├── arrow-left.svg ├── arrow-right.svg ├── star-icon.svg ├── facebook.svg ├── mini-cart.svg ├── twitter.svg ├── instagram.svg ├── logo-footer.svg └── logo-header.svg └── README.md /doc/slide.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalcollegebr/projeto-digital-store/HEAD/doc/slide.gif -------------------------------------------------------------------------------- /doc/layout/buybox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalcollegebr/projeto-digital-store/HEAD/doc/layout/buybox.png -------------------------------------------------------------------------------- /doc/layout/footer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalcollegebr/projeto-digital-store/HEAD/doc/layout/footer.png -------------------------------------------------------------------------------- /doc/layout/gallery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalcollegebr/projeto-digital-store/HEAD/doc/layout/gallery.png -------------------------------------------------------------------------------- /doc/layout/header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalcollegebr/projeto-digital-store/HEAD/doc/layout/header.png -------------------------------------------------------------------------------- /doc/layout/layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalcollegebr/projeto-digital-store/HEAD/doc/layout/layout.png -------------------------------------------------------------------------------- /doc/layout/section.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalcollegebr/projeto-digital-store/HEAD/doc/layout/section.png -------------------------------------------------------------------------------- /doc/layout/home-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalcollegebr/projeto-digital-store/HEAD/doc/layout/home-page.png -------------------------------------------------------------------------------- /public/collection-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalcollegebr/projeto-digital-store/HEAD/public/collection-1.png -------------------------------------------------------------------------------- /public/collection-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalcollegebr/projeto-digital-store/HEAD/public/collection-2.png -------------------------------------------------------------------------------- /public/collection-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalcollegebr/projeto-digital-store/HEAD/public/collection-3.png -------------------------------------------------------------------------------- /public/home-slide-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalcollegebr/projeto-digital-store/HEAD/public/home-slide-1.jpeg -------------------------------------------------------------------------------- /public/home-slide-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalcollegebr/projeto-digital-store/HEAD/public/home-slide-2.jpeg -------------------------------------------------------------------------------- /public/home-slide-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalcollegebr/projeto-digital-store/HEAD/public/home-slide-3.jpeg -------------------------------------------------------------------------------- /public/home-slide-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalcollegebr/projeto-digital-store/HEAD/public/home-slide-4.jpeg -------------------------------------------------------------------------------- /public/home-slide-5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalcollegebr/projeto-digital-store/HEAD/public/home-slide-5.jpeg -------------------------------------------------------------------------------- /public/home-slide-6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalcollegebr/projeto-digital-store/HEAD/public/home-slide-6.jpeg -------------------------------------------------------------------------------- /public/home-slide-7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalcollegebr/projeto-digital-store/HEAD/public/home-slide-7.jpeg -------------------------------------------------------------------------------- /public/home-slide-8.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalcollegebr/projeto-digital-store/HEAD/public/home-slide-8.jpeg -------------------------------------------------------------------------------- /doc/layout/filter-group.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalcollegebr/projeto-digital-store/HEAD/doc/layout/filter-group.png -------------------------------------------------------------------------------- /doc/layout/product-card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalcollegebr/projeto-digital-store/HEAD/doc/layout/product-card.png -------------------------------------------------------------------------------- /public/produc-image-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalcollegebr/projeto-digital-store/HEAD/public/produc-image-1.jpeg -------------------------------------------------------------------------------- /public/produc-image-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalcollegebr/projeto-digital-store/HEAD/public/produc-image-2.jpeg -------------------------------------------------------------------------------- /public/produc-image-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalcollegebr/projeto-digital-store/HEAD/public/produc-image-3.jpeg -------------------------------------------------------------------------------- /public/produc-image-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalcollegebr/projeto-digital-store/HEAD/public/produc-image-4.jpeg -------------------------------------------------------------------------------- /public/produc-image-5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalcollegebr/projeto-digital-store/HEAD/public/produc-image-5.jpeg -------------------------------------------------------------------------------- /public/product-thumb-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalcollegebr/projeto-digital-store/HEAD/public/product-thumb-1.jpeg -------------------------------------------------------------------------------- /public/product-thumb-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalcollegebr/projeto-digital-store/HEAD/public/product-thumb-2.jpeg -------------------------------------------------------------------------------- /public/product-thumb-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalcollegebr/projeto-digital-store/HEAD/public/product-thumb-3.jpeg -------------------------------------------------------------------------------- /public/product-thumb-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalcollegebr/projeto-digital-store/HEAD/public/product-thumb-4.jpeg -------------------------------------------------------------------------------- /public/product-thumb-5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalcollegebr/projeto-digital-store/HEAD/public/product-thumb-5.jpeg -------------------------------------------------------------------------------- /doc/layout/product-gallery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalcollegebr/projeto-digital-store/HEAD/doc/layout/product-gallery.png -------------------------------------------------------------------------------- /doc/layout/product-listing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalcollegebr/projeto-digital-store/HEAD/doc/layout/product-listing.png -------------------------------------------------------------------------------- /doc/layout/product-view-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalcollegebr/projeto-digital-store/HEAD/doc/layout/product-view-page.png -------------------------------------------------------------------------------- /doc/layout/product-listing-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalcollegebr/projeto-digital-store/HEAD/doc/layout/product-listing-page.png -------------------------------------------------------------------------------- /doc/layout/product-options-circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalcollegebr/projeto-digital-store/HEAD/doc/layout/product-options-circle.png -------------------------------------------------------------------------------- /doc/layout/product-options-square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalcollegebr/projeto-digital-store/HEAD/doc/layout/product-options-square.png -------------------------------------------------------------------------------- /assets/arrow-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/arrow-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /assets/star-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /assets/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/mini-cart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /assets/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /assets/logo-footer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /assets/logo-header.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 1 - Sugestão para estrutura de pastas 2 | 3 | - Com o objetivo de organizar o projeto estruture o projeto de modo que dentro da pasta "src" existam as pastas dos componentes chamada `components` e a pasta de paginas chamada `pages`. Na pasta `components` devem ser criados os componentes funcionais do projeto e na `pasta` page deve conter cada aba da pagina da loja `drip-store`, contendo somente a chamada dos componentes criados. Essa organização facilitará a criação de rotas dentro do arquivo `App.js`. 4 | 5 | ``` 6 | ├── src/ 7 | │ ├── compoments/ 8 | │ │ ├── Header 9 | │ │ ├── Footer 10 | │ │ ├── Logo 11 | │ │ ├── ProductListing 12 | │ │ ├── ProductCard 13 | │ │ ├── ProductOptions 14 | │ │ ├── BuyBox 15 | │ │ ├── Section 16 | │ │ ├── FilterGroup 17 | │ │ └── ProductDetails 18 | │ └── pages/ 19 | │ ├── HomePage 20 | │ ├── ProductViewPage 21 | │ └── ProductListingPage 22 | ├── App.js 23 | └── index.js 24 | 25 | ``` 26 | 27 | # 2 - Cores 28 | 29 | - primary **#C92071** 30 | - secondary **#B5B6F2** 31 | - tertiary **#991956** 32 | - error **#EE4266** 33 | - success **#52CA76** 34 | - warning **#F6AA1C** 35 | 36 | **Grayscale** 37 | - dark-gray **#1F1F1F** 38 | - dark-gray-2 **#474747** 39 | - dark-gray-3 **#666666** 40 | - light-gray **#8F8F8F** 41 | - light-gray-2 **#CCCCCC** 42 | - light-gray-3 **#F5F5F5** 43 | - white **#FFFFFF** 44 | 45 | 46 | # 3 - Layout 47 | 48 |
49 | Introdução 50 | 51 | - O layout é a aparência visual consistente em todas as páginas do sistema. Ele inclui partes que são iguais em todas as telas, como o cabeçalho (uma barra no topo da página) e o rodapé (uma área na parte inferior da página). 52 | 53 | - Para criar o layout, usamos componentes especiais como: o `
`, que representa o cabeçalho da página e contém elementos como o logo da aplicação; os links de navegação e; o `
88 | 89 |
90 | Requisitos 91 | 92 | ## 3.1 - Cabeçalho (`
`) 93 | 94 | ### 3.1.1 - Componente de Logo 95 | 96 | - Crie um componente `` em `src/components` capaz de renderizar a imagem da logomarca da aplicação. A imagem encontra-se na pasta `src/assets` e ela deverá ter o tamanho de 253 pixels de largura (width) e 44 pixels de altura (height). 97 | 98 | ### 3.1.2 - Campo de busca 99 | 100 | - Crie um campo de busca que realize o filtro de produtos da plataforma. O campo deve possuir um ícone de lupa ao lado direito e realizar a busca ao ser clicado ou ao pressionar `Enter`, redirecionando para a rota `/products` com a **query string** do filtro. 101 | 102 | Ex.: Se uma pessoa usuária escrever `microondas` no campo de busca, ao clicar no ícone de lupa do campo a página deve ser redirecionada para `/products?filter=microondas` 103 | 104 | ### 3.1.3 - Área de Redirecionamento 105 | 106 | Aréa de redirecionamento será um lugar no cabeçalho ao lado do compo de pesquisa que tem como objetivo redirecionar o usuário para as telas de login e cadastro. 107 | 108 | - Adicionamento um elemento html de link com o texto *Cadastre-se*. Esse elemento deve ser renderizado em uma fonte de 16px na cor `dark-gray-2` com uma sublinhado na mesma cor. 109 | - Adicionamento um elemento html de link *Entrar*. Esse elemento vai ter uma aparencia de "botão", com um preenchimento na cor `primary`, largura de 114px por 40px de altura, bordas arrendondadas em 4px e texto em negrito na cor `white` e font de 14px. 110 | 111 | ### 3.1.4 - Carrinho de compras 112 | 113 | O carrinho de compras será some um icone renderizado ao lado da area de redirecionamento, não tem ação de clique e pode ser usado o svg que se encontra no diretorio `src/assets` 114 | 115 | ### 3.1.5 - Navegação Principal 116 | 117 | - Crie um componente de navegação com 4 links para as principais páginas da plataforma (Home, Produtos, Categorias, Meus Pedidos). 118 | - Quando o usuário estiver na página correspondente ao link, ele deve ter uma coloração diferente e uma linha horizontal abaixo. 119 | 120 | Sugestão: Use o componente **NavLink** do `react-router-dom`. 121 | 122 | **Estrutura** 123 | ![](./doc/layout/header.png) 124 | 125 | ## 3.2 - Rodapé (`
166 | 167 | 168 | # 4 - Componentes compartilhados 169 | 170 |
171 | 172 | Introdução 173 | 174 | 175 | Componentes compartilhados são componentes onde serão utilizados em duas ou mais páginas. O objetivo destes componentes são de adicionar flexibilidade para atender as necessidades de diferentes páginas. 176 |
177 | 178 |
179 | 180 | Requisitos 181 | 182 | 183 | 184 | ## 4.1 Componente de seção 185 | 186 | Esse componente será criado para estabelecer um padrão nas seções que irão compor as páginas. 187 | 188 | Este componente será utilizado sempre que for necessário renderizar uma lista de produtos, de imagens, de ícones ou de qualquer outro conteúdo que precise possuir um título. 189 | 190 | 191 | - Criar um componente `
` em `src/components` 192 | - O componente deve ser capaz de renderizar um título em posições diferente, elementos filhos que podem ser passados entre as tags de abertura (`
`) e fechamento (`
`) e opcionalmente um link 193 | 194 | *Propriedades* 195 | - A propriedade`title` deve ser usada para renderizar o título (na cor `dark-gray-2` com uma fonte de 24px) 196 | - A propriedade `titleAlign` deve receber como valor "**left**" ou "**center**" e vai definir as duas posições possíveis para o titulo, se essa propriedade não for informada o título deve assumir o valor "**left**" como **posição padrão**. 197 | - A propriedade `link` deve ser usada para renderizar um link (na cor `primary` com uma fonte de 18px) do lado direito alinhado vertical com o título. O objeto passado para essa propriedade deve seguir o seguinte padrão 198 | ```json 199 | { 200 | "text": "Show More", 201 | "href": "https://redirect.link" 202 | } 203 | ``` 204 | - A propriedade `children` vai ter como valor todos os elementos filhos da tag `
` e deve ser usado para tornar esse componente mais dinâmico e reutilizável. 205 | 206 | **Estrutura** 207 | ![buybox](./doc/layout/section.png) 208 | 209 | 210 | ## 4.2 - Componente para cartão de produto 211 | 212 | Um componente para exibir informações principais sobre o produto como nome, preço e preço com desconto. 213 | 214 | 215 | - Criar um componente `` em `src/components` 216 | - O componente deve ser capaz de renderizar imagem, nome, preço e preço com desconto 217 | 218 | *Propriedades* 219 | - A propriedade `imagem` deve ser usada para renderizar a imagem do produto nas dimensões 292x321 pixels. 220 | - A propriedade `name` deve ser usada para renderizar o nome do produto logo abaixo da imagem 221 | - A propriedade `price` deve ser usada para renderizar o preço (na cor `dark-gray` com uma fonte de 24px) do produto logo abaixo do nome. 222 | - Se for propriedade `priceDiscount` for informada, a renderização de `price` deve ser alterada, exibindo um preço na cor `light-gray` e com linha cortando o preço 223 | - A propriedade `priceDiscount` deve ser usada para renderizar o preço com desconto (na cor `dark-gray` com uma fonte de 24px) 224 | 225 | **Estrutura** 226 | 227 | ![buybox](./doc/layout/product-card.png) 228 | 229 | 230 | ## 4.3 - Componente de listagem de produtos 231 | 232 | Esse componente atuará como um encapsulador (_wrap_), ou seja, um componente que acomodará todos os componentes `` dentro dele. 233 | 234 | - Criar componente `` em `src/components` 235 | - O componente deve ser capaz de receber um lista de produtos e renderizar usando o componente `` 236 | 237 | *Propriedades* 238 | - A propriedade `products` deve ser usada em um loop usando o componente `` para exibir uma lista de produtos 239 | - A propriedade `products` deve receber como valor um array de objetos seguindo o seguinte padrão 240 | ```json 241 | [ 242 | { 243 | name: "Nome do produto 1", 244 | image: "https://url.imagem/do/produto1.png", 245 | price: 200, 246 | priceDiscount: 149.9 247 | }, 248 | { 249 | name: "Nome do produto 2", 250 | image: "https://url.imagem/do/produto2.png", 251 | price: 49.9 252 | } 253 | ] 254 | ``` 255 | 256 | **Estrutura** 257 | ![buybox](./doc/layout/product-listing.png) 258 | 259 | 260 | ## 4.4 - Componente de Galeria de imagens 261 | 262 | Exemplo de slide carrossel. 263 | 264 | 265 | 266 | Neste componente as imagens serão exibidas mediante ao clique em icones de setas. 267 | 268 | O componente de galeria é uma forma de exibir uma série de itens em uma interface de usuário, permitindo que o usuário navegue entre eles de forma interativa. 269 | 270 | O componente de galleria deve receber uma lista de imagens e mais algumas propriedades opcionais para definir a renderização dessas imagens. 271 | Este componente vai sempre exibir um slide de imagens que passa para o lado mediante ao clique dos ícones para direita ou para esquerda. 272 | Opcionalmente esse componente renderizará _thumbnails_, que são miniaturas das imagens, na parte inferior do slide 273 | 274 | - Criar um componente `` em `src/components` 275 | - O componente poderá ter as seguintes propriedades: 276 | - `className` pode ser usado para passar nome de classes CSS para o elemento que estiver como pai de todos os outros elementos da galeria 277 | - `width` pode receber um valor em pixel para definir a largura que o slide de imagens deve ser renderizado. Exemplo: `` 278 | - `height` pode receber um valor em pixel para definir a altura que o slide de imagens deve ser renderizado. Exemplo: `` 279 | - `radius` deve receber uma strig indicando o valor em pixel do arredondamento das bordas da imagem. Exemplo: `` 280 | - `showThumbs` não recebe valor nenhum, quando essa propriedade existir, o componente deve exibir as imagens em miniaturas (com 117px de largura por 95px de altura) na parte inferior do slide de imagens. 281 | Caso a propriedade `showthumbs` não estiver presente, nenhuma miniatura das imagens deve ser exibida. 282 | O valor do atributo `radius` deve ser aplicado para arredondar as bordas das imagens em miniaturas. 283 | - `images` é a propriedade mais importante para o funcionamento desse componente. Essa propriedade deve receber como valor um array de objetos seguindo esse padrão 284 | ```json 285 | [ 286 | { "src": "http://site.com/path/to/image1.png" } 287 | { "src": "http://site.com/path/to/image2.png" } 288 | { "src": "http://site.com/path/to/image3.png" } 289 | { "src": "http://site.com/path/to/image4.png" } 290 | { "src": "http://site.com/path/to/image5.png" } 291 | ] 292 | ``` 293 | - Internamente o componente `` deve renderizar a primeira imagem recebida na propriedade `imagens` e as imagens seguintes devem ficar "escondidas" e ser exibidas somente quando clicar em umas das setas. 294 | - Fixo no lado direito e alinhado verticalmente, deve ser renderizado o ícone de seta para a direita que pode ser encontrado no caminho `assets/icons/arrow-right.svg` 295 | - Fixo no lado esquerdo e alinhado verticalmente, deve ser renderizado o ícone de seta para a esquerda que pode ser encontrado no caminho `assets/icons/arrow-left.svg` 296 | - Ao clicar na seta da direita, a imagem atual deve deslizar para a esquerda dando espaço para a próxima imagem ser renderizada 297 | - Ao clicar na seta da esquerda, a imagem atual deve deslizar para a direita dando espaço para a imagem anterior ser renderizada 298 | - Quando a primeira imagem estiver renderizada, a seta da esquerda deve ficar desabilitada 299 | - Quando a última imagem estiver renderizada, a seta da direita deve ficar desabilitada 300 | - Ao selecionar uma miniatura da galeria, a imagem em destaque deve ser alterada para exibir a imagem que está na miniatura 301 | - Uma borda de 2px na cor `primary` deve ser aplicada na miniatura que for selecionada 302 | 303 | **Estrutura da galeria de imagens exibida na home** 304 | ![buybox](./doc/layout/gallery.png) 305 | 306 | **Estrutura da galeria de imagens exibida na home** 307 | ![buybox](./doc/layout/product-gallery.png) 308 | 309 |
310 | 311 | 312 | # 5 . Página inicial 313 | 314 |
315 | 316 | Introdução 317 | 318 | 319 | A página inicial renderizará uma galeria de imagens, coleções em destaquee e produtos em alta. 320 | 321 |
322 | 323 | 324 |
325 | 326 | React Router DOM 327 | 328 | 329 | - Criar um componente `` em `src/pages` 330 | - Esse componente deve ser usado como `element` da rota `/` 331 | - Esse componente deve usar o componente `` para garantir a reutilização do header e do footer 332 | 333 |
334 | 335 |
336 | 337 | Requisitos 338 | 339 | 340 | ## 5.1 - Slide de imagens 341 | 342 | Aqui deve ser usado o componente `` visto anteriormente informando as seguintes propriedades 343 | 344 | - `images` recebe um array de objetos seguindo esse padrão 345 | ```json 346 | [ 347 | {"src": "public/home-slide-1.jpeg"} 348 | {"src": "public/home-slide-2.jpeg"} 349 | ... 350 | ] 351 | ``` 352 | No diretório `public` pode ser encontrado mais imagens para usar na galeria da home page 353 | - `width` recebe o valor 1440px 354 | - `height` recebe o valor 681px 355 | 356 | ## 5.2 - Coleções em destaque 357 | 358 | Usando o componente `
` deve ser renderizado 3 imagens na horizontal, com bordas arredondadas em 4px. 359 | Caminho para as imagens que deve ser usadas: 360 | - `public/collection-1.png` 361 | - `public/collection-2.png` 362 | - `public/collection-3.png` 363 | 364 | Para essa listagem de imagens deve ser usado elementos comum de HTML e CSS como filhos do componente `
` 365 | 366 | *Propriedades para o componente `
`* 367 | - `title` recebe o valor *Coleções em destaque* 368 | - `titleAlign` receber o valor *center* 369 | 370 | ## 5.3 - Produtos em alta 371 | 372 | Usando os componentes `
` e `` deve ser renderizado uma listagem de produto exibindo no total 8 produtos. 373 | 374 | *Propriedades de componente `
`* 375 | - `title` deve receber o valor *Produtos em alta* 376 | - `titleAlign` deve receber o valor *left* 377 | 378 | *Propriedades de componente ``* 379 | - `products` deve receber um array de objetos seguindo esse padrão 380 | ```json 381 | [ 382 | { 383 | name: "Nome do produto", 384 | image: "public/product-thumb-1.png", 385 | price: 200, 386 | priceDiscount: 149.9 387 | }, 388 | { 389 | name: "Nome do produto", 390 | image: "public/product-thumb-2.png", 391 | price: 49.9 392 | } 393 | ... 394 | ] 395 | ``` 396 | Mais imagens para a listagem de produtos podem ser encontradas no diretório `public` 397 | 398 | **Estrutura** 399 | ![home-page-layout](./doc/layout/home-page.png) 400 |
401 | 402 | 403 | # 6 - Página de listagem de produtos 404 | 405 |
406 | 407 | Introdução 408 | 409 | A página de listagem de produtos vai renderizar filtros e um lista de produtos, essa pagina vai ser o destino do campo de pesquisa e no menu *Produtos*. 410 | Nessa página o usuário vai poder visualizar todos os produtos e filtrar e ordenar o resultado de produtos marcando diferentes campos de seleção. 411 |
412 | 413 |
414 | 415 | React Router DOM 416 | 417 | 418 | - Criar um componente `` em `src/pages` 419 | - Esse componente deve ser usado como `element` da rota `/produtos` 420 | - Esse componente deve usar o componente `` para garantir a reutilização do header e do footer 421 |
422 | 423 |
424 | 425 | Requisitos 426 | 427 | 428 | ## 6.1 - Ordenar por 429 | 430 | Na lateral esquerda da página deve ser renderizado um campo (com 308px de largura e 60px de altura) de seleção para selecionar a ordem em que os produtos devem ser exibidos. 431 | A label desse campo ter renderizar o texto "Ordenar por" com uma fonte de 16px na cor `dark-gray-2` 432 | Esse campo de ordenação deve exibir as seguintes opções na cor `dark-gray-2` 433 | - `Menor preço` deve ordenar os produtos pelo preço mais barato 434 | - `Maior preço` deve ordenar os produtos pelo preço mais caro 435 | 436 | ## 6.2 - Filtrar por 437 | 438 | Ainda na lateral esquerda da página, deve ser renderizado um elemento com preenchimento na cor `white` com uma largura de 308px e uma altura de acordo com o conteúdo renderizado internamente. 439 | Esse elemento também deve ter um título com o texto "Filtrar por" com uma fonte de 16px e na cor `dark-gray-2` e um linha horizontal de 1px na cor `light-gray-2` separado o título do campo de filtro. 440 | 441 | **Campos de filtro** 442 | 443 | Os campos de filtro devem ser inputs (checkbox ou radio) renderizados na esquerda ao lado da label. Esse inputs devem ter 22px de largura e 22px de altura com um preenchimento na cor `primary` 444 | 445 | - Para os campos de filtro vai ser preciso criar um componente `` em `src/components` 446 | - Esse componente deve aceitar as seguintes propriedades 447 | - `title` deve receber como valor o título do grupo de filtros e renderizar com uma fonte de 14px na cor `dark-gray-2` 448 | - `inputType` deve receber como valor o tipo *checkbox* ou *radio* que separa repassado para o input dentro do componente 449 | - `options` deve receber como valor um array de objetos seguindo o seguinte padrão 450 | ```json 451 | [ 452 | {"text": "Options 1", "value": "opt1"} 453 | {"text": "Options 2"} 454 | {"text": "Options 3", "value": "opt3"} 455 | {"text": "Options 4"} 456 | ] 457 | ``` 458 | - O atributo `text` deve ser o conteúdo renderizado como label do input. 459 | - O atributo `values` é opcional e quando existir deve ser usado como *value* do input. 460 | 461 | *Layout do componente * 462 | ![filter-group-layout](./doc/layout/filter-group.png) 463 | 464 | ## 6.3 - listagem de produtos 465 | 466 | A lado do campos de filtro e ordenação deve aparecer uma lista de produtos usando os componentes `
` e `` 467 | 468 | *Propriedades para o componente `
`* 469 | 470 | - `title` deve receber como valor o total de produto encontrados e ir alterando de acordo com os filtro aplicados 471 | - `titleAlign` deve receber *left* como valor 472 | 473 | *Propriedades para o componente ``* 474 | 475 | - `products` deve receber como valor um array de objetos seguindo o seguinte padrão 476 | ```json 477 | [ 478 | { 479 | name: "Nome do produto 1", 480 | image: "public/product-thumb-1.png", 481 | price: 200, 482 | priceDiscount: 149.9 483 | }, 484 | { 485 | name: "Nome do produto 2", 486 | image: "public/product-thumb-2.png", 487 | price: 49.9 488 | } 489 | ] 490 | ``` 491 | Mais imagens para a listagem de produtos podem ser encontradas no diretório `public` 492 | 493 | **Estrtutura** 494 | ![home-page-layout](./doc/layout/product-listing-page.png) 495 |
496 | 497 | # 7 - Página de visualização do produto 498 | 499 |
500 | 501 | Introdução 502 | 503 | 504 | Essa página vai exibir informações sobre o produto como imagens, nome, preços, descrição, opções e um **call to action** com o botão COMPRAR. 505 | 506 | Também vai ser renderizado uma lista de produtos relacionados 507 |
508 | 509 |
510 | 511 | React Router DOM 512 | 513 | 514 | - Criar um componente `` em `src/pages` 515 | - Esse componente deve ser usado como `element` da rota `/product/:id` 516 | - Esse componente deve usar o componente `` para garantir a reutilização do header e do footer 517 | 518 |
519 | 520 |
521 | 522 | Requisitos 523 | 524 | 525 | ## 7.1 - Componente de galeria 526 | - Deve ser usado o componente `` passando as seguintes propriedade 527 | - `images` recebe o valor de um array de objetos 528 | ```json 529 | [ 530 | {"src": "public/product-image-1.png"}, 531 | {"src": "public/product-image-2.png"}, 532 | ... 533 | ] 534 | ``` 535 | Todas as imagens de exemplo para para usar na galeria de produtos podem ser encontradas na diretório `public` 536 | - `showThumbs` essa propriedade não recebe valor, precisa apenas existir na chamada do componente 537 | - `width` com o valor de `700px` 538 | - `height` com o valor de `570px` 539 | - `radius` com o valor de `4px` 540 | - Esse componente deve ficar ao lado do componente `` 541 | 542 | ## 7.2 - Componente de opções do produto 543 | 544 | Compone de opção do produto vai ser um componente usado como filho do componente `` para listar variações do produto como tamanhos e cores. 545 | 546 | - Criar um componente `` em `src/components` 547 | - Propriedades do componente 548 | - `options` recebe como valor um array listando as opções que devem ser renderizadas 549 | Exemplo 1: `["39", "41", "42" ... ]` 550 | Exemplo 2: `["#000", "#111", "#111" ... ]` 551 | - `radius` recebe uma string que define o valor do atributo `border-radius` quando `shape` tiver como valor `square`. Se o shape for `circle` essa propriedade deve ser ignorada 552 | - `shape` recebe como valor "square" ou "circle" 553 | - `square` deve exibir os itens do array `options` no formato de caixa com largura *alto* e 46px de altura e borda de 1px na cor `light-gray-2`. O valor do `border-radius` dessa caixa deve ser o valor informado na propriedade `radius` 554 | - `circle` deve exibir os itens do array `options` no formato de círculo com `31px` de largura e `31px` altura. 555 | - `type` recebe como valor "text" ou "color" 556 | - `text` deve exibir os itens do array `options` da forma como eles são informados, como um tamanho de fonte de 24px e cor `dark-gray-2` 557 | - `color` deve usar os itens do array `options` como preenchimento de cor do shape `square` ou `circle` 558 | - Ao selecionar qualquer uma das opções geradas pelo por esse componente, deve ser aplicado uma um borda na cor `pramary` com 2px de largura 559 | 560 | ## 7.3 - Componente Buy Box 561 | 562 | O buy box no contexto de loja virtual é um espaço usado para exibir informações claras e objetivas sobre o produto, facilitando assim o fluxo de compra. Geralmente usado em marketplace place para mostrar o melhor preço ou melhor vendedor, o buy box exibe informações como Nome do produto, preço, preço com desconto, valor do frete, avaliações, descrição e outras opções para o mesmo produto como cores e tamanhos. 563 | 564 | - Criar um componente `` em `src/components` 565 | - Esse componente deve ser capaz de exibir informações sobre o produto por meio das propriedade e dos elementos filhos 566 | - Propriedades do componente 567 | - `name` recebe o Nome do produto e rederiza com uma fonte de 32px na cor `dark-gray` 568 | - `reference` recebe o código de referência do produto e renderiza com uma fonte de 12px na cor `dark-gray-3` 569 | - `stars` recebe o total de estrelas que o produto recebeu e renderiza com uma fonte de 14px em um caixa com bordas arredondadas em 4px e preenchimento na cor `warning`. ao lado do número total de estrelas deve ser exibido um estrela que com um preenchimento `white`. O ícone de estrela pode ser encontrado o caminho `src/assets/star-icon.svg` 570 | - `rating` recebe o total de avaliações do produto e renderiza com uma fonte de 14px na cor `light-gray` 571 | - `price` recebe 572 | o preço original do produto (sem desconto) e renderiza com uma fonte de 32px na cor `dark-gray-2`. Se tiver preço com desconto na propriedade `priceDiscount` a renderização de `price` muda para ser exibido com uma fonte de 16px na cor `light-gray-2` com um linha da mesma cor cortando o preço e posicionado ao lado do `priceDiscount` 573 | - `priceDiscount` recebe o preço com desconto e renderiza com uma fonte de 32px na cor `dark-gray-2` ao lado do `price` cortado 574 | - `description` recebe a descrição do produto e renderiza com uma fonte de 14px na cor `dark-gray-2` 575 | - Propriedade `children` 576 | Um produto pode ter variações de cor e tamanho e nesse caso o ideal é passar um componente `` como filho. Outros componentes também podem ser informados como filhos. 577 | - Call to action 578 | - No final do buy box deve ter um botão comprar com um preenchimento na cor `warning` fonte na cor `white` com 16px 579 | 580 | ## 7.4 - Produtos recomendados 581 | 582 | Para exibir os produtos recomendados vai ser preciso usar dois componentes já explicados anteriormente. e `` 583 | 584 | - Usar componente `
` com as seguintes propriedades 585 | - `title` que recebe como valor "Produtos recomendados" 586 | - `titleAlign` que recebe como valor "left" 587 | - `link` que recebe como valor 588 | ```json 589 | { 590 | "text": "Ver todos", 591 | "href": "/products" 592 | } 593 | ``` 594 | Dentro do componente `
` deve ser passado como filho o componente `` com as seguintes propriedades 595 | 596 | - `products` que recebe como valor 597 | ```json 598 | [ 599 | { 600 | name: "Nome do produto 1", 601 | image: "https://url.imagem/do/produto1.png", 602 | price: 200, 603 | priceDiscount: 149.9 604 | }, 605 | { 606 | name: "Nome do produto 2", 607 | image: "https://url.imagem/do/produto2.png", 608 | price: 49.9 609 | } 610 | ] 611 | ``` 612 | 613 | **Estrutura** 614 | ![layout-product-view-page](./doc/layout/product-view-page.png) 615 |
616 | 617 | 618 | --------------------------------------------------------------------------------