// Seiten der Onkelfinke Website (Wireframe v1) const { Header, Footer, Marquee, WFNote, Section, Btn, PH, navigate } = window.UI; const { ANLAESSE, BAUSTEINE, GALERIE, SAEULEN, PROZESS } = window.SITE_DATA; // ============ HOME ============ function HomePage() { return ( <> {/* HERO */}

Du sagst was,
wir machen.

Hochzeit, Geburtstag, Firmenfeier — wir planen, kochen und servieren. Du musst nichts machen außer feiern.

navigate('/konfigurator')}>Fest in 5 Minuten planen navigate('/kontakt')}>Direkt anfragen
{/* Schnell-Pfade in Anlässe */}
Oder direkt zu deinem Anlass:
{ANLAESSE.map(a => ( {a.emoji} {a.label} ))}
{/* MARQUEE */} {/* DREI SÄULEN */}
{SAEULEN.map(s => ( ))}
{/* ANLASS-GRID */}
{ANLAESSE.map(a => (
{a.emoji}

{a.label}

{a.desc}

Pakete ansehen →
 ))}
{/* GALERIE-TEASER */}
{GALERIE.slice(0, 6).map((g, i) => (
))}
navigate('/galerie')}>Ganze Galerie ansehen
{/* PROZESS */}
So läuft's} title={Vier Schritte zum entspannten Fest.}>
{PROZESS.map(p => (
— {p.num} —

{p.titel}

{p.desc}

))}
{/* CTA */}

Lust auf dein Fest?

Stell dir online dein Wunschpaket zusammen — unverbindlich, kostenlos, in 5 Minuten.

navigate('/konfigurator')}>Jetzt Fest planen
); } // ============ ANLAESSE OVERVIEW ============ function AnlaesseOverview() { return ( <>

Klick dich rein — auf jeder Anlass-Seite zeigen wir Beispiel-Pakete, typische Abläufe und Bilder von echten Festen.

{ANLAESSE.map(a => (
{a.label}
{a.emoji}

{a.label}

{a.desc}

Mehr ansehen →
 ))}
); } // ============ ANLASS DETAIL ============ function AnlassDetail({ id }) { const a = ANLAESSE.find(x => x.id === id) || ANLAESSE[0]; const beispielPakete = [ { name: 'Klein & fein', personen: '20-40', start: 1800, leistungen: ['Buffet', 'Soft-Getränke', 'Service 4h'] }, { name: 'Klassisch', personen: '60-100', start: 4800, leistungen: ['Mehrgang-Menü', 'All-Inclusive', 'Volles Team', 'DJ'] }, { name: 'Volles Programm', personen: '100+', start: 9800, leistungen: ['Foodtruck + Buffet', 'Premium-Drinks', 'Vollservice', 'DJ + Photobooth'] }, ]; return ( <> {/* Hero */}
← Alle Anlässe
{a.emoji}

{a.label}

{a.desc}

{a.label
{/* Beispiel-Pakete */}

Sind nur Beispiele — im Konfigurator stellst du dir alles individuell zusammen.

{beispielPakete.map((p, i) => (
{p.personen} Personen

{p.name}

{p.leistungen.map((l, j) =>
· {l}
)}
ab {p.start.toLocaleString('de-DE')} €
))}
{/* Typischer Ablauf */}
{[ { z: '14:00', t: 'Anlieferung & Aufbau', d: 'Wir kommen früh, du musst nichts tun.' }, { z: '16:00', t: 'Trauung / Empfang', d: 'Sektempfang, kleine Häppchen.' }, { z: '19:00', t: 'Dinner', d: 'Buffet oder Menü — nach Wunsch.' }, { z: '21:00', t: 'Tanzfläche', d: 'Tanz, Reden, Musik.' }, { z: '23:30', t: 'Mitternachtssnack', d: 'Burger, Pommes, Käseplatte.' }, { z: '02:00', t: 'Abbau', d: 'Wir räumen alles weg. Du gehst ins Bett.' }, ].map((item, i) => (
{item.z}
{item.t}
{item.d}
 ))}
{/* CTA */}

Klingt gut? Stell dir dein {a.label.toLowerCase()}-Paket zusammen.

navigate('/konfigurator?anlass=' + a.id)}>Jetzt konfigurieren
Lieber direkt anrufen →
); } // ============ LEISTUNGEN ============ function LeistungenPage() { const cats = Object.entries(BAUSTEINE); return ( <>

Buchbar einzeln oder als Komplettpaket. Im Konfigurator klickst du dir genau das, was du brauchst.

{cats.map(([key, cat], idx) => (
— 0{idx + 1} —

{cat.title}

{cat.subtitle}

{cat.options.map(o => (
{o.label}
{o.desc}
{o.price > 0 ? ( <>
{o.price} €
{o.unit}
) : (
auf Anfrage
)}
))}
))}
navigate('/konfigurator')}>Jetzt zusammenstellen
); } // ============ GALERIE ============ function GaleriePage() { const [filter, setFilter] = React.useState('Alle'); const cats = ['Alle', ...Array.from(new Set(GALERIE.map(g => g.kategorie)))]; const items = filter === 'Alle' ? GALERIE : GALERIE.filter(g => g.kategorie === filter); return ( <>
{cats.map(c => ( ))}
{items.map((g, i) => (
))}
); } // ============ ÜBER UNS ============ function UeberUnsPage() { return ( <>
Onkel Finke
kocht für dich.}>
Onkel Finke

Wir sind ein kleines Team aus Hamburg, das seit Jahren Feste plant und bekocht. Angefangen haben wir mit einem Grill und ein paar Bierzeltgarnituren — heute übernehmen wir komplette Hochzeiten, Firmenfeiern und alles dazwischen.

Unser Versprechen: Dein Tag, unser Handwerk. Keine versteckten Posten, kein Stress, kein Schnickschnack. Wir kochen ehrlich, servieren freundlich und räumen am Ende selber auf.

navigate('/kontakt')}>Lass schnacken
{[ { t: 'Ehrlich', d: 'Klare Preise, keine Überraschungen auf der Rechnung.' }, { t: 'Regional', d: 'Zutaten von Bauern aus der Umgebung, wo immer möglich.' }, { t: 'Persönlich', d: 'Du redest mit uns — nicht mit einem Callcenter.' }, ].map((v, i) => (
— 0{i + 1} —

{v.t}

{v.d}

))}
); } // ============ KONTAKT ============ function KontaktPage() { return ( <>
Telefon & WhatsApp
0152 058 620 58
E-Mail
info@onkelfinke.de
Adresse
Hauskoppelstieg 7
22111 Hamburg

Schnell-Anfrage

{ e.preventDefault(); const fd = new FormData(e.target); const subject = `Anfrage: ${fd.get('anlass') || ''} — ${fd.get('name') || ''}`; const body = [ `Name: ${fd.get('name') || ''}`, `E-Mail: ${fd.get('email') || ''}`, `Telefon: ${fd.get('telefon') || ''}`, `Anlass: ${fd.get('anlass') || ''}`, `Datum: ${fd.get('datum') || ''}`, `Personen: ${fd.get('personen') || ''}`, '', 'Worum geht\'s?', fd.get('nachricht') || '', '', '— Gesendet über onkelfinke.de' ].join('\n'); window.location.href = `mailto:info@onkelfinke.de?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`; }}> {[ { name: 'name', label: 'Name', type: 'text', required: true }, { name: 'email', label: 'E-Mail', type: 'email', required: true }, { name: 'telefon', label: 'Telefon', type: 'tel' }, { name: 'anlass', label: 'Anlass', type: 'text' }, { name: 'datum', label: 'Datum (geplant)', type: 'date' }, { name: 'personen', label: 'Personen', type: 'number' }, { name: 'nachricht', label: 'Worum geht\'s?', type: 'textarea' }, ].map((f) => (
{f.label}
{f.type === 'textarea' ?