From 1c2d441858d4c17b53b5ff83d46b47f56b141bb4 Mon Sep 17 00:00:00 2001
From: ThiagoDuutra <thiagoduutra01@gmail.com>
Date: Mon, 9 Jan 2023 16:42:41 -0300
Subject: [PATCH] feat: Cria main responsivo

---
 .../Navigation/NaviDesktop/index.tsx          |  80 +++++++++
 .../Navigation/NaviDesktop/style.css          |   0
 .../Navigation/NaviTablets/index.tsx          |  81 +++++++++
 .../Navigation/NaviTablets/style.css          |   0
 .../src/Components/Navigation/index.tsx       |  24 +++
 .../src/Components/Navigation/style.css       |  53 ++++++
 react-academy/src/Pages/Contato/index.tsx     |  26 +++
 react-academy/src/Pages/Contato/style.css     | 154 ++++++++++++++++++
 react-academy/src/Pages/Entrega/index.tsx     |  51 ++++++
 react-academy/src/Pages/Entrega/style.css     |  52 ++++++
 .../src/Pages/FormaDePagamento/index.tsx      |  51 ++++++
 .../src/Pages/FormaDePagamento/style.css      |  39 +++++
 .../src/Pages/SegurancaPrivacidade/index.tsx  |  51 ++++++
 .../src/Pages/SegurancaPrivacidade/style.css  |  40 +++++
 react-academy/src/Pages/Sobre/index.tsx       |  51 ++++++
 react-academy/src/Pages/Sobre/style.css       |  50 ++++++
 .../src/Pages/TrocaDevolucao/index.tsx        |  51 ++++++
 .../src/Pages/TrocaDevolucao/style.css        |  40 +++++
 react-academy/src/router.tsx                  |  17 +-
 19 files changed, 910 insertions(+), 1 deletion(-)
 create mode 100644 react-academy/src/Components/Navigation/NaviDesktop/index.tsx
 create mode 100644 react-academy/src/Components/Navigation/NaviDesktop/style.css
 create mode 100644 react-academy/src/Components/Navigation/NaviTablets/index.tsx
 create mode 100644 react-academy/src/Components/Navigation/NaviTablets/style.css
 create mode 100644 react-academy/src/Components/Navigation/index.tsx
 create mode 100644 react-academy/src/Components/Navigation/style.css
 create mode 100644 react-academy/src/Pages/Contato/index.tsx
 create mode 100644 react-academy/src/Pages/Contato/style.css
 create mode 100644 react-academy/src/Pages/Entrega/index.tsx
 create mode 100644 react-academy/src/Pages/Entrega/style.css
 create mode 100644 react-academy/src/Pages/FormaDePagamento/index.tsx
 create mode 100644 react-academy/src/Pages/FormaDePagamento/style.css
 create mode 100644 react-academy/src/Pages/SegurancaPrivacidade/index.tsx
 create mode 100644 react-academy/src/Pages/SegurancaPrivacidade/style.css
 create mode 100644 react-academy/src/Pages/Sobre/index.tsx
 create mode 100644 react-academy/src/Pages/Sobre/style.css
 create mode 100644 react-academy/src/Pages/TrocaDevolucao/index.tsx
 create mode 100644 react-academy/src/Pages/TrocaDevolucao/style.css

