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 + +
+
+ + +
+