forked from M3-Academy/desafio-react-e-typescript
feat: Cria footer desktop
This commit is contained in:
parent
dbcf6b2792
commit
a0aaf42600
@ -1,7 +1,200 @@
|
||||
import React from "react";
|
||||
|
||||
const Footer = () => {
|
||||
return <div></div>
|
||||
}
|
||||
import styles from "../footer/style.module.scss";
|
||||
|
||||
export { Footer };
|
||||
// Social media icons
|
||||
|
||||
import Facebook from "../../assets/svgs/facebook-icon.svg";
|
||||
import Instagram from "../../assets/svgs/instagram-icon.svg";
|
||||
import Twitter from "../../assets/svgs/twitter-icon.svg";
|
||||
import Youtube from "../../assets/svgs/youtube-icon.svg";
|
||||
import LinkedIn from "../../assets/svgs/linkedin-icon.svg";
|
||||
|
||||
// Creditcard icons
|
||||
|
||||
import MasterCard from "../../assets/svgs/master.svg";
|
||||
import Visa from "../../assets/svgs/visa.svg";
|
||||
import Amex from "../../assets/svgs/american-express.svg";
|
||||
import Elo from "../../assets/svgs/elo.svg";
|
||||
import Hipercard from "../../assets/svgs/hiper.svg";
|
||||
import PayPal from "../../assets/svgs/paypal.svg";
|
||||
import Boleto from "../../assets/svgs/boleto.svg";
|
||||
|
||||
import PCIVtex from "../../assets/svgs/vtex-pci-200.svg";
|
||||
|
||||
// Vtex e M3 logo
|
||||
|
||||
import Vtex from "../../assets/svgs/vtex-logo.svg";
|
||||
import M3 from "../../assets/svgs/m3-logo.svg";
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<div>
|
||||
<section className={styles["newsletter"]}>
|
||||
<div className={styles["newsletter__wrapper"]}>
|
||||
<h2 className={styles["newsletter__title"]}>
|
||||
Assine nossa newsletter
|
||||
</h2>
|
||||
<input type="text" placeholder="E-mail" />
|
||||
<button type="submit">Enviar</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className={styles["footer-top"]}>
|
||||
<div className={styles["footer-top__menu-list"]}>
|
||||
<div className={styles["menu"]}>
|
||||
<h3>Institucional</h3>
|
||||
<ul>
|
||||
<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 className={styles["line"]} href="/">
|
||||
Seja um Revendedor
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className={styles["menu"]}>
|
||||
<h3>Dúvidas</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/">Entrega</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/">Pagamento</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/">Trocas e Devoluções</a>
|
||||
</li>
|
||||
<li>
|
||||
<a className={styles["line"]} href="/">
|
||||
Dúvidas Frequentes
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className={styles["menu"]}>
|
||||
<h3>Fale Conosco</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<p className={styles["atendimento"]}>
|
||||
Atendimento ao Consumidor
|
||||
</p>
|
||||
</li>
|
||||
<li>(11) 4159 9504</li>
|
||||
<li>
|
||||
<p className={styles["atendimento"]}>Atendimento Online</p>
|
||||
</li>
|
||||
<li>(11) 99433-8825</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className={styles["social-media-icons"]}>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/">
|
||||
<img src={Facebook} alt="Link para o Facebook" />
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/">
|
||||
<img src={Instagram} alt="Link para o Instagram" />
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/">
|
||||
<img src={Twitter} alt="Link para o Twitter" />
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/">
|
||||
<img src={Youtube} alt="Link para o Youtube" />
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/">
|
||||
<img src={LinkedIn} alt="Link para o LinkedIn" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>www.loremipsum.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className={styles["footer-bottom"]}>
|
||||
<div className={styles["footer-bottom__wrapper"]}>
|
||||
<div className={styles["address"]}>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor
|
||||
</p>
|
||||
</div>
|
||||
<ul className={styles["stamps"]}>
|
||||
<li className={styles["creditcard"]}>
|
||||
<img src={MasterCard} alt="Mastercard" />
|
||||
</li>
|
||||
<li className={styles["creditcard"]}>
|
||||
<img src={Visa} alt="Visa" />
|
||||
</li>
|
||||
<li className={styles["creditcard"]}>
|
||||
<img src={Amex} alt="American Express" />
|
||||
</li>
|
||||
<li className={styles["creditcard"]}>
|
||||
<img src={Elo} alt="Elo" />
|
||||
</li>
|
||||
<li className={styles["creditcard"]}>
|
||||
<img src={Hipercard} alt="Hipercard" />
|
||||
</li>
|
||||
<li className={styles["creditcard"]}>
|
||||
<img src={PayPal} alt="PayPal" />
|
||||
</li>
|
||||
<li className={styles["creditcard"]}>
|
||||
<img src={Boleto} alt="Boleto" />
|
||||
</li>
|
||||
<li>
|
||||
<span className={styles["stamps__divider"]}></span>
|
||||
</li>
|
||||
<li className={styles["vtex"]} >
|
||||
<img className={styles["vtex-pci"]} src={PCIVtex} alt="PCI VTEX" />
|
||||
</li>
|
||||
</ul>
|
||||
<ul className={styles["developedBy"]}>
|
||||
<li>
|
||||
<div className={styles["by-vtex"]}>
|
||||
<a href="https://vtex.com.br-pt/">
|
||||
<span>Powered By</span>
|
||||
</a>
|
||||
<img className={styles["vtex-logo"]} src={Vtex} alt="VTEX" />
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className={styles["by-m3"]}>
|
||||
<a href="https://m3ecommerce.com/">
|
||||
<span>Developed By</span>
|
||||
</a>
|
||||
<img className={styles["m3-logo"]} src={M3} alt="M3" />
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { Footer };
|
||||
|
||||
@ -0,0 +1,406 @@
|
||||
.newsletter {
|
||||
width: 100%;
|
||||
border-width: 1px 0px;
|
||||
border-style: solid;
|
||||
border-color: var(--black);
|
||||
background: var(--white);
|
||||
margin-top: 70px;
|
||||
|
||||
&__wrapper {
|
||||
width: 37.032%;
|
||||
margin: 16px auto;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 36.88%;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
width: 96.88%;
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 599px) {
|
||||
width: 91.6%;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0 0 8px;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
color: var(--dark-gray-100);
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 36px;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin: 0 0 16px;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
width: 64.557%;
|
||||
border: 1px solid var(--light-gray-400);
|
||||
border-radius: 4px;
|
||||
padding: 13px 16px;
|
||||
color: var(--light-gray-500);
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--light-gray-500);
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
width: 96.88%;
|
||||
margin: 0 0 16px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 599px) {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
width: 26.585%;
|
||||
padding: 14px 20px;
|
||||
margin-left: 8px;
|
||||
background: var(--black);
|
||||
color: var(--white);
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
letter-spacing: 0.05em;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-top {
|
||||
&__menu-list {
|
||||
display: flex;
|
||||
margin: 38px 100px 38px;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
}
|
||||
|
||||
.menu {
|
||||
h3 {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
color: var(--dark-gray-100);
|
||||
margin: 12px 0;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
text-transform: capitalize;
|
||||
color: var(--dark-gray-100);
|
||||
margin-bottom: 12px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--dark-gray-100);
|
||||
}
|
||||
|
||||
.atendimento {
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.line {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.social-media-icons {
|
||||
ul {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin: 0 0 12px 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
|
||||
img {
|
||||
width: 35px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
width: 100%;
|
||||
background-color: var(--black);
|
||||
display: flex;
|
||||
|
||||
&__wrapper {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 84.38%;
|
||||
margin: auto;
|
||||
gap: 110.41px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 92%;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
align-items: flex-start !important;
|
||||
gap: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.address {
|
||||
color: var(--white);
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
text-transform: capitalize;
|
||||
width: 20%;
|
||||
|
||||
p {
|
||||
@media (max-width: 1024px) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// max-width: 40%;
|
||||
|
||||
// @include mq(md, max) {
|
||||
// max-width: 100%;
|
||||
// }
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 22.15%;
|
||||
font-size: 20px;
|
||||
line-height: 27px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
order: 2;
|
||||
margin: 0 0 17px 16px;
|
||||
width: 27.083%;
|
||||
}
|
||||
}
|
||||
|
||||
.stamps {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 40.62%;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-self: center;
|
||||
list-style: none;
|
||||
gap: 12px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 32.815%;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1024px) {
|
||||
width: 46.134%;
|
||||
margin: 21.94px 0 21.94px 16px;
|
||||
}
|
||||
|
||||
@media (min-width: 376px) and (max-width: 767px) {
|
||||
width: 87%;
|
||||
margin: 22px 0 23px 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
width: 91.2%;
|
||||
order: 1;
|
||||
gap: 4px;
|
||||
margin: 22px 0 23px 8px;
|
||||
}
|
||||
|
||||
.creditcard {
|
||||
width: 20.27%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.vtex {
|
||||
width: 31%;
|
||||
|
||||
.vtex-pci {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__divider {
|
||||
content: "";
|
||||
background-color: var(--light-gray-500);
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
width: 1px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
height: 42px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.developedBy {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
list-style-type: none;
|
||||
color: var(--white);
|
||||
margin: 27px 0 22px;
|
||||
padding: 0;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
width: 26.2%;
|
||||
order: 3;
|
||||
margin: 0;
|
||||
margin: 0 0 17px 16px;
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.vtex-logo {
|
||||
width: 32.86%;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 87.73px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
width: 36.615%;
|
||||
}
|
||||
}
|
||||
|
||||
.m3-logo {
|
||||
width: 23.699%;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 55.98px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
width: 26.4%;
|
||||
}
|
||||
}
|
||||
|
||||
li .by-vtex {
|
||||
gap: 13px;
|
||||
}
|
||||
|
||||
li .by-m3 {
|
||||
gap: 13px;
|
||||
}
|
||||
|
||||
li:last-child {
|
||||
margin-left: 13px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
align-items: center;
|
||||
color: var(--white);
|
||||
display: flex;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
text-transform: capitalize;
|
||||
text-decoration: none;
|
||||
|
||||
span {
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
// margin-right: 8px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,10 +1,13 @@
|
||||
import React from "react";
|
||||
import { Header } from "../components/header";
|
||||
|
||||
import { Footer } from "../components/footer";
|
||||
|
||||
const Institucional = () => {
|
||||
return (
|
||||
<div>
|
||||
<Header />
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user