From 9246400da4a304f6513c14010b2f540e401a1972 Mon Sep 17 00:00:00 2001
From: Mustafa <ayris.dev@gmail.com>
Date: Thu, 30 Jul 2026 13:02:11 +0300
Subject: [PATCH] feat: multi-phase hero texts + navbar after hero scroll

---
 components/Navigation.tsx                  |  29 ++--
 components/sections/CloudRevealSection.tsx | 156 +++++++++++++--------
 2 files changed, 116 insertions(+), 69 deletions(-)

diff --git a/components/Navigation.tsx b/components/Navigation.tsx
index 5aaa647..3fb3b09 100644
--- a/components/Navigation.tsx
+++ b/components/Navigation.tsx
@@ -6,6 +6,7 @@ import Link from 'next/link'
 import Image from 'next/image'
 import { Menu, X, Phone } from 'lucide-react'
 import { cn } from '@/lib/utils'
+import { SITE } from '@/lib/constants'
 
 interface NavigationProps {
   locale: string
@@ -15,10 +16,16 @@ export default function Navigation({ locale }: NavigationProps) {
   const t = useTranslations('nav')
   const [menuOpen, setMenuOpen] = useState(false)
   const [scrolled, setScrolled] = useState(false)
+  const [visible, setVisible] = useState(false)
 
   useEffect(() => {
-    const handleScroll = () => setScrolled(window.scrollY > 80)
-    window.addEventListener('scroll', handleScroll)
+    const handleScroll = () => {
+      // Hero section 500vh — navbar scroll bittikten sonra görünür
+      const heroEnd = window.innerHeight * 4.5
+      setVisible(window.scrollY > heroEnd)
+      setScrolled(window.scrollY > heroEnd + 80)
+    }
+    window.addEventListener('scroll', handleScroll, { passive: true })
     return () => window.removeEventListener('scroll', handleScroll)
   }, [])
 
@@ -36,6 +43,7 @@ export default function Navigation({ locale }: NavigationProps) {
     <header
       className={cn(
         'fixed top-0 left-0 right-0 z-50 transition-all duration-500',
+        visible ? 'translate-y-0 opacity-100' : '-translate-y-full opacity-0',
         scrolled
           ? 'bg-vesta-dark/95 backdrop-blur-md py-3 shadow-lg'
           : 'bg-transparent py-5'
@@ -45,10 +53,11 @@ export default function Navigation({ locale }: NavigationProps) {
         {/* Logo */}
         <Link href={`/${locale}`} className="flex items-center">
           <Image
-            src="https://cdn.prod.website-files.com/6693a42300f08d15d3514511/6694e59f468a02af6267826d_H%20FULL%20LOGO%20-%20WHITE.png"
-            alt="Vesta Muğla"
+            src={SITE.logoUrl}
+            alt={SITE.name}
             width={160}
             height={40}
+            priority
             className="h-8 w-auto object-contain"
           />
         </Link>
@@ -71,6 +80,7 @@ export default function Navigation({ locale }: NavigationProps) {
           {/* Dil seçici */}
           <Link
             href={`/${otherLocale}`}
+            aria-label={`Switch language to ${otherLocale === 'tr' ? 'Turkish' : 'English'}`}
             className="text-white/60 hover:text-white text-xs tracking-widest uppercase transition-colors"
           >
             {otherLocale}
@@ -78,8 +88,8 @@ export default function Navigation({ locale }: NavigationProps) {
 
           {/* Telefon */}
           <a
-            href="tel:+904443145"
-            className="flex items-center gap-2 bg-white/10 hover:bg-white/20 text-white px-4 py-2 rounded-full text-sm tracking-wide transition-all duration-200"
+            href={SITE.phoneHref}
+            className="flex items-center gap-2 bg-white/10 hover:bg-white/20 text-white px-4 py-2 rounded-full text-sm tracking-wide transition-all duration-200 active:scale-[0.98]"
           >
             <Phone className="w-3.5 h-3.5" />
             {t('phone')}
@@ -90,6 +100,9 @@ export default function Navigation({ locale }: NavigationProps) {
         <button
           className="md:hidden text-white p-2"
           onClick={() => setMenuOpen(!menuOpen)}
+          aria-label={menuOpen ? 'Close menu' : 'Open menu'}
+          aria-expanded={menuOpen}
+          aria-controls="mobile-menu"
         >
           {menuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
         </button>
@@ -97,7 +110,7 @@ export default function Navigation({ locale }: NavigationProps) {
 
       {/* Mobile menu */}
       {menuOpen && (
-        <div className="md:hidden bg-vesta-dark/98 backdrop-blur-md border-t border-white/10">
+        <div id="mobile-menu" className="md:hidden bg-vesta-dark/98 backdrop-blur-md border-t border-white/10">
           <div className="container mx-auto px-6 py-6 flex flex-col gap-4">
             {links.map((link) => (
               <a
@@ -110,7 +123,7 @@ export default function Navigation({ locale }: NavigationProps) {
               </a>
             ))}
             <div className="flex items-center justify-between pt-2">
-              <a href="tel:+904443145" className="text-white flex items-center gap-2">
+              <a href={SITE.phoneHref} className="text-white flex items-center gap-2">
                 <Phone className="w-4 h-4" />
                 {t('phone')}
               </a>
diff --git a/components/sections/CloudRevealSection.tsx b/components/sections/CloudRevealSection.tsx
index 2ab0abe..27ad702 100644
--- a/components/sections/CloudRevealSection.tsx
+++ b/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>