Wire homepage hero to featured thumbnail family; add featured-picture component

resources/views/components/artwork/featured-picture.blade.php

@@ -0,0 +1,34 @@
+@props([
+    'image' => [],
+    'fetchpriority' => 'auto',
+    'loading' => 'lazy',
+    'decoding' => 'async',
+])
+
+@php
+    $sources = is_array($image['sources'] ?? null) ? $image['sources'] : [];
+    $src = $image['img_src'] ?? 'https://files.skinbase.org/default/missing_xl.webp';
+    $srcset = $image['img_srcset'] ?? null;
+    $sizes = $image['img_sizes'] ?? '100vw';
+    $alt = $image['alt'] ?? 'Featured artwork';
+@endphp
+
+<picture>
+    @foreach ($sources as $source)
+        <source
+            media="{{ $source['media'] ?? '' }}"
+            srcset="{{ $source['srcset'] ?? '' }}"
+            sizes="{{ $source['sizes'] ?? '100vw' }}"
+            type="image/webp"
+        >
+    @endforeach
+    <img
+        src="{{ $src }}"
+        @if($srcset) srcset="{{ $srcset }}" sizes="{{ $sizes }}" @endif
+        alt="{{ $alt }}"
+        {{ $attributes }}
+        fetchpriority="{{ $fetchpriority }}"
+        loading="{{ $loading }}"
+        decoding="{{ $decoding }}"
+    >
+</picture>

resources/views/web/home.blade.php

@@ -4,7 +4,15 @@
 
 @push('head')
     {{-- Preload hero image for faster LCP --}}
-    @if(!empty($props['hero']['thumb']) || !empty($props['hero']['thumb_lg']))
+    @if(!empty($props['hero']['featured_image']['preload_url']))
+        <link
+            rel="preload"
+            as="image"
+            href="{{ $props['hero']['featured_image']['preload_url'] }}"
+            @if(!empty($props['hero']['featured_image']['preload_srcset'])) imagesrcset="{{ $props['hero']['featured_image']['preload_srcset'] }}" imagesizes="{{ $props['hero']['featured_image']['preload_sizes'] ?? '100vw' }}" @endif
+            fetchpriority="high"
+        >
+    @elseif(!empty($props['hero']['thumb']) || !empty($props['hero']['thumb_lg']))
         <link
             rel="preload"
             as="image"

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

@@ -1,9 +1,7 @@
 @php
     $heroArtwork = $artwork ?? null;
     $fallbackImage = 'https://files.skinbase.org/default/missing_lg.webp';
-    $heroImage = $heroArtwork['thumb_lg'] ?? $heroArtwork['thumb'] ?? $fallbackImage;
-    $heroImageSrcset = $heroArtwork['thumb_srcset'] ?? null;
-    $heroImageSizes = '100vw';
+    $heroFeaturedImage = $heroArtwork['featured_image'] ?? null;
 @endphp
 
 @if (!$heroArtwork)
@@ -23,17 +21,19 @@
     </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]">
-        <picture>
-            <img
-                src="{{ $heroImage }}"
-                @if($heroImageSrcset) srcset="{{ $heroImageSrcset }}" sizes="{{ $heroImageSizes }}" @endif
-                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"
-                loading="eager"
-                decoding="sync"
-            />
-        </picture>
+        <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>