fix: remove candles, deduplicate dates, add ambient music fallback

- Remove CandleSection from page; dates now appear only in hero
- Footer stripped to just quote + impressum/admin links (no name/dates)
- Musik nav link always visible
- MusicPlayer: Web Audio API ambient mode when no tracks uploaded
  - A-minor pad (55/110/130/164/220 Hz sine oscillators)
  - Feedback delay for spaciousness, per-note LFO swells, 6s fade-in
  - "Stille Begleitung" UI with waveform bars
  - When tracks are uploaded: full track list + cycle mode as before
  - Floating mini-player works for both modes

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
denshooter
2026-02-16 02:19:28 +01:00
parent 4aeb08cb57
commit 1ab5809a82
2 changed files with 297 additions and 246 deletions
+19 -51
View File
@@ -5,7 +5,6 @@ import PhotoSlideshow from '@/components/PhotoSlideshow'
import PhotoGallery from '@/components/PhotoGallery'
import MemorySection from '@/components/MemorySection'
import WriteSection from '@/components/WriteSection'
import CandleSection from '@/components/CandleSection'
import MusicPlayer from '@/components/MusicPlayer'
import VideoGallery from '@/components/VideoGallery'
@@ -36,39 +35,25 @@ export default async function HomePage() {
<nav className="sticky top-0 z-20 bg-cream/80 backdrop-blur-sm border-b border-warm-border">
<div className="max-w-4xl mx-auto px-4 py-3 flex items-center justify-center gap-6 sm:gap-10">
{photos.length > 0 && (
<a
href="#bilder"
className="text-warm-brown-light hover:text-warm-gold text-sm font-cormorant italic transition-colors"
>
<a href="#bilder" className="text-warm-brown-light hover:text-warm-gold text-sm font-cormorant italic transition-colors">
Bilder
</a>
)}
<a
href="#erinnerungen"
className="text-warm-brown-light hover:text-warm-gold text-sm font-cormorant italic transition-colors"
>
<a href="#erinnerungen" className="text-warm-brown-light hover:text-warm-gold text-sm font-cormorant italic transition-colors">
Erinnerungen
</a>
{videos.length > 0 && (
<a
href="#videos"
className="text-warm-brown-light hover:text-warm-gold text-sm font-cormorant italic transition-colors"
>
<a href="#videos" className="text-warm-brown-light hover:text-warm-gold text-sm font-cormorant italic transition-colors">
Videos
</a>
)}
{music.length > 0 && (
<a
href="#musik"
className="text-warm-brown-light hover:text-warm-gold text-sm font-cormorant italic transition-colors"
>
Musik
</a>
)}
<a href="#musik" className="text-warm-brown-light hover:text-warm-gold text-sm font-cormorant italic transition-colors">
Musik
</a>
</div>
</nav>
{/* Photo section */}
{/* Photos */}
{photos.length > 0 && (
<section id="bilder" className="py-16 sm:py-20">
<div className="max-w-6xl mx-auto px-4">
@@ -82,14 +67,13 @@ export default async function HomePage() {
<div className="h-px w-16 bg-warm-gold/40" />
</div>
</div>
{photos.length > 1 && <PhotoSlideshow photos={photos} />}
<PhotoGallery photos={photos} />
</div>
</section>
)}
{/* Write section public */}
{/* Write */}
<WriteSection />
{/* Memories */}
@@ -100,49 +84,33 @@ export default async function HomePage() {
{/* Videos */}
<VideoGallery videos={videos} />
{/* Candle section */}
<CandleSection />
{/* Music player */}
{/* Music always rendered (ambient fallback when no tracks) */}
<MusicPlayer tracks={music} />
{/* Footer */}
<footer className="py-16 text-center border-t border-warm-border bg-amber-50/30">
<footer className="py-12 text-center border-t border-warm-border bg-amber-50/30">
<div className="max-w-lg mx-auto px-4">
<p className="font-cormorant italic text-3xl text-warm-gold mb-3">
In liebevoller Erinnerung
</p>
<p className="font-lora text-warm-brown-light text-sm tracking-wider">
Maria Malejka
</p>
<p className="font-lora text-warm-brown-light/60 text-xs mt-1 tracking-widest">
29. November 1944 10. Februar 2026
</p>
{/* Ornament */}
<div className="flex items-center justify-center gap-3 mt-6 mb-6">
<div className="h-px w-12 bg-warm-gold/20" />
<span className="text-warm-gold/40 text-sm"></span>
<div className="h-px w-12 bg-warm-gold/20" />
</div>
<p className="font-cormorant italic text-warm-brown-light/60 text-lg">
Du bist nicht fort, nur ein Schritt voraus."
</p>
{/* Footer links */}
<div className="mt-10 flex items-center justify-center gap-6">
<div className="flex items-center justify-center gap-3 mt-5">
<div className="h-px w-8 bg-warm-gold/20" />
<span className="text-warm-gold/30 text-xs">✦</span>
<div className="h-px w-8 bg-warm-gold/20" />
</div>
<div className="mt-6 flex items-center justify-center gap-5">
<a
href="/impressum"
className="text-warm-brown-light/40 hover:text-warm-brown-light/70 text-xs font-lora tracking-wider transition-colors duration-200"
className="text-warm-brown-light/35 hover:text-warm-brown-light/65 text-xs font-lora tracking-wider transition-colors duration-200"
>
Impressum
</a>
<span className="text-warm-border/40 text-xs">·</span>
{/* Hidden admin link */}
<a
href="/admin"
className="text-warm-border/30 hover:text-warm-border/60 text-xs transition-colors"
className="text-warm-border/25 hover:text-warm-border/50 text-xs transition-colors"
title="Verwaltung"
>
·