From bb5d59f1a1dab2788a77776bb4690dd2bcb64f6e Mon Sep 17 00:00:00 2001
From: Rhayllon <rhayllom@hotmail.com>
Date: Thu, 5 Jan 2023 15:33:37 -0300
Subject: [PATCH] Feat(Footer): Cria Footer Midle(Links) e Bottom(Cards...)

---
 desafio/src/components/Footer.tsx            | 186 +++++++++++++++++
 desafio/src/pages/Home.tsx                   |   2 +
 desafio/src/scss/partials/footer.module.scss | 197 +++++++++++++++++++
 3 files changed, 385 insertions(+)
 create mode 100644 desafio/src/components/Footer.tsx
 create mode 100644 desafio/src/scss/partials/footer.module.scss

diff --git a/desafio/src/components/Footer.tsx b/desafio/src/components/Footer.tsx
new file mode 100644
index 0000000..993a581
--- /dev/null
+++ b/desafio/src/components/Footer.tsx
@@ -0,0 +1,186 @@
+import React from "react";
+
+import styles from "../scss/partials/footer.module.scss"
+
+import CardMaster from "../assets/imgs/CardMaster.png"
+import CardAmex from "../assets/imgs/CardAmex.png"
+import CardElo from "../assets/imgs/CardElo.png"
+import CardVisa from "../assets/imgs/CardVisa.png"
+import CardHiper from "../assets/imgs/CardHiper.png"
+import Paypal from "../assets/imgs/Paypal.png"
+import Boleto from "../assets/imgs/Boleto.png"
+import VtexPci from "../assets/imgs/vtex-pci-200.png"
+
+import LogoM3 from "../assets/imgs/LogoM3.png"
+import LogoVtex from "../assets/imgs/LogoVtex.png"
+
+import facebookIcon from "../assets/svgs/facebookIcon.svg"
+import instagramIcon from "../assets/svgs/instagramIcon.svg"
+import twitterIcon from "../assets/svgs/twitterIcon.svg"
+import youtubeIcon from "../assets/svgs/youtubeIcon.svg"
+import linkedinIcon from "../assets/svgs/linkedinIcon.svg"
+
+
+const Footer = () => {
+    return <footer className={styles["page-footer"]}>
+        <FooterMidle/>
+        <FooterBottom/>
+
+    </footer>
+}
+
+const FooterMidle = () => {
+    return <section className={styles["page-footer__fM-wrapper"]}>
+        <div className={styles["page-footer__fM-colum-wrapper"]}>
+            <div className={styles["page-footer__fM-colum-wrapper__colum"]}>
+                <h4 className={styles["page-footer__fM-colum-wrapper__Title"]}>Institucional</h4>
+
+                <ul className={styles["page-footer__fM-colum-wrapper__links"]}>
+
+                    <li className={styles["page-footer__fM-colum-wrapper__links__link"]}>
+                        <a href="">Quem Somos</a>
+                    </li>
+
+                    <li className={styles["page-footer__fM-colum-wrapper__links__link"]}>
+                        <a href="">Política de Privacidade</a>
+                    </li>
+
+                    <li className={styles["page-footer__fM-colum-wrapper__links__link"]}>
+                        <a href="">Segurança</a>
+                    </li>
+
+                    <li className={styles["page-footer__fM-colum-wrapper__links__link"]}>
+                        <a href="">Seja um Revendedor</a>
+                    </li>
+                </ul>
+            </div>
+            
+            <div className={styles["page-footer__fM-colum-wrapper__colum"]}>
+                <h4 className={styles["page-footer__fM-colum-wrapper__Title"]}>dÚVIDAS</h4>
+
+                <ul className={styles["page-footer__fM-colum-wrapper__links"]}>
+
+                    <li className={styles["page-footer__fM-colum-wrapper__links__link"]}>
+                        <a href="">Quem Somos</a>
+                    </li>
+
+                    <li className={styles["page-footer__fM-colum-wrapper__links__link"]}>
+                        <a href="">Política de Privacidade</a>
+                    </li>
+
+                    <li className={styles["page-footer__fM-colum-wrapper__links__link"]}>
+                        <a href="">Segurança</a>
+                    </li>
+
+                    <li className={styles["page-footer__fM-colum-wrapper__links__link"]}>
+                        <a href="">Seja um Revendedor</a>
+                    </li>
+                </ul>
+            </div>
+
+            <div className={styles["page-footer__fM-colum-wrapper__colum"]}>
+                <h4 className={styles["page-footer__fM-colum-wrapper__Title"]}>Institucional</h4>
+
+                <ul className={styles["page-footer__fM-colum-wrapper__links"]}>
+
+                    <li className={styles["page-footer__fM-colum-wrapper__links__link"]}>
+                        <h5>Atendimento ao Consumidor</h5>
+                        <a href="">(11) 4159 9504</a>
+                    </li>
+
+                    <li className={styles["page-footer__fM-colum-wrapper__links__link"]}>
+                        <h5>Atendimento online</h5>
+                        <a href="">(11) 4159 9504</a>
+                    </li>
+                </ul>
+            </div>
+
+            <div className={styles["page-footer__fM-colum-wrapper__colum-social"]}>
+                
+                <ul className={styles["page-footer__fM-colum-wrapper__links-social"]}>
+
+                    <li className={styles["page-footer__fM-colum-wrapper__links-social__link"]}>
+                        <a href=""><img src= { facebookIcon } alt="" /></a>
+                    </li>
+
+                    <li className={styles["page-footer__fM-colum-wrapper__links-social__link"]}>
+                        <a href=""><img src= { instagramIcon } alt="" /></a>
+                    </li>
+
+                    <li className={styles["page-footer__fM-colum-wrapper__links-social__link"]}>
+                        <a href=""><img src= { twitterIcon } alt="" /></a>
+                    </li>
+
+                    <li className={styles["page-footer__fM-colum-wrapper__links-social__link"]}>
+                        <a href=""><img src= { youtubeIcon } alt="" /></a>
+                    </li>
+
+                    <li className={styles["page-footer__fM-colum-wrapper__links-social__link"]}>
+                        <a href=""><img src= { linkedinIcon } alt="" /></a>
+                    </li>
+                </ul>
+
+                <a href="">www.loremipsum.com</a>
+            </div>
+
+        </div>
+    </section>
+}
+
+const FooterBottom = () => {
+    return <section className={styles["page-footer__fB-wrapper"]}>
+        <div className={styles["page-footer__wrapper-content"]}>
+            <div className={styles["page-footer__fB-wrapper__text-wrapper"]}><p className={styles["page-footer__fB-wrapper__text-wrapper__text"]}> Lorem ipsum dolor sit amet, consectetur adipiscing
+            elit, sed do eiusmod tempor</p></div>
+
+            <div className={styles["page-footer__fB-wrapper__cards-total-wrapper"]}>
+                <ul className={styles["page-footer__fB-wrapper__cards-total-wrapper__cards-wrapper"]}>
+                    <li className={styles["page-footer__fB-wrapper__cards-total-wrapper__cards-wrapper__cards"]}>
+                        <figure><img src= { CardMaster } alt="" /></figure>
+                    </li>
+                    <li className={styles["page-footer__fB-wrapper__cards-total-wrapper__cards-wrapper__cards"]}>
+                        <figure><img src= { CardVisa } alt="" /></figure>
+                    </li>
+                    <li className={styles["page-footer__fB-wrapper__cards-total-wrapper__cards-wrapper__cards"]}>
+                        <figure><img src= { CardAmex } alt="" /></figure>
+                    </li>
+                    <li className={styles["page-footer__fB-wrapper__cards-total-wrapper__cards-wrapper__cards"]}>
+                        <figure><img src= { CardElo } alt="" /></figure>
+                    </li>
+                    <li className={styles["page-footer__fB-wrapper__cards-total-wrapper__cards-wrapper__cards"]}>
+                        <figure><img src= { CardHiper } alt="" /></figure>
+                    </li>
+                    <li className={styles["page-footer__fB-wrapper__cards-total-wrapper__cards-wrapper__cards"]}>
+                        <figure><img src= { Paypal } alt="" /></figure>
+                    </li>
+                    <li className={styles["page-footer__fB-wrapper__cards-total-wrapper__cards-wrapper__cards"]}>
+                        <figure><img src= { Boleto } alt="" /></figure>
+                    </li>
+
+                    <li className={styles["page-footer__fB-wrapper__cards-total-wrapper__cards-wrapper__divider"]}><span></span></li>
+
+                    <li className={styles["page-footer__fB-wrapper__cards-total-wrapper__cards-wrapper__cards"]}>
+                        <figure><img src= { VtexPci } alt="" /></figure>
+                    </li>
+                </ul>
+            </div>
+
+
+            <div className={styles["page-footer__fB-wrapper__developmentTechnologies-wrapper"]}>
+                <ul className={styles["page-footer__fB-wrapper__developmentTechnologies-wrapper__wrapper"]}>
+                    <li className={styles["page-footer__fB-wrapper__developmentTechnologies-wrapper__wrapper__tecnologies"]}>
+                        <span className={styles["page-footer__fB-wrapper__developmentTechnologies-wrapper__wrapper__tecnologies__text"]}>Powered by</span>
+                        <a className={styles["page-footer__fB-wrapper__developmentTechnologies-wrapper__wrapper__tecnologies__image"]} href=""><img src= { LogoVtex } alt="" /></a>
+                    </li>
+                    <li className={styles["page-footer__fB-wrapper__developmentTechnologies-wrapper__wrapper__tecnologies"]}>
+                        <span className={styles["page-footer__fB-wrapper__developmentTechnologies-wrapper__wrapper__tecnologies__text"]}>Developed by</span>
+                        <a className={styles["page-footer__fB-wrapper__developmentTechnologies-wrapper__wrapper__tecnologies__image"]} href=""><img src= { LogoM3 } alt="" /></a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </section>
+}
+
+
+export { Footer };
\ No newline at end of file
diff --git a/desafio/src/pages/Home.tsx b/desafio/src/pages/Home.tsx
index 51dae3d..e403e81 100644
--- a/desafio/src/pages/Home.tsx
+++ b/desafio/src/pages/Home.tsx
@@ -1,10 +1,12 @@
 import React from "react";
 
 import { Header } from "../components/Header"
