feat: ajusta seachbar para tamanho dos figma

.gitignore

@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.vercel

package-lock.json

@@ -18,17 +18,17 @@
         "formik": "^2.2.9",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-imask": "^6.4.3",
         "react-input-mask": "^2.0.4",
         "react-router-dom": "^6.6.1",
         "react-scripts": "5.0.1",
-        "react-text-mask": "^5.5.0",
         "sass": "^1.57.1",
         "typescript": "^4.9.4",
         "web-vitals": "^2.1.4",
         "yup": "^0.32.11"
       },
       "devDependencies": {
+        "@types/jquery": "^3.5.16",
+        "@types/jquery-mask-plugin": "^1.14.4",
         "@types/react-input-mask": "^3.0.2"
       }
     },
@@ -3809,6 +3809,24 @@
         "pretty-format": "^27.0.0"
       }
     },
+    "node_modules/@types/jquery": {
+      "version": "3.5.16",
+      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.16.tgz",
+      "integrity": "sha512-bsI7y4ZgeMkmpG9OM710RRzDFp+w4P1RGiIt30C1mSBT+ExCleeh4HObwgArnDFELmRrOpXgSYN9VF1hj+f1lw==",
+      "dev": true,
+      "dependencies": {
+        "@types/sizzle": "*"
+      }
+    },
+    "node_modules/@types/jquery-mask-plugin": {
+      "version": "1.14.4",
+      "resolved": "https://registry.npmjs.org/@types/jquery-mask-plugin/-/jquery-mask-plugin-1.14.4.tgz",
+      "integrity": "sha512-8la3UoP0/hclp+Gknxx+Tx8H+puBLj+Ybp7swLFTLk7rnItC5biPzikT15MroQbPdrBqWdfpNPdHQdfcdyPnNg==",
+      "dev": true,
+      "dependencies": {
+        "@types/jquery": "*"
+      }
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.11",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -3931,6 +3949,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/sizzle": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz",
+      "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==",
+      "dev": true
+    },
     "node_modules/@types/sockjs": {
       "version": "0.3.33",
       "resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.33.tgz",
@@ -8675,14 +8699,6 @@
         "node": ">= 4"
       }
     },
-    "node_modules/imask": {
-      "version": "6.4.3",
-      "resolved": "https://registry.npmjs.org/imask/-/imask-6.4.3.tgz",
-      "integrity": "sha512-aH2GHemGkr3cbRBfhogHMIx05eUxdHrZNlKTTLmz8VxpSopuHHJ8+85FsDlBVQqxPlDLhZuwj4lpHHWbLOdBSw==",
-      "engines": {
-        "npm": ">=4.0.0"
-      }
-    },
     "node_modules/immer": {
       "version": "9.0.16",
       "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.16.tgz",
@@ -14050,21 +14066,6 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
       "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
     },
-    "node_modules/react-imask": {
-      "version": "6.4.3",
-      "resolved": "https://registry.npmjs.org/react-imask/-/react-imask-6.4.3.tgz",
-      "integrity": "sha512-5WyCbubQErO8Wr/zLDyUyC1zCqQXP979QXW6BNirUGsM1VxFmVG0nNfXA1PSXlgdbaXWBiBj+VJBvg/8BDzieA==",
-      "dependencies": {
-        "imask": "^6.4.3",
-        "prop-types": "^15.7.2"
-      },
-      "engines": {
-        "npm": ">=4.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=0.14.0"
-      }
-    },
     "node_modules/react-input-mask": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-2.0.4.tgz",
@@ -14193,17 +14194,6 @@
         }
       }
     },
-    "node_modules/react-text-mask": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/react-text-mask/-/react-text-mask-5.5.0.tgz",
-      "integrity": "sha512-SLJlJQxa0uonMXsnXRpv5abIepGmHz77ylQcra0GNd7Jtk4Wj2Mtp85uGQHv1avba2uI8ZvRpIEQPpJKsqRGYw==",
-      "dependencies": {
-        "prop-types": "^15.5.6"
-      },
-      "peerDependencies": {
-        "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -19610,6 +19600,24 @@
         "pretty-format": "^27.0.0"
       }
     },
+    "@types/jquery": {
+      "version": "3.5.16",
+      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.16.tgz",
+      "integrity": "sha512-bsI7y4ZgeMkmpG9OM710RRzDFp+w4P1RGiIt30C1mSBT+ExCleeh4HObwgArnDFELmRrOpXgSYN9VF1hj+f1lw==",
+      "dev": true,
+      "requires": {
+        "@types/sizzle": "*"
+      }
+    },
+    "@types/jquery-mask-plugin": {
+      "version": "1.14.4",
+      "resolved": "https://registry.npmjs.org/@types/jquery-mask-plugin/-/jquery-mask-plugin-1.14.4.tgz",
+      "integrity": "sha512-8la3UoP0/hclp+Gknxx+Tx8H+puBLj+Ybp7swLFTLk7rnItC5biPzikT15MroQbPdrBqWdfpNPdHQdfcdyPnNg==",
+      "dev": true,
+      "requires": {
+        "@types/jquery": "*"
+      }
+    },
     "@types/json-schema": {
       "version": "7.0.11",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -19732,6 +19740,12 @@
         "@types/node": "*"
       }
     },
+    "@types/sizzle": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz",
+      "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==",
+      "dev": true
+    },
     "@types/sockjs": {
       "version": "0.3.33",
       "resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.33.tgz",
@@ -23206,11 +23220,6 @@
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
       "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ=="
     },
