feat: add audio player and update navigation menu

- Added new audio player component with background music autoplay functionality
- Updated navigation menu items and styling:
  - Renamed menu items to MENUS, STORY, EVENTS, CONTACT
  - Modified link styling with new gray color scheme and tracking
- Installed react-audio-player dependency for audio functionality
- Adjusted Hero component layout to improve vertical centering
- Integrated AudioPlayer component in main page layout with fixed positioning

src/app/page.jsx

@@ -1,7 +1,9 @@
 
 import { Footer } from '@/components/Footer'
 import { Header } from '@/components/Header'
-import { Hero } from '@/components/Hero'
+import { Hero } from '@/components/Hero';
+import AudioPlayer from '@/components/ui/AudioPlayer';
+
 
 
 
@@ -10,6 +12,7 @@ export default function Home() {
     <>
       <Header />
       <main>
+        <AudioPlayer />
         <Hero />
       </main>
       <Footer />

src/components/Header.jsx

@@ -78,16 +78,15 @@ function MobileNavigation() {
 
 export function Header() {
   return (
-    <header className="fixed top-0 left-0 right-0 z-50 bg-black/20 backdrop-blur-sm py-4">
+    <header className="fixed top-0 left-0 right-0 z-50 bg-black/10 backdrop-blur-sm py-4">
       <Container>
         <nav className="relative z-50 flex justify-center">
           <div className="flex items-center md:gap-x-12">
             <div className="hidden md:flex md:gap-x-6">
-              <NavLink href="/">HOME</NavLink>
+              <NavLink href="/">MENUS</NavLink>
               <NavLink href="/story">STORY</NavLink>
-              <NavLink href="/experiences">EXPERIENCES</NavLink>
-              <NavLink href="/dahabiyas">DAHABIYAS</NavLink>
-              <NavLink href="/itinerary">ITINERARY</NavLink>
+              <NavLink href="/experiences">EVENTS</NavLink>
+              <NavLink href="/dahabiyas">CONTACT</NavLink>
             </div>
           </div>
           <div className="flex items-center gap-x-5 md:gap-x-8">

src/components/Hero.jsx

@@ -11,7 +11,7 @@ export function Hero() {
         style={{ backgroundImage: 'url(/images/hero.jpg)', backgroundSize: 'cover', backgroundPosition: 'center' }}
       />
       <BgNoise />
-      <Container className="flex min-h-screen items-center pb-16 pt-20 text-center lg:pt-32">
+      <Container className="flex min-h-screen items-center justify-center text-center">
         <div className="relative z-10 mx-auto flex justify-center">
           <Image
             src="/images/noire_logo.png"

src/components/NavLink.jsx

@@ -4,7 +4,7 @@ export function NavLink({ href, children }) {
   return (
     <Link
       href={href}
-      className="inline-block rounded-lg px-2 py-1 text-sm text-gold-900 hover:bg-gold-600 hover:text-slate-900"
+      className="inline-block rounded-lg px-2 py-1 text-sm text-gray-200/80 tracking-widest hover:text-slate-300"
     >
       {children}
     </Link>

src/components/ui/AudioPlayer.jsx

@@ -0,0 +1,18 @@
+'use client';
+
+import ReactAudioPlayer from 'react-audio-player';
+
+const AudioPlayer = () => {
+  return (
+    <div className="fixed bottom-0 left-0 w-full z-50">
+      <ReactAudioPlayer
+        src="/audios/illbe.mp3"
+        autoPlay
+        controls
+        className="w-full"
+      />
+    </div>
+  );
+};
+
+export default AudioPlayer;