Merge pull request 'development' (#12) from development into main

Reviewed-on: #12

src/components/ContactForm.tsx

@@ -114,7 +114,7 @@ export const ContactForm = () => {
 
           <div className="checkbox_wrapper">
             <label htmlFor="checkbox">Declaro que li e aceito</label>
-            <span className="error">
+            <span className="check-error">
               <ErrorMessage name="checkbox" className="form-ivalid-feedback" />
             </span>
             <Field

src/components/schema/CustonValidationsRegex.ts

@@ -0,0 +1,9 @@
+export const phoneNumber =
+  /^\(?[1-9]{2}\)? ?(?:[2-8]|9[1-9])[0-9]{3}\-?[0-9]{4}$/;
+
+// export const cpfNumber = /\d{3}.\d{3}.\d{3}-\d{2}/;
+export const cpfNumber =
+  /^([0-9]{3}\.?[0-9]{3}\.?[0-9]{3}\-?[0-9]{2}|[0-9]{2}\.?[0-9]{3}\.?[0-9]{3}\/?[0-9]{4}\-?[0-9]{2})$/;
+
+export const insta =
+  /(?:^|[^\w])(?:@)([\w-](?:(?:[\w-]|(?:\.(?!\.))){0,28}(?:[\w-]))?)/;

src/components/schema/FormSchema.ts

@@ -0,0 +1,20 @@
+import * as Yup from "yup";
+
+import { phoneNumber, cpfNumber, insta } from "./CustonValidationsRegex";
+
+export default Yup.object().shape({
+  name: Yup.string().required("*Campo Obrigatório"),
+  email: Yup.string()
+    .email()
+    .required("*Campo Obrigatório")
+    .email("E-mail inválido"),
+  cpf: Yup.string()
+    .matches(cpfNumber, "CPF inválido")
+    .required("*Campo Obrigatório"),
+  telefone: Yup.string()
+    .matches(phoneNumber, "numero inválido")
+    .required("*Campo Obrigatório"),
+  instagram: Yup.string().matches(insta, "conta inválida"),
+  data: Yup.date().required("*Campo Obrigatório"),
+  checkbox: Yup.boolean().oneOf([true], "*"),
+});

src/pages/About.tsx

@@ -0,0 +1,12 @@
+import { MainText } from "../components/Container-menu/TextContainer";
+
+export const About = () => {
+  return (
+    <>
+      <div className="Main_textArea">
+        <h2>Sobre</h2>
+        <MainText />
+      </div>
+    </>
+  );
+};

src/pages/Contact.modules.scss

@@ -0,0 +1,162 @@
+@import "../components/Variables.scss";
+
+form {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  font-family: $fontFamily;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+
+  @media (max-width: 1024px) {
+    padding: 0;
+  }
+
+  @media (min-width: 1025px) {
+    width: 100%;
+    padding: 0px;
+  }
+
+  .form-entryes {
+    flex-direction: column;
+    align-items: flex-start;
+    position: relative;
+
+    label {
+      color: $color-black-800;
+      margin: 12px 0 12px 15px;
+
+      @media (min-width: 2500px) {
+        font-weight: 400;
+        font-size: 28px;
+        line-height: 33px;
+      }
+    }
+
+    input {
+      width: calc(100% - 42px);
+      height: 14px;
+      padding: 15px 20px;
+      border: 1px solid $color-black-800;
+      border-radius: 25px;
+      font-family: $fontFamily;
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 16px;
+      color: $color-gray-300;
+      margin: 0;
+
+      @media (min-width: 2500px) {
+        height: 31px;
+        font-weight: 400;
+        font-size: 28px;
+        line-height: 33px;
+      }
+
+      &::placeholder {
+        color: $color-gray-300;
+      }
+    }
+  }
+  .error {
+    display: flex;
+    justify-content: end;
+    font-family: $fontFamily;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 14px;
+    color: $color-red;
+    position: absolute;
+    align-self: flex-end;
+    top: 25px;
+
+    @media (min-width: 2500px) {
+      font-weight: 400;
+      font-size: 24px;
+      line-height: 28px;
+    }
+  }
+
+  .checkbox_wrapper {
+    margin: 12px 0;
+    position: relative;
+    span {
+      display: flex;
+      justify-content: flex-start !important;
+      margin-left: 13px;
+      margin-right: 2px;
+      color: #ff0000;
+      @media (min-width: 2500px) {
+        font-size: 26px;
+      }
+    }
+    label {
+      margin-left: 0;
+      text-decoration: underline;
+      @media (min-width: 2500px) {
+        font-weight: 400;
+        font-size: 28px;
+        line-height: 33px;
+      }
+    }
+  }
+
+  button {
+    height: 52.44px;
+    letter-spacing: 0.05em;
+    font-family: $fontFamily;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 19px;
+    padding: 17px;
+    background: $color-black;
+    border-radius: 25px;
+    color: $color-white;
+
+    @media (min-width: 2500px) {
+      height: 71px;
+      font-weight: 400;
+      font-size: 32px;
+      line-height: 38px;
+      padding: 16px 17px 17px 17px;
+    }
+  }
+  div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    label {
+      order: 2;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 16px;
+    }
+
+    input {
+      order: 3;
+      width: 18px;
+      height: 18px;
+      border: 1px solid $color-black;
+      border-radius: 3px;
+      margin: 0 4px 3px;
+
+      @media (min-width: 2500px) {
+        width: 36.4px;
+        height: 35.15px;
+      }
+    }
+  }
+
+  @media (max-width: 1024px) {
+    h2 {
+      text-align: center;
+    }
+  }
+}

src/pages/Contact.tsx

@@ -0,0 +1,13 @@
+import { ContactForm } from "../components/ContactForm";
+import "./Contact.modules.scss";
+
+export const Form = () => {
+  return (
+    <>
+      <div className="Main_textArea">
+        <h2>Preencha o formulário </h2>
+        <ContactForm />
+      </div>
+    </>
+  );
+};

src/pages/Delivery.tsx

@@ -0,0 +1,12 @@
+import { MainText } from "../components/Container-menu/TextContainer";
+
+export const Delivery = () => {
+  return (
+    <>
+      <div className="Main_textArea">
+        <h2>Entrega</h2>
+        <MainText />
+      </div>
+    </>
+  );
+};

src/pages/Payments.tsx

@@ -0,0 +1,12 @@
+import { MainText } from "../components/Container-menu/TextContainer";
+
+export const Payments = () => {
+  return (
+    <>
+      <div className="Main_textArea">
+        <h2>Pagamentos</h2>
+        <MainText />
+      </div>
+    </>
+  );
+};

src/pages/Privacy.tsx

@@ -0,0 +1,12 @@
+import { MainText } from "../components/Container-menu/TextContainer";
+
+export const Privacy = () => {
+  return (
+    <>
+      <div className="Main_textArea">
+        <h2>Seguraça e Privacidade</h2>
+        <MainText />
+      </div>
+    </>
+  );
+};

src/pages/Refund.tsx

@@ -0,0 +1,12 @@
+import { MainText } from "../components/Container-menu/TextContainer";
+
+export const Refund = () => {
+  return (
+    <>
+      <div className="Main_textArea">
+        <h2>Troca ou Devolução</h2>
+        <MainText />
+      </div>
+    </>
+  );
+};