From eb7fba79c10f36ac56fd2527241e0388f3d200dc Mon Sep 17 00:00:00 2001
From: ManuelaLuanaSchumackerTavares <manuelaluana.dev@gmail.com>
Date: Tue, 17 Jan 2023 15:03:59 -0300
Subject: [PATCH] =?UTF-8?q?feat(main-content):=20Adiciona=20menu=20de=20na?=
 =?UTF-8?q?vega=C3=A7=C3=A3o=20no=20conte=C3=BAdo=20principal=20da=20p?=
 =?UTF-8?q?=C3=A1gina=20responsivo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             | 61 +++++++++++++
 package.json                                  |  1 +
 src/components/MainContent.tsx                | 34 +++++++
 src/components/main-content.module.scss       | 89 +++++++++++++++++++
 src/components/main/components/Contato.tsx    | 19 ++++
 src/components/main/components/Entrega.tsx    | 46 ++++++++++
 .../main/components/FormasDePagamento.tsx     | 46 ++++++++++
 src/components/main/components/MainMenu.tsx   | 79 ++++++++++++++++
 .../main/components/SegurancaEPrivacidade.tsx | 46 ++++++++++
 src/components/main/components/Sobre.tsx      | 46 ++++++++++
 .../main/components/TrocaEDevolucao.tsx       | 46 ++++++++++
 src/pages/Home.tsx                            |  2 +
 12 files changed, 515 insertions(+)
 create mode 100644 src/components/MainContent.tsx
 create mode 100644 src/components/main-content.module.scss
 create mode 100644 src/components/main/components/Contato.tsx
 create mode 100644 src/components/main/components/Entrega.tsx
 create mode 100644 src/components/main/components/FormasDePagamento.tsx
 create mode 100644 src/components/main/components/MainMenu.tsx
 create mode 100644 src/components/main/components/SegurancaEPrivacidade.tsx
 create mode 100644 src/components/main/components/Sobre.tsx
 create mode 100644 src/components/main/components/TrocaEDevolucao.tsx

diff --git a/package-lock.json b/package-lock.json
index 4c8814c..276e986 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "formik": "^2.2.9",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-router-dom": "^6.6.2",
         "react-scripts": "5.0.1",
         "typescript": "^4.9.4",
         "web-vitals": "^2.1.4",
@@ -3081,6 +3082,14 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz",
+      "integrity": "sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -14048,6 +14057,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.2.tgz",
+      "integrity": "sha512-uJPG55Pek3orClbURDvfljhqFvMgJRo59Pktywkk8hUUkTY2aRfza8Yhl/vZQXs+TNQyr6tu+uqz/fLxPICOGQ==",
+      "dependencies": {
+        "@remix-run/router": "1.2.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.2.tgz",
+      "integrity": "sha512-6SCDXxRQqW5af8ImOqKza7icmQ47/EMbz572uFjzvcArg3lZ+04PxSPp8qGs+p2Y+q+b+S/AjXv8m8dyLndIIA==",
+      "dependencies": {
+        "@remix-run/router": "1.2.1",
+        "react-router": "6.6.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -18984,6 +19023,11 @@
         "source-map": "^0.7.3"
       }
     },
+    "@remix-run/router": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz",
+      "integrity": "sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ=="
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -26808,6 +26852,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.2.tgz",
+      "integrity": "sha512-uJPG55Pek3orClbURDvfljhqFvMgJRo59Pktywkk8hUUkTY2aRfza8Yhl/vZQXs+TNQyr6tu+uqz/fLxPICOGQ==",
+      "requires": {
+        "@remix-run/router": "1.2.1"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.2.tgz",
+      "integrity": "sha512-6SCDXxRQqW5af8ImOqKza7icmQ47/EMbz572uFjzvcArg3lZ+04PxSPp8qGs+p2Y+q+b+S/AjXv8m8dyLndIIA==",
+      "requires": {
+        "@remix-run/router": "1.2.1",
+        "react-router": "6.6.2"
+      }
+    },
     "react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
diff --git a/package.json b/package.json
index 236edf0..3da0019 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "formik": "^2.2.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.6.2",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.4",
     "web-vitals": "^2.1.4",
