Merge branch 'main' of https://github.com/unb-mds/LicitaBSB-24.1 into…

… feat-Implementando-funcionalidades-Filter

frontend/src/components/carrosel/index.jsx

@@ -0,0 +1,3 @@
+import React from 'react';
+import style from '../carrosel/style.module.css'
+

frontend/src/components/footer/index.jsx

@@ -16,19 +16,24 @@ const Footer = () => {
           </Link>
           <ul>
             <li>
-              <Link to={'/licitacoes'}>
-                <p>Licitações</p>
-              </Link>
+              <a href="/licitacoes" onClick={() => setShowSidebar((prev) => !prev)}>
+                Licitações
+              </a>
+            </li>
+            <li>
+              <a href="/artigos" onClick={() => setShowSidebar((prev) => !prev)}>
+                Conheça o Projeto
+              </a>
             </li>
             <li>
-              <Link to={'/sobrenos'}>
-                <p>Sobre a Equipe</p>
-              </Link>
+              <a href="/sobrenos" onClick={() => setShowSidebar((prev) => !prev)}>
+                Sobre Nós
+              </a>
             </li>
             <li>
-              <Link to={'/dashboard'}>
-                <p>Dashboard</p>
-              </Link>
+              <a href="/dashboard" onClick={() => setShowSidebar((prev) => !prev)}>
+                Dashboard
+              </a>
             </li>
             <li>
               <p>

frontend/src/components/footer/style.module.css

@@ -59,6 +59,9 @@
     }
     li a {
       text-decoration: none;
+      font-size: 18px;
+      color: #e9e4df;
+      font-weight: 600;
     }
   }
   @media (max-width: 740px) {

frontend/src/components/header/index.jsx

@@ -2,12 +2,15 @@ import React, { useState } from 'react';
 import logo from '../../../assets/logo.png';
 import unb from '../../../assets/unb.png';
 import search from '../../../assets/Search.svg';
+import menuBurger from '../../../assets/burger.svg';
 import styles from './style.module.css';
 import { useNavigate } from 'react-router-dom';
+import SidebarResponsive from '../sidebar-responsive';
 
 const Header = () => {
   const navigate = useNavigate();
   const [input, setInput] = useState('');
+  const [showSidebar, setShowSidebar] = useState(false);
 
   function handdleChange(e) {
     setInput(e.target.value);
@@ -24,6 +27,7 @@ const Header = () => {
 
   return (
     <div className={styles.headerWrapper}>
+      <SidebarResponsive showSidebar={showSidebar} setShowSidebar={setShowSidebar}/>
       <div className={styles.headerUnb}>
         <img src={unb} alt="Logo da Universidade de brasília" />
       </div>
@@ -52,12 +56,23 @@ const Header = () => {
               </a>
             </li>
             <li className={styles.headerListItem}>
-              <a href="/dashboard" className={styles.headerLink}>
-                Dashboard
+              <a href="/graficos" className={styles.headerLink}>
+                Gráficos
               </a>
             </li>
           </ul>
           <div>
+            <div className={styles.responsiveCampoPesquisa}>
+              <a href="/licitacoes" style={{display: 'flex', alignItems: 'center'}}>
+                <img
+                  src={search}
+                />
+              </a>
+              <img
+                src={menuBurger}
+                onClick={() => setShowSidebar((prev) => !prev)}
+              />
+            </div>
             <div className={styles.campoPesquisa}>
               <button
                 className={styles.botaoPesquisa}
@@ -82,23 +97,8 @@ const Header = () => {
             </a>
           </li>
           <li className={styles.headerListItem}>
-            <a href="/SobreLicitacao" className={styles.headerLink}>
-              Sobre as Licitações
-            </a>
-          </li>
-          <li className={styles.headerListItem}>
-            <a href="/sobredispensadelicitacao" className={styles.headerLink}>
-              Sobre Dispensas
-            </a>
-          </li>
-          <li className={styles.headerListItem}>
-            <a href="/sobrebot" className={styles.headerLink}>
-              Sobre o Bot
-            </a>
-          </li>
-          <li className={styles.headerListItem}>
-            <a href="" className={styles.headerLink}>
-              Sobre o Projeto
+            <a href="/artigos" className={styles.headerLink}>
+              Conheça o Projeto
             </a>
           </li>
           <li className={styles.headerListItem}>
@@ -107,8 +107,8 @@ const Header = () => {
             </a>
           </li>
           <li className={styles.headerListItem}>
-            <a href="/dashboard" className={styles.headerLink}>
-              Dashboard
+            <a href="/graficos" className={styles.headerLink}>
+              Gráficos
             </a>
           </li>
         </ul>

frontend/src/components/header/style.module.css

@@ -90,15 +90,15 @@
   outline: none;
 }
 
+.responsiveCampoPesquisa {
+  display: none;
+}
+
 /* Estilos Responsivos */
 @media (max-width: 720px) {
-  body, html {
-    overflow-x: hidden;
-  }
-
   .subHeader {
-    justify-content: center;
-    padding: 0 16px; /* Ajuste para evitar overflow */
+    justify-content: space-between;
+    padding: 0 26px;
   }
 
   .headerLinksWrapper {
@@ -108,9 +108,19 @@
   .campoPesquisa {
     display: none;
   }
+
+  .responsiveCampoPesquisa {
+    display: flex;
+    gap: 16px;
+  }
 }
 
 @media (min-width: 720px) and (max-width: 1700px){
+  .subHeader {
+    justify-content: space-between;
+    padding: 0 20%;
+  }
+
   .subHeaderWrapper {
     justify-content: center;
   }

frontend/src/components/newsletter/index.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import axios from 'axios';
-import style from '../newsletter/style.module.css';
+import style from '../newsletter/style.module.css'
+import amicoImage from './amico.png';
 
 const SubscribeForm = () => {
   const [email, setEmail] = useState('');
@@ -30,15 +31,25 @@ const SubscribeForm = () => {
   return (
     <form onSubmit={handleSubmit}>
       <div className={style.newsletter}>
-        <h1>Se inscreva para receber atualizações sobre futuras licitações!</h1>
-        <label>Email:</label>
-        <input
-          type="email"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          required
-        />
-        <button type="submit">Subscribe</button>
+      <div>
+      <div className={style['newsletter-text']}>
+            <h1>Receba as mais recentes licitações diretamente no seu e-mail</h1>
+            <h2>Se você deseja receber no seu melhor email as licitações mais recentes do Distrito Federal, cadastre seu email no LicitaBSB abaixo:</h2>
+        </div>
+        <div className={style['newsletter-form']}>
+            <input
+                placeholder="Digite seu email aqui."
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+            />
+            <button type="submit">Enviar</button>
+        </div>
+        </div>
+        <div className={style['newsletter-image']}>
+            <img src={amicoImage}/>
+        </div>
       </div>
       {message && <p>{message}</p>}
     </form>

frontend/src/components/newsletter/style.module.css

@@ -1,31 +1,78 @@
-.newsletter{
+.newsletter {
     display: flex;
+    flex-direction: row;
     align-items: center;
-    justify-content: center;
-    text-align: center;
-    flex-direction: column;
-    gap: 10px;
-    padding-top: 100px;
+    justify-content: space-between;
+    gap: 20px;
+    padding: 30px; 
+    background-color: #F1ECE8; 
+    border-radius: 10px;
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+
 }
 
-.newsletter h1{
-    font-size: 20px;
+.newsletter h1 {
+    font-size: 24px;
     font-weight: bold;
+    margin: 0;
+    color: #333; 
 }
 
-.newsletter button{
-    background-color: transparent;
-    border: 1px solid black;
-    border-radius: 3px;
-    padding: 5px;
-    cursor: pointer;
+.newsletter h2 {
+    font-size: 16px;
+    margin-top: 10px;
+    line-height: 1.5;
+    color: #333; 
+    max-width: 60%; 
+}
+
+.newsletter-form {
+    display: flex;
+    flex-direction: column; 
+    align-items: flex-start; 
+    gap: 10px; 
+    width: 100%; 
 }
 
-.newsletter input{
-    border-top: none;
-    border-left: none;
-    border-right: none;
-    border-bottom: 2px solid black;
-    width: 300px;
+.newsletter input {
+    border: 1px solid #333; 
+    border-radius: 5px;
+    width: 582px; 
+    height: 48px;
     outline: none;
-}
+    padding: 10px;
+    box-sizing: border-box;
+    font-size: 16px;
+}
+
+.newsletter button {
+    background-color: #333;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    padding: 10px 20px;
+    height: 48px; 
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    font-size: 16px;
+    width: 203px; 
+}
+
+.newsletter button:hover {
+    background-color: #555; 
+}
+
+.newsletter-image {
+    flex: 1;
+    display: flex;
+    justify-content: flex-end; 
+    align-items: center; 
+    padding: 0; 
+}
+
+.newsletter img {
+    width: 351px; 
+    height: 309px; 
+    object-fit: cover;
+    border-radius: 10px;
+}