optimizations

resources/js/Pages/ArtworkPage.jsx

@@ -116,12 +116,24 @@ function ArtworkPage({ artwork: initialArtwork, related: initialRelated, present
 
               {/* Artwork reactions */}
               {reactionTotals !== null && (
-                <ReactionBar
-                  entityType="artwork"
-                  entityId={artwork.id}
-                  initialTotals={reactionTotals}
-                  isLoggedIn={isAuthenticated}
-                />
+                <section className="relative z-20 overflow-visible rounded-[28px] border border-white/[0.08] bg-[radial-gradient(circle_at_top_left,rgba(245,158,11,0.14),transparent_42%),linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02))] px-5 py-5 shadow-[0_22px_55px_rgba(0,0,0,0.26)] backdrop-blur-xl sm:px-6">
+                  <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+                    <div className="max-w-xl">
+                      <div className="text-[11px] font-semibold uppercase tracking-[0.22em] text-accent/80">Artwork Reactions</div>
+                      <h2 className="mt-2 text-xl font-semibold tracking-[-0.02em] text-white">Make this artwork feel alive</h2>
+                      <p className="mt-1 text-sm leading-6 text-white/55">Drop a reaction so other people instantly see whether this piece hits with love, fire, wow, or a quick clap.</p>
+                    </div>
+
+                    <div className="sm:shrink-0">
+                      <ReactionBar
+                        entityType="artwork"
+                        entityId={artwork.id}
+                        initialTotals={reactionTotals}
+                        isLoggedIn={isAuthenticated}
+                      />
+                    </div>
+                  </div>
+                </section>
               )}
 
               {/* Tags & categories */}