package.json

@@ -11,13 +11,15 @@
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
     "bootstrap": "^5.2.3",
+    "formik": "^2.2.9",
     "node-sass": "^7.0.3",
     "react": "^18.2.0",
     "react-bootstrap": "^2.7.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.4",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "yup": "^0.32.11"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/FormInput/FormInput.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { useFormik } from "formik";
+import styles from "./formInput.module.scss";
+
+const FormInput = () => {
+  const formik = useFormik({
+    initialValues: {
+      nome: "",
+      email: "",
+      cpf: "",
+      nascimento: "",
+      tel: "",
+      instagram: "",
+    },
+    onSubmit: function (values) {
+      alert(`You are registered! Name: ${values.nome}. Email: ${values.email}. Profession: ${values.cpf}. 
+              Age: ${values.nascimento}`);
+    },
+  });
+
+  return (
+    <div className={styles["form"]}>
+      <form onSubmit={formik.handleSubmit}>
+        <h2>Preencha o formulário</h2>
+        <ul className={styles["form-itens"]}>
+          <li className={styles["form-item"]}>
+            <label>Nome</label>
+            <input
+              type="text"
+              placeholder="Seu nome completo"
+              value={formik.values.nome}
+            />
+          </li>
+          <li className={styles["form-item"]}>
+            <label>E-mail</label>
+            <input
+              type="text"
+              placeholder="Seu email"
+              value={formik.values.email}
+            />
+          </li>
+          <li className={styles["form-item"]}>
+            <label>CPF</label>
+            <input
+              type="text"
+              placeholder="000.000.000-00"
+              value={formik.values.cpf}
+            />
+          </li>
+
+          <li className={styles["form-item"]}>
+            <label>Data de Nascimento</label>
+            <input
+              type="text"
+              placeholder="00.00.00"
+              value={formik.values.nascimento}
+            />
+          </li>
+          <li className={styles["form-item"]}>
+            <label>Telefone</label>
+            <input
+              type="text"
+              placeholder="(00)00000-0000"
+              value={formik.values.tel}
+            />
+          </li>
+          <li className={styles["form-item"]}>
+            <label>Instagram</label>
+            <input
+              type="text"
+              placeholder="@seuuser"
+              value={formik.values.instagram}
+            />
+          </li>
+        </ul>
+        <button>Cadastre-se</button>
+      </form>
+    </div>
+  );
+};
+
+export { FormInput };

src/components/FormInput/formInput.module.scss

@@ -0,0 +1,9 @@
+.form {
+  display: flex;
+  flex-direction: column;
+}
+.form-item {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 10px;
+}

src/components/Newsletter/Newsletter.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import styles from "./newsletter.module.scss";
+const Newsletter = () => {
+  return (
+    <label className={styles["newsForm"]}>
+      ASSINE NOSSA NEWSLETTER
+      <div className={styles["newsForm-wrapper"]}>
+        <input
+          className={styles["newsForm-input"]}
+          type="text"
+          placeholder="E-mail"
+        />
+        <button className={styles["newsForm-btn"]}>ENVIAR</button>
+      </div>
+    </label>
+  );
+};
+
+export { Newsletter };

src/components/Newsletter/newsletter.module.scss

@@ -0,0 +1,53 @@
+.newsForm {
+  display: flex;
+  flex-direction: column;
+  font-weight: 500;
+  font-size: 18px;
+  font-variant: small-caps;
+  @media screen and (min-width: 2500px) {
+    font-size: 36px;
+  }
+  .newsForm-wrapper {
+    display: flex;
+    flex-direction: row;
+    margin-top: 8px;
+  }
+}
+.newsForm-input {
+  margin-right: 8px;
+  padding: 13px 16px;
+  background: #ffffff;
+  border: 1px solid #e5e5e5;
+  border-radius: 4px;
+  width: 474px;
+  height: 42px;
+
+  &::placeholder {
+    font-weight: 400;
+    font-size: 14px;
+    color: #c4c4c4;
+    @media screen and (min-width: 2500px) {
+      font-size: 28px;
+    }
+  }
+  @media screen and (min-width: 2500px) {
+    width: 636px;
+    height: 59px;
+  }
+}
+.newsForm-btn {
+  width: 126px;
+  height: 42px;
+  background: #000000;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 4px;
+  padding: 14px 20px;
+  color: white;
+  font-weight: 700;
+  font-size: 12px;
+  @media screen and (min-width: 2500px) {
+    width: 246px;
+    height: 59px;
+    font-size: 24px;
+  }
+}

src/pages/Home.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import { Socials } from "../components/Socials/Socials";
+import { FormInput } from "../components/FormInput/FormInput";
 
 const Home = () => {
   return (
     <div>
-      <Socials></Socials>
+      <FormInput></FormInput>
     </div>
   );
 };