diff --git a/src/App.tsx b/src/App.tsx index fcf82d5..8ad0e4b 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 Footer from "./components/Footer"; import Home from "./pages/Home"; import Institutional from "./pages/Institutional"; @@ -19,6 +20,7 @@ const router = createBrowserRouter([ function App() { return (
+
diff --git a/src/assets/cart.svg b/src/assets/cart.svg new file mode 100644 index 0000000..645fdb3 --- /dev/null +++ b/src/assets/cart.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/logoM3.png b/src/assets/logoM3.png new file mode 100644 index 0000000..8c273bf Binary files /dev/null and b/src/assets/logoM3.png differ diff --git a/src/assets/lupa.svg b/src/assets/lupa.svg new file mode 100644 index 0000000..9f9b9f0 --- /dev/null +++ b/src/assets/lupa.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx new file mode 100644 index 0000000..5450cc0 --- /dev/null +++ b/src/components/Header/index.tsx @@ -0,0 +1,26 @@ +import styles from "./styles.module.scss"; +import Logo from "../../assets/logoM3.png"; +import Lupa from "../../assets/lupa.svg"; +import Cart from "../../assets/cart.svg"; + +export default function Header() { + return ( + <> +
+
+ logo m3 +
+ + lupa +
+
+ + +
+
+
+ + ); +} diff --git a/src/components/Header/styles.module.scss b/src/components/Header/styles.module.scss new file mode 100644 index 0000000..1e397a6 --- /dev/null +++ b/src/components/Header/styles.module.scss @@ -0,0 +1,62 @@ +.Header { + background: black; + padding: 22px 0; + color: white; + .firstDiv { + display: flex; + align-items: center; + justify-content: space-between; + .searchDiv { + input { + padding-left: 16px; + font-size: 14px; + height: 32px; + border-radius: 5px; + border: 2px solid #f2f2f2; + width: 100%; + } + width: 20.63vw; + position: relative; + display: flex; + img { + padding: 7px 0px; + display: flex; + width: 1.41vw; + position: absolute; + right: 20px; + } + } + .headerButton { + display: flex; + gap: 55px; + padding-right: 7.81vw; + height: 28px; + .buttonEntrar { + 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; + } + .cartButton { + img { + display: flex; + height: 28px; + } + background: black; + height: 28px; + border: 0; + } + } + .logo { + display: flex; + // padding-left: 7.81vw; + padding: 5px 0 7px 7.81vw; + } + } +}