Refactor: Enhance hero section animations and layout, streamline main content and footer structure, and remove mock agency data and custom cursor.

Author: RoyRoki

src/app/page.tsx

@@ -12,7 +12,7 @@ import { gsap, useGSAP } from '@/lib/gsap'
 import { getAssetPath } from '@/lib/utils'
 import SplitType from 'split-type'
 import { RequestSection } from '@/components/home/RequestSection'
-import { CustomCursor } from '@/components/ui/CustomCursor'
+
 
 export default function Home() {
   const heroRef = useRef<HTMLElement>(null)
@@ -63,83 +63,60 @@ export default function Home() {
     // ── Hero animations ──
     const tl = gsap.timeline({ defaults: { ease: 'power4.out' } })
 
-    // Initial Reveal
+    // Background (Independent)
+    tl.to('.hero-bg-mountains img', {
+      scale: 1.1,
+      duration: 20,
+      ease: 'none',
+    }, 0)
+
+    // Title Reveal
     if (titleRef.current) {
       const split = new SplitType(titleRef.current, {
         types: 'words',
         tagName: 'span'
       })
 
-      // Background gentle zoom
-      tl.to('.hero-bg-mountains img', {
-        scale: 1.1,
-        duration: 20,
-        ease: 'none',
-      }, 0)
-
-      // Text Reveal
       tl.from(split.words, {
         yPercent: 100,
         opacity: 0,
-        stagger: 0.08,
-        duration: 1.2,
+        stagger: 0.05,
+        duration: 0.8,
         ease: 'power4.out',
-      }, 0.5)
-        .from('.hero-subtitle', {
-          y: 30,
-          opacity: 0,
-          duration: 1,
-          ease: 'power3.out',
-        }, '-=0.8')
-        .from('.hero-cta', {
-          y: 20,
-          opacity: 0,
-          duration: 0.8,
-          stagger: 0.1,
-          ease: 'power3.out',
-        }, '-=0.6')
-        .from('.hero-scroll-indicator', {
-          opacity: 0,
-          duration: 1,
-        }, '-=0.4')
+      }, 0.1)
     }
 
-    // ── Parallax Scroll Effects ──
-    // Mountains (Background) - Moves slowest (0.2x visual speed relative to scroll)
-    gsap.to('.hero-bg-mountains', {
-      yPercent: 20, // Moves slightly down as we scroll down
-      ease: 'none',
-      scrollTrigger: {
-        trigger: heroRef.current,
-        start: 'top top',
-        end: 'bottom top',
-        scrub: true,
-      }
-    })
+    // Subtitle & Rest (Sequenced with absolute timing for reliability)
+    // Subtitle & Rest (Sequenced with absolute timing for reliability)
+    tl.fromTo('.hero-subtitle',
+      { y: 20, autoAlpha: 0 },
+      { y: 0, autoAlpha: 1, duration: 0.8, ease: 'power3.out' },
+      0.5
+    )
+
+    tl.fromTo('.hero-cta',
+      { y: 20, autoAlpha: 0 },
+      { y: 0, autoAlpha: 1, duration: 0.8, stagger: 0.1, ease: 'power3.out' },
+      0.6
+    )
+
+    tl.fromTo('.hero-scroll-indicator',
+      { autoAlpha: 0 },
+      { autoAlpha: 1, duration: 1 },
+      0.9
+    )
 
-    // Tea Gardens (Mid-ground) - Moves medium speed (0.5x)
-    gsap.to('.hero-bg-midground', {
-      yPercent: 40, // Moves faster than mountains
-      ease: 'none',
-      scrollTrigger: {
-        trigger: heroRef.current,
-        start: 'top top',
-        end: 'bottom top',
-        scrub: true,
-      }
-    })
-
-    // Text/Foreground (1x - Natural scroll, but we can add a slight opacity fade)
+    // ── Parallax Scroll Effects ──
     gsap.to('.hero-foreground', {
-      yPercent: 60, // Parallax text movement
-      opacity: 0,
-      ease: 'none',
       scrollTrigger: {
         trigger: heroRef.current,
         start: 'top top',
-        end: 'bottom top', // Fade out by 60% of viewport
+        end: 'bottom center', // Fade out halfway through
         scrub: true,
-      }
+      },
+      y: -50, // Move up slightly
+      opacity: 0,
+      ease: 'none'
     })
 
     // ── Magic section — stagger reveal ──