diff --git a/src/components/MainContent.tsx b/src/components/MainContent.tsx
new file mode 100644
index 0000000..b87f2ca
--- /dev/null
+++ b/src/components/MainContent.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+
+import style from "./main-content.module.scss";
+
+import { Sobre } from "../components/main/components/Sobre";
+import { FormasDePagamento } from "../components/main/components/FormasDePagamento";
+import { Entrega } from "../components/main/components/Entrega";
+import { TrocaEDevolucao } from "../components/main/components/TrocaEDevolucao";
+import { SegurancaEPrivacidade } from "../components/main/components/SegurancaEPrivacidade";
+import { Contato } from "../components/main/components/Contato";
+
+const MainContent = () => {
+  return (
+    <main className={style["main-content-container"]}>
+      <Router>
+        <Routes>
+          <Route path="/" element={<Sobre />} />
+          <Route path="/sobre" element={<Sobre />} />
+          <Route path="/forma-de-pagamento" element={<FormasDePagamento />} />
+          <Route path="/entrega" element={<Entrega />} />
+          <Route path="/troca-e-devolucao" element={<TrocaEDevolucao />} />
+          <Route
+            path="/seguranca-e-privacidade"
+            element={<SegurancaEPrivacidade />}
+          />
+          <Route path="/contato" element={<Contato />} />
+        </Routes>
+      </Router>
+    </main>
+  );
+};
+
+export { MainContent };
diff --git a/src/components/main-content.module.scss b/src/components/main-content.module.scss
new file mode 100644
index 0000000..cde7154
--- /dev/null
+++ b/src/components/main-content.module.scss
@@ -0,0 +1,89 @@
+@use "../variables.module.scss";
+
+.main-content-container {
+  width: 100%;
+  // height: 588px;
+  background: variables.$color-white;
+  // padding-top: 40px;
+
+  .main-content-wrapper {
+    width: 80.46875%;
+    display: flex;
+    margin: 0 auto;
+
+    @media screen and (max-width: 1024px) {
+      width: 100%;
+      flex-direction: column;
+    }
+
+    .main-content-list {
+      width: 29.32038%;
+
+      @media screen and (max-width: 1024px) {
+        width: 100%;
+      }
+
+      .main-content-item {
+        padding: 10px 0 16px 16px;
+
+        @media screen and (max-width: 1024px) {
+          padding: 10px 16px;
+        }
+
+        a {
+          font-weight: 400;
+          font-size: 16px;
+          line-height: 19px;
+          color: variables.$color-grey3;
+          text-decoration: none;
+        }
+
+        .selected {
+          display: flex;
+          padding: 10px 16px;
+          background: variables.$color-black;
+          color: variables.$color-white;
+        }
+      }
+    }
+
+    .main-content-text {
+      width: 72.62135%;
+      border-left: 1px solid variables.$color-black;
+
+      @media screen and (max-width: 1024px) {
+        width: 100%;
+        border: 0;
+      }
+
+      div {
+        margin-left: 30px;
+
+        @media screen and (max-width: 1024px) {
+          margin-left: 0;
+          padding: 0 16px;
+        }
+      }
+
+      h2 {
+        font-weight: 700;
+        font-size: 24px;
+        line-height: 28px;
+        color: variables.$color-black2;
+        margin-bottom: 12px;
+
+        @media screen and (max-width: 1024px) {
+          text-align: center;
+        }
+      }
+
+      p {
+        font-weight: 400;
+        font-size: 13px;
+        line-height: 15px;
+        color: variables.$color-grey3;
+        margin-bottom: 12px;
+      }
+    }
+  }
+}
diff --git a/src/components/main/components/Contato.tsx b/src/components/main/components/Contato.tsx
new file mode 100644
index 0000000..2620b10
--- /dev/null
+++ b/src/components/main/components/Contato.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { MainMenu } from "./MainMenu";
+
+import style from "../../main-content.module.scss";
+
+const Contato = () => {
+  return (
+    <section className={style["main-content-wrapper"]}>
+      <MainMenu />
+      <div className={style["main-content-text"]}>
+        <div className={style["main-content-text-wrapper"]}>
+          <h2>Contato</h2>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Contato };
diff --git a/src/components/main/components/Entrega.tsx b/src/components/main/components/Entrega.tsx
new file mode 100644
index 0000000..d685559
--- /dev/null
+++ b/src/components/main/components/Entrega.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import { MainMenu } from "./MainMenu";
+
+import style from "../../main-content.module.scss";
+
+const Entrega = () => {
+  return (
+    <section className={style["main-content-wrapper"]}>
+      <MainMenu />
+      <div className={style["main-content-text"]}>
+        <div className={style["main-content-text-wrapper"]}>
+          <h2>Entrega</h2>
+          <p>
+            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.
+          </p>
+          <p>
+            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.
+          </p>
+          <p>
+            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>
+    </section>
+  );
+};
+
+export { Entrega };
diff --git a/src/components/main/components/FormasDePagamento.tsx b/src/components/main/components/FormasDePagamento.tsx
new file mode 100644
index 0000000..f4aa23d
--- /dev/null
+++ b/src/components/main/components/FormasDePagamento.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import { MainMenu } from "./MainMenu";
+
+import style from "../../main-content.module.scss";
+
+const FormasDePagamento = () => {
+  return (
+    <section className={style["main-content-wrapper"]}>
+      <MainMenu />
+      <div className={style["main-content-text"]}>
+        <div className={style["main-content-text-wrapper"]}>
+          <h2>Formas de Pagamento</h2>
+          <p>
+            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.
+          </p>
+          <p>
+            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.
+          </p>
+          <p>
+            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>
+    </section>
+  );
+};
+
+export { FormasDePagamento };
diff --git a/src/components/main/components/MainMenu.tsx b/src/components/main/components/MainMenu.tsx
new file mode 100644
index 0000000..4e78dc9
--- /dev/null
+++ b/src/components/main/components/MainMenu.tsx
@@ -0,0 +1,79 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+import classnames from "classnames";
+
+import style from "../../main-content.module.scss";
+
+const MainMenu = () => {
+  const activeClassName = style["selected"];
+  return (
+    <div className={style["main-content-list"]}>
+      <nav>
+        <ul className={style["teste"]}>
+          <li className={classnames(style["main-content-item"])}>
+            <NavLink
+              to="/sobre"
+              className={({ isActive }) =>
+                isActive ? activeClassName : undefined
+              }
+            >
+              Sobre
+            </NavLink>
+          </li>
+          <li className={classnames(style["main-content-item"])}>
+            <NavLink
+              to="/forma-de-pagamento"
+              className={({ isActive }) =>
+                isActive ? activeClassName : undefined
+              }
+            >
+              Forma de Pagamento
+            </NavLink>
+          </li>
+          <li className={classnames(style["main-content-item"])}>
+            <NavLink
+              to="/entrega"
+              className={({ isActive }) =>
+                isActive ? activeClassName : undefined
+              }
+            >
+              Entrega
+            </NavLink>
+          </li>
+          <li className={classnames(style["main-content-item"])}>
+            <NavLink
+              to="/troca-e-devolucao"
+              className={({ isActive }) =>
+                isActive ? activeClassName : undefined
+              }
+            >
+              Troca e Devolução
+            </NavLink>
+          </li>
+          <li className={classnames(style["main-content-item"])}>
+            <NavLink
+              to="/seguranca-e-privacidade"
+              className={({ isActive }) =>
+                isActive ? activeClassName : undefined
+              }
+            >
+              Segurança e Privacidade
+            </NavLink>
+          </li>
+          <li className={classnames(style["main-content-item"])}>
+            <NavLink
+              to="/contato"
+              className={({ isActive }) =>
+                isActive ? activeClassName : undefined
+              }
+            >
+              Contato
+            </NavLink>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  );
+};
+
+export { MainMenu };
diff --git a/src/components/main/components/SegurancaEPrivacidade.tsx b/src/components/main/components/SegurancaEPrivacidade.tsx
new file mode 100644
index 0000000..b113f58
--- /dev/null
+++ b/src/components/main/components/SegurancaEPrivacidade.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import { MainMenu } from "./MainMenu";
+
+import style from "../../main-content.module.scss";
+
+const SegurancaEPrivacidade = () => {
+  return (
+    <section className={style["main-content-wrapper"]}>
+      <MainMenu />
+      <div className={style["main-content-text"]}>
+        <div className={style["main-content-text-wrapper"]}>
+          <h2>Segurança e Privacidade</h2>
+          <p>
+            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.
+          </p>
+          <p>
+            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.
+          </p>
+          <p>
+            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>
+    </section>
+  );
+};
+
+export { SegurancaEPrivacidade };
diff --git a/src/components/main/components/Sobre.tsx b/src/components/main/components/Sobre.tsx
new file mode 100644
index 0000000..50d5fbf
--- /dev/null
+++ b/src/components/main/components/Sobre.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import { MainMenu } from "./MainMenu";
+
+import style from "../../main-content.module.scss";
+
+const Sobre = () => {
+  return (
+    <section className={style["main-content-wrapper"]}>
+      <MainMenu />
+      <div className={style["main-content-text"]}>
+        <div className={style["main-content-text-wrapper"]}>
+          <h2>Sobre</h2>
+          <p>
+            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.
+          </p>
+          <p>
+            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.
+          </p>
+          <p>
+            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>
+    </section>
+  );
+};
+
+export { Sobre };
diff --git a/src/components/main/components/TrocaEDevolucao.tsx b/src/components/main/components/TrocaEDevolucao.tsx
new file mode 100644
index 0000000..100e768
--- /dev/null
+++ b/src/components/main/components/TrocaEDevolucao.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import { MainMenu } from "./MainMenu";
+
+import style from "../../main-content.module.scss";
+
+const TrocaEDevolucao = () => {
+  return (
+    <section className={style["main-content-wrapper"]}>
+      <MainMenu />
+      <div className={style["main-content-text"]}>
+        <div className={style["main-content-text-wrapper"]}>
+          <h2>Troca e Devolução</h2>
+          <p>
+            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.
+          </p>
+          <p>
+            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.
+          </p>
+          <p>
+            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>
+    </section>
+  );
+};
+
+export { TrocaEDevolucao };
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 58d0642..515a60a 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -5,12 +5,14 @@ import { HeaderBottom } from "../components/HeaderBottom";
 import { FooterBottom } from "../components/FooterBottom";
 import { FooterTop } from "../components/FooterTop";
 import { Newsletter } from "../components/Newsletter";
+import { MainContent } from "../components/MainContent";
 
 function Home() {
   return (
     <div className="App">
       <HeaderTop />
       <HeaderBottom />
+      <MainContent />
       <Newsletter />
       <FooterTop />
       <FooterBottom />