scroll bottom button

Author: nisargaa20

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>
   );
 };

src/components/HomePage/header.css

@@ -316,4 +316,36 @@
 
 .float-animation {
   animation: float 2s ease-in-out infinite;
-}
+}
+
+
+
+
+.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);
+}