diff --git a/src/components/pagamento/index.tsx b/src/components/pagamento/index.tsx index ede3e6c..7d4f1c9 100644 --- a/src/components/pagamento/index.tsx +++ b/src/components/pagamento/index.tsx @@ -1,7 +1,44 @@ import React from "react"; +import styles from "./style.module.scss"; + const Pagamento = () => { - return
+ return ( + <> +
+

Forma de Pagamento

+

+ 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. +

+ +

+ 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. +

+ +

+ 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? +

+
+ + ); } export { Pagamento }; \ No newline at end of file diff --git a/src/components/pagamento/style.module.scss b/src/components/pagamento/style.module.scss index e69de29..e664063 100644 --- a/src/components/pagamento/style.module.scss +++ b/src/components/pagamento/style.module.scss @@ -0,0 +1,54 @@ +.pagamento { + 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; + } + } + } + \ No newline at end of file diff --git a/src/routes/root.tsx b/src/routes/root.tsx index 78953ff..e3b443a 100644 --- a/src/routes/root.tsx +++ b/src/routes/root.tsx @@ -2,12 +2,14 @@ import React from "react"; import { Routes, Route } from "react-router"; import { Sobre } from "../components/sobre/index" import { Entrega } from "../components/entrega"; +import { Pagamento } from "../components/pagamento"; const Root = () => { return ( } /> } /> + } /> ) }