diff --git a/src/assets/svgs/home.svg b/src/assets/svgs/home.svg new file mode 100644 index 0000000..db6d7be --- /dev/null +++ b/src/assets/svgs/home.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/svgs/seta.svg b/src/assets/svgs/seta.svg new file mode 100644 index 0000000..762a1d8 --- /dev/null +++ b/src/assets/svgs/seta.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/MainContent.tsx b/src/components/MainContent.tsx index b87f2ca..a225893 100644 --- a/src/components/MainContent.tsx +++ b/src/components/MainContent.tsx @@ -10,9 +10,27 @@ import { TrocaEDevolucao } from "../components/main/components/TrocaEDevolucao"; import { SegurancaEPrivacidade } from "../components/main/components/SegurancaEPrivacidade"; import { Contato } from "../components/main/components/Contato"; +import home from "../assets/svgs/home.svg"; +import seta from "../assets/svgs/seta.svg"; + const MainContent = () => { return (
+
+
+ + Home + + +
+ Seta +
+ institucional +
+
+

institucional

+
+
} /> diff --git a/src/components/main-content.module.scss b/src/components/main-content.module.scss index 4abca05..1436e12 100644 --- a/src/components/main-content.module.scss +++ b/src/components/main-content.module.scss @@ -3,7 +3,60 @@ .main-content-container { width: 100%; background: variables.$color-white; - padding: 40px 0; + padding: 29px 0 40px 0; + + .main-content-top-container { + width: 80.46875%; + margin: 0 auto; + + @media screen and (max-width: 1024px) { + width: 100%; + padding: 0 16px; + } + + .main-content-bread-wrapper { + display: flex; + align-items: center; + gap: 9.73px; + + a { + img { + width: auto; + } + } + + figure { + img { + width: auto; + } + } + + span { + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: variables.$color-grey; + } + } + + .main-content-title-wrapper { + text-align: center; + padding: 80px 0; + + h1 { + font-weight: 400; + font-size: 24px; + line-height: 28px; + letter-spacing: 0.1em; + text-transform: uppercase; + color: variables.$color-black2; + } + + @media screen and (max-width: 1024px) { + padding: 80px 0 40px 0; + } + } + } .main-content-wrapper { width: 80.46875%;