forked from M3-Academy/desafio-react-e-typescript
feat: adicionando estrutura do footer
This commit is contained in:
parent
7d342076d9
commit
8a60bc4054
@ -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
|
||||
Loading…
Reference in New Issue
Block a user