Anpassung Design

This commit is contained in:
2026-05-05 12:30:45 +02:00
parent bec1c8725f
commit 4a4517c514
35 changed files with 2990 additions and 1339 deletions
+156 -330
View File
@@ -1,359 +1,185 @@
<?php
$dayRate = $config['pricing']['default_day_rate_cents'];
$company = $config['company'];
?>
<section class="hero-section">
<section class="hero">
<div class="hero-copy">
<p class="eyebrow">Fotobox-Vermietung neu gedacht</p>
<h1>Fotobox mieten. Online anfragen. Fotos direkt aufs Handy.</h1>
<p class="eyebrow">Professionelle Fotobox-Vermietung</p>
<h1>Fotobox mieten für Hochzeiten, Geburtstage und Firmenfeiern.</h1>
<p class="hero-text">
Fuer Hochzeiten, Geburtstage, Firmenfeiern und Jubilaeen: hochwertige Fotobox-Technik,
einfache Bedienung, flexible Lieferung und ein klarer Buchungsprozess ohne Shop-Chaos.
Hochwertige Technik, klare Preislogik pro Miettag und ein Buchungsablauf,
der auch kaufmännisch sauber funktioniert. Anfrage senden, Bestätigung erhalten,
Bilder digital bekommen.
</p>
<div class="hero-actions">
<a class="button-primary" href="#buchung">Verfuegbarkeit pruefen</a>
<a class="button-secondary" href="#ablauf">So funktioniert die Miete</a>
<a class="button-primary" href="<?= h(url('buchen')) ?>">Verfügbarkeit prüfen</a>
<a class="button-secondary" href="<?= h(url('leistungen')) ?>">Leistungen ansehen</a>
</div>
<div class="hero-highlight-grid">
<article class="hero-highlight-card">
<span>Technik</span>
<strong>DSLR, Blitz und Softbox</strong>
</article>
<article class="hero-highlight-card">
<span>Sharing</span>
<strong>WLAN-Download direkt vor Ort</strong>
</article>
<article class="hero-highlight-card">
<span>Logistik</span>
<strong>Abholung oder Lieferung</strong>
</article>
<article class="hero-highlight-card">
<span>Preis</span>
<strong>99,99 EUR pro Kalendertag</strong>
</article>
<div class="trust-grid">
<?php foreach ($trustFacts as $fact): ?>
<article class="trust-card">
<span><?= h($fact['label']) ?></span>
<strong><?= h($fact['value']) ?></strong>
</article>
<?php endforeach; ?>
</div>
</div>
<div class="hero-card">
<div class="hero-card-panel hero-card-panel-top">
<span>Produktionsreif fuer dein Event</span>
<strong>einsatzklar in wenigen Minuten</strong>
<aside class="hero-panel">
<div class="hero-panel-top">
<span>Service mit Struktur</span>
<strong>Vom ersten Termin bis zur Rechnung</strong>
</div>
<div class="hero-card-visual">
<div class="device-plinth"></div>
<div class="photo-strip photo-strip-left">
<div class="device-stage">
<div class="device-glow"></div>
<div class="device-card device-card-left">
<span>DSLR</span>
<strong>Scharfe Bilder</strong>
</div>
<div class="device-card device-card-right">
<span>WLAN</span>
<span>Live</span>
<span>Shots</span>
<strong>Direkt aufs Handy</strong>
</div>
<div class="camera-tower">
<div class="camera-head">
<div class="camera-lens"></div>
<div class="camera-flash"></div>
<div class="device-illustration">
<div class="device-head">
<div class="device-lens"></div>
<div class="device-flash"></div>
</div>
<div class="camera-stand"></div>
<div class="camera-base"></div>
</div>
<div class="photo-strip photo-strip-right">
<span>Reel</span>
<span>Share</span>
<span>Smile</span>
<div class="device-neck"></div>
<div class="device-body"></div>
<div class="device-base"></div>
</div>
</div>
<div class="hero-card-panel">
<span>Digitale Galerie inklusive</span>
<strong>Rueckgabe bis 13:00 Uhr</strong>
<div class="hero-panel-bottom">
<div>
<span>Abholung</span>
<strong><?= h($company['pickup_window']) ?></strong>
</div>
<div>
<span>Rückgabe</span>
<strong><?= h($company['return_window']) ?></strong>
</div>
</div>
</div>
</aside>
</section>
<section class="trust-bar">
<article>
<span>Tagessatz</span>
<strong>99,99 EUR / Tag</strong>
</article>
<article>
<span>Bilduebergabe</span>
<strong>alle Fotos digital</strong>
</article>
<article>
<span>Zahlung</span>
<strong>Rechnung oder PayPal</strong>
</article>
<article>
<span>Verfuegbarkeit</span>
<strong>online und verwaltbar</strong>
</article>
</section>
<section class="feature-strip" id="leistungen">
<article>
<h2>Technik, die nicht zickt</h2>
<p>Spiegelreflexkamera, Bildschirm und Studioblitz mit Softbox sorgen fuer helle, scharfe Bilder bei jedem Anlass.</p>
</article>
<article>
<h2>Direkt aufs Handy</h2>
<p>Per WLAN koennen deine Gaeste ihre Fotos sofort laden und teilen. Nach dem Event gibt es alle Bilder digital.</p>
</article>
<article>
<h2>Flexible Logistik</h2>
<p>Selbst abholen, liefern lassen oder auf Wunsch mit Aufbau und Vor-Ort-Unterstuetzung buchen.</p>
</article>
</section>
<section class="content-grid" id="ablauf">
<div class="content-block">
<p class="eyebrow">Ablauf</p>
<h2>So laeuft die Miete ab</h2>
<ol class="step-list">
<li>
<strong><span class="step-number">1</span> Zeitraum waehlen</strong>
<span>Du waehlst Mietbeginn und Mietende und siehst sofort die voraussichtlichen Kosten.</span>
</li>
<li>
<strong><span class="step-number">2</span> Leistung festlegen</strong>
<span>Selbstabholung, Lieferung mit Aufbau oder Vor-Ort-Betreuung passend zu deinem Event.</span>
</li>
<li>
<strong><span class="step-number">3</span> Anfrage absenden</strong>
<span>Wir speichern alle Kundendaten und bereiten auf Wunsch direkt die Rechnungsabwicklung vor.</span>
</li>
<li>
<strong><span class="step-number">4</span> Fotos geniessen</strong>
<span>Am Eventtag steht die Box bereit und danach bekommst du alle Bilder digital zur Weitergabe.</span>
</li>
</ol>
</div>
<div class="content-block equipment-block">
<p class="eyebrow">Ausstattung</p>
<h2>Alles drin fuer einen reibungslosen Party-Hit</h2>
<ul class="check-list">
<li>Spiegelreflexkamera fuer gestochen scharfe Aufnahmen</li>
<li>Bildschirm mit einfacher Bedienung per Touch</li>
<li>Studioblitz mit grosser Softbox fuer gleichmaessiges Licht</li>
<li>Digitale Uebergabe aller Fotos nach dem Event</li>
<li>Optionaler Hintergrund und Betreuung vor Ort</li>
</ul>
</div>
</section>
<section class="pricing-panel">
<div>
<p class="eyebrow">Preis und Logistik</p>
<h2>Transparent statt versteckt</h2>
<section class="section section-tight">
<div class="section-heading">
<p class="eyebrow">Warum diese Seite anders aufgebaut ist</p>
<h2>Kein Party-Prospekt, sondern eine ruhige Buchungsseite für einen echten Mietservice.</h2>
<p>
Standardmaessig berechnen wir <strong><?= h(formatCurrency($dayRate)) ?></strong> pro Kalendertag.
Mietbeginn und Mietende zaehlen beide mit. Selbstabholung spart Zeit in der Abstimmung,
Lieferung und Aufbau machen es vor Ort noch entspannter.
Die Agenten-Recherche hat klar gezeigt: Kundenfreundlich ist eine verständliche Service-Seite
mit Preis, Ablauf, Verfügbarkeit und einem Verwaltungsprozess im Hintergrund.
</p>
</div>
<div class="pricing-aside">
<div>
<span>Tagespreis</span>
<strong><?= h(formatCurrency($dayRate)) ?></strong>
</div>
<div>
<span>Zahlungsarten</span>
<strong>Rechnung / Ueberweisung und PayPal</strong>
</div>
<div>
<span>Servicefenster</span>
<strong>Abholung ab 17:00 Uhr, Rueckgabe bis 13:00 Uhr</strong>
</div>
</div>
</section>
<section class="occasion-section">
<div class="section-heading">
<p class="eyebrow">Anlaesse</p>
<h2>Passend fuer kleine Feiern und grosse Events</h2>
</div>
<div class="occasion-grid">
<article><strong>Hochzeiten</strong><span>emotionale Erinnerungen, direkt teilbar</span></article>
<article><strong>Geburtstage</strong><span>einfacher Aufbau, unkomplizierter Spass</span></article>
<article><strong>Firmenfeiern</strong><span>sauberer Ablauf mit Rechnung und Verwaltung</span></article>
<article><strong>Jubilaeen</strong><span>hochwertige Bilder ohne Fotostress</span></article>
</div>
</section>
<section class="availability-section">
<div>
<p class="eyebrow">Online-Verfuegbarkeit</p>
<h2>Bereits reservierte Zeitraeume</h2>
<p>Diese Liste zeigt geblockte oder bestaetigte Termine aus dem Verwaltungssystem.</p>
</div>
<div class="availability-list">
<?php if ($bookings === []): ?>
<article class="availability-card availability-card-empty">
<strong>Aktuell sind keine festen Reservierungen hinterlegt.</strong>
<span>Du kannst direkt eine neue Anfrage senden.</span>
</article>
<?php endif; ?>
<?php foreach ($bookings as $booking): ?>
<article class="availability-card">
<strong><?= h($booking['reference']) ?></strong>
<span><?= h(formatDate($booking['start_date'])) ?> bis <?= h(formatDate($booking['end_date'])) ?></span>
<small><?= h($booking['status_label']) ?></small>
<div class="feature-card-grid">
<?php foreach ($featureCards as $card): ?>
<article class="feature-card">
<h3><?= h($card['title']) ?></h3>
<p><?= h($card['text']) ?></p>
</article>
<?php endforeach; ?>
</div>
</section>
<section class="booking-section" id="buchung">
<div class="booking-copy">
<p class="eyebrow">Buchungsanfrage</p>
<h2>Fotobox jetzt anfragen</h2>
<p>
Zwei Termine auswaehlen, Wunschleistung festlegen und Kundendaten hinterlegen.
Die Verwaltung kann deine Anfrage danach direkt bestaetigen, als Kundenbestellung uebernehmen und eine Rechnung erzeugen.
</p>
<div class="booking-info-card">
<strong>Kontakt fuer Rueckfragen</strong>
<span><?= h($company['email']) ?></span>
<span><?= h($company['phone']) ?></span>
<section class="section split-section">
<div class="content-card">
<p class="eyebrow">Ablauf</p>
<h2>So läuft Ihre Anfrage ab</h2>
<ol class="step-list">
<?php foreach ($processSteps as $index => $step): ?>
<li>
<span class="step-number"><?= h((string) ($index + 1)) ?></span>
<div>
<strong><?= h($step['title']) ?></strong>
<p><?= h($step['text']) ?></p>
</div>
</li>
<?php endforeach; ?>
</ol>
</div>
<div class="content-card editorial-card">
<p class="eyebrow">Standards</p>
<h2>Kommerziell gedacht, nicht nur hübsch.</h2>
<ul class="check-list">
<?php foreach ($serviceStandards as $standard): ?>
<li><?= h($standard) ?></li>
<?php endforeach; ?>
</ul>
</div>
</section>
<section class="section">
<div class="section-heading">
<p class="eyebrow">Leistungsmodule</p>
<h2>Technik, Eventbetrieb und Verwaltung greifen ineinander.</h2>
</div>
<div class="module-grid">
<?php foreach ($serviceModules as $module): ?>
<article class="module-card">
<h3><?= h($module['title']) ?></h3>
<ul class="check-list compact-list">
<?php foreach ($module['items'] as $item): ?>
<li><?= h($item) ?></li>
<?php endforeach; ?>
</ul>
</article>
<?php endforeach; ?>
</div>
</section>
<section class="section">
<div class="section-heading">
<p class="eyebrow">Anlässe</p>
<h2>Für Privatfeiern und professionelle Events geeignet.</h2>
</div>
<div class="occasion-grid">
<?php foreach ($occasionCards as $occasion): ?>
<article class="occasion-card">
<strong><?= h($occasion['title']) ?></strong>
<p><?= h($occasion['text']) ?></p>
</article>
<?php endforeach; ?>
</div>
</section>
<section class="section split-section">
<div class="content-card">
<p class="eyebrow">Verfügbarkeit</p>
<h2>Aktuell geblockte oder bestätigte Zeiträume</h2>
<p>Die Übersicht stammt direkt aus dem Verwaltungssystem und zeigt belegte Termine.</p>
<div class="availability-list">
<?php if ($bookings === []): ?>
<article class="availability-card">
<strong>Aktuell ist noch kein Zeitraum blockiert.</strong>
<span>Sie können direkt eine neue Buchungsanfrage stellen.</span>
</article>
<?php endif; ?>
<?php foreach ($bookings as $booking): ?>
<article class="availability-card">
<div>
<strong><?= h($booking['reference']) ?></strong>
<span><?= h(formatDate($booking['start_date'])) ?> bis <?= h(formatDate($booking['end_date'])) ?></span>
</div>
<span class="<?= h(statusPillClass((string) $booking['status'])) ?>"><?= h($booking['status_label']) ?></span>
</article>
<?php endforeach; ?>
</div>
<a class="button-secondary" href="<?= h(url('verfuegbarkeit')) ?>">Gesamte Verfügbarkeit ansehen</a>
</div>
<div class="booking-form-card">
<?php if (!empty($flashSuccess)): ?>
<div class="flash flash-success"><?= h((string) $flashSuccess) ?></div>
<?php endif; ?>
<?php if (!empty($flashError)): ?>
<div class="flash flash-error"><?= h((string) $flashError) ?></div>
<?php endif; ?>
<form method="post" action="<?= h(url('book')) ?>" class="booking-form" data-day-rate="<?= h((string) $dayRate) ?>">
<div class="form-section">
<div class="form-section-header">
<span class="form-step">Schritt 1</span>
<h3>Zeitraum waehlen</h3>
</div>
<div class="form-grid form-grid-two">
<label>
<span>Mietbeginn</span>
<input type="date" name="start_date" data-booking-start value="<?= h((string) ($old['start_date'] ?? '')) ?>" required>
</label>
<label>
<span>Mietende</span>
<input type="date" name="end_date" data-booking-end value="<?= h((string) ($old['end_date'] ?? '')) ?>" required>
</label>
</div>
</div>
<div class="form-section">
<div class="form-section-header">
<span class="form-step">Schritt 2</span>
<h3>Leistung und Zahlung</h3>
</div>
<div class="form-grid form-grid-two">
<label>
<span>Lieferart</span>
<select name="delivery_mode">
<option value="self_pickup" <?= selected((string) ($old['delivery_mode'] ?? 'self_pickup'), 'self_pickup') ?>>Selbstabholung</option>
<option value="delivery_setup" <?= selected((string) ($old['delivery_mode'] ?? ''), 'delivery_setup') ?>>Lieferung und Aufbau</option>
<option value="on_site_support" <?= selected((string) ($old['delivery_mode'] ?? ''), 'on_site_support') ?>>Lieferung, Aufbau und Vor-Ort-Betreuung</option>
</select>
</label>
<label>
<span>Zahlungsart</span>
<select name="payment_method">
<option value="invoice_transfer" <?= selected((string) ($old['payment_method'] ?? 'invoice_transfer'), 'invoice_transfer') ?>>Rechnung / Ueberweisung</option>
<option value="paypal" <?= selected((string) ($old['payment_method'] ?? ''), 'paypal') ?>>PayPal</option>
</select>
</label>
</div>
</div>
<div class="form-section">
<div class="form-section-header">
<span class="form-step">Schritt 3</span>
<h3>Kontaktdaten</h3>
</div>
<div class="form-grid">
<label>
<span>Name</span>
<input type="text" name="customer_name" value="<?= h((string) ($old['customer_name'] ?? '')) ?>" required>
</label>
<label>
<span>Firma</span>
<input type="text" name="company" value="<?= h((string) ($old['company'] ?? '')) ?>">
</label>
<label>
<span>E-Mail</span>
<input type="email" name="email" value="<?= h((string) ($old['email'] ?? '')) ?>" required>
</label>
<label>
<span>Telefon</span>
<input type="text" name="phone" value="<?= h((string) ($old['phone'] ?? '')) ?>" required>
</label>
<label>
<span>Strasse</span>
<input type="text" name="street" value="<?= h((string) ($old['street'] ?? '')) ?>" required>
</label>
<label>
<span>PLZ</span>
<input type="text" name="postal_code" value="<?= h((string) ($old['postal_code'] ?? '')) ?>" required>
</label>
<label>
<span>Ort</span>
<input type="text" name="city" value="<?= h((string) ($old['city'] ?? '')) ?>" required>
</label>
<label>
<span>Anlass</span>
<input type="text" name="event_type" value="<?= h((string) ($old['event_type'] ?? '')) ?>" placeholder="z. B. Hochzeit oder Sommerfest">
</label>
<label class="field-full">
<span>Veranstaltungsort</span>
<input type="text" name="event_location" value="<?= h((string) ($old['event_location'] ?? '')) ?>" placeholder="Location oder Stadt">
</label>
</div>
</div>
<label>
<span>Nachricht</span>
<textarea name="notes_customer" rows="4" placeholder="Sonderwuensche, Lieferdetails oder Aufbauhinweise"><?= h((string) ($old['notes_customer'] ?? '')) ?></textarea>
</label>
<div class="price-summary">
<div>
<span>Mietdauer</span>
<strong data-summary-days>Noch nicht gewaehlt</strong>
</div>
<div>
<span>Tagespreis</span>
<strong><?= h(formatCurrency($dayRate)) ?></strong>
</div>
<div class="price-summary-total">
<span>Gesamtpreis</span>
<strong data-summary-total><?= h(formatCurrency($dayRate)) ?></strong>
</div>
</div>
<button type="submit" class="button-primary button-block">Buchungsanfrage senden</button>
<p class="form-note">Keine Sofortabbuchung. Der Verwalter bestaetigt den Termin, pflegt die Buchung und kann direkt eine Rechnung erzeugen.</p>
</form>
</div>
</section>
<section class="faq-section" id="faq">
<div>
<p class="eyebrow">FAQ</p>
<h2>Wichtige Fragen auf einen Blick</h2>
</div>
<div class="faq-list">
<article>
<h3>Wie schnell ist die Fotobox einsatzbereit?</h3>
<p>Durch den einfachen Aufbau und die kurze Einweisung ist die Box in wenigen Minuten startklar.</p>
</article>
<article>
<h3>Bekommen wir alle Fotos?</h3>
<p>Ja. Alle Bilder werden nach dem Event digital zur Verfuegung gestellt. Auf Wunsch koennen Gaeste sie schon vor Ort aufs Handy laden.</p>
</article>
<article>
<h3>Kann ich auch Lieferung und Betreuung buchen?</h3>
<p>Ja. Du kannst zwischen Selbstabholung, Lieferung mit Aufbau oder zusaetzlicher Vor-Ort-Unterstuetzung waehlen.</p>
</article>
<article>
<h3>Ist PayPal schon moeglich?</h3>
<p>Ja, PayPal ist als Zahlungsart im Ablauf vorgesehen. Sobald du echte MySQL- und PayPal-Daten hinterlegst, laesst sich der operative Betrieb direkt anbinden.</p>
</article>
<div class="content-card emphasis-card">
<p class="eyebrow">Nächster Schritt</p>
<h2>In wenigen Minuten zur Anfrage</h2>
<ul class="check-list">
<?php foreach ($bookingChecklist as $item): ?>
<li><?= h($item) ?></li>
<?php endforeach; ?>
</ul>
<div class="pricing-example-list">
<?php foreach ($pricingExamples as $example): ?>
<article>
<strong><?= h($example['title']) ?></strong>
<span><?= h($example['text']) ?></span>
</article>
<?php endforeach; ?>
</div>
<a class="button-primary button-block" href="<?= h(url('buchen')) ?>">Zur Buchungsanfrage</a>
</div>
</section>