forked from M3-Academy/desafio-react-e-typescript
Feat(Footer): Cria Footer Middle e Bottom Mobile
This commit is contained in:
parent
bb5d59f1a1
commit
012ee79500
15
desafio/package-lock.json
generated
15
desafio/package-lock.json
generated
@ -17,6 +17,7 @@
|
||||
"@types/react-dom": "^18.0.10",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-headless-accordion": "^1.0.2",
|
||||
"react-scripts": "5.0.1",
|
||||
"sass": "^1.57.1",
|
||||
"typescript": "^4.9.4",
|
||||
@ -13934,6 +13935,14 @@
|
||||
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
|
||||
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
|
||||
},
|
||||
"node_modules/react-headless-accordion": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-headless-accordion/-/react-headless-accordion-1.0.2.tgz",
|
||||
"integrity": "sha512-wKBTB/+aAr9MGX5RYi3sdmKOSzevKdmbGRw9JTe7XONiHlTo+pC1OiggL9NUxp5QeQcTnX0rryhuySeGsqBfBg==",
|
||||
"peerDependencies": {
|
||||
"react": "^18.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
@ -26590,6 +26599,12 @@
|
||||
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
|
||||
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
|
||||
},
|
||||
"react-headless-accordion": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-headless-accordion/-/react-headless-accordion-1.0.2.tgz",
|
||||
"integrity": "sha512-wKBTB/+aAr9MGX5RYi3sdmKOSzevKdmbGRw9JTe7XONiHlTo+pC1OiggL9NUxp5QeQcTnX0rryhuySeGsqBfBg==",
|
||||
"requires": {}
|
||||
},
|
||||
"react-is": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
"@types/react-dom": "^18.0.10",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-headless-accordion": "^1.0.2",
|
||||
"react-scripts": "5.0.1",
|
||||
"sass": "^1.57.1",
|
||||
"typescript": "^4.9.4",
|
||||
|
||||
3
desafio/src/assets/svgs/mais.svg
Normal file
3
desafio/src/assets/svgs/mais.svg
Normal 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 |
@ -1,4 +1,5 @@
|
||||
import React from "react";
|
||||
import {Accordion, AccordionBody, AccordionHeader, AccordionItem} from "react-headless-accordion";
|
||||
|
||||
import styles from "../scss/partials/footer.module.scss"
|
||||
|
||||
@ -13,6 +14,7 @@ import VtexPci from "../assets/imgs/vtex-pci-200.png"
|
||||
|
||||
import LogoM3 from "../assets/imgs/LogoM3.png"
|
||||
import LogoVtex from "../assets/imgs/LogoVtex.png"
|
||||
import MaisIcon from "../assets/svgs/mais.svg"
|
||||
|
||||
import facebookIcon from "../assets/svgs/facebookIcon.svg"
|
||||
import instagramIcon from "../assets/svgs/instagramIcon.svg"
|
||||
@ -23,11 +25,22 @@ import linkedinIcon from "../assets/svgs/linkedinIcon.svg"
|
||||
|
||||
const Footer = () => {
|
||||
return <footer className={styles["page-footer"]}>
|
||||
<FooterMidle/>
|
||||
<FooterBottom/>
|
||||
|
||||
<FooterDesk/>
|
||||
</footer>
|
||||
}
|
||||
const FooterDesk : any = () => {
|
||||
if (window.innerWidth > 1024){
|
||||
return <>
|
||||
<FooterMidle/>
|
||||
<FooterBottom/>
|
||||
</>
|
||||
}else if (window.innerWidth <= 1024){
|
||||
return <>
|
||||
<FooterMidleMobile/>
|
||||
<FooterBottom/>
|
||||
</>
|
||||
}
|
||||
}
|
||||
|
||||
const FooterMidle = () => {
|
||||
return <section className={styles["page-footer__fM-wrapper"]}>
|
||||
@ -97,6 +110,130 @@ const FooterMidle = () => {
|
||||
|
||||
<div className={styles["page-footer__fM-colum-wrapper__colum-social"]}>
|
||||
|
||||
<ul className={styles["page-footer__fM-colum-wrapper__links-social"]}>
|
||||
|
||||
<li className={styles["page-footer__fM-colum-wrapper__links-social__link"]}>
|
||||
<a href=""><img src= { facebookIcon } alt="facebookIcon" /></a>
|
||||
</li>
|
||||
|
||||
<li className={styles["page-footer__fM-colum-wrapper__links-social__link"]}>
|
||||
<a href=""><img src= { instagramIcon } alt="instagramIcon" /></a>
|
||||
</li>
|
||||
|
||||
<li className={styles["page-footer__fM-colum-wrapper__links-social__link"]}>
|
||||
<a href=""><img src= { twitterIcon } alt="twitterIcon" /></a>
|
||||
</li>
|
||||
|
||||
<li className={styles["page-footer__fM-colum-wrapper__links-social__link"]}>
|
||||
<a href=""><img src= { youtubeIcon } alt="youtubeIcon" /></a>
|
||||
</li>
|
||||
|
||||
<li className={styles["page-footer__fM-colum-wrapper__links-social__link"]}>
|
||||
<a href=""><img src= { linkedinIcon } alt="linkedinIcon" /></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a href="">www.loremipsum.com</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
}
|
||||
|
||||
const FooterMidleMobile = () => {
|
||||
return <section className={styles["page-footer__fM-wrapper-mobile"]}>
|
||||
<Accordion className={styles["page-footer__accordion-wrapper"]}>
|
||||
<AccordionItem >
|
||||
<AccordionHeader className={styles["page-footer__accordion-wrapper__title-wrapper"]} >
|
||||
<h4 className={styles["page-footer__accordion-wrapper__title-wrapper__title"]}>Institucional</h4>
|
||||
<img className={styles["page-footer__accordion-wrapper__title-wrapper__title-icone"]} src={ MaisIcon } alt="MaisIcon" />
|
||||
</AccordionHeader>
|
||||
|
||||
<AccordionBody className={styles["page-footer__accordion-wrapper__description-wrapper"]}>
|
||||
<div className={styles["page-footer__accordion-wrapper__description-wrapper__description"]}>
|
||||
<ul className={styles["page-footer__fM-colum-wrapper__links"]}>
|
||||
|
||||
<li className={styles["page-footer__fM-colum-wrapper__links__link"]}>
|
||||
<a href="">Quem Somos</a>
|
||||
</li>
|
||||
|
||||
<li className={styles["page-footer__fM-colum-wrapper__links__link"]}>
|
||||
<a href="">Política de Privacidade</a>
|
||||
</li>
|
||||
|
||||
<li className={styles["page-footer__fM-colum-wrapper__links__link"]}>
|
||||
<a href="">Segurança</a>
|
||||
</li>
|
||||
|
||||
<li className={styles["page-footer__fM-colum-wrapper__links__link"]}>
|
||||
<a href="">Seja um Revendedor</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</AccordionBody>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem >
|
||||
<AccordionHeader className={styles["page-footer__accordion-wrapper__title-wrapper"]} >
|
||||
<h4 className={styles["page-footer__accordion-wrapper__title-wrapper__title"]}>Dúvidas</h4>
|
||||
<img className={styles["page-footer__accordion-wrapper__title-wrapper__title-icone"]} src={ MaisIcon } alt="MaisIcon" />
|
||||
</AccordionHeader>
|
||||
|
||||
<AccordionBody className={styles["page-footer__accordion-wrapper__description-wrapper"]}>
|
||||
<div className={styles["page-footer__accordion-wrapper__description-wrapper__description"]}>
|
||||
<ul className={styles["page-footer__fM-colum-wrapper__links"]}>
|
||||
<li className={styles["page-footer__fM-colum-wrapper__links__link"]}>
|
||||
<a href="">Quem Somos</a>
|
||||
</li>
|
||||
|
||||
<li className={styles["page-footer__fM-colum-wrapper__links__link"]}>
|
||||
<a href="">Política de Privacidade</a>
|
||||
</li>
|
||||
|
||||
<li className={styles["page-footer__fM-colum-wrapper__links__link"]}>
|
||||
<a href="">Segurança</a>
|
||||
</li>
|
||||
|
||||
<li className={styles["page-footer__fM-colum-wrapper__links__link"]}>
|
||||
<a href="">Seja um Revendedor</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</AccordionBody>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem >
|
||||
<AccordionHeader className={styles["page-footer__accordion-wrapper__title-wrapper"]} >
|
||||
<h4 className={styles["page-footer__accordion-wrapper__title-wrapper__title"]}>Fale Conosco</h4>
|
||||
<img className={styles["page-footer__accordion-wrapper__title-wrapper__title-icone"]} src={ MaisIcon } alt="MaisIcon" />
|
||||
</AccordionHeader>
|
||||
|
||||
<AccordionBody className={styles["page-footer__accordion-wrapper__description-wrapper"]}>
|
||||
<div className={styles["page-footer__accordion-wrapper__description-wrapper__description"]}>
|
||||
<ul className={styles["page-footer__fM-colum-wrapper__links"]}>
|
||||
<li className={styles["page-footer__fM-colum-wrapper__links__link"]}>
|
||||
<a href="">Quem Somos</a>
|
||||
</li>
|
||||
|
||||
<li className={styles["page-footer__fM-colum-wrapper__links__link"]}>
|
||||
<a href="">Política de Privacidade</a>
|
||||
</li>
|
||||
|
||||
<li className={styles["page-footer__fM-colum-wrapper__links__link"]}>
|
||||
<a href="">Segurança</a>
|
||||
</li>
|
||||
|
||||
<li className={styles["page-footer__fM-colum-wrapper__links__link"]}>
|
||||
<a href="">Seja um Revendedor</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</AccordionBody>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
|
||||
<div className={styles["page-footer__fM-colum-wrapper__colum-social"]}>
|
||||
|
||||
<ul className={styles["page-footer__fM-colum-wrapper__links-social"]}>
|
||||
|
||||
<li className={styles["page-footer__fM-colum-wrapper__links-social__link"]}>
|
||||
@ -121,12 +258,11 @@ const FooterMidle = () => {
|
||||
</ul>
|
||||
|
||||
<a href="">www.loremipsum.com</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
}
|
||||
|
||||
|
||||
const FooterBottom = () => {
|
||||
return <section className={styles["page-footer__fB-wrapper"]}>
|
||||
<div className={styles["page-footer__wrapper-content"]}>
|
||||
|
||||
@ -7,17 +7,63 @@
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__fM-wrapper-mobile{
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
&__accordion-wrapper{
|
||||
|
||||
&__title-wrapper{
|
||||
width: 100%;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6px 0;
|
||||
background-color: var(--white1);
|
||||
|
||||
&__title{
|
||||
display: flex;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
font-family: var(--font-roboto);
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: var(--black2);
|
||||
}
|
||||
|
||||
&__title-icone{
|
||||
display: flex;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__description-wrapper{
|
||||
|
||||
&__description{
|
||||
padding: 0 0 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&__wrapper-content{
|
||||
width: 84.38%;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 16px;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
&__fM-wrapper{
|
||||
padding: 50px 0;
|
||||
}
|
||||
|
||||
&__fM-colum-wrapper{
|
||||
width: 84.38%;
|
||||
margin: 0 auto;
|
||||
@ -26,6 +72,11 @@
|
||||
gap: 121px;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
&__fM-colum-wrapper,
|
||||
&__fM-wrapper-mobile{
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
font-family: var(--font-roboto);
|
||||
@ -33,6 +84,11 @@
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: var(--black2);
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&__colum{
|
||||
@ -70,6 +126,12 @@
|
||||
|
||||
}
|
||||
|
||||
&__colum-social{
|
||||
@media screen and (max-width: 1024px) {
|
||||
padding: 6px 0 24px 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__links,
|
||||
&__links-social{
|
||||
|
||||
@ -116,6 +178,10 @@
|
||||
align-items: center;
|
||||
padding: 20px 0;
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&__text{
|
||||
color: var(--white1);
|
||||
margin: 0;
|
||||
@ -134,6 +200,12 @@
|
||||
align-items: center;
|
||||
padding: 15px 0;
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
justify-content: normal;
|
||||
grid-area: 1 / 1 / 1 / 1;
|
||||
|
||||
}
|
||||
|
||||
&__cards-wrapper{
|
||||
|
||||
list-style-type: none;
|
||||
@ -163,6 +235,11 @@
|
||||
align-items: center;
|
||||
padding: 24px 0;
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
justify-content: normal;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
&__wrapper{
|
||||
|
||||
list-style-type: none;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user