Feat: Adiciona o HeaderBottom e o estilo do HeaderBottom

my-app/src/assets/svgs/Search.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.2094 11.6186C14.0951 10.409 14.6249 8.92328 14.6249 7.31261C14.6249 3.28064 11.3444 0.00012207 7.31245 0.00012207C3.28048 0.00012207 0 3.28064 0 7.31261C0 11.3446 3.28052 14.6251 7.31248 14.6251C8.92315 14.6251 10.409 14.0952 11.6186 13.2094L16.4092 18L18 16.4092C18 16.4092 13.2094 11.6186 13.2094 11.6186ZM7.31248 12.3751C4.52086 12.3751 2.25001 10.1042 2.25001 7.31261C2.25001 4.52098 4.52086 2.25013 7.31248 2.25013C10.1041 2.25013 12.375 4.52098 12.375 7.31261C12.375 10.1042 10.1041 12.3751 7.31248 12.3751Z" fill="#303030"/>
+</svg>

my-app/src/components/Header/Header.modules.scss

@@ -20,9 +20,11 @@
     height: 32px;
     display: flex;
     align-items: center;
-    padding-left: 16px;
+    justify-content: space-between;
+    padding: 7px 16px;
 }
 .SearchInput{
+    width: 100%;
     border: none;
     color: #C6C6C6;
     font-family: 'Roboto';
@@ -31,14 +33,22 @@
     font-size: 14px;
     line-height: 16px;
     &:focus{
-        border: none;
+        color: #000;
+        outline: none;
     }
 }
+.LoginAndCart{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
 .loginlink{
     text-decoration: none;
     color: #FFFFFF;
     margin-right: 55px;
+    width: 100%;
 }
 .carticon{
-    align-items: center;
+    width: 100%;
 }

my-app/src/components/Header/Header.tsx

@@ -1,19 +1,21 @@
 // import { NavLink } from "react-router-dom"
 import Logo from "../../assets/svgs/Logo.svg";
 import Cart from "../../assets/svgs/Cart.svg"
+import Search from "../../assets/svgs/Search.svg"
 
 import './Header.modules.scss'
 
 const Header = () => {
   return (
     <section className="Header">
-      <div>
+      <div className="logo">
           <a href="/"><img src={Logo} alt="LogoM3" className="academylogo"/></a>
       </div>
       <div className="SearchBar">
         <input className="SearchInput" placeholder="Buscar..." />
+        <a href="/" className="searchLink"><img src={Search} alt="SearchButton" className="searchImg"/></a>
       </div>
-      <div>
+      <div className="LoginAndCart">
         <a href="/" className="loginlink">ENTRAR</a>
         <span>
         <a href="/"><img src={Cart} alt="CartIcon" /></a>

my-app/src/components/HeaderBottom/HeaderBottom.modules.scss

@@ -0,0 +1,17 @@
+.headerBottom{
+    background-color: #000;
+    display: flex;
+}
+.headerUl{
+    display: flex;
+    flex-direction: row;
+    gap: 55px;
+}
+.headerItem{
+    color: #fff;
+    list-style-type: none;
+}
+.headerA{
+    color: #fff;
+    text-decoration: none;
+}

my-app/src/components/HeaderBottom/HeaderBottom.tsx

@@ -0,0 +1,17 @@
+import './HeaderBottom.modules.scss'
+
+const HeaderBottom = () => {
+    return (
+      <section className="headerBottom">
+        <div>
+            <ul className='headerUl'>
+                <li className='headerItem'><a href="/" className='headerA'>CURSOS</a></li>
+                <li className='headerItem'><a href="/" className='headerA'>SAIBA MAIS</a></li>
+                <li className='headerItem'><a href="/" className='headerA'>INSTITUCIONAIS</a></li>
+            </ul>
+        </div>
+      </section>
+    )
+  }
+
+  export {HeaderBottom}

my-app/src/pages/Home.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import {Header} from "../components/Header/Header"
+import{HeaderBottom} from "../components/HeaderBottom/HeaderBottom"
 
 function App() {
   return (
     <div className="App">
       <Header />
+      <HeaderBottom />
     </div>
   );
 }