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",
@@ -42,5 +44,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "main": "index.js",
+  "repository": "ssh://git@gitea.ecommercetools.com.br:22022/SavioCarvalhoMoraes/desafio-react-e-typescript-savio-carvalho-moraes.git",
+  "author": "Savio <savio.96@hotmail.com>",
+  "license": "MIT"
 }

src/components/Address/Address.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+const Address = () => {
+  return (
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor
+    </p>
+  );
+};
+
+export { Address };

src/components/Contact/Contact.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import styles from "./contact.module.scss";
+
+const Contact = () => {
+  return (
+    <ul className={styles["contatosInfo"]}>
+      <li>
+        <h2>FALE CONOSCO</h2>
+      </li>
+      <li>
+        <p>Atendimento Ao Consumidor</p>
+      </li>
+      <li>
+        <a className={styles["contatoTel"]} href="tel:+551141599504">
+          (11) 4159 9504
+        </a>
+      </li>
+      <li>
+        <p>Atendimento Online</p>
+      </li>
+      <li>
+        <a className={styles["contatoCel"]} href="tel:+551199433">
+          (11) 99433 8825
+        </a>
+      </li>
+    </ul>
+  );
+};
+
+export { Contact };

src/components/Contact/contact.module.scss

@@ -0,0 +1,37 @@
+.contatosInfo {
+  li {
+    margin-bottom: 12px;
+  }
+  h2 {
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 16px;
+    @media screen and (min-width: 2500px) {
+      font-size: 38px;
+      line-height: 32.81px;
+    }
+  }
+  p {
+    font-size: 12px;
+    line-height: 14px;
+    font-weight: 500;
+    @media screen and (min-width: 2500px) {
+      font-size: 24px;
+      line-height: 28.13px;
+    }
+  }
+  a {
+    text-decoration: none;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 14px;
+    color: #030303;
+    @media screen and (min-width: 2500px) {
+      font-size: 24px;
+      line-height: 28.13px;
+    }
+  }
+  .contatoCel {
+    text-decoration: underline;
+  }
+}

src/components/DevelopedBy/DevelopedBy.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import m3Logo from "./assets/image/m3Logo.png";
+import styles from "./developedBy.module.scss";
+const DevelopedBy = () => {
+  return (
+    <div className={styles["developed-wrapper"]}>
+      <p>Developed by</p>
+      <img src={m3Logo} alt="m3Logo" />
+    </div>
+  );
+};
+
+export { DevelopedBy };

src/components/DevelopedBy/developedBy.module.scss

@@ -0,0 +1,8 @@
+.developed-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  p {
+    margin-right: 30px;
+  }
+}

src/components/Doubts/Doubts.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import styles from "./doubts.module.scss";
+
+const Doubts = () => {
+  return (
+    <ul className={styles["doubtsList"]}>
+      <li>
+        <a href="/">
+          <h2>DÚVIDAS</h2>
+        </a>
+      </li>
+      <li>
+        <a href="/">Entrega</a>
+      </li>
+      <li>
+        <a href="/">Pagamento</a>
+      </li>
+      <li>
+        <a href="/">Trocas e Devoluções</a>
+      </li>
+      <li>
+        <a className={styles["duvidasFreq"]} href="/">
+          Dúvidas Frequentes
+        </a>
+      </li>
+    </ul>
+  );
+};
+
+export { Doubts };

src/components/Doubts/doubts.module.scss

@@ -0,0 +1,32 @@
+.doubtsList {
+  li {
+    color: #303030;
+    margin-bottom: 12px;
+    @media screen and (min-width: 2500px) {
+    }
+  }
+  a {
+    font-size: 12px;
+    line-height: 14.06px;
+    font-weight: 400;
+    text-decoration: none;
+    color: #303030;
+    @media screen and (min-width: 2500px) {
+      font-size: 24px;
+      line-height: 29px;
+    }
+    h2 {
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 16.41px;
+      color: #303030;
+      @media screen and (min-width: 2500px) {
+        font-size: 28px;
+        line-height: 33px;
+      }
+    }
+  }
+  .duvidasFreq {
+    text-decoration: underline;
+  }
+}

src/components/FormInput/FormInput.tsx

