feat: implement home page structure with section wrapper and scroll i…

web/src/app/(root)/BentoGrid.tsx

@@ -3,7 +3,7 @@
 import { useRef } from 'react';
 import { gsap } from '@/lib/gsap';
 import { useGSAP } from '@gsap/react';
 import { ArrowRight, Code2, Layers, Cpu, Globe } from 'lucide-react';
 import Link from 'next/link';
 import { CoreStackCard } from './components/CoreStackCard';
 
@@ -49,7 +49,7 @@
           <div className="from-background/90 absolute inset-0 z-0 bg-gradient-to-t to-transparent" />
           <div className="relative z-10">
             <div className="border-border/50 bg-background/50 mb-4 inline-flex items-center gap-2 rounded-full border px-3 py-1 backdrop-blur-md">
-              <span className="h-2 w-2 animate-pulse rounded-full bg-green-500" />
+              <span className="bg-foreground h-2 w-2 animate-pulse rounded-full" />
               <span className="text-muted-foreground text-xs font-bold tracking-wider uppercase">
                 Available for work
               </span>

web/src/app/(root)/Footer.tsx

@@ -35,12 +35,6 @@ export default function Footer() {
             >
               Blogs
             </Link>
-            <Link
-              href="/admin"
-              className="text-muted-foreground hover:text-foreground text-sm font-medium transition-colors"
-            >
-              Admin
-            </Link>
           </div>
           <div className="flex flex-col gap-2">
             <span className="text-foreground mb-2 text-sm font-black tracking-widest uppercase">

web/src/app/(root)/SectionWrapper.tsx

@@ -0,0 +1,91 @@
+'use client';
+import { ReactNode, useEffect, useRef } from 'react';
+import Footer from './Footer';
+import BentoGrid from './BentoGrid';
+import HeroSection from './HeroSection';
+import { gsap, ScrollSmoother } from '@/lib/gsap';
+
+export default function SectionWrapper({
+  children,
+  loading,
+}: {
+  children: ReactNode;
+  loading: boolean;
+}) {
+  const mainLayerRef = useRef<HTMLDivElement>(null);
+  const secondLayerRef = useRef<HTMLDivElement>(null);
+  const thirdLayerRef = useRef<HTMLDivElement>(null);
+  const pinWrapRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (loading) return;
+
+    const smoother = ScrollSmoother.create({ smooth: 3, effects: true });
+
+    const ctx = gsap.context(() => {
+      gsap.set(mainLayerRef.current, { clipPath: 'inset(0% 0% 0% 0%)' });
+      gsap.set(secondLayerRef.current, { clipPath: 'inset(0% 0% 0% 0%)' });
+      gsap.set(thirdLayerRef.current, { clipPath: 'inset(0% 0% 0% 0%)' });
+
+      const tl = gsap.timeline({
+        scrollTrigger: {
+          trigger: pinWrapRef.current,
+          start: 'top top',
+          end: '+=300%',
+          scrub: true,
+          pin: true,
+        },
+      });
+
+      tl.to(mainLayerRef.current, {
+        clipPath: 'inset(0% 0% 100% 0%)',
+        ease: 'none',
+      });
+
+      tl.to(secondLayerRef.current, {
+        clipPath: 'inset(0% 0% 100% 0%)',
+        ease: 'none',
+      });
+
+      tl.to(thirdLayerRef.current, {
+        clipPath: 'inset(0% 0% 100% 0%)',
+        ease: 'none',
+      });
+    });
+
+    return () => {
+      ctx.revert();
+      smoother.kill();
+    };
+  }, [loading]);
+  return (
+    <>
+      <div ref={pinWrapRef} className="relative">
+        <div className="bg-background absolute inset-0 z-10 h-screen w-screen">
+          <Footer />
+        </div>
+
+        <div
+          ref={thirdLayerRef}
+          className="bg-background absolute inset-0 z-20 h-screen w-screen overflow-hidden"
+        >
+          <BentoGrid />
+        </div>
+
+        <div
+          ref={secondLayerRef}
+          className="bg-background absolute inset-0 z-30 h-screen w-screen overflow-hidden"
+        >
+          <HeroSection />
+        </div>
+        <div
+          ref={mainLayerRef}
+          className="bg-background absolute inset-0 z-40 h-screen w-screen overflow-hidden"
+        >
+          {children}
+        </div>
+      </div>
+      <div className="h-screen" />
+    </>
+  );
+}

web/src/app/(root)/components/ScrollIndicator.tsx

@@ -1,37 +1,10 @@
 'use client';
 
-import { useEffect, useRef } from 'react';
 import { ChevronDown } from 'lucide-react';
 
-export function ScrollIndicator({
-  progressRef,
-}: {
-  progressRef?: React.MutableRefObject<number>;
-}) {
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!progressRef) return;
-
-    let raf: number;
-    const tick = () => {
-      if (ref.current) {
-        const opacity = Math.max(0, 1 - progressRef.current / 0.15);
-        ref.current.style.opacity = String(opacity);
-        ref.current.style.pointerEvents = opacity <= 0 ? 'none' : 'auto';
-      }
-      raf = requestAnimationFrame(tick);
-    };
-    tick();
-
-    return () => cancelAnimationFrame(raf);
-  }, [progressRef]);
-
+export function ScrollIndicator() {
   return (
-    <div
-      ref={ref}
-      className="text-foreground pointer-events-none absolute bottom-8 left-1/2 z-20 flex -translate-x-1/2 flex-col items-center gap-1 transition-opacity duration-300"
-    >
+    <div className="text-foreground pointer-events-none absolute bottom-8 left-1/2 z-20 flex -translate-x-1/2 flex-col items-center gap-1 transition-opacity duration-300">
       <span className="text-xs tracking-widest uppercase opacity-70">
         Scroll
       </span>