diff --git a/src/App.tsx b/src/App.tsx
index df4fc67..87ab44a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,7 @@
import React from "react";
import "./App.css";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import Header from "./components/Header";
import Home from "./components/Home";
import Institutional from "./components/Institutional";
import Footer from "./components/Footer";
@@ -19,6 +20,7 @@ const router = createBrowserRouter([
function App() {
return (
+
diff --git a/src/assets/svg/M3logo.svg b/src/assets/svg/M3logo.svg
new file mode 100644
index 0000000..d99b1a9
--- /dev/null
+++ b/src/assets/svg/M3logo.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/assets/svg/cart.svg b/src/assets/svg/cart.svg
new file mode 100644
index 0000000..fd775ad
--- /dev/null
+++ b/src/assets/svg/cart.svg
@@ -0,0 +1,12 @@
+
diff --git a/src/assets/svg/lupa.svg b/src/assets/svg/lupa.svg
new file mode 100644
index 0000000..97e3b05
--- /dev/null
+++ b/src/assets/svg/lupa.svg
@@ -0,0 +1,10 @@
+
diff --git a/src/components/Footer/styles.module.scss b/src/components/Footer/styles.module.scss
index a6a897a..fc5e217 100644
--- a/src/components/Footer/styles.module.scss
+++ b/src/components/Footer/styles.module.scss
@@ -224,7 +224,7 @@
}
}
-@media screen and (max-width: 1279px) {
+@media screen and (max-width: 1024px) {
.footer_bottom {
flex-direction: column;
align-items: flex-start;
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
new file mode 100644
index 0000000..2bbf376
--- /dev/null
+++ b/src/components/Header/index.tsx
@@ -0,0 +1,35 @@
+import styles from "./styles.module.scss";
+import M3Logo from "../../assets/svg/M3logo.svg";
+import Lupa from "../../assets/svg/lupa.svg";
+import Cart from "../../assets/svg/cart.svg";
+
+export default function Header() {
+ return (
+ <>
+
+ >
+ );
+}
diff --git a/src/components/Header/styles.module.scss b/src/components/Header/styles.module.scss
new file mode 100644
index 0000000..ab71d1c
--- /dev/null
+++ b/src/components/Header/styles.module.scss
@@ -0,0 +1,99 @@
+// --------------------- Header Top --------------------- //
+
+.header_top {
+ background: black;
+ padding: 22px 0;
+ color: white;
+
+ .first_div {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .search {
+ width: 20.63vw;
+ background: white;
+ border-radius: 5px;
+ border: 2px solid #f2f2f2;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 3.79%;
+
+ input {
+ display: flex;
+ font-size: 14px;
+ height: 32px;
+ border: 0;
+ width: 77.27%;
+ }
+
+ img {
+ cursor: pointer;
+ display: flex;
+ // width: 1.41vw;
+ position: relative;
+ }
+ }
+
+ .header_button {
+ display: flex;
+ gap: 55px;
+ padding-right: 7.81vw;
+ height: 28px;
+
+ .button_entrar {
+ cursor: pointer;
+ justify-content: center;
+ text-transform: uppercase;
+ align-items: center;
+ display: flex;
+ font-weight: 400;
+ font-size: 14px;
+ color: white;
+ background: black;
+ height: 28px;
+ border: 0;
+ }
+
+ .cart_button {
+ cursor: pointer;
+ background: black;
+ height: 28px;
+ border: 0;
+
+ img {
+ display: flex;
+ height: 28px;
+ }
+ }
+ }
+
+ .m3_logo {
+ display: flex;
+ padding-left: 7.81vw;
+ }
+ }
+}
+
+// --------------------- Header Bottom --------------------- //
+
+.header_bottom {
+ background: black;
+ margin-top: 1px;
+ display: flex;
+ flex-direction: row;
+ padding: 14px 0 14px 7.81vw;
+ gap: 55px;
+
+ .header_bottom_button {
+ background: black;
+ color: white;
+ border: 0;
+ text-transform: uppercase;
+ font-weight: 500;
+ font-size: 14px;
+ cursor: pointer;
+ }
+}
diff --git a/src/components/Institutional/index.tsx b/src/components/Institutional/index.tsx
index 69a3c69..87723ad 100644
--- a/src/components/Institutional/index.tsx
+++ b/src/components/Institutional/index.tsx
@@ -1,3 +1,3 @@
export default function Institutional() {
- return bastente sexo
;
+ return teste 2
;
}