@@ -0,0 +1,91 @@
+import React from "react";
+import { useFormik } from "formik";
+import * as Yup from "yup";
+import styles from "./formInput.module.scss";
+
+const FormInput = () => {
+  const formik = useFormik({
+    initialValues: {
+      nome: "",
+      email: "",
+      cpf: "",
+      nascimento: "",
+      tel: "",
+      instagram: "",
+    },
+    validationSchema: Yup.object({
+      nome: Yup.string().label("Seu nome completo").required(),
+      email: Yup.string().email().required(),
+      cpf: Yup.string().required(),
+      nascimento: Yup.string().required(),
+      tel: Yup.string().required(),
+      instagram: Yup.string().required(),
+    }),
+    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/Institutional/Institutional.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import styles from "./institutional.module.scss";
+
+const Institutional = () => {
+  return (
+    <ul className={styles["institutionalList"]}>
+      <li>
+        <a href="/">
+          <h2>INSTITUCIONAL</h2>
+        </a>
+      </li>
+      <li>
+        <a href="/">Quem somos</a>
+      </li>
+      <li>
+        <a href="/">Política de Privacidade</a>
+      </li>
+      <li>
+        <a href="/">Segurança</a>
+      </li>
+      <li>
+        <a className={styles["revendedor"]} href="/">
+          Seja um Revendedor
+        </a>
+      </li>
+    </ul>
+  );
+};
+
+export { Institutional };

src/components/Institutional/institutional.module.scss

@@ -0,0 +1,32 @@
+.institutionalList {
+  li {
+    color: #303030;
+    margin-bottom: 12px;
+    @media screen and (min-width: 2500px) {
+    }
+  }
+  a {
+    font-size: 12px;
+    line-height: 14.06px;
+    font-weight: 400;
+    text-decoration: none;
+    color: #303030;
+    @media screen and (min-width: 2500px) {
+      font-size: 24px;
+      line-height: 29px;
+    }
+    h2 {
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 16.41px;
+      color: #303030;
+      @media screen and (min-width: 2500px) {
+        font-size: 28px;
+        line-height: 33px;
+      }
+    }
+  }
+  .revendedor {
+    text-decoration: underline;
+  }
+}

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/components/Payments/Payments.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import masterImg from "./assets/image/Master.png";
+import visaImg from "./assets/image/Visa.png";
+import dinersImg from "./assets/image/Diners.png";
+import eloImg from "./assets/image/Elo.png";
+import hiperImg from "./assets/image/Hiper.png";
+import paypalImg from "./assets/image/Paypal.png";
+import boletoImg from "./assets/image/Boleto.png";
+import vtexImg from "./assets/image/vtex-pci-200.png";
+import styles from "./payments.module.scss";
+
+const Payments = () => {
+  return (
+    <ul className={styles["paymentsList"]}>
+      <li className={styles["paymentsItem"]}>
+        <img src={masterImg} alt="masterCard" />
+      </li>
+      <li className={styles["paymentsItem"]}>
+        <img src={visaImg} alt="visaCard" />
+      </li>
+      <li className={styles["paymentsItem"]}>
+        <img src={dinersImg} alt="dinersCard" />
+      </li>
+      <li className={styles["paymentsItem"]}>
+        <img src={eloImg} alt="eloCard" />
+      </li>
+      <li className={styles["paymentsItem"]}>
+        <img src={hiperImg} alt="hiperCard" />
+      </li>
+      <li className={styles["paymentsItem"]}>
+        <img src={paypalImg} alt="paypalCard" />
+      </li>
+      <li className={styles["paymentsItem"]}>
+        <img src={boletoImg} alt="boletoCard" />
+      </li>
+    </ul>
+  );
+};
+
+const VtexPci = () => {
+  return <img src={vtexImg} alt="vtx Pci" />;
+};
+
+export { Payments, VtexPci };

src/components/Payments/payments.module.scss

@@ -0,0 +1,4 @@
+.paymentsList {
+  display: flex;
+  flex-direction: row;
+}

src/components/PoweredBy/PoweredBy.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import vtexLogo from "./assets/image/vtexLogo.png";
+import styles from "./poweredBy.module.scss";
+const PoweredBy = () => {
+  return (
+    <div className={styles["powered-wrapper"]}>
+      <p>Powered by</p>
+      <img src={vtexLogo} alt="vtexLogo" />
+    </div>
+  );
+};
+
+export { PoweredBy };

src/components/PoweredBy/poweredBy.module.scss

@@ -0,0 +1,8 @@
+.powered-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  p {
+    margin-right: 30px;
+  }
+}

src/components/Socials/Socials.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import styles from "./socials.module.scss";
+import facebookImg from "./assets/images/Facebook.png";
+import instagramImg from "./assets/images/Instagram.png";
+import twitterImg from "./assets/images/Twitter.png";
+import youtubeImg from "./assets/images/Youtube.png";
+import linkedinImg from "./assets/images/Linkedin.png";
+import whatsappImg from "./assets/images/whatsapp.png";
+
+const Socials = () => {
+  return (
+    <div className={styles["socials-wrapper"]}>
+      <ul className={styles["socialsList"]}>
+        <li className={styles["socials-item"]}>
+          <img src={facebookImg} alt="Facebook" />
+        </li>
+        <li className={styles["socials-item"]}>
+          <img src={instagramImg} alt="Instagram" />
+        </li>
+        <li className={styles["socials-item"]}>
+          <img src={twitterImg} alt="Twitter" />
+        </li>
+        <li className={styles["socials-item"]}>
+          <img src={youtubeImg} alt="Youtube" />
+        </li>
+        <li className={styles["socials-item"]}>
+          <img src={linkedinImg} alt="Linkedin" />
+        </li>
+        <li className={styles["socials-item"]}>
+          <img src={whatsappImg} alt="Whatsapp" />
+        </li>
+      </ul>
+      <a className={styles["siteLink"]} href="/">
+        www.loremipsum.com
+      </a>
+    </div>
+  );
+};
+
+export { Socials };

src/components/Socials/socials.module.scss

@@ -0,0 +1,22 @@
+.socials-wrapper {
+  .socialsList {
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 12px;
+    li {
+      margin-right: 10px;
+    }
+  }
+  a {
+    text-decoration: none;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16.41px;
+    color: #030303;
+
+    @media screen and (min-width: 2500px) {
+      font-size: 28px;
+      line-height: 32.81px;
+    }
+  }
+}

src/pages/Home.tsx

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

src/styles/common/global.scss

@@ -1,15 +1,20 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
+
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 body,
 input,
 button {
-    font-family: sans-serif;
-    font-size: 16px;
-    color: #333;
+  font-family: "Roboto";
+  font-size: 16px;
+  color: #333;
 }
 button {
-    cursor: pointer;
+  cursor: pointer;
+}
+li {
+  list-style-type: none;
 }