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/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/Footer.tsx b/src/sectors/Footer/Footer.tsx index d3c618e..cb53813 100644 --- a/src/sectors/Footer/Footer.tsx +++ b/src/sectors/Footer/Footer.tsx @@ -1,8 +1,10 @@ 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/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; }