feat: Cria página Segurança desktop e mobile

src/components/seguranca/index.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+import styles from "./style.module.scss"
+
+const Segurança = () => {
+    return (
+        <>
+        <section className={styles["segurança"]}>
+          <h3>Segurança e Privacidade</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 { Segurança };

src/components/seguranca/style.module.scss

@@ -0,0 +1,54 @@
+.segurança {
+    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/components/segurança/index.tsx

@@ -1,7 +0,0 @@
-import React from "react";
-
-const Segurança = () => {
-    return <div></div>
-} 
-
-export { Segurança };

src/routes/root.tsx

@@ -5,6 +5,8 @@ import { Entrega } from "../components/entrega";
 import { Pagamento } from "../components/pagamento";
 import { Troca } from "../components/troca";
 
+import { Segurança } from "../components/seguranca";
+
 const Root = () => {
     return (
         <Routes>
@@ -12,6 +14,7 @@ const Root = () => {
             <Route path="/entrega" element={<Entrega />} />
             <Route path="/pagamento" element={<Pagamento />} />
             <Route path="/troca" element={<Troca />} />
+            <Route path="/segurança" element={<Segurança />} />
         </Routes>
     )
 }