From 2ea4c62f845031c1458155ff4fd64b5ff42f169b Mon Sep 17 00:00:00 2001
From: Kieran Klukas <92754843+kcoderhtml@users.noreply.github.com>
Date: Fri, 22 Dec 2023 21:31:45 -0500
Subject: [PATCH 1/5] feat: move email form to the bottom of the page

---
 src/components/Email-Form.astro |  4 +---
 src/pages/index.astro           | 31 ++++++++++---------------------
 2 files changed, 11 insertions(+), 24 deletions(-)

diff --git a/src/components/Email-Form.astro b/src/components/Email-Form.astro
index a1bdee6..f452324 100644
--- a/src/components/Email-Form.astro
+++ b/src/components/Email-Form.astro
@@ -68,15 +68,13 @@
 
 <style>
   .emailform {
-    transform: translateY(33em);
-    visibility: hidden;
+    visibility: visible;
     position: absolute;
   }
 
   @media (max-width: 825px) {
     .emailform {
       position: absolute;
-      transform: translateY(-7em);
     }
   }
 
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 816761f..586b542 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -31,13 +31,11 @@ import "../styles/index.css";
             >
               Help Contribute
             </a>
-            <button type="button" class="home-button button" form-button
+            <button type="button" class="home-button button" id="email-form-button" form-button
               >Sign Up For Newsletter</button
             >
           </div>
         </div>
-        <EmailForm />
-        <span class="emailbr" id="emailbr"></span>
         <button class="chevron-button" id="chevron-button"></button>
         <div class="home-features">
           <div class="home-container1">
@@ -137,32 +135,23 @@ import "../styles/index.css";
       </div>
     </div>
   </main>
+  <EmailForm />
   <Notification />
 </Layout>
 
 <script>
-  const buttons = document.querySelectorAll("[form-button]");
+  const button = document.getElementById("email-form-button");
   const scroll = document.getElementById("chevron-button");
   const form = document.getElementById("email-form");
-  const emailbr = document.getElementById("emailbr");
 
