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 @

package-lock.json

@@ -13,6 +13,7 @@
         "@headlessui/react": "^2.1.2",
         "@headlessui/tailwindcss": "^0.2.0",
         "@heroicons/react": "^2.1.5",
+        "@kevtucker/react-audio-player-bar": "^0.0.2",
         "@mui/material": "^7.3.1",
         "@tailwindcss/aspect-ratio": "^0.4.2",
         "@tailwindcss/forms": "^0.5.3",
@@ -4266,6 +4267,19 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@kevtucker/react-audio-player-bar": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@kevtucker/react-audio-player-bar/-/react-audio-player-bar-0.0.2.tgz",
+      "integrity": "sha512-OdyXLPTqutRIXgmiWYrpgOvD1QI7u7ohLGu0cHG8nEGcwbHBmrToQercW7h3Rz+Kt7hGcbtpUxshtcwptEmhiQ==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss": "8"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/@mui/core-downloads-tracker": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.3.1.tgz",

package.json

@@ -15,6 +15,7 @@
     "@headlessui/react": "^2.1.2",
     "@headlessui/tailwindcss": "^0.2.0",
     "@heroicons/react": "^2.1.5",
+    "@kevtucker/react-audio-player-bar": "^0.0.2",
     "@mui/material": "^7.3.1",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.3",

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">
+        <div className="relative -mt-20 min-h-screen">
-      {/* Background Video */}
       <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">
+      <BgNoise />
-        NILE CRUISES{' '}
+      <Container className="flex min-h-screen items-center pb-16 pt-20 text-center lg:pt-32">
-        <span className="relative whitespace-nowrap text-gold-400">
+        <div className="relative z-10 mx-auto flex justify-center">
-          <svg
+          <Image
-            aria-hidden="true"
+            src="/images/noire_logo.png"
-            viewBox="0 0 418 42"
+            alt="Maison Noire"
-            className="absolute left-0 top-2/3 h-[0.58em] w-full fill-gold-900"
+            width={500}
-            preserveAspectRatio="none"
+            height={500}
-          >
+            className="object-contain"
-            <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>
+        </div>
-          <span className="relative">REIMAGINED</span>
+      </Container>
-        </span>{' '}
+    </div>
-      </h1>
-    </Container>
   )
 }

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;

yarn.lock

@@ -1768,6 +1768,13 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@kevtucker/react-audio-player-bar@^0.0.2":
+  version "0.0.2"
+  resolved "https://registry.npmjs.org/@kevtucker/react-audio-player-bar/-/react-audio-player-bar-0.0.2.tgz"
+  integrity sha512-OdyXLPTqutRIXgmiWYrpgOvD1QI7u7ohLGu0cHG8nEGcwbHBmrToQercW7h3Rz+Kt7hGcbtpUxshtcwptEmhiQ==
+  dependencies:
+    postcss "8"
+
 "@mui/core-downloads-tracker@^7.3.1":
   version "7.3.1"
   resolved "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.3.1.tgz"
@@ -10692,7 +10699,7 @@ postcss@^7.0.6:
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
-postcss@^8.0.0, postcss@^8.1.0, postcss@^8.2.14, postcss@^8.4.21, postcss@^8.4.23, postcss@^8.4.39, postcss@>=8.0.9:
+postcss@^8.0.0, postcss@^8.1.0, postcss@^8.2.14, postcss@^8.4.21, postcss@^8.4.23, postcss@^8.4.39, postcss@>=8.0.9, postcss@8:
   version "8.4.39"
   resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz"
   integrity sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==