feat: multi-phase hero texts + navbar after hero scroll

components/sections/CloudRevealSection.tsx

@@ -14,6 +14,21 @@ const TOTAL_FRAMES = 298
 const FRAME_PATH = (n: number) =>
   `/frames/ezgif-frame-${String(n).padStart(3, '0')}.jpg`
 
+// Scroll aralığına göre opacity döndüren helper
+function usePhaseOpacity(
+  scrollYProgress: ReturnType<typeof useScroll>['scrollYProgress'],
+  inStart: number,
+  inEnd: number,
+  outStart: number,
+  outEnd: number
+) {
+  return useTransform(
+    scrollYProgress,
+    [inStart, inEnd, outStart, outEnd],
+    [0, 1, 1, 0]
+  )
+}
+
 export default function CloudRevealSection() {
   const t = useTranslations('hero')
   const prefersReducedMotion = useReducedMotion()
@@ -29,17 +44,29 @@ export default function CloudRevealSection() {
     offset: ['start start', 'end end'],
   })
 
-  // Tagline: ilk %15'te solar, aşağı kayar
-  const taglineOpacity = useTransform(scrollYProgress, [0, 0.15], [1, 0])
-  const taglineY = useTransform(scrollYProgress, [0, 0.15], [0, 40])
-
-  // Progress bar: scroll'a göre genişler (0 → 100%)
+  // Progress bar
   const progressScaleX = useTransform(scrollYProgress, [0, 1], [0, 1])
 
+  // --- Text phase opacities ---
+  // Phase 1: 0–15% → tagline (sol alt)
+  const phase1Opacity = useTransform(scrollYProgress, [0, 0.05, 0.12, 0.18], [0, 1, 1, 0])
+  const phase1Y = useTransform(scrollYProgress, [0, 0.05], [20, 0])
+
+  // Phase 2: 20–45% → orta metin (merkez)
+  const phase2Opacity = useTransform(scrollYProgress, [0.20, 0.28, 0.40, 0.48], [0, 1, 1, 0])
+  const phase2Y = useTransform(scrollYProgress, [0.20, 0.28], [30, 0])
+
+  // Phase 3: 50–72% → stat kartları (sağ)
+  const phase3Opacity = useTransform(scrollYProgress, [0.50, 0.57, 0.68, 0.75], [0, 1, 1, 0])
+  const phase3Y = useTransform(scrollYProgress, [0.50, 0.57], [30, 0])
+
+  // Phase 4: 78–100% → CTA (merkez alt)
+  const phase4Opacity = useTransform(scrollYProgress, [0.78, 0.85, 0.95, 1], [0, 1, 1, 0])
+  const phase4Y = useTransform(scrollYProgress, [0.78, 0.85], [30, 0])
+
   // Frame preload
   useEffect(() => {
     if (prefersReducedMotion) return
-
     const images: HTMLImageElement[] = new Array(TOTAL_FRAMES)
     let loadedCount = 0
     let cancelled = false
@@ -59,7 +86,6 @@ export default function CloudRevealSection() {
       }
       images[i] = img
     }
-
     return () => { cancelled = true }
   }, [prefersReducedMotion])
 
