feat: ship creator journey v2 and profile updates

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

@@ -2,6 +2,8 @@
     $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';
 @endphp
 
 @if (!$heroArtwork)
@@ -15,19 +17,23 @@
                 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>
+                <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]">
-        <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"
-        />
+        <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>
 
         <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-nova-900 via-nova-900/55 to-transparent"></div>
 
@@ -47,7 +53,7 @@
             <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"
+                    class="btn-accent-solid rounded-xl px-5 py-2 text-sm font-semibold"
                 >
                     Explore Trending
                 </a>