development #1

Merged
MarcelloMartins merged 27 commits from development into main 2023-01-21 01:29:23 +00:00
4 changed files with 73 additions and 19 deletions
Showing only changes of commit 7725252f6b - Show all commits

3
src/assets/svg/mais.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="8" height="9" viewBox="0 0 8 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.625 3.32031H7.79688V4.6875H4.625V8.28125H3.17188V4.6875H0V3.32031H3.17188V0H4.625V3.32031Z" fill="#303030"/>
</svg>

After

Width:  |  Height:  |  Size: 220 B

View File

@ -14,36 +14,52 @@ import instagramSvg from "../../assets/svg/Instagramlogo.svg";
import twitterSvg from "../../assets/svg/Twitterlogo.svg";
import youtubeSvg from "../../assets/svg/Youtubelogo.svg";
import linkedinSvg from "../../assets/svg/Linkedinlogo.svg";
import mais from "../../assets/svg/mais.svg";
export default function Footer() {
return (
<footer>
<div className={styles.footer_top}>
<div className={styles.menu_list}>
<div className={styles.footerTop}>
<div className={styles.menuList}>
<div>
<h2>INSTITUCIONAL</h2>
<div className={styles.menuH2}>
<h2>INSTITUCIONAL</h2>
<button className={styles.buttonPlus}>
<img src={mais} alt="mais" />
</button>
</div>
<a>Quem Somos</a>
<a>Política de Privacidade</a>
<a>Segurança</a>
<a>Seja um Revendedor</a>
</div>
<div>
<h2>DÚVIDAS</h2>
<div className={styles.menuH2}>
<h2>DÚVIDAS</h2>
<button className={styles.buttonPlus}>
<img src={mais} alt="mais" />
</button>
</div>
<a>Entrega</a>
<a>Pagamento</a>
<a>Troca e Devoluções</a>
<a>Dúvidas Frequentes</a>
</div>
<div>
<h2>FALE CONOSCO</h2>
<div className={styles.menuH2}>
<h2>FALE CONOSCO</h2>
<button className={styles.buttonPlus}>
<img src={mais} alt="mais" />
</button>
</div>
<a>Atendimento Ao Consumidor</a>
<a>(11) 4159 9504</a>
<a>Atendimento Online</a>
<a>(11) 99433-8825</a>
</div>
</div>
<div className={styles.redes_sociais}>
<div className={styles.redes_sociais_svg}>
<div className={styles.redesSociais}>
<div className={styles.redesSociaisSvg}>
<img src={facebookSvg} alt="logo do facebook" />
<img src={instagramSvg} alt="logo do instagram" />
<img src={twitterSvg} alt="logo do twitter" />
@ -55,7 +71,7 @@ export default function Footer() {
</div>
</div>
</div>
<div className={styles.footer_bottom}>
<div className={styles.footerBottom}>
<p>
Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing <br /> Elit, Sed Do
Eiusmod Tempor
@ -70,7 +86,7 @@ export default function Footer() {
<img src={payPalImg} alt="Bandeira PayPal" />
<img src={boletoImg} alt="Bandeira Boleto" />
</div>
<span className={styles.traço}></span>
<span className={styles.linha}></span>
<div className={styles.certificado}>
<img src={vtexPCI} alt="Certificado Vtex" />
</div>

View File

@ -1,10 +1,10 @@
.footer_top {
.footerTop {
display: flex;
justify-content: space-between;
padding: 50px 7.81vw;
margin: 50px 7.81vw;
gap: 12.34vw;
.menu_list {
.menuList {
display: flex;
gap: 121px;
h2 {
@ -15,6 +15,13 @@
display: flex;
justify-content: flex-start;
}
.buttonPlus {
display: none;
border: 0;
background: white;
}
a {
font-size: 12px;
white-space: nowrap;
@ -29,7 +36,7 @@
}
}
.redes_sociais {
.redesSociais {
display: flex;
flex-direction: column;
align-items: flex-start;
@ -42,7 +49,7 @@
}
}
.redes_sociais_svg {
.redesSociaisSvg {
display: flex;
gap: 0.78vw;
@ -52,7 +59,7 @@
}
}
.footer_bottom {
.footerBottom {
justify-content: space-between;
background-color: #000000;
display: flex;
@ -86,7 +93,7 @@
}
}
.traço {
.linha {
border-left: solid 1px #c4c4c4;
height: 24px;
}
@ -105,6 +112,7 @@
margin-left: 8.63vw;
gap: 1.02vw;
display: flex;
margin-right: 7.81vw;
p {
white-space: nowrap;
@ -116,8 +124,34 @@
}
}
@media screen and (max-width: 1279px) {
.footer_bottom {
@media screen and (max-width: 1024px) {
.footerTop {
display: flex;
flex-direction: column;
gap: 12px;
margin: 24px 16px 24px 16px;
.menuList {
display: flex;
flex-direction: column;
gap: 12px;
.menuH2 {
display: flex;
flex-direction: row;
justify-content: space-between;
.buttonPlus {
display: flex;
}
}
a {
display: none;
}
}
}
.footerBottom {
flex-direction: column;
align-items: flex-start;
padding-left: 16px;
@ -138,7 +172,7 @@
}
@media screen and (max-width: 375px) {
.footer_bottom {
.footerBottom {
padding: 0;
.pagamentos {

View File

@ -204,6 +204,7 @@
flex-direction: column !important;
margin-left: 0 !important;
margin-bottom: 82px !important;
width: 96.88%;
.layoutText {
max-width: 96.88% !important;