merged & smooth scroll w/o lib

package.json

@@ -17,12 +17,16 @@
     "eslint-config-next": "13.4.8",
     "framer-motion": "^10.16.3",
     "gsap": "^3.12.2",
-    "next": "13.4.8",
+    "next": "^13.5.4",
     "postcss": "8.4.24",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-scroll": "^1.9.0",
     "react-vertical-timeline-component": "^3.6.0",
     "tailwindcss": "3.3.2",
     "typescript": "5.1.6"
+  },
+  "devDependencies": {
+    "@types/react-scroll": "^1.8.8"
   }
 }

src/app/globals.css

@@ -28,7 +28,10 @@
 * {
   color: white;
 }
-
+html{
+  scroll-behavior: smooth;
+  scroll-padding-top: 5rem;
+}
 body {
   background-color: #0f0913;
 }

src/app/page.tsx

@@ -80,11 +80,17 @@ export default function Home() {
           />
         ))}
       </div>
-      <Hero />
-      <Button />
+      <section id="hero">
+        <Hero />
+        <Button />
+      </section>
       <TextSlide />
-      <About />
-      <Flowchart />
+      <section id="themes">
+        <About />
+      </section>
+      <section id="flowchart">
+        <Flowchart />
+      </section>
       <Themes />
       <Rewards />
       <Judges />

src/components/Links.tsx

@@ -1,17 +1,50 @@
-import { FC } from "react";
+'use client'
+import { FC, useEffect } from "react";
 import Link from "next/link";
 interface LinkProps {
   href: string;
   text: string;
   to: string;
 }
 
+
+function animateScroll(currentTime: number, targetPosition: number, startPosition: number, startTime: number) {
+  const elapsedTime = currentTime - startTime;
+  const progress = Math.min(elapsedTime / 1000, 1);
+
+  window.scrollTo(0, startPosition + (targetPosition - startPosition) * progress);
+
+  if (progress < 1) {
+    requestAnimationFrame((currentTime) => animateScroll(currentTime, targetPosition, startPosition, startTime));
+  }
+}
+
 const Links: FC<LinkProps> = ({ href, text, to }) => {
+
+  useEffect(() => {
+    const linkElement = document.querySelector(`a[href="${href}"]`);
+
+    if (linkElement) {
+      linkElement.addEventListener('click', (e) => {
+        e.preventDefault();
+
+        const targetElement = document.querySelector(href);
+
+        if (targetElement) {
+          const targetPosition = targetElement.getBoundingClientRect().top;
+          const startPosition = window.pageYOffset;
+          const startTime = performance.now();
+
+          requestAnimationFrame((currentTime) => animateScroll(currentTime, targetPosition, startPosition, startTime));
+        }
+      });
+    }
+  }, [href]);
   return (
     <div className="pt-3 ">
       <div className="hover:drop-shadow-[0_0_0.2rem_#d2b863] transition duration-300">
         <Link
-          className="hover:underline hover:drop-shadow-[0_0_0.2rem_#460a07] transition duration-300 underline-offset-8"
+          className="hover:underline hover:drop-shadow-[0_0_0.2rem_#460a07] transition duration-300 underline-offset-8 scroll-smooth"
           href={href}
           target={to}
         >

src/components/Navbar.tsx

@@ -2,7 +2,9 @@ import React from "react";
 import Link from "@/components/Links";
 const Navbar = () => {
   return (
-    <div className="absolute w-full">
+    <div className=" w-full
+    sticky top-0 z-50 
+    ">
       <ul className="flex flex-wrap items-center font-jbExtrabold tracking-wider md:text-lg justify-between px-[10vw] md:px-[20vw] lg:px-[30vw] py-5">
         <li>
           <Link text="HOME" to="" href="/"></Link>
@@ -11,10 +13,10 @@ const Navbar = () => {
           <Link text="RULES" to="" href="/rules"></Link>
         </li>
         <li>
-          <Link text="CONTACT" to="" href="#"></Link>
+          <Link text="CONTACT" to="" href="#flowchart"></Link>
         </li>
         <li>
-          <Link text="HELP" to="" href="#"></Link>
+          <Link text="HELP" to="" href="#themes"></Link>
         </li>
       </ul>
     </div>

src/components/TextAnimation/TextType.tsx

@@ -1,5 +1,5 @@
 'use client';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect,useRef } from 'react';
 import styles from '../About/About.module.css';
 
 interface typeprops {
@@ -11,7 +11,8 @@ const TypingAnimation = ({
     cursor="|"
 }:typeprops) => {
     const [text, setText] = useState('');
-    const [isTyping, setIsTyping] = useState(true);
+  const [isTyping, setIsTyping] = useState(true);
+  const typingContainerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     const options = {
@@ -55,7 +56,7 @@ const TypingAnimation = ({
   };
 
     return (
-        <div>
+      <div ref={typingContainerRef}>
             <div className="-z-20">
                 <img
                     src="/assets/icons/[email protected]"