diff --git a/src/components/Footer/BottomFooter.tsx b/src/components/Footer/BottomFooter.tsx new file mode 100644 index 0000000..b53f679 --- /dev/null +++ b/src/components/Footer/BottomFooter.tsx @@ -0,0 +1,45 @@ +import Vtex from "../assets/imgs/SVGs/Vtex-logo.svg"; +import M3 from "../assets/imgs/SVGs/M3-logo.svg"; + +import Master from "../assets/imgs/SVGs/credit-cards/Master.svg"; +import Visa from "../assets/imgs/SVGs/credit-cards/Visa.svg"; +import Diners from "../assets/imgs/SVGs/credit-cards/Diners.svg"; +import Elo from "../assets/imgs/SVGs/credit-cards/Elo.svg"; +import Hiper from "../assets/imgs/SVGs/credit-cards/Hiper.svg"; +import Pagseguro from "../assets/imgs/SVGs/credit-cards/Pagseguro.svg"; +import Boleto from "../assets/imgs/SVGs/credit-cards/Boleto.svg"; +import vtex from "../assets/imgs/SVGs/credit-cards/vtex-pci-200.svg"; + +export const BottomFooter = () => { + return ( + <> +
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor + + +
+ Master-icon + Visa-icon + Diners-icon + Elo-icon + Hiper-icon + Pagseguro-icon + Boleto-icon + + + vtex-icon +
+ +
+ Powered by + Vtex-logo + + Developed by + M3-logo +
+
+ + ); +}; diff --git a/src/components/Footer/ContactFooter.tsx b/src/components/Footer/ContactFooter.tsx new file mode 100644 index 0000000..d16755b --- /dev/null +++ b/src/components/Footer/ContactFooter.tsx @@ -0,0 +1,30 @@ +import { MenuList1, MenuList2, MenuList3 } from "./MenuListFooter"; + +export const Contact = () => { + return ( + <> +
+
+ {window.innerWidth > 1024 ? ( + <> +
INSTITUCIONAL
+ + + ) : ( + "" + )} +
INSTITUCIONAL
+ +
+
+
DÚVIDAS
+ +
+
+
FALE CONOSCO
+ +
+
+ + ); +}; diff --git a/src/components/Footer/FooterMain.modules.scss b/src/components/Footer/FooterMain.modules.scss new file mode 100644 index 0000000..f6d6faf --- /dev/null +++ b/src/components/Footer/FooterMain.modules.scss @@ -0,0 +1,468 @@ +@import "../Variables.scss"; + +.Footer_container { + display: flex; + flex-direction: column; + + .Newsletter_Container { + display: flex; + flex-direction: column; + border-top: 1px solid $color-black; + border-bottom: 1px solid $color-black; + padding: 16px; + + @media (min-width: 1025px) { + padding: 16px 31.485%; + } + + .Newsletter_wrapper { + display: flex; + flex-direction: column; + flex-wrap: wrap; + + .News_title { + font-family: $fontFamily; + font-style: normal; + font-weight: 500; + font-size: 18px; + line-height: 21px; + letter-spacing: 0.05em; + font-variant: small-caps; + color: $color-gray-700; + margin: 0 0 16px 0; + text-transform: uppercase; + + @media (min-width: 2500px) { + font-weight: 500; + font-size: 36px; + line-height: 42px; + } + + @media (min-width: 1025px) { + margin: 0 0 8px 0; + } + + @media (max-width: 1024px) { + font-weight: 500; + font-size: 14px; + line-height: 16px; + } + } + + .Submite_wrapper { + display: flex; + + @media (max-width: 1024px) { + flex-direction: column; + gap: 16px; + } + + @media (min-width: 1025px) { + width: 100%; + } + + .Input_News { + padding: 13px 16px; + border: 1px solid $color-white-500; + border-radius: 4px; + font-family: $fontFamily; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: $color-gray; + + @media (max-width: 375px) { + height: 14px; + } + + @media (max-width: 1024px) { + font-weight: 400; + font-size: 14px; + line-height: 16px; + padding: 17px 16px; + } + + @media (min-width: 2500px) { + height: 31px !important; + width: 668px !important; + font-weight: 400; + font-size: 28px; + line-height: 33px; + } + + @media (min-width: 1025px) { + height: 14px; + margin-right: 8px; + width: 24.376%; + min-width: 306px; + } + + &::placeholder { + color: $color-gray; + } + } + .Button_News { + padding: 14px 20px; + background: $color-black; + box-shadow: 0px 4px 4px rgba($color-black, 0.25); + border-radius: 4px; + border: none; + font-family: $fontFamily; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 14px; + color: $color-white; + + @media (max-width: 1024px) { + padding: 17px 0; + font-weight: 700; + font-size: 14px; + line-height: 16px; + letter-spacing: 0.05em; + } + + @media (min-width: 2500px) { + width: 246px !important; + height: 59px !important; + font-weight: 700; + font-size: 24px; + line-height: 28px; + } + + @media (min-width: 1025px) { + height: 42px; + width: 9.844%; + min-width: 126px; + } + } + } + } + } + .Footer_top { + display: flex; + + @media (max-width: 1024px) { + flex-direction: column; + padding: 24px 16px; + } + + @media (min-width: 1025px) { + position: relative; + padding: 50px 0; + } + + .Contact_wrapper { + display: flex; + gap: 121px; + width: 55.235%; + margin: 0 12.11% 0 100px; + + @media (min-width: 2500px) { + gap: 293px; + margin: 0 15.16% 0 100px; + width: 61.24%; + } + + .Menu_folder { + display: flex; + flex-direction: column; + min-width: 20.51%; + + @media (min-width: 2500px) { + min-width: 20.575%; + } + + h5 { + margin-top: 0; + font-family: $fontFamily; + font-style: normal; + font-weight: 500; + font-size: 14px; + line-height: 16px; + color: $color-gray-700; + + @media (min-width: 2500px) { + font-weight: 500; + font-size: 28px; + line-height: 33px; + } + } + + .links_footer { + text-decoration: none; + font-family: $fontFamily; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 14px; + text-transform: capitalize; + color: $color-gray-700; + margin-bottom: 12px; + width: 155px; + + @media (min-width: 2500px) { + font-weight: 400; + font-size: 24px; + line-height: 28px; + } + } + + .last { + text-decoration-line: underline; + } + } + } + } + + .SocialMedia { + .Img_wrappers { + display: flex; + gap: 10px; + margin-bottom: 12px; + + img { + @media (min-width: 2500px) { + width: 70px; + height: 70px; + } + } + } + .Site { + font-family: $fontFamily; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: $color-gray-700; + + @media (min-width: 2500px) { + font-weight: 400; + font-size: 28px; + line-height: 33px; + } + } + + .Wpp-Icon { + display: flex; + flex-direction: column; + gap: 5px; + + @media (min-width: 1025px) { + position: absolute; + right: 16px; + top: 50px; + } + + @media (min-width: 2500px) { + width: 66px; + height: 66px; + top: 542px; + position: fixed; + } + + .button_wrapper { + position: relative; + img { + @media (min-width: 2500px) { + width: 70px; + height: 70px; + } + } + } + .button_wrapper::after { + content: " "; + width: 13px; + height: 7px; + top: 33%; + right: 31%; + position: absolute; + background-image: url("../assets/imgs/SVGs/Vector.svg"); + + @media (min-width: 2500px) { + background-repeat: no-repeat; + height: 24.14px; + width: 24.14px; + background-size: contain; + top: 37%; + } + } + + .button { + display: flex; + background-image: url("../assets/imgs/SVGs/Vector.svg"); + } + } + } + + .Bottom_Wrapper { + justify-content: space-between; + display: flex; + padding: 15px; + background: $color-black; + + @media (max-width: 1024px) { + flex-direction: column; + gap: 15px; + padding: 15px 16px; + } + + @media (min-width: 1025px) { + padding: 15px 100px; + } + + .corporateName { + display: flex; + align-self: center; + width: 236px; + height: 24px; + font-family: $fontFamily; + font-style: normal; + font-weight: 400; + font-size: 10px; + line-height: 12px; + color: $color-white; + text-transform: capitalize; + + @media (max-width: 1024px) { + align-self: baseline; + } + + @media (min-width: 2500px) { + font-weight: 400; + font-size: 20px; + line-height: 23px; + width: 471px; + height: 47px; + } + } + + .Payment_methods { + align-items: center; + display: flex; + gap: 12px; + + @media (max-width: 1024px) { + order: -1; + } + + .carts_icons { + width: 36px; + height: 20px; + + @media (max-width: 375px) { + width: 30px; + } + + @media (min-width: 2500px) { + width: 70px; + height: 39.27px; + } + } + + .div_icons { + content: ""; + border: 1px solid $color-gray; + transform: rotate(90deg); + width: 24px; + height: 0px; + + @media (max-width: 1024px) { + width: 22px; + } + } + + .vtex_icon { + width: 54.61px; + height: 34px; + + @media (max-width: 375px) { + width: 45px; + height: 28px; + } + + @media (min-width: 2500px) { + width: 106px; + height: 66px; + } + } + } + + .Authors { + display: flex; + gap: 13px; + + @media (min-width: 2500px) { + width: 406px; + } + + .Powered_by { + display: flex; + align-items: center; + width: 53px; + font-family: $fontFamily; + font-style: normal; + font-weight: 400; + font-size: 10px; + line-height: 12px; + text-transform: capitalize; + color: $color-white; + + @media (min-width: 2500px) { + font-weight: 400; + font-size: 20px; + line-height: 23px; + width: 110px; + } + } + + .Developed_by { + display: flex; + align-items: center; + width: 61px; + font-family: $fontFamily; + font-style: normal; + font-weight: 400; + font-size: 10px; + line-height: 12px; + text-transform: capitalize; + color: $color-white; + + @media (min-width: 2500px) { + font-weight: 400; + font-size: 20px; + line-height: 23px; + width: 125px; + } + } + + .vtex_logo { + display: flex; + align-self: center; + width: 44.92px; + height: 16px; + + @media (min-width: 2500px) { + font-weight: 400; + font-size: 20px; + line-height: 23px; + width: 84.22px; + height: 30px; + } + } + + .m3_logo { + display: flex; + align-self: center; + width: 28.66px; + height: 15.65px; + + @media (min-width: 2500px) { + width: 54.95px; + height: 30px; + } + } + } + } +} diff --git a/src/components/Footer/FooterMain.tsx b/src/components/Footer/FooterMain.tsx new file mode 100644 index 0000000..a79699c --- /dev/null +++ b/src/components/Footer/FooterMain.tsx @@ -0,0 +1,21 @@ +import { Newsletter } from "./Newsletter"; +import { Contact } from "./ContactFooter"; +import { SocialMedia } from "./SocialMedia"; +import { BottomFooter } from "./BottomFooter"; + +import "./FooterMain.modules.scss"; + +export const MainFooter = () => { + return ( + <> +
+ +
+ + +
+ +
+ + ); +}; diff --git a/src/components/Footer/MenuFolder.tsx b/src/components/Footer/MenuFolder.tsx new file mode 100644 index 0000000..95ea799 --- /dev/null +++ b/src/components/Footer/MenuFolder.tsx @@ -0,0 +1,26 @@ +import { MenuList1, MenuList2, MenuList3 } from "./MenuListFooter"; + +// export const MenuFolder = () => { +// return ( +// <> +//
+//
INSTITUCIONAL
+//
+// +//
+//
+//
+//
DÚVIDAS
+//
+// +//
+//
+//
+//
FALE CONOSCO
+//
+// +//
+//
+// +// ); +// }; diff --git a/src/components/Footer/MenuListFooter.tsx b/src/components/Footer/MenuListFooter.tsx new file mode 100644 index 0000000..48e5a4a --- /dev/null +++ b/src/components/Footer/MenuListFooter.tsx @@ -0,0 +1,58 @@ +import { NavLink } from "react-router-dom"; + +export const MenuList1 = () => { + return ( + <> + + Quem Somos + + + Política de Privacidade + + + Segurança + + + Seja um Revendedor + + + ); +}; + +export const MenuList2 = () => { + return ( + <> + + Entrega + + + Pagamento + + + Trocas e Devoluções + + + Dúvidas Frequentes + + + ); +}; + +export const MenuList3 = () => { + return ( + <> + + Atendimento ao Consumidor + + + (11) 4159-9504 + + + Atendimento Online + + + (11) 99433-8825 + + + ); +}; diff --git a/src/components/Footer/Newsletter.tsx b/src/components/Footer/Newsletter.tsx new file mode 100644 index 0000000..a635f75 --- /dev/null +++ b/src/components/Footer/Newsletter.tsx @@ -0,0 +1,16 @@ +export const Newsletter = () => { + return ( + <> +
+
+

