Add scroll to top button and minor fix UI

client/src/app/page.tsx

@@ -19,6 +19,7 @@ import Github from "../components/Icons/Github";
 import LinkedIn from "../components/Icons/LinkedIn";
 import { useRouter } from "next/navigation";
 import { getCookie } from "cookies-next";
+import ScrollerBlob from "../components/Navbar/ScrollerBlob";
 
 export default function LandingPages() {
   const token = getCookie("token");
@@ -242,6 +243,7 @@ export default function LandingPages() {
         </section>
       </div>
       <Footer />
+      <ScrollerBlob />
     </>
   );
 }

client/src/components/Icons/UpArrow.tsx

@@ -0,0 +1,6 @@
+
+export default function UpArrow() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" height={20} fill="#fff"><path d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"/></svg>
+    )
+}

client/src/components/Navbar/Navbar.tsx

@@ -64,7 +64,7 @@ const Navbar = (props: NavbarProps) => {
                 <li>
                   <ScrollLink to="/" smooth duration={500}>
                     <p
-                      className="cursor-pointer block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0"
+                      className="cursor-pointer block py-2 px-3 text-white bg-[#ef4444] rounded md:bg-transparent md:text-[#ef4444] md:p-0"
                       aria-current="page"
                     >
                       Home
@@ -106,7 +106,7 @@ const Navbar = (props: NavbarProps) => {
                 </li>
                 <li>
                   <Link data-testid="Login-link" href="/auth/login">
-                    <button className="border-blue-700 border hover:bg-blue-700 hover:text-white hover:ring rounded px-3 py-1 text-blue-700 bg-transparent">
+                    <button className="border-[#ef4444] border hover:bg-[#ef4444] hover:text-white hover:ring rounded px-3 py-1 text-[ef4444] text-[#ef4444] bg-transparent">
                       Login
                     </button>
                   </Link>

client/src/components/Navbar/ScrollerBlob.tsx

@@ -0,0 +1,36 @@
+import { useState, useRef, useEffect } from "react";
+import UpArrow from "../Icons/UpArrow";
+
+const ScrollerBlob = () => {
+    const [scrollToTopVisible, setScrollToTopVisible] = useState(false);
+    const scrollToTopRef = useRef(0);
+
+    const handleScroll = () => {
+        const scrollPosition = window.scrollY;
+        if (scrollPosition > 300) {
+          setScrollToTopVisible(true);
+        } else {
+          setScrollToTopVisible(false);
+        }
+    }
+
+    useEffect(()=> {
+        window.addEventListener('scroll', handleScroll);
+        return () => {
+          window.removeEventListener('scroll', handleScroll);
+        }
+    }, []);
+
+    const scrollToTop = () => {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+
+
+    return (
+        <div style={{display: scrollToTopVisible ? "flex" : "none"}} ref={scrollToTopRef} onClick={scrollToTop} className="sm:flex sm:justify-center sm:items-center sm:fixed sm:w-12 sm:h-12 sm:rounded-[12px] sm:bg-[#ef4444] sm:bottom-0 sm:right-0 sm:m-2 cursor-pointer">
+            <UpArrow />
+        </div>
+    )
+} 
+
+export default ScrollerBlob;