eshop

assets/views/shop/_card.html

@@ -0,0 +1,12 @@
+<a href="/shop/{{ product.slug }}"
+  class="group flex flex-col overflow-hidden rounded-radius border border-outline bg-surface transition hover:border-primary dark:border-outline-dark dark:bg-surface-dark-alt dark:hover:border-primary-dark">
+  <div class="aspect-square overflow-hidden bg-surface-alt dark:bg-surface-dark">
+    {% if product.image %}
+    <img src="/images/{{ product.image }}" alt="{{ product.name }}" class="size-full object-cover transition group-hover:scale-105">
+    {% endif %}
+  </div>
+  <div class="flex flex-1 flex-col gap-1 p-4">
+    <h3 class="font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ product.name }}</h3>
+    <p class="mt-auto pt-2 font-semibold text-primary dark:text-primary-dark">{{ product.price }} {{ product.currency }}</p>
+  </div>
+</a>