76 lines
6.0 KiB
PHP
76 lines
6.0 KiB
PHP
@php
|
|
$primaryWorld = is_array(data_get($world, 'primary')) ? data_get($world, 'primary') : (is_array($world ?? null) ? $world : null);
|
|
$secondaryWorlds = collect(is_array(data_get($world, 'secondary')) ? data_get($world, 'secondary') : [])->take(3)->values();
|
|
@endphp
|
|
|
|
@if ($primaryWorld)
|
|
<section class="mt-14 px-4 sm:px-6 lg:px-8">
|
|
<div class="overflow-hidden rounded-[28px] border border-white/10 bg-[linear-gradient(145deg,rgba(4,10,20,0.98),rgba(10,17,34,0.94))] shadow-[0_32px_110px_rgba(2,6,23,0.45)]">
|
|
<div class="grid gap-0 lg:grid-cols-[minmax(0,1.2fr)_26rem]">
|
|
<div class="relative min-h-[22rem] overflow-hidden">
|
|
@if (!empty($primaryWorld['cover_url']))
|
|
<img src="{{ $primaryWorld['cover_url'] }}" alt="{{ $primaryWorld['headline'] ?? $primaryWorld['title'] ?? 'World spotlight' }}" class="absolute inset-0 h-full w-full object-cover" loading="lazy" decoding="async">
|
|
@endif
|
|
<div class="absolute inset-0 bg-[linear-gradient(90deg,rgba(2,6,23,0.94),rgba(2,6,23,0.65),rgba(2,6,23,0.5))]"></div>
|
|
<div class="relative z-10 flex h-full flex-col justify-end px-6 py-7 sm:px-8 lg:px-10">
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="inline-flex rounded-full border border-sky-300/20 bg-sky-300/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-100">Homepage spotlight</span>
|
|
@if (!empty($primaryWorld['campaign_label']))
|
|
<span class="inline-flex rounded-full border border-white/10 bg-white/[0.06] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-white/75">{{ $primaryWorld['campaign_label'] }}</span>
|
|
@endif
|
|
</div>
|
|
<h2 class="mt-4 max-w-2xl text-3xl font-semibold tracking-[-0.05em] text-white sm:text-4xl">{{ $primaryWorld['headline'] ?? $primaryWorld['title'] ?? 'World spotlight' }}</h2>
|
|
@if (!empty($primaryWorld['summary']))
|
|
<p class="mt-3 max-w-2xl text-sm leading-7 text-slate-200/85 sm:text-base">{{ $primaryWorld['summary'] }}</p>
|
|
@endif
|
|
<div class="mt-5 flex flex-wrap gap-3 text-xs text-slate-300">
|
|
@if (!empty($primaryWorld['timeframe_label']))
|
|
<span>{{ $primaryWorld['timeframe_label'] }}</span>
|
|
@endif
|
|
@if ((int) ($primaryWorld['live_submission_count'] ?? 0) > 0)
|
|
<span>{{ number_format((int) ($primaryWorld['live_submission_count'] ?? 0)) }} live submissions</span>
|
|
@endif
|
|
@if ((int) ($primaryWorld['featured_submission_count'] ?? 0) > 0)
|
|
<span>{{ number_format((int) ($primaryWorld['featured_submission_count'] ?? 0)) }} featured</span>
|
|
@endif
|
|
</div>
|
|
<div class="mt-6 flex flex-wrap gap-3">
|
|
<a href="{{ $primaryWorld['cta_url'] ?? $primaryWorld['public_url'] ?? '#' }}" class="inline-flex items-center justify-center rounded-full border border-sky-300/30 bg-sky-300/15 px-5 py-3 text-sm font-semibold text-sky-50 transition hover:bg-sky-300/22">
|
|
{{ $primaryWorld['cta_label'] ?? 'Explore world' }}
|
|
</a>
|
|
<a href="{{ data_get($world, 'index_url', '/worlds') }}" 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]">
|
|
More worlds
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-t border-white/10 bg-black/20 lg:border-l lg:border-t-0">
|
|
<div class="px-6 py-6 sm:px-8">
|
|
<p class="text-[11px] font-semibold uppercase tracking-[0.2em] text-white/45">More live worlds</p>
|
|
<div class="mt-5 space-y-4">
|
|
@foreach ($secondaryWorlds as $secondary)
|
|
<a href="{{ $secondary['public_url'] ?? '#' }}" class="group block overflow-hidden rounded-2xl border border-white/8 bg-white/[0.03] p-4 transition hover:border-white/15 hover:bg-white/[0.05]">
|
|
<div class="flex items-start gap-4">
|
|
@if (!empty($secondary['cover_url']))
|
|
<img src="{{ $secondary['cover_url'] }}" alt="{{ $secondary['title'] ?? 'World' }}" class="h-20 w-24 rounded-xl object-cover" loading="lazy" decoding="async">
|
|
@endif
|
|
<div class="min-w-0">
|
|
<div class="truncate text-sm font-semibold text-white">{{ $secondary['teaser_title'] ?? $secondary['title'] ?? 'World' }}</div>
|
|
@if (!empty($secondary['summary']))
|
|
<p class="mt-1 line-clamp-2 text-xs leading-5 text-slate-300">{{ $secondary['summary'] }}</p>
|
|
@endif
|
|
@if (!empty($secondary['timeframe_label']))
|
|
<div class="mt-2 text-[11px] uppercase tracking-[0.16em] text-sky-200/70">{{ $secondary['timeframe_label'] }}</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
@endif |