-  form.style.visibility = "hidden";
-
-  // Add event listeners to fire confetti when a button is clicked.
-  buttons.forEach((button) => {
-    button.addEventListener("click", () => toggleForm());
+  button.addEventListener("click", () => {
+    // scroll to email form component
+    form.scrollIntoView({
+      behavior: "smooth",
+      block: "center",
+      inline: "nearest",
+    });
   });
-  function toggleForm() {
-    if (form.style.visibility == "hidden") {
-      form.style.visibility = "visible";
-      scroll.style.visibility = "hidden";
-      emailbr.classList.add("show");
-    } else {
-      form.style.visibility = "hidden";
-      scroll.style.visibility = "visible";
-      emailbr.classList.remove("show");
-    }
-  }
   scroll.addEventListener("click", () => {
     // scroll to one page down
     window.scrollBy({

From 259bec357fd515be003437edb6bd8c4ec1ce6303 Mon Sep 17 00:00:00 2001
From: Kieran Klukas <92754843+kcoderhtml@users.noreply.github.com>
Date: Fri, 22 Dec 2023 21:35:54 -0500
Subject: [PATCH 2/5] chore: remove css email br

---
 src/pages/index.astro | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 586b542..12e450d 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -163,11 +163,6 @@ import "../styles/index.css";
 </script>
 
 <style>
-  .emailbr {
-    display: block;
-    margin: 0px 0;
-  }
-
   @media (max-width: 825px) {
     .home-container {
       display: flex;
@@ -210,10 +205,5 @@ import "../styles/index.css";
       width: 100%;
       height: 100%;
     }
-
-    .emailbr.show {
-      display: block;
-      margin: 140px 0;
-    }
   }
 </style>

From 8425dc5ff3ff5298fb78ac8c8631d5613cc1cea0 Mon Sep 17 00:00:00 2001
From: Kieran Klukas <92754843+kcoderhtml@users.noreply.github.com>
Date: Fri, 22 Dec 2023 21:37:18 -0500
Subject: [PATCH 3/5] feat: add margin to form

---
 src/components/Email-Form.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Email-Form.astro b/src/components/Email-Form.astro
index f452324..e89fba1 100644
--- a/src/components/Email-Form.astro
+++ b/src/components/Email-Form.astro
@@ -69,7 +69,7 @@
 <style>
   .emailform {
     visibility: visible;
-    position: absolute;
+    margin-bottom: 2rem;
   }
 
   @media (max-width: 825px) {

From c22bf83f4682480e72fba1aea371ee2cb0be7504 Mon Sep 17 00:00:00 2001
From: Kieran Klukas <92754843+kcoderhtml@users.noreply.github.com>
Date: Fri, 22 Dec 2023 22:15:47 -0500
Subject: [PATCH 4/5] feat: made the features list not clip

---
 src/pages/index.astro | 2 +-
 src/styles/index.css  | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 12e450d..57f0752 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -163,7 +163,7 @@ import "../styles/index.css";
 </script>
 
 <style>
-  @media (max-width: 825px) {
+  @media (max-width: 1000px) {
     .home-container {
       display: flex;
       flex-direction: column;
diff --git a/src/styles/index.css b/src/styles/index.css
index 1bc213d..1d3512a 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -413,8 +413,7 @@
   }
 
   .home-container1 {
-    width: 531px;
-    padding-right: 13px;
+    width: auto;
   }
 }
 

From 632187301ecc85f4ca702bcd92545903c2c12de0 Mon Sep 17 00:00:00 2001
From: Kieran Klukas <92754843+kcoderhtml@users.noreply.github.com>
Date: Fri, 22 Dec 2023 22:44:44 -0500
Subject: [PATCH 5/5] feat: adjusted responsiveness

---
 src/pages/index.astro  |  56 ++++------------------
 src/styles/globals.css |  19 --------
 src/styles/index.css   | 105 ++++++++++++++++++++++++++++++++++-------
 3 files changed, 97 insertions(+), 83 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 57f0752..f7a9aeb 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -31,12 +31,17 @@ import "../styles/index.css";
             >
               Help Contribute
             </a>
-            <button type="button" class="home-button button" id="email-form-button" form-button
-              >Sign Up For Newsletter</button
+            <button
+              type="button"
+              class="home-button button"
+              id="email-form-button"
+              form-button>Sign Up For Newsletter</button
             >
           </div>
         </div>
-        <button class="chevron-button" id="chevron-button"></button>
+        <div class="chevron-container">
+          <button class="chevron-button" id="chevron-button"></button>
+        </div>
         <div class="home-features">
           <div class="home-container1">
             <div
@@ -162,48 +167,3 @@ import "../styles/index.css";
   });
 </script>
 
-<style>
-  @media (max-width: 1000px) {
-    .home-container {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-    }
-    .home-container1 {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-    }
-    .home-container2 {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-    }
-    .home-btn-group {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-    }
-    .home-text1 {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-    }
-    .home-features {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-    }
-    .home-lottie-node {
-      align-items: center;
-      width: 100%;
-      height: 100%;
-    }
-  }
-</style>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 1db956f..12ccf2d 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -113,22 +113,3 @@ img {
 html {
   scroll-behavior: smooth;
 }
-
-.hero {
-  width: 100%;
-  height: 757px;
-  display: flex;
-  padding: var(--dl-space-space-threeunits);
-  position: relative;
-  min-height: 80vh;
-  align-items: center;
-  flex-direction: column;
-  background-size: cover;
-  justify-content: center;
-  background-image: url("https://cdn.purplebubble.org/background.png");
-}
-
-.hero h1 {
-  color: var(--dl-color-gray-white);
-  font-size: 3rem;
-}
diff --git a/src/styles/index.css b/src/styles/index.css
index 1d3512a..f099b3a 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -36,6 +36,27 @@
   --dl-space-space-oneandhalfunits: 24px;
 }
 
+.hero {
+  width: 100%;
+  height: 757px;
+  display: flex;
+  padding: var(--dl-space-space-threeunits);
+  position: relative;
+  min-height: 80vh;
+  align-items: center;
+  flex-direction: column;
+  background-size: cover;
+  justify-content: center;
+  background-image: url("https://cdn.purplebubble.org/background.png");
+}
+
+.hero h1 {
+  color: var(--dl-color-gray-white);
+  font-size: 3rem;
+  text-align: center;
+}
+
+
 .button {
   color: var(--dl-color-gray-black);
   display: inline-block;
@@ -378,18 +399,28 @@
   height: 504px;
 }
 
+.chevron-container {
+  margin-bottom: var(--dl-space-space-threeunits);
+  transform: translateY(-5rem);
+  width: 4em;
+  height: 4em;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+}
+
 .chevron-button {
   width: 4em;
   height: 4em;
   fill: var(--dl-color-gray-white);
-  transform: translateY(-5em);
   background-image: url("/chevron.svg");
   background-repeat: no-repeat;
   background-size: contain;
 }
 
 .chevron-button:hover {
-  transform: translateY(-5em) scale(1.1);
+  transform: scale(1.1);
 }
 
 @media (max-width: 1600px) {
@@ -418,10 +449,6 @@
 }
 
 @media (max-width: 991px) {
-  .home-hero {
-    flex-direction: column;
-  }
-
   .home-text {
     text-align: center;
   }
@@ -429,9 +456,60 @@
   .home-text1 {
     text-align: center;
   }
+
+  .home-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .home-container1 {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .home-container2 {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .home-text1 {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .home-features {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .home-lottie-node {
+    align-items: center;
+    width: 100%;
+    height: 100%;
+  }
 }
 
-@media (max-width: 767px) {
+@media (max-width: 768px) {
+  .home-hero {
+    flex-direction: column;
+  }
+
+  .home-btn-group {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .home-button {
+    margin-top: var(--dl-space-space-unit);
+    margin-left: 0px;
+  }
+
   .home-hero {
     padding-left: var(--dl-space-space-twounits);
     padding-right: var(--dl-space-space-twounits);
@@ -441,6 +519,10 @@
     padding-left: var(--dl-space-space-twounits);
     padding-right: var(--dl-space-space-twounits);
   }
+
+  .chevron-container {
+    display: none;
+  }
 }
 
 @media (max-width: 479px) {
@@ -452,15 +534,6 @@
     padding-right: var(--dl-space-space-unit);
   }
 
-  .home-btn-group {
-    flex-direction: column;
-  }
-
-  .home-button {
-    margin-top: var(--dl-space-space-unit);
-    margin-left: 0px;
-  }
-
   .home-features {
     padding-top: var(--dl-space-space-twounits);
     padding-left: var(--dl-space-space-unit);