feat: improved UI

web/templates/components/product_card.html

@@ -1,23 +1,26 @@
 {% load i18n %}
-<article class="card">
-
-  <a class="h-56 w-full" href="{% url 'web:product_detail' pk=product.pk slug=product.slug %}">
-    <img class="mx-auto h-full " src="{{ product.images.all.0.m.url }}" alt="{{ product.name }}"/>
+<article class="card bg-base-100 border border-base-300 rounded-2xl overflow-hidden h-full flex flex-col transition-shadow duration-200 hover:shadow-lg">
+  <a class="block aspect-square bg-base-200/50" href="{% url 'web:product_detail' pk=product.pk slug=product.slug %}">
+    <img class="h-full w-full object-contain p-4" src="{{ product.images.all.0.m.url }}" alt="{{ product.name }}" loading="lazy"/>
   </a>
 
-  <div class="pt-6 flex justify-between">
-    <a href="{% url 'web:product_detail' pk=product.pk slug=product.slug %}" class="link">
-      <h1>{{ product.name }}</h1>
-    </a>
+  <div class="p-4 flex flex-col flex-1">
+    <div class="flex items-start justify-between gap-2">
+      <a href="{% url 'web:product_detail' pk=product.pk slug=product.slug %}" class="min-w-0">
+        <h2 class="font-display font-semibold leading-snug line-clamp-2 hover:text-primary transition-colors">
+          {{ product.name }}
+        </h2>
+      </a>
 
-    <p class="txt-2xl">
-      {% with product.current_prices.0 as price %}
-        {{ price.price_with_tax }} €
-      {% endwith %}
-    </p>
-  </div>
+      <p class="font-display font-bold text-lg whitespace-nowrap shrink-0">
+        {% with product.current_prices.0 as price %}
+          {{ price.price_with_tax }} €
+        {% endwith %}
+      </p>
+    </div>
 
-  <div class="mt-4">
-    {% include 'components/cart/add_to_cart.html' %}
+    <div class="mt-auto pt-4">
+      {% include 'components/cart/add_to_cart.html' with size='sm' %}
+    </div>
   </div>
-</article>
+</article>