-    "imask": {
-      "version": "6.4.3",
-      "resolved": "https://registry.npmjs.org/imask/-/imask-6.4.3.tgz",
-      "integrity": "sha512-aH2GHemGkr3cbRBfhogHMIx05eUxdHrZNlKTTLmz8VxpSopuHHJ8+85FsDlBVQqxPlDLhZuwj4lpHHWbLOdBSw=="
-    },
     "immer": {
       "version": "9.0.16",
       "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.16.tgz",
@@ -26903,15 +26912,6 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
       "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
     },
-    "react-imask": {
-      "version": "6.4.3",
-      "resolved": "https://registry.npmjs.org/react-imask/-/react-imask-6.4.3.tgz",
-      "integrity": "sha512-5WyCbubQErO8Wr/zLDyUyC1zCqQXP979QXW6BNirUGsM1VxFmVG0nNfXA1PSXlgdbaXWBiBj+VJBvg/8BDzieA==",
-      "requires": {
-        "imask": "^6.4.3",
-        "prop-types": "^15.7.2"
-      }
-    },
     "react-input-mask": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-2.0.4.tgz",
@@ -27003,14 +27003,6 @@
         "workbox-webpack-plugin": "^6.4.1"
       }
     },
-    "react-text-mask": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/react-text-mask/-/react-text-mask-5.5.0.tgz",
-      "integrity": "sha512-SLJlJQxa0uonMXsnXRpv5abIepGmHz77ylQcra0GNd7Jtk4Wj2Mtp85uGQHv1avba2uI8ZvRpIEQPpJKsqRGYw==",
-      "requires": {
-        "prop-types": "^15.5.6"
-      }
-    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

package.json

@@ -13,11 +13,9 @@
     "formik": "^2.2.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-imask": "^6.4.3",
     "react-input-mask": "^2.0.4",
     "react-router-dom": "^6.6.1",
     "react-scripts": "5.0.1",
-    "react-text-mask": "^5.5.0",
     "sass": "^1.57.1",
     "typescript": "^4.9.4",
     "web-vitals": "^2.1.4",
@@ -48,6 +46,8 @@
     ]
   },
   "devDependencies": {
+    "@types/jquery": "^3.5.16",
+    "@types/jquery-mask-plugin": "^1.14.4",
     "@types/react-input-mask": "^3.0.2"
   }
 }

src/components/Header/Header.tsx

