75 lines
3.7 KiB
PHP
75 lines
3.7 KiB
PHP
@php
|
|
$heroArtwork = $artwork ?? null;
|
|
$fallbackImage = 'https://files.skinbase.org/default/missing_lg.webp';
|
|
$heroFeaturedImage = $heroArtwork['featured_image'] ?? null;
|
|
@endphp
|
|
|
|
@if (!$heroArtwork)
|
|
<section class="relative flex min-h-[62vh] max-h-[420px] w-full items-end overflow-hidden bg-nova-900 md:min-h-[38vh] md:max-h-[460px]">
|
|
<div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-nova-900 via-nova-900/60 to-transparent"></div>
|
|
<div class="relative z-10 w-full px-6 pb-7 sm:px-10 lg:px-16">
|
|
<p class="mb-1.5 text-xs font-semibold uppercase tracking-widest text-accent">
|
|
Skinbase
|
|
</p>
|
|
<h1 class="text-2xl font-bold tracking-tight text-white sm:text-4xl">
|
|
Skinbase
|
|
</h1>
|
|
<p class="mt-2 max-w-2xl text-sm text-soft sm:text-base">
|
|
Discover digital art, wallpapers, skins, and photography from a global creator community. Explore trending work, fresh uploads, and long-time classics in one place.
|
|
</p>
|
|
<div class="mt-4 flex flex-wrap gap-3">
|
|
<a href="/discover/trending" class="btn-accent-solid rounded-xl px-5 py-2 text-sm font-semibold">Explore Trending</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
@else
|
|
<section class="group relative flex min-h-[62vh] max-h-[420px] w-full items-end overflow-hidden bg-nova-900 md:min-h-[38vh] md:max-h-[460px]">
|
|
<x-artwork.featured-picture
|
|
:image="$heroFeaturedImage ?? [
|
|
'alt' => $heroArtwork['title'] ?? 'Featured artwork',
|
|
'img_src' => $heroArtwork['thumb_lg'] ?? $heroArtwork['thumb'] ?? $fallbackImage,
|
|
'img_srcset' => $heroArtwork['thumb_srcset'] ?? null,
|
|
'img_sizes' => '100vw',
|
|
'sources' => [],
|
|
]"
|
|
class="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.02]"
|
|
fetchpriority="high"
|
|
loading="eager"
|
|
decoding="async"
|
|
/>
|
|
|
|
<div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-nova-900 via-nova-900/55 to-transparent"></div>
|
|
|
|
<div class="relative z-10 w-full px-6 pb-7 sm:px-10 lg:px-16">
|
|
<p class="mb-1.5 text-xs font-semibold uppercase tracking-widest text-accent">
|
|
Skinbase
|
|
</p>
|
|
<h1 class="text-2xl font-bold tracking-tight text-white drop-shadow sm:text-4xl lg:text-5xl">
|
|
Digital Art & Wallpapers
|
|
</h1>
|
|
<p class="mt-2 max-w-2xl text-sm text-soft sm:text-base">
|
|
Discover digital art, wallpapers, skins, and photography from a global creator community. Browse trending work, fresh uploads, and timeless favorites.
|
|
</p>
|
|
<p class="mt-3 text-sm text-soft">
|
|
Featured artwork:
|
|
<a href="{{ $heroArtwork['url'] ?? '#' }}" class="text-nova-200 transition hover:text-white">
|
|
{{ $heroArtwork['title'] ?? 'Untitled' }} by {{ $heroArtwork['author'] ?? 'Artist' }}
|
|
</a>
|
|
</p>
|
|
<div class="mt-4 flex flex-wrap gap-3">
|
|
<a
|
|
href="/discover/trending"
|
|
class="btn-accent-solid rounded-xl px-5 py-2 text-sm font-semibold"
|
|
>
|
|
Explore Trending
|
|
</a>
|
|
<a
|
|
href="{{ $heroArtwork['url'] ?? '#' }}"
|
|
class="rounded-xl border border-nova-600 px-5 py-2 text-sm font-semibold text-nova-200 shadow transition hover:border-nova-400 hover:text-white"
|
|
>
|
|
View Artwork
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
@endif |