Merge pull request 'feature/pages' (#3) from feature/pages into development

Reviewed-on: #3

src/App.scss

@@ -0,0 +1,95 @@
+@import "./components/Variables.scss";
+
+body {
+  margin: 0;
+}
+
+.Container-menu {
+  display: flex;
+  flex-direction: column;
+}
+
+.TopContainer_wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.MainConteiner {
+  display: flex;
+  max-width: 100%;
+  padding-bottom: 66px;
+
+  @media (min-width: 1025px) {
+    padding: 0 100px;
+    margin-bottom: 47px;
+  }
+
+  .Main_textArea {
+    @media (min-width: 1025px) {
+      width: 100%;
+      padding: 10px 0px;
+    }
+
+    @media (max-width: 1024px) {
+      padding: 0 16px;
+    }
+
+    h2 {
+      margin: 0;
+      font-family: $fontFamily;
+      font-style: normal;
+      font-weight: 700;
+      font-size: 24px;
+      line-height: 28px;
+      color: $color-gray-800;
+
+      @media (max-width: 1024px) {
+        text-align: center;
+        margin-top: 30px;
+      }
+
+      @media (min-width: 2500px) {
+        font-weight: 700;
+        font-size: 48px;
+        line-height: 56px;
+      }
+    }
+
+    .MainText {
+      display: flex;
+      flex-direction: column;
+      font-family: $fontFamily;
+      font-style: normal;
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 15px;
+      color: $color-gray-500;
+
+      p {
+        margin: 12px 0;
+        color: $color-gray-500;
+        font-weight: 400;
+        font-size: 13px;
+        line-height: 15px;
+        font-family: $fontFamily;
+
+        @media (max-width: 1024px) {
+          font-weight: 400;
+          font-size: 12px;
+          line-height: 18px;
+          text-align: justify;
+        }
+
+        @media (min-width: 2500px) {
+          font-weight: 400;
+          font-size: 26px;
+          line-height: 30px;
+        }
+      }
+    }
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+  }
+}

src/App.tsx

@@ -0,0 +1,32 @@
+import { Router } from "./router";
+import { Navegation } from "./components/Navegation";
+
+import { ScreenSize } from "./components/DetectSize";
+
+import { HeaderDesktop } from "./components/Header/HeaderDesktop";
+import { HeaderMobile } from "./components/Header/HeaderMobile";
+import { TopContainer } from "./components/Container-menu/TopContainer";
+import { MainFooter } from "./components/Footer/FooterMain";
+
+import "./App.scss";
+
+export const App = () => {
+  return (
+    ScreenSize(),
+    (
+      <>
+        {window.innerWidth > 1024 ? <HeaderDesktop /> : <HeaderMobile />}
+        <section className="Container-menu">
+          <div className="TopContainer_wrapper">
+            <TopContainer />
+          </div>
+          <div className="MainConteiner">
+            <Navegation />
+            <Router />
+          </div>
+          <MainFooter />
+        </section>
+      </>
+    )
+  );
+};

src/index.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import { App } from "./App";
+
+const root = ReactDOM.createRoot(
+  document.getElementById("root") as HTMLElement
+);
+root.render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);

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>
+    </>
+  );
+};

src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

src/router.tsx

@@ -0,0 +1,23 @@
+import { Routes, Route } from "react-router-dom";
+
+import { About } from "./pages/About";
+import { Payments } from "./pages/Payments";
+import { Delivery } from "./pages/Delivery";
+import { Form } from "./pages/Contact";
+import { Privacy } from "./pages/Privacy";
+import { Refund } from "./pages/Refund";
+
+export const Router = () => {
+  return (
+    <>
+      <Routes>
+        <Route path="/" element={<About />} />
+        <Route path="/Pagamentos" element={<Payments />} />
+        <Route path="/Entrega" element={<Delivery />} />
+        <Route path="/Devolução" element={<Refund />} />
+        <Route path="/Segurança" element={<Privacy />} />
+        <Route path="/Contatos" element={<Form />} />
+      </Routes>
+    </>
+  );
+};