diff --git a/src/App.tsx b/src/App.tsx index 89db2e5..c95ff75 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,6 +5,7 @@ import Header from "./components/Header"; import NewsLetter from "./components/newsLetter"; import Home from "./pages/Home"; import Institutional from "./pages/Institutional"; +import Footer from "./components/Footer"; const router = createBrowserRouter([ { @@ -23,6 +24,7 @@ function App() { + ); } diff --git a/src/assets/img/Amex.png b/src/assets/img/Amex.png new file mode 100644 index 0000000..5ef0aa0 Binary files /dev/null and b/src/assets/img/Amex.png differ diff --git a/src/assets/img/Boleto.png b/src/assets/img/Boleto.png new file mode 100644 index 0000000..a16252b Binary files /dev/null and b/src/assets/img/Boleto.png differ diff --git a/src/assets/img/Elo.png b/src/assets/img/Elo.png new file mode 100644 index 0000000..e0feb2c Binary files /dev/null and b/src/assets/img/Elo.png differ diff --git a/src/assets/img/Hiper.png b/src/assets/img/Hiper.png new file mode 100644 index 0000000..c8f24e6 Binary files /dev/null and b/src/assets/img/Hiper.png differ diff --git a/src/assets/img/Master.png b/src/assets/img/Master.png new file mode 100644 index 0000000..56c6a59 Binary files /dev/null and b/src/assets/img/Master.png differ diff --git a/src/assets/img/Paypal.png b/src/assets/img/Paypal.png new file mode 100644 index 0000000..d348a83 Binary files /dev/null and b/src/assets/img/Paypal.png differ diff --git a/src/assets/img/Visa.png b/src/assets/img/Visa.png new file mode 100644 index 0000000..2e8fa69 Binary files /dev/null and b/src/assets/img/Visa.png differ diff --git a/src/assets/img/Vtexpci.png b/src/assets/img/Vtexpci.png new file mode 100644 index 0000000..4f55147 Binary files /dev/null and b/src/assets/img/Vtexpci.png differ diff --git a/src/assets/svg/Facebooklogo.svg b/src/assets/svg/Facebooklogo.svg new file mode 100644 index 0000000..5337a6b --- /dev/null +++ b/src/assets/svg/Facebooklogo.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/svg/Instagramlogo.svg b/src/assets/svg/Instagramlogo.svg new file mode 100644 index 0000000..8b18e85 --- /dev/null +++ b/src/assets/svg/Instagramlogo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/assets/svg/Linkedinlogo.svg b/src/assets/svg/Linkedinlogo.svg new file mode 100644 index 0000000..d70f104 --- /dev/null +++ b/src/assets/svg/Linkedinlogo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/assets/svg/M3logo.svg b/src/assets/svg/M3logo.svg new file mode 100644 index 0000000..780c92a --- /dev/null +++ b/src/assets/svg/M3logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svg/Twitterlogo.svg b/src/assets/svg/Twitterlogo.svg new file mode 100644 index 0000000..bf71aac --- /dev/null +++ b/src/assets/svg/Twitterlogo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svg/Vtexlogo.svg b/src/assets/svg/Vtexlogo.svg new file mode 100644 index 0000000..b6fd99e --- /dev/null +++ b/src/assets/svg/Vtexlogo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/svg/Youtubelogo.svg b/src/assets/svg/Youtubelogo.svg new file mode 100644 index 0000000..d94b497 --- /dev/null +++ b/src/assets/svg/Youtubelogo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx new file mode 100644 index 0000000..571de7a --- /dev/null +++ b/src/components/Footer/index.tsx @@ -0,0 +1,87 @@ +import styles from "./styles.module.scss"; +import masterCardImg from "../../assets/img/Master.png"; +import visaImg from "../../assets/img/Visa.png"; +import amexImg from "../../assets/img/Amex.png"; +import eloImg from "../../assets/img/Elo.png"; +import hiperCardImg from "../../assets/img/Hiper.png"; +import payPalImg from "../../assets/img/Paypal.png"; +import boletoImg from "../../assets/img/Boleto.png"; +import vtexPCI from "../../assets/img/Vtexpci.png"; +import vtexSvg from "../../assets/svg/Vtexlogo.svg"; +import M3Svg from "../../assets/svg/M3logo.svg"; +import facebookSvg from "../../assets/svg/Facebooklogo.svg"; +import instagramSvg from "../../assets/svg/Instagramlogo.svg"; +import twitterSvg from "../../assets/svg/Twitterlogo.svg"; +import youtubeSvg from "../../assets/svg/Youtubelogo.svg"; +import linkedinSvg from "../../assets/svg/Linkedinlogo.svg"; + +export default function Footer() { + return ( + + ); +} diff --git a/src/components/Footer/styles.module.scss b/src/components/Footer/styles.module.scss new file mode 100644 index 0000000..64573b8 --- /dev/null +++ b/src/components/Footer/styles.module.scss @@ -0,0 +1,163 @@ +.footer_top { + display: flex; + justify-content: space-between; + padding: 50px 7.81vw; + gap: 12.34vw; + + .menu_list { + display: flex; + gap: 121px; + h2 { + font-weight: 500; + font-weight: bold; + font-size: 14px; + line-height: 16px; + display: flex; + justify-content: flex-start; + } + a { + font-size: 12px; + white-space: nowrap; + display: flex; + justify-content: flex-start; + } + + > div { + display: flex; + flex-direction: column; + gap: 12px; + } + } + + .redes_sociais { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 12px; + + p { + font-weight: 400; + font-size: 14px; + line-height: 16px; + } + } + + .redes_sociais_svg { + display: flex; + gap: 0.78vw; + + img { + width: 2.73vw; + } + } +} + +.footer_bottom { + justify-content: space-between; + background-color: #000000; + display: flex; + align-items: center; + min-height: 64px; + padding: 0 7.81%; + + p { + white-space: nowrap; + color: #ffffff; + font-weight: 400; + font-size: 0.78vw; + line-height: 0.93vw; + width: 18.28vw; + text-align: left; + } + + .pagamentos { + display: flex; + align-items: center; + gap: 0.93vw; + + .bandeiras { + display: flex; + justify-content: center; + align-items: center; + gap: 0.93vw; + margin-left: 8.63vw; + img { + width: 2.81vw; + } + } + + .traço { + border-left: solid 1px #c4c4c4; + height: 24px; + } + + .certificado { + display: flex; + justify-content: center; + align-items: center; + img { + width: 4.27vw; + } + } + } + + .logos { + margin-left: 8.63vw; + gap: 1.02vw; + display: flex; + + p { + white-space: nowrap; + width: unset; + display: flex; + justify-content: flex-end; + align-items: center; + } + } +} + +@media screen and (max-width: 1279px) { + .footer_bottom { + flex-direction: column; + align-items: flex-start; + padding-left: 16px; + gap: 15px; + + .pagamentos { + margin-top: 15px; + order: -1; + + .bandeiras { + margin-left: unset; + } + } + .logos { + margin-left: unset; + } + } +} + +@media screen and (max-width: 375px) { + .footer_bottom { + padding: 0; + + .pagamentos { + .bandeiras { + gap: 11px; + img { + max-width: 30px; + width: 100%; + height: auto; + } + } + .certificado { + gap: 11px; + img { + max-width: 45px; + width: 100%; + height: auto; + } + } + } + } +}