Merge branch 'Green-Cycle:main' into main

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,19 +28,23 @@
 .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 {
   display: flex;
   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 {

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 {

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.