diff --git a/src/components/Address/Address.tsx b/src/components/Address/Address.tsx index bf006c2..1e88714 100644 --- a/src/components/Address/Address.tsx +++ b/src/components/Address/Address.tsx @@ -1,7 +1,8 @@ import React from "react"; +import styles from "./address.module.scss"; const Address = () => { return ( -

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

diff --git a/src/components/Address/address.module.scss b/src/components/Address/address.module.scss new file mode 100644 index 0000000..9b4ad43 --- /dev/null +++ b/src/components/Address/address.module.scss @@ -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; + } +} diff --git a/src/components/Caminhos/caminhos.module.scss b/src/components/Caminhos/caminhos.module.scss index 6c1db67..3c5b5dc 100644 --- a/src/components/Caminhos/caminhos.module.scss +++ b/src/components/Caminhos/caminhos.module.scss @@ -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; diff --git a/src/components/DevelopedBy/developedBy.module.scss b/src/components/DevelopedBy/developedBy.module.scss index 470f3ca..929b98c 100644 --- a/src/components/DevelopedBy/developedBy.module.scss +++ b/src/components/DevelopedBy/developedBy.module.scss @@ -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; + } } } diff --git a/src/components/Newsletter/newsletter.module.scss b/src/components/Newsletter/newsletter.module.scss index 2134542..f9c9d7f 100644 --- a/src/components/Newsletter/newsletter.module.scss +++ b/src/components/Newsletter/newsletter.module.scss @@ -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; diff --git a/src/components/Payments/Payments.tsx b/src/components/Payments/Payments.tsx index 668687f..a6720ae 100644 --- a/src/components/Payments/Payments.tsx +++ b/src/components/Payments/Payments.tsx @@ -38,7 +38,7 @@ const Payments = () => { }; const VtexPci = () => { - return vtx Pci; + return vtx Pci; }; export { Payments, VtexPci }; diff --git a/src/components/Payments/payments.module.scss b/src/components/Payments/payments.module.scss index 2d88400..bffead2 100644 --- a/src/components/Payments/payments.module.scss +++ b/src/components/Payments/payments.module.scss @@ -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; + } } diff --git a/src/components/PoweredBy/assets/image/vtexLogo.png b/src/components/PoweredBy/assets/image/vtexLogo.png index 867c3bb..8f08de3 100644 Binary files a/src/components/PoweredBy/assets/image/vtexLogo.png and b/src/components/PoweredBy/assets/image/vtexLogo.png differ diff --git a/src/components/PoweredBy/poweredBy.module.scss b/src/components/PoweredBy/poweredBy.module.scss index 2b531b4..3bb5f42 100644 --- a/src/components/PoweredBy/poweredBy.module.scss +++ b/src/components/PoweredBy/poweredBy.module.scss @@ -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; + } } } diff --git a/src/components/Socials/Socials.tsx b/src/components/Socials/Socials.tsx index aee8b92..ef39412 100644 --- a/src/components/Socials/Socials.tsx +++ b/src/components/Socials/Socials.tsx @@ -11,19 +11,29 @@ const Socials = () => {
diff --git a/src/components/Socials/socials.module.scss b/src/components/Socials/socials.module.scss index 40a5ae8..c82984e 100644 --- a/src/components/Socials/socials.module.scss +++ b/src/components/Socials/socials.module.scss @@ -20,8 +20,8 @@ line-height: 32.81px; } } -} -img { - width: 35px; - height: 35px; + img { + width: 35px; + height: 35px; + } } diff --git a/src/components/Whatsapp/Whatsapp.tsx b/src/components/Whatsapp/Whatsapp.tsx index 4fa35e9..0b8daf1 100644 --- a/src/components/Whatsapp/Whatsapp.tsx +++ b/src/components/Whatsapp/Whatsapp.tsx @@ -1,10 +1,13 @@ import React from "react"; import whatsappImg from "./assets/image/whatsapp.png"; +import styles from "./whatsapp.module.scss"; const Whatsapp = () => { return ( -
- Whatsapp +
+ + Whatsapp +
); }; diff --git a/src/components/Whatsapp/whatsapp.module.scss b/src/components/Whatsapp/whatsapp.module.scss new file mode 100644 index 0000000..17e3feb --- /dev/null +++ b/src/components/Whatsapp/whatsapp.module.scss @@ -0,0 +1,10 @@ +.whatsapp-wrapper { + img { + width: 34px; + height: 34px; + @media screen and (min-width: 2500px) { + width: 66px; + height: 66px; + } + } +} diff --git a/src/index.tsx b/src/index.tsx index fa8b457..239a017 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -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(
+
diff --git a/src/sectors/Footer/BottomFooter/BottomFooter.tsx b/src/sectors/Footer/BottomFooter/BottomFooter.tsx new file mode 100644 index 0000000..05b3e93 --- /dev/null +++ b/src/sectors/Footer/BottomFooter/BottomFooter.tsx @@ -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 ( +
+
+
+ +

|

+ +
+
+ + +
+
+ ); +}; + +export { BottomFooter }; diff --git a/src/sectors/Footer/Footer.tsx b/src/sectors/Footer/Footer.tsx index db822e2..cb53813 100644 --- a/src/sectors/Footer/Footer.tsx +++ b/src/sectors/Footer/Footer.tsx @@ -1,9 +1,12 @@ import { TopFooter } from "./TopFooter/TopFooter"; - +import { BottomFooter } from "./BottomFooter/BottomFooter"; +import { Newsletter } from "../../components/Newsletter/Newsletter"; const Footer = () => { return (
+ +
); }; diff --git a/src/sectors/Footer/TopFooter/TopFooter.tsx b/src/sectors/Footer/TopFooter/TopFooter.tsx index 9a2f65d..6433fe9 100644 --- a/src/sectors/Footer/TopFooter/TopFooter.tsx +++ b/src/sectors/Footer/TopFooter/TopFooter.tsx @@ -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 ( -
-
    -
  • - -
  • -
  • - -
  • -
  • - -
  • -
  • - - -
  • -
+
+ + + + + + +
+ + +
); }; diff --git a/src/styles/main.scss b/src/styles/main.scss index cb06bce..c0f7eff 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -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"; diff --git a/src/styles/partials/bottom_footer.scss b/src/styles/partials/bottom_footer.scss new file mode 100644 index 0000000..f8a8858 --- /dev/null +++ b/src/styles/partials/bottom_footer.scss @@ -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; +} diff --git a/src/styles/partials/footer.scss b/src/styles/partials/footer.scss index 285dd35..a7072cd 100644 --- a/src/styles/partials/footer.scss +++ b/src/styles/partials/footer.scss @@ -1,3 +1,8 @@ .footer-wrapper { width: 100%; + display: flex; + flex-direction: column; + align-items: center; + border-top: 1px solid black; + margin-top: 81px; } diff --git a/src/styles/partials/top_footer.scss b/src/styles/partials/top_footer.scss index 9050a4d..effae37 100644 --- a/src/styles/partials/top_footer.scss +++ b/src/styles/partials/top_footer.scss @@ -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; }