SavioCarvalhoMoraes/desafio-react-e-typescript-savio-carvalho-moraes
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'feature/footer' (#16) from feature/footer into development

Browse Source 
Reviewed-on: #16
This commit is contained in:
Savio Carvalho Moraes 2023-01-19 15:02:48 +00:00
commit ec501ce641
21 changed files with 220 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Address/Address.tsx
View File

@ -1,7 +1,8 @@
import React from "react";
import styles from "./address.module.scss";
const Address = () => {
return (
<p>
<p className={styles["endereco"]}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor
</p>

19
src/components/Address/address.module.scss Normal file
View File

@ -0,0 +1,19 @@
.endereco {
width: 234px;
height: 24px;
font-family: "Roboto";
font-style: normal;
font-weight: 400;
font-size: 10px;
line-height: 12px;
text-transform: capitalize;
color: white;
margin: 0 0 0 0;
@media screen and (min-width: 2500px) {
width: 467px;
height: 47px;
font-size: 20px;
line-height: 23px;
}
}

2
src/components/Caminhos/caminhos.module.scss
View File

@ -2,6 +2,8 @@
display: flex;
flex-direction: row;
gap: 5px;
align-items: baseline;
margin: 30px 0 0 100px;
p {
font-family: "Roboto";
font-style: normal;

23
src/components/DevelopedBy/developedBy.module.scss
View File

@ -3,6 +3,27 @@
flex-direction: row;
align-items: center;
p {
margin-right: 30px;
display: flex;
font-family: "Roboto";
font-style: normal;
font-weight: 400;
font-size: 10px;
line-height: 12px;
text-transform: capitalize;
margin-right: 13px;
color: white;
margin: 0 13px 0 0;
@media screen and (min-width: 2500px) {
font-size: 20px;
}
}
img {
width: 28.66px;
height: 15.65px;
@media screen and (min-width: 2500px) {
width: 34.15px;
height: 23.87px;
}
}
}

12
src/components/Newsletter/newsletter.module.scss
View File

@ -1,9 +1,17 @@
.newsForm {
width: 474px;
height: 72px;
display: flex;
flex-direction: column;
font-weight: 500;
font-size: 18px;
font-family: "Roboto";
font-variant: small-caps;
line-height: 21px;
letter-spacing: 0.05em;
font-style: normal;
color: #303030;
margin: 16px 0 16px 0;
@media screen and (min-width: 2500px) {
font-size: 36px;
}
@ -26,6 +34,7 @@
font-weight: 400;
font-size: 14px;
color: #c4c4c4;
font-family: "Roboto";
@media screen and (min-width: 2500px) {
font-size: 28px;
}
@ -36,6 +45,7 @@
}
}
.newsForm-btn {
display: flex;
width: 126px;
height: 42px;
background: #000000;
@ -45,6 +55,8 @@
color: white;
font-weight: 700;
font-size: 12px;
align-items: center;
justify-content: center;
@media screen and (min-width: 2500px) {
width: 246px;
height: 59px;

2
src/components/Payments/Payments.tsx
View File

@ -38,7 +38,7 @@ const Payments = () => {
};
const VtexPci = () => {
return <img src={vtexImg} alt="vtx Pci" />;
return <img className={styles["paymentsPci"]} src={vtexImg} alt="vtx Pci" />;
};
export { Payments, VtexPci };

21
src/components/Payments/payments.module.scss
View File

@ -1,4 +1,25 @@
.paymentsList {
display: flex;
flex-direction: row;
gap: 12px;
padding: 0 0 0 0;
}
.paymentsItem {
img {
width: 35px;
height: 20.2px;
@media screen and (min-width: 2500px) {
width: 70px;
height: 40.25px;
}
}
}
.paymentsPci {
width: 54.61px;
height: 34px;
@media screen and (min-width: 2500px) {
width: 106px;
height: 66px;
}
}

BIN
src/components/PoweredBy/assets/image/vtexLogo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 928 B

After

Width:  |  Height:  |  Size: 1.0 KiB

23
src/components/PoweredBy/poweredBy.module.scss
View File

@ -3,6 +3,27 @@
flex-direction: row;
align-items: center;
p {
margin-right: 30px;
display: flex;
font-family: "Roboto";
font-style: normal;
font-weight: 400;
font-size: 10px;
line-height: 12px;
text-transform: capitalize;
margin-right: 13px;
color: white;
margin: 0 13px 0 0;
@media screen and (min-width: 2500px) {
font-size: 20px;
}
}
img {
width: 44.92px;
height: 16px;
@media screen and (min-width: 2500px) {
width: 84.22px;
height: 30px;
}
}
}

20
src/components/Socials/Socials.tsx
View File

@ -11,19 +11,29 @@ const Socials = () => {
<div className={styles["socials-wrapper"]}>
<ul className={styles["socialsList"]}>
<li className={styles["socials-item"]}>
<img src={facebookImg} alt="Facebook" />
<a href="">
<img src={facebookImg} alt="Facebook" />
</a>
</li>
<li className={styles["socials-item"]}>
<img src={instagramImg} alt="Instagram" />
<a href="">
<img src={instagramImg} alt="Instagram" />
</a>
</li>
<li className={styles["socials-item"]}>
<img src={twitterImg} alt="Twitter" />
<a href="">
<img src={twitterImg} alt="Twitter" />
</a>
</li>
<li className={styles["socials-item"]}>
<img src={youtubeImg} alt="Youtube" />
<a href="">
<img src={youtubeImg} alt="Youtube" />
</a>
</li>
<li className={styles["socials-item"]}>
<img src={linkedinImg} alt="Linkedin" />
<a href="">
<img src={linkedinImg} alt="Linkedin" />
</a>
</li>
</ul>
<a className={styles["siteLink"]} href="/">

8
src/components/Socials/socials.module.scss
View File

@ -20,8 +20,8 @@
line-height: 32.81px;
}
}
}
img {
width: 35px;
height: 35px;
img {
width: 35px;
height: 35px;
}
}

7
src/components/Whatsapp/Whatsapp.tsx
View File

@ -1,10 +1,13 @@
import React from "react";
import whatsappImg from "./assets/image/whatsapp.png";
import styles from "./whatsapp.module.scss";
const Whatsapp = () => {
return (
<div>
<img src={whatsappImg} alt="Whatsapp" />
<div className={styles["whatsapp-wrapper"]}>
<a href="https://wa.me/11994338825" target="_blank">
<img src={whatsappImg} alt="Whatsapp" />
</a>
</div>
);
};

10
src/components/Whatsapp/whatsapp.module.scss Normal file
View File

@ -0,0 +1,10 @@
.whatsapp-wrapper {
img {
width: 34px;
height: 34px;
@media screen and (min-width: 2500px) {
width: 66px;
height: 66px;
}
}
}

2
src/index.tsx
View File

@ -8,6 +8,7 @@ import { Cursos } from "./pages/Cursos";
import { RoutesUrl } from "./components/Router/Router";
import { Header } from "./sectors/Header/Header";
import { Footer } from "./sectors/Footer/Footer";
import { Newsletter } from "./components/Newsletter/Newsletter";
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
@ -16,6 +17,7 @@ root.render(
<BrowserRouter>
<Header></Header>
<RoutesUrl></RoutesUrl>
<Footer></Footer>
</BrowserRouter>
</React.StrictMode>

23
src/sectors/Footer/BottomFooter/BottomFooter.tsx Normal file
View File

@ -0,0 +1,23 @@
import { Address } from "../../../components/Address/Address";
import { Payments } from "../../../components/Payments/Payments";
import { VtexPci } from "../../../components/Payments/Payments";
import { PoweredBy } from "../../../components/PoweredBy/PoweredBy";
import { DevelopedBy } from "../../../components/DevelopedBy/DevelopedBy";
const BottomFooter = () => {
return (
<div className="bottom_footer">
<Address></Address>
<div className="bottom_footer_item pagamentos">
<Payments></Payments>
<p>|</p>
<VtexPci></VtexPci>
</div>
<div className="bottom_footer_item creation">
<PoweredBy></PoweredBy>
<DevelopedBy></DevelopedBy>
</div>
</div>
);
};
export { BottomFooter };

5
src/sectors/Footer/Footer.tsx
View File

@ -1,9 +1,12 @@
import { TopFooter } from "./TopFooter/TopFooter";
import { BottomFooter } from "./BottomFooter/BottomFooter";
import { Newsletter } from "../../components/Newsletter/Newsletter";
const Footer = () => {
return (
<div className="footer-wrapper">
<Newsletter></Newsletter>
<TopFooter></TopFooter>
<BottomFooter></BottomFooter>
</div>
);
};

28
src/sectors/Footer/TopFooter/TopFooter.tsx
View File

@ -3,24 +3,20 @@ import { Doubts } from "../../../components/Doubts/Doubts";
import { Contact } from "../../../components/Contact/Contact";
import { Socials } from "../../../components/Socials/Socials";
import { Whatsapp } from "../../../components/Whatsapp/Whatsapp";
const TopFooter = () => {
return (
<div className="top_footer">
<ul className="top_footer_itens">
<li className="top_footer_item">
<Institutional></Institutional>
</li>
<li className="top_footer_item">
<Doubts></Doubts>
</li>
<li className="top_footer_item">
<Contact></Contact>
</li>
<li className="top_footer_item">
<Socials></Socials>
<Whatsapp></Whatsapp>
</li>
</ul>
<div className="top_footer_wrapper">
<Institutional></Institutional>
<Doubts></Doubts>
<Contact></Contact>
<div className="top_footer_socials">
<Socials></Socials>
<Whatsapp></Whatsapp>
</div>
</div>
);
};

2
src/styles/main.scss
View File

@ -8,3 +8,5 @@
@import "partials/top_header.scss";
@import "partials/bottom_header.scss";
@import "partials/top_footer.scss";
@import "partials/footer.scss";
@import "partials/bottom_footer.scss";

30
src/styles/partials/bottom_footer.scss Normal file
View File

@ -0,0 +1,30 @@
.bottom_footer {
width: 100%;
display: flex;
flex-direction: row;
background: black;
margin: 0 auto;
padding: 20px 100px;
justify-content: space-between;
}
.bottom_footer_itens {
display: flex;
flex-direction: row;
align-items: center;
}
.pagamentos {
display: flex;
flex-direction: row;
p {
color: white;
}
gap: 5px;
}
.creation {
display: flex;
flex-direction: row;
gap: 13px;
}

5
src/styles/partials/footer.scss
View File

@ -1,3 +1,8 @@
.footer-wrapper {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
border-top: 1px solid black;
margin-top: 81px;
}

12
src/styles/partials/top_footer.scss
View File

@ -1,11 +1,13 @@
.top_footer_itens {
.top_footer_wrapper {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
flex-flow: row wrap;
padding: 0 0 0 0 !important;
justify-content: space-between;
padding: 50px 16px 64px 100px;
border-top: 1px solid black;
}
.top_footer_item {
.top_footer_socials {
display: flex;
flex-direction: row;
gap: 50px;
}