From 6c0e9f1ba6b79b52418108386af2be37593f176c Mon Sep 17 00:00:00 2001
From: carloswinter <caduwinteer@gmail.com>
Date: Thu, 19 Jan 2023 23:38:42 -0300
Subject: [PATCH] feat(pages): adiciona router para redirecionar as paginas

---
 src/App.scss           | 95 ++++++++++++++++++++++++++++++++++++++++++
 src/App.tsx            | 32 ++++++++++++++
 src/index.tsx          | 15 +++++++
 src/react-app-env.d.ts |  1 +
 src/router.tsx         | 23 ++++++++++
 5 files changed, 166 insertions(+)
 create mode 100644 src/App.scss
 create mode 100644 src/App.tsx
 create mode 100644 src/index.tsx
 create mode 100644 src/react-app-env.d.ts
 create mode 100644 src/router.tsx

diff --git a/src/App.scss b/src/App.scss
new file mode 100644
index 0000000..994088f
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..b54722c
--- /dev/null
+++ b/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>
+      </>
+    )
+  );
+};
diff --git a/src/index.tsx b/src/index.tsx
new file mode 100644
index 0000000..494dd23
--- /dev/null
+++ b/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>
+);
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
new file mode 100644
index 0000000..6431bc5
--- /dev/null
+++ b/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/src/router.tsx b/src/router.tsx
new file mode 100644
index 0000000..216694f
--- /dev/null
+++ b/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>
+    </>
+  );
+};