+import { Footer } from "../components/Footer"
 
 const Home = () => {
     return <>
         <Header/>
+        <Footer/>
     </>;
 };
 
diff --git a/desafio/src/scss/partials/footer.module.scss b/desafio/src/scss/partials/footer.module.scss
new file mode 100644
index 0000000..6a53152
--- /dev/null
+++ b/desafio/src/scss/partials/footer.module.scss
@@ -0,0 +1,197 @@
+.page-footer {
+    width: 100%;
+
+    figure{
+        margin: 0;
+        padding: 0;
+        display: flex;
+    }
+
+    &__wrapper-content{
+        width: 84.38%;
+        margin: 0 auto;
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+    }
+
+    &__fM-wrapper{
+        padding: 50px 0;
+    }
+
+    &__fM-colum-wrapper{
+        width: 84.38%;
+        margin: 0 auto;
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 121px;
+        justify-content: center;
+
+        a{
+            text-decoration: none;
+            font-family: var(--font-roboto);
+            font-weight: 400;
+            font-size: 12px;
+            line-height: 14px;
+            color: var(--black2);
+        }
+
+        &__colum{
+
+            max-width: 155px;
+
+            a{
+                text-transform: capitalize;
+            }
+
+            h5{
+                margin: 0;
+                font-family: var(--font-roboto);
+                font-style: normal;
+                font-weight: 500;
+                font-size: 12px;
+                line-height: 14px;
+                text-transform: capitalize;
+                color: var(--black2);
+                padding-bottom: 12px;
+            }
+
+        }
+
+        &__Title{
+            margin: 0;
+            font-family: var(--font-roboto);
+            font-style: normal;
+            font-weight: 500;
+            font-size: 14px;
+            line-height: 16px;
+            text-transform: uppercase;
+            color: var(--black2);
+            padding-bottom: 12px;
+
+        }
+
+        &__links,
+        &__links-social{
+
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+        }
+
+        &__links{
+            outline: 0;
+
+            &__link{
+                display: grid;
+                padding-bottom: 12px;
+            }
+        }
+
+        &__links-social{
+            list-style-type: none;
+            padding: 0;
+            display: grid;
+            grid-auto-flow: column;
+            grid-auto-columns: max-content;
+            gap: 10px;
+            align-items: center;
+            margin: 0;
+
+            a{
+                text-transform: none;
+            }
+
+            &__link{
+                outline: 0;
+            }
+        }
+    }
+
+    &__fB-wrapper{
+        background-color: var(--black1);
+        width: 100%;
+
+        &__text-wrapper{
+            display: flex;
+            align-items: center;
+            padding: 20px 0;
+
+            &__text{
+                color: var(--white1);
+                margin: 0;
+                font-family: var(--font-roboto);
+                font-weight: 400;
+                font-size: 10px;
+                line-height: 12px;
+                text-transform: capitalize;
+                width: 69.64%;
+            }
+        }
+
+        &__cards-total-wrapper{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 15px 0;
+
+            &__cards-wrapper{
+
+                list-style-type: none;
+                padding: 0;
+                display: grid;
+                grid-auto-flow: column;
+                grid-auto-columns: max-content;
+                gap: 12px;
+                align-items: center;
+                margin: 0;
+
+                &__cards{
+                    outline: 0;
+                }
+
+                &__divider{
+                    width: 1px;
+                    height: 24px;
+                    background-color: var(--grey2)
+                }
+            }
+        }
+
+        &__developmentTechnologies-wrapper{
+            display: flex;
+            justify-content: end;
+            align-items: center;
+            padding: 24px 0;
+
+            &__wrapper{
+
+                list-style-type: none;
+                padding: 0;
+                display: grid;
+                grid-template-columns: repeat(2, max-content);
+                margin: 0;
+                justify-items: end;
+                gap: 13px;
+
+                &__tecnologies{
+                    display: flex;
+                    align-items: center;
+                    gap: 13px;
+
+                    &__text{
+                        color: var(--white1);
+                        font-family: var(--font-roboto);
+                        font-weight: 400;
+                        font-size: 10px;
+                        line-height: 12px;
+                        text-transform: capitalize;
+                    }
+
+                    &__image{
+                        outline: 0;
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
-- 
2.34.1