diff --git a/src/components/HeaderTop/HeaderTop.module.scss b/src/components/HeaderTop/HeaderTop.module.scss new file mode 100644 index 0000000..776ddb1 --- /dev/null +++ b/src/components/HeaderTop/HeaderTop.module.scss @@ -0,0 +1,185 @@ +@use '../../variables'; + +.header-top { + border-bottom: 1px solid variables.$gray-400; + + @media (max-width: 1024px) { + border-bottom: none; + } + + &__wrapper { + display: grid; + grid-template-columns: 1fr minmax(264px, 24.4445%) 1fr; + padding: 22px 100px; + height: 76px; + + @media (min-width: 3600px) { + grid-template-columns: 1fr 700px 1fr; + height: 111px; + } + + @media ((min-width: 2500px) and (max-width: 3599px)) { + grid-template-columns: 1fr 515px 1fr; + height: 101px; + } + + @media ((min-width: 1900px) and (max-width: 2499px)) { + grid-template-columns: 1fr 415px 1fr; + } + } + + &__logo { + display: flex; + align-items: center; + justify-content: left; + + @media (max-width: 1024px) { + justify-content: center; + grid-area: 1/2; + } + + &__img { + width: 100%; + max-width: 136px; + + @media (min-width: 3600px) { + min-width: 290px; + } + + @media ((min-width: 2500px) and (max-width: 3599px)) { + min-width: 265px; + } + } + } + + &__search-bar { + display: flex; + justify-content: center; + align-items: center; + position: relative; + + &__input { + margin: 0 auto; + width: 100%; + min-width: 264px; + height: 32px; + background-color: variables.$white; + border: 2px solid variables.$gray-500; + border-radius: 5px; + padding: 12px 16px; + font-size: 14px; + line-height: 16px; + color: variables.$gray-300; + + @media (min-width: 3600px) { + max-width: 700px; + height: 62px; + font-size: 32px; + line-height: 38px; + } + + @media ((min-width: 2500px) and (max-width: 3599px)) { + max-width: 515px; + height: 57px; + font-size: 28px; + line-height: 33px; + } + + @media ((min-width: 1900px) and (max-width: 2499px)){ + max-width: 415px; + } + + &::placeholder { + font-size: 14px; + line-height: 16px; + color: variables.$gray-300; + + @media (min-width: 3600px) { + font-size: 32px; + line-height: 38px; + } + + @media ((min-width: 2500px) and (max-width: 3599px)) { + font-size: 28px; + line-height: 33px; + } + } + + &::-webkit-search-cancel-button { + -webkit-appearance: none; + } + } + + &__btn { + border: none; + background: transparent; + position: absolute; + top: 7px; + right: 16px; + + @media (min-width: 3600px) { + top: 16px; + bottom: 11px; + } + + @media ((min-width: 2500px) and (max-width: 3599px)){ + top: 11px; + bottom: 11px; + } + + &__img { + + @media (min-width: 2500px) { + width: 100%; + min-width: 35px; + } + } + } + } + + &__menu { + display: flex; + align-items: center; + justify-content: right; + gap: 55px; + + &__login { + color: variables.$white; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + + &:hover { + filter: brightness(80%); + } + + @media (min-width: 3600px) { + font-size: 32px; + line-height: 38px; + } + + @media ((min-width: 2500px) and (max-width: 3599px)) { + font-size: 28px; + line-height: 33px; + } + } + + &__btn-cart { + background: transparent; + border: none; + + &:hover { + filter: brightness(80%); + } + + &__img { + width: 100%; + max-width: 28px; + + @media (min-width: 2500px) { + min-width: 54px; + } + } + } + } +} diff --git a/src/components/HeaderTop/HeaderTop.tsx b/src/components/HeaderTop/HeaderTop.tsx new file mode 100644 index 0000000..bc75130 --- /dev/null +++ b/src/components/HeaderTop/HeaderTop.tsx @@ -0,0 +1,56 @@ +import {useState} from 'react'; + +import styles from "./HeaderTop.module.scss"; + +import imgLogo from "./assets/logo-m3academy.png"; +import imgCart from "./assets/cart.svg"; +import imgSearch from "./assets/search.svg"; + +const HeaderTop = () => { + + const [search, setSearch] = useState(""); + + const handleSearch = ({target}:any) =>{ + setSearch(target.value); + } + + const cleanSearch = () => setSearch(''); + + return ( +
+
+ + + + Logo M3 Academy + + + +
+ + + +
+ +
+ + Entrar + + + +
+
+
+ ); +} + +export {HeaderTop}; diff --git a/src/components/HeaderTop/assets/cart.svg b/src/components/HeaderTop/assets/cart.svg new file mode 100644 index 0000000..78ac70f --- /dev/null +++ b/src/components/HeaderTop/assets/cart.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/components/HeaderTop/assets/hamburger-menu-btn-icon.svg b/src/components/HeaderTop/assets/hamburger-menu-btn-icon.svg new file mode 100644 index 0000000..6cadeb3 --- /dev/null +++ b/src/components/HeaderTop/assets/hamburger-menu-btn-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/HeaderTop/assets/logo-m3academy.png b/src/components/HeaderTop/assets/logo-m3academy.png new file mode 100644 index 0000000..7f6b6ad Binary files /dev/null and b/src/components/HeaderTop/assets/logo-m3academy.png differ diff --git a/src/components/HeaderTop/assets/search.svg b/src/components/HeaderTop/assets/search.svg new file mode 100644 index 0000000..6619486 --- /dev/null +++ b/src/components/HeaderTop/assets/search.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/pages/Home.module.scss b/src/pages/Home.module.scss new file mode 100644 index 0000000..6fc04aa --- /dev/null +++ b/src/pages/Home.module.scss @@ -0,0 +1,14 @@ +@use '../variables'; + +.header { + background-color: variables.$black; + height: 120px; + + @media (min-width: 3600px) { + height: 182px; + } + + @media ((min-width: 2500px) and (max-width: 3599px)) { + height: 162px; + } +} \ No newline at end of file diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index cd6761d..18e007d 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,11 +1,19 @@ import React from 'react'; +import styles from "./Home.module.scss"; + +import { HeaderTop } from '../components/HeaderTop/HeaderTop'; + const Home = () => { return ( <> -
+
+ +
+
+ );