115 lines
6.2 KiB
PHP
115 lines
6.2 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.
|
|
--}}
|
|
<x-layouts.site title="Anfrage — CluPilot Cloud" robots="noindex">
|
|
|
|
<main class="mx-auto w-full max-w-[860px] px-5 pt-14 pb-24 sm:px-8">
|
|
|
|
<header class="rv">
|
|
<p class="lbl">Anfrage</p>
|
|
<h1 class="mt-3 text-[clamp(2rem,4vw,2.8rem)] font-bold leading-[1.06] tracking-[-0.035em] text-ink">
|
|
@if ($topic === 'enterprise')
|
|
Eine eigene Maschine.
|
|
@else
|
|
Sprechen Sie uns an.
|
|
@endif
|
|
</h1>
|
|
<p class="mt-4 max-w-[58ch] text-md 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,
|
|
auf Deutsch, 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 mt-10 rounded-xl border border-accent-border bg-accent-subtle p-7">
|
|
<h2 class="text-lg font-bold tracking-[-0.02em] text-ink">Ihre Anfrage ist da.</h2>
|
|
<p class="mt-2 max-w-[58ch] 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>
|
|
<a href="{{ route('home') }}" class="mt-5 inline-flex items-center gap-2 text-sm font-medium text-accent-text underline-offset-4 hover:underline">
|
|
Zurück zur Übersicht
|
|
</a>
|
|
</div>
|
|
@else
|
|
<form method="POST" action="{{ route('contact.send') }}" class="rv mt-10">
|
|
@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="overflow-hidden rounded-xl border border-line bg-surface shadow-xs">
|
|
@foreach ([
|
|
['company', 'Firma', 'text', false, 'organization'],
|
|
['name', 'Ihr Name', 'text', true, 'name'],
|
|
['email', 'E-Mail', 'email', true, 'email'],
|
|
['phone', 'Telefon (optional)', 'tel', false, 'tel'],
|
|
] as [$field, $label, $type, $required, $autocomplete])
|
|
<div class="border-b border-line px-6 py-5">
|
|
<label for="{{ $field }}" class="block text-sm font-medium text-ink">
|
|
{{ $label }}@if ($required)<span class="text-danger" aria-hidden="true"> *</span>@endif
|
|
</label>
|
|
<input type="{{ $type }}" id="{{ $field }}" name="{{ $field }}"
|
|
value="{{ old($field) }}" autocomplete="{{ $autocomplete }}"
|
|
@if ($required) required @endif
|
|
class="mt-2 block w-full rounded border border-line bg-surface px-3 py-2 text-sm text-ink transition focus:border-accent-border focus:outline-none">
|
|
@error($field)
|
|
<p class="mt-1.5 text-xs text-danger">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
@endforeach
|
|
|
|
<div class="px-6 py-5">
|
|
<label for="message" class="block text-sm font-medium text-ink">
|
|
Ihre Nachricht<span class="text-danger" aria-hidden="true"> *</span>
|
|
</label>
|
|
<textarea id="message" name="message" rows="7" required
|
|
placeholder="{{ $topic === 'enterprise'
|
|
? 'Wie viel Speicher brauchen Sie, und wie viele Menschen arbeiten damit?'
|
|
: 'Worum geht es?' }}"
|
|
class="mt-2 block w-full rounded border border-line bg-surface px-3 py-2 text-sm leading-relaxed text-ink transition focus:border-accent-border focus:outline-none">{{ old('message') }}</textarea>
|
|
@error('message')
|
|
<p class="mt-1.5 text-xs text-danger">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-5 flex flex-wrap items-center justify-between gap-4">
|
|
<p class="max-w-[46ch] 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 hover:text-body">Datenschutzerklärung</a>.
|
|
</p>
|
|
<button type="submit" class="inline-flex min-h-[46px] items-center justify-center rounded-[10px] bg-ink px-[22px] text-[15px] font-semibold leading-none text-white transition hover:opacity-90">
|
|
Anfrage senden
|
|
</button>
|
|
</div>
|
|
</form>
|
|
@endif
|
|
|
|
</main>
|
|
|
|
</x-layouts.site>
|