From 151919fba5c794b90487cd19083b527d39f71805 Mon Sep 17 00:00:00 2001
From: Sabrina Miranda <sabrina.miranda1@bol.com.br>
Date: Wed, 11 Jan 2023 16:01:18 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20Cria=20o=20componente=20para=20o=20link?=
 =?UTF-8?q?=20de=20WhatsApp=20e=20do=20bot=C3=A3o=20ScrollTop?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../WhatsAppAndScrollTop.module.scss          | 67 +++++++++++++++++++
 .../WhatsAppAndScrollTop.tsx                  | 31 +++++++++
 .../WhatsAppAndScrollTop/assets/arrow.svg     |  3 +
 .../WhatsAppAndScrollTop/assets/whatsapp.svg  | 11 +++
 src/pages/Home.tsx                            |  2 +
 5 files changed, 114 insertions(+)
 create mode 100644 src/components/WhatsAppAndScrollTop/WhatsAppAndScrollTop.module.scss
 create mode 100644 src/components/WhatsAppAndScrollTop/WhatsAppAndScrollTop.tsx
 create mode 100644 src/components/WhatsAppAndScrollTop/assets/arrow.svg
 create mode 100644 src/components/WhatsAppAndScrollTop/assets/whatsapp.svg

diff --git a/src/components/WhatsAppAndScrollTop/WhatsAppAndScrollTop.module.scss b/src/components/WhatsAppAndScrollTop/WhatsAppAndScrollTop.module.scss
new file mode 100644
index 0000000..8d5373a
--- /dev/null
+++ b/src/components/WhatsAppAndScrollTop/WhatsAppAndScrollTop.module.scss
@@ -0,0 +1,67 @@
+@use '../../variables';
+
+.buttons {
+    display: flex;
+    flex-direction: column ;
+    position: fixed;
+    right: 16px;
+    bottom: 190px;
+
+    @media (min-width: 2500px) {
+        bottom: 229px;
+    }
+
+    @media (max-width: 1024px) {
+        bottom: 51px;
+    }
+
+    @media (max-width: 375px) {
+        bottom: 29px;
+    }
+
+    &__whatsaspp {
+        margin-bottom: 5px;
+
+        @media (min-width: 2500px) {
+            width: 66px;
+        }
+
+        &:hover {
+            filter: brightness(90%) ;
+        }
+    }
+
+    &__scrolltop {
+           &__circle {
+            width: 34px;
+            height: 34px;
+            background-color: variables.$gray-400;
+            border: none;
+            border-radius: 50%;
+            position: relative;
+    
+            @media (min-width: 2500px) {
+                width: 66px;
+                height: 66px;
+            }
+    
+            &:hover {
+                filter: brightness(90%) ;
+            }
+        }
+    
+        &__arrow {
+            position: absolute;
+            top: 13px;
+            right: 11px;
+    
+            @media (min-width: 2500px) {
+                width: 24px;
+                height: 13px;
+                top: 25px;
+                right: 21px;
+            }
+        }
+    }
+
+}
diff --git a/src/components/WhatsAppAndScrollTop/WhatsAppAndScrollTop.tsx b/src/components/WhatsAppAndScrollTop/WhatsAppAndScrollTop.tsx
new file mode 100644
index 0000000..7e9630d
--- /dev/null
+++ b/src/components/WhatsAppAndScrollTop/WhatsAppAndScrollTop.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+
+import imgWhatsApp from "./assets/whatsapp.svg";
+import imgArrow from "./assets/arrow.svg";
+
+import styles from "./WhatsAppAndScrollTop.module.scss";
+
+const WhatsAppAndScrollTop = () => {
+
+    const scrollTop = () => {
+      window.scrollTo({
+        top: 0,
+        behavior: "smooth",
+      });
+    };
+
+    return (
+        <div className={styles["buttons"]}>
+            <a href="https://api.whatsapp.com/send?phone=5524000000000&text=Ol%C3%A1%2C%20gostaria%20de%20entrar%20em%20contato?"
+            target="_blank">
+                <img src={imgWhatsApp} alt="Logo WhatApp" className={styles["buttons__whatsaspp"]}/>
+            </a>
+
+            <button className={styles["buttons__scrolltop__circle"]} type="button" onClick={scrollTop}>
+                <img src={imgArrow} alt="Imagem Seta Para Cima" className={styles["buttons__scrolltop__arrow"]}/>
+            </button>
+        </div>
+    );
+}
+
+export{ WhatsAppAndScrollTop };
diff --git a/src/components/WhatsAppAndScrollTop/assets/arrow.svg b/src/components/WhatsAppAndScrollTop/assets/arrow.svg
new file mode 100644
index 0000000..a217195
--- /dev/null
+++ b/src/components/WhatsAppAndScrollTop/assets/arrow.svg
@@ -0,0 +1,3 @@
+<svg width="13" height="7" viewBox="0 0 13 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.6 6.13647C12.5989 6.24898 12.5519 6.36118 12.4588 6.44888L12.4587 6.44902C12.2574 6.63896 11.9216 6.63894 11.7204 6.44903L11.7204 6.44902L6.7744 1.78259L6.4999 1.5236L6.2254 1.78259L1.27968 6.44882C1.27966 6.44884 1.27964 6.44886 1.27962 6.44888C1.07811 6.63886 0.742449 6.63877 0.541181 6.44888L0.541122 6.44882C0.448342 6.36133 0.401297 6.24944 0.400026 6.13719C0.401078 6.02468 0.448119 5.91242 0.541189 5.82462L0.541192 5.82461L6.13082 0.550956C6.13085 0.550933 6.13087 0.55091 6.13089 0.550887C6.22923 0.458193 6.36162 0.408533 6.49988 0.408533C6.63821 0.408533 6.77079 0.458327 6.86907 0.55102C6.86908 0.551029 6.86909 0.551037 6.8691 0.551047L12.4587 5.82475L12.4588 5.82482C12.5516 5.9124 12.5987 6.02428 12.6 6.13647Z" fill="white" stroke="white" stroke-width="0.8"/>
+</svg>
diff --git a/src/components/WhatsAppAndScrollTop/assets/whatsapp.svg b/src/components/WhatsAppAndScrollTop/assets/whatsapp.svg
new file mode 100644
index 0000000..13b56b3
--- /dev/null
+++ b/src/components/WhatsAppAndScrollTop/assets/whatsapp.svg
@@ -0,0 +1,11 @@
+<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4095_717)">
+<path d="M17.0042 0H16.9958C7.62238 0 0 7.6245 0 17C0 20.7188 1.1985 24.1655 3.23638 26.9641L1.11775 33.2796L7.65213 31.1908C10.3403 32.9715 13.5469 34 17.0042 34C26.3776 34 34 26.3734 34 17C34 7.62663 26.3776 0 17.0042 0Z" fill="#4CAF50"/>
+<path d="M26.8961 24.0061C26.4859 25.1643 24.8582 26.1248 23.5598 26.4053C22.6716 26.5944 21.5113 26.7453 17.6055 25.126C12.6097 23.0563 9.39243 17.9796 9.14168 17.6503C8.90155 17.3209 7.12292 14.9621 7.12292 12.5226C7.12292 10.0831 8.3618 8.89527 8.86118 8.38527C9.2713 7.96664 9.94917 7.77539 10.5994 7.77539C10.8098 7.77539 10.9989 7.78602 11.1689 7.79452C11.6683 7.81577 11.9191 7.84552 12.2484 8.63389C12.6586 9.62202 13.6573 12.0615 13.7763 12.3123C13.8974 12.563 14.0186 12.903 13.8486 13.2324C13.6892 13.5724 13.5489 13.7233 13.2982 14.0123C13.0474 14.3013 12.8094 14.5223 12.5587 14.8325C12.3292 15.1024 12.0699 15.3914 12.3589 15.8908C12.6479 16.3795 13.6467 18.0094 15.1172 19.3184C17.0148 21.0078 18.5533 21.5475 19.1037 21.777C19.5138 21.947 20.0026 21.9066 20.3022 21.5879C20.6826 21.1778 21.1522 20.4978 21.6303 19.8284C21.9703 19.3481 22.3996 19.2886 22.8501 19.4586C23.3091 19.618 25.7379 20.8186 26.2373 21.0673C26.7367 21.318 27.0661 21.437 27.1872 21.6474C27.3062 21.8578 27.3062 22.8459 26.8961 24.0061Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_4095_717">
+<rect width="34" height="34" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 5828a4f..c492db5 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -6,6 +6,7 @@ import { HeaderTop } from '../components/HeaderTop/HeaderTop';
 import { HeaderBottom } from '../components/HeaderBottom/HeaderBottom';
 import { Newsletter } from '../components/Newsletter/Newsletter';
 import { FooterBottom } from '../components/FooterBottom/FooterBottom';
+import { WhatsAppAndScrollTop } from '../components/WhatsAppAndScrollTop/WhatsAppAndScrollTop';
 
 const Home = () => {
 
@@ -21,6 +22,7 @@ const Home = () => {
     <footer>
       <Newsletter />
       <FooterBottom />
+      <WhatsAppAndScrollTop />
     </footer>
     </>
   );