Assine nossa Newsletter

+ +
+ + +
+
+
+ + ); +}; diff --git a/src/components/Footer/SocialMedia.tsx b/src/components/Footer/SocialMedia.tsx new file mode 100644 index 0000000..4b88291 --- /dev/null +++ b/src/components/Footer/SocialMedia.tsx @@ -0,0 +1,25 @@ +import Facebook from "../assets/imgs/SVGs/Facebook.svg"; +import Instagram from "../assets/imgs/SVGs/Instagram.svg"; +import Twitter from "../assets/imgs/SVGs/Twitter.svg"; +import YouTube from "../assets/imgs/SVGs/YouTube.svg"; +import Linkedin from "../assets/imgs/SVGs/Linkedin.svg"; + +import { WppIcon } from "./wpp"; + +export const SocialMedia = () => { + return ( + <> +
+
+ Facebook-logo + Instagram-logo + Twitter-logo + YouTube-logo + Linkedin-logo +
+ www.loremipsum.com +
{window.innerWidth > 1024 ? : ""}
+
+ + ); +}; diff --git a/src/components/Footer/wpp.tsx b/src/components/Footer/wpp.tsx new file mode 100644 index 0000000..0a23738 --- /dev/null +++ b/src/components/Footer/wpp.tsx @@ -0,0 +1,15 @@ +import Wpp from "../assets/imgs/SVGs/whatsapp.svg"; +import Ellipse from "../assets/imgs/SVGs/Ellipse.svg"; + +export const WppIcon = () => { + return ( + <> +
+ Wpp-logo +
+ Ellipse-logo +
+
+ + ); +};