homepage stuff and text animation fix

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">