@@ -16,7 +16,10 @@ const Header = () => {
   };
 
   return (
-    <header className={styles["page-header"]}>
+    <header
+      className={styles["page-header"]}
+      data-testid="header__container"
+    >
       <div className={styles["page-header__container"]}>
         <section className={styles["page-header__container-top"]}>
           <div className={styles["page-header__menu"]}>
@@ -35,24 +38,15 @@ const Header = () => {
               onClick={activeMenuMobile}
             />
           </div>
-          <a className={styles["page-header__logo"]} href="/">
+          <a
+            className={styles["page-header__logo"]}
+            href="/"
+            data-testid="header__logo"
+          >
             <img src={Logo} alt="" />
           </a>
           <SearchBar />
-          <div className={styles["page-header__container-login"]}>
-            <Link link="/" text="ENTRAR" className={styles["link"]} />
-            <a
-              href="/"
-              aria-label="Carrinho"
-              className={styles["page-header__cart"]}
-            >
-              <img
-                src={Cart}
-                alt=""
-                className={styles["page-header__cart-image"]}
-              />
-            </a>
-          </div>
+          <MenuTop />
         </section>
         <section className={styles["page-header__container-bottom-mobile"]}>
           <SearchBar />
@@ -65,4 +59,27 @@ const Header = () => {
   );
 };
 
+export function MenuTop() {
+  return (
+    <div
+      className={styles["page-header__container-login"]}
+      data-testid="header__menuTop" 
+    >
+            <Link link="/" text="ENTRAR" className={styles["link"]} testId="header__enter" />
+            <a
+              href="/"
+              aria-label="Carrinho"
+              className={styles["page-header__cart"]}
+            >
+              <img
+                src={Cart}
+                alt=""
+                className={styles["page-header__cart-image"]}
+                data-testid="header__cartIcon"
+              />
+            </a>
+          </div>
+  )
+}
+
 export { Header };

src/components/Header/HeaderLinks.tsx

@@ -3,11 +3,13 @@ import styles from "./header.module.scss";
 
 const HeaderLinks = () => {
   return (
-    <>
+    <div
+      data-testid="header__menuBottom"
+    >
       <Link className={styles["link"]} link="/" text="CURSOS" />
       <Link className={styles["link"]} link="/" text="SAIBA MAIS" />
       <Link className={styles["link"]} link="/" text="INSTITUCIONAIS" />
-    </>
+    </div>
   );
 };
 

src/components/Header/SearchBar.tsx

@@ -6,6 +6,7 @@ const SearchBar = () => {
   return (
     <div className={styles["page-header__busca"]}>
       <input
+        data-testid="header__searchBar"
         className={styles["page-header__busca-input"]}
         type="text"
         placeholder="Buscar..."

src/components/Header/header.module.scss

@@ -5,6 +5,22 @@
     flex-direction: column;
     background: $black;
 
+    @media  (min-width: 2500px) {
+        height: 180px;
+    }
+
+    @media (min-width: 1200px) and (max-width: 2000px) {
+        height: 154px;
+    }
+
+    @media  (min-width: 1000px) and (max-width: 1200px) {
+        height: 137px;
+    }
+
+    @media  (max-width: 700px) {
+        height: 129px;
+    }
+
     &__container-top {
         height: 76px;
         display: flex;
@@ -41,6 +57,27 @@
         outline: 0;
         padding-left: 16px;
 
+        @media  (min-width: 2500px) {
+            width: 600px;
+            height: 50px;
+            font-size: 26px;
+        }
+
+        @media (min-width: 1200px) and (max-width: 2000px) {
+            width: 400px;
+            height: 41px;
+            font-size: 20px;
+        }
+
+        @media  (min-width: 1000px) and (max-width: 1200px) {
+            height: 35px;
+            font-size: 16px;
+        }
+
+        @media  (max-width: 700px) {
+            height: 35px;
+        }
+
 
         &::placeholder {
             color: $gray-800;
@@ -173,11 +210,6 @@
             width: 22.4%;
         }
 
-        &__busca-input {
-            height: 57px;
-            font-size: 28px;
-            line-height: 33px;
-        }
 
         &__busca-icon {
             top: 50%;

src/components/Main/Main.tsx

@@ -1,21 +1,38 @@
 import iconHome from "./assets/iconHome.svg";
 import arrow from "./assets/arrow.svg";
 import { SubjectMain } from "./Subject/SubjectMain";
-
 import styles from "./main.module.scss";
 
-const Main = () => {
+export const Main = () => {
   return (
     <main className={styles["page-main"]}>
-      <div className={styles["page-main__menu"]}>
-        <img className={styles["page-main__img-home"]} src={iconHome} alt="" />
-        <img className={styles["page-main__img-arrow"]} src={arrow} alt="" />
-        <strong className={styles["page-main__text"]}>INSTITUCIONAL</strong>
-      </div>
-      <h1 className={styles["page-main__title"]}>INSTITUCIONAL</h1>
+      <Breadcrumb />
+      <InstitucionalTitle />
       <SubjectMain />
     </main>
   );
 };
 
-export { Main };
+export const Breadcrumb = () => {
+  return (
+    <div
+      className={styles["page-main__menu"]}
+      data-testid="breadcrumb__container"
+    >
+        <img className={styles["page-main__img-home"]} src={iconHome} alt="" />
+        <img className={styles["page-main__img-arrow"]} src={arrow} alt="" />
+        <strong className={styles["page-main__text"]}>INSTITUCIONAL</strong>
+      </div>
+  )
+}
+
+export const InstitucionalTitle = () => {
+  return (
+    <h1
+      className={styles["page-main__title"]}
+      data-testid="title"
+    >
+      INSTITUCIONAL
+    </h1>
+  )
+}

src/components/Main/Subject/Contato/RegistrationForm.tsx

@@ -1,10 +1,18 @@
-import react, { useState } from "react";
-import styles from "./form.module.scss";
+import React, { useState } from "react";
 import stylesInput from "./input.module.scss";
 import stylesCheckbox from "./checkbox.module.scss";
 import { FormSchema } from "./schema/FormSchema";
+import InputMask from "react-input-mask";
+import {
+  Formik,
+  Form,
+  Field,
+  ErrorMessage,
+  FormikHelpers,
+  FieldProps,
+} from "formik";
 
-import { Formik, Form, Field, ErrorMessage } from "formik";
+import styles from "./form.module.scss";
 
 interface FormikValues {
   name: string;
@@ -26,16 +34,24 @@ const initialValues = {
   acceptTerms: false,
 };
 
+let listClient: Array<any> = [];
+
 const RegistrationForm = () => {
   const [isSubmit, setIsSubmit] = useState(false);
+  const handleSubmit = (
+    values: FormikValues,
+    actions: FormikHelpers<FormikValues>
+  ) => {
+    listClient.push(values);
+    console.log(listClient);
+    actions.resetForm();
+    setIsSubmit(!isSubmit);
+  };
+
   return (
     <div className={styles["page-main__form"]}>
       <Formik
-        onSubmit={(values: FormikValues, { resetForm }) => {
-          console.log(values);
-          setIsSubmit(!isSubmit);
-          resetForm({ values: initialValues });
-        }}
+        onSubmit={handleSubmit}
         initialValues={initialValues}
         validationSchema={FormSchema}
       >
@@ -78,11 +94,16 @@ const RegistrationForm = () => {
               CPF
             </label>
             <Field
-              className={stylesInput["page-main__input"]}
-              id="Cpf"
-              placeholder="000.000.000-00"
               name="cpf"
-              mask="999.999.999-99"
+              render={({ field }: any) => (
+                <InputMask
+                  {...field}
+                  className={stylesInput["page-main__input"]}
+                  id="Cpf"
+                  placeholder="000.000.000-00"
+                  mask={"999.999.999-99"}
+                />
+              )}
             />
             <ErrorMessage
               component="span"
@@ -95,11 +116,16 @@ const RegistrationForm = () => {
               Data de Nascimento:
             </label>
             <Field
-              className={stylesInput["page-main__input"]}
-              id="Data"
-              placeholder="00.00.0000"
               name="data"
-              mask="99.99.9999"
+              render={({ field }: FieldProps) => (
+                <InputMask
+                  {...field}
+                  mask="99.99.9999"
+                  className={stylesInput["page-main__input"]}
+                  id="Data"
+                  placeholder="00.00.0000"
+                />
+              )}
             />
             <ErrorMessage
               component="span"
@@ -112,11 +138,16 @@ const RegistrationForm = () => {
               Telefone:
             </label>
             <Field
-              className={stylesInput["page-main__input"]}
-              id="tel"
-              placeholder="(00) 00000-0000"
               name="tel"
-              mask="(99) 99999-9999"
+              render={({ field }: any) => (
+                <InputMask
+                  {...field}
+                  className={stylesInput["page-main__input"]}
+                  id="tel"
+                  placeholder="(00) 00000-0000"
+                  mask="(99) 99999-9999"
+                />
+              )}
             />
             <ErrorMessage
               component="span"

src/components/Main/Subject/Contato/schema/FormSchema.ts

@@ -6,10 +6,13 @@ const FormSchema = () =>
       .min(3, "mínimo 3 caracteres")
       .required("*Campo Obrigatório"),
     email: Yup.string().required("*Campo Obrigatório").email("Email inválido"),
-    cpf: Yup.string().length(14).required("*Campo Obrigatório"),
+    cpf: Yup.string()
+      .min(14, "mínimo 14 caracteres")
+      .required("*Campo Obrigatório"),
     data: Yup.date()
-      .required("*Campo Obrigatório")
-      .max(new Date(), "Não é possível incluir uma data futura"),
+      .min("01.01.1900", "data mínima 01.01.1900")
+      .max(new Date())
+      .required("*Campo obrigatório"),
     tel: Yup.string().length(15).required("*Campo Obrigatório"),
     instagram: Yup.string(),
     acceptTerms: Yup.bool().oneOf([true], "*"),

src/components/Main/Subject/Nav/Li/Li.tsx

@@ -4,14 +4,16 @@ import { NavLink, NavLinkProps } from "react-router-dom";
 
 interface LiProps extends NavLinkProps {
   text: string;
-  to: NavLinkProps["to"];
+  to: string;
 }
 
-const LiForm = (props: LiProps) => {
-  const { text, to } = props;
+const LiForm = ({ text, to }: LiProps) => {
+
+  console.log(geDataTestId(to));
   return (
     <li>
       <NavLink
+        data-testid={geDataTestId(to)}
         to={to}
         className={({ isActive }) =>
           isActive
@@ -25,4 +27,13 @@ const LiForm = (props: LiProps) => {
   );
 };
 
+function geDataTestId(url: string ) {
+  return `lateralMenu__item${isTextUrl() ? " lateralMenu__itemActive" : ""}`;
+
+  function isTextUrl() {
+    
+    return window.location.href.includes(url);
+  }
+}
+
 export { LiForm };

src/components/Main/Subject/Nav/Nav.tsx

@@ -10,9 +10,12 @@ const Nav = () => {
 
   return (
     <>
-      <nav className={styles["page-subject__nav"]}>
+      <nav
+        className={styles["page-subject__nav"]}
+        data-testid="lateralMenu__container" 
+      >
         <ul className={styles["page-subject__menu"]}>
-          <LiForm to="/" text="Sobre" />
+          <LiForm to="/Sobre" text="Sobre" />
           <LiForm to="/forma-de-pagamento" text="Forma de Pagamento" />
           <LiForm to="/entrega" text="Entrega" />
           <LiForm to="/troca-e-devolucao" text="Troca e Devolução" />

src/components/Main/Subject/SubjectMain.tsx

@@ -15,7 +15,7 @@ const SubjectMain = () => {
       <Router>
         <Nav />
         <Routes>
-          <Route path="/" element={<Sobre />} />
+          <Route path="/sobre" element={<Sobre />} />
           <Route path="/forma-de-pagamento" element={<FormaDePagamento />} />
           <Route path="/entrega" element={<Entrega />} />
           <Route path="/troca-e-devolucao" element={<TrocaEDevolucao />} />

src/components/Main/Subject/SubjectText.tsx

@@ -1,23 +1,28 @@
+import React from "react";
 import styles from "./subject.module.scss";
 
 interface SubjectTextProps {
   title: string;
 }
-const SubjectText = (props: SubjectTextProps) => {
-  const { title } = props;
+const SubjectText = ({title}: SubjectTextProps) => {
+
   return (
-    <article className={styles["page-subject__container"]}>
-      <h2 className={styles["page-subject__title"]}>{title}</h2>
-      <p className={styles["page-subject__paragraph"]}>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+    <article
+      className={styles["page-subject__container"]}
+      data-testid="texts__container"
+    >
+      <Title title={title} />
+        <Text 
+          text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
         veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
         commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
         velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
         occaecat cupidatat non proident, sunt in culpa qui officia deserunt
-        mollit anim id est laborum.
-      </p>
-      <p className={styles["page-subject__paragraph"]}>
+        mollit anim id est laborum."
+        />
+        <Text 
+          text="
         Sed ut perspiciatis unde omnis iste natus error sit voluptatem
         accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
         illo inventore veritatis et quasi architecto beatae vitae dicta sunt
@@ -26,17 +31,47 @@ const SubjectText = (props: SubjectTextProps) => {
         voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
         quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
         eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
-        voluptatem.
-      </p>
-      <p className={styles["page-subject__paragraph"]}>
+        voluptatem." />
+        <Text 
+          text="
         Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
         suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
         autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
         nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
-        voluptas nulla pariatur?
-      </p>
+        voluptas nulla pariatur?" />
     </article>
   );
 };
 
+export type TitleProps = {
+  title: string;
+}
+
+export const Title = ({title}: TitleProps) => { 
+  return (
+    <h2
+      className={styles["texts__title"]}
+      data-testid="texts__title"
+    >
+      {title}
+    </h2>
+  )
+}
+
+export type TextProps = {
+  text: string;
+}
+
+export const Text = ({ text }: TextProps) => {
+  return (
+  <p
+    className={styles["page-subject__paragraph"]}
+    data-testid="texts__text"
+  >
+    {text}
+  </p>
+  )
+
+ }
+
 export { SubjectText };

src/components/button/Button.tsx

@@ -4,14 +4,17 @@ import styles from "../footer/footer.module.scss";
 
 interface ButtonProps {
   text: string;
+  testId?: string;
 }
 
-const Button = (props: ButtonProps) => {
-  return (
-    <button type="submit" className={styles["button"]}>
-      {props.text}
+const Button = ({ text, testId  }: ButtonProps) => (
+    <button
+      type="submit"
+      className={styles["button"]}
+      data-testid={testId} 
+    >
+      {text}
     </button>
   );
-};
 
-export default Button;
+export { Button };

src/components/footer/Footer.tsx

@@ -1,14 +1,17 @@
 import React from "react";
-import FooterBottom from "./footer-bottom/footer-bottom";
-import FooterTop from "./footer-top/footerTop";
+import { Newsletter } from "./newsletter/Newsletter";
+import { FooterTop } from "./footer-top/footerTop";
+import { FooterBottom } from "./footer-bottom/footer-bottom";
+import { IconFixed } from "./icon-fixed/icon-fixed";
 
 import styles from "./footer.module.scss";
-import IconFixed from "./icon-fixed/icon-fixed";
-import Newsletter from "./newsletter/Newsletter";
 
 const Footer = () => {
   return (
-    <footer className={styles["page-footer"]}>
+    <footer
+      className={styles["page-footer"]}
+      data-testid="footer__container"  
+    >
       <Newsletter />
       <FooterTop />
       <FooterBottom />
@@ -17,4 +20,4 @@ const Footer = () => {
   );
 };
 
-export default Footer;
+export { Footer };

src/components/footer/footer-bottom/autores/autores.tsx

@@ -1,23 +1,40 @@
 import React from "react";
+import { Img } from "../img-footer/img";
+import { Text } from "../../text/Text";
+
+import Vtex from "../assets/svg/Vtex.svg";
+import M3 from "../assets/svg/M3.svg";
 
 import styles from "../../footer.module.scss";
-import Img from "../img-footer/img";
-import Text from "../../text/Text";
-import Vtex from "../assets/Vtex.svg";
-import M3 from "../assets/M3.svg";
 
 const Autores = () => {
   return (
     <section className={styles["page-footer__footer-autores"]}>
-      <Text className={styles["page-footer__footer-text"]} text="Powered by" />
-      <Img className={styles["autores-img"]} img={Vtex} text="vtex" />
-      <Text
-        className={styles["page-footer__footer-text"]}
-        text="Developed by"
-      />
-      <Img className={styles["autores-img"]} img={M3} text="M3" />
+      <PoweredBy />
+      <DevelopedBy />
     </section>
   );
 };
 
-export default Autores;
+export { Autores };
+
+export const PoweredBy = () => (
+  <div
+    data-testid="footer__vtex"
+  >
+    <Text className={styles["page-footer__footer-text"]} text="Powered by" />
+    <Img className={styles["autores-img"]} img={Vtex} text="vtex" />
+  </div>
+)
+
+export const DevelopedBy = () => (
+  <div
+    data-testid="footer__m3"
+  >
+  <Text
+        className={styles["page-footer__footer-text"]}
+        text="Developed by"
+      />
+      <Img className={styles["autores-img"]} img={M3} text="M3" />
+</div>
+)

src/components/footer/footer-bottom/footer-bottom.tsx

@@ -1,21 +1,17 @@
 import React from "react";
+import { Autores } from "./autores/autores";
+import { Text } from "../text/Text";
+import { Imgs } from "./pagamento/imgs";
 
 import styles from "../footer.module.scss";
-import Autores from "./autores/autores";
-import Text from "../text/Text";
-import Imgs from "./pagamento/imgs";
-
 const FooterBottom = () => {
   return (
-    <section className={styles["page-footer__footer-bottom"]}>
+    <section
+      className={styles["page-footer__footer-bottom"]}
+      data-testid="footer__bottomContainer" 
+    >
       <div className={styles["page-footer__footer-bottom-container"]}>
-        <section className={styles["page-footer__container-footer-text"]}>
-          <Text
-            className={styles["page-footer__footer-text"]}
-            text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor"
-          />
-        </section>
+        <Copyright />
         <Imgs />
         <Autores />
       </div>
@@ -23,4 +19,15 @@ const FooterBottom = () => {
   );
 };
 
-export default FooterBottom;
+export { FooterBottom };
+
+export const Copyright = () => (
+  <section
+    className={styles["page-footer__container-footer-text"]}>
+    <Text
+      testId="footer__copyright"
+      className={styles["page-footer__footer-text"]}
+      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tecmpor"
+    />
+  </section>
+)

src/components/footer/footer-bottom/img-footer/img.tsx

@@ -1,15 +1,19 @@
 import React from "react";
 
-import styles from "../../../footer.module.scss";
-
-interface ButtonProps {
+export interface ImgProps {
   img: string;
   text: string;
   className: string;
+  testId?: string
 }
 
-const Img = (props: ButtonProps) => {
-  return <img className={props.className} src={props.img} alt={props.text} />;
-};
+const Img = ({ img, text, testId, className }: ImgProps) => (
+  <img
+    className={className}
+    src={img}
+    alt={text}
+    data-testid={testId}
+  />
+)
 
-export default Img;
+export { Img };

src/components/footer/footer-bottom/pagamento/imgs.tsx

@@ -1,34 +1,56 @@
 import React from "react";
 
 import styles from "../../footer.module.scss";
-import Img from "../img-footer/img";
-import Master from "../assets/Master.png";
-import Visa from "../assets/Visa.png";
-import Diners from "../assets/Diners.png";
-import Elo from "../assets/Elo.png";
-import Hiper from "../assets/Hiper.png";
-import Pagseguro from "../assets/Pagseguro.png";
-import Boleto from "../assets/Boleto.png";
-import vtex from "../assets/vtex-pci-200.png";
+import { Img, ImgProps } from "../img-footer/img";
+import Master from "../assets/img/Master.png";
+import Visa from "../assets/img/Visa.png";
+import Diners from "../assets/img/Diners.png";
+import Elo from "../assets/img/Elo.png";
+import Hiper from "../assets/img/Hiper.png";
+import Pagseguro from "../assets/img/Pagseguro.png";
+import Boleto from "../assets/img/Boleto.png";
+import vtex from "../assets/img/vtex-pci-200.png";
 
-const imgs = () => {
+const PaymentsMethods = () => {
   return (
-    <section className={styles["page-footer__imgs"]}>
-      <Img className={styles["img"]} img={Master} text="Cartão master" />
-      <Img className={styles["img"]} img={Visa} text="Cartão visa" />
+    <section
+      className={styles["page-footer__imgs"]}
+      data-testid="footer__paymentMethods"   
+    >
+      <PaymentMethod img={Master} text="Cartão master" />
+      <PaymentMethod img={Visa} text="Cartão visa" />
       <Img
         className={styles["img"]}
         img={Diners}
         text="Cartão american diners"
       />
-      <Img className={styles["img"]} img={Elo} text="Cartão elo" />
-      <Img className={styles["img"]} img={Hiper} text="Cartão hiper" />
-      <Img className={styles["img"]} img={Pagseguro} text="Pague Seguro" />
-      <Img className={styles["img"]} img={Boleto} text="Pagamento boleto" />
+      <PaymentMethod img={Elo} text="Cartão elo" />
+      <PaymentMethod img={Hiper} text="Cartão hiper" />
+      <PaymentMethod img={Pagseguro} text="Pague Seguro" />
+      <PaymentMethod img={Boleto} text="Pagamento boleto" />
       <div className={styles["divisor"]}></div>
-      <Img className={styles["img-grande"]} img={vtex} text="Vtex" />
+      <PaymentMethod isBig img={vtex} text="Vtex" />
     </section>
   );
 };
 
-export default imgs;
+export type PaymentMethodProps = Pick<ImgProps, "img" | "text"> & {
+  isBig?: boolean;
+}
+
+export const PaymentMethod = ({ img, text, isBig }: PaymentMethodProps) => {
+  return (
+    <Img
+      className={getClassName()}
+      img={img}
+      text={text}
+      testId="footer__paymentMethod"
+    />
+  )
+
+  function getClassName() {
+    return isBig ? styles["img-grande"] : styles["img"]
+  }
+}
+
+export { PaymentsMethods as Imgs };

src/components/footer/footer-top/Duvidas/Duvidas.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
-import Link from "../../../link/Link";
+import { Link } from "../../../link/Link";
+import { ButtonFooterMobile } from "../button/button";
+import { Title } from "../title/Title";
 
 import styles from "../../footer.module.scss";
-import ButtonFooterMobile from "../button/button";
-import Title from "../title/Title";
 
 const Duvidas = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -35,4 +35,4 @@ const Duvidas = () => {
   );
 };
 
-export default Duvidas;
+export { Duvidas };

src/components/footer/footer-top/Fale-conosco/FaleConosco.tsx

@@ -1,11 +1,10 @@
 import React, { useState } from "react";
-import Link from "../../../link/Link";
+import { Link } from "../../../link/Link";
+import { Text } from "../../text/Text";
+import { ButtonFooterMobile } from "../button/button";
+import { Title } from "../title/Title";
 
 import styles from "../../footer.module.scss";
-import Text from "../../text/Text";
-import ButtonFooterMobile from "../button/button";
-import Title from "../title/Title";
-
 const FaleConosco = () => {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -39,4 +38,4 @@ const FaleConosco = () => {
   );
 };
 
-export default FaleConosco;
+export { FaleConosco };

src/components/footer/footer-top/Institucional/Institucional.tsx

@@ -1,10 +1,9 @@
 import React, { useState } from "react";
-import Link from "../../../link/Link";
+import { Link } from "../../../link/Link";
+import { ButtonFooterMobile } from "../button/button";
+import { Title } from "../title/Title";
 
 import styles from "../../footer.module.scss";
-import ButtonFooterMobile from "../button/button";
-import Title from "../title/Title";
-
 const Institucional = () => {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -12,9 +11,15 @@ const Institucional = () => {
     setIsOpen(!isOpen);
   };
   return (
-    <section className={styles["page-footer__container"]}>
+    <section
+      data-testid="footer__menuContainer"
+      className={styles["page-footer__container"]}>
       <div className={styles["container-title"]} onClick={handleMenuFooter}>
-        <Title className={styles["title"]} text="INSTITUCIONAL" />
+        <Title
+          className={styles["title"]}
+          text="INSTITUCIONAL"
+          testId="footer__menuTitle"
+        />
         <ButtonFooterMobile
           className={
             isOpen ? styles["link-mobile-active"] : styles["link-mobile"]
@@ -23,13 +28,22 @@ const Institucional = () => {
       </div>
 
       <div className={isOpen ? styles["active"] : styles["container-link"]}>
-        <Link className={styles["link"]} link="/" text="Quem Somos" />
+        <Link
+          testId="footer__menuItem"
+          className={styles["link"]}
+          link="/"
+          text="Quem Somos"
+        />
         <Link
           className={styles["link"]}
           link="/"
           text="Política de Privacidade"
         />
-        <Link className={styles["link"]} link="/" text="Segurança" />
+        <Link
+          className={styles["link"]}
+          link="/"
+          text="Segurança"
+        />
         <Link
           className={styles["link-underline"]}
           link="/"
@@ -40,4 +54,4 @@ const Institucional = () => {
   );
 };
 
-export default Institucional;
+export { Institucional };

src/components/footer/footer-top/Rede-social/Icon/Icon.tsx

@@ -6,14 +6,17 @@ interface IconProps {
   img: string;
   text: string;
   href: string;
+  testId?: string;
 }
 
-const Icon = (props: IconProps) => {
-  return (
-    <a href={props.href} className={styles["icon"]}>
-      <img src={props.img} alt={props.text} />
+const Icon = ({ img, text, href, testId }: IconProps) => (
+    <a href={href} target="_blank" className={styles["icon"]} rel="noreferrer">
+      <img
+        src={img}
+        alt={text}
+        data-testid={testId}
+      />
     </a>
-  );
-};
+)
 
-export default Icon;
+export { Icon };

src/components/footer/footer-top/Rede-social/RedeSociais.tsx

@@ -1,27 +1,58 @@
 import React from "react";
+import { Link } from "../../../link/Link";
+import { Icon } from "./Icon/Icon";
 
-import styles from "../../footer.module.scss";
-import Icon from "./Icon/Icon";
 import facebook from "./assets/icon-facebook.svg";
 import instagram from "./assets/icon-instagram.svg";
 import twitter from "./assets/icon-twitter.svg";
 import youtube from "./assets/icon-youtube.svg";
 import linkedin from "./assets/icon-linkedin.svg";
-import Link from "../../../link/Link";
+
+import styles from "../../footer.module.scss";
 
 const RedeSociais = () => {
   return (
-    <div className={styles["page-footer__rede-sociais"]}>
-      <div className={styles["page-footer__rede-sociais-icons"]}>
-        <Icon img={facebook} href="/" text="icone facebook" />
-        <Icon img={instagram} href="/" text="icone instagram" />
-        <Icon img={twitter} href="/" text="icone facebook" />
-        <Icon img={youtube} href="/" text="icone youtube" />
-        <Icon img={linkedin} href="/" text="icone linkedin" />
+    <div
+      className={styles["page-footer__rede-sociais"]}
+      data-testid="footer__socialContainer"
+    >
+      <div
+        data-testid="footer__socialIcons" 
+        className={styles["page-footer__rede-sociais-icons"]}>
+        <Icon
+          img={facebook}
+          href="https://pt-br.facebook.com/digitalm3/"
+          text="icone facebook"
+          testId="footer__socialIcon"
+        />
+        <Icon
+          img={instagram}
+          href="https://www.instagram.com/m3.ecommerce/"
+          text="icone instagram"
+          testId="footer__socialIcon"
+        />
+        <Icon img={twitter} href="https://twitter.com/" text="icone facebook" />
+        <Icon
+          img={youtube}
+          href="https://www.youtube.com/channel/UCW4o86gZG_ceA8CmHltXeXA"
+          text="icone youtube"
+          testId="footer__socialIcon"
+        />
+        <Icon
+          img={linkedin}
+          href="https://www.linkedin.com/company/11412599/"
+          text="icone linkedin"
+          testId="footer__socialIcon"
+        />
       </div>
-      <Link className={styles["link"]} link="/" text="www.loremipsum.com" />
+      <Link
+        className={styles["link"]}
+        link="/"
+        text="www.loremipsum.com"
+        testId="footer__socialSite"
+      />
     </div>
   );
 };
 
-export default RedeSociais;
+export { RedeSociais };

src/components/footer/footer-top/button/button.tsx

@@ -1,13 +1,12 @@
 import React from "react";
 
-import styles from "../../footer.module.scss";
-
 interface ButtonProps {
   className: string;
 }
 
 const ButtonFooterMobile = (props: ButtonProps) => {
-  return <a className={props.className}></a>;
+  const { className } = props;
+  return <a className={className}></a>;
 };
 
-export default ButtonFooterMobile;
+export { ButtonFooterMobile };

src/components/footer/footer-top/footerTop.tsx

@@ -1,11 +1,10 @@
 import React from "react";
+import { Duvidas } from "./Duvidas/Duvidas";
+import { FaleConosco } from "./Fale-conosco/FaleConosco";
+import { Institucional } from "./Institucional/Institucional";
+import { RedeSociais } from "./Rede-social/RedeSociais";
 
 import styles from "../footer.module.scss";
-import Duvidas from "./Duvidas/Duvidas";
-import FaleConosco from "./Fale-conosco/FaleConosco";
-import Institucional from "./Institucional/Institucional";
-import RedeSociais from "./Rede-social/RedeSociais";
-
 const FooterTop = () => {
   return (
     <section className={styles["page-footer__top"]}>
@@ -19,4 +18,4 @@ const FooterTop = () => {
   );
 };
 
-export default FooterTop;
+export { FooterTop };

src/components/footer/footer-top/title/Title.tsx

@@ -1,10 +1,16 @@
 export interface TitleProps {
   text: string;
   className: string;
+  testId?: string 
 }
 
-const Title = (props: TitleProps) => {
-  return <h3 className={props.className}>{props.text}</h3>;
+const Title = ({ text, className, testId }: TitleProps) => {
+  return <h3
+    className={className}
+    data-testid={testId}
+  >
+    {text}
+  </h3>;
 };
 
-export default Title;
+export { Title };

src/components/footer/footer.module.scss

@@ -163,15 +163,16 @@
     &__footer-bottom {
         width: 100%;
         background: $black;
-        padding: 15px 16px;
+        padding: 15px 0;
         display: flex;
+        justify-content: center;
     }
 
     &__footer-bottom-container {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        width: 100%;
+        width: 84.37%;
     }
 
     &__imgs {
@@ -437,11 +438,25 @@
             display: none;
         }
 
+        &__footer-bottom {
+            padding: 15px 16px;
+        }
+
         &__footer-bottom-container {
             flex-direction: column;
             gap: 15px;
             align-items: flex-start;
-            max-width: 100%;
+            width: 100%;
+        }
+
+        .img {
+            width: 3.64%;
+            min-width: 30px;
+        }
+
+        .img-grande {
+            width: 5.55%;
+            min-width: 45px;
         }
 
 
@@ -471,11 +486,13 @@
         .img {
             width: 8.75%;
             height: auto;
+            min-width: 20px;
         }
 
         .img-grande {
             width: 13.12%;
             height: auto;
+            min-width: 30px;
         }
 
         &__icon-fixed {

src/components/footer/icon-fixed/icon-fixed.tsx

@@ -1,4 +1,4 @@
-import LinkTop from "./link/Link";
+import { LinkTop } from "./link/Link";
 import Whatsapp from "./assets/whatsapp.svg";
 import Seta from "./assets/Seta.svg";
 
@@ -28,4 +28,4 @@ const IconFixed = () => {
   );
 };
 
-export default IconFixed;
+export { IconFixed };

src/components/footer/icon-fixed/link/Link.tsx

@@ -8,11 +8,12 @@ interface LinkProps {
 }
 
 const LinkTop = (props: LinkProps) => {
+  const { img, className, href, onClick } = props;
   return (
-    <a onClick={props.onClick} href={props.href} className={props.className}>
-      <img src={props.img} alt="" />
+    <a onClick={onClick} href={href} className={className}>
+      <img src={img} alt="" />
     </a>
   );
 };
 
-export default LinkTop;
+export { LinkTop };

src/components/footer/newsletter/Newsletter.tsx

@@ -1,9 +1,10 @@
 import React, { useState } from "react";
-import Button from "../../button/Button";
+import { Button } from "../../button/Button";
 import { Formik, Form, Field, ErrorMessage } from "formik";
-import styles from "../footer.module.scss";
 import { NewsletterSchema } from "./schema/NewsletterSchema";
 
+import styles from "../footer.module.scss";
+
 interface FormikValues {
   email: string;
 }
@@ -15,14 +16,14 @@ const initialValues = {
 const Newsletter = () => {
   const [isSubmit, setIsSubmit] = useState(false);
   return (
-    <section className={styles["page-footer__newsletter"]}>
+    <section
+      data-testid="newsletter__container"
+      className={styles["page-footer__newsletter"]}
+    >
       <div className={styles["page-footer__newsletter-container"]}>
-        <h3 className={styles["page-footer__newsletter-title"]}>
-          ASSINE NOSSA NEWSLETTER
-        </h3>
+        <Title />   
         <Formik
           onSubmit={(values: FormikValues, { resetForm }) => {
-            console.log(values);
             setIsSubmit(!isSubmit);
             resetForm({ values: initialValues });
           }}
@@ -33,6 +34,7 @@ const Newsletter = () => {
             <div className={styles["page-footer__newsletter-form"]}>
               <Field
                 name="email"
+                data-testid="newsletter__input"
                 className={styles["input"]}
                 placeholder="E-mail"
               />
@@ -42,7 +44,7 @@ const Newsletter = () => {
                 className={styles["page-footer__newsletter-error"]}
               />
             </div>
-            <Button text="ENVIAR" />
+            <Button text="ENVIAR" testId="newsletter__submit" />
           </Form>
         </Formik>
       </div>
@@ -50,4 +52,15 @@ const Newsletter = () => {
   );
 };
 
-export default Newsletter;
+export { Newsletter };
+
+export const Title = () => { 
+  return (
+    <h3
+      className={styles["page-footer__newsletter-title"]}
+      data-testid="newsletter__title"
+    >
+      ASSINE NOSSA NEWSLETTER
+    </h3>
+  )
+}

src/components/footer/text/Text.tsx

@@ -1,13 +1,16 @@
-import React from "react";
-import styles from "../../footer.module.scss";
-
 interface TextProps {
   text: string;
   className: string;
+  testId?: string;
 }
 
-const Text = (props: TextProps) => {
-  return <p className={props.className}>{props.text}</p>;
-};
+const Text = ({ text, className, testId}: TextProps) => (
+  <p
+    className={className}
+    data-testid={testId}
+  >
+    {text}
+  </p>
+);
 
-export default Text;
+export { Text };

src/components/link/Link.tsx

@@ -2,12 +2,17 @@ export interface LinkProps {
   link: string;
   text: string;
   className: string;
+  testId?: string;
 }
 
 const Link = (props: LinkProps) => {
   const { link, text, className } = props;
   return (
-    <a href={link} className={className}>
+    <a
+      href={link}
+      className={className}
+      data-testid={props.testId} 
+    >
       {text}
     </a>
   );

src/pages/Home.tsx

@@ -1,4 +1,5 @@
-import Footer from "../components/footer/Footer";
+import React from "react";
+import { Footer } from "../components/footer/Footer";
 import { Header } from "../components/Header/Header";
 import { Main } from "../components/Main/Main";