76 lines
4.5 KiB
PHP
76 lines
4.5 KiB
PHP
@props([
|
||
'topics' => null,
|
||
'subscribers' => 84000,
|
||
])
|
||
|
||
@php
|
||
$themeKey = config('app.theme');
|
||
$topics ??= config('domains.domains.'.$themeKey.'.brand.newsletter_topics', [
|
||
['name' => 'Tageszusammenfassung', 'meta' => 'Mo–Fr · 07:00 Uhr', 'active' => true],
|
||
['name' => 'Wochenrückblick', 'meta' => 'Sonntags · 18:00 Uhr', 'active' => false],
|
||
['name' => 'Energie & Klima', 'meta' => 'ab Content-Score 80 · max. 2× pro Woche', 'active' => true],
|
||
['name' => 'IPO & M&A', 'meta' => 'ausgewählt von der Redaktion · ca. 3–5 Mails/Monat', 'active' => false],
|
||
]);
|
||
@endphp
|
||
|
||
<section id="newsletter" class="max-w-layout mx-auto px-8 mt-16">
|
||
<div class="relative overflow-hidden bg-topbar-grad text-ink-on-dark p-12 px-14">
|
||
<svg width="280" height="280" viewBox="0 0 280 280" class="absolute -right-10 -top-10 opacity-[0.06]" aria-hidden="true">
|
||
<circle cx="140" cy="140" r="120" stroke="white" stroke-width="1" fill="none" />
|
||
<circle cx="140" cy="140" r="80" stroke="white" stroke-width="1" fill="none" />
|
||
<circle cx="140" cy="140" r="40" stroke="white" stroke-width="1" fill="none" />
|
||
</svg>
|
||
|
||
<div class="relative grid gap-12 grid-cols-1 lg:grid-cols-[1.1fr_1fr]">
|
||
<div>
|
||
<div class="eyebrow on-dark mb-3">Bleiben Sie informiert</div>
|
||
<h2 class="font-serif text-[30px] font-semibold m-0 leading-[1.18] tracking-[-0.4px] mb-3.5 max-w-[460px] text-white">
|
||
Pressemeldungen, kuratiert in Ihren Posteingang
|
||
</h2>
|
||
<p class="text-[14px] leading-[1.55] text-white/70 max-w-[440px] m-0 mb-6">
|
||
Die wichtigsten Meldungen aus DACH — täglich, wöchentlich oder branchenspezifisch. Keine Werbung, jederzeit kündbar.
|
||
</p>
|
||
|
||
<form action="#newsletter-subscribe" method="post" class="flex mb-3.5 max-w-[460px]">
|
||
@csrf
|
||
<label class="sr-only" for="newsletter-email">E-Mail-Adresse</label>
|
||
<input id="newsletter-email" type="email" name="email" required
|
||
placeholder="Ihre E-Mail-Adresse"
|
||
class="flex-1 px-4 py-3.5 text-[14px] bg-white/[0.08] border border-white/[0.18] text-white outline-none rounded-none placeholder-white/40 focus:border-brand focus:ring-0">
|
||
<button type="submit"
|
||
class="px-[22px] py-3.5 text-[13px] font-semibold bg-brand text-white whitespace-nowrap rounded-none cursor-pointer hover:bg-brand-deep transition-colors">
|
||
Kostenlos abonnieren →
|
||
</button>
|
||
</form>
|
||
<div class="text-[11px] text-white/50">
|
||
Über {{ number_format($subscribers, 0, ',', '.') }} Abonnenten · Datenschutz nach DSGVO
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex flex-col gap-2.5 self-stretch">
|
||
@foreach ($topics as $topic)
|
||
<label class="flex items-start gap-3.5 px-4 py-3.5 cursor-pointer transition-colors
|
||
{{ ($topic['active'] ?? false) ? 'bg-white/[0.06] border border-brand/40 hover:bg-white/[0.1]' : 'border border-white/10 hover:border-white/30 hover:bg-white/[0.04]' }}">
|
||
@if ($topic['active'] ?? false)
|
||
<span class="w-[18px] h-[18px] flex-shrink-0 mt-0.5 bg-brand border border-brand flex items-center justify-center">
|
||
<svg width="10" height="10" viewBox="0 0 12 12" fill="none" aria-hidden="true">
|
||
<path d="M2 6l3 3 5-6" stroke="white" stroke-width="2" />
|
||
</svg>
|
||
</span>
|
||
@else
|
||
<span class="w-[18px] h-[18px] flex-shrink-0 mt-0.5 border border-white/30"></span>
|
||
@endif
|
||
|
||
<div class="flex-1">
|
||
<div class="text-[13.5px] font-semibold text-white">{{ $topic['name'] }}</div>
|
||
<div class="text-[11.5px] text-white/55 mt-0.5">{{ $topic['meta'] }}</div>
|
||
</div>
|
||
|
||
<input type="checkbox" name="topics[]" value="{{ \Illuminate\Support\Str::slug($topic['name']) }}"
|
||
{{ ($topic['active'] ?? false) ? 'checked' : '' }} class="sr-only">
|
||
</label>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|