From 42def1265e92a8282cd301eb35d163362fb1b515 Mon Sep 17 00:00:00 2001 From: guiprj Date: Mon, 2 Jan 2023 23:51:35 -0300 Subject: [PATCH] feat: criacao de uma parte e estilizacao do main --- src/assets/Boleto.svg | 9 + src/assets/Diners.svg | 9 + src/assets/Elo.svg | 9 + src/assets/Hiper.svg | 9 + src/assets/Master.svg | 9 + src/assets/Pagseguro.svg | 9 + src/assets/Visa.svg | 9 + src/assets/arrow-top.svg | 3 + src/assets/icon-facebook.svg | 11 ++ src/assets/icon-in.svg | 13 ++ src/assets/icon-instagram.svg | 13 ++ src/assets/icon-m3.svg | 4 + src/assets/icon-twitter.svg | 4 + src/assets/icon-vtex.svg | 7 + src/assets/icon-whatsapp.svg | 11 ++ src/assets/icon-youtube.svg | 4 + src/assets/vtex-pci-200.svg | 9 + src/components/Footer/index.tsx | 22 ++- src/components/Footer/style.module.css | 160 ++++++++++++++++++ src/components/Header/index.tsx | 22 +-- .../{index.module.css => style.module.css} | 38 ++--- src/components/Main/index.tsx | 73 +++++++- src/components/Main/style.module.css | 101 +++++++++++ 23 files changed, 510 insertions(+), 48 deletions(-) create mode 100644 src/assets/Boleto.svg create mode 100644 src/assets/Diners.svg create mode 100644 src/assets/Elo.svg create mode 100644 src/assets/Hiper.svg create mode 100644 src/assets/Master.svg create mode 100644 src/assets/Pagseguro.svg create mode 100644 src/assets/Visa.svg create mode 100644 src/assets/arrow-top.svg create mode 100644 src/assets/icon-facebook.svg create mode 100644 src/assets/icon-in.svg create mode 100644 src/assets/icon-instagram.svg create mode 100644 src/assets/icon-m3.svg create mode 100644 src/assets/icon-twitter.svg create mode 100644 src/assets/icon-vtex.svg create mode 100644 src/assets/icon-whatsapp.svg create mode 100644 src/assets/icon-youtube.svg create mode 100644 src/assets/vtex-pci-200.svg create mode 100644 src/components/Footer/style.module.css rename src/components/Header/{index.module.css => style.module.css} (81%) create mode 100644 src/components/Main/style.module.css diff --git a/src/assets/Boleto.svg b/src/assets/Boleto.svg new file mode 100644 index 0000000..1a184b5 --- /dev/null +++ b/src/assets/Boleto.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/Diners.svg b/src/assets/Diners.svg new file mode 100644 index 0000000..72290e6 --- /dev/null +++ b/src/assets/Diners.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/Elo.svg b/src/assets/Elo.svg new file mode 100644 index 0000000..3e65816 --- /dev/null +++ b/src/assets/Elo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/Hiper.svg b/src/assets/Hiper.svg new file mode 100644 index 0000000..c7f8dba --- /dev/null +++ b/src/assets/Hiper.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/Master.svg b/src/assets/Master.svg new file mode 100644 index 0000000..51ccc7c --- /dev/null +++ b/src/assets/Master.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/Pagseguro.svg b/src/assets/Pagseguro.svg new file mode 100644 index 0000000..dc3189a --- /dev/null +++ b/src/assets/Pagseguro.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/Visa.svg b/src/assets/Visa.svg new file mode 100644 index 0000000..5436805 --- /dev/null +++ b/src/assets/Visa.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/arrow-top.svg b/src/assets/arrow-top.svg new file mode 100644 index 0000000..d211cf8 --- /dev/null +++ b/src/assets/arrow-top.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icon-facebook.svg b/src/assets/icon-facebook.svg new file mode 100644 index 0000000..0d1083b --- /dev/null +++ b/src/assets/icon-facebook.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/icon-in.svg b/src/assets/icon-in.svg new file mode 100644 index 0000000..3e9e4e9 --- /dev/null +++ b/src/assets/icon-in.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/assets/icon-instagram.svg b/src/assets/icon-instagram.svg new file mode 100644 index 0000000..d14cebb --- /dev/null +++ b/src/assets/icon-instagram.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/assets/icon-m3.svg b/src/assets/icon-m3.svg new file mode 100644 index 0000000..ae62dc2 --- /dev/null +++ b/src/assets/icon-m3.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icon-twitter.svg b/src/assets/icon-twitter.svg new file mode 100644 index 0000000..429d79f --- /dev/null +++ b/src/assets/icon-twitter.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icon-vtex.svg b/src/assets/icon-vtex.svg new file mode 100644 index 0000000..436c57f --- /dev/null +++ b/src/assets/icon-vtex.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/icon-whatsapp.svg b/src/assets/icon-whatsapp.svg new file mode 100644 index 0000000..53c5037 --- /dev/null +++ b/src/assets/icon-whatsapp.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/icon-youtube.svg b/src/assets/icon-youtube.svg new file mode 100644 index 0000000..8894c8b --- /dev/null +++ b/src/assets/icon-youtube.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/vtex-pci-200.svg b/src/assets/vtex-pci-200.svg new file mode 100644 index 0000000..309686f --- /dev/null +++ b/src/assets/vtex-pci-200.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index 7b7afa0..f6ab0f3 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -1,5 +1,23 @@ +import iconFace from "../../assets/icon-facebook.svg"; +import iconInsta from "../../assets/icon-instagram.svg"; +import iconYoutube from "../../assets/icon-youtube.svg"; +import iconTwitter from "../../assets/icon-twitter.svg"; +import iconIN from "../../assets/icon-in.svg"; +import iconBoleto from "../../assets/Boleto.svg"; +import iconElo from "../../assets/Elo.svg"; +import iconHiper from "../../assets/Hiper.svg"; +import iconMaster from "../../assets/Master.svg"; +import iconDiners from "../../assets/Diners.svg"; +import iconPagSeguro from "../../assets/Pagseguro.svg"; +import iconVisa from "../../assets/Visa.svg"; +import iconVtexPCI from "../../assets/vtex-pci-200.svg"; +import iconVtex from "../../assets/icon-vtex.svg"; +import iconM3 from "../../assets/icon-m3.svg"; + +import style from "./style.module.css"; + export function Footer() { return (

Footer

- ) -} \ No newline at end of file + ); +} diff --git a/src/components/Footer/style.module.css b/src/components/Footer/style.module.css new file mode 100644 index 0000000..680af39 --- /dev/null +++ b/src/components/Footer/style.module.css @@ -0,0 +1,160 @@ +.containerNewsLetter { + width: 100%; + display: flex; + justify-content: center; + align-items: center; + border-top: 1px solid var(--black); + border-bottom: 1px solid var(--black); + margin-top: 5.25rem; +} + +.contentNewsLetter { + width: 37%; + padding: 1rem 0; +} + +.contentNewsLetter h3{ + font-weight: 500; + font-size: 2.25rem; + color: var(--gray-1100); + margin-bottom: 0.5rem; +} + +.contentNewsLetter form{ + width: 100%; + display: flex; +} + +.contentNewsLetter form input{ + width: 73%; + height: 59px; + border: 1px solid var(--gray-100); + margin-right: 0.5rem; + font-size: 1.75rem; + font-weight: 400; + padding: 0.813rem 1rem; +} + +.contentNewsLetter form button{ + width: 27%; + background-color: var(--black); + color: var(--white); + font-size: 1.5rem; + font-weight: 700; + padding: 0.875rem 1.25rem; +} + +.containerFooter { + width: 100%; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + margin-top: 3.125rem; +} + +.contentFooter { + width: 90%; + display: flex; + justify-content: center; + align-items: flex-start; +} + +.contentListInstitucional, +.contentListDoubt, +.contentListContact { + flex: 1; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; +} + +.contentListInstitucional ul, +.contentListDoubt ul, +.contentListContact ul { + list-style: none; +} + +.contentListInstitucional h4, +.contentListDoubt h4, +.contentListContact h4 { + font-weight: 500; + font-size: 28px; + color: var(--gray-1100); + margin-bottom: 0.75rem; +} + +.contentListInstitucional a, +.contentListDoubt a, +.contentListContact a { + text-decoration: none; +} + +.contentListInstitucional ul a:last-child , +.contentListDoubt ul a:last-child , +.contentListContact ul a:last-child { + text-decoration: underline; + text-decoration-color: var(--gray-1100); +} + +.contentListInstitucional li, +.contentListDoubt li, +.contentListContact li { + font-weight: 400; + font-size: 1.5rem; + color: var(--gray-1100); + margin-bottom: 0.75rem; +} + +.contentListContact li { + display: flex; + flex-direction: column; +} + +.contentListContact li span { + font-weight: 400; + font-size: 1.5rem; + color: var(--gray-1100); +} + +.contentListContact li span:first-child { + margin-bottom: 0.75rem; +} + +.contentListContact a{ + text-decoration: none !important; +} + +.contentListContact li span.line{ + text-decoration: underline; + text-decoration-color: var(--gray-1100); +} + +.contentListIcons { + flex: 1; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-end; +} + +.contentListIconsWrapper { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; +} + +.contentListIconsWrapper span { + font-weight: 400; + font-size: 1.75rem; + color: var(--gray-1100); +} + +.listIcons { + display: flex; + gap: 0.625rem; + margin-bottom: 0.75rem; +} + diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 79cb2fd..65b1154 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -1,14 +1,13 @@ -import style from "./index.module.css"; import logo from "../../assets/Logo-M3Academy 1 (1).svg"; import imgSearch from "../../assets/search 2.svg"; import imgMiniCart from "../../assets/cart 1.svg"; -import imgHome from "../../assets/home 1.svg"; -import imgArrowRight from "../../assets/arrow-point-to-right (3).svg"; + +import style from "./style.module.css"; export function Header() { return ( <> -
+
@@ -19,7 +18,9 @@ export function Header() {
- Logo de pesquisa +
@@ -32,7 +33,7 @@ export function Header() {
-
+
@@ -50,15 +51,6 @@ export function Header() {
-
-
-
- Casinha - seta para a direita - institucional -
-
-
); } diff --git a/src/components/Header/index.module.css b/src/components/Header/style.module.css similarity index 81% rename from src/components/Header/index.module.css rename to src/components/Header/style.module.css index f3e2314..3548046 100644 --- a/src/components/Header/index.module.css +++ b/src/components/Header/style.module.css @@ -68,11 +68,19 @@ border: 1px solid var(--gray-50); } -.contentSearch span img { +.contentSearch span button { width: 35.15px; + height: 100%; position: absolute; - top: 10px; + top: 0px; right: 10px; + background-color: transparent; + border: none; + outline: none; +} + +.contentSearch span button img { + width: 100%; } .contentInfoHeader { @@ -135,29 +143,3 @@ font-size: 28px; font-weight: 500; } - -.containerBreadCrumb { - width: 100%; - max-height: 118px; - display: flex; - justify-content: center; - align-items: center; -} - -.contentBreadCrumb { - display: flex; - justify-content: flex-start; - align-items: center; - width: 100%; -} - -.contentBreadCrumb span { - font-size: 24px; - font-weight: 400; - text-transform: uppercase; - color: var(--gray-300); -} - -.contentBreadCrumb img, .contentBreadCrumb span { - margin-right: 0.547rem; -} diff --git a/src/components/Main/index.tsx b/src/components/Main/index.tsx index bfdcb08..ab6d696 100644 --- a/src/components/Main/index.tsx +++ b/src/components/Main/index.tsx @@ -1,5 +1,72 @@ +import imgHome from "../../assets/home 1.svg"; +import imgArrowRight from "../../assets/arrow-point-to-right (3).svg"; + +import style from "./style.module.css"; + export function Main() { return ( -

Main

- ) -} \ No newline at end of file +
+
+
+ Casinha + seta para a direita + institucional +
+
+

INSTITUCIONAL

+ +
+

Sobre

+
+

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

+
+
+
+
+
+ ); +} diff --git a/src/components/Main/style.module.css b/src/components/Main/style.module.css new file mode 100644 index 0000000..fade2da --- /dev/null +++ b/src/components/Main/style.module.css @@ -0,0 +1,101 @@ +.containerMain{ + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.contentWrapper { + width: 90%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 1.375rem 0 0; +} + +.contentBreadCrumb { + display: flex; + justify-content: flex-start; + align-items: center; + width: 100%; +} + +.contentBreadCrumb span { + font-size: 24px; + font-weight: 400; + text-transform: uppercase; + color: var(--gray-300); +} + +.contentBreadCrumb img, .contentBreadCrumb span { + margin-right: 0.547rem; +} + +.contentMain { + width: 100%; + display: grid; + grid-template-columns: 1fr 3fr; + grid-template-rows: 1fr 3fr; + grid-template-areas: "title title" + "aside contentInfo"; +} + +.contentMain h1 { + grid-area: title; + + display: flex; + justify-content: center; + align-items: center; + margin: 5rem 0; + font-weight: 400; + color: var(--gray-1300); + font-size: 3rem; +} + +.contentMain aside { + grid-area: aside; + border-right: 1px solid var(--black); +} + +.contentMain aside ul { + list-style: none; +} + +.contentMain aside ul li{ + padding: 0.625rem 1rem; + font-size: 32px; + color: var(--gray-900); + font-weight: 400; +} + +.contentMain aside ul li.active{ + background-color: var(--black); + color: var(--white); + font-weight: 700; +} + +.contentMain aside ul a{ + text-decoration: none; +} + +.contentInfoList { + grid-area: contentInfo; + margin-left: 1.875rem; +} + +.contentInfoList h2 { + margin: 0.75rem 0; + font-weight: 700; + color: var(--gray-1300); + font-size: 48px; +} + +.dataList p { + color: var(--gray-900); + font-weight: 400; + line-height: 30.47px; + font-size: 26px; +} +