Hub (Web): Auth-aware CTAs, Kontakt-Modal statt Mailto, Pruefung-Wording
- Angemeldete Nutzer sehen ueberall (Header, Hero, Kuendbar-Box, CTA, Footer) "Zum pressekonto" (rollengerecht via LoginRedirect::homeFor) statt Anmelden/Konto erstellen - Keine E-Mail-Adresse mehr im Quelltext (Spam-Schutz): neues <x-web.hub.contact-modal> (Alpine, Honeypots, Erfolgs-/Fehlerzustand, auto-open nach Submit) am host-agnostischen kontakt.store-Endpunkt; Trigger in Enterprise-Streifen, FAQ-Support, DSGVO-Antwort, Footer und Utility-Bar - "Redaktionelle Pruefung" -> "Pruefung" in allen Hub-Inhalten; "verifizierter Newsroom" -> "Ihr eigener Newsroom" Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
parent
88d6935014
commit
47d03ec777
6 changed files with 243 additions and 60 deletions
99
resources/views/components/web/hub/contact-modal.blade.php
Normal file
99
resources/views/components/web/hub/contact-modal.blade.php
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
{{--
|
||||
Kontakt-Modal der Hub-Landing: einfaches Formular statt sichtbarer
|
||||
E-Mail-Adresse (Spam-Schutz). Öffnet auf das Window-Event
|
||||
`open-contact-modal` (Trigger: `<button x-data @click="$dispatch('open-contact-modal')">`)
|
||||
und automatisch nach Absenden (Erfolgs-Flash bzw. Validierungsfehler).
|
||||
Versand über den host-agnostischen POST-Endpunkt des Kontaktformulars.
|
||||
--}}
|
||||
<div
|
||||
x-data="{ open: @js(session()->has('contact-status') || $errors->any()) }"
|
||||
@open-contact-modal.window="open = true"
|
||||
@keydown.escape.window="open = false"
|
||||
>
|
||||
<div x-show="open" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||
<div class="absolute inset-0 bg-black/50" @click="open = false" aria-hidden="true"></div>
|
||||
|
||||
<div class="relative bg-white border border-bg-rule rounded-[4px] w-full max-w-[520px] max-h-[90vh] overflow-y-auto p-7"
|
||||
role="dialog" aria-modal="true" aria-label="Kontaktanfrage">
|
||||
|
||||
<button type="button" @click="open = false" aria-label="Schließen"
|
||||
class="absolute top-4 right-4 w-8 h-8 flex items-center justify-center text-ink-3 hover:text-ink transition-colors cursor-pointer">
|
||||
<svg width="14" height="14" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M3 3l10 10M13 3L3 13" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
@if (session('contact-status'))
|
||||
<div class="section-eyebrow mb-4">Kontakt</div>
|
||||
<h3 class="text-[20px] font-bold text-ink tracking-[-0.4px] m-0 mb-3">Nachricht gesendet</h3>
|
||||
<p class="text-[13.5px] text-ink-2 leading-[1.6] m-0" role="status">
|
||||
{{ session('contact-status') }}
|
||||
</p>
|
||||
<button type="button" @click="open = false"
|
||||
class="mt-6 inline-flex items-center justify-center px-5 py-2.5 text-[13px] font-semibold text-white bg-hub hover:bg-hub-2 rounded-[4px] transition-colors cursor-pointer">
|
||||
Schließen
|
||||
</button>
|
||||
@else
|
||||
<div class="section-eyebrow mb-4">Kontakt</div>
|
||||
<h3 class="text-[20px] font-bold text-ink tracking-[-0.4px] m-0 mb-2">Schreiben Sie uns</h3>
|
||||
<p class="text-[12.5px] text-ink-3 leading-[1.55] m-0 mb-6">
|
||||
Ob Enterprise-Anfrage, Support oder Fragen zu Ihren Daten — wir melden uns werktags
|
||||
schnellstmöglich zurück.
|
||||
</p>
|
||||
|
||||
<form method="POST" action="{{ route('kontakt.store', ['edition' => 'de']) }}" class="space-y-4" novalidate>
|
||||
@csrf
|
||||
|
||||
<div>
|
||||
<label for="hub-contact-name" class="block text-[12px] font-semibold text-ink mb-1.5">Ihr Name</label>
|
||||
<input id="hub-contact-name" type="text" name="name" value="{{ old('name') }}" required
|
||||
autocomplete="name"
|
||||
class="w-full border border-bg-rule px-3 py-2.5 text-[13px] bg-white text-ink focus:outline-none focus:border-hub" />
|
||||
@error('name')
|
||||
<p class="mt-1 text-[12px] text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="hub-contact-email" class="block text-[12px] font-semibold text-ink mb-1.5">E-Mail-Adresse</label>
|
||||
<input id="hub-contact-email" type="email" name="email" value="{{ old('email') }}" required
|
||||
autocomplete="email"
|
||||
class="w-full border border-bg-rule px-3 py-2.5 text-[13px] bg-white text-ink focus:outline-none focus:border-hub" />
|
||||
@error('email')
|
||||
<p class="mt-1 text-[12px] text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="hub-contact-message" class="block text-[12px] font-semibold text-ink mb-1.5">Ihre Nachricht</label>
|
||||
<textarea id="hub-contact-message" name="message" rows="5" required
|
||||
class="w-full border border-bg-rule px-3 py-2.5 text-[13px] bg-white text-ink focus:outline-none focus:border-hub"
|
||||
placeholder="Wie können wir Ihnen helfen?">{{ old('message') }}</textarea>
|
||||
@error('message')
|
||||
<p class="mt-1 text-[12px] text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
{{-- Bot-Schutz: versteckte Honeypot-Felder (siehe ContactController). --}}
|
||||
<div class="hidden" aria-hidden="true">
|
||||
<label for="hub-contact-website">Website</label>
|
||||
<input id="hub-contact-website" type="text" name="website" tabindex="-1" autocomplete="off" value="{{ old('website') }}" />
|
||||
<label for="hub-contact-homepage">Homepage</label>
|
||||
<input id="hub-contact-homepage" type="text" name="homepage" tabindex="-1" autocomplete="off" value="{{ old('homepage') }}" />
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between gap-4 pt-1">
|
||||
<p class="text-[11px] text-ink-3 leading-[1.5] m-0">
|
||||
Ihre Angaben werden nur zur Bearbeitung der Anfrage verarbeitet
|
||||
(<a href="{{ route('datenschutz', ['edition' => 'de']) }}" class="underline hover:text-ink">Datenschutz</a>).
|
||||
</p>
|
||||
<button type="submit"
|
||||
class="inline-flex items-center justify-center px-5 py-2.5 text-[13px] font-semibold text-white bg-hub hover:bg-hub-2 rounded-[4px] whitespace-nowrap transition-colors cursor-pointer">
|
||||
Nachricht senden
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -8,7 +8,6 @@
|
|||
$brandTagline = $brand['tagline_short'] ?? 'Publisher · Hub';
|
||||
$brandTaglineLong = $brand['tagline_long'] ?? 'Der gemeinsame Publisher-Bereich für presseecho und businessportal24.';
|
||||
$footerLegal = str_replace(':year', (string) now()->year, $brand['footer_legal'] ?? '© ' . now()->year . ' pressekonto');
|
||||
$footerContactEmail = $brand['contact_email'] ?? 'info@pressekonto.com';
|
||||
@endphp
|
||||
|
||||
<footer class="bg-hub-grad-2 text-ink-on-dark">
|
||||
|
|
@ -39,10 +38,14 @@
|
|||
<div>
|
||||
<div class="eyebrow on-dark mb-3.5">Konto</div>
|
||||
<ul class="space-y-2 text-[13px] text-white/75 list-none p-0 m-0">
|
||||
<li><a href="{{ route('login') }}" class="hover:text-white transition-colors">Anmelden</a></li>
|
||||
<li><a href="{{ route('register') }}" class="hover:text-white transition-colors">Konto erstellen</a></li>
|
||||
@auth
|
||||
<li><a href="{{ \App\Support\LoginRedirect::homeFor(auth()->user()) }}" class="hover:text-white transition-colors">Zum pressekonto</a></li>
|
||||
@else
|
||||
<li><a href="{{ route('login') }}" class="hover:text-white transition-colors">Anmelden</a></li>
|
||||
<li><a href="{{ route('register') }}" class="hover:text-white transition-colors">Konto erstellen</a></li>
|
||||
@endauth
|
||||
<li><a href="#tarife" class="hover:text-white transition-colors">Tarife</a></li>
|
||||
<li><a href="mailto:{{ $footerContactEmail }}" class="hover:text-white transition-colors">Kontakt aufnehmen</a></li>
|
||||
<li><button type="button" x-data @click="$dispatch('open-contact-modal')" class="hover:text-white transition-colors cursor-pointer">Kontakt aufnehmen</button></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -42,18 +42,29 @@
|
|||
</nav>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<a href="{{ route('login') }}"
|
||||
class="inline-flex items-center gap-2 px-4 py-2.5 text-[13px] font-semibold text-ink rounded-[4px] hover:bg-bg transition-colors">
|
||||
Anmelden
|
||||
</a>
|
||||
<a href="{{ route('register') }}"
|
||||
class="inline-flex items-center gap-2 px-[18px] py-2.5 text-[13px] font-semibold text-white bg-hub hover:bg-hub-2 rounded-[4px] transition-colors">
|
||||
Konto erstellen
|
||||
<svg width="11" height="11" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M3 9L9 3M9 3H4M9 3v5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
</svg>
|
||||
</a>
|
||||
@auth
|
||||
<a href="{{ \App\Support\LoginRedirect::homeFor(auth()->user()) }}"
|
||||
class="inline-flex items-center gap-2 px-[18px] py-2.5 text-[13px] font-semibold text-white bg-hub hover:bg-hub-2 rounded-[4px] transition-colors">
|
||||
Zum pressekonto
|
||||
<svg width="11" height="11" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M3 9L9 3M9 3H4M9 3v5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
</svg>
|
||||
</a>
|
||||
@else
|
||||
<a href="{{ route('login') }}"
|
||||
class="inline-flex items-center gap-2 px-4 py-2.5 text-[13px] font-semibold text-ink rounded-[4px] hover:bg-bg transition-colors">
|
||||
Anmelden
|
||||
</a>
|
||||
<a href="{{ route('register') }}"
|
||||
class="inline-flex items-center gap-2 px-[18px] py-2.5 text-[13px] font-semibold text-white bg-hub hover:bg-hub-2 rounded-[4px] transition-colors">
|
||||
Konto erstellen
|
||||
<svg width="11" height="11" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M3 9L9 3M9 3H4M9 3v5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
</svg>
|
||||
</a>
|
||||
@endauth
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
<span class="flex-1"></span>
|
||||
|
||||
<span class="flex items-center gap-4 py-2.5 whitespace-nowrap text-white/65">
|
||||
<a href="mailto:{{ config('domains.domains.pressekonto.brand.contact_email') ?? 'info@pressekonto.com' }}" class="hover:text-white">Kontakt</a>
|
||||
<button type="button" x-data @click="$dispatch('open-contact-modal')" class="hover:text-white cursor-pointer">Kontakt</button>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue