Initial commit: Maria Malejka memorial website

Next.js 14 + node:sqlite memorial site with: - Hero section, photo slideshow & gallery - Memory/thoughts editor (admin) - Music player with upload - Video gallery - Docker Compose deployment - Responsive warm earth tone design
2026-02-16 01:26:37 +01:00
commit bdcfa8f3c5
29 changed files with 3779 additions and 0 deletions
@@ -0,0 +1,129 @@
+import { getDb } from '@/lib/db'
+import type { Memory, MediaItem } from '@/lib/types'
+import HeroSection from '@/components/HeroSection'
+import PhotoSlideshow from '@/components/PhotoSlideshow'
+import PhotoGallery from '@/components/PhotoGallery'
+import MemorySection from '@/components/MemorySection'
+import MusicPlayer from '@/components/MusicPlayer'
+import VideoGallery from '@/components/VideoGallery'
+
+export const dynamic = 'force-dynamic'
+
+export default async function HomePage() {
+  const db = getDb()
+
+  const photos = db
+    .prepare("SELECT * FROM media WHERE type = 'photo' ORDER BY sort_order, created_at")
+    .all() as MediaItem[]
+  const videos = db
+    .prepare("SELECT * FROM media WHERE type = 'video' ORDER BY sort_order, created_at")
+    .all() as MediaItem[]
+  const music = db
+    .prepare("SELECT * FROM media WHERE type = 'music' ORDER BY sort_order, created_at")
+    .all() as MediaItem[]
+  const memories = db
+    .prepare('SELECT * FROM memories ORDER BY created_at DESC')
+    .all() as Memory[]
+
+  return (
+    <main className="min-h-screen bg-cream">
+      {/* Hero */}
+      <HeroSection heroPhoto={photos[0]?.filename ?? null} />
+
+      {/* Navigation anchors */}
+      <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"
+            >
+              Bilder
+            </a>
+          )}
+          {memories.length > 0 && (
+            <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"
+            >
+              Videos
+            </a>
+          )}
+        </div>
+      </nav>
+
+      {/* Photo section */}
+      {photos.length > 0 && (
+        <section id="bilder" className="py-16 sm:py-20">
+          <div className="max-w-6xl mx-auto px-4">
+            <div className="text-center mb-12">
+              <h2 className="font-cormorant italic text-4xl sm:text-5xl text-warm-brown mb-3">
+                Erinnerungen in Bildern
+              </h2>
+              <div className="flex items-center justify-center gap-4">
+                <div className="h-px w-16 bg-warm-gold/40" />
+                <span className="text-warm-gold text-xl">✦</span>
+                <div className="h-px w-16 bg-warm-gold/40" />
+              </div>
+            </div>
+
+            {photos.length > 1 && <PhotoSlideshow photos={photos} />}
+            <PhotoGallery photos={photos} />
+          </div>
+        </section>
+      )}
+
+      {/* Memories */}
+      <MemorySection memories={memories} />
+
+      {/* Videos */}
+      <VideoGallery videos={videos} />
+
+      {/* Music player */}
+      <MusicPlayer tracks={music} />
+
+      {/* Footer */}
+      <footer className="py-16 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>
+        </div>
+
+        {/* Hidden admin link */}
+        <a
+          href="/admin"
+          className="mt-10 inline-block text-warm-border/30 hover:text-warm-border/60 text-xs transition-colors"
+          title="Verwaltung"
+        >
+          ·
+        </a>
+      </footer>
+    </main>
+  )
+}