feat(footer):footerBottom desktop finalizado

desafio-5/src/components/assets/icons/vtex-pci-200.svg

@@ -0,0 +1,9 @@
+<svg width="56" height="34" viewBox="0 0 56 34" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect x="0.408936" width="54.6061" height="34" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_7246_785" transform="translate(0 -0.00590909) scale(0.005 0.0080303)"/>
+</pattern>
+<image id="image0_7246_785" width="200" height="126" xlink:href="data:image/png;base64,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"/>
+</defs>
+</svg>

desafio-5/src/components/modules/footer.module.scss

@@ -70,45 +70,85 @@
             }
         }
     }
+    &_Top{
+        width: 100%;
+    }
     &_bottom{
         background: $-black;
         width: 100%;
+        height: 100%;
         display: flex;
         justify-content: space-between;
+        align-items: center;
         padding: 15px 100px;
-        height: 64px;
         p{
             color: $-white;
-            width: 100%;
+            font-family: 'Roboto',sans-serif;
+            font-style: normal;
+            font-weight: 400;
+            font-size: 10px;
+            line-height: 12px;
+            text-transform: capitalize;
+            width: 234px;
+        }
+
+        &__Payments{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 36.852%;
+            min-height: 100%;
+            fieldset{
+
+                width: 100%;
+                min-width: 83.42%;
+                display: flex;
+                align-items: center;
+                min-height: 20px;
+                gap: 12px;
+                padding-right: 12px;
+                border: none;
+                border-right:  1px  solid $-gray-300;
+
+                &[datatype=Payments]{
+                    border:  none;
+                    width: 100%;
+                    padding-right: 0;
+                    min-width: 16%;
+                    min-height: 34px;
+                }
+                img{
+                    width: 100%;
+                    height: 100%;
+                }
+            }
         }
 
         &_Authors{
             display: flex;
             align-items: center;
             gap: 12px;
-            width: 100%;
+            width:  20.926%;
+            height: 2.965vh;
             p{
-                font-family: 'Roboto',sans-serif;
-                font-style: normal;
-                font-weight: 400;
-                font-size: 10px;
-                line-height: 12px;
-                text-transform: capitalize;
                 width: auto;
+                white-space: nowrap;
             }
             a{
                 width: 100%;
-                background: pink;
-                max-width: 8.89%;
-                min-width: 5.188%;
-                img{
-                    &[datatype=VtexLogo]{
-                        width: 100%;
-                    }
+                height: 100%;
+                width: 100%;
+                &[datatype=LinkVtex]{
+                    width: 19.47%;
+                }
 
-                    &[datatype=M3]{
-                        width: 100%;
-                    }
+                &[datatype=LinkM3]{
+                    width: 12.39%;
+                }
+
+                img{
+                    width: 100%;
+                    height: 100%;
                 }
             }
         }

desafio-5/src/components/scripts/células/FooterBottom.tsx

@@ -1,10 +1,12 @@
 import React from "react";
 import { Author } from "../moleculas/Authors";
+import { PaymentsMethod } from "../moleculas/PaymentsMethod";
 
 interface Calsses {
     Dadclass?: string;
     Authorclass?: string;
     wraaperclass?: string;
+    Paymentsclass?: string;
 }
 
 interface TopFooterProps extends Calsses {
@@ -15,7 +17,7 @@ interface TopFooteratrr extends TopFooterProps {
 }
 
 export const BottomFooter: React.FC<TopFooteratrr> = (
-    {Dadclass,wraaperclass,Authorclass}
+    {Dadclass,wraaperclass,Authorclass,Paymentsclass}
 ) => {
 
 
@@ -25,6 +27,7 @@ export const BottomFooter: React.FC<TopFooteratrr> = (
                 Lorem ipsum dolor sit amet, consectetur adipiscing
                 elit, sed do eiusmod tempor
             </p>
+            <PaymentsMethod Paymentsclass={Paymentsclass}/>
             <Author Authorclass={Authorclass} />
         </div>
     )

desafio-5/src/components/scripts/células/FooterTop.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 interface Calsses {
-    wraaperclass?: string;
+    DadClass?: string;
 }
 
 interface TopFooterProps extends Calsses {
@@ -12,12 +12,12 @@ interface TopFooteratrr extends TopFooterProps {
 }
 
 export const TopFooter: React.FC<TopFooteratrr> = (
-    {wraaperclass}
+    {DadClass}
 ) => {
 
 
     return(
-        <div className={wraaperclass}>
+        <div className={DadClass}>
             Footer top
         </div>
     )

desafio-5/src/components/scripts/footer.tsx

@@ -14,8 +14,9 @@ const Footer = () =>{
                 FormClass={FooterStyles.footer_wrapper_Form__Newsletter}
                 Errorclass={FooterStyles.hiden}
                 />
-                <TopFooter />
+                <TopFooter  DadClass={FooterStyles.footer_Top}/>
                 <BottomFooter Dadclass={FooterStyles.footer_bottom}
+                    Paymentsclass={FooterStyles.footer_bottom__Payments}
                     Authorclass={FooterStyles.footer_bottom_Authors}
 
                 />

desafio-5/src/components/scripts/moleculas/Authors.tsx

@@ -16,11 +16,11 @@ export const Author: React.FC<AuthorProps> = (
     return(
             <div className={Authorclass}>
                 <p>Powered by</p>
-                <a  href="https://vtex.com/br-pt/">
+                <a datatype="LinkVtex" href="https://vtex.com/br-pt/">
                     <img datatype="VtexLogo" src={VtexLogo} alt="vtex logo" />
                 </a>
                 <p>Developed by</p>
-                <a  href="https://m3ecommerce.com">
+                <a datatype="LinkM3"  href="https://m3ecommerce.com">
                     <img datatype="M3" src={M3} alt="M3" />
                 </a>
             </div>

desafio-5/src/components/scripts/moleculas/PaymentsMethod.tsx

@@ -1,4 +1,12 @@
 import React from "react";
+import Master from "../../assets/icons/Master.svg"
+import Visa from "../../assets/icons/Visa.svg"
+import AmericanExpress from "../../assets/icons/Diners.svg"
+import Elo from "../../assets/icons/Elo.svg"
+import HiperCard from "../../assets/icons/Hiper.svg"
+import Pagseguro from "../../assets/icons/Pagseguro.svg"
+import Boleto from "../../assets/icons/Boleto.svg"
+import Vtex from "../../assets/icons/vtex-pci-200.svg"
 
 interface Calsses {
     Paymentsclass?: string;
@@ -16,14 +24,18 @@ export const PaymentsMethod: React.FC<PaymentsMethodatrr> = (
 ) => {
     return(
             <div className={Paymentsclass}>
-                <img datatype="" src="" alt="" />
-                <img datatype="" src="" alt="" />
-                <img datatype="" src="" alt="" />
-                <img datatype="" src="" alt="" />
-                <img datatype="" src="" alt="" />
-                <img datatype="" src="" alt="" />
-                <img datatype="" src="" alt="" />
-                <img datatype="" src="" alt="" />
+                <fieldset >
+                    <img datatype="master__card" src={Master} alt="master card" />
+                    <img datatype="Visa" src={Visa} alt="cartão visa" />
+                    <img datatype="American__Express" src={AmericanExpress} alt="American Express" />
+                    <img datatype="Elo" src={Elo} alt="Elo" />
+                    <img datatype="HiperCard" src={HiperCard} alt="HiperCard" />
+                    <img datatype="Pagseguro" src={Pagseguro} alt="Pay Pal" />
+                    <img datatype="Boleto" src={Boleto} alt="Boleto" />
+                </fieldset>
+                <fieldset datatype="Payments">
+                    <img datatype="VtexPci" src={Vtex} alt="VtexPci" />
+                </fieldset>
             </div>
     )
 };