homepage stuff and text animation fix

resources/views/components/ui/button.blade.php

@@ -1,8 +1,9 @@
 @props([
-    'tag'  => 'button',
-    'href' => null,
-    'type' => 'button',
-    'size' => 'lg',
+    'tag'      => 'button',
+    'href'     => null,
+    'type'     => 'button',
+    'size'     => 'lg',
+    'position' => 'relative',
 ])
 
 @php
@@ -14,7 +15,14 @@
         default => 'py-5 px-[46px] text-[19px]',
     };
 
-    $class = 'btn-primary relative isolate inline-flex items-center justify-center border border-black font-display font-bold italic text-black cursor-pointer no-underline uppercase ' . $sizeClasses;
+    // $position defaults to 'relative' (needed so the ::before/::after layers
+    // in .btn-primary position against the button itself), but callers that
+    // need to place the button absolutely (e.g. a hover-reveal CTA over a
+    // product image) must pass position="absolute" here rather than adding
+    // "absolute" via the class prop — Tailwind's generated stylesheet always
+    // orders the "relative" utility after "absolute", so on a class clash
+    // "relative" silently wins and the button never actually gets positioned.
+    $class = 'btn-primary '.$position.' isolate inline-flex items-center justify-center border border-black font-display font-bold italic text-black cursor-pointer no-underline uppercase ' . $sizeClasses;
 
     $attrs = $href
         ? $attributes->merge(['href' => $href, 'class' => $class])