diff --git a/src/components/FooterBottom/FooterBottom.module.scss b/src/components/FooterBottom/FooterBottom.module.scss new file mode 100644 index 0000000..34b260f --- /dev/null +++ b/src/components/FooterBottom/FooterBottom.module.scss @@ -0,0 +1,112 @@ +@use '../../variables'; + +.footer-bottom { + height: 64px; + background-color: variables.$black; + + @media (min-width: 2500px) { + height: 96px; + } + + &__wrapper { + display: flex; + padding: 15px 100px; + justify-content: space-between; + align-items: center; + } + + &__address { + font-size: 10px; + line-height: 12px; + text-transform: capitalize; + color: variables.$white; + + @media (min-width: 2500px) { + font-size: 20px; + line-height: 23px; + } + } + + &__payments-icons { + display: flex; + align-items: center; + gap: 12px; + + li { + display: flex; + } + + .li-card { + width: auto; + height: 20px; + + @media (min-width: 2500px) { + height: 39px; + } + } + + .li-divider { + border: 1px solid variables.$gray-400; + height: 24px; + } + + .li-vtexpci { + width: auto; + height: 34px; + + @media (min-width: 2500px) { + height: 66px; + } + } + } + + &__developedby { + ul { + display: flex; + align-items: center; + gap: 13px; + + @media (min-width: 2500px) { + gap: 12px; + } + + li { + display: flex; + align-items: center; + gap: 13px; + + @media (min-width: 2500px) { + gap: 12px; + } + + p { + font-size: 10px; + line-height: 12px; + text-transform: capitalize; + color: variables.$white; + + @media (min-width: 2500px) { + font-size: 20px; + line-height: 23px; + } + } + + .logo-vtex { + width: 44px; + + @media (min-width: 2500px) { + width: 84px; + } + } + + .logo-m3 { + width: 28px; + + @media (min-width: 2500px) { + width: 54px; + } + } + } + } + } +} diff --git a/src/components/FooterBottom/FooterBottom.tsx b/src/components/FooterBottom/FooterBottom.tsx new file mode 100644 index 0000000..8d9e862 --- /dev/null +++ b/src/components/FooterBottom/FooterBottom.tsx @@ -0,0 +1,58 @@ +import React from "react"; + +import styles from "./FooterBottom.module.scss"; + +import imgLogoVtex from "./assets/vtex-logo.svg"; +import imgLogoM3 from "./assets/m3-logo.svg"; +import imgLogoMaster from "./assets/Master.png"; +import imgLogoVisa from "./assets/Visa.png"; +import imgLogoAmericanExpress from "./assets/AmericanExpress.png"; +import imgLogoElo from "./assets/Elo.png"; +import imgLogoHipercard from "./assets/Hiper.png"; +import imgLogoPayPal from "./assets/PayPal.png"; +import imgLogoBoleto from "./assets/Boleto.png"; +import imgLogoVtexPCI from "./assets/vtex-pci-200.png"; + +import { IconList } from "../IconList/IconList"; + +const FooterBottom = () => { + + return ( +
+ ); +} + +export {FooterBottom}; diff --git a/src/components/FooterBottom/assets/AmericanExpress.png b/src/components/FooterBottom/assets/AmericanExpress.png new file mode 100644 index 0000000..41cd78c Binary files /dev/null and b/src/components/FooterBottom/assets/AmericanExpress.png differ diff --git a/src/components/FooterBottom/assets/Boleto.png b/src/components/FooterBottom/assets/Boleto.png new file mode 100644 index 0000000..178bfef Binary files /dev/null and b/src/components/FooterBottom/assets/Boleto.png differ diff --git a/src/components/FooterBottom/assets/Elo.png b/src/components/FooterBottom/assets/Elo.png new file mode 100644 index 0000000..284c6cb Binary files /dev/null and b/src/components/FooterBottom/assets/Elo.png differ diff --git a/src/components/FooterBottom/assets/Hiper.png b/src/components/FooterBottom/assets/Hiper.png new file mode 100644 index 0000000..f4bb374 Binary files /dev/null and b/src/components/FooterBottom/assets/Hiper.png differ diff --git a/src/components/FooterBottom/assets/Master.png b/src/components/FooterBottom/assets/Master.png new file mode 100644 index 0000000..50821de Binary files /dev/null and b/src/components/FooterBottom/assets/Master.png differ diff --git a/src/components/FooterBottom/assets/PayPal.png b/src/components/FooterBottom/assets/PayPal.png new file mode 100644 index 0000000..ab7c7cd Binary files /dev/null and b/src/components/FooterBottom/assets/PayPal.png differ diff --git a/src/components/FooterBottom/assets/Visa.png b/src/components/FooterBottom/assets/Visa.png new file mode 100644 index 0000000..b361e32 Binary files /dev/null and b/src/components/FooterBottom/assets/Visa.png differ diff --git a/src/components/FooterBottom/assets/m3-logo.svg b/src/components/FooterBottom/assets/m3-logo.svg new file mode 100644 index 0000000..780c92a --- /dev/null +++ b/src/components/FooterBottom/assets/m3-logo.svg @@ -0,0 +1,4 @@ + diff --git a/src/components/FooterBottom/assets/vtex-logo.svg b/src/components/FooterBottom/assets/vtex-logo.svg new file mode 100644 index 0000000..b6fd99e --- /dev/null +++ b/src/components/FooterBottom/assets/vtex-logo.svg @@ -0,0 +1,7 @@ + diff --git a/src/components/FooterBottom/assets/vtex-pci-200.png b/src/components/FooterBottom/assets/vtex-pci-200.png new file mode 100644 index 0000000..8764672 Binary files /dev/null and b/src/components/FooterBottom/assets/vtex-pci-200.png differ diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 6b6e5a6..5828a4f 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -5,6 +5,7 @@ import styles from "./Home.module.scss"; import { HeaderTop } from '../components/HeaderTop/HeaderTop'; import { HeaderBottom } from '../components/HeaderBottom/HeaderBottom'; import { Newsletter } from '../components/Newsletter/Newsletter'; +import { FooterBottom } from '../components/FooterBottom/FooterBottom'; const Home = () => { @@ -19,6 +20,7 @@ const Home = () => { > );