feat: integrate Cloudinary image upload, Instagram Feed, and fix Next.js warnings

components/Navbar.tsx

@@ -2,6 +2,7 @@
 
 import { useTranslations } from 'next-intl';
 import { Link, usePathname, useRouter } from '@/i18n/routing';
+import Image from 'next/image';
 import { useState, useEffect } from 'react';
 import { Menu, X } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
@@ -26,7 +27,6 @@ export default function Navbar({ locale }: { locale: string }) {
 
   const navLinks = [
     { href: pathname === '/' ? '#about' : '/#about', label: t('about') },
-    { href: '/accommodation', label: t('accommodation') },
     { href: pathname === '/' ? '#beach' : '/#beach', label: t('beach') },
     { href: pathname === '/' ? '#dining' : '/#dining', label: t('dining') },
     { href: pathname === '/' ? '#events' : '/#events', label: t('events') },
@@ -36,30 +36,25 @@ export default function Navbar({ locale }: { locale: string }) {
 
   return (
     <nav
-      className={`fixed top-0 left-0 w-full z-50 transition-all duration-300 ${
-        isScrolled
+      className={`fixed top-0 left-0 w-full z-50 transition-all duration-300 ${isScrolled
           ? 'bg-white/90 backdrop-blur-lg shadow-sm py-4 border-b border-sandy/40'
           : 'bg-transparent py-6'
-      }`}
+        }`}
     >
       <div className="container mx-auto px-6 lg:px-12 flex justify-between items-center">
 
         {/* Logo */}
-        <Link href="/" className="flex flex-col items-start">
-          <span
-            className={`font-heading text-2xl font-black uppercase tracking-tighter ${
-              isScrolled ? 'text-midnight' : 'gradient-text-warm'
+        <Link href="/" className="relative w-40 h-16 flex items-center transform transition-transform hover:scale-105">
+          <Image 
+            src="/logo.png" 
+            alt="Kozmos Logo" 
+            fill
+            priority
+            sizes="(max-width: 768px) 160px, 160px"
+            className={`object-contain transition-all duration-300 ${
+              isScrolled ? 'filter-none' : 'brightness-0 invert drop-shadow-[0_2px_4px_rgba(0,0,0,0.5)]'
             }`}
-          >
-            Kozmos
-          </span>
-          <span
-            className={`text-[10px] tracking-[0.4em] font-body uppercase ${
-              isScrolled ? 'text-coral' : 'text-white/40'
-            }`}
-          >
-            Beach &amp; More
-          </span>
+          />
         </Link>
 
         {/* Desktop Nav */}
@@ -69,9 +64,8 @@ export default function Navbar({ locale }: { locale: string }) {
               <Link
                 key={link.href}
                 href={link.href}
-                className={`text-sm font-medium tracking-wide transition-colors hover:text-coral ${
-                  isScrolled ? 'text-midnight/70' : 'text-white/80'
-                }`}
+                className={`text-sm font-medium tracking-wide transition-colors hover:text-coral ${isScrolled ? 'text-midnight/70' : 'text-white/80'
+                  }`}
               >
                 {link.label}
               </Link>
@@ -79,21 +73,19 @@ export default function Navbar({ locale }: { locale: string }) {
           </div>
 
           <div
-            className={`flex items-center gap-3 border-l pl-5 ${
-              isScrolled ? 'border-sandy' : 'border-white/20'
-            }`}
+            className={`flex items-center gap-3 border-l pl-5 ${isScrolled ? 'border-sandy' : 'border-white/20'
+              }`}
           >
             {(['tr', 'en'] as const).map((l) => (
               <button
                 key={l}
                 onClick={() => switchLocale(l)}
-                className={`text-[11px] font-black uppercase tracking-wider transition-colors ${
-                  locale === l
+                className={`text-[11px] font-black uppercase tracking-wider transition-colors ${locale === l
                     ? 'text-coral'
                     : isScrolled
-                    ? 'text-midnight/40'
-                    : 'text-white/40'
-                }`}
+                      ? 'text-midnight/40'
+                      : 'text-white/40'
+                  }`}
               >
                 {l}
               </button>