From 8a60bc405482b78244ac8f4792179e6382c6c4d4 Mon Sep 17 00:00:00 2001
From: MateusLopes <mateus20.lopes02@gmail.com>
Date: Sun, 8 Jan 2023 12:07:06 -0300
Subject: [PATCH] feat: adicionando estrutura do footer

---
 src/components/footer/Footer.tsx | 172 ++++++++++++++++++++++++++++++-
 1 file changed, 171 insertions(+), 1 deletion(-)

diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx
index 5e66856..e1567f3 100644
--- a/src/components/footer/Footer.tsx
+++ b/src/components/footer/Footer.tsx
@@ -1,7 +1,177 @@
+import React from 'react'
+import FooterMenu from './FooterMenu'
+import './footer.scss'
+import iconFacebook from '../../assets/svgs/icon-facebook.svg'
+import iconInstagram from '../../assets/svgs/icon-instagram.svg'
+import iconTwitter from '../../assets/svgs/icon-twitter.svg'
+import iconYoutube from '../../assets/svgs/icon-youtube.svg'
+import iconLinkedin from '../../assets/svgs/icon-linkedin.svg'
+import iconM3 from '../../assets/imgs/icon-m3.png'
+import logoBoleto from '../../assets/imgs/logo-boleto.png'
+import logoDiners from '../../assets/imgs/logo-diners.png'
+import logoElo from '../../assets/imgs/logo-elo.png'
+import logoHiper from '../../assets/imgs/logo-hiper.png'
+import logoMaster from '../../assets/imgs/logo-master.png'
+import logoPagseguro from '../../assets/imgs/logo-pagseguro.png'
+import logoVisa from '../../assets/imgs/logo-visa.png'
+import logoVtexPci from '../../assets/imgs/logo-vtex-pci-200.png'
+import logoVtex from '../../assets/imgs/logo-vtex.png'
+
 const Footer = () => {
+      const menuListData = [
+        {
+            title: 'Institucional',
+            content1: `Quem Somos`,
+            content2: `Política de Privacidade`,
+            content3: `Segurança`,
+            content4: `Seja um Revendedor`,
+        },
+        {
+            title: 'Dúvidas',
+            content1: `Entrega`,
+            content2: `Pagamento`,
+            content3: `Trocas e Devoluções`,
+            content4: `Dúvidas Frequentes`,
+        },
+        {
+            title: 'Fale Conosco',
+            content1: `Atendimento ao Consumidor`,
+            content2: `(11) 4159 9504`,
+            content3: `Atendimento Online`,
+            content4: `(11) 99433-8825`,
+        }
+    ]
+
   return (
-    <div>Footer</div>
+    <footer>
+      <div className="newsletter-wrapper">
+        <div className="newsletter">
+          <h3 className="newsletter-title">Assine nossa newsletter</h3>
+          <div className='second-wrapper'>
+            <input className="newsletter-input" type="email" name="" id="" placeholder="E-mail"/>
+            <button className="newsletter-btn" type="submit">Enviar</button>
+          </div>
+        </div>
+      </div>
+
+      <div className="footer-top">
+          <ul className="menu-footer-mobile">
+              {menuListData.map(
+                  ({title, content1, content2, content3, content4}, index) => (
+                  <FooterMenu
+                    title={title}
+                    content1={content1}
+                    content2={content2}
+                    content3={content3}
+                    content4={content4}
+                    key={index}
+                   />
+                  )
+              )}
+          </ul>
+
+          <ul className='menu-footer'>
+            <li className='menu-footer-title'>Institucional</li>
+            <li>
+              <a href="/">Quem Somos</a>
+            </li>
+            <li>
+              <a href="/">Política de Privacidade</a>
+            </li>
+            <li>
+              <a href="/">Segurança</a>
+            </li>
+            <li> 
+              <a href="/">Seja um Revendedor</a>
+            </li>
+          </ul>
+
+          <ul className='menu-footer'>
+            <li className='menu-footer-title'>Dúvidas</li>
+            <li>
+              <a href="/">Entrega</a>
+            </li>
+            <li>
+              <a href="/">Pagamento</a>
+            </li>
+            <li>
+              <a href="/">Trocas e Devoluções</a>
+            </li>
+            <li>
+              <a href="/">Dúvidas Frequentes</a>
+            </li>
+          </ul>
+
+          <ul className='menu-footer'>
+            <li className='menu-footer-title'>Fale Conosco</li>
+            <li>
+              <a href="/" className='bold'>Atendimento Ao Consumidor</a>
+            </li>
+            <li>
+              <a href="/">(11) 4159 9504</a>
+            </li>
+            <li>
+              <a href="/" className='bold'>Atendimento Online</a>
+            </li>
+            <li>
+              <a href="/">(11) 99433-8824</a>
+            </li>
+          </ul>
+
+        <div className="social">
+          <div className="social-links">
+            <a href="/">
+              <img src={iconFacebook} alt="Icone do Facebook dentro de um circulo" />
+            </a>
+            <a href="/">
+              <img src={iconInstagram} alt="Icone do Instagram dentro de um circulo" />
+            </a>
+            <a href="/">
+              <img src={iconTwitter} alt="Icone do Twitter dentro de um circulo" />
+            </a>
+            <a href="/">
+              <img src={iconYoutube} alt="Icone do YouTube dentro de um circulo" />
+            </a>
+            <a href="/">
+              <img src={iconLinkedin} alt="Icone do Linkedin dentro de um circulo" />
+            </a>
+          </div>
+          <a className='link' href="/">www.loremipsum.com</a>
+        </div>
+      </div>
+
+      <div className="footer-bottom">
+        <div className="social-reason">
+          Lorem ipsum dolor sit amet, consectetur adipiscing
+          elit, sed do eiusmod tempor
+        </div>
+
+        <div className="payment-metods">
+          <img src={logoMaster} alt="Logo Visa" />
+          <img src={logoVisa} alt="Logo " />
+          <img src={logoDiners} alt="Logo " />
+          <img src={logoElo} alt="Logo " />
+          <img src={logoHiper} alt="Logo " />
+          <img src={logoPagseguro} alt="Logo " />
+          <img src={logoBoleto} alt="Logo " />
+          <div className="line"></div>
+          <img src={logoVtexPci} alt="Logo " />
+        </div>
+
+        <div className="authors">
+          <div className="vtex">
+            <span>Powered by</span>
+            <img src={logoVtex} alt="Logo da Vtex" />
+          </div>
+          <div className="m3">
+            <span>Developed by</span>
+            <img src={iconM3} alt="Logo M3" />
+          </div>
+        </div>
+      </div>
+    </footer>
   )
+
 }
 
 export default Footer
\ No newline at end of file