67 lines
4.5 KiB
PHP
67 lines
4.5 KiB
PHP
@php
|
|
$collectionItems = collect(is_array($collections ?? null) ? $collections : [])->filter()->take(3)->values();
|
|
$coverFallback = 'https://files.skinbase.org/default/missing_md.webp';
|
|
@endphp
|
|
|
|
@if ($collectionItems->isNotEmpty())
|
|
<section class="mt-14 px-4 sm:px-6 lg:px-8">
|
|
<div class="mb-5 flex items-center justify-between gap-4">
|
|
<div>
|
|
<h2 class="text-xl font-bold text-white">Trending Collections</h2>
|
|
<p class="mt-1 max-w-2xl text-sm text-nova-300">Collections getting the strongest mix of follows, saves, and engagement right now.</p>
|
|
</div>
|
|
<a href="/collections/trending" class="shrink-0 text-sm text-nova-300 transition hover:text-white">All collections →</a>
|
|
</div>
|
|
|
|
<div class="grid gap-4 lg:grid-cols-2 xl:grid-cols-3">
|
|
@foreach ($collectionItems as $collection)
|
|
<article class="group overflow-hidden rounded-[28px] border border-white/10 bg-[linear-gradient(180deg,rgba(12,19,30,0.96),rgba(5,10,18,0.96))] shadow-[0_22px_70px_rgba(2,6,23,0.28)] transition hover:border-white/15">
|
|
<a href="{{ $collection['url'] ?? '#' }}" class="block">
|
|
<div class="relative aspect-[16/10] overflow-hidden bg-slate-900">
|
|
<img src="{{ $collection['cover_image'] ?? $coverFallback }}" alt="{{ $collection['title'] ?? 'Collection' }}" class="h-full w-full object-cover transition duration-500 group-hover:scale-[1.03]" loading="lazy" decoding="async">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/30 to-transparent"></div>
|
|
<div class="absolute left-4 top-4 flex flex-wrap gap-2">
|
|
@if (!empty($collection['badge_label']))
|
|
<span class="rounded-full border border-amber-300/20 bg-amber-300/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-amber-100">{{ $collection['badge_label'] }}</span>
|
|
@endif
|
|
@if (!empty($collection['type']))
|
|
<span class="rounded-full border border-white/10 bg-white/[0.06] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-white/75">{{ str_replace('_', ' ', $collection['type']) }}</span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<div class="px-5 py-5">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div class="min-w-0">
|
|
<a href="{{ $collection['url'] ?? '#' }}" class="block truncate text-lg font-semibold text-white transition hover:text-sky-100">{{ $collection['title'] ?? 'Collection' }}</a>
|
|
@if (!empty($collection['subtitle']))
|
|
<p class="mt-1 truncate text-sm text-slate-300">{{ $collection['subtitle'] }}</p>
|
|
@endif
|
|
</div>
|
|
@if (!empty(data_get($collection, 'owner.username')))
|
|
<span class="shrink-0 text-xs font-semibold uppercase tracking-[0.14em] text-sky-100/80">@{{ data_get($collection, 'owner.username') }}</span>
|
|
@endif
|
|
</div>
|
|
|
|
@if (!empty($collection['description_excerpt']))
|
|
<p class="mt-3 text-sm leading-6 text-slate-300">{{ $collection['description_excerpt'] }}</p>
|
|
@endif
|
|
|
|
<div class="mt-4 flex flex-wrap gap-3 text-xs text-slate-400">
|
|
@if ((int) ($collection['artworks_count'] ?? 0) > 0)
|
|
<span>{{ number_format((int) ($collection['artworks_count'] ?? 0)) }} artworks</span>
|
|
@endif
|
|
@if ((int) ($collection['followers_count'] ?? 0) > 0)
|
|
<span>{{ number_format((int) ($collection['followers_count'] ?? 0)) }} followers</span>
|
|
@endif
|
|
@if ((int) ($collection['saves_count'] ?? 0) > 0)
|
|
<span>{{ number_format((int) ($collection['saves_count'] ?? 0)) }} saves</span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</article>
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
@endif |