optimizations

resources/views/web/home/hero.blade.php

@@ -0,0 +1,63 @@
+@php
+    $heroArtwork = $artwork ?? null;
+    $fallbackImage = 'https://files.skinbase.org/default/missing_lg.webp';
+    $heroImage = $heroArtwork['thumb_lg'] ?? $heroArtwork['thumb'] ?? $fallbackImage;
+@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">
+            <h1 class="text-2xl font-bold tracking-tight text-white sm:text-4xl">
+                Skinbase Nova
+            </h1>
+            <p class="mt-2 max-w-xl text-sm text-soft">
+                Discover. Create. Inspire.
+            </p>
+            <div class="mt-4 flex flex-wrap gap-3">
+                <a href="/discover/trending" class="rounded-xl bg-accent px-5 py-2 text-sm font-semibold text-white shadow-lg transition hover:brightness-110">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]">
+        <img
+            src="{{ $heroImage }}"
+            alt="{{ $heroArtwork['title'] ?? 'Featured artwork' }}"
+            class="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.02]"
+            fetchpriority="high"
+            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">
+                Featured Artwork
+            </p>
+            <h1 class="text-2xl font-bold tracking-tight text-white drop-shadow sm:text-4xl lg:text-5xl">
+                {{ $heroArtwork['title'] ?? 'Untitled' }}
+            </h1>
+            <p class="mt-1.5 text-sm text-soft">
+                by
+                <a href="{{ $heroArtwork['url'] ?? '#' }}" class="text-nova-200 transition hover:text-white">
+                    {{ $heroArtwork['author'] ?? 'Artist' }}
+                </a>
+            </p>
+            <div class="mt-4 flex flex-wrap gap-3">
+                <a
+                    href="/discover/trending"
+                    class="rounded-xl bg-accent px-5 py-2 text-sm font-semibold text-white shadow-lg transition hover:brightness-110"
+                >
+                    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