From 78fa78f8097be9056786f5886590fba3ac5add19 Mon Sep 17 00:00:00 2001
From: Izabela Balizardo <izah_rb@hotmail.com>
Date: Mon, 16 Jan 2023 23:34:01 -0300
Subject: [PATCH] feat: Adiciona newsletter

---
 .../newsletter/Newsletter.module.css          | 136 ++++++++++++++++++
 src/components/newsletter/Newsletter.tsx      |  33 +++++
 src/components/newsletter/NewsletterUp.tsx    |  20 +++
 3 files changed, 189 insertions(+)
 create mode 100644 src/components/newsletter/Newsletter.module.css
 create mode 100644 src/components/newsletter/Newsletter.tsx
 create mode 100644 src/components/newsletter/NewsletterUp.tsx

diff --git a/src/components/newsletter/Newsletter.module.css b/src/components/newsletter/Newsletter.module.css
new file mode 100644
index 0000000..d5a554e
--- /dev/null
+++ b/src/components/newsletter/Newsletter.module.css
@@ -0,0 +1,136 @@
+
+
+.input-news-container {
+    justify-content: center;
+    padding: 16px 0 16px;
+    max-width: 475px;
+    text-align: initial;
+    margin: 0 auto;
+    font-family: 'Roboto';
+}
+
+.input-news-title {
+    font-family: 'Roboto';
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 21px;
+    letter-spacing: 0.05em;
+    font-variant: small-caps;
+    color: #303030;
+}
+
+.input-email {
+    border-bottom: 1px solid #000000;
+    border-top: 1px solid #000000;
+    margin-top: -190px;
+}
+
+.input-button {
+    display: flex;
+    justify-content: center;
+    gap: 7px;
+}
+
+input::placeholder {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16px;
+    color: #C4C4C4;
+}
+
+.input-button button {
+    background: #000000;
+    border: #000000;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 4px;
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 14px;
+    height: 42px;
+    margin-top: 8px;
+    letter-spacing: 0.05em;
+    color: #FFFFFF;
+    padding: 14px 40px;
+    width: 126px;
+    
+}
+
+button:hover {
+    background-color: #000000;
+}
+
+button:active {
+    background-color: #000000;
+}
+
+.input-news {
+    border-radius: 4px;
+    border: 1px solid #E5E5E5;
+    width: 340px; 
+    height: 42px;
+    margin-top: 8px;
+    padding: 13px 16px;
+}
+
+.icon-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    top: 15px;
+    position: relative;
+    padding-right: 14px;
+}
+    
+.icon-wrapper img {
+    max-width: 37px;
+}
+
+@media screen and (max-width: 768px) {
+    .input-news-container {
+        margin: 21px 25px 103px 25px;
+    }
+
+    .input-button {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+    }
+
+    .input-news-title {
+        font-family: 'Roboto';
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 16px;
+        letter-spacing: 0.05em;
+        font-variant: small-caps;
+        color: #303030;
+    }
+
+    .input-news {
+        width: 326px;
+        height: 50px;
+        background: #FFFFFF;
+        border: 1px solid #C4C4C4;
+        margin-top: 12px;
+    }
+
+    .input-button button {
+        width: 326px;
+        height: 50px;
+    }
+
+    .input-email {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .icon-wrapper {
+        top: 250px;
+    }
+    
+}
\ No newline at end of file
diff --git a/src/components/newsletter/Newsletter.tsx b/src/components/newsletter/Newsletter.tsx
new file mode 100644
index 0000000..145ca08
--- /dev/null
+++ b/src/components/newsletter/Newsletter.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import styles from './Newsletter.module.css';
+
+import Whats from '../assets/img/whats-icon.png';
+// import Arrow_icon from '../assets/img/arrow.logo.png';
+import ScrollPage from './NewsletterUp';
+
+const Newsletter = () => {
+    return (
+        <div className={styles["news-container"]}>
+            <div className={styles["icon-wrapper-container"]}>
+                <div className={styles["icon-wrapper"]}>
+                    <a href="/"><img src={Whats} alt="WhatsApp" /></a>
+                    <ScrollPage/>
+                    {/* <a href="/"><img src={Arrow_icon} alt="Abrir" /></a> */}
+                </div>
+            </div>
+            <div className={styles["input-email"]}>
+                <div className={styles["input-news-container"]}>
+                    <label className={styles["input-news-title"]} htmlFor="email">ASSINE NOSSA NEWSLETTER</label>
+                    <div className={styles["input-button"]}>
+                        <input className={styles["input-news"]} placeholder="E-mail" type="text" />
+                        <button>ENVIAR</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+        
+}
+
+export default Newsletter;
\ No newline at end of file
diff --git a/src/components/newsletter/NewsletterUp.tsx b/src/components/newsletter/NewsletterUp.tsx
new file mode 100644
index 0000000..e416eb4
--- /dev/null
+++ b/src/components/newsletter/NewsletterUp.tsx
@@ -0,0 +1,20 @@
+import { useState } from "react"
+
+import Arrow_icon from '../assets/img/arrow-logo.png';
+
+export default function ScrollPage() {
+
+const [ pageYPosition, setPageYPosition ] = useState(0);
+
+function getPageYAfterScroll(){
+    setPageYPosition(window.scrollY);
+}
+
+window.addEventListener('scroll', getPageYAfterScroll);
+
+  return (
+    <div>
+        <a href="/"><img src={Arrow_icon} alt="Abrir" /></a>
+    </div>
+  )
+}
\ No newline at end of file