react-project/src/assets/styles/modules/Contato.module.scss

@@ -0,0 +1,8 @@
+.forms {
+  h2 {
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 28px;
+    color: var(--black);
+  }
+}

react-project/src/assets/styles/modules/Main.module.scss

@@ -35,7 +35,6 @@
     display: flex;
 
     .content {
-      /*width: 69.2%;*/
       align-self: center;
 
       h2 {

react-project/src/components/Contato.tsx

@@ -1,7 +1,16 @@
 import React from "react";
+import { Formik, Form, Field, ErrorMessage } from "formik";
+
+import * as Yup from "yup";
+
+import contato from "../assets/styles/modules/Contato.module.scss";
 
 const Contato = () => {
-  return <div>contatooo</div>;
+  return (
+    <div className={contato["forms"]}>
+      <h2>Preencha o formulário</h2>
+    </div>
+  );
 };
 
 export { Contato };

react-project/src/components/Entrega.tsx

@@ -1,8 +1,9 @@
 import React from "react";
+import main from "../assets/styles/modules/Main.module.scss";
 
 const Entrega = () => {
   return (
-    <div className="content">
+    <div className={main["content"]}>
       <h2>Entrega</h2>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

react-project/src/components/Footer.tsx

@@ -1,7 +1,13 @@
 import React from "react";
 
+import { Newsletter } from "./Newsletter";
+
 const Footer = () => {
-  return <footer>Footer</footer>;
+  return (
+    <footer>
+      <Newsletter />
+    </footer>
+  );
 };
 
 export { Footer };

react-project/src/components/Main.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-
 import { Routes, Route } from "react-router-dom";
 
+import main from "../assets/styles/modules/Main.module.scss";
+
 import { Navigation } from "./Navigation";
-import { Newsletter } from "./Newsletter";
 
 import { Sobre } from "./Sobre";
 import { Pagamento } from "./Pagamento";
@@ -18,8 +18,8 @@ import iconArrow from "../assets/images/svgs/arrow-right.svg";
 
 const Main = () => {
   return (
-    <div className="main">
-      <div className="main__breadcrumb">
+    <div className={main["main"]}>
+      <div className={main["main__breadcrumb"]}>
         <figure>
           <img src={iconHome} />
         </figure>
@@ -29,9 +29,9 @@ const Main = () => {
         <span>INSTITUCIONAL</span>
       </div>
 
-      <h1 className="main__title">INSTITUCIONAL</h1>
+      <h1 className={main["main__title"]}>INSTITUCIONAL</h1>
 
-      <div className="main__wrapperNav">
+      <div className={main["main__wrapperNav"]}>
         <Navigation />
 
         <Routes>
@@ -43,8 +43,6 @@ const Main = () => {
           <Route path="/contato" element={<Contato />} />
         </Routes>
       </div>
-
-      <Newsletter />
     </div>
   );
 };

react-project/src/components/Newsletter.tsx

@@ -5,7 +5,7 @@ import { Formik, Form, Field, ErrorMessage } from "formik";
 
 import * as Yup from "yup";
 
-const FormSchema = Yup.object().shape({
+const NewsletterSchema = Yup.object().shape({
   email: Yup.string().required("*Campo obrigatório").email("Email inválido"),
 });
 
@@ -27,7 +27,7 @@ const Newsletter = () => {
             actions.resetForm();
           }}
           initialValues={{ email: "" }}
-          validationSchema={FormSchema}
+          validationSchema={NewsletterSchema}
         >
           {({ errors, touched }) => (
             <Form>

react-project/src/components/Pagamento.tsx

@@ -1,8 +1,9 @@
 import React from "react";
+import main from "../assets/styles/modules/Main.module.scss";
 
 const Pagamento = () => {
   return (
-    <div className="content">
+    <div className={main["content"]}>
       <h2>Forma de Pagamento</h2>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

react-project/src/components/Seguranca.tsx

@@ -1,8 +1,9 @@
 import React from "react";
+import main from "../assets/styles/modules/Main.module.scss";
 
 const Seguranca = () => {
   return (
-    <div className="content">
+    <div className={main["content"]}>
       <h2>Segurança e Privacidade</h2>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

react-project/src/components/Sobre.tsx

@@ -1,8 +1,9 @@
 import React from "react";
+import main from "../assets/styles/modules/Main.module.scss";
 
 const Sobre = () => {
   return (
-    <div className="content">
+    <div className={main["content"]}>
       <h2>Sobre</h2>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

react-project/src/components/Troca.tsx

@@ -1,8 +1,9 @@
 import React from "react";
+import main from "../assets/styles/modules/Main.module.scss";
 
 const Troca = () => {
   return (
-    <div className="content">
+    <div className={main["content"]}>
       <h2>Troca e Devolução</h2>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

react-project/src/pages/Institucional.tsx

@@ -1,8 +1,6 @@
 import React from "react";
 
-/*import styles from "../assets/styles/Home.module.scss";*/
 import "../assets/styles/variables.scss";
-import "../assets/styles/main.scss";
 
 import { Header } from "../components/Header";
 import { Main } from "../components/Main";