diff --git a/Frontend/src/components/Header.css b/Frontend/src/components/Header.css index d32faba..2236037 100644 --- a/Frontend/src/components/Header.css +++ b/Frontend/src/components/Header.css @@ -6,14 +6,14 @@ margin-top: 3rem; display: flex; justify-content: space-between; + flex-direction: column; align-items: center; padding-inline: 1.5rem; padding-bottom: 3rem; } .header__logo { - position: absolute; - left: calc(50vw - 118px); + position: static; } .account-icon { @@ -28,12 +28,15 @@ .header__icons { display: flex; align-items: center; + padding-top: 16px; + gap: 24px; } .header__corner-menu { display: flex; gap: 24px; align-items: center; + margin: auto; } .header__login-box { @@ -41,6 +44,7 @@ align-items: center; justify-content: space-around; flex-direction: column; + margin: auto; } .header__login-button { @@ -68,15 +72,19 @@ } .header__hamburguer { - display: none; + display: flex; + padding-top: 0; } .header__menu { display: none; } -.header__user-button { - margin-left: 24px; +.header__menu_open { + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; } .header__line { @@ -141,48 +149,55 @@ align-items: center; } -@media screen and (max-width: 880px) { +.header__user-button { + margin: 0; +} + +.header input { + padding-bottom: 10px; +} + +@media screen and (min-width: 880px) { .header__hamburguer { - display: flex; + display: none; } .header__hamburger { - padding-top: 10px; + padding-top: 0; + } + .header__user-button { + margin-left: 24px; } .header__menu_open { - display: flex; - justify-content: center; - flex-direction: column; - align-items: center; + display: none; } .header__logo { - position: static; + position: absolute; + left: calc(50vw - 118px); } .header__icons { - gap: 24px; - } - - .header__user-button { - margin: 0; + gap: 0 !important; } } -@media screen and (max-width: 580px) { +@media screen and (min-width: 580px) { .header__top { - flex-direction: column; + flex-direction: row; } + .header__hamburger { + padding-top: 0; + } .header__icons { - padding-top: 16px; - display: flex; - align-items: center; + padding-top: 0; + gap: 24px; } .header__login-box { - margin: auto; + margin: 0; } .header__corner-menu { diff --git a/Frontend/src/pages/Sobre.css b/Frontend/src/pages/Sobre.css index f43bd9b..f6d8384 100644 --- a/Frontend/src/pages/Sobre.css +++ b/Frontend/src/pages/Sobre.css @@ -37,10 +37,15 @@ margin: 0; padding-bottom: 1rem; } +.sobre__main-box { + display: flex; + flex-direction: column; + align-items: center; +} .sobre__main-container { display: grid; - padding: 2rem; + padding: 1rem; grid-template-areas: 'vasos' 'paragraph1' @@ -78,8 +83,6 @@ background-size: cover; } .sobre__main-box { - display: flex; - flex-direction: column; padding-top: 96px; } .sobre__main-container { diff --git a/README.md b/README.md index 81bb9c5..7e87ab7 100644 --- a/README.md +++ b/README.md @@ -7,3 +7,29 @@ Além disso, seguimos a metodologia BEM (Block, Element, Modifier) para garantir Para isso, aproveitamos o hook useContext do React, que nos permitiu compartilhar dados e funcionalidades entre componentes sem a necessidade de passar props manualmente. Além disso, utilizamos o hook useState para controlar o estado local de certos componentes, como a abertura e o fechamento de popups e menus. Isso nos proporcionou uma maneira simples e eficaz de lidar com a interatividade da interface do usuário. No backend, construímos rotas, modelos e controladores para lidar com usuários e produtos. Usando o conceito de API RESTful, garantimos uma comunicação eficiente entre o front-end e o back-end. As rotas foram implementadas para realizar operações CRUD (Create, Read, Update, Delete) nos modelos de usuário e produto. Para conectar o front-end ao back-end, utilizamos o fetch API. + +# Como usar o site + +Bem-vindo ao Marketplace de GreenCycle! Abaixo estão algumas instruções para você começar a explorar e utilizar nosso site: + +1. **Navegação**: + - Acesse o site em [aqui](https://green-cycle.netlify.app). + - Utilize o menu de navegação para explorar as diferentes páginas disponíveis. + +2. **Registro/Login**: + - Se é a sua primeira vez aqui, clique em "Crie sua conta" para criar uma conta. + - Se você já é um membro, basta clicar em "Login" para acessar sua conta. + +3. **Busca e Compra**: + - Utilize a barra de busca para encontrar produtos específicos ou navegue pelas categorias para descobrir novas opções. + - Ao encontrar um produto que deseja comprar, clique no icone de "+" para adicioná-lo direto à sacola ou clique nele para ver mais detalhes e, em seguida, clique em "Adicionar ao carrinho" para iniciar o processo de compra. + +4. **Carrinho e Checkout**: + - Acesse sua sacola de compras clicando no ícone de sacola de compras no canto superior direito da página. + - Caso possua cumpom de desconto, vocÊ pode inseri-lo no campo "cupom de desconto" e aplicá-lo clicando em "aplicar". + - Revise os itens em seu carrinho e clique em "Finalizar Compra" para prosseguir para o processo de checkout. + +5. **Suporte**: + - Se você tiver alguma dúvida sobre um produto ou encontrar algum problema durante o processo de compra, entre em contato conosco clicando no icone de contato presente na barra de navegação de nosso site. + +Esperamos que estas instruções facilitem sua experiência ao usar o GreenCycle. Para mais informações sobre o site, consulte a seção "Sobre" do site.