diff --git a/react-academy/src/Components/Navigation/NaviDesktop/index.tsx b/react-academy/src/Components/Navigation/NaviDesktop/index.tsx
new file mode 100644
index 0000000..eec55aa
--- /dev/null
+++ b/react-academy/src/Components/Navigation/NaviDesktop/index.tsx
@@ -0,0 +1,80 @@
+import { NavLink } from "react-router-dom";
+
+import "./style.css";
+
+const NaviDesktop = () => {
+  return (
+    <div className="menu-desktop">
+      <div className="menu-navigation">
+        <div className="menu-navigation__subMenu">
+          <div className="menu-navigation__description">
+            <NavLink
+              to="/sobre"
+              className={({ isActive }) =>
+                isActive ? "ativo menu-link" : "menu-link"
+              }
+            >
+              Sobre
+            </NavLink>
+          </div>
+
+          <div className="menu-navigation__description">
+            <NavLink
+              to="/formaDePagamento"
+              className={({ isActive }) =>
+                isActive ? "ativo menu-link" : "menu-link"
+              }
+            >
+              Forma de Pagamento
+            </NavLink>
+          </div>
+
+          <div className="menu-navigation__description">
+            <NavLink
+              to="/entrega"
+              className={({ isActive }) =>
+                isActive ? "ativo menu-link" : "menu-link"
+              }
+            >
+              Entrega
+            </NavLink>
+          </div>
+
+          <div className="menu-navigation__description">
+            <NavLink
+              to="/trocaDevolucao"
+              className={({ isActive }) =>
+                isActive ? "ativo menu-link" : "menu-link"
+              }
+            >
+              Troca e Devolução
+            </NavLink>
+          </div>
+
+          <div className="menu-navigation__description">
+            <NavLink
+              to="/segurancaPrivacidade"
+              className={({ isActive }) =>
+                isActive ? "ativo menu-link" : "menu-link"
+              }
+            >
+              Segurança e Privacidade
+            </NavLink>
+          </div>
+
+          <div className="menu-navigation__description">
+            <NavLink
+              to="/contato"
+              className={({ isActive }) =>
+                isActive ? "ativo menu-link" : "menu-link"
+              }
+            >
+              Contato
+            </NavLink>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default NaviDesktop;
diff --git a/react-academy/src/Components/Navigation/NaviDesktop/style.css b/react-academy/src/Components/Navigation/NaviDesktop/style.css
new file mode 100644
index 0000000..e69de29
diff --git a/react-academy/src/Components/Navigation/NaviTablets/index.tsx b/react-academy/src/Components/Navigation/NaviTablets/index.tsx
new file mode 100644
index 0000000..bd4a68b
--- /dev/null
+++ b/react-academy/src/Components/Navigation/NaviTablets/index.tsx
@@ -0,0 +1,81 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+import "./style.css";
+
+const NavigationTablets = () => {
+  return (
+    <div className="menu-desktop">
+      <div className="menu-navigation">
+        <div className="menu-navigation__subMenu">
+          <div className="menu-navigation__description">
+            <NavLink
+              to="/sobre"
+              className={({ isActive }) =>
+                isActive ? "ativo menu-link" : "menu-link"
+              }
+            >
+              Sobre
+            </NavLink>
+          </div>
+
+          <div className="menu-navigation__description">
+            <NavLink
+              to="/formaDePagamento"
+              className={({ isActive }) =>
+                isActive ? "ativo menu-link" : "menu-link"
+              }
+            >
+              Forma de Pagamento
+            </NavLink>
+          </div>
+
+          <div className="menu-navigation__description">
+            <NavLink
+              to="/entrega"
+              className={({ isActive }) =>
+                isActive ? "ativo menu-link" : "menu-link"
+              }
+            >
+              Entrega
+            </NavLink>
+          </div>
+
+          <div className="menu-navigation__description">
+            <NavLink
+              to="/trocaDevolucao"
+              className={({ isActive }) =>
+                isActive ? "ativo menu-link" : "menu-link"
+              }
+            >
+              Troca e Devolução
+            </NavLink>
+          </div>
+
+          <div className="menu-navigation__description">
+            <NavLink
+              to="/segurancaPrivacidade"
+              className={({ isActive }) =>
+                isActive ? "ativo menu-link" : "menu-link"
+              }
+            >
+              Segurança e Privacidade
+            </NavLink>
+          </div>
+
+          <div className="menu-navigation__description">
+            <NavLink
+              to="/contato"
+              className={({ isActive }) =>
+                isActive ? "ativo menu-link" : "menu-link"
+              }
+            >
+              Contato
+            </NavLink>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NavigationTablets;
diff --git a/react-academy/src/Components/Navigation/NaviTablets/style.css b/react-academy/src/Components/Navigation/NaviTablets/style.css
new file mode 100644
index 0000000..e69de29
diff --git a/react-academy/src/Components/Navigation/index.tsx b/react-academy/src/Components/Navigation/index.tsx
new file mode 100644
index 0000000..25bec04
--- /dev/null
+++ b/react-academy/src/Components/Navigation/index.tsx
@@ -0,0 +1,24 @@
+import React, { useEffect, useState } from "react";
+import NaviDesktop from "./NaviDesktop";
+import NaviTablets from "./NaviTablets";
+
+import "./style.css";
+
+const Navigation = () => {
+  const [width, setWidth] = useState<number>(window.innerWidth);
+
+  const handleWindow = () => {
+    setWidth(window.innerWidth);
+  };
+
+  useEffect(() => {
+    window.addEventListener("resize", handleWindow);
+    return () => {
+      window.removeEventListener("resize", handleWindow);
+    };
+  }, []);
+
+  return <>{width <= 1024 ? <NaviTablets /> : <NaviDesktop />}</>;
+};
+
+export default Navigation;
diff --git a/react-academy/src/Components/Navigation/style.css b/react-academy/src/Components/Navigation/style.css
new file mode 100644
index 0000000..67ea0be
--- /dev/null
+++ b/react-academy/src/Components/Navigation/style.css
@@ -0,0 +1,53 @@
+.menu-navigation {
+  display: flex;
+  flex-direction: column;
+  margin: 0 30px 0 100px;
+}
+
+.menu-navigation__subMenu {
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--color-black);
+  height: 285px;
+  width: 302px;
+}
+
+.menu-navigation__description {
+  font-family: "Roboto", sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 18px;
+}
+
+.menu-navigation__description:hover {
+  background-color: var(--color-gray-200);
+}
+
+.menu-navigation__description a {
+  color: var(--color-gray-400);
+  text-decoration: none;
+}
+
+.menu-link {
+  display: block;
+  padding: 10px 0 10px 16px;
+}
+
+.menu-link.ativo {
+  background-color: var(--color-black);
+  color: var(--color-white);
+  font-weight: 700;
+}
+
+@media screen and (max-width: 1024px) {
+  .menu-navigation {
+    max-width: 100%;
+    margin: 0 16px;
+  }
+
+  .menu-navigation__subMenu {
+    width: 100%;
+    height: 100%;
+    border: none;
+  }
+}
diff --git a/react-academy/src/Pages/Contato/index.tsx b/react-academy/src/Pages/Contato/index.tsx
new file mode 100644
index 0000000..33e0d06
--- /dev/null
+++ b/react-academy/src/Pages/Contato/index.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+import BreadCrumb from "../../Components/BreadCrumb";
+import CustomFormCont from "../../Components/CustomForm/CustomFormContato";
+import Navigation from "../../Components/Navigation";
+
+import "./style.css";
+
+const Contato = () => {
+  return (
+    <div className="main-contato__container">
+      <BreadCrumb />
+      <h2 className="subTitle">INSTITUCIONAL</h2>
+      <div className="main-form">
+        <div className="container-form">
+          <Navigation />
+          <div className="custom-form">
+            <CustomFormCont />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Contato;
diff --git a/react-academy/src/Pages/Contato/style.css b/react-academy/src/Pages/Contato/style.css
new file mode 100644
index 0000000..d19ab24
--- /dev/null
+++ b/react-academy/src/Pages/Contato/style.css
@@ -0,0 +1,154 @@
+.container-form {
+  display: flex;
+  width: 100%;
+}
+
+.main-form {
+  display: flex;
+}
+
+.custom-form {
+  width: 100%;
+}
+
+.container-form__labels {
+  display: flex;
+  flex-direction: column;
+}
+
+.container-form__labels label {
+  position: relative;
+  margin-left: 15px;
+  margin-bottom: 12px;
+}
+
+.form-invalid {
+  position: absolute;
+  right: 0;
+  margin-right: 120px;
+  color: var(--color-red);
+  font-size: 12px;
+  line-height: 14px;
+}
+
+.container-form__labels input {
+  font-family: "Roboto", sans-serif;
+  line-height: 14px;
+  font-size: 16px;
+  font-weight: 400;
+  padding: 15px 15px 15px 20px;
+  margin-bottom: 12px;
+  border-radius: 25px;
+  border: 1px solid var(--color-black-100);
+  outline: none;
+}
+
+.container-form__description {
+  width: 100%;
+  margin-right: 100px;
+}
+
+.container-form__description h2 {
+  font-family: "Roboto", sans-serif;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 28px;
+  margin-bottom: 12px;
+  color: var(--color-gray-500);
+  margin-top: 0;
+}
+
+.sobre-text {
+  font-family: "Roboto", sans-serif;
+  font-size: 13px;
+  line-height: 15px;
+  color: var(--color-gray-400);
+  margin-right: 100px;
+  margin-bottom: 81px;
+}
+
+.container-checkbox {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.container-checkbox label {
+  margin-right: 4px;
+  color: var(--color-red);
+}
+
+.container-checkbox u {
+  color: var(--color-black);
+}
+
+.container-checkbox input {
+  height: 18px;
+  width: 18px;
+}
+
+.container-btn {
+  margin-bottom: 66px;
+  margin-top: 12px;
+}
+
+.btn-contato {
+  font-family: "Roboto", sans-serif;
+  font-size: 16px;
+  letter-spacing: 1.5px;
+  line-height: 18px;
+  border: none;
+  background-color: var(--color-black);
+  color: var(--color-white);
+  width: 100%;
+  border-radius: 25px;
+  text-align: center;
+  padding: 17px 0;
+  cursor: pointer;
+}
+
+.btn-msg {
+  font-family: "Roboto", sans-serif;
+  color: var(--color-green);
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+}
+
+@media screen and (max-width: 1024px) {
+  .container-form {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .container-form__description h2 {
+    text-align: center;
+    margin-top: 30px;
+  }
+
+  .container-form__description {
+    margin-right: 0;
+  }
+
+  .sobre-text {
+    margin-right: 16px;
+  }
+
+  .container-btn,
+  .container-form__labels input {
+    margin: 12px 16px;
+  }
+
+  .container-btn {
+    margin-bottom: 80px;
+  }
+
+  .container-form__labels label {
+    margin-left: 30px;
+    margin-bottom: 0px;
+  }
+
+  .form-invalid {
+    margin-right: 40px;
+  }
+}
diff --git a/react-academy/src/Pages/Entrega/index.tsx b/react-academy/src/Pages/Entrega/index.tsx
new file mode 100644
index 0000000..22ce45f
--- /dev/null
+++ b/react-academy/src/Pages/Entrega/index.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import BreadCrumb from "../../Components/BreadCrumb";
+import Navigation from "../../Components/Navigation";
+
+import "./style.css";
+
+const FormaDePagamento = () => {
+  return (
+    <div>
+      <BreadCrumb />
+      <h2 className="subTitle">INSTITUCIONAL</h2>
+
+      <div className="main-entrega">
+        <div className="container-entrega">
+          <Navigation />
+          <div className="container-entrega__description">
+            <h2>Entrega</h2>
+            <p className="sobre-text">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum.
+              <br></br>
+              <br></br>
+              Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+              accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
+              quae ab illo inventore veritatis et quasi architecto beatae vitae
+              dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
+              aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
+              eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam
+              est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
+              velit, sed quia non numquam eius modi tempora incidunt ut labore
+              et dolore magnam aliquam quaerat voluptatem.
+              <br></br>
+              <br></br>
+              Ut enim ad minima veniam, quis nostrum exercitationem ullam
+              corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
+              consequatur? Quis autem vel eum iure reprehenderit qui in ea
+              voluptate velit esse quam nihil molestiae consequatur, vel illum
+              qui dolorem eum fugiat quo voluptas nulla pariatur?
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default FormaDePagamento;
diff --git a/react-academy/src/Pages/Entrega/style.css b/react-academy/src/Pages/Entrega/style.css
new file mode 100644
index 0000000..1b57780
--- /dev/null
+++ b/react-academy/src/Pages/Entrega/style.css
@@ -0,0 +1,52 @@
+.subTitle {
+  display: flex;
+  justify-content: center;
+  font-family: "Roboto", sans-serif;
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 28px;
+  letter-spacing: 5px;
+  margin: 80px 0;
+}
+
+.main-entrega {
+  display: flex;
+}
+
+.container-entrega {
+  display: flex;
+}
+
+.container-entrega__description h2 {
+  font-family: "Roboto", sans-serif;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 28px;
+  margin-bottom: 12px;
+  color: var(--color-gray-500);
+}
+
+.sobre-text {
+  font-family: "Roboto", sans-serif;
+  font-size: 13px;
+  line-height: 15px;
+  color: var(--color-gray-400);
+  margin-right: 100px;
+  margin-bottom: 81px;
+}
+
+@media screen and (max-width: 1024px) {
+  .container-entrega {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .container-entrega__description h2 {
+    text-align: center;
+    margin-top: 30px;
+  }
+
+  .sobre-text {
+    margin-right: 16px;
+  }
+}
diff --git a/react-academy/src/Pages/FormaDePagamento/index.tsx b/react-academy/src/Pages/FormaDePagamento/index.tsx
new file mode 100644
index 0000000..c96f57b
--- /dev/null
+++ b/react-academy/src/Pages/FormaDePagamento/index.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import Navigation from "../../Components/Navigation";
+import BreadCrumb from "../../Components/BreadCrumb";
+
+import "./style.css";
+
+const FormaDePagamento = () => {
+  return (
+    <div>
+      <BreadCrumb />
+      <h2 className="subTitle">INSTITUCIONAL</h2>
+
+      <div className="main-formaPagamento">
+        <div className="container-pagamento">
+          <Navigation />
+          <div className="container-forma__description">
+            <h2>Forma de Pagamento</h2>
+            <p className="sobre-text">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum.
+              <br></br>
+              <br></br>
+              Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+              accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
+              quae ab illo inventore veritatis et quasi architecto beatae vitae
+              dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
+              aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
+              eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam
+              est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
+              velit, sed quia non numquam eius modi tempora incidunt ut labore
+              et dolore magnam aliquam quaerat voluptatem.
+              <br></br>
+              <br></br>
+              Ut enim ad minima veniam, quis nostrum exercitationem ullam
+              corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
+              consequatur? Quis autem vel eum iure reprehenderit qui in ea
+              voluptate velit esse quam nihil molestiae consequatur, vel illum
+              qui dolorem eum fugiat quo voluptas nulla pariatur?
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default FormaDePagamento;
diff --git a/react-academy/src/Pages/FormaDePagamento/style.css b/react-academy/src/Pages/FormaDePagamento/style.css
new file mode 100644
index 0000000..e3a88d7
--- /dev/null
+++ b/react-academy/src/Pages/FormaDePagamento/style.css
@@ -0,0 +1,39 @@
+.subTitle {
+  display: flex;
+  justify-content: center;
+  font-family: "Roboto", sans-serif;
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 28px;
+  letter-spacing: 5px;
+  margin: 80px 0;
+}
+
+.main-formaPagamento {
+  display: flex;
+}
+
+.container-pagamento {
+  display: flex;
+}
+
+.container-forma__description h2 {
+  font-family: "Roboto", sans-serif;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 28px;
+  margin-bottom: 12px;
+  color: var(--color-gray-500);
+}
+
+@media screen and (max-width: 1024px) {
+  .container-pagamento {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .container-forma__description h2 {
+    text-align: center;
+    margin-top: 30px;
+  }
+}
diff --git a/react-academy/src/Pages/SegurancaPrivacidade/index.tsx b/react-academy/src/Pages/SegurancaPrivacidade/index.tsx
new file mode 100644
index 0000000..4fd1846
--- /dev/null
+++ b/react-academy/src/Pages/SegurancaPrivacidade/index.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import Navigation from "../../Components/Navigation";
+import BreadCrumb from "../../Components/BreadCrumb";
+
+import "./style.css";
+
+const Sobre = () => {
+  return (
+    <div>
+      <BreadCrumb />
+      <h2 className="subTitle">INSTITUCIONAL</h2>
+
+      <div className="main-seguranca">
+        <div className="container-seguranca">
+          <Navigation />
+          <div className="container-seguranca__description">
+            <h2>Segurança e Privacidade</h2>
+            <p className="sobre-text">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum.
+              <br></br>
+              <br></br>
+              Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+              accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
+              quae ab illo inventore veritatis et quasi architecto beatae vitae
+              dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
+              aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
+              eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam
+              est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
+              velit, sed quia non numquam eius modi tempora incidunt ut labore
+              et dolore magnam aliquam quaerat voluptatem.
+              <br></br>
+              <br></br>
+              Ut enim ad minima veniam, quis nostrum exercitationem ullam
+              corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
+              consequatur? Quis autem vel eum iure reprehenderit qui in ea
+              voluptate velit esse quam nihil molestiae consequatur, vel illum
+              qui dolorem eum fugiat quo voluptas nulla pariatur?
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default Sobre;
diff --git a/react-academy/src/Pages/SegurancaPrivacidade/style.css b/react-academy/src/Pages/SegurancaPrivacidade/style.css
new file mode 100644
index 0000000..a81ec22
--- /dev/null
+++ b/react-academy/src/Pages/SegurancaPrivacidade/style.css
@@ -0,0 +1,40 @@
+.subTitle {
+  display: flex;
+  justify-content: center;
+  font-family: "Roboto", sans-serif;
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 28px;
+  letter-spacing: 5px;
+  margin: 80px 0;
+}
+
+.main-seguranca {
+  display: flex;
+}
+
+.container-seguranca {
+  display: flex;
+  margin: auto;
+}
+
+.container-seguranca__description h2 {
+  font-family: "Roboto", sans-serif;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 28px;
+  margin-bottom: 12px;
+  color: var(--color-gray-500);
+}
+
+@media screen and (max-width: 1024px) {
+  .container-seguranca {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .container-seguranca__description h2 {
+    margin-top: 30px;
+    text-align: center;
+  }
+}
diff --git a/react-academy/src/Pages/Sobre/index.tsx b/react-academy/src/Pages/Sobre/index.tsx
new file mode 100644
index 0000000..e543608
--- /dev/null
+++ b/react-academy/src/Pages/Sobre/index.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import Navigation from "../../Components/Navigation";
+import BreadCrumb from "../../Components/BreadCrumb";
+
+import "./style.css";
+
+const Sobre = () => {
+  return (
+    <div className="main-sobre__container">
+      <BreadCrumb />
+      <h2 className="subTitle">INSTITUCIONAL</h2>
+
+      <div className="main-sobre">
+        <div className="container-sobre">
+          <Navigation />
+          <div className="container-sobre__description">
+            <h2>Sobre</h2>
+            <p className="sobre-text">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum.
+              <br></br>
+              <br></br>
+              Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+              accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
+              quae ab illo inventore veritatis et quasi architecto beatae vitae
+              dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
+              aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
+              eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam
+              est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
+              velit, sed quia non numquam eius modi tempora incidunt ut labore
+              et dolore magnam aliquam quaerat voluptatem.
+              <br></br>
+              <br></br>
+              Ut enim ad minima veniam, quis nostrum exercitationem ullam
+              corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
+              consequatur? Quis autem vel eum iure reprehenderit qui in ea
+              voluptate velit esse quam nihil molestiae consequatur, vel illum
+              qui dolorem eum fugiat quo voluptas nulla pariatur?
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default Sobre;
diff --git a/react-academy/src/Pages/Sobre/style.css b/react-academy/src/Pages/Sobre/style.css
new file mode 100644
index 0000000..e204e8d
--- /dev/null
+++ b/react-academy/src/Pages/Sobre/style.css
@@ -0,0 +1,50 @@
+.subTitle {
+  display: flex;
+  justify-content: center;
+  font-family: "Roboto", sans-serif;
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 28px;
+  letter-spacing: 5px;
+  margin: 80px 0;
+}
+
+.main-sobre {
+  display: flex;
+}
+
+.container-sobre {
+  display: flex;
+  margin: auto;
+}
+
+.container-sobre__description h2 {
+  font-family: "Roboto", sans-serif;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 28px;
+  margin-bottom: 12px;
+  color: var(--color-gray-500);
+}
+
+@media screen and (max-width: 1024px) {
+  .container-sobre {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .subTitle {
+    margin-bottom: 40px;
+  }
+
+  .container-sobre__description h2 {
+    margin-top: 30px;
+    text-align: center;
+  }
+
+  .sobre-text {
+    margin: 12px 16px 80px 16px;
+    text-align: justify;
+    font-size: 12px;
+  }
+}
diff --git a/react-academy/src/Pages/TrocaDevolucao/index.tsx b/react-academy/src/Pages/TrocaDevolucao/index.tsx
new file mode 100644
index 0000000..5525988
--- /dev/null
+++ b/react-academy/src/Pages/TrocaDevolucao/index.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import Navigation from "../../Components/Navigation";
+import BreadCrumb from "../../Components/BreadCrumb";
+
+import "./style.css";
+
+const Sobre = () => {
+  return (
+    <div>
+      <BreadCrumb />
+      <h2 className="subTitle">INSTITUCIONAL</h2>
+
+      <div className="main-troca">
+        <div className="container-troca">
+          <Navigation />
+          <div className="container-troca__description">
+            <h2>Troca e Devolução</h2>
+            <p className="sobre-text">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum.
+              <br></br>
+              <br></br>
+              Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+              accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
+              quae ab illo inventore veritatis et quasi architecto beatae vitae
+              dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
+              aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
+              eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam
+              est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
+              velit, sed quia non numquam eius modi tempora incidunt ut labore
+              et dolore magnam aliquam quaerat voluptatem.
+              <br></br>
+              <br></br>
+              Ut enim ad minima veniam, quis nostrum exercitationem ullam
+              corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
+              consequatur? Quis autem vel eum iure reprehenderit qui in ea
+              voluptate velit esse quam nihil molestiae consequatur, vel illum
+              qui dolorem eum fugiat quo voluptas nulla pariatur?
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default Sobre;
diff --git a/react-academy/src/Pages/TrocaDevolucao/style.css b/react-academy/src/Pages/TrocaDevolucao/style.css
new file mode 100644
index 0000000..b95fd1a
--- /dev/null
+++ b/react-academy/src/Pages/TrocaDevolucao/style.css
@@ -0,0 +1,40 @@
+.subTitle {
+  display: flex;
+  justify-content: center;
+  font-family: "Roboto", sans-serif;
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 28px;
+  letter-spacing: 5px;
+  margin: 80px 0;
+}
+
+.main-troca {
+  display: flex;
+}
+
+.container-troca {
+  display: flex;
+  margin: auto;
+}
+
+.container-troca__description h2 {
+  font-family: "Roboto", sans-serif;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 28px;
+  margin-bottom: 12px;
+  color: var(--color-gray-500);
+}
+
+@media screen and (max-width: 1024px) {
+  .container-troca {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .container-troca__description h2 {
+    margin-top: 30px;
+    text-align: center;
+  }
+}
diff --git a/react-academy/src/router.tsx b/react-academy/src/router.tsx
index 3f163e3..7fef846 100644
--- a/react-academy/src/router.tsx
+++ b/react-academy/src/router.tsx
@@ -3,13 +3,28 @@ import { Routes, Route, Navigate } from "react-router-dom";
 import Header from "./Components/Header";
 import Footer from "./Components/Footer";
 import NewsLetter from "./Components/Newsletter";
+import Sobre from "./Pages/Sobre";
+import Contato from "./Pages/Contato";
+import Entrega from "./Pages/Entrega";
+import TrocaDevolucao from "./Pages/TrocaDevolucao";
+import FormaDePagamento from "./Pages/FormaDePagamento";
+import SegurancaPrivacidade from "./Pages/SegurancaPrivacidade";
 
 export default function Router() {
   return (
     <>
       <Header />
       <Routes>
-        <Route></Route>
+        <Route path="/" element={<Navigate to="/sobre" />} />
+        <Route path="/sobre" element={<Sobre />} />
+        <Route path="/formaDePagamento" element={<FormaDePagamento />} />
+        <Route
+          path="/segurancaPrivacidade"
+          element={<SegurancaPrivacidade />}
+        />
+        <Route path="/entrega" element={<Entrega />} />
+        <Route path="/trocaDevolucao" element={<TrocaDevolucao />} />
+        <Route path="/contato" element={<Contato />} />
       </Routes>
       <NewsLetter />
       <Footer />