0a2f79ee5e
SvelteKit Single-Page Website für den rumänischen Foodtruck "Graffen": - Hero mit Vanta.js Fog-Effekt und ornamentiertem Scroll-Button - Speisekarte mit Sommer-/Winterkarte (JSON-basiert), Allergenen, Vegetarisch/Vegan-Kennzeichnung - Catering-Sektion mit Anlass-Karten und CTAs - Geschichte-Sektion mit Brand-Story - Kontakt mit Instagram/E-Mail - Ornamentierte Buttons und Modal im mittelalterlichen Stil - Responsive Design mit warmem Sepia/Gold-Farbschema - Lokale Fonts (Inter + UnifrakturMaguntia via @fontsource) - Static Adapter für einfaches Hosting Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
94 lines
3.7 KiB
Svelte
94 lines
3.7 KiB
Svelte
<script lang="ts">
|
|
import OrnateButton from './OrnateButton.svelte';
|
|
</script>
|
|
|
|
<section id="catering" class="bg-brown py-20 text-cream">
|
|
<div class="mx-auto max-w-4xl px-6">
|
|
<h2 class="font-gothic mb-4 text-center text-5xl text-gold md:text-6xl">Catering</h2>
|
|
<p class="mx-auto mb-14 max-w-2xl text-center text-lg text-cream/80">
|
|
Euer Event, unser Foodtruck – für unvergessliche Momente mit authentischer rumänischer
|
|
Küche.
|
|
</p>
|
|
|
|
<!-- Anlässe Grid -->
|
|
<div class="mb-14 grid gap-6 md:grid-cols-3">
|
|
<div class="rounded-lg border border-gold/20 bg-cream/5 p-6 text-center">
|
|
<div class="mb-4 text-3xl">🍺</div>
|
|
<h3 class="mb-2 text-lg font-semibold text-gold">Hochzeiten</h3>
|
|
<p class="text-sm text-cream/70">
|
|
Macht euren großen Tag besonders – mit rumänischen Spezialitäten frisch vom Grill.
|
|
Rustikales Flair trifft auf Festlichkeit.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="rounded-lg border border-gold/20 bg-cream/5 p-6 text-center">
|
|
<div class="mb-4 text-3xl">🏢</div>
|
|
<h3 class="mb-2 text-lg font-semibold text-gold">Firmenfeiern</h3>
|
|
<p class="text-sm text-cream/70">
|
|
Sommerfest, Jubiläum oder Teambuilding? Wir sorgen für zufriedene Bäuche und gute
|
|
Stimmung bei euren Mitarbeitern.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="rounded-lg border border-gold/20 bg-cream/5 p-6 text-center">
|
|
<div class="mb-4 text-3xl">🎇</div>
|
|
<h3 class="mb-2 text-lg font-semibold text-gold">Private Feiern</h3>
|
|
<p class="text-sm text-cream/70">
|
|
Geburtstag, Gartenparty oder Familientreffen – wir kommen mit dem Foodtruck direkt
|
|
zu euch und kümmern uns ums Essen.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- USPs -->
|
|
<div class="mb-14 rounded-lg border border-gold/30 bg-gold/5 p-8">
|
|
<h3 class="mb-6 text-center text-xl font-semibold text-gold">Was wir mitbringen</h3>
|
|
<div class="grid gap-4 text-sm text-cream/80 md:grid-cols-2">
|
|
<div class="flex items-start gap-3">
|
|
<span class="mt-0.5 text-gold">✓</span>
|
|
<span>Unser voll ausgestatteter Foodtruck – autark und flexibel</span>
|
|
</div>
|
|
<div class="flex items-start gap-3">
|
|
<span class="mt-0.5 text-gold">✓</span>
|
|
<span>Frische Zubereitung vor Ort – euer Event wird zum Erlebnis</span>
|
|
</div>
|
|
<div class="flex items-start gap-3">
|
|
<span class="mt-0.5 text-gold">✓</span>
|
|
<span>Individuelle Menüplanung abgestimmt auf eure Gästezahl</span>
|
|
</div>
|
|
<div class="flex items-start gap-3">
|
|
<span class="mt-0.5 text-gold">✓</span>
|
|
<span>Flexible Anpassung an Allergien und Ernährungswünsche</span>
|
|
</div>
|
|
<div class="flex items-start gap-3">
|
|
<span class="mt-0.5 text-gold">✓</span>
|
|
<span>Events ab 30 Personen – von intim bis groß</span>
|
|
</div>
|
|
<div class="flex items-start gap-3">
|
|
<span class="mt-0.5 text-gold">✓</span>
|
|
<span>Einsatzbereit in der gesamten Region</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CTA -->
|
|
<div class="text-center">
|
|
<p class="mb-8 text-cream/70">
|
|
Erzählt uns von eurem Event – wir erstellen euch ein unverbindliches Angebot.
|
|
</p>
|
|
<div class="flex flex-col items-center justify-center gap-6 sm:flex-row">
|
|
<OrnateButton href="mailto:hallo@graffen-foodtruck.de?subject=Catering-Anfrage">
|
|
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
|
|
/>
|
|
</svg>
|
|
Catering anfragen
|
|
</OrnateButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|