feat(pages): adiciona logica em react e estilos em scss para cada pagina

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,143 @@
+@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;
+  }
+
+  label {
+    margin: 12px 0 12px 15px;
+
+    @media (min-width: 2500px) {
+      font-weight: 400;
+      font-size: 28px;
+      line-height: 33px;
+    }
+  }
+
+  input {
+    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;
+
+    @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;
+
+    @media (min-width: 2500px) {
+      font-weight: 400;
+      font-size: 24px;
+      line-height: 28px;
+    }
+  }
+
+  .checkbox_wrapper {
+    span {
+      margin-left: 13px;
+      margin-right: 2px;
+      @media (min-width: 2500px) {
+        font-size: 26px;
+      }
+    }
+    label {
+      margin-left: 0;
+      @media (min-width: 2500px) {
+        font-weight: 400;
+        font-size: 28px;
+        line-height: 33px;
+      }
+    }
+  }
+
+  button {
+    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) {
+      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;
+      text-decoration: underline;
+    }
+
+    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>
+    </>
+  );
+};