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])

resources/views/components/ui/product-card.blade.php

@@ -5,24 +5,26 @@
     'href'  => '#',
 ])
 
-<div class="group relative">
-    <a href="{{ $href }}" class="block border border-black overflow-hidden bg-white mb-4 relative -z-1">
-        @if($image)
-            <img
-                src="{{ $image }}"
-                alt="{{ $name }}"
-                loading="lazy"
-                class="w-full h-auto block"
-            >
-        @else
-            <div class="w-full aspect-square bg-neutral-300 flex items-center justify-center text-neutral-500 text-sm">
-                Χωρίς εικόνα
-            </div>
-        @endif
-    </a>
+<div class="group">
+    <div class="relative flex items-center justify-center mb-4">
+        <a href="{{ $href }}" class="block w-full border border-black overflow-hidden bg-white">
+            @if($image)
+                <img
+                    src="{{ $image }}"
+                    alt="{{ $name }}"
+                    loading="lazy"
+                    class="w-full h-auto block"
+                >
+            @else
+                <div class="w-full aspect-square bg-neutral-300 flex items-center justify-center text-neutral-500 text-sm">
+                    Χωρίς εικόνα
+                </div>
+            @endif
+        </a>
 
-    <div class="absolute inset-x-0 top-0 bottom-[calc(theme(spacing.4)+1.5rem+0.25rem)] flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-100 ">
-        <x-ui.button size="md">Προσθήκη στο καλάθι</x-ui.button>
+        <x-ui.button size="md" position="absolute" class="opacity-0 group-hover:opacity-100 transition-opacity duration-100">
+            Προσθήκη στο καλάθι
+        </x-ui.button>
     </div>
 
     <div class="flex items-baseline justify-between gap-4">