forked from M3-Academy/desafio-react-e-typescript
feat: Adiciona footer
This commit is contained in:
parent
589e14a541
commit
7dce3bc1f0
323
src/components/footer/Footer.module.css
Normal file
323
src/components/footer/Footer.module.css
Normal file
@ -0,0 +1,323 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
box-sizing: border-box;
|
||||
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.footer-list-abrir {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.footer-bottom {
|
||||
max-width: 100%;
|
||||
height: 65px;
|
||||
display: flex;
|
||||
background: #000000;
|
||||
margin-top: 39px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.footer-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 158px;
|
||||
padding-top: 25px;
|
||||
|
||||
}
|
||||
|
||||
.footer-flex {
|
||||
display: flex;
|
||||
gap: 60px;
|
||||
text-align: initial;
|
||||
}
|
||||
|
||||
.footer-list,
|
||||
.footer-mobile-list {
|
||||
list-style: none;
|
||||
|
||||
}
|
||||
|
||||
.footer-list li,
|
||||
.footer-mobile-list li {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: #303030;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.footer-list-title,
|
||||
.footer-mobile-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.footer-title {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #303030;
|
||||
padding-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.footer-list-icon img {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.footer-list-icon p
|
||||
.fotter-mobile-list-icon {
|
||||
font-family: 'Roboto';
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #303030;
|
||||
text-align: left;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.footer-list-underline
|
||||
.footer-mobile-list-underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.footer-description-desktop {
|
||||
font-family: 'Roboto';
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
text-transform: capitalize;
|
||||
color: #FFFFFF;
|
||||
max-width: 234px;
|
||||
max-height: 24px;
|
||||
text-align: left;
|
||||
margin: 22px 172px 19px 32px;
|
||||
}
|
||||
|
||||
|
||||
.footer-cards {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 13px;
|
||||
padding: 22px 0 22px;
|
||||
}
|
||||
|
||||
.footer-vtex {
|
||||
border-left: 1px solid #C4C4C4;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.footer-by {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 189px;
|
||||
padding-right: 32px;
|
||||
|
||||
}
|
||||
|
||||
.footer-by-description {
|
||||
font-family: 'Roboto';
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
color: #FFFFFF;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.footer-flex-list {
|
||||
display: flex;
|
||||
gap: 121px;
|
||||
margin-right: 100px;
|
||||
}
|
||||
|
||||
.footer-by img {
|
||||
padding-right: 15px
|
||||
}
|
||||
|
||||
.footer-bottom-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.footer-description-desktop,
|
||||
.fotter-description-mobile {
|
||||
|
||||
font-family: 'Roboto';
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
text-transform: capitalize;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1260px) {
|
||||
.footer-description-desktop {
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1117px) {
|
||||
.footer-by {
|
||||
padding-left: 12px;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 961px) {
|
||||
.footer-description-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
.footer-flex-list {
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.footer-wrapper {
|
||||
gap: 35px;
|
||||
}
|
||||
|
||||
.footer-description-desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer-description-mobile {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.footer-cards {
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px) {
|
||||
.footer-mobile-flex-list {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.footer-wrapper {
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.footer-flex {
|
||||
padding-left: 27px;
|
||||
justify-content: space-between;
|
||||
padding-right: 23px;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.footer-mobile-flex h4 {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #303030;
|
||||
}
|
||||
|
||||
.footer-wrapper p {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer-list-icon {
|
||||
justify-content: flex-start;
|
||||
display: flex;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.footer-cards {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.footer-list-abrir {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 35px;
|
||||
}
|
||||
|
||||
.footer-flex-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.footer-mobile-title {
|
||||
font-family: 'Roboto';
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #303030;
|
||||
text-transform: none;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.footer-bottom-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
flex-direction: column;
|
||||
height: 124px;
|
||||
padding: 16px 16px 16px 17px;
|
||||
}
|
||||
|
||||
.footer-description-mobile {
|
||||
margin: 0;
|
||||
max-width: 380px;
|
||||
height: 12px;
|
||||
line-height: 12px;
|
||||
padding-top: 12px;
|
||||
font-family: 'Roboto';
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
text-transform: capitalize;
|
||||
text-align: initial;
|
||||
color: #FFFFFF;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.footer-by {
|
||||
padding-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.footer-flex-list {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer-mobile {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
203
src/components/footer/Footer.tsx
Normal file
203
src/components/footer/Footer.tsx
Normal file
@ -0,0 +1,203 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
import styles from "./Footer.module.css";
|
||||
|
||||
import Abrir from "../assets/img/abrir-icon.png";
|
||||
import Face from "../assets/img/face-icon.png";
|
||||
import Insta from "../assets/img/insta-icon.png";
|
||||
import Twitter from "../assets/img/twitter-icon.png";
|
||||
import Youtube from "../assets/img/youtube-icon.png";
|
||||
import Linkedin from "../assets/img/in-icon.png";
|
||||
import Master from "../assets/img/master-icon.png";
|
||||
import Visa from "../assets/img/visa-icon.png";
|
||||
import American from "../assets/img/american-icon.png";
|
||||
import Elo from "../assets/img/elo-icon.png";
|
||||
import Hiper from "../assets/img/hiper-icon.png";
|
||||
import Paypal from "../assets/img/paypal-icon.png";
|
||||
import Boleto from "../assets/img/boleto-icon.png";
|
||||
import Vtex from "../assets/img/vtex-icon.png";
|
||||
import M3 from "../assets/img/footer-m3-icon.png";
|
||||
import Vtex_logo from "../assets/img/footer-vtex-icon.png";
|
||||
|
||||
const Footer = () => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const handleToggle = () => {
|
||||
setIsOpen(!isOpen);
|
||||
};
|
||||
return (
|
||||
<div className={styles["footer-container"]}>
|
||||
<div className={styles["footer-wrapper"]}>
|
||||
<div className={styles["footer-flex"]}>
|
||||
<nav className={styles["footer-flex-list"]}>
|
||||
<div className={styles["footer-list-title"]}>
|
||||
<h4 className={styles["footer-title"]}>Institucional</h4>
|
||||
<ul className={styles["footer-list"]}>
|
||||
<li>Quem Somos</li>
|
||||
<li>Política de Privacidade</li>
|
||||
<li>Segurança</li>
|
||||
<li className={styles["footer-list-underline"]}>
|
||||
Seja um Revendedor
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className={styles["footer-list-title"]}>
|
||||
<h4 className={styles["footer-title"]}>Dúvidas</h4>
|
||||
<ul className={styles["footer-list"]}>
|
||||
<li>Entrega</li>
|
||||
<li>Pagamento</li>
|
||||
<li>Trocas e Devoluções</li>
|
||||
<li>Dúvidas Frequentes</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className={styles["footer-list-title"]}>
|
||||
<h4 className={styles["footer-title"]}>Fale Conosco</h4>
|
||||
<ul className={styles["footer-list"]}>
|
||||
<li>Atendimento ao Consumidor</li>
|
||||
<li>(11) 4159 9504</li>
|
||||
<li>Atendimento Online</li>
|
||||
<li>(11) 99433-8825</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav className={styles["footer-mobile-flex-list"]}>
|
||||
<div className={styles["footer-mobile-list-flex"]}>
|
||||
<div className={styles["footer-mobile-list-title"]}>
|
||||
<h4
|
||||
className={styles["footer-mobile-title"]}
|
||||
onClick={handleToggle}
|
||||
>
|
||||
Institucional
|
||||
</h4>
|
||||
{isOpen === true ? (
|
||||
<ul className={styles["footer-mobile-list"]}>
|
||||
<li>Quem Somos</li>
|
||||
<li>Política de Privacidade</li>
|
||||
<li>Segurança</li>
|
||||
<li className={styles["footer-mobile-list-underline"]}>
|
||||
Seja um Revendedor
|
||||
</li>
|
||||
</ul>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles["footer-mobile-list-title"]}>
|
||||
<h4
|
||||
className={styles["footer-mobile-title"]}
|
||||
onClick={handleToggle}
|
||||
>
|
||||
Dúvidas
|
||||
</h4>
|
||||
{isOpen === true ? (
|
||||
<ul className={styles["footer-mobile-list"]}>
|
||||
<li>Entrega</li>
|
||||
<li>Pagamento</li>
|
||||
<li>Trocas e Devoluções</li>
|
||||
<li>Dúvidas Frequentes</li>
|
||||
</ul>
|
||||
) : null}
|
||||
</div>
|
||||
<div className={styles["footer-mobile-list-title"]}>
|
||||
<h4
|
||||
className={styles["footer-mobile-title"]}
|
||||
onClick={handleToggle}
|
||||
>
|
||||
Fale Conosco
|
||||
</h4>
|
||||
{isOpen === true ? (
|
||||
<ul className={styles["footer-mobile-list"]}>
|
||||
<li>Atendimento ao Consumidor</li>
|
||||
<li>(11) 4159 9504</li>
|
||||
<li>Atendimento Online</li>
|
||||
<li>(11) 99433-8825</li>
|
||||
</ul>
|
||||
) : null}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div className={styles["footer-list-abrir"]}>
|
||||
<a href="/">
|
||||
<img src={Abrir} alt="Abrir" />
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src={Abrir} alt="Abrir" />
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src={Abrir} alt="Abrir" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles["footer-list-icon"]}>
|
||||
<a href="/">
|
||||
<img src={Face} alt="Facebook" />
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src={Insta} alt="Instagram" />
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src={Twitter} alt="Twitter" />
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src={Youtube} alt="Youtube" />
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src={Linkedin} alt="Linkedin" />
|
||||
</a>
|
||||
<p>www.loremipsum.com</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles["footer-bottom"]}>
|
||||
<div className={styles["footer-bottom-wrapper"]}>
|
||||
<div className={styles["footer-description"]}>
|
||||
<p className={styles["footer-description-desktop"]}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor
|
||||
</p>
|
||||
<p className={styles["footer-description-mobile"]}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. .
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles["footer-cards"]}>
|
||||
<a href="/">
|
||||
<img src={Master} alt="Facebook" />
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src={Visa} alt="Visa" />
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src={American} alt="American" />
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src={Elo} alt="Elo" />
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src={Hiper} alt="Hiper" />
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src={Paypal} alt="PayPal" />
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src={Boleto} alt="Boleto" />
|
||||
</a>
|
||||
<a className={styles["footer-vtex"]} href="/">
|
||||
<img src={Vtex} alt="Vtex" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles["footer-by"]}>
|
||||
<p className={styles["footer-by-description"]}>Powered by</p>
|
||||
<img src={Vtex_logo} alt="Vtex" />
|
||||
<p className={styles["footer-by-description"]}>Developed by</p>
|
||||
<img src={M3} alt="Logo M3" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
Loading…
Reference in New Issue
Block a user