b

components/Navbar.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from "react";
 import Link from "next/link";
+import Image from "next/image";
 import { usePathname } from "next/navigation";
 import { motion, AnimatePresence } from "framer-motion";
 import { Menu, X } from "lucide-react";
@@ -43,21 +44,15 @@ export default function Navbar() {
         <div className="flex justify-between items-center">
 
           {/* Logo */}
-          <Link href="/" className="flex-shrink-0 flex flex-col leading-none group">
-            <span
-              className={`font-serif text-xl font-bold tracking-[0.08em] transition-colors ${
-                scrolled ? "text-primary" : isHome ? "text-white" : "text-primary"
-              }`}
-            >
-              KITE BEACH
-            </span>
-            <span
-              className={`text-[9px] tracking-[0.3em] uppercase font-medium transition-colors ${
-                scrolled ? "text-muted" : isHome ? "text-white/50" : "text-muted"
-              }`}
-            >
-              Akyaka
-            </span>
+          <Link href="/" className="flex-shrink-0 flex items-center group">
+            <Image 
+              src="/logo.png" 
+              alt="Kite Beach Logo" 
+              width={140} 
+              height={48} 
+              className={`object-contain transition-all duration-300 ${!scrolled && isHome ? 'brightness-0 invert' : ''}`}
+              priority
+            />
           </Link>
 
           {/* Desktop links */}