From 0587ae4e5f95a42d4235105695d7b808eeffdd9e Mon Sep 17 00:00:00 2001 From: carloswinter Date: Thu, 19 Jan 2023 23:42:05 -0300 Subject: [PATCH] feat(img): adiciona a pasta com imagens --- src/Container-menu/TextContainer.tsx | 35 +++++++++ src/Container-menu/TopContainer.modules.scss | 75 +++++++++++++++++++ src/Container-menu/TopContainer.tsx | 23 ++++++ src/assets/imgs/SVGs/CartIcon_desktop.svg | 12 +++ src/assets/imgs/SVGs/Close-button.svg | 4 + src/assets/imgs/SVGs/Ellipse.svg | 3 + src/assets/imgs/SVGs/Facebook.svg | 16 ++++ src/assets/imgs/SVGs/Instagram.svg | 18 +++++ src/assets/imgs/SVGs/Linkedin.svg | 18 +++++ .../imgs/SVGs/Logo-M3Academy_desktop.svg | 9 +++ .../imgs/SVGs/Logo-M3Academy_mobile.svg | 9 +++ src/assets/imgs/SVGs/M3-logo.svg | 4 + src/assets/imgs/SVGs/M3Logo_desktop.svg | 9 +++ src/assets/imgs/SVGs/MenuHamburguer.svg | 5 ++ src/assets/imgs/SVGs/Twitter.svg | 11 +++ src/assets/imgs/SVGs/Vector.svg | 3 + src/assets/imgs/SVGs/Vtex-logo.svg | 7 ++ src/assets/imgs/SVGs/YouTube.svg | 11 +++ src/assets/imgs/SVGs/arrow-point-to-right.svg | 10 +++ src/assets/imgs/SVGs/credit-cards/Boleto.svg | 9 +++ src/assets/imgs/SVGs/credit-cards/Diners.svg | 9 +++ src/assets/imgs/SVGs/credit-cards/Elo.svg | 9 +++ src/assets/imgs/SVGs/credit-cards/Hiper.svg | 9 +++ src/assets/imgs/SVGs/credit-cards/Master.svg | 9 +++ .../imgs/SVGs/credit-cards/Pagseguro.svg | 9 +++ src/assets/imgs/SVGs/credit-cards/Visa.svg | 9 +++ .../imgs/SVGs/credit-cards/vtex-pci-200.svg | 9 +++ src/assets/imgs/SVGs/house-icon.svg | 3 + src/assets/imgs/SVGs/minicart_desktop.svg | 12 +++ src/assets/imgs/SVGs/minicart_mobile.svg | 5 ++ src/assets/imgs/SVGs/search-icon-desktop.svg | 10 +++ src/assets/imgs/SVGs/search-icon.svg | 10 +++ src/assets/imgs/SVGs/whatsapp.svg | 11 +++ src/assets/imgs/SVGs/wpp-group.svg | 13 ++++ 34 files changed, 418 insertions(+) create mode 100644 src/Container-menu/TextContainer.tsx create mode 100644 src/Container-menu/TopContainer.modules.scss create mode 100644 src/Container-menu/TopContainer.tsx create mode 100644 src/assets/imgs/SVGs/CartIcon_desktop.svg create mode 100644 src/assets/imgs/SVGs/Close-button.svg create mode 100644 src/assets/imgs/SVGs/Ellipse.svg create mode 100644 src/assets/imgs/SVGs/Facebook.svg create mode 100644 src/assets/imgs/SVGs/Instagram.svg create mode 100644 src/assets/imgs/SVGs/Linkedin.svg create mode 100644 src/assets/imgs/SVGs/Logo-M3Academy_desktop.svg create mode 100644 src/assets/imgs/SVGs/Logo-M3Academy_mobile.svg create mode 100644 src/assets/imgs/SVGs/M3-logo.svg create mode 100644 src/assets/imgs/SVGs/M3Logo_desktop.svg create mode 100644 src/assets/imgs/SVGs/MenuHamburguer.svg create mode 100644 src/assets/imgs/SVGs/Twitter.svg create mode 100644 src/assets/imgs/SVGs/Vector.svg create mode 100644 src/assets/imgs/SVGs/Vtex-logo.svg create mode 100644 src/assets/imgs/SVGs/YouTube.svg create mode 100644 src/assets/imgs/SVGs/arrow-point-to-right.svg create mode 100644 src/assets/imgs/SVGs/credit-cards/Boleto.svg create mode 100644 src/assets/imgs/SVGs/credit-cards/Diners.svg create mode 100644 src/assets/imgs/SVGs/credit-cards/Elo.svg create mode 100644 src/assets/imgs/SVGs/credit-cards/Hiper.svg create mode 100644 src/assets/imgs/SVGs/credit-cards/Master.svg create mode 100644 src/assets/imgs/SVGs/credit-cards/Pagseguro.svg create mode 100644 src/assets/imgs/SVGs/credit-cards/Visa.svg create mode 100644 src/assets/imgs/SVGs/credit-cards/vtex-pci-200.svg create mode 100644 src/assets/imgs/SVGs/house-icon.svg create mode 100644 src/assets/imgs/SVGs/minicart_desktop.svg create mode 100644 src/assets/imgs/SVGs/minicart_mobile.svg create mode 100644 src/assets/imgs/SVGs/search-icon-desktop.svg create mode 100644 src/assets/imgs/SVGs/search-icon.svg create mode 100644 src/assets/imgs/SVGs/whatsapp.svg create mode 100644 src/assets/imgs/SVGs/wpp-group.svg diff --git a/src/Container-menu/TextContainer.tsx b/src/Container-menu/TextContainer.tsx new file mode 100644 index 0000000..df27d91 --- /dev/null +++ b/src/Container-menu/TextContainer.tsx @@ -0,0 +1,35 @@ +export const MainText = () => { + return ( + <> +
+

+ 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/Container-menu/TopContainer.modules.scss b/src/Container-menu/TopContainer.modules.scss new file mode 100644 index 0000000..6a8df8e --- /dev/null +++ b/src/Container-menu/TopContainer.modules.scss @@ -0,0 +1,75 @@ +@import "../Variables.scss"; + +.TopIcons { + display: flex; + padding: 29px 16px; + align-items: center; + + .HouseIcon { + @media (min-width: 2500px) { + img { + width: 31.22px; + } + } + } + + @media (min-width: 1025px) { + padding: 30px 0 81px 100px; + } + + .Arrow { + margin: 0 9.7px; + + @media (min-width: 2500px) { + width: 15.62px; + height: 15.62px; + } + } + + .span_top { + font-family: $fontFamily; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: $color-gray; + text-transform: uppercase; + @media (min-width: 2500px) { + font-weight: 400; + font-size: 24px; + line-height: 28px; + } + } +} + +.Title_wrapper { + display: flex; + justify-content: center; + + .Title { + margin: 0 0 82px 0; + font-family: $fontFamily; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 28px; + letter-spacing: 0.1em; + text-transform: uppercase; + color: $color-gray-800; + + @media (max-width: 1024px) { + margin: 80px 0 40px; + font-weight: 400; + font-size: 24px; + line-height: 28px; + letter-spacing: 0.1em; + } + + @media (min-width: 2500px) { + font-weight: 400; + font-size: 48px; + line-height: 56px; + letter-spacing: 0.1em; + } + } +} diff --git a/src/Container-menu/TopContainer.tsx b/src/Container-menu/TopContainer.tsx new file mode 100644 index 0000000..efec1c2 --- /dev/null +++ b/src/Container-menu/TopContainer.tsx @@ -0,0 +1,23 @@ +import { NavLink } from "react-router-dom"; + +import HouseIcon from "../assets/imgs/SVGs/house-icon.svg"; +import Arrow from "../assets/imgs/SVGs/arrow-point-to-right.svg"; + +import "./TopContainer.modules.scss"; + +export const TopContainer = () => { + return ( + <> +
+ + HouseIcon + + Arrow + institucional +
+
+

institucional

+
+ + ); +}; diff --git a/src/assets/imgs/SVGs/CartIcon_desktop.svg b/src/assets/imgs/SVGs/CartIcon_desktop.svg new file mode 100644 index 0000000..fd775ad --- /dev/null +++ b/src/assets/imgs/SVGs/CartIcon_desktop.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/imgs/SVGs/Close-button.svg b/src/assets/imgs/SVGs/Close-button.svg new file mode 100644 index 0000000..e0e6d36 --- /dev/null +++ b/src/assets/imgs/SVGs/Close-button.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/imgs/SVGs/Ellipse.svg b/src/assets/imgs/SVGs/Ellipse.svg new file mode 100644 index 0000000..97ae3af --- /dev/null +++ b/src/assets/imgs/SVGs/Ellipse.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/imgs/SVGs/Facebook.svg b/src/assets/imgs/SVGs/Facebook.svg new file mode 100644 index 0000000..a391447 --- /dev/null +++ b/src/assets/imgs/SVGs/Facebook.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/assets/imgs/SVGs/Instagram.svg b/src/assets/imgs/SVGs/Instagram.svg new file mode 100644 index 0000000..e30eed0 --- /dev/null +++ b/src/assets/imgs/SVGs/Instagram.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/assets/imgs/SVGs/Linkedin.svg b/src/assets/imgs/SVGs/Linkedin.svg new file mode 100644 index 0000000..a63314d --- /dev/null +++ b/src/assets/imgs/SVGs/Linkedin.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/assets/imgs/SVGs/Logo-M3Academy_desktop.svg b/src/assets/imgs/SVGs/Logo-M3Academy_desktop.svg new file mode 100644 index 0000000..f57d95b --- /dev/null +++ b/src/assets/imgs/SVGs/Logo-M3Academy_desktop.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/imgs/SVGs/Logo-M3Academy_mobile.svg b/src/assets/imgs/SVGs/Logo-M3Academy_mobile.svg new file mode 100644 index 0000000..f83fef1 --- /dev/null +++ b/src/assets/imgs/SVGs/Logo-M3Academy_mobile.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/imgs/SVGs/M3-logo.svg b/src/assets/imgs/SVGs/M3-logo.svg new file mode 100644 index 0000000..cf041b8 --- /dev/null +++ b/src/assets/imgs/SVGs/M3-logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/imgs/SVGs/M3Logo_desktop.svg b/src/assets/imgs/SVGs/M3Logo_desktop.svg new file mode 100644 index 0000000..9bc9879 --- /dev/null +++ b/src/assets/imgs/SVGs/M3Logo_desktop.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/imgs/SVGs/MenuHamburguer.svg b/src/assets/imgs/SVGs/MenuHamburguer.svg new file mode 100644 index 0000000..6cadeb3 --- /dev/null +++ b/src/assets/imgs/SVGs/MenuHamburguer.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/imgs/SVGs/Twitter.svg b/src/assets/imgs/SVGs/Twitter.svg new file mode 100644 index 0000000..124d073 --- /dev/null +++ b/src/assets/imgs/SVGs/Twitter.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/imgs/SVGs/Vector.svg b/src/assets/imgs/SVGs/Vector.svg new file mode 100644 index 0000000..dc66ca6 --- /dev/null +++ b/src/assets/imgs/SVGs/Vector.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/imgs/SVGs/Vtex-logo.svg b/src/assets/imgs/SVGs/Vtex-logo.svg new file mode 100644 index 0000000..0c1babb --- /dev/null +++ b/src/assets/imgs/SVGs/Vtex-logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/imgs/SVGs/YouTube.svg b/src/assets/imgs/SVGs/YouTube.svg new file mode 100644 index 0000000..33d4455 --- /dev/null +++ b/src/assets/imgs/SVGs/YouTube.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/imgs/SVGs/arrow-point-to-right.svg b/src/assets/imgs/SVGs/arrow-point-to-right.svg new file mode 100644 index 0000000..d38e598 --- /dev/null +++ b/src/assets/imgs/SVGs/arrow-point-to-right.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/imgs/SVGs/credit-cards/Boleto.svg b/src/assets/imgs/SVGs/credit-cards/Boleto.svg new file mode 100644 index 0000000..208e289 --- /dev/null +++ b/src/assets/imgs/SVGs/credit-cards/Boleto.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/imgs/SVGs/credit-cards/Diners.svg b/src/assets/imgs/SVGs/credit-cards/Diners.svg new file mode 100644 index 0000000..8f15b92 --- /dev/null +++ b/src/assets/imgs/SVGs/credit-cards/Diners.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/imgs/SVGs/credit-cards/Elo.svg b/src/assets/imgs/SVGs/credit-cards/Elo.svg new file mode 100644 index 0000000..cb44a70 --- /dev/null +++ b/src/assets/imgs/SVGs/credit-cards/Elo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/imgs/SVGs/credit-cards/Hiper.svg b/src/assets/imgs/SVGs/credit-cards/Hiper.svg new file mode 100644 index 0000000..81f4156 --- /dev/null +++ b/src/assets/imgs/SVGs/credit-cards/Hiper.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/imgs/SVGs/credit-cards/Master.svg b/src/assets/imgs/SVGs/credit-cards/Master.svg new file mode 100644 index 0000000..4abe694 --- /dev/null +++ b/src/assets/imgs/SVGs/credit-cards/Master.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/imgs/SVGs/credit-cards/Pagseguro.svg b/src/assets/imgs/SVGs/credit-cards/Pagseguro.svg new file mode 100644 index 0000000..3faea49 --- /dev/null +++ b/src/assets/imgs/SVGs/credit-cards/Pagseguro.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/imgs/SVGs/credit-cards/Visa.svg b/src/assets/imgs/SVGs/credit-cards/Visa.svg new file mode 100644 index 0000000..d8703a3 --- /dev/null +++ b/src/assets/imgs/SVGs/credit-cards/Visa.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/imgs/SVGs/credit-cards/vtex-pci-200.svg b/src/assets/imgs/SVGs/credit-cards/vtex-pci-200.svg new file mode 100644 index 0000000..d2d2425 --- /dev/null +++ b/src/assets/imgs/SVGs/credit-cards/vtex-pci-200.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/imgs/SVGs/house-icon.svg b/src/assets/imgs/SVGs/house-icon.svg new file mode 100644 index 0000000..7d137cd --- /dev/null +++ b/src/assets/imgs/SVGs/house-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/imgs/SVGs/minicart_desktop.svg b/src/assets/imgs/SVGs/minicart_desktop.svg new file mode 100644 index 0000000..19dd15b --- /dev/null +++ b/src/assets/imgs/SVGs/minicart_desktop.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/imgs/SVGs/minicart_mobile.svg b/src/assets/imgs/SVGs/minicart_mobile.svg new file mode 100644 index 0000000..165d30e --- /dev/null +++ b/src/assets/imgs/SVGs/minicart_mobile.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/imgs/SVGs/search-icon-desktop.svg b/src/assets/imgs/SVGs/search-icon-desktop.svg new file mode 100644 index 0000000..3536ff1 --- /dev/null +++ b/src/assets/imgs/SVGs/search-icon-desktop.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/imgs/SVGs/search-icon.svg b/src/assets/imgs/SVGs/search-icon.svg new file mode 100644 index 0000000..9455c4d --- /dev/null +++ b/src/assets/imgs/SVGs/search-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/imgs/SVGs/whatsapp.svg b/src/assets/imgs/SVGs/whatsapp.svg new file mode 100644 index 0000000..2314673 --- /dev/null +++ b/src/assets/imgs/SVGs/whatsapp.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/imgs/SVGs/wpp-group.svg b/src/assets/imgs/SVGs/wpp-group.svg new file mode 100644 index 0000000..8db70ee --- /dev/null +++ b/src/assets/imgs/SVGs/wpp-group.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + +