From 8d5ea3f140ee63165f3b9eecb8239d860346b6cf Mon Sep 17 00:00:00 2001 From: vitorsoaresdev Date: Fri, 20 Jan 2023 19:51:33 -0300 Subject: [PATCH] feat: adiciona imagens e icones --- .../src/components/Location/index.scss | 39 +++++++ .../src/components/Location/index.tsx | 23 ++++ .../src/components/NewsLetter/index.scss | 106 ++++++++++++++++++ .../src/components/NewsLetter/index.tsx | 19 ++++ .../src/components/SearchBox/index.scss | 62 ++++++++++ .../src/components/SearchBox/index.tsx | 13 +++ .../src/components/Template/index.scss | 38 +++++++ .../src/components/Template/index.tsx | 28 +++++ .../src/components/icons/Boleto.svg | 9 ++ .../src/components/icons/Cart.svg | 12 ++ .../src/components/icons/Chevron.svg | 4 + .../src/components/icons/ChevronLeft.svg | 3 + .../src/components/icons/CloseBtn.svg | 4 + .../src/components/icons/Diners.svg | 9 ++ .../src/components/icons/Elo.svg | 9 ++ .../src/components/icons/Facebook.svg | 11 ++ .../src/components/icons/Hamburguer.svg | 5 + .../src/components/icons/Hiper.svg | 9 ++ .../src/components/icons/House.svg | 3 + .../src/components/icons/Instagram.svg | 13 +++ .../src/components/icons/Linkedin.svg | 13 +++ .../src/components/icons/M3Academy.png | Bin 0 -> 6366 bytes .../src/components/icons/Master.svg | 9 ++ .../src/components/icons/Paypal.svg | 9 ++ .../src/components/icons/Plus.svg | 3 + .../src/components/icons/Search.svg | 10 ++ .../src/components/icons/Twitter.svg | 4 + .../src/components/icons/Visa.svg | 9 ++ .../src/components/icons/Vtex.svg | 4 + .../src/components/icons/Whatsapp.svg | 11 ++ .../src/components/icons/Youtube.svg | 4 + .../icons/chevron(1).svg_Zone.Identifier | 3 + .../icons/chevron(1).svgZone.Identifier | 3 + .../src/components/icons/chevronup.svg | 4 + Vitor-Soares-main/src/components/icons/m3.svg | 7 ++ .../src/components/icons/vtex-pci-200.svg | 9 ++ 36 files changed, 521 insertions(+) create mode 100644 Vitor-Soares-main/src/components/Location/index.scss create mode 100644 Vitor-Soares-main/src/components/Location/index.tsx create mode 100644 Vitor-Soares-main/src/components/NewsLetter/index.scss create mode 100644 Vitor-Soares-main/src/components/NewsLetter/index.tsx create mode 100644 Vitor-Soares-main/src/components/SearchBox/index.scss create mode 100644 Vitor-Soares-main/src/components/SearchBox/index.tsx create mode 100644 Vitor-Soares-main/src/components/Template/index.scss create mode 100644 Vitor-Soares-main/src/components/Template/index.tsx create mode 100644 Vitor-Soares-main/src/components/icons/Boleto.svg create mode 100644 Vitor-Soares-main/src/components/icons/Cart.svg create mode 100644 Vitor-Soares-main/src/components/icons/Chevron.svg create mode 100644 Vitor-Soares-main/src/components/icons/ChevronLeft.svg create mode 100644 Vitor-Soares-main/src/components/icons/CloseBtn.svg create mode 100644 Vitor-Soares-main/src/components/icons/Diners.svg create mode 100644 Vitor-Soares-main/src/components/icons/Elo.svg create mode 100644 Vitor-Soares-main/src/components/icons/Facebook.svg create mode 100644 Vitor-Soares-main/src/components/icons/Hamburguer.svg create mode 100644 Vitor-Soares-main/src/components/icons/Hiper.svg create mode 100644 Vitor-Soares-main/src/components/icons/House.svg create mode 100644 Vitor-Soares-main/src/components/icons/Instagram.svg create mode 100644 Vitor-Soares-main/src/components/icons/Linkedin.svg create mode 100644 Vitor-Soares-main/src/components/icons/M3Academy.png create mode 100644 Vitor-Soares-main/src/components/icons/Master.svg create mode 100644 Vitor-Soares-main/src/components/icons/Paypal.svg create mode 100644 Vitor-Soares-main/src/components/icons/Plus.svg create mode 100644 Vitor-Soares-main/src/components/icons/Search.svg create mode 100644 Vitor-Soares-main/src/components/icons/Twitter.svg create mode 100644 Vitor-Soares-main/src/components/icons/Visa.svg create mode 100644 Vitor-Soares-main/src/components/icons/Vtex.svg create mode 100644 Vitor-Soares-main/src/components/icons/Whatsapp.svg create mode 100644 Vitor-Soares-main/src/components/icons/Youtube.svg create mode 100644 Vitor-Soares-main/src/components/icons/chevron(1).svg_Zone.Identifier create mode 100644 Vitor-Soares-main/src/components/icons/chevron(1).svgZone.Identifier create mode 100644 Vitor-Soares-main/src/components/icons/chevronup.svg create mode 100644 Vitor-Soares-main/src/components/icons/m3.svg create mode 100644 Vitor-Soares-main/src/components/icons/vtex-pci-200.svg diff --git a/Vitor-Soares-main/src/components/Location/index.scss b/Vitor-Soares-main/src/components/Location/index.scss new file mode 100644 index 0000000..ae977e0 --- /dev/null +++ b/Vitor-Soares-main/src/components/Location/index.scss @@ -0,0 +1,39 @@ +@import "../../styles/index.scss"; + +.location { + display: flex; + align-items: center; + gap: 12px; + text-transform: uppercase; + @include large-font-2; + color: $text-cl-5; + svg { + width: 100%; + height: 100%; + } + + margin-bottom: 80px; + + .chevron, + .house { + @include center; + } + .house { + aspect-ratio: 1; + } + + @media screen { + @media (max-width: 2500px) { + @include big-font-2; + gap: 9.72px; + .house { + width: 16px; + } + + .chevron { + width: 4.56px; + height: 8px; + } + } + } +} diff --git a/Vitor-Soares-main/src/components/Location/index.tsx b/Vitor-Soares-main/src/components/Location/index.tsx new file mode 100644 index 0000000..d1f758d --- /dev/null +++ b/Vitor-Soares-main/src/components/Location/index.tsx @@ -0,0 +1,23 @@ +import { ReactSVG } from "react-svg"; +import house from "../icons/House.svg"; +import chevron from "../icons/ChevronLeft.svg"; +import "./index.scss"; +import { useLocation } from "react-router-dom"; + +const strategy = { + "/": "Home", + "/institucional": "Instiucional", +}; + +export function Location() { + const { pathname } = useLocation() as { pathname: keyof typeof strategy }; + const nome = strategy[pathname] ?? "Not found"; + + return ( +
+ + {nome !== strategy["/"] && } +

{nome}

+
+ ); +} diff --git a/Vitor-Soares-main/src/components/NewsLetter/index.scss b/Vitor-Soares-main/src/components/NewsLetter/index.scss new file mode 100644 index 0000000..e520d5a --- /dev/null +++ b/Vitor-Soares-main/src/components/NewsLetter/index.scss @@ -0,0 +1,106 @@ +@import "../../styles/index.scss"; +.news-letter { + @include large-font-4; + color: $text-cl-4; + border-block: solid 1px black; + padding-block: 16px; + padding-inline: 16px; + + margin-top: 84px; + + > div { + margin-inline: auto; + max-width: 922px; + width: 100%; + } + + h2 { + width: max-content; + @include large-font-6; + margin-bottom: 8px; + font-weight: 500; + letter-spacing: 0.05em; + font-variant: small-caps; + } + + .bar { + gap: 8px; + display: flex; + width: 100%; + max-width: 922px; + + input { + padding: 13px 16px; + border: solid 1px $border-cl-4; + flex: 1; + &::placeholder { + color: $text-cl-5; + } + border-radius: 4px; + } + + button { + @include large-font-2; + @include black-btn; + padding-inline: 20px; + max-width: 246px; + width: 100%; + letter-spacing: 0.05em; + font-weight: 700; + } + } + + @media screen { + @media (max-width: 2500px) { + margin-top: 70px; + > div { + max-width: 474px; + + h2 { + @include big-font-6; + } + .bar { + input { + @include big-font-4; + } + + button { + @include big-font-2; + max-width: 126px; + } + } + } + } + @media (max-width: 1024px) { + margin-top: 80px; + > div { + max-width: 100%; + + h2 { + @include big-font-4; + margin-bottom: 16px; + } + + .bar { + max-width: 100%; + gap: 16px; + flex-direction: column; + input { + @include big-font-4; + } + + button { + @include big-font-4; + max-width: 100%; + padding-block: 17px; + } + } + } + } + @media (max-width: 375px) { + input { + padding-block: 17px !important; + } + } + } +} diff --git a/Vitor-Soares-main/src/components/NewsLetter/index.tsx b/Vitor-Soares-main/src/components/NewsLetter/index.tsx new file mode 100644 index 0000000..8b8e276 --- /dev/null +++ b/Vitor-Soares-main/src/components/NewsLetter/index.tsx @@ -0,0 +1,19 @@ +import "./index.scss"; +export function NewsLetter() { + return ( +
{ + e.preventDefault(); + }} + > +
+

ASSINE NOSSA NEWSLETTER

+
+ + +
+
+
+ ); +} diff --git a/Vitor-Soares-main/src/components/SearchBox/index.scss b/Vitor-Soares-main/src/components/SearchBox/index.scss new file mode 100644 index 0000000..00b749e --- /dev/null +++ b/Vitor-Soares-main/src/components/SearchBox/index.scss @@ -0,0 +1,62 @@ +@import "../../styles/index.scss"; + +.search-box { + width: 515.62px; + + display: flex; + align-items: center; + gap: 10px; + background: #fff; + border: solid 2px $border-cl-3; + + max-height: 57px; + + .buscar { + @include center(); + color: $text-cl-2; + width: 35px; + height: 35px; + aspect-ratio: 1; + + img { + height: 100%; + } + } + + padding: 12px 16px; + @media screen { + @media (max-width: 2500px) { + padding-block: 8px; + .buscar { + width: 18px; + height: 18px; + } + } + } + + border-radius: 5px; + overflow: hidden; + + &:focus-within { + outline: none; + } + + input { + @include reset-border-background-outline(); + + flex: 1; + + &:focus-visible { + outline: none; + } + + font-size: inherit; + line-height: inherit; + font-family: inherit; + + color: $text-cl-6; + &::placeholder { + color: $text-cl-3; + } + } +} diff --git a/Vitor-Soares-main/src/components/SearchBox/index.tsx b/Vitor-Soares-main/src/components/SearchBox/index.tsx new file mode 100644 index 0000000..b6ded28 --- /dev/null +++ b/Vitor-Soares-main/src/components/SearchBox/index.tsx @@ -0,0 +1,13 @@ +import search from "../icons/Search.svg"; +import "./index.scss"; + +export function SearchBox() { + return ( +
+ + +
+ ); +} diff --git a/Vitor-Soares-main/src/components/Template/index.scss b/Vitor-Soares-main/src/components/Template/index.scss new file mode 100644 index 0000000..f019d25 --- /dev/null +++ b/Vitor-Soares-main/src/components/Template/index.scss @@ -0,0 +1,38 @@ +@import "../../styles/index.scss"; +.icons-absolute { + display: grid; + gap: 5px; + + position: absolute; + right: 16px; + bottom: 250px; + + a { + display: flex; + justify-content: center; + align-items: center; + height: 66px; + width: 66px; + + img { + max-width: 100%; + } + } + + @media screen { + @media (max-width: 2500px) { + a { + width: 34px !important; + height: 34px !important; + } + + bottom: 210px; + } + @media (max-width: 1024px) { + bottom: 70px; + } + @media (max-width: 375px) { + bottom: 29px; + } + } +} diff --git a/Vitor-Soares-main/src/components/Template/index.tsx b/Vitor-Soares-main/src/components/Template/index.tsx new file mode 100644 index 0000000..4038764 --- /dev/null +++ b/Vitor-Soares-main/src/components/Template/index.tsx @@ -0,0 +1,28 @@ +import { Outlet } from "react-router-dom"; +import { Footer } from "../Footer"; +import { Header } from "../Header"; +import { Location } from "../Location"; +import whatsapp from "../icons/Whatsapp.svg"; +import chevron from "../icons/chevronup.svg"; +import "./index.scss"; + +export function Template() { + return ( + <> +
+
+ + whatsapp icon + + + chevron up icon + +
+
+ + +
+