LeonardoPereiraRocha/desafio-react-e-typescript-leonardo-pereira-rocha
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: cria o footer top para mobile

Browse Source
This commit is contained in:
Leonardo Pereira Rocha 2023-01-20 17:34:08 -03:00
parent ac2a81edb9
commit fd012b7cf6
11 changed files with 127 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pagina-institucional/src/components/Footer/FooterBottom.tsx
View File

@ -32,7 +32,7 @@ const FooterBottom = () => {
<img src={pagseguro} alt="logo mastercard" />
<img src={boleto} alt="logo mastercard" />
<p className={styles.footerRisco}>____</p>
<img src={vtexpci} alt="logo mastercard" />
<img src={vtexpci} alt="logo vtexpci" />
</figure>
</div>

39
pagina-institucional/src/components/Footer/FooterMenu.tsx
View File

@ -90,22 +90,29 @@ const FooterMenu = () => {
</li>
</ul>
</div>
<div className={styles.logos}>
<a href="https://www.facebook.com" target="_blank" rel="noreferrer">
<img src={face} alt="logo facebook" />
</a>
<a href="https://www.instagram.com" target="_blank" rel="noreferrer">
<img src={insta} alt="logo instagram" />
</a>
<a href="https://www.twitter.com" target="_blank" rel="noreferrer">
<img src={twitter} alt="logo twitter" />
</a>
<a href="https://www.youtube.com" target="_blank" rel="noreferrer">
<img src={youtube} alt="logo youtube" />
</a>
<a href="https://www.linkedin.com" target="_blank" rel="noreferrer">
<img src={linkedin} alt="logo linkedin" />
</a>
<div>
<div className={styles.logos}>
<a href="https://www.facebook.com" target="_blank" rel="noreferrer">
<img src={face} alt="logo facebook" />
</a>
<a
href="https://www.instagram.com"
target="_blank"
rel="noreferrer"
>
<img src={insta} alt="logo instagram" />
</a>
<a href="https://www.twitter.com" target="_blank" rel="noreferrer">
<img src={twitter} alt="logo twitter" />
</a>
<a href="https://www.youtube.com" target="_blank" rel="noreferrer">
<img src={youtube} alt="logo youtube" />
</a>
<a href="https://www.linkedin.com" target="_blank" rel="noreferrer">
<img src={linkedin} alt="logo linkedin" />
</a>
</div>
<p className={styles.textSite}>www.loremipsum.com</p>
</div>
<div className={styles.linkZap}>
<a

44
pagina-institucional/src/components/Footer/FooterTopMobile.tsx Normal file
View File

@ -0,0 +1,44 @@
import React from "react";
import { MenuFooterMobile } from "./MenuFooterMobile";
import { MenuFooterMobile2 } from "./MenuFooterMobile2";
import { MenuFooterMobile3 } from "./MenuFooterMobile3";
import styles from "../../style/FooterTopMobile.module.scss";
import face from "../../../src/assets/face.svg";
import insta from "../../../src/assets/insta.svg";
import twitter from "../../../src/assets/twitter.svg";
import youtube from "../../../src/assets/youtube.svg";
import linkedin from "../../../src/assets/linkedin.svg";
const FooterTopMobile = () => {
return (
<div className={styles.Footer_Wrapper}>
<MenuFooterMobile />
<MenuFooterMobile2 />
<MenuFooterMobile3 />
<div>
<div className={styles.logos}>
<a href="https://www.facebook.com" target="_blank" rel="noreferrer">
<img src={face} alt="logo facebook" />
</a>
<a href="https://www.instagram.com" target="_blank" rel="noreferrer">
<img src={insta} alt="logo instagram" />
</a>
<a href="https://www.twitter.com" target="_blank" rel="noreferrer">
<img src={twitter} alt="logo twitter" />
</a>
<a href="https://www.youtube.com" target="_blank" rel="noreferrer">
<img src={youtube} alt="logo youtube" />
</a>
<a href="https://www.linkedin.com" target="_blank" rel="noreferrer">
<img src={linkedin} alt="logo linkedin" />
</a>
</div>
<div className={styles.link}>
<p>www.loremipsum.com</p>
</div>
</div>
</div>
);
};
export { FooterTopMobile };

2
pagina-institucional/src/components/MenuFooterMobile.tsx → pagina-institucional/src/components/Footer/MenuFooterMobile.tsx
View File

@ -1,5 +1,5 @@
import React, { useState } from "react";
import styles from "../style/MenuFooterMobile.module.scss";
import styles from "../../style/MenuFooterMobile.module.scss";
const MenuFooterMobile = () => {
const [isOpen, setIsOpen] = useState(false);

2
pagina-institucional/src/components/MenuFooterMobile2.tsx → pagina-institucional/src/components/Footer/MenuFooterMobile2.tsx
View File

@ -1,5 +1,5 @@
import React, { useState } from "react";
import styles from "../style/MenuFooterMobile.module.scss";
import styles from "../../style/MenuFooterMobile.module.scss";
const MenuFooterMobile2 = () => {
const [isOpen, setIsOpen] = useState(false);

27
pagina-institucional/src/components/Footer/MenuFooterMobile3.tsx Normal file
View File

@ -0,0 +1,27 @@
import React, { useState } from "react";
import styles from "../../style/MenuFooterMobile.module.scss";
const MenuFooterMobile3 = () => {
const [isOpen, setIsOpen] = useState(false);
return (
<div className={styles.container}>
<button className={styles.button} onClick={() => setIsOpen(!isOpen)}>
<div className={styles.buttonName}>Fale Conosco</div>{" "}
<div className={styles.butttonOption}>{isOpen ? "-" : "+"}</div>
</button>
{isOpen && (
<ul className={styles.list}>
<li className={styles.listItem}>Atendimento ao Consumidor</li>
<li className={styles.listItem}>(11) 4159-9504</li>
<li className={styles.listItem}>Atendimento Online</li>
<li className={styles.listItem}>(11) 99433-8825</li>
</ul>
)}
</div>
);
};
export { MenuFooterMobile3 };

14
pagina-institucional/src/components/FooterTopMobile.tsx
View File

@ -1,14 +0,0 @@
import React from "react";
import { MenuFooterMobile } from "./MenuFooterMobile";
import { MenuFooterMobile2 } from "./MenuFooterMobile2";
const FooterTopMobile = () => {
return (
<div>
<MenuFooterMobile />
<MenuFooterMobile2 />
</div>
);
};
export { FooterTopMobile };

2
pagina-institucional/src/pages/Home.tsx
View File

@ -8,7 +8,7 @@ import { HeaderMobile } from "../components/HeaderMobile";
import { Newsletter } from "../components/Newsletter";
import { FooterMenu } from "../components/Footer/FooterMenu";
import { FooterBottom } from "../components/Footer/FooterBottom";
import { FooterTopMobile } from "../components/FooterTopMobile";
import { FooterTopMobile } from "../components/Footer/FooterTopMobile";
const Home = () => {
return (

1
pagina-institucional/src/style/FooterBottom.module.scss
View File

@ -2,7 +2,6 @@
background: #000;
color: white;
margin-top: 64px;
height: 64px;
.footerBox {
display: flex;

8
pagina-institucional/src/style/FooterMenu.module.scss
View File

@ -72,6 +72,14 @@
display: flex;
gap: 10px;
}
.textSite {
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: #303030;
}
.linkZap {
position: fixed;
bottom: 0;

21
pagina-institucional/src/style/FooterTopMobile.module.scss Normal file
View File

@ -0,0 +1,21 @@
.Footer_Wrapper {
@media (min-width: 1025px) {
display: none;
}
.logos {
display: flex;
gap: 10px;
margin-left: 16px;
margin-top: 12px;
margin-bottom: 12px;
}
p {
margin: 0;
}
.link {
margin-left: 16px;
}
}