96 lines
6.3 KiB
PHP
96 lines
6.3 KiB
PHP
@php
|
|
$homepageAnnouncement = is_array($announcement ?? null) ? $announcement : null;
|
|
$overlayOpacity = max(0, min(100, (int) ($homepageAnnouncement['overlay_opacity'] ?? 55)));
|
|
$announcementId = (int) ($homepageAnnouncement['id'] ?? 0);
|
|
$dismissVersion = (int) ($homepageAnnouncement['dismiss_version'] ?? 1);
|
|
@endphp
|
|
|
|
@if ($homepageAnnouncement)
|
|
<section class="px-4 pt-8 sm:px-6 lg:px-8" data-home-announcement-wrapper>
|
|
<div class="mx-auto max-w-7xl">
|
|
<button
|
|
type="button"
|
|
class="hidden items-center gap-2 rounded-full border border-white/10 bg-white/[0.06] px-4 py-2 text-sm font-semibold text-white/90 transition hover:border-white/20 hover:bg-white/[0.1]"
|
|
data-home-announcement-restore
|
|
data-announcement-id="{{ $announcementId }}"
|
|
data-dismiss-version="{{ $dismissVersion }}"
|
|
>
|
|
<span aria-hidden="true">✨</span>
|
|
<span>Show Skinbase announcement</span>
|
|
</button>
|
|
|
|
<div
|
|
class="relative overflow-hidden rounded-[2rem] border border-cyan-300/15 bg-[radial-gradient(circle_at_top_left,rgba(34,211,238,0.26),transparent_30%),radial-gradient(circle_at_80%_20%,rgba(168,85,247,0.22),transparent_28%),linear-gradient(135deg,rgba(6,12,24,0.96),rgba(10,17,34,0.9))] text-white shadow-[0_28px_90px_rgba(0,0,0,0.35)]"
|
|
data-home-announcement
|
|
data-announcement-id="{{ $announcementId }}"
|
|
data-dismiss-version="{{ $dismissVersion }}"
|
|
>
|
|
@if (!empty($homepageAnnouncement['background_image_url']))
|
|
<div class="absolute inset-0">
|
|
<img src="{{ $homepageAnnouncement['background_image_url'] }}" alt="" class="h-full w-full object-cover">
|
|
<div class="absolute inset-0 bg-slate-950" style="opacity: {{ $overlayOpacity / 100 }}"></div>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="pointer-events-none absolute inset-0 bg-gradient-to-br from-indigo-400/20 via-sky-400/12 to-transparent"></div>
|
|
<div class="pointer-events-none absolute inset-0 bg-[linear-gradient(180deg,rgba(255,255,255,0.06),transparent_22%,rgba(2,6,23,0.15)_100%)]"></div>
|
|
|
|
@if (!empty($homepageAnnouncement['is_dismissible']))
|
|
<button
|
|
type="button"
|
|
class="absolute right-5 top-5 z-10 inline-flex items-center gap-2 rounded-full border border-white/10 bg-black/30 px-3 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-white/70 transition hover:border-white/20 hover:bg-black/45 hover:text-white sm:right-6 sm:top-6 lg:right-8 lg:top-8"
|
|
data-home-announcement-dismiss
|
|
aria-label="Dismiss homepage announcement"
|
|
>
|
|
<svg aria-hidden="true" viewBox="0 0 16 16" class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
|
|
<path d="M3.5 3.5 12.5 12.5"></path>
|
|
<path d="M12.5 3.5 3.5 12.5"></path>
|
|
</svg>
|
|
Dismiss
|
|
</button>
|
|
@endif
|
|
|
|
<div class="relative grid gap-8 px-6 py-7 sm:px-8 lg:grid-cols-[minmax(0,1.25fr)_auto] lg:items-end lg:px-10 lg:py-10">
|
|
<div class="max-w-3xl">
|
|
@if (!empty($homepageAnnouncement['badge_text']))
|
|
<div class="inline-flex rounded-full border border-cyan-200/20 bg-cyan-300/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.24em] text-cyan-100">
|
|
{{ $homepageAnnouncement['badge_text'] }}
|
|
</div>
|
|
@endif
|
|
|
|
<h2 class="mt-4 text-3xl font-semibold tracking-[-0.05em] sm:text-4xl lg:text-[3.15rem]">
|
|
{{ $homepageAnnouncement['title'] ?? '' }}
|
|
</h2>
|
|
|
|
@if (!empty($homepageAnnouncement['subtitle']))
|
|
<p class="mt-3 max-w-2xl text-base leading-7 text-white/80 sm:text-lg">
|
|
{{ $homepageAnnouncement['subtitle'] }}
|
|
</p>
|
|
@endif
|
|
|
|
@if (!empty($homepageAnnouncement['content_html']))
|
|
<div class="prose prose-invert mt-5 max-w-2xl text-sm leading-7 prose-a:text-cyan-200 prose-strong:text-white [&_blockquote]:my-5 [&_h2]:mb-3 [&_h2]:mt-7 [&_h3]:mb-2 [&_h3]:mt-6 [&_li+li]:mt-1.5 [&_ol]:my-5 [&_p]:my-0 [&_p+p]:mt-6 [&_ul]:my-5 sm:text-base">
|
|
{!! $homepageAnnouncement['content_html'] !!}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="flex flex-col items-start gap-3 lg:items-end">
|
|
<div class="flex flex-wrap gap-3 lg:justify-end">
|
|
@if (!empty($homepageAnnouncement['primary_link']['url']) && !empty($homepageAnnouncement['primary_link']['label']))
|
|
<a href="{{ $homepageAnnouncement['primary_link']['url'] }}" class="inline-flex items-center justify-center rounded-full border border-cyan-300/30 bg-cyan-300/15 px-5 py-3 text-sm font-semibold text-cyan-50 transition hover:bg-cyan-300/22">
|
|
{{ $homepageAnnouncement['primary_link']['label'] }}
|
|
</a>
|
|
@endif
|
|
@if (!empty($homepageAnnouncement['secondary_link']['url']) && !empty($homepageAnnouncement['secondary_link']['label']))
|
|
<a href="{{ $homepageAnnouncement['secondary_link']['url'] }}" class="inline-flex items-center justify-center rounded-full border border-white/12 bg-white/[0.05] px-5 py-3 text-sm font-semibold text-white/85 transition hover:bg-white/[0.1]">
|
|
{{ $homepageAnnouncement['secondary_link']['label'] }}
|
|
</a>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
@endif |