From 6ad5b6f46ff80269cbfbab978733d9ae56b86fc0 Mon Sep 17 00:00:00 2001
From: nisargaa20 <125184228+nisargaa20@users.noreply.github.com>
Date: Sun, 2 Jun 2024 20:37:21 +0530
Subject: [PATCH 1/2] scroll bottom button

---
 src/components/HomePage/Header.tsx | 29 +++++++++++++++++++++++--
 src/components/HomePage/header.css | 34 +++++++++++++++++++++++++++++-
 2 files changed, 60 insertions(+), 3 deletions(-)

diff --git a/src/components/HomePage/Header.tsx b/src/components/HomePage/Header.tsx
index 96c02311b..417f50f20 100644
--- a/src/components/HomePage/Header.tsx
+++ b/src/components/HomePage/Header.tsx
@@ -4,6 +4,7 @@ import "./header.css";
 import Link from "@docusaurus/Link";
 import VanillaTilt from "vanilla-tilt";
 import { motion } from "framer-motion";
+import { FaArrowDown } from 'react-icons/fa'; 
 
 /**
  * Renders the header component of the application.
@@ -27,8 +28,6 @@ const HeaderContent = () => {
       >
         Level Up Skills with CodeHarborHub
       </motion.h1>
-      {/* <h1 className="gradient__text"
-      >Level Up Skills with CodeHarborHub</h1> */}
       <motion.p
         initial={{ opacity: 0, x: -10 }}
         whileInView={{ opacity: 1, x: 0 }}
@@ -133,6 +132,16 @@ const HeaderImage = () => {
   );
 };
 
+/**
+ * Scrolls the window to the bottom of the page.
+ */
+const scrollToBottom = () => {
+  window.scrollTo({
+    top: document.documentElement.scrollHeight,
+    behavior: 'smooth',
+  });
+};
+
 /**
  * Renders the header component of the application.
  * @returns A header component with styling and structure.
@@ -144,6 +153,22 @@ const Header: React.FC = () => {
         <HeaderContent />
         <HeaderImage />
       </div>
+      <motion.button
+        initial={{ opacity: 0, y: -10 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{
+          duration: 1,
+          type: "spring",
+          stiffness: 100,
+          delay: 0.4,
+        }}
+        type="button"
+        className="scroll-to-bottom-button"
+        onClick={scrollToBottom}
+      >
+        <FaArrowDown /> {/* Icon */}
+      </motion.button>
     </div>
   );
 };
diff --git a/src/components/HomePage/header.css b/src/components/HomePage/header.css
index 36c8343e7..e19bb79b2 100644
--- a/src/components/HomePage/header.css
+++ b/src/components/HomePage/header.css
@@ -316,4 +316,36 @@
 
 .float-animation {
   animation: float 2s ease-in-out infinite;
-}
\ No newline at end of file
+}
+
+
+
+
+.scroll-to-bottom-button {
+  position: absolute; 
+  top: 20px; 
+  right: 20px; 
+  padding: 10px 12px;
+  background-color: #ff6f61;
+  color: #fff;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  gap: 5px; 
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  z-index: 1000;
+  transition: background-color 0.3s, transform 0.3s;
+}
+
+.scroll-to-bottom-button:hover {
+  background-color: #ff4b3a;
+  transform: translateY(-2px);
+}
+
+.scroll-to-bottom-button:active {
+  background-color: #e64b3a;
+  transform: translateY(0);
+}

From 0ea98e19a873aa371115152aa920c5b5c0b913d0 Mon Sep 17 00:00:00 2001
From: nisargaa20 <125184228+nisargaa20@users.noreply.github.com>
Date: Sun, 2 Jun 2024 21:47:17 +0530
Subject: [PATCH 2/2] updated

---
 src/components/HomePage/Header.tsx | 29 ++-----------------------
 src/components/HomePage/header.css | 28 ------------------------
 src/pages/index.module.css         | 22 ++++++++++++++++++-
 src/pages/index.tsx                | 35 +++++++++++++++++++++++++++++-
 4 files changed, 57 insertions(+), 57 deletions(-)

diff --git a/src/components/HomePage/Header.tsx b/src/components/HomePage/Header.tsx
index 417f50f20..96c02311b 100644
--- a/src/components/HomePage/Header.tsx
+++ b/src/components/HomePage/Header.tsx
@@ -4,7 +4,6 @@ import "./header.css";
 import Link from "@docusaurus/Link";
 import VanillaTilt from "vanilla-tilt";
 import { motion } from "framer-motion";
