diff --git a/desafio/public/index.html b/desafio/public/index.html index 0eb6c96..26cf292 100644 --- a/desafio/public/index.html +++ b/desafio/public/index.html @@ -8,6 +8,8 @@ name="description" content="Web site created using create-react-app" /> + + + React App diff --git a/desafio/src/assets/imgs/Boleto.png b/desafio/src/assets/imgs/Boleto.png new file mode 100644 index 0000000..9fd5966 Binary files /dev/null and b/desafio/src/assets/imgs/Boleto.png differ diff --git a/desafio/src/assets/imgs/CardAmex.png b/desafio/src/assets/imgs/CardAmex.png new file mode 100644 index 0000000..16d4487 Binary files /dev/null and b/desafio/src/assets/imgs/CardAmex.png differ diff --git a/desafio/src/assets/imgs/CardElo.png b/desafio/src/assets/imgs/CardElo.png new file mode 100644 index 0000000..08d5b26 Binary files /dev/null and b/desafio/src/assets/imgs/CardElo.png differ diff --git a/desafio/src/assets/imgs/CardHiper.png b/desafio/src/assets/imgs/CardHiper.png new file mode 100644 index 0000000..02349ee Binary files /dev/null and b/desafio/src/assets/imgs/CardHiper.png differ diff --git a/desafio/src/assets/imgs/CardMaster.png b/desafio/src/assets/imgs/CardMaster.png new file mode 100644 index 0000000..6fa2b33 Binary files /dev/null and b/desafio/src/assets/imgs/CardMaster.png differ diff --git a/desafio/src/assets/imgs/CardVisa.png b/desafio/src/assets/imgs/CardVisa.png new file mode 100644 index 0000000..af0bde0 Binary files /dev/null and b/desafio/src/assets/imgs/CardVisa.png differ diff --git a/desafio/src/assets/imgs/Image-LogoM3Academy.png b/desafio/src/assets/imgs/Image-LogoM3Academy.png new file mode 100644 index 0000000..0a9c340 Binary files /dev/null and b/desafio/src/assets/imgs/Image-LogoM3Academy.png differ diff --git a/desafio/src/assets/imgs/LogoM3.png b/desafio/src/assets/imgs/LogoM3.png new file mode 100644 index 0000000..7e5f1f4 Binary files /dev/null and b/desafio/src/assets/imgs/LogoM3.png differ diff --git a/desafio/src/assets/imgs/LogoVtex.png b/desafio/src/assets/imgs/LogoVtex.png new file mode 100644 index 0000000..4bd9322 Binary files /dev/null and b/desafio/src/assets/imgs/LogoVtex.png differ diff --git a/desafio/src/assets/imgs/Paypal.png b/desafio/src/assets/imgs/Paypal.png new file mode 100644 index 0000000..7163555 Binary files /dev/null and b/desafio/src/assets/imgs/Paypal.png differ diff --git a/desafio/src/assets/imgs/vtex-pci-200.png b/desafio/src/assets/imgs/vtex-pci-200.png new file mode 100644 index 0000000..726a55b Binary files /dev/null and b/desafio/src/assets/imgs/vtex-pci-200.png differ diff --git a/desafio/src/assets/svgs/Cart-Icon.svg b/desafio/src/assets/svgs/Cart-Icon.svg new file mode 100644 index 0000000..01526e2 --- /dev/null +++ b/desafio/src/assets/svgs/Cart-Icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/desafio/src/assets/svgs/Vector-Search.svg b/desafio/src/assets/svgs/Vector-Search.svg new file mode 100644 index 0000000..a4932a7 --- /dev/null +++ b/desafio/src/assets/svgs/Vector-Search.svg @@ -0,0 +1,3 @@ + + + diff --git a/desafio/src/assets/svgs/facebookIcon.svg b/desafio/src/assets/svgs/facebookIcon.svg new file mode 100644 index 0000000..ec0028a --- /dev/null +++ b/desafio/src/assets/svgs/facebookIcon.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/desafio/src/assets/svgs/instagramIcon.svg b/desafio/src/assets/svgs/instagramIcon.svg new file mode 100644 index 0000000..01f73aa --- /dev/null +++ b/desafio/src/assets/svgs/instagramIcon.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/desafio/src/assets/svgs/linkedinIcon.svg b/desafio/src/assets/svgs/linkedinIcon.svg new file mode 100644 index 0000000..204af1f --- /dev/null +++ b/desafio/src/assets/svgs/linkedinIcon.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/desafio/src/assets/svgs/twitterIcon.svg b/desafio/src/assets/svgs/twitterIcon.svg new file mode 100644 index 0000000..4beb89a --- /dev/null +++ b/desafio/src/assets/svgs/twitterIcon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/desafio/src/assets/svgs/youtubeIcon.svg b/desafio/src/assets/svgs/youtubeIcon.svg new file mode 100644 index 0000000..0dd81d5 --- /dev/null +++ b/desafio/src/assets/svgs/youtubeIcon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/desafio/src/components/Header.tsx b/desafio/src/components/Header.tsx index 8fee3cd..24aba58 100644 --- a/desafio/src/components/Header.tsx +++ b/desafio/src/components/Header.tsx @@ -1,26 +1,52 @@ import React from "react"; +import styles from "../scss/partials/header.module.scss" + +import logo from "../assets/imgs/Image-LogoM3Academy.png" +import iconLupa from "../assets/svgs/Vector-Search.svg" +import iconCart from "../assets/svgs/Cart-Icon.svg" + +const Header = () => { + return
+ + +
+} + const HeaderTop = () => { return ( -
- - -
- Entrar - +
+ LogoM3 +
+ + + +
+
+ Entrar + Icone Carrinho
) }; -// const HeaderBottom = () => { -// return ( -// <> -// -// -// Entrar -// -// -// ) -// }; +const HeaderBottom = () => { + return ( +
+ +
+ ) +}; -export { HeaderTop }; \ No newline at end of file +export { Header }; \ No newline at end of file diff --git a/desafio/src/index.tsx b/desafio/src/index.tsx index 3dc253c..8eb4c8a 100644 --- a/desafio/src/index.tsx +++ b/desafio/src/index.tsx @@ -1,6 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; -import './global.scss'; +import './scss/global.scss'; +import './scss/utils/variables.scss'; import {Home} from "./pages/Home" diff --git a/desafio/src/pages/Home.tsx b/desafio/src/pages/Home.tsx index ebdb9c5..51dae3d 100644 --- a/desafio/src/pages/Home.tsx +++ b/desafio/src/pages/Home.tsx @@ -1,11 +1,11 @@ import React from "react"; -import { HeaderTop } from "../components/Header" +import { Header } from "../components/Header" const Home = () => { - return
- -
; + return <> +
+ ; }; export { Home }; \ No newline at end of file diff --git a/desafio/src/global.scss b/desafio/src/scss/global.scss similarity index 100% rename from desafio/src/global.scss rename to desafio/src/scss/global.scss diff --git a/desafio/src/scss/partials/header.module.scss b/desafio/src/scss/partials/header.module.scss new file mode 100644 index 0000000..6f21d39 --- /dev/null +++ b/desafio/src/scss/partials/header.module.scss @@ -0,0 +1,119 @@ +.page-header{ + background-color: var(--black1); + margin-bottom: 200px; + + &__top-wrapper{ + display: grid; + grid-template-columns: repeat(3, 1fr); + padding: 22px 0; + width: 84.38%; + margin: 0 auto; + + &__logo-wrapper { + display: flex; + align-items: center; + width: 38.7%; + + &__logo{ + width: 100%; + } + } + + &__search-bar{ + display: flex; + align-items: center; + justify-content: center; + width: max-content; + border: 2px solid var(--white2); + border-radius: 5px; + background-color: var(--white1); + box-sizing: border-box; + padding: 5.5px 16px; + width: 75%; + margin: 0 auto; + + &__input{ + border: none; + width: 100%; + color: var(--grey1); + font-size: 14px; + line-height: 16px; + outline: 0; + + &::placeholder{ + font-family: var(--font-roboto); + font-size: 14px; + line-height: 16px; + color: var(--grey1); + } + } + + &__input-button{ + border: none; + background: transparent; + padding: 0; + display: flex; + outline: 0; + + &__img{ + width: 100%; + min-width: 16px; + } + } + } + + &__login-cart-wrapper{ + display: flex; + align-items: center; + justify-content: end; + width: 100%; + + &__login{ + text-decoration: none; + color: var(--white1); + text-transform: uppercase; + font-family: var(--font-roboto); + font-weight: 400; + font-size: 14px; + line-height: 16px; + width: 14.72%; + } + + &__cart{ + width: 7.78%; + margin-left: 55px; + } + } + } + + &__bottom-wrapper{ + border-top: 1px solid var(--grey2); + + &-content{ + width: 84.38%; + margin: 0 auto; + padding: 14px 0; + + &__links-wrapper{ + display: flex; + list-style-type: none; + padding: 0; + margin: 0; + + &__link{ + text-decoration: none; + margin-right: 55px; + + &-content{ + font-family: var(--font-roboto); + color: var(--white1); + text-transform: uppercase; + font-weight: 500; + font-size: 14px; + line-height: 16px; + } + } + } + } + } +} \ No newline at end of file diff --git a/desafio/src/pages/home.scss b/desafio/src/scss/partials/home.scss similarity index 100% rename from desafio/src/pages/home.scss rename to desafio/src/scss/partials/home.scss diff --git a/desafio/src/scss/utils/variables.scss b/desafio/src/scss/utils/variables.scss new file mode 100644 index 0000000..ae9d76b --- /dev/null +++ b/desafio/src/scss/utils/variables.scss @@ -0,0 +1,12 @@ +:root{ + --font-roboto: 'Roboto', sans-serif; + + --white1: #ffffff; + --white2: #f2f2f2; + + --black1: #000000; + --black2: #303030; + + --grey1: #c6c6c6; + --grey2: #c4c4c4; +} \ No newline at end of file