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

package-lock.json

@@ -24,6 +24,7 @@
         "next": "^14.0.4",
         "postcss": "^8.4.39",
         "react": "^18.2.0",
+        "react-audio-player": "^0.17.0",
         "react-card-slider-component": "^1.0.9",
         "react-dom": "^18.2.0",
         "react-slick": "^0.30.2",
@@ -22204,6 +22205,19 @@
       "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
       "license": "MIT"
     },
+    "node_modules/react-audio-player": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/react-audio-player/-/react-audio-player-0.17.0.tgz",
+      "integrity": "sha512-aCZgusPxA9HK7rLZcTdhTbBH9l6do9vn3NorgoDZRxRxJlOy9uZWzPaKjd7QdcuP2vXpxGA/61JMnnOEY7NXeA==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
     "node_modules/react-card-slider-component": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/react-card-slider-component/-/react-card-slider-component-1.0.9.tgz",

package.json

@@ -26,6 +26,7 @@
     "next": "^14.0.4",
     "postcss": "^8.4.39",
     "react": "^18.2.0",
+    "react-audio-player": "^0.17.0",
     "react-card-slider-component": "^1.0.9",
     "react-dom": "^18.2.0",
     "react-slick": "^0.30.2",

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="/experiences">EVENTS</NavLink>
-              <NavLink href="/dahabiyas">DAHABIYAS</NavLink>
+              <NavLink href="/dahabiyas">CONTACT</NavLink>
-              <NavLink href="/itinerary">ITINERARY</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;

yarn.lock

@@ -10836,7 +10836,7 @@ prompts@^2.0.1, prompts@2.4.0:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.6.2, prop-types@^15.8.1:
+prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -11011,6 +11011,13 @@ react-app-polyfill@^2.0.0:
     regenerator-runtime "^0.13.7"
     whatwg-fetch "^3.4.1"
 
+react-audio-player@^0.17.0:
+  version "0.17.0"
+  resolved "https://registry.npmjs.org/react-audio-player/-/react-audio-player-0.17.0.tgz"
+  integrity sha512-aCZgusPxA9HK7rLZcTdhTbBH9l6do9vn3NorgoDZRxRxJlOy9uZWzPaKjd7QdcuP2vXpxGA/61JMnnOEY7NXeA==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-card-slider-component@^1.0.7, react-card-slider-component@^1.0.9:
   version "1.0.9"
   resolved "https://registry.npmjs.org/react-card-slider-component/-/react-card-slider-component-1.0.9.tgz"
@@ -11057,7 +11064,7 @@ react-dev-utils@^11.0.3:
     strip-ansi "6.0.0"
     text-table "0.2.0"
 
-react-dom@*, "react-dom@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom@^17.0.0 || ^18.0.0 || ^19.0.0", react-dom@^18, "react-dom@^18.0.0 || ^19.0.0", react-dom@^18.2.0, react-dom@>=16.13, react-dom@>=16.6.0, react-dom@>=16.8.0:
+react-dom@*, "react-dom@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom@^17.0.0 || ^18.0.0 || ^19.0.0", react-dom@^18, "react-dom@^18.0.0 || ^19.0.0", react-dom@^18.2.0, react-dom@>=16, react-dom@>=16.13, react-dom@>=16.6.0, react-dom@>=16.8.0:
   version "18.3.1"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz"
   integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
@@ -11201,7 +11208,7 @@ react-use-measure@^2.1.7:
   resolved "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.7.tgz"
   integrity sha512-KrvcAo13I/60HpwGO5jpW7E9DfusKyLPLvuHlUyP5zqnmAPhNc6qTRjUQrdTADl0lpPpDVU2/Gg51UlOGHXbdg==
 
-react@*, "react@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0", "react@^17.0.0 || ^18.0.0 || ^19.0.0", react@^18, "react@^18.0.0 || ^19.0.0", react@^18.2.0, react@^18.3.1, "react@>= 16", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", react@>=16.13, react@>=16.6.0, react@>=16.8.0:
+react@*, "react@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0", "react@^17.0.0 || ^18.0.0 || ^19.0.0", react@^18, "react@^18.0.0 || ^19.0.0", react@^18.2.0, react@^18.3.1, "react@>= 16", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", react@>=16, react@>=16.13, react@>=16.6.0, react@>=16.8.0:
   version "18.3.1"
   resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz"
   integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==