@@ -76,10 +102,7 @@ export default function CloudRevealSection() {
 
   useMotionValueEvent(scrollYProgress, 'change', (progress) => {
     if (!loaded) return
-    const frameIndex = Math.min(
-      Math.floor(progress * (TOTAL_FRAMES - 1)),
-      TOTAL_FRAMES - 1
-    )
+    const frameIndex = Math.min(Math.floor(progress * (TOTAL_FRAMES - 1)), TOTAL_FRAMES - 1)
     if (frameIndex !== currentFrameRef.current) {
       currentFrameRef.current = frameIndex
       drawFrame(frameIndex)
@@ -102,17 +125,11 @@ export default function CloudRevealSection() {
   if (prefersReducedMotion) {
     return (
       <div className="relative min-h-[100dvh] w-full overflow-hidden bg-black flex items-end">
-        <div className="absolute inset-0 bg-gradient-to-t from-black via-black/60 to-transparent" />
-        <div className="relative z-10 w-full px-10 pb-24">
-          <p className="text-white/50 text-xs tracking-[0.4em] uppercase mb-4">
-            Vesta Muğla
-          </p>
-          <h1 className="text-white text-5xl md:text-7xl font-serif font-light leading-tight">
-            {t('tagline')}
-          </h1>
-          <p className="text-white/50 mt-4 text-base md:text-lg font-light max-w-md">
-            {t('subtitle')}
-          </p>
+        <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent" />
+        <div className="relative z-10 px-10 pb-24">
+          <p className="text-white/50 text-xs tracking-[0.4em] uppercase mb-4">Vesta Muğla</p>
+          <h1 className="text-white text-5xl md:text-7xl font-serif font-light leading-tight">{t('tagline')}</h1>
+          <p className="text-white/50 mt-4 text-base font-light max-w-md">{t('subtitle')}</p>
         </div>
       </div>
     )
@@ -123,63 +140,80 @@ export default function CloudRevealSection() {
       <div className="sticky top-0 min-h-[100dvh] w-full overflow-hidden bg-black">
 
         {/* Canvas */}
-        <canvas
-          ref={canvasRef}
-          className="absolute inset-0 w-full h-full"
-        />
+        <canvas ref={canvasRef} className="absolute inset-0 w-full h-full" />
 
-        {/* Gradient — alt kısım okunabilir olsun */}
-        <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent pointer-events-none" />
+        {/* Alt gradient */}
+        <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none" />
 
         {/* Loading */}
         {!loaded && (
           <div className="absolute inset-0 flex flex-col items-center justify-center bg-black z-20">
             <div className="w-48 h-px bg-white/10 mb-3">
-              <div
-                className="h-full bg-white/60 transition-all duration-150"
-                style={{ width: `${loadProgress}%` }}
-              />
+              <div className="h-full bg-white/60 transition-all duration-150" style={{ width: `${loadProgress}%` }} />
             </div>
-            <p className="text-white/30 text-xs tracking-widest uppercase">
-              {loadProgress}%
-            </p>
+            <p className="text-white/30 text-xs tracking-widest uppercase">{loadProgress}%</p>
           </div>
         )}
 
-        {/* Sol alt — tagline metni */}
+        {/* PHASE 1 — Sol alt: Ana tagline */}
         <motion.div
-          style={{ opacity: taglineOpacity, y: taglineY }}
-          className="absolute bottom-20 left-0 z-10 px-10 max-w-xl"
+          style={{ opacity: phase1Opacity, y: phase1Y }}
+          className="absolute bottom-20 left-10 z-10 max-w-sm"
         >
-          <p className="text-white/50 text-xs tracking-[0.4em] uppercase mb-4">
-            Vesta Muğla
-          </p>
-          <h1 className="text-white text-4xl md:text-6xl font-serif font-light leading-tight drop-shadow-2xl">
+          <p className="text-white/50 text-[10px] tracking-[0.4em] uppercase mb-3">Vesta Muğla</p>
+          <h1 className="text-white text-4xl md:text-5xl font-serif font-light leading-tight drop-shadow-2xl">
             {t('tagline')}
           </h1>
-          <p className="text-white/50 mt-3 text-sm md:text-base font-light">
-            {t('subtitle')}
-          </p>
+          <p className="text-white/50 mt-3 text-sm font-light">{t('subtitle')}</p>
         </motion.div>
 
-        {/* Sağ alt — scroll göstergesi */}
-        {loaded && (
-          <motion.div
-            style={{ opacity: taglineOpacity }}
-            className="absolute bottom-20 right-10 z-10 flex flex-col items-center gap-2"
-          >
-            <span className="text-white/30 text-[10px] tracking-widest uppercase rotate-90 mb-2">
-              {t('scroll')}
-            </span>
-          </motion.div>
-        )}
+        {/* PHASE 2 — Merkez: Konum & kimlik */}
+        <motion.div
+          style={{ opacity: phase2Opacity, y: phase2Y }}
+          className="absolute inset-0 flex items-center justify-center z-10 pointer-events-none"
+        >
+          <div className="text-center px-6">
+            <p className="text-white/40 text-[10px] tracking-[0.5em] uppercase mb-5">Muğla · Türkiye</p>
+            <p className="text-white text-3xl md:text-5xl font-serif font-light leading-snug drop-shadow-2xl">
+              Bulutların altında,<br />
+              <span className="italic">ormanın içinde</span>
+            </p>
+            <div className="mt-6 w-12 h-px bg-white/30 mx-auto" />
+          </div>
+        </motion.div>
 
-        {/* Alt progress bar */}
+        {/* PHASE 3 — Sağ: Stat rakamları */}
+        <motion.div
+          style={{ opacity: phase3Opacity, y: phase3Y }}
+          className="absolute right-10 top-1/2 -translate-y-1/2 z-10 flex flex-col gap-8 text-right"
+        >
+          {[
+            { value: '120', label: 'Konut' },
+            { value: '15.000', label: 'm² Alan' },
+            { value: '%60', label: 'Yeşil Alan' },
+          ].map((stat) => (
+            <div key={stat.label}>
+              <p className="text-white text-4xl md:text-5xl font-serif font-light drop-shadow-xl">{stat.value}</p>
+              <p className="text-white/40 text-xs tracking-widest uppercase mt-1">{stat.label}</p>
+            </div>
+          ))}
+        </motion.div>
+
+        {/* PHASE 4 — Merkez alt: CTA */}
+        <motion.div
+          style={{ opacity: phase4Opacity, y: phase4Y }}
+          className="absolute bottom-24 left-0 right-0 z-10 flex flex-col items-center gap-4"
+        >
+          <p className="text-white/40 text-[10px] tracking-[0.5em] uppercase">Projeyi Keşfet</p>
+          <p className="text-white text-2xl md:text-3xl font-serif font-light text-center drop-shadow-xl">
+            Hayalinizdeki yaşam<br />bir adım uzağınızda
+          </p>
+          <div className="mt-2 w-px h-10 bg-white/30 animate-pulse" />
+        </motion.div>
+
+        {/* Progress bar */}
         <div className="absolute bottom-8 left-10 right-10 z-10 h-[2px] bg-white/10">
-          <motion.div
-            className="h-full bg-white/60 origin-left"
-            style={{ scaleX: progressScaleX }}
-          />
+          <motion.div className="h-full bg-white/60 origin-left" style={{ scaleX: progressScaleX }} />
         </div>
 
       </div>