12-05-2026 Frontend dev
This commit is contained in:
parent
405df0a122
commit
313270b55f
777 changed files with 67136 additions and 6241 deletions
76
resources/views/components/web/newsletter-strip.blade.php
Normal file
76
resources/views/components/web/newsletter-strip.blade.php
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
@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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue