forked from M3-Academy/desafio-react-e-typescript
feat: adiciona footer
This commit is contained in:
parent
0c351a3524
commit
5d6789dc62
13
Vitor-Soares-main/src/components/Footer/index.tsx
Normal file
13
Vitor-Soares-main/src/components/Footer/index.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import { FooterBottom } from "../FooterBottom";
|
||||
import { FooterTop } from "../FooterTop";
|
||||
import { NewsLetter } from "../NewsLetter";
|
||||
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer>
|
||||
<NewsLetter />
|
||||
<FooterTop />
|
||||
<FooterBottom />
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
109
Vitor-Soares-main/src/components/FooterBottom/index.scss
Normal file
109
Vitor-Soares-main/src/components/FooterBottom/index.scss
Normal file
@ -0,0 +1,109 @@
|
||||
@import "../../styles/index.scss";
|
||||
.footer-bottom {
|
||||
@include large-font-1;
|
||||
background: $panel-bg-1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: white;
|
||||
justify-content: space-between;
|
||||
|
||||
.border {
|
||||
height: 24px;
|
||||
width: 1px;
|
||||
background: $text-cl-5;
|
||||
}
|
||||
|
||||
> p {
|
||||
width: 467px;
|
||||
}
|
||||
|
||||
.extra {
|
||||
&,
|
||||
> * {
|
||||
display: flex;
|
||||
gap: 13px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
text-transform: capitalize;
|
||||
|
||||
padding: 24px $large-padding-inline;
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.payment-methods {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media screen {
|
||||
@media (max-width: 2500px) {
|
||||
@include big-font-1;
|
||||
> p {
|
||||
width: 234px !important;
|
||||
}
|
||||
|
||||
.payment-methods {
|
||||
img {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
li:last-child {
|
||||
height: 34px;
|
||||
img {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.extra img {
|
||||
height: 16px;
|
||||
gap: 13px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
@include big-font-1;
|
||||
display: grid;
|
||||
padding: 22px $big-padding-inline;
|
||||
gap: 15px;
|
||||
> p {
|
||||
width: 234px !important;
|
||||
}
|
||||
|
||||
.payment-methods {
|
||||
order: -1;
|
||||
}
|
||||
}
|
||||
@media (max-width: 375px) {
|
||||
justify-content: unset;
|
||||
align-items: unset;
|
||||
.payment-methods {
|
||||
width: 100%;
|
||||
|
||||
ul {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
gap: 0;
|
||||
}
|
||||
.border {
|
||||
height: 20px;
|
||||
}
|
||||
img {
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
li:last-child {
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
71
Vitor-Soares-main/src/components/FooterBottom/index.tsx
Normal file
71
Vitor-Soares-main/src/components/FooterBottom/index.tsx
Normal file
@ -0,0 +1,71 @@
|
||||
import React from "react";
|
||||
|
||||
import boleto from "../icons/Boleto.svg";
|
||||
import diners from "../icons/Diners.svg";
|
||||
import elo from "../icons/Elo.svg";
|
||||
import hiper from "../icons/Hiper.svg";
|
||||
import m3 from "../icons/m3.svg";
|
||||
import masterCard from "../icons/Master.svg";
|
||||
import payPal from "../icons/Paypal.svg";
|
||||
import visa from "../icons/Visa.svg";
|
||||
import vtexPci from "../icons/vtex-pci-200.svg";
|
||||
import vtex from "../icons/Vtex.svg";
|
||||
import "./index.scss";
|
||||
|
||||
export function FooterBottom() {
|
||||
return (
|
||||
<div className="footer-bottom">
|
||||
<p aria-label="Razão Social">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
||||
tempor
|
||||
</p>
|
||||
<div className="payment-methods">
|
||||
<ul>
|
||||
<li>
|
||||
<img src={masterCard} alt="Mastercard icon" />
|
||||
</li>
|
||||
<li>
|
||||
<img src={visa} alt="Visa icon" />
|
||||
</li>
|
||||
<li>
|
||||
<img src={diners} alt="Diners icon" />
|
||||
</li>
|
||||
<li>
|
||||
<img src={elo} alt="Elo icon" />
|
||||
</li>
|
||||
<li>
|
||||
<img src={hiper} alt="Hiper icon" />
|
||||
</li>
|
||||
<li>
|
||||
<img src={payPal} alt="Paypal icon" />
|
||||
</li>
|
||||
<li>
|
||||
<img src={boleto} alt="Boleto icon" />
|
||||
</li>
|
||||
<li className="border"></li>
|
||||
<li>
|
||||
<img src={vtexPci} alt="VTex pci icon" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="extra">
|
||||
<div className="powered-by">
|
||||
<p>Powered By</p>
|
||||
<ul>
|
||||
<li>
|
||||
<img src={m3} alt="m3 icon" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="developed-by">
|
||||
<p>Developed By</p>
|
||||
<ul>
|
||||
<li>
|
||||
<img src={vtex} alt="vtex icon" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
143
Vitor-Soares-main/src/components/FooterTop/index.scss
Normal file
143
Vitor-Soares-main/src/components/FooterTop/index.scss
Normal file
@ -0,0 +1,143 @@
|
||||
@import "../../styles/index.scss";
|
||||
|
||||
.footer-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 32px;
|
||||
|
||||
.mb-mt {
|
||||
margin-block: 12px;
|
||||
}
|
||||
|
||||
.container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
max-width: 2500px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h2,
|
||||
p {
|
||||
@include large-font-4;
|
||||
}
|
||||
|
||||
h3 {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
color: $text-cl-4;
|
||||
.footer-item {
|
||||
@include large-font-2;
|
||||
text-transform: capitalize;
|
||||
|
||||
header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 12px;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.media-links {
|
||||
.social-icons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
||||
.icon {
|
||||
> div {
|
||||
@include center;
|
||||
height: max-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.plus-icon {
|
||||
@include hide;
|
||||
@include center;
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
padding: 50px $large-padding-inline;
|
||||
@media screen {
|
||||
@media (max-width: 2500px) {
|
||||
.container {
|
||||
max-width: 707px;
|
||||
}
|
||||
h2,
|
||||
p {
|
||||
@include big-font-4;
|
||||
}
|
||||
|
||||
li,
|
||||
h3 {
|
||||
@include big-font-2;
|
||||
}
|
||||
|
||||
.icon-box,
|
||||
.icon {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
padding: 24px $big-padding-inline;
|
||||
|
||||
h2 {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.plus-icon {
|
||||
@include visible;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 100%;
|
||||
flex-direction: column;
|
||||
|
||||
.footer-item.open {
|
||||
.content {
|
||||
padding-inline: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-item:not(.open) {
|
||||
.content {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
191
Vitor-Soares-main/src/components/FooterTop/index.tsx
Normal file
191
Vitor-Soares-main/src/components/FooterTop/index.tsx
Normal file
@ -0,0 +1,191 @@
|
||||
import { Children, ReactElement, ReactNode, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import facebookIcon from "../icons/Facebook.svg";
|
||||
import instagramIcon from "../icons/Instagram.svg";
|
||||
import linkedinIcon from "../icons/Linkedin.svg";
|
||||
import plus from "../icons/Plus.svg";
|
||||
import twitterIcon from "../icons/Twitter.svg";
|
||||
import youtubeIcon from "../icons/Youtube.svg";
|
||||
import "./index.scss";
|
||||
|
||||
function FooterItem({
|
||||
title,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
children?: ReactNode;
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
function toggleOpen() {
|
||||
setOpen(!open);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`footer-item ${open ? "open" : ""}`}>
|
||||
<header>
|
||||
<h2>{title}</h2>
|
||||
<button className="plus-icon" onClick={toggleOpen}>
|
||||
<img src={plus} alt="Open icon" />
|
||||
</button>
|
||||
</header>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function FooterTop() {
|
||||
return (
|
||||
<div className="footer-top">
|
||||
<div className="container">
|
||||
<FooterItem title={"Institucional"}>
|
||||
<ul className="content">
|
||||
<li>
|
||||
<Link to="#">Quem somos</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="#">Política de privacidade</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="#">Segurança</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="#">Seja um revendedor</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</FooterItem>
|
||||
<FooterItem title={"Dúvidas"}>
|
||||
<ul className="content">
|
||||
<li>
|
||||
<Link to="#">Entrega</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="#">Pagamento</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="#">Trocas e devoluções</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="#">Dúvidas Frequentes</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</FooterItem>
|
||||
<FooterItem title={"Fale conosco"}>
|
||||
<div className="content">
|
||||
<h3>Atendimento Ao Consumidor</h3>
|
||||
<ul className="mb-mt">
|
||||
<li>
|
||||
<a href="tel:1141599504" aria-label="Telefone">
|
||||
(11) 4159 9504
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3>Atendimento Online</h3>
|
||||
<ul className="mb-mt">
|
||||
<li>
|
||||
<a href="tel:11994338825" aria-label="Telefone">
|
||||
(11) 99433-8825
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</FooterItem>
|
||||
</div>
|
||||
<div className="media-links">
|
||||
<ul className="social-icons">
|
||||
<li className="icon-box">
|
||||
<a href="#">
|
||||
<img className="icon" src={facebookIcon} alt="facebook icon"/>
|
||||
</a>
|
||||
</li>
|
||||
<li className="icon-box">
|
||||
<a href="#">
|
||||
<img className="icon" src={instagramIcon} alt="facebook icon"/>
|
||||
</a>
|
||||
</li>
|
||||
<li className="icon-box">
|
||||
<a href="#">
|
||||
<img className="icon" src={twitterIcon} alt="twitter icon"/>
|
||||
</a>
|
||||
</li>
|
||||
<li className="icon-box">
|
||||
<a href="#">
|
||||
<img className="icon" src={youtubeIcon} alt="youtube icon"/>
|
||||
</a>
|
||||
</li>
|
||||
<li className="icon-box">
|
||||
<a href="#">
|
||||
<img className="icon" src={linkedinIcon} alt="linkedin icon"/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p>www.loremipsum.com</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/*
|
||||
<div className="footer-item">
|
||||
<h2>Institucional</h2>
|
||||
<button className="plus-icon" onClick={toggleOpen}>
|
||||
<img src={plus} />
|
||||
</button>
|
||||
<ul className="content">
|
||||
<li>
|
||||
<Link to="#">Quem somos</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="#">Política de privacidade</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="#">Segurança</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="#">Seja um revendedor</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="footer-item">
|
||||
<h2>Dúvidas</h2>
|
||||
<button className="plus-icon" onClick={toggleOpen}>
|
||||
<img src={plus} />
|
||||
</button>
|
||||
<ul className="content">
|
||||
<li>
|
||||
<Link to="#">Entrega</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="#">Pagamento</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="#">Trocas e devoluções</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="#">Dúvidas Frequentes</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="footer-item">
|
||||
<h2>Fale conosco</h2>
|
||||
<button className="plus-icon" onClick={toggleOpen}>
|
||||
<img src={plus} />
|
||||
</button>
|
||||
<div className="content">
|
||||
<h3>Atendimento Ao Consumidor</h3>
|
||||
<ul className="mb-mt">
|
||||
<li>
|
||||
<a href="tel:1141599504">(11) 4159 9504</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3>Atendimento Online</h3>
|
||||
<ul className="mb-mt">
|
||||
<li>
|
||||
<a href="tel:11994338825">(11) 99433-8825</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
Loading…
x
Reference in New Issue
Block a user