diff --git a/react-ts/src/Pages/Home/Home.tsx b/react-ts/src/Pages/Home/Home.tsx
index 943722c..b2cfb3f 100644
--- a/react-ts/src/Pages/Home/Home.tsx
+++ b/react-ts/src/Pages/Home/Home.tsx
@@ -1,11 +1,19 @@
import Header from '../../components/Header/Header'
import HeaderMobile from '../../components/HeaderMobile/HeaderMobile'
+import BreadCrumb from '../../components/BreadCrumb/BreadCrumb'
+import NewsLetter from '../../components/NewsLetter/NewsLetter'
+import FooterLinks from '../../components/FooterLinks/FooterLinks'
+import Footer from '../../components/Footer/Footer'
const Home = () => {
return (
<>
-
-
+
+
+
+
+
+
>
)
}
diff --git a/react-ts/src/assets/images/AmericaCard.svg b/react-ts/src/assets/images/AmericaCard.svg
new file mode 100644
index 0000000..5956357
--- /dev/null
+++ b/react-ts/src/assets/images/AmericaCard.svg
@@ -0,0 +1,9 @@
+
diff --git a/react-ts/src/assets/images/AmericaCardMobile.svg b/react-ts/src/assets/images/AmericaCardMobile.svg
new file mode 100644
index 0000000..bbeb0c1
--- /dev/null
+++ b/react-ts/src/assets/images/AmericaCardMobile.svg
@@ -0,0 +1,9 @@
+
diff --git a/react-ts/src/assets/images/Boleto.svg b/react-ts/src/assets/images/Boleto.svg
new file mode 100644
index 0000000..5d80109
--- /dev/null
+++ b/react-ts/src/assets/images/Boleto.svg
@@ -0,0 +1,9 @@
+
diff --git a/react-ts/src/assets/images/BoletoMobile.svg b/react-ts/src/assets/images/BoletoMobile.svg
new file mode 100644
index 0000000..09e0e61
--- /dev/null
+++ b/react-ts/src/assets/images/BoletoMobile.svg
@@ -0,0 +1,9 @@
+
diff --git a/react-ts/src/assets/images/Developed-by.svg b/react-ts/src/assets/images/Developed-by.svg
new file mode 100644
index 0000000..2f242a1
Binary files /dev/null and b/react-ts/src/assets/images/Developed-by.svg differ
diff --git a/react-ts/src/assets/images/EloCard.svg b/react-ts/src/assets/images/EloCard.svg
new file mode 100644
index 0000000..b93be6f
--- /dev/null
+++ b/react-ts/src/assets/images/EloCard.svg
@@ -0,0 +1,9 @@
+
diff --git a/react-ts/src/assets/images/EloCardMobile.svg b/react-ts/src/assets/images/EloCardMobile.svg
new file mode 100644
index 0000000..623678a
--- /dev/null
+++ b/react-ts/src/assets/images/EloCardMobile.svg
@@ -0,0 +1,9 @@
+
diff --git a/react-ts/src/assets/images/HiperCard.svg b/react-ts/src/assets/images/HiperCard.svg
new file mode 100644
index 0000000..7a7474f
--- /dev/null
+++ b/react-ts/src/assets/images/HiperCard.svg
@@ -0,0 +1,9 @@
+
diff --git a/react-ts/src/assets/images/HiperCardMobile.svg b/react-ts/src/assets/images/HiperCardMobile.svg
new file mode 100644
index 0000000..6b0ba29
--- /dev/null
+++ b/react-ts/src/assets/images/HiperCardMobile.svg
@@ -0,0 +1,9 @@
+
diff --git a/react-ts/src/assets/images/Instagram.svg b/react-ts/src/assets/images/Instagram.svg
new file mode 100644
index 0000000..7b26327
--- /dev/null
+++ b/react-ts/src/assets/images/Instagram.svg
@@ -0,0 +1,18 @@
+
diff --git a/react-ts/src/assets/images/Linkedin.svg b/react-ts/src/assets/images/Linkedin.svg
new file mode 100644
index 0000000..7e94d4e
--- /dev/null
+++ b/react-ts/src/assets/images/Linkedin.svg
@@ -0,0 +1,18 @@
+
diff --git a/react-ts/src/assets/images/M3.svg b/react-ts/src/assets/images/M3.svg
new file mode 100644
index 0000000..cf041b8
--- /dev/null
+++ b/react-ts/src/assets/images/M3.svg
@@ -0,0 +1,4 @@
+
diff --git a/react-ts/src/assets/images/MasterCard.svg b/react-ts/src/assets/images/MasterCard.svg
new file mode 100644
index 0000000..f10d568
--- /dev/null
+++ b/react-ts/src/assets/images/MasterCard.svg
@@ -0,0 +1,9 @@
+
diff --git a/react-ts/src/assets/images/MasterCardMobile.svg b/react-ts/src/assets/images/MasterCardMobile.svg
new file mode 100644
index 0000000..eb98d23
--- /dev/null
+++ b/react-ts/src/assets/images/MasterCardMobile.svg
@@ -0,0 +1,9 @@
+
diff --git a/react-ts/src/assets/images/MasterCardPNG.png b/react-ts/src/assets/images/MasterCardPNG.png
new file mode 100644
index 0000000..792a73b
Binary files /dev/null and b/react-ts/src/assets/images/MasterCardPNG.png differ
diff --git a/react-ts/src/assets/images/PayPal.svg b/react-ts/src/assets/images/PayPal.svg
new file mode 100644
index 0000000..3c14215
--- /dev/null
+++ b/react-ts/src/assets/images/PayPal.svg
@@ -0,0 +1,9 @@
+
diff --git a/react-ts/src/assets/images/PayPalMobile.svg b/react-ts/src/assets/images/PayPalMobile.svg
new file mode 100644
index 0000000..9550baf
--- /dev/null
+++ b/react-ts/src/assets/images/PayPalMobile.svg
@@ -0,0 +1,9 @@
+
diff --git a/react-ts/src/assets/images/Twitter.svg b/react-ts/src/assets/images/Twitter.svg
new file mode 100644
index 0000000..453bbbd
--- /dev/null
+++ b/react-ts/src/assets/images/Twitter.svg
@@ -0,0 +1,11 @@
+
diff --git a/react-ts/src/assets/images/VisaCard.svg b/react-ts/src/assets/images/VisaCard.svg
new file mode 100644
index 0000000..77a4de3
--- /dev/null
+++ b/react-ts/src/assets/images/VisaCard.svg
@@ -0,0 +1,9 @@
+
diff --git a/react-ts/src/assets/images/VisaCardMobile.svg b/react-ts/src/assets/images/VisaCardMobile.svg
new file mode 100644
index 0000000..aa2346a
--- /dev/null
+++ b/react-ts/src/assets/images/VisaCardMobile.svg
@@ -0,0 +1,9 @@
+
diff --git a/react-ts/src/assets/images/Vtex.svg b/react-ts/src/assets/images/Vtex.svg
new file mode 100644
index 0000000..5ff31f1
--- /dev/null
+++ b/react-ts/src/assets/images/Vtex.svg
@@ -0,0 +1,7 @@
+
diff --git a/react-ts/src/assets/images/YouTube.svg b/react-ts/src/assets/images/YouTube.svg
new file mode 100644
index 0000000..8a0dbf5
--- /dev/null
+++ b/react-ts/src/assets/images/YouTube.svg
@@ -0,0 +1,11 @@
+
diff --git a/react-ts/src/assets/images/arrowRight.svg b/react-ts/src/assets/images/arrowRight.svg
new file mode 100644
index 0000000..a8a0fcc
--- /dev/null
+++ b/react-ts/src/assets/images/arrowRight.svg
@@ -0,0 +1,10 @@
+
diff --git a/react-ts/src/assets/images/facebook.svg b/react-ts/src/assets/images/facebook.svg
new file mode 100644
index 0000000..2a97d60
--- /dev/null
+++ b/react-ts/src/assets/images/facebook.svg
@@ -0,0 +1,16 @@
+
diff --git a/react-ts/src/assets/images/home.svg b/react-ts/src/assets/images/home.svg
new file mode 100644
index 0000000..898d772
--- /dev/null
+++ b/react-ts/src/assets/images/home.svg
@@ -0,0 +1,10 @@
+
diff --git a/react-ts/src/assets/images/seta.svg b/react-ts/src/assets/images/seta.svg
new file mode 100644
index 0000000..1bab44a
--- /dev/null
+++ b/react-ts/src/assets/images/seta.svg
@@ -0,0 +1,3 @@
+
diff --git a/react-ts/src/assets/images/vtex-pci.svg b/react-ts/src/assets/images/vtex-pci.svg
new file mode 100644
index 0000000..d2d6925
--- /dev/null
+++ b/react-ts/src/assets/images/vtex-pci.svg
@@ -0,0 +1,9 @@
+
diff --git a/react-ts/src/assets/images/vtex-pciMobile.svg b/react-ts/src/assets/images/vtex-pciMobile.svg
new file mode 100644
index 0000000..23acac6
--- /dev/null
+++ b/react-ts/src/assets/images/vtex-pciMobile.svg
@@ -0,0 +1,9 @@
+
diff --git a/react-ts/src/assets/images/whatsap.svg b/react-ts/src/assets/images/whatsap.svg
new file mode 100644
index 0000000..15eb2c9
--- /dev/null
+++ b/react-ts/src/assets/images/whatsap.svg
@@ -0,0 +1,4 @@
+
diff --git a/react-ts/src/components/BreadCrumb/BreadCrumb.module.scss b/react-ts/src/components/BreadCrumb/BreadCrumb.module.scss
new file mode 100644
index 0000000..678ec45
--- /dev/null
+++ b/react-ts/src/components/BreadCrumb/BreadCrumb.module.scss
@@ -0,0 +1,33 @@
+@import '../../styles/utils/Variables.scss';
+
+.container-breadCrumb {
+ display: flex;
+ align-items: center;
+ column-gap: 8px;
+ padding: 29px 100px 0;
+ margin-bottom: 80.75px;
+ p {
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 14px;
+ color: $color-grey1;
+ text-transform: uppercase;
+ }
+}
+
+@media only screen and (min-width: 2500px) {
+ .container-breadCrumb {
+ &__house {
+ width: 31.25px;
+ }
+ &__seta {
+ width: 15.62px;
+ }
+ p {
+ font-size: 24px;
+ line-height: 28px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/react-ts/src/components/BreadCrumb/BreadCrumb.tsx b/react-ts/src/components/BreadCrumb/BreadCrumb.tsx
new file mode 100644
index 0000000..1a7b47a
--- /dev/null
+++ b/react-ts/src/components/BreadCrumb/BreadCrumb.tsx
@@ -0,0 +1,17 @@
+import styles from './BreadCrumb.module.scss';
+
+import Home from '../../assets/images/home.svg';
+import ArrowRight from '../../assets/images/arrowRight.svg';
+
+const BreadCrumb = () => {
+ return (
+
+
+
+
institucional
+
+ )
+}
+
+
+export default BreadCrumb;
\ No newline at end of file
diff --git a/react-ts/src/components/Footer/Footer.module.scss b/react-ts/src/components/Footer/Footer.module.scss
new file mode 100644
index 0000000..b58a84f
--- /dev/null
+++ b/react-ts/src/components/Footer/Footer.module.scss
@@ -0,0 +1,125 @@
+@import '../../styles/utils/Variables.scss';
+
+.footer {
+ background-color: $color-black1;
+ padding: 20px 100px;
+ &__container {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ &__text {
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 10px;
+ line-height: 12px;
+ text-transform: capitalize;
+ color: $color-white1;
+ max-width: 243px;
+ width: 100%;
+ }
+ &__payments {
+ display: flex;
+ column-gap: 12px;
+ img {
+ &:nth-child(8) {
+ border-left: 1px solid $color-grey1;
+ padding-left: 12px;
+ }
+ }
+ }
+ &__text2 {
+ display: flex;
+ align-items: center;
+ column-gap: 13px;
+ p {
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 10px;
+ line-height: 12px;
+ text-transform: capitalize;
+ color: $color-white1;
+ }
+ }
+ }
+ &__contact {
+ display: none;
+ }
+}
+
+@media only screen and (max-width: 1024px) {
+ .footer {
+ padding: 15px 16px;
+ display: flex;
+ justify-content: space-between;
+ &__container {
+ display: flex;
+ align-items: unset;
+ justify-content: unset;
+ flex-direction: column;
+ row-gap: 15px;
+ &__text {
+ display: flex;
+ order: 2;
+ }
+ &__payments{
+ display: none;
+ }
+ &__text2 {
+ order: 3;
+ }
+ }
+ &__contact {
+ display: flex;
+ flex-direction: column;
+ row-gap: 5px;
+ position: absolute;
+ right: 16px;
+ }
+ }
+}
+
+@media only screen and (min-width: 2500px) {
+ .footer {
+ background-color: $color-black1;
+ padding: 24.5px 100px;
+ &__container {
+ &__text {
+ font-size: 20px;
+ line-height: 23px;
+ max-width: 467px;
+ }
+ &__payments {
+ display: flex;
+ column-gap: 12px;
+ img {
+ &:nth-child(8) {
+ border-left: 1px solid $color-grey1;
+ padding-left: 12px;
+ }
+ }
+ }
+ &__text2 {
+ display: flex;
+ align-items: center;
+ column-gap: 12px;
+ p {
+ font-size: 20px;
+ line-height: 23px;
+ }
+ img {
+ &:nth-child(2) {
+ width: 84.22px;
+ }
+ &:nth-child(4) {
+ width: 54.95px;
+ }
+ }
+ }
+ }
+ &__contact {
+ display: none;
+ }
+ }
+}
\ No newline at end of file
diff --git a/react-ts/src/components/Footer/Footer.tsx b/react-ts/src/components/Footer/Footer.tsx
new file mode 100644
index 0000000..755642f
--- /dev/null
+++ b/react-ts/src/components/Footer/Footer.tsx
@@ -0,0 +1,53 @@
+import styles from './Footer.module.scss';
+
+import ScrollTop from '../ScrollTop/ScrollTop';
+import Whatsap from '../Whatsap/WhatsApp';
+import FooterCardsMobile from './FooterCardsMobile';
+
+import MasterCard from '../../assets/images/MasterCard.svg';
+import VisaCard from '../../assets/images/VisaCard.svg';
+import AmericaCard from '../../assets/images/AmericaCard.svg';
+import EloCard from '../../assets/images/EloCard.svg';
+import HiperCard from '../../assets/images/HiperCard.svg';
+import PayPal from '../../assets/images/PayPal.svg';
+import Boleto from '../../assets/images/Boleto.svg';
+import VtexPci from '../../assets/images/vtex-pci.svg';
+import Vtex from '../../assets/images/vtex.svg';
+import M3 from '../../assets/images/M3.svg';
+
+const Footer = () => {
+ return (
+
+ )
+}
+
+
+export default Footer;
\ No newline at end of file
diff --git a/react-ts/src/components/Footer/FooterCardsMobile.module.scss b/react-ts/src/components/Footer/FooterCardsMobile.module.scss
new file mode 100644
index 0000000..f562328
--- /dev/null
+++ b/react-ts/src/components/Footer/FooterCardsMobile.module.scss
@@ -0,0 +1,32 @@
+@import '../../styles/utils/Variables.scss';
+.payments {
+ display: none;
+ align-items: center;
+ column-gap: 12px;
+ img {
+ &:nth-child(8) {
+ border-left: 1px solid $color-grey1;
+ padding-left: 12px;
+ }
+ }
+}
+
+@media only screen and (max-width: 1024px) {
+ .payments {
+ display: flex;
+ align-items: center;
+ column-gap: 12px;
+ img {
+ &:nth-child(8) {
+ border-left: 1px solid $color-grey1;
+ padding-left: 12px;
+ }
+ }
+ }
+}
+
+
+
+
+
+
diff --git a/react-ts/src/components/Footer/FooterCardsMobile.tsx b/react-ts/src/components/Footer/FooterCardsMobile.tsx
new file mode 100644
index 0000000..9213f7e
--- /dev/null
+++ b/react-ts/src/components/Footer/FooterCardsMobile.tsx
@@ -0,0 +1,29 @@
+import styles from './FooterCardsMobile.module.scss';
+
+import MasterCard from '../../assets/images/MasterCardMobile.svg';
+import VisaCard from '../../assets/images/VisaCardMobile.svg';
+import AmericaCard from '../../assets/images/AmericaCardMobile.svg';
+import EloCard from '../../assets/images/EloCardMobile.svg';
+import HiperCard from '../../assets/images/HiperCardMobile.svg';
+import PayPal from '../../assets/images/PayPalMobile.svg';
+import Boleto from '../../assets/images/BoletoMobile.svg';
+import VtexPci from '../../assets/images/vtex-pciMobile.svg';
+
+
+const FooterCardsMobile = () => {
+ return (
+
+ )
+}
+
+
+export default FooterCardsMobile;
\ No newline at end of file
diff --git a/react-ts/src/components/FooterLinks/FooterLinks.module.scss b/react-ts/src/components/FooterLinks/FooterLinks.module.scss
new file mode 100644
index 0000000..0edcc4d
--- /dev/null
+++ b/react-ts/src/components/FooterLinks/FooterLinks.module.scss
@@ -0,0 +1,107 @@
+@import '../../styles/utils/Variables.scss';
+
+.container {
+ display: flex;
+ justify-content: space-between;
+ padding: 50px 100px;
+ border-top: 1px solid $color-black1;
+ &__wrapper-links {
+ display: flex;
+ column-gap: 121px;
+ &__ul {
+ display: flex;
+ flex-direction: column;
+ row-gap: 12px;
+ h1 {
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 16px;
+ text-transform: uppercase;
+ color: $color-black2;
+ }
+ b {
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 500;
+ font-size: 12px;
+ line-height: 14px;
+ text-transform: capitalize;
+ color: $color-black2;
+ }
+ a {
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 14px;
+ text-transform: capitalize;
+ color: $color-black2;
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+ }
+ &__social {
+ display: flex;
+ flex-direction: column;
+ row-gap: 12px;
+ &__picture {
+ display: flex;
+ column-gap: 10px;
+ }
+ a {
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+ color: $color-black2;
+ }
+ }
+ &__contact {
+ position: absolute;
+ right: 0;
+ margin-right: 16px;
+ }
+}
+
+@media only screen and (min-width: 2500px) {
+ .container {
+ &__wrapper-links {
+ display: flex;
+ column-gap: 293px;
+ &__ul {
+ display: flex;
+ flex-direction: column;
+ row-gap: 12px;
+ h1 {
+ font-size: 28px;
+ line-height: 33px;
+ }
+ b {
+ font-size: 24px;
+ line-height: 28px;
+ }
+ a {
+ font-size: 24px;
+ line-height: 28px;
+ }
+ }
+ }
+ &__social {
+ &__picture {
+ img {
+ width: 70px;
+ height: 70px;
+ }
+ }
+ a {
+ font-size: 28px;
+ line-height: 33px;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/react-ts/src/components/FooterLinks/FooterLinks.tsx b/react-ts/src/components/FooterLinks/FooterLinks.tsx
new file mode 100644
index 0000000..7ed0a40
--- /dev/null
+++ b/react-ts/src/components/FooterLinks/FooterLinks.tsx
@@ -0,0 +1,95 @@
+import styles from './FooterLinks.module.scss';
+
+import ScrollTop from '../ScrollTop/ScrollTop';
+import Whatsap from '../Whatsap/WhatsApp';
+
+import Facebook from '../../assets/images/Facebook.svg';
+import Instagram from '../../assets/images/Instagram.svg';
+import Twitter from '../../assets/images/Twitter.svg';
+import YouTube from '../../assets/images/YouTube.svg';
+import Linkedin from '../../assets/images/Linkedin.svg';
+
+const FooterLinks = () => {
+ return (
+
+ )
+}
+
+export default FooterLinks;
\ No newline at end of file
diff --git a/react-ts/src/components/NewsLetter/NewsLetter.module.scss b/react-ts/src/components/NewsLetter/NewsLetter.module.scss
new file mode 100644
index 0000000..a3438ab
--- /dev/null
+++ b/react-ts/src/components/NewsLetter/NewsLetter.module.scss
@@ -0,0 +1,128 @@
+@import '../../styles/utils/Variables.scss';
+
+.containerNewsLetter {
+ padding: 16px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ border-top: 1px solid $color-black1;
+ &__wrapper {
+ display: flex;
+ flex-direction: column;
+ row-gap: 8px;
+ h1 {
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 500;
+ font-size: 18px;
+ line-height: 21px;
+ letter-spacing: 0.05em;
+ text-transform: uppercase;
+ color: $color-black1;
+ }
+ &__input-button {
+ display: flex;
+ align-items: center;
+ column-gap: 8px;
+ input {
+ width: 360px;
+ height: 42px;
+ padding: 13px 16px;
+ border: 1px solid $color-grey5;
+ border-radius: 4px;
+ color: $color-grey5;
+ font-size: 14px;
+ &::placeholder {
+ color: $color-grey5;
+ font-family: $font-family;
+ }
+ }
+ button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: $color-black1;
+ padding: 14px 20px;
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 700;
+ font-size: 12px;
+ text-transform: uppercase;
+ line-height: 14px;
+ text-align: center;
+ letter-spacing: 0.05em;
+ color: $color-white1;
+ width: 126px;
+ height: 42px;
+ border-radius: 4px;
+ border: none;
+ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+ cursor: pointer;
+ }
+ }
+ }
+}
+
+@media only screen and (max-width: 1025px) {
+ .containerNewsLetter {
+ align-items: unset;
+ flex-direction: unset;
+ &__wrapper {
+ max-width: 992px;
+ width: 100%;
+ h1 {
+ font-size: 14px;
+ line-height: 16px;
+ }
+ &__input-button {
+ display: flex;
+ align-items: center;
+ row-gap: 16px;
+ input {
+ max-width: 992px;
+ width: 100%;
+ height: 50px;
+ padding: 13px 16px;
+ border: 1px solid $color-grey5;
+ border-radius: 4px;
+ color: $color-grey5;
+ font-size: 14px;
+ &::placeholder {
+ color: $color-grey5;
+ font-family: $font-family;
+ }
+ }
+ button {
+ max-width: 992px;
+ width: 100%;
+ height: 50px;
+ }
+ }
+ }
+ }
+}
+
+@media only screen and (min-width: 2500px) {
+ .containerNewsLetter {
+ &__wrapper {
+ h1 {
+ font-size: 36px;
+ line-height: 42px;
+ }
+ &__input-button {
+ input {
+ width: 668px;
+ height: 59px;
+ font-size: 28px;
+ }
+ button {
+ font-size: 24px;
+ line-height: 28px;
+ width: 246px;
+ height: 59px;
+ cursor: pointer;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/react-ts/src/components/NewsLetter/NewsLetter.tsx b/react-ts/src/components/NewsLetter/NewsLetter.tsx
new file mode 100644
index 0000000..b2d59c0
--- /dev/null
+++ b/react-ts/src/components/NewsLetter/NewsLetter.tsx
@@ -0,0 +1,17 @@
+import styles from './NewsLetter.module.scss';
+
+const NewsLetter = () => {
+ return (
+
+
+
Assine nossa Newsletter
+
+
+
+
+
+
+ )
+}
+
+export default NewsLetter
diff --git a/react-ts/src/components/ScrollTop/ScrollTop.module.scss b/react-ts/src/components/ScrollTop/ScrollTop.module.scss
new file mode 100644
index 0000000..af7c0d7
--- /dev/null
+++ b/react-ts/src/components/ScrollTop/ScrollTop.module.scss
@@ -0,0 +1,24 @@
+@import '../../styles/utils/Variables.scss';
+
+
+.button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 34px;
+ height: 34px;
+ border-radius: 50%;
+ border: none;
+ background-color: $color-grey1;
+ cursor: pointer;
+}
+
+@media only screen and (min-width: 2500px) {
+ .button {
+ width: 66px;
+ height: 66px;
+ img {
+ width: 24px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/react-ts/src/components/ScrollTop/ScrollTop.tsx b/react-ts/src/components/ScrollTop/ScrollTop.tsx
new file mode 100644
index 0000000..240fe2f
--- /dev/null
+++ b/react-ts/src/components/ScrollTop/ScrollTop.tsx
@@ -0,0 +1,21 @@
+import styles from './ScrollTop.module.scss';
+
+import seta from '../../assets/images/seta.svg';
+
+const scrollToTop = () => {
+ window.scrollTo({
+ top: 0,
+ left: 0,
+ behavior: "smooth",
+ });
+};
+
+
+const ScrollTop = () => {
+ return (
+
+ )
+}
+
+
+export default ScrollTop;
\ No newline at end of file
diff --git a/react-ts/src/components/Whatsap/WhatsApp.module.scss b/react-ts/src/components/Whatsap/WhatsApp.module.scss
new file mode 100644
index 0000000..18ec86e
--- /dev/null
+++ b/react-ts/src/components/Whatsap/WhatsApp.module.scss
@@ -0,0 +1,8 @@
+@media only screen and (min-width: 2500px) {
+ .img{
+ img {
+ width: 67px;
+ height: 66px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/react-ts/src/components/Whatsap/WhatsApp.tsx b/react-ts/src/components/Whatsap/WhatsApp.tsx
new file mode 100644
index 0000000..1dbfa15
--- /dev/null
+++ b/react-ts/src/components/Whatsap/WhatsApp.tsx
@@ -0,0 +1,12 @@
+import styles from './WhatsApp.module.scss';
+
+
+import WhatsapLogo from '../../assets/images/whatsap.svg';
+
+const WhatsApp = () => {
+ return (
+
+ )
+}
+
+export default WhatsApp;
\ No newline at end of file
diff --git a/react-ts/src/styles/utils/Variables.scss b/react-ts/src/styles/utils/Variables.scss
index 208080c..2e2766e 100644
--- a/react-ts/src/styles/utils/Variables.scss
+++ b/react-ts/src/styles/utils/Variables.scss
@@ -9,8 +9,10 @@ $color-grey1: #c4c4c4;
$color-grey2: #b9b7b7;
$color-grey3: #c6c6c6c6;
$color-grey4: #7d7d7d;
+$color-grey5: #E5E5E5;
$color-black1: #000000;
+$color-black2: #303030;
//fonts
$font-family: 'Roboto', sans-serif;