@@ -238,14 +215,16 @@ export default function Home() {
   }, { scope: heroRef, dependencies: [] })
 
   return (
-    <main className="relative overflow-hidden cursor-none"> {/* Hide default cursor here too for safety */}
-      <CustomCursor />
+    <main className="relative overflow-hidden">
+
 
       {/* ═══════════ HERO ═══════════ */}
-      <section ref={heroRef} className="relative h-screen w-full flex items-center justify-center overflow-hidden bg-black">
+      <section ref={heroRef} className="relative h-[100dvh] w-full flex items-center justify-center overflow-hidden">
+        {/* Layer 0: Deep Black Background (Fallback) */}
+        <div className="absolute inset-0 bg-black -z-50" />
 
-        {/* Layer 1: Background Mountains (Moves slow) */}
-        <div className="hero-bg-mountains absolute inset-0 -z-30 h-[120%] w-full top-0">
+        {/* Layer 1: Background Mountains (Single Hero Image) */}
+        <div className="hero-bg-mountains absolute inset-0 z-0 h-full w-full top-0">
           <Image
             src={getAssetPath("/images/darjeeling_hero_bg_1770289408859.webp")}
             alt="Himalayan Peaks"
@@ -254,21 +233,8 @@ export default function Home() {
             priority
             quality={90}
           />
-          {/* Atmospheric Haze */}
-          <div className="absolute inset-0 bg-gradient-to-b from-slate-900/30 via-transparent to-slate-900/80" />
-        </div>
-
-        {/* Layer 2: Midground Tea Gardens (Moves medium) */}
-        <div className="hero-bg-midground absolute inset-0 -z-20 h-[120%] w-full top-[20%]">
-          <Image
-            src={getAssetPath("/images/darjeeling_tea_garden.webp")}
-            alt="Tea Gardens"
-            fill
-            className="object-cover object-top opacity-90"
-            priority
-          />
-          {/* Blend Gradient */}
-          <div className="absolute inset-0 bg-gradient-to-t from-black via-black/20 to-transparent" />
+          {/* Atmospheric Haze - Enhanced for contrast */}
+          <div className="absolute inset-0 bg-gradient-to-b from-black/60 via-black/40 to-black/80" />
         </div>
 
         {/* Layer 3: Foreground Text */}
@@ -295,14 +261,14 @@ export default function Home() {
                   onClick={() => {
                     document.getElementById('routes')?.scrollIntoView({ behavior: 'smooth' });
                   }}
-                  className="hero-cta group inline-flex items-center gap-3 px-10 py-5 bg-white text-primary text-sm tracking-[0.2em] uppercase font-bold rounded-full hover:bg-white/90 hover:scale-105 hover:shadow-[0_0_40px_rgba(255,255,255,0.3)] transition-all duration-500"
+                  className="hero-cta will-change-transform group inline-flex items-center gap-3 px-10 py-5 bg-white text-primary text-sm tracking-[0.2em] uppercase font-bold rounded-full hover:bg-white/90 hover:scale-105 transition-all duration-500"
                 >
                   Start Exploring
                   <ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
                 </button>
                 <Link
                   href="/signup"
-                  className="hero-cta inline-flex items-center gap-3 px-10 py-5 bg-white/10 text-white text-sm tracking-[0.2em] uppercase font-semibold rounded-full hover:bg-white/20 backdrop-blur-md border border-white/20 hover:border-white/40 transition-all duration-500"
+                  className="hero-cta will-change-transform inline-flex items-center gap-3 px-10 py-5 bg-white/10 text-white text-sm tracking-[0.2em] uppercase font-semibold rounded-full hover:bg-white/20 backdrop-blur-md border border-white/20 hover:border-white/40 transition-all duration-500"
                 >
                   For Agencies
                 </Link>

src/components/LayoutClient.tsx

@@ -10,23 +10,19 @@ export function LayoutClient({ children }: { children: React.ReactNode }) {
     const pathname = usePathname();
     const isAdminRoute = pathname?.startsWith("/admin");
     return (
-        <body className="font-sans bg-background text-foreground antialiased min-h-screen flex flex-col noise-bg px-0">
+        <body className="font-sans bg-background text-foreground antialiased min-h-[100dvh] flex flex-col noise-bg px-0">
             <GitHubPagesRedirect />
             {/* <CustomCursor /> */}
             {!isAdminRoute && <Navbar />}
             {/* <SmoothScroll> */}
 
-            {/* Main Content - Relative & Z-10 to cover footer */}
-            <main className="relative z-10 bg-background shadow-2xl mb-[80vh] md:mb-[60vh] lg:mb-[50vh]">
+            {/* Main Content */}
+            <div className="flex-1 bg-background relative flex flex-col">
                 {children}
-            </main>
+            </div>
 
-            {/* Sticky Reveal Footer - Fixed & Z-0 */}
-            {!isAdminRoute && (
-                <div className="fixed bottom-0 left-0 w-full z-0 h-[80vh] md:h-[60vh] lg:h-[50vh] flex flex-col justify-end">
-                    <Footer variant="ghost" />
-                </div>
-            )}
+            {/* Standard Footer */}
+            {!isAdminRoute && <Footer variant="ghost" />}
             {/* </SmoothScroll> */}
         </body>
     );

src/components/RouteClient.tsx

@@ -285,24 +285,6 @@ export function RouteClient({ slug, tid: initialTid }: RouteClientProps) {
 
       const filtered = agencies.filter(Boolean) as Agency[];
 
-      // MOCK AGENCY FOR DEMONSTRATION - REMOVE BEFORE PROD
-      if (filtered.length === 0) {
-        filtered.push({
-          id: 'mock-agency-1',
-          name: 'Himalayan Explorers',
-          contactNo: '+91 98765 43210',
-          email: 'contact@himalayan.com',
-          website: 'https://himalayan.com',
-          address: 'Sevoke Road, Siliguri, WB',
-          isVerified: true,
-          whatsapp: '+91 98765 43210',
-          logoUrl: 'https://ui-avatars.com/api/?name=Himalayan+Explorers&background=random&color=fff&size=200',
-          status: 'approved',
-          trialStart: new Date(),
-          trialExpiry: new Date(Date.now() + 86400000)
-        });
-      }
-
       setAgencyList(filtered);
 
       // If we have an active agency from URL, select it

src/components/layout/Navbar.tsx

@@ -62,8 +62,7 @@ export function Navbar() {
                         >
                             PathSathi
                         </span>
-                        {/* Shimmer overlay */}
-                        <span className="absolute inset-0 bg-gradient-to-r from-transparent via-white/80 to-transparent -translate-x-[150%] group-hover:animate-shimmer z-20 mix-blend-overlay pointer-events-none" />
+
                     </Link>
 
                     {/* Desktop Navigation */}