feat: cria footer bottom 1280px
BIN
src/assets/images/AmExp.png
Normal file
After Width: | Height: | Size: 3.4 KiB |
BIN
src/assets/images/Boleto.png
Normal file
After Width: | Height: | Size: 1.8 KiB |
BIN
src/assets/images/Elo.png
Normal file
After Width: | Height: | Size: 1.8 KiB |
BIN
src/assets/images/Hiper.png
Normal file
After Width: | Height: | Size: 1.7 KiB |
BIN
src/assets/images/M3.png
Normal file
After Width: | Height: | Size: 762 B |
BIN
src/assets/images/Master.png
Normal file
After Width: | Height: | Size: 1.4 KiB |
BIN
src/assets/images/PayPal.png
Normal file
After Width: | Height: | Size: 1.9 KiB |
BIN
src/assets/images/Visa.png
Normal file
After Width: | Height: | Size: 2.1 KiB |
BIN
src/assets/images/Vtex.png
Normal file
After Width: | Height: | Size: 1.0 KiB |
BIN
src/assets/images/vtex-pci-200.png
Normal file
After Width: | Height: | Size: 3.8 KiB |
@ -1,10 +1,14 @@
|
||||
import React from "react";
|
||||
import { FooterBottom } from "../FooterBottom";
|
||||
import { FooterTop } from "../FooterTop";
|
||||
import { NewsLetter } from "../NewsLetter";
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<footer>
|
||||
<NewsLetter />
|
||||
<FooterTop />
|
||||
<FooterBottom />
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
73
src/components/FooterBottom/index.tsx
Normal file
@ -0,0 +1,73 @@
|
||||
import React from "react";
|
||||
import styles from "./styles.module.scss";
|
||||
import master from "../../assets/images/Master.png";
|
||||
import visa from "../../assets/images/Visa.png";
|
||||
import amExp from "../../assets/images/AmExp.png";
|
||||
import elo from "../../assets/images/Elo.png";
|
||||
import hiper from "../../assets/images/Hiper.png";
|
||||
import payPal from "../../assets/images/PayPal.png";
|
||||
import boleto from "../../assets/images/Boleto.png";
|
||||
import vtexPci from "../../assets/images/vtex-pci-200.png";
|
||||
import vtex from "../../assets/images/Vtex.png";
|
||||
import m3 from "../../assets/images/M3.png";
|
||||
|
||||
const FooterBottom = () => {
|
||||
return (
|
||||
<div className={styles["footerBottom"]}>
|
||||
<div className={styles["footerBottom__content"]}>
|
||||
<div className={styles["footerBottom__corporateName"]}>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles["footerBottom__paymentMethods"]}>
|
||||
<div className={styles["footerBottom__paymentIcons"]}>
|
||||
<ul>
|
||||
<li>
|
||||
<img src={master} alt="" />
|
||||
</li>
|
||||
<li>
|
||||
<img src={visa} alt="" />
|
||||
</li>
|
||||
<li>
|
||||
<img src={amExp} alt="" />
|
||||
</li>
|
||||
<li>
|
||||
<img src={elo} alt="" />
|
||||
</li>
|
||||
<li>
|
||||
<img src={hiper} alt="" />
|
||||
</li>
|
||||
<li>
|
||||
<img src={payPal} alt="" />
|
||||
</li>
|
||||
<li>
|
||||
<img src={boleto} alt="" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className={styles["footerBottom__vtexPci"]}>
|
||||
<img src={vtexPci} alt="Selo Vtex" />
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles["footerBottom__authors"]}>
|
||||
<div className={styles["footerBottom__vtex"]}>
|
||||
<span className={styles["poweredBy"]}>Powered by</span>
|
||||
<span>
|
||||
<img src={vtex} alt="Vtex" />
|
||||
</span>
|
||||
</div>
|
||||
<div className={styles["footerBottom__m3"]}>
|
||||
<span className={styles["developedBy"]}>Developed by</span>
|
||||
<span>
|
||||
<img src={m3} alt="M3" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { FooterBottom };
|
124
src/components/FooterBottom/styles.module.scss
Normal file
@ -0,0 +1,124 @@
|
||||
.footerBottom {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 64px;
|
||||
background: var(--black-500);
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 84.375%;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
&__corporateName {
|
||||
width: 21.707%;
|
||||
height: 24px;
|
||||
|
||||
p {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
text-transform: capitalize;
|
||||
color: var(--white-500);
|
||||
}
|
||||
}
|
||||
|
||||
&__paymentMethods {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 36.921%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__paymentIcons {
|
||||
border-right: 1px solid var(--gray-100);
|
||||
width: 82.762%;
|
||||
height: 20px;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__vtexPci {
|
||||
width: 13.696%;
|
||||
height: 100%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__authors {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 20.965%;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
&__vtex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 49.03%;
|
||||
height: 100%;
|
||||
|
||||
.poweredBy {
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
text-transform: capitalize;
|
||||
color: var(--white-500);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&__m3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 45.491%;
|
||||
height: 100%;
|
||||
|
||||
.developedBy {
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
text-transform: capitalize;
|
||||
color: var(--white-500);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) and (max-width: 1128px) {
|
||||
.poweredBy,
|
||||
.developedBy {
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
}
|
8
src/components/FooterTop/index.tsx
Normal file
@ -0,0 +1,8 @@
|
||||
import React from "react";
|
||||
import styles from "./styles.module.scss";
|
||||
|
||||
const FooterTop = () => {
|
||||
return <div className={styles["footerTop"]}></div>;
|
||||
};
|
||||
|
||||
export { FooterTop };
|
6
src/components/FooterTop/styles.module.scss
Normal file
@ -0,0 +1,6 @@
|
||||
.footerTop {
|
||||
border-width: 0px 0px 1px 1px;
|
||||
border-style: solid;
|
||||
border-color: var(--black-500);
|
||||
height: 239px;
|
||||
}
|