added scroll progress bar

apps/web/app/page.tsx

@@ -10,6 +10,7 @@ import CardsSection from "../components/CardsSection";
 import { InfinitetDemo } from "../components/ScrollSection";
 import { Navbar } from "../components/Navbar";
 import Footer from "../components/Footer";
+import ScrollProgressBar from "../components/ScrollProgress"; // Import the progress bar
 import BackToTopButton from "../components/BacktoTop";
 
 export default function Home() {
@@ -19,7 +20,10 @@ export default function Home() {
 
   return (
     <main className="">
-      <div className="min-h-[120rem] w-full bg-slate-900   dark:bg-grid-white/[0.2] bg-grid-black/[0.2] relative flex items-center justify-center">
+      {/* Scroll Progress Bar */}
+      <ScrollProgressBar />
+
+      <div className="min-h-[120rem] w-full bg-slate-900 dark:bg-grid-white/[0.2] bg-grid-black/[0.2] relative flex items-center justify-center">
         {/* Radial gradient for the container to give a faded look */}
         <div className="absolute pointer-events-none inset-0 flex items-center justify-center bg-black [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>
         <Particles

apps/web/components/ScrollProgress.tsx

@@ -0,0 +1,35 @@
+"use client";
+import { useState, useEffect } from "react";
+
+const ScrollProgressBar = () => {
+  const [scrollPercentage, setScrollPercentage] = useState(0);
+
+  const handleScroll = () => {
+    const scrollTop = window.scrollY;
+    const docHeight = document.body.scrollHeight - window.innerHeight;
+    const scrolled = (scrollTop / docHeight) * 100;
+    setScrollPercentage(scrolled);
+  };
+
+  useEffect(() => {
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: `${scrollPercentage}%`,
+        height: "5px",
+        background: "linear-gradient(90deg, #ff4500, #a52a2a, #ffa500)", // Red, brown, orange gradient
+        zIndex: 100,
+        transition: "width 0.25s ease-out",
+      }}
+    />
+  );
+};
+
+export default ScrollProgressBar;