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

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>