diff --git a/src/app/globals.css b/src/app/globals.css index 7110efb..4680eaa 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -59,4 +59,6 @@ --chart-5: 340 75% 55%; } } - +html { + scroll-behavior: smooth; +} diff --git a/src/app/page.tsx b/src/app/page.tsx index dbe99d3..51997ca 100644 --- a/src/app/page.tsx +++ b/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 ( + { ( !isLoadingAnimComplete ) && (
diff --git a/src/components/ui/back-to-top.tsx b/src/components/ui/back-to-top.tsx new file mode 100644 index 0000000..899ccc8 --- /dev/null +++ b/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(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 && ( + + )} + + ); +}; + +export default BackToTopButton; \ No newline at end of file