diff --git a/react-project/src/components/Footer/Footer.tsx b/react-project/src/components/Footer/Footer.tsx index d16b975..2cfb707 100644 --- a/react-project/src/components/Footer/Footer.tsx +++ b/react-project/src/components/Footer/Footer.tsx @@ -2,6 +2,7 @@ import { Newsletter } from "./Newsletter"; import { SitemapAccordion } from "./SitemapAccordion"; import { Sitemap } from "./Sitemap"; import { SocialMedias } from "./SocialMedias"; +import { FooterBottom } from "./FooterBottom"; import footer from "./assets/modules/Footer.module.scss"; @@ -15,6 +16,8 @@ const Footer = () => { + + ); }; diff --git a/react-project/src/components/Footer/FooterBottom.tsx b/react-project/src/components/Footer/FooterBottom.tsx new file mode 100644 index 0000000..5b6afc5 --- /dev/null +++ b/react-project/src/components/Footer/FooterBottom.tsx @@ -0,0 +1,45 @@ +import footer from "./assets/modules/FooterBottom.module.scss"; + +import { Payments } from "./Payments"; + +import master from "./assets/svgs/master.svg"; +import visa from "./assets/svgs/visa.svg"; +import diners from "./assets/svgs/diners.svg"; +import elo from "./assets/svgs/elo.svg"; +import hiper from "./assets/svgs/hiper.svg"; +import paypal from "./assets/svgs/paypal.svg"; +import boleto from "./assets/svgs/boleto.svg"; +import divisor from "./assets/svgs/divisor.svg"; +import vtexPci from "./assets/svgs/vtex-pci.svg"; + +const FooterBottom = () => { + return ( +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor +

+
+
    + + + + + + + +
+
+ Divisor de icones +
+
+ Vtex PCI +
+
+ +
b
+
+ ); +}; + +export { FooterBottom }; diff --git a/react-project/src/components/Footer/Payments.tsx b/react-project/src/components/Footer/Payments.tsx new file mode 100644 index 0000000..48effc4 --- /dev/null +++ b/react-project/src/components/Footer/Payments.tsx @@ -0,0 +1,18 @@ +interface IPayments { + icon: string; + alt: string; +} + +const Payments = (props: IPayments) => { + const { icon, alt } = props; + + return ( +
  • +
    + {alt} +
    +
  • + ); +}; + +export { Payments }; diff --git a/react-project/src/components/Footer/assets/modules/FooterBottom.module.scss b/react-project/src/components/Footer/assets/modules/FooterBottom.module.scss new file mode 100644 index 0000000..ddf4559 --- /dev/null +++ b/react-project/src/components/Footer/assets/modules/FooterBottom.module.scss @@ -0,0 +1,40 @@ +.footer { + display: flex; + justify-content: space-between; + align-items: center; + background-color: var(--black); + padding: 15px 100px; + + p { + width: 234px; + font-weight: 400; + font-size: 10px; + line-height: 12px; + color: var(--white); + } + + &__icons { + display: flex; + align-items: center; + gap: 12px; + + ul { + list-style: none; + display: flex; + align-items: center; + gap: 12px; + + li { + display: contents; + + figure { + display: contents; + } + } + } + + figure { + display: contents; + } + } +} diff --git a/react-project/src/components/Footer/assets/modules/Sitemap.module.scss b/react-project/src/components/Footer/assets/modules/Sitemap.module.scss index 9d8ac5e..bad2114 100644 --- a/react-project/src/components/Footer/assets/modules/Sitemap.module.scss +++ b/react-project/src/components/Footer/assets/modules/Sitemap.module.scss @@ -65,6 +65,7 @@ &:last-child { text-decoration: underline; + margin-bottom: 0; } } } diff --git a/react-project/src/components/Footer/assets/svgs/boleto.svg b/react-project/src/components/Footer/assets/svgs/boleto.svg new file mode 100644 index 0000000..6fea7a5 --- /dev/null +++ b/react-project/src/components/Footer/assets/svgs/boleto.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/react-project/src/components/Footer/assets/svgs/diners.svg b/react-project/src/components/Footer/assets/svgs/diners.svg new file mode 100644 index 0000000..d97e9c3 --- /dev/null +++ b/react-project/src/components/Footer/assets/svgs/diners.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/react-project/src/components/Footer/assets/svgs/divisor.svg b/react-project/src/components/Footer/assets/svgs/divisor.svg new file mode 100644 index 0000000..bf7a225 --- /dev/null +++ b/react-project/src/components/Footer/assets/svgs/divisor.svg @@ -0,0 +1,3 @@ + + + diff --git a/react-project/src/components/Footer/assets/svgs/elo.svg b/react-project/src/components/Footer/assets/svgs/elo.svg new file mode 100644 index 0000000..8b861c4 --- /dev/null +++ b/react-project/src/components/Footer/assets/svgs/elo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/react-project/src/components/Footer/assets/svgs/hiper.svg b/react-project/src/components/Footer/assets/svgs/hiper.svg new file mode 100644 index 0000000..68efb36 --- /dev/null +++ b/react-project/src/components/Footer/assets/svgs/hiper.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/react-project/src/components/Footer/assets/svgs/master.svg b/react-project/src/components/Footer/assets/svgs/master.svg new file mode 100644 index 0000000..edfe014 --- /dev/null +++ b/react-project/src/components/Footer/assets/svgs/master.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/react-project/src/components/Footer/assets/svgs/paypal.svg b/react-project/src/components/Footer/assets/svgs/paypal.svg new file mode 100644 index 0000000..338b510 --- /dev/null +++ b/react-project/src/components/Footer/assets/svgs/paypal.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/react-project/src/components/Footer/assets/svgs/visa.svg b/react-project/src/components/Footer/assets/svgs/visa.svg new file mode 100644 index 0000000..058de04 --- /dev/null +++ b/react-project/src/components/Footer/assets/svgs/visa.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/react-project/src/components/Footer/assets/svgs/vtex-pci.svg b/react-project/src/components/Footer/assets/svgs/vtex-pci.svg new file mode 100644 index 0000000..4ac6598 --- /dev/null +++ b/react-project/src/components/Footer/assets/svgs/vtex-pci.svg @@ -0,0 +1,9 @@ + + + + + + + + +