feat: redesign homepage with audio player and simplified navigation

- Added audio player bar component with custom music track integration
- Simplified header navigation by removing logo and "Book Now" button
- Updated hero section with new centered logo design and background noise effect
- Removed redundant navigation links and reorganized mobile menu
- Added new background noise component with video overlay effect
- Replaced static noise video with new version and added audio file
- Installed @

src/app/page.jsx

@@ -2,6 +2,7 @@
 import { Footer } from '@/components/Footer'
 import { Header } from '@/components/Header'
 import { Hero } from '@/components/Hero'
+import { AudioPlayerBar } from '@/components/ui/AudioPlayerBar'
 
 
 

src/components/BgNoise.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+const BgNoise = () => {
+  return (
+        <div className="absolute inset-0 -z-10 h-full w-full opacity-20">
+      <video
+        autoPlay
+        loop
+        muted
+        playsInline
+        className="object-cover w-full h-full"
+      >
+        <source src="/videos/noise2.mp4" type="video/mp4" />
+      </video>
+    </div>
+  );
+};
+
+export default BgNoise;

src/components/Header.jsx

@@ -71,8 +71,6 @@ function MobileNavigation() {
         <MobileNavLink href="/experiences">EXPERIENCES</MobileNavLink>
         <MobileNavLink href="/dahabiyas">DAHABIYAS</MobileNavLink>
         <MobileNavLink href="/itinerary">ITINERARY</MobileNavLink>
-        <hr className="m-2 border-slate-300/40" />
-        <MobileNavLink href="/contact">BOOK NOW</MobileNavLink>
       </PopoverPanel>
     </Popover>
   )
@@ -82,11 +80,8 @@ export function Header() {
   return (
     <header className="fixed top-0 left-0 right-0 z-50 bg-black/20 backdrop-blur-sm py-4">
       <Container>
-        <nav className="relative z-50 flex justify-between">
+        <nav className="relative z-50 flex justify-center">
           <div className="flex items-center md:gap-x-12">
-            <Link href="/" aria-label="Home" className="overflow-visible">
-              <Logo className="h-8 w-auto max-w-none sm:h-9 md:h-10 lg:h-11 xl:h-12" />
-            </Link>
             <div className="hidden md:flex md:gap-x-6">
               <NavLink href="/">HOME</NavLink>
               <NavLink href="/story">STORY</NavLink>
@@ -96,11 +91,6 @@ export function Header() {
             </div>
           </div>
           <div className="flex items-center gap-x-5 md:gap-x-8">
-            <Button href="/contact" color="blue">
-              <span className="font-semibold tracking-wide">
-                Book Now
-              </span>
-            </Button>
             <div className="-mr-1 md:hidden">
               <MobileNavigation />
             </div>

src/components/Hero.jsx

@@ -1,29 +1,27 @@
 import Image from 'next/image'
 import { Button } from '@/components/Button'
 import { Container } from '@/components/Container'
+import BgNoise from '@/components/BgNoise'
 
 export function Hero() {
   return (
-    <Container className="flex min-h-screen items-center pb-16 pt-20 text-center lg:pt-32">
-      {/* Background Video */}
+        <div className="relative -mt-20 min-h-screen">
       <div
-        className="absolute inset-0 top-0 left-0 w-full h-full object-cover -z-10"
+        className="absolute inset-0 -z-20 h-full w-full object-cover"
         style={{ backgroundImage: 'url(/images/hero.jpg)', backgroundSize: 'cover', backgroundPosition: 'center' }}
       />
-      <h1 className="relative z-10 mx-auto max-w-4xl font-display text-5xl font-medium tracking-tight text-white sm:text-7xl">
-        NILE CRUISES{' '}
-        <span className="relative whitespace-nowrap text-gold-400">
-          <svg
-            aria-hidden="true"
-            viewBox="0 0 418 42"
-            className="absolute left-0 top-2/3 h-[0.58em] w-full fill-gold-900"
-            preserveAspectRatio="none"
-          >
-            <path d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z" />
-          </svg>
-          <span className="relative">REIMAGINED</span>
-        </span>{' '}
-      </h1>
-    </Container>
+      <BgNoise />
+      <Container className="flex min-h-screen items-center pb-16 pt-20 text-center lg:pt-32">
+        <div className="relative z-10 mx-auto flex justify-center">
+          <Image
+            src="/images/noire_logo.png"
+            alt="Maison Noire"
+            width={500}
+            height={500}
+            className="object-contain"
+          />
+        </div>
+      </Container>
+    </div>
   )
 }

src/components/ui/AudioPlayerBar.jsx

@@ -0,0 +1,13 @@
+import AudioPlayerBar from '@kevtucker/react-audio-player-bar';
+
+function BottomAudioPlayer() {
+  return (
+    <AudioPlayerBar 
+      audioSrc="/audios/illbe.mp3"
+      placement="bottom"
+      // other props as supported
+    />
+  );
+}
+
+export default BottomAudioPlayer;