189 lines
12 KiB
PHP
189 lines
12 KiB
PHP
{{--
|
|
„Sprechen Sie uns an."
|
|
|
|
Die Seite, auf der das Selbstbedienen aufhört. Wer hier landet, hat sich
|
|
schon entschieden zu fragen — also steht hier ein Formular und keine zweite
|
|
Verkaufsseite. Vorher zeigte der Knopf auf `mailto:`, was auf den meisten
|
|
Geräten sichtbar gar nichts tut. Siehe App\Http\Controllers\ContactController.
|
|
|
|
Zum Aufbau, nach dem Umbau vom 1. August 2026:
|
|
|
|
Die Kopfleiste des Layouts ist `fixed` und schwebt (56 px hoch, 16 px vom
|
|
Rand). Diese Seite begann mit `pt-14` — 56 px — und lief damit zwangsläufig
|
|
darunter. Der Einstieg hält jetzt denselben Abstand wie die Startseite
|
|
(`pt-32`, ab `lg` mehr), und dieser Abstand ist der Grund für die Zahl, nicht
|
|
Geschmack.
|
|
|
|
Das zweite `<main>` ist weg: das Layout stellt bereits eines, und pro
|
|
Dokument darf es nur eines geben.
|
|
|
|
Und die Seite steht jetzt in der Formensprache der Startseite statt daneben:
|
|
ein Schimmer hinter der Überschrift, Haarlinien-Karten, `lbl`-Etiketten,
|
|
gestaffelte Einblendungen. Rechts neben dem Formular steht, was danach
|
|
passiert — die Frage, die jeder hat, der ein Formular vor sich sieht, und die
|
|
ein Formular allein nicht beantwortet.
|
|
--}}
|
|
<x-layouts.site title="Anfrage — CluPilot Cloud" robots="noindex">
|
|
|
|
<section class="relative overflow-hidden">
|
|
{{-- Derselbe warme Schimmer wie über der Startseiten-Überschrift, aus dem
|
|
Token gezeichnet statt aus einem literalen rgba(), das niemand
|
|
nachzöge. Etwas schwächer und höher: hier steht ein Formular, kein
|
|
Aufmacher. --}}
|
|
<div class="pointer-events-none absolute -top-64 left-1/2 size-[620px] -translate-x-1/2 rounded-pill bg-accent opacity-[0.07] blur-3xl" aria-hidden="true"></div>
|
|
|
|
<div class="relative mx-auto max-w-[1120px] px-5 pb-24 pt-32 sm:px-6 lg:pt-40">
|
|
|
|
<header class="rv mx-auto max-w-[60ch] text-center">
|
|
<p class="lbl">Anfrage</p>
|
|
<h1 class="mt-4 text-[clamp(2.2rem,4.6vw,3.2rem)] font-bold leading-[1.04] tracking-[-0.038em] text-ink">
|
|
@if ($topic === 'enterprise')
|
|
Eine eigene Maschine.
|
|
@else
|
|
Sprechen Sie uns an.
|
|
@endif
|
|
</h1>
|
|
<p class="mx-auto mt-5 max-w-[56ch] text-lg leading-relaxed text-muted">
|
|
@if ($topic === 'enterprise')
|
|
Sagen Sie uns, wie viel Speicher Sie brauchen und wie viele Menschen damit
|
|
arbeiten. Wir rechnen Ihnen einen Server durch, auf dem nur Ihre Cloud läuft
|
|
— und melden uns am selben Werktag.
|
|
@else
|
|
Schreiben Sie uns, was Sie vorhaben. Wir antworten am selben Werktag,
|
|
ohne Warteschleife.
|
|
@endif
|
|
</p>
|
|
</header>
|
|
|
|
@if ($sent)
|
|
{{-- Der Bestätigungszustand ersetzt das Formular, statt darüber zu
|
|
stehen: ein Formular, das nach dem Absenden weiter dasteht, lädt
|
|
zum zweiten Absenden ein. --}}
|
|
<div class="rv d1 mx-auto mt-12 max-w-[640px] rounded-xl border border-accent-border bg-accent-subtle p-8 text-center shadow-xs">
|
|
<span class="mx-auto grid size-11 place-items-center rounded-pill bg-surface shadow-xs">
|
|
<x-ui.icon name="check" class="size-5 text-accent-text" />
|
|
</span>
|
|
<h2 class="mt-5 text-xl font-bold tracking-[-0.02em] text-ink">Ihre Anfrage ist da.</h2>
|
|
<p class="mx-auto mt-3 max-w-[52ch] text-sm leading-relaxed text-body">
|
|
Wir haben sie bekommen und melden uns am selben Werktag. Eine Kopie geht
|
|
nicht automatisch an Sie — falls Sie etwas nachreichen möchten, antworten
|
|
Sie einfach auf unsere Rückmeldung.
|
|
</p>
|
|
<div class="mt-7 flex flex-wrap justify-center gap-3">
|
|
<x-ui.button href="{{ route('home') }}" variant="ink" size="md">Zurück zur Übersicht</x-ui.button>
|
|
<x-ui.button href="{{ route('home') }}#pricing" variant="secondary" size="md">Preise ansehen</x-ui.button>
|
|
</div>
|
|
</div>
|
|
@else
|
|
{{-- Asymmetrisch: das Formular trägt die Seite, die Spalte daneben
|
|
beantwortet die Frage, die ein Formular offen lässt — was
|
|
passiert, nachdem ich auf Senden gedrückt habe. Auf dem Telefon
|
|
steht sie darunter, weil dort zuerst das Feld zählt. --}}
|
|
<div class="mt-14 grid items-start gap-8 lg:grid-cols-[minmax(0,1fr)_310px]">
|
|
|
|
<form method="POST" action="{{ route('contact.send') }}" class="rv d1">
|
|
@csrf
|
|
<input type="hidden" name="topic" value="{{ $topic }}">
|
|
|
|
{{-- Der Honigtopf. Aus dem Lesefluss genommen statt display:none —
|
|
ein Feld, das gar nicht existiert, füllt auch kein Roboter aus,
|
|
und genau das Ausfüllen ist hier das Erkennungszeichen.
|
|
aria-hidden und tabindex=-1, damit ein Screenreader und die
|
|
Tabulatortaste es überspringen. --}}
|
|
<div class="absolute left-[-9999px] top-auto h-px w-px overflow-hidden" aria-hidden="true">
|
|
<label for="website">Website (bitte frei lassen)</label>
|
|
<input type="text" id="website" name="website" tabindex="-1" autocomplete="off" value="">
|
|
</div>
|
|
|
|
<div class="rounded-xl border border-line bg-surface p-6 shadow-xs sm:p-7">
|
|
{{-- Die Spaltenbreite gehört an ein eigenes Element, nicht
|
|
an das Bauteil: x-ui.input reicht mitgegebene Klassen
|
|
an das INPUT weiter, nicht an seinen Rahmen — ein
|
|
`sm:col-span-2` am Bauteil landete also am Feld und
|
|
täte im Raster nichts. --}}
|
|
<div class="grid gap-5 sm:grid-cols-2">
|
|
<div class="sm:col-span-2">
|
|
<x-ui.input name="company" label="Firma" autocomplete="organization" :value="old('company')" />
|
|
</div>
|
|
<x-ui.input name="name" label="Ihr Name *" autocomplete="name" :value="old('name')" required />
|
|
<x-ui.input name="email" label="E-Mail *" type="email" autocomplete="email" :value="old('email')" required />
|
|
<div class="sm:col-span-2">
|
|
<x-ui.input name="phone" label="Telefon (optional)" type="tel" autocomplete="tel" :value="old('phone')" />
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Kein eigenes Textfeld-Bauteil im Haus; die Klassen sind
|
|
deshalb aus x-ui.input übernommen, damit die beiden
|
|
Felder nicht nebeneinander unterschiedlich aussehen. --}}
|
|
<div class="mt-5 space-y-1.5">
|
|
<label for="message" class="block text-sm font-medium text-body">Ihre Nachricht *</label>
|
|
<textarea id="message" name="message" rows="7" required
|
|
@error('message') aria-invalid="true" aria-describedby="message-error" @enderror
|
|
placeholder="{{ $topic === 'enterprise'
|
|
? 'Wie viel Speicher brauchen Sie, und wie viele Menschen arbeiten damit?'
|
|
: 'Worum geht es?' }}"
|
|
class="block w-full rounded border bg-surface px-3.5 py-2.5 text-sm leading-relaxed text-ink placeholder:text-faint transition @error('message') border-danger bg-danger-bg @else border-line @enderror">{{ old('message') }}</textarea>
|
|
@error('message')
|
|
<p id="message-error" class="text-xs text-danger">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="mt-6 flex flex-wrap items-center justify-between gap-4 border-t border-line pt-6">
|
|
<p class="max-w-[42ch] text-xs leading-relaxed text-muted">
|
|
Wir benutzen Ihre Angaben nur, um Ihre Anfrage zu beantworten.
|
|
Näheres in der <a href="{{ route('legal.datenschutz') }}" class="underline underline-offset-2 transition-colors hover:text-body">Datenschutzerklärung</a>.
|
|
</p>
|
|
<x-ui.button type="submit" variant="ink" size="lg">Anfrage senden</x-ui.button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<aside class="rv d2 flex flex-col gap-6">
|
|
<div class="rounded-xl border border-line bg-surface p-6 shadow-xs">
|
|
<p class="lbl">Was danach passiert</p>
|
|
<ol class="mt-4 flex flex-col gap-4">
|
|
@foreach ([
|
|
['Wir lesen mit.', 'Ihre Anfrage landet bei einem Menschen, nicht in einer Warteschlange.'],
|
|
$topic === 'enterprise'
|
|
? ['Wir rechnen durch.', 'Speicher, Nutzerzahl und Sicherung ergeben die Maschine — und den Preis.']
|
|
: ['Wir antworten.', 'Am selben Werktag, mit einer Antwort statt einer Rückfrage.'],
|
|
['Sie entscheiden.', 'Kein Vertrag, kein Rückruf-Rad — Sie bekommen etwas Schriftliches.'],
|
|
] as $i => [$head, $body])
|
|
<li class="flex gap-3.5">
|
|
<span class="mt-0.5 grid size-6 shrink-0 place-items-center rounded-pill border border-line text-[11px] font-semibold tabular-nums text-muted">{{ $i + 1 }}</span>
|
|
<span>
|
|
<span class="block text-sm font-semibold text-ink">{{ $head }}</span>
|
|
<span class="mt-1 block text-sm leading-relaxed text-muted">{{ $body }}</span>
|
|
</span>
|
|
</li>
|
|
@endforeach
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="rounded-xl border border-line bg-surface p-6 shadow-xs">
|
|
<p class="lbl">Lieber direkt</p>
|
|
{{-- Kein `mailto:`. Ein Klick darauf tut auf den meisten Geräten
|
|
sichtbar nichts — es ist kein Mailprogramm eingerichtet, und
|
|
der Browser meldet das nicht. Und auf DIESER Seite wäre ein
|
|
Link zurück auf das Formular ohnehin im Kreis. Die Adresse
|
|
steht deshalb als Text: markieren, kopieren, im eigenen
|
|
Mailprogramm einfügen. `select-all` markiert sie mit einem
|
|
Klick vollständig. --}}
|
|
<p class="mt-3 flex items-center gap-2 text-sm font-medium text-ink">
|
|
<x-ui.icon name="mail" class="size-4 shrink-0 text-accent-text" />
|
|
<span class="select-all">office@clupilot.com</span>
|
|
</p>
|
|
<p class="mt-4 text-sm leading-relaxed text-muted">
|
|
Serverstandort EU, eigene Instanz, AV-Vertrag inklusive.
|
|
</p>
|
|
</div>
|
|
</aside>
|
|
|
|
</div>
|
|
@endif
|
|
|
|
</div>
|
|
</section>
|
|
|
|
</x-layouts.site>
|