Merge pull request #334 from CSE-Shaco/onboarding-landing

.

Author: CSE-Shaco

src/app/page.tsx

@@ -1,17 +1,5 @@
-'use client'
-
-import { useEffect } from 'react'
-import { useRouter } from 'next/navigation'
-
-import { useAuth } from '@/hooks/useAuth'
+import { redirect } from 'next/navigation'
 
 export default function Home() {
-  const router = useRouter()
-  const { user } = useAuth()
-
-  useEffect(() => {
-    router.replace(user ? '/' : '/onboarding')
-  }, [router, user])
-
-  return <main className="min-h-screen bg-black" />
+  redirect('/onboarding')
 }

src/components/landing/OnboardingLanding.tsx

@@ -7,6 +7,7 @@ import { useRouter } from 'next/navigation'
 import {
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -255,6 +256,12 @@ const pageIds = [
 
 const CTA_PAGE_INDEX = pageIds.indexOf('join')
 
+type IntroLogoOverlayAnimation = {
+  x: number
+  y: number
+  scale: number
+}
+
 function SectionShell({
   id,
   children,
@@ -1120,6 +1127,7 @@ export default function OnboardingLanding() {
   const introLogoRef = useRef<HTMLDivElement | null>(null)
   const introLogoOverlayRef = useRef<HTMLDivElement | null>(null)
   const headerLogoMeasureRef = useRef<HTMLDivElement | null>(null)
+  const pendingIntroLogoAnimationRef = useRef<IntroLogoOverlayAnimation | null>(null)
   const incomingDirectionRef = useRef(1)
   const reduceMotionRef = useRef(false)
   const transitionLockRef = useRef(false)
@@ -1174,7 +1182,13 @@ export default function OnboardingLanding() {
     const targetLeft = targetRect?.left ?? fallbackTargetLeft
     const targetTop = targetRect?.top ?? 21
     const baseLogoWidth = startRect.width / introLogoScale
-    const targetScale = targetRect ? targetRect.width / baseLogoWidth : 1
+    const targetScale = targetRect && baseLogoWidth > 0 ? targetRect.width / baseLogoWidth : 1
+
+    pendingIntroLogoAnimationRef.current = {
+      x: targetLeft - startRect.left,
+      y: targetTop - startRect.top,
+      scale: targetScale
+    }
 
     setIsIntroLogoHidden(true)
     setIntroLogoOverlayStyle({
@@ -1183,29 +1197,6 @@ export default function OnboardingLanding() {
       transform: `translate3d(0, 0, 0) scale(${introLogoScale})`,
       transformOrigin: 'top left'
     })
-
-    window.requestAnimationFrame(() => {
-      if (!introLogoOverlayRef.current) {
-        setActiveIndex(1)
-        setIntroLogoOverlayStyle(null)
-        transitionLockRef.current = false
-        return
-      }
-
-      gsap.to(introLogoOverlayRef.current, {
-        x: targetLeft - startRect.left,
-        y: targetTop - startRect.top,
-        scale: targetScale,
-        duration: 1,
-        ease: 'power3.inOut',
-        overwrite: true,
-        onComplete: () => {
-          setActiveIndex(1)
-          setIntroLogoOverlayStyle(null)
-          transitionLockRef.current = false
-        }
-      })
-    })
   }, [])
 
   const navigateToIndex = useCallback(
@@ -1328,6 +1319,39 @@ export default function OnboardingLanding() {
     return () => window.clearTimeout(introTimer)
   }, [activeIndex, runIntroLogoTransition])
 
+  useLayoutEffect(() => {
+    if (!introLogoOverlayStyle) return
+
+    const overlayElement = introLogoOverlayRef.current
+    const animation = pendingIntroLogoAnimationRef.current
+
+    if (!overlayElement || !animation) {
+      setActiveIndex(1)
+      setIntroLogoOverlayStyle(null)
+      transitionLockRef.current = false
+      return
+    }
+
+    const tween = gsap.to(overlayElement, {
+      x: animation.x,
+      y: animation.y,
+      scale: animation.scale,
+      duration: 1,
+      ease: 'power3.inOut',
+      overwrite: true,
+      onComplete: () => {
+        pendingIntroLogoAnimationRef.current = null
+        setActiveIndex(1)
+        setIntroLogoOverlayStyle(null)
+        transitionLockRef.current = false
+      }
+    })
+
+    return () => {
+      tween.kill()
+    }
+  }, [introLogoOverlayStyle])
+
   useEffect(() => {
     if (!stageRef.current) return