-import { FaArrowDown } from 'react-icons/fa'; 
 
 /**
  * Renders the header component of the application.
@@ -28,6 +27,8 @@ const HeaderContent = () => {
       >
         Level Up Skills with CodeHarborHub
       </motion.h1>
+      {/* <h1 className="gradient__text"
+      >Level Up Skills with CodeHarborHub</h1> */}
       <motion.p
         initial={{ opacity: 0, x: -10 }}
         whileInView={{ opacity: 1, x: 0 }}
@@ -132,16 +133,6 @@ const HeaderImage = () => {
   );
 };
 
-/**
- * Scrolls the window to the bottom of the page.
- */
-const scrollToBottom = () => {
-  window.scrollTo({
-    top: document.documentElement.scrollHeight,
-    behavior: 'smooth',
-  });
-};
-
 /**
  * Renders the header component of the application.
  * @returns A header component with styling and structure.
@@ -153,22 +144,6 @@ const Header: React.FC = () => {
         <HeaderContent />
         <HeaderImage />
       </div>
-      <motion.button
-        initial={{ opacity: 0, y: -10 }}
-        whileInView={{ opacity: 1, y: 0 }}
-        viewport={{ once: true }}
-        transition={{
-          duration: 1,
-          type: "spring",
-          stiffness: 100,
-          delay: 0.4,
-        }}
-        type="button"
-        className="scroll-to-bottom-button"
-        onClick={scrollToBottom}
-      >
-        <FaArrowDown /> {/* Icon */}
-      </motion.button>
     </div>
   );
 };
diff --git a/src/components/HomePage/header.css b/src/components/HomePage/header.css
index e19bb79b2..f53d02c6f 100644
--- a/src/components/HomePage/header.css
+++ b/src/components/HomePage/header.css
@@ -321,31 +321,3 @@
 
 
 
-.scroll-to-bottom-button {
-  position: absolute; 
-  top: 20px; 
-  right: 20px; 
-  padding: 10px 12px;
-  background-color: #ff6f61;
-  color: #fff;
-  border: none;
-  border-radius: 10px;
-  cursor: pointer;
-  font-size: 16px;
-  display: flex;
-  align-items: center;
-  gap: 5px; 
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  z-index: 1000;
-  transition: background-color 0.3s, transform 0.3s;
-}
-
-.scroll-to-bottom-button:hover {
-  background-color: #ff4b3a;
-  transform: translateY(-2px);
-}
-
-.scroll-to-bottom-button:active {
-  background-color: #e64b3a;
-  transform: translateY(0);
-}
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 8b1d94dc7..5aaf09c1e 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -33,4 +33,24 @@
 
 .section {
   padding: 1rem;
-}
\ No newline at end of file
+}
+
+.scrollToBottomButton {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  top: auto;
+  background-color: var(--ifm-color-primary);
+  color: #fff;
+  border: none;
+  border-radius: 50%;
+  padding: 10px;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); 
+  cursor: pointer;
+  z-index: 1000;
+}
+
+.scrollToBottomButton:hover {
+  background-color: var(--ifm-color-primary);
+  box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.2); 
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 1a078ef07..9cfb100b4 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,6 +1,6 @@
 import clsx from "clsx";
 // import Link from "@docusaurus/Link";
-import React from "react";
+import React, { useState, useEffect } from "react";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Layout from "@theme/Layout";
 import Heading from "@theme/Heading";
@@ -12,6 +12,7 @@ import Header from "../components/HomePage/Header";
 import Tweet from "../components/Tweet";
 import Tweets, { type TweetItem } from "../data/tweets";
 import { motion } from "framer-motion";
+import { FaArrowDown } from "react-icons/fa"; 
 
 function TweetsSection(): React.JSX.Element {
   const tweetColumns: TweetItem[][] = [[], [], []];
@@ -69,6 +70,29 @@ function TweetsSection(): React.JSX.Element {
 
 export default function Home(): React.JSX.Element {
   const { siteConfig } = useDocusaurusContext();
+  const [showScrollButton, setShowScrollButton] = useState(true);
+
+  const scrollToBottom = () => {
+    window.scrollTo({
+      top: document.documentElement.scrollHeight,
+      behavior: "smooth",
+    });
+    setShowScrollButton(false);
+  };
+
+  const handleScroll = () => {
+    if (window.scrollY === 0) {
+      setShowScrollButton(true);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
   return (
     <Layout
       title={`Hello from ${siteConfig.title}`}
@@ -140,6 +164,15 @@ export default function Home(): React.JSX.Element {
         </motion.div>
 
         <TweetsSection />
+
+        {showScrollButton && (
+          <button
+            onClick={scrollToBottom}
+            className={styles.scrollToBottomButton}
+          >
+            <FaArrowDown />
+          </button>
+        )}
       </main>
     </Layout>
   );