sashaastiadi/www_maison_noire
1
0
Fork 0
forked from veda/www_veda_2025
Code Pull Requests Activity

feat: redesign homepage with audio player and simplified navigation

Browse Source 
- 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 @
This commit is contained in:
sasha-astiadi
2025-10-24 02:48:01 +02:00
parent ba31d1e860
commit 24110d6e92
10 changed files with 73 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
package-lock.json generated
View File

@@ -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",

1
package.json
View File

@@ -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",

BIN
public/audios/illbe.mp3 Normal file
View File

Binary file not shown.

BIN
public/videos/noise.mp4
View File

Binary file not shown.

1
src/app/page.jsx
View File

@@ -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'

19
src/components/BgNoise.jsx Normal file
View File

@@ -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;

12
src/components/Header.jsx
View File

@@ -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>

34
src/components/Hero.jsx
View File

@@ -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>
)
}

13
src/components/ui/AudioPlayerBar.jsx Normal file
View File

@@ -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;

9
yarn.lock
View File

@@ -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==