Footer fix

app/layout.tsx

@@ -5,6 +5,7 @@ import GlassNavBar from "@/components/navbar";
 import { Footer } from "@/components/footer";
 import { ViewTransitions } from 'next-view-transitions'
 import SmoothScroll from "@/components/SmoothScroll";
+import ScrollToTop from "@/components/ScrollToTop";
 
 const poppins = Poppins({
   subsets: ["latin"],
@@ -72,6 +73,7 @@ export default function RootLayout({
           className={`${geistSans.variable} ${geistMono.variable} ${kanit.variable} ${poppins.className} antialiased overflow-x-hidden bg-black`}
         >
           <SmoothScroll>
+            <ScrollToTop />
             <GlassNavBar />
             {children}
             <Footer />

components/ScrollToTop/index.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { useEffect } from "react";
+import { usePathname } from "next/navigation";
+import { useLenis } from "@/components/SmoothScroll/LenisContext";
+
+export default function ScrollToTop() {
+  const pathname = usePathname();
+  const { lenis } = useLenis();
+
+  useEffect(() => {
+    if (lenis) {
+      lenis.scrollTo(0, { immediate: true });
+    } else {
+      window.scrollTo({ top: 0, left: 0, behavior: "instant" });
+      document.documentElement.scrollTop = 0;
+      document.body.scrollTop = 0;
+    }
+  }, [pathname, lenis]);
+
+  return null;
+}

components/SmoothScroll/LenisContext.ts

@@ -0,0 +1,6 @@
+import { createContext, useContext } from "react";
+import type Lenis from "lenis";
+
+export const LenisContext = createContext<{ lenis: Lenis | null }>({ lenis: null });
+
+export const useLenis = () => useContext(LenisContext);

components/SmoothScroll/index.jsx

@@ -1,13 +1,15 @@
 "use client";
 
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import Lenis from "lenis";
+import { LenisContext } from "./LenisContext";
 
 export default function SmoothScroll({ children }) {
   const lenisRef = useRef(null);
+  const [lenis, setLenis] = useState(null);
 
   useEffect(() => {
-    const lenis = new Lenis({
+    const lenisInstance = new Lenis({
       duration: 1.2,
       easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
       direction: "vertical",
@@ -17,19 +19,24 @@ export default function SmoothScroll({ children }) {
       touchMultiplier: 2,
     });
 
-    lenisRef.current = lenis;
+    lenisRef.current = lenisInstance;
+    setLenis(lenisInstance);
 
     function raf(time) {
-      lenis.raf(time);
+      lenisInstance.raf(time);
       requestAnimationFrame(raf);
     }
 
     requestAnimationFrame(raf);
 
     return () => {
-      lenis.destroy();
+      lenisInstance.destroy();
     };
   }, []);
 
-  return <>{children}</>;
+  return (
+    <LenisContext.Provider value={{ lenis }}>
+      {children}
+    </LenisContext.Provider>
+  );
 }

components/footer.tsx

@@ -17,7 +17,7 @@ export function Footer() {
           alt="Hackbyte logo"
           width={500}
           height={300}
-          className="z-20 relative left-24 max-sm:w-[200px] max-sm:h-[100px] max-sm:-left-15 max-sm:-top-10"
+          className="z-20 relative left-18 max-sm:w-[200px] max-sm:h-[100px] max-sm:-left-15 max-sm:-top-10"
         />
         <div className="flex flex-col items-end gap-6 p-4 max-sm:pr-0 max-sm:pl-0 max-sm:w-full">
           {/*pages*/}