Merge pull request #42 from RotaractMora/design-fixes

Design fixes

src/app/globals.css

@@ -59,4 +59,6 @@
     --chart-5: 340 75% 55%;
   }
 }
-
+html {
+  scroll-behavior: smooth;
+}

src/app/page.tsx

@@ -44,9 +44,9 @@ import Lottie from "react-lottie-player";
 import { IContact } from "@/interfaces/IContacts";
 import { getReachUs } from "@/services/reachus.service";
 import RegistrationStatus from "@/components/ui/google-gemini-effect";
+import BackToTopButton from "@/components/ui/back-to-top";
 import CodeEvelPara from "@/components/ui/code-evel-para";
 import { HeroVideo } from "@/components/ui/hero-video";
-
 export const products = [
   {
     title: "Are You Ready?",
@@ -303,6 +303,7 @@ export default function Home() {
 
   return (
     <RootLayout>
+       <BackToTopButton />
       <FloatingNav navItems={navItms} />
          { ( !isLoadingAnimComplete ) && (
             <div className="fixed inset-0 z-50 flex items-center justify-center bg-white dark:bg-[#545576]">

src/components/ui/back-to-top.tsx

@@ -0,0 +1,49 @@
+import React, { useState, useEffect } from 'react';
+import { ArrowUpIcon } from '@heroicons/react/24/solid';
+
+const BackToTopButton: React.FC = () => {
+  const [isVisible, setIsVisible] = useState<boolean>(false);
+
+  // Show button when page is scrolled up to given distance
+  const toggleVisibility = () => {
+    if (window.pageYOffset > 300) {
+      setIsVisible(true);
+    } else {
+      setIsVisible(false);
+    }
+  };
+
+  // Scroll to top when button is clicked
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    });
+  };
+
+  useEffect(() => {
+    // Add scroll event listener
+    window.addEventListener('scroll', toggleVisibility);
+
+    // Clean up the event listener
+    return () => {
+      window.removeEventListener('scroll', toggleVisibility);
+    };
+  }, []);
+
+  return (
+    <>
+      {isVisible && (
+        <button 
+          onClick={scrollToTop}
+          className="fixed bottom-6 right-6 z-50 bg-gray-700 text-white p-3 rounded-full shadow-lg hover:bg-gray-900 transition-all duration-300 ease-in-out"
+          aria-label="Scroll to top"
+        >
+          <ArrowUpIcon className="h-6 w-6" />
+        </button>
+      )}
+    </>
+  );
+};
+
+export default BackToTopButton;