refactor: Aplica mudanças gerais no código

src/components/Footer/Footer.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+import { Newsletter } from "../Newsletter/Newsletter";
+import { FooterTop } from "./FooterTop/FooterTop";
+import { FooterBottom } from "./FooterBottom/FooterBottom";
+
+const Footer = () => {
+
+  return (
+    <>
+        <Newsletter />
+        <FooterTop />
+        <FooterBottom />
+    </>
+  );
+}
+
+export { Footer };

src/components/Footer/FooterBottom/FooterBottom.module.scss

@@ -1,4 +1,4 @@
-@use '../../variables';
+@use '../../../variables';
 
 .footer-bottom {
     background-color: variables.$black;

src/components/Footer/FooterBottom/FooterBottom.tsx

@@ -13,8 +13,8 @@ import imgLogoPayPal from "./assets/PayPal.png";
 import imgLogoBoleto from "./assets/Boleto.png";
 import imgLogoVtexPCI from "./assets/vtex-pci-200.png";
 
-import { IconList } from "../IconList/IconList";
-import { ItemList } from "../ItemList/ItemList";
+import { IconList } from "../../IconList/IconList";
+import { ItemList } from "../../ItemList/ItemList";
 
 const FooterBottom = () => {
   return (

src/components/Footer/FooterMenu/FooterMenu.module.scss

@@ -1,4 +1,4 @@
-@use '../../variables';
+@use '../../../variables';
 
 .footer-menu {
     display: flex;

src/components/Footer/FooterMenu/FooterMenu.tsx

@@ -2,7 +2,7 @@ import {useState} from "react";
 
 import styles from "./FooterMenu.module.scss";
 
-import { ItemList } from "../ItemList/ItemList";
+import { ItemList } from "../../ItemList/ItemList";
 
 const FooterMenu = () => {
 

src/components/Footer/FooterTop/FooterTop.module.scss

@@ -1,4 +1,4 @@
-@use '../../variables';
+@use '../../../variables';
 
 .footer-top {
     display: flex;

src/components/Footer/FooterTop/FooterTop.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import styles from "./FooterTop.module.scss";
 
-import { RedesSociais } from "../RedesSociais/RedesSociais";
+import { RedesSociais } from "../../RedesSociais/RedesSociais";
 import { FooterMenu } from "../FooterMenu/FooterMenu";
 
 const FooterTop = () => {

src/components/Form/RegistrationForm.tsx

@@ -2,9 +2,9 @@ import {useState} from "react";
 
 import { Formik, Form, Field, ErrorMessage, FormikHelpers} from "formik";
 
-import styles from "./InstitucionalForm.module.scss";
+import styles from "./RegistrationForm.module.scss";
 
-import FormSchema from "./Schema/InstitucionalFormSchema";
+import RegistrationFormSchema from "./Schema/RegistrationFormSchema";
 
 interface FormValue {
   name: string;
@@ -28,7 +28,7 @@ const initialValue = {
 
 let listClient: Array<FormValue> = [];
 
-const InstitucionalForm = () => {
+const RegistrationForm = () => {
 
   const [successMessage, setSuccessMessage] = useState(false);
  
@@ -46,7 +46,7 @@ const InstitucionalForm = () => {
       <Formik 
         onSubmit={handleSubmit}
         initialValues={initialValue}
-        validationSchema={FormSchema} >
+        validationSchema={RegistrationFormSchema} >
 
         {({errors, touched}) => (
           <Form>
@@ -185,4 +185,4 @@ const InstitucionalForm = () => {
   );
 };
 
-export { InstitucionalForm };
+export { RegistrationForm };

src/components/Header/Header.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+import { HeaderTop } from "./HeaderTop/HeaderTop";
+import { HeaderBottom } from "./HeaderBottom/HeaderBottom";
+
+const Header = () => {
+
+  return (
+    <>
+        <HeaderTop />
+        <HeaderBottom />
+    </>
+  );
+}
+
+export { Header };

src/components/Header/HeaderBottom/HeaderBottom.module.scss

@@ -1,4 +1,4 @@
-@use '../../variables';
+@use '../../../variables';
 
 .header-bottom {
     @media (max-width: 1024px) {

src/components/Header/HeaderNavBar/HeaderNavBar.module.scss

@@ -1,4 +1,4 @@
-@use '../../variables';
+@use '../../../variables';
 
 .header-nav-bar {
     height: 44px;

src/components/Header/HeaderNavBar/HeaderNavBar.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+import styles from "./HeaderNavBar.module.scss";
+
+import { ItemList } from "../../ItemList/ItemList";
+
+const HeaderNavBar = () => {
+  return (
+    <nav className={styles["header-nav-bar"]}>
+      <ul className={styles["header-nav-bar__ul"]}>
+        <a href="/">
+          <ItemList
+            textClassName={styles["header-nav-bar__item"]}
+            text="cursos"
+          />
+        </a>
+
+        <a href="/">
+          <ItemList
+            textClassName={styles["header-nav-bar__item"]}
+            text="Saiba mais"
+          />
+        </a>
+
+        <a href="/">
+          <ItemList
+            textClassName={styles["header-nav-bar__item"]}
+            text="Institucionais"
+          />
+        </a>
+      </ul>
+    </nav>
+  );
+};
+
+export { HeaderNavBar };

src/components/Header/HeaderTop/HeaderTop.module.scss

@@ -1,4 +1,4 @@
-@use '../../variables';
+@use '../../../variables';
 
 .header-top {
     border-bottom: 1px solid variables.$gray-400;

src/components/Header/HeaderTop/HeaderTop.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect, useRef } from "react";
 
 import styles from "./HeaderTop.module.scss";
 
-import imgLogo from "./assets/logo-m3academy.png";
+import imgLogo from "./assets/logo-m3academy.svg";
 import imgCart from "./assets/cart.svg";
 import imgSearch from "./assets/search.svg";
 import imgHamburgerBtn from "./assets/hamburger-menu-btn-icon.svg";
@@ -59,7 +59,7 @@ const HeaderTop = () => {
                         </button>
                 </div>
 
-                <HeaderNavBar />
+                    <HeaderNavBar />
                 </div>
 
                 <picture className={styles["header-top__logo"]}>

src/components/HeaderNavBar/HeaderNavBar.tsx

@@ -1,28 +0,0 @@
-import React from "react";
-
-import styles from "./HeaderNavBar.module.scss";
-
-import { ItemList } from "../ItemList/ItemList";
-
-const HeaderNavBar = () => {
-  return (
-    <nav className={styles["header-nav-bar"]}>
-      <ul className={styles["header-nav-bar__ul"]}>
-        <ItemList
-          textClassName={styles["header-nav-bar__item"]}
-          text="cursos"
-        />
-        <ItemList
-          textClassName={styles["header-nav-bar__item"]}
-          text="Saiba mais"
-        />
-        <ItemList
-          textClassName={styles["header-nav-bar__item"]}
-          text="Institucionais"
-        />
-      </ul>
-    </nav>
-  );
-};
-
-export { HeaderNavBar };

src/components/Main/Main.tsx

@@ -8,9 +8,7 @@ import imgArrowToRight from "./assets/arrow-point-to-right.svg";
 import { IconList } from "../IconList/IconList";
 import { ItemList } from "../ItemList/ItemList";
 
-import { TitlePrincipal } from "../TitlePrincipal/TitlePrincipal";
-import { InstitucionalRoutes } from "../Routes/InstitucionalRoutes";
-
+import { InstitucionalRoutes } from "./Routes/InstitucionalRoutes";
 
 const Main = () => {
 
@@ -38,7 +36,7 @@ const Main = () => {
             </a>
         </ul>
 
-        <TitlePrincipal text="Institucional" titleClassName={styles["institucional__title-principal"]}/>
+        <h1 className={styles["institucional__title-principal"]}>Institucional</h1>
 
         <div className={styles["institucional__principal-content"]}>
             <InstitucionalRoutes />

src/components/Main/MenuSideBar/MenuSideBar.module.scss

@@ -1,4 +1,4 @@
-@use '../../variables';
+@use '../../../variables';
 
 .menu-sidebar {
     border-right: 1px solid variables.$black;

src/components/Main/Routes/RoutesPages/Contato.tsx

@@ -1,16 +1,16 @@
 import React from "react";
 
-import { InstitucionalForm } from "../../InstitucionalForm/InstitucionalForm";
-
 import styles from "./RoutesPages.module.scss";
 
+import { RegistrationForm } from "../../../Form/RegistrationForm";
+
 const Contato = () => {
 
     return (
         <section className={styles["institucional__content"]}>
             <h2 className={styles["institucional__content__title"]}>Preencha o Formulário </h2>
 
-            <InstitucionalForm />
+            <RegistrationForm />
         </section>
     );
 }

src/components/Main/Routes/RoutesPages/RoutesPages.module.scss

@@ -1,4 +1,4 @@
-@use '../../../variables';
+@use '../../../../variables';
 
 .institucional__content {
     width: 100%;

src/components/Newsletter/Newsletter.module.scss

@@ -8,6 +8,7 @@
         align-items: center;
         border-top: 1px solid variables.$black;
         border-bottom: 1px solid variables.$black;
+        padding: 0 100px;
    }
 
     &__form {

src/components/TitlePrincipal/TitlePrincipal.tsx

@@ -1,14 +0,0 @@
-import React from "react";
-
-interface Title {
-    text: string;
-    titleClassName?: string;
-}
-
-const TitlePrincipal = ( props: Title) => {
-    const { text,  titleClassName } = props;
-    
-    return <h1 className={titleClassName}> { text } </h1>;
-};
-
-export { TitlePrincipal };

src/pages/Home.tsx

@@ -2,12 +2,9 @@ import React from "react";
 
 import styles from "./Home.module.scss";
 
-import { HeaderTop } from "../components/HeaderTop/HeaderTop";
-import { HeaderBottom } from "../components/HeaderBottom/HeaderBottom";
+import { Header } from "../components/Header/Header";
 import { Main } from "../components/Main/Main";
-import { Newsletter } from "../components/Newsletter/Newsletter";
-import { FooterTop } from "../components/FooterTop/FooterTop";
-import { FooterBottom } from "../components/FooterBottom/FooterBottom";
+import { Footer } from "../components/Footer/Footer";
 import { WhatsAppAndScrollTop } from "../components/WhatsAppAndScrollTop/WhatsAppAndScrollTop";
 
 const Home = () => {
@@ -15,8 +12,7 @@ const Home = () => {
   return (
     <>
       <header className={styles["header"]}>
-        <HeaderTop />
-        <HeaderBottom />
+        <Header />
       </header>
 
       <main className={styles["institucional"]}>
@@ -24,11 +20,10 @@ const Home = () => {
       </main>
 
       <footer>
-        <Newsletter />
-        <FooterTop />
-        <FooterBottom />
-        <WhatsAppAndScrollTop />
+        <Footer />
       </footer>
+
+      <WhatsAppAndScrollTop />
     </>
   );
 }