src/components/troca/index.tsx

@@ -1,7 +1,44 @@
 import React from "react";
 
+import styles from "./style.module.scss"
+
 const Troca = () => {
-    return <div></div>
+    return (
+        <>
+      <section className={styles["troca"]}>
+        <h3>Troca e Devolução</h3>
+        <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>
+      </section>
+      </>
+    );
 } 
 
 export { Troca };

src/components/troca/style.module.scss

@@ -0,0 +1,54 @@
+.troca {
+    width: 58.438%;
+    height: auto;
+    margin: 0 0 0 30px;
+  
+    @media (min-width: 2500px) {
+      width: 67.2%;
+    }
+  
+    @media (max-width: 1024px) {
+      width: 96.88%;
+      margin: auto;
+    }
+  
+    @media (max-width: 599px) {
+      width: 91.6%;
+    }
+  
+    h3 {
+      font-weight: 700;
+      font-size: 24px;
+      line-height: 28px;
+      color: var(--dark-gray-200);
+      margin: 12px 0;
+  
+      @media (min-width: 2500px) {
+        font-size: 48px;
+        line-height: 56px;
+      }
+  
+      @media (max-width: 1024px) {
+        text-align: center;
+      }
+    }
+  
+    p {
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 15px;
+      color: var(--medium-gray-200);
+      margin: 12px 0;
+  
+      @media (min-width: 2500px) {
+        font-size: 26px;
+        line-height: 30px;
+      }
+  
+      @media (max-width: 1024px) {
+        font-size: 12px;
+        line-height: 18px;
+      }
+    }
+  }
+  

src/routes/root.tsx

@@ -3,6 +3,7 @@ import { Routes, Route } from "react-router";
 import { Sobre } from "../components/sobre/index"
 import { Entrega } from "../components/entrega";
 import { Pagamento } from "../components/pagamento";
+import { Troca } from "../components/troca";
 
 const Root = () => {
     return (
@@ -10,6 +11,7 @@ const Root = () => {
             <Route path="/" element={<Sobre />} />
             <Route path="/entrega" element={<Entrega />} />
             <Route path="/pagamento" element={<Pagamento />} />
+            <Route path="/troca" element={<Troca />} />
         </Routes>
     )
 }