update item views

views/shopitems.html

@@ -1,17 +1,27 @@
+  <div class="bg-white">
+  <div class="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
+    <h2 class="text-2xl font-bold tracking-tight text-gray-900">Available Zines</h2>
 
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+  <div class="mt-6 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8">
   {{ range .data.shopItems }}
-  <a href="/shopitems/{{ .ID }}">
-    <div class="bg-gray-200 rounded m-4 p-4">
 
-     <div class="relative w-full md:w-48 mb-4 flex rounded-lg justify-center items-center">
-       <img src="/{{ .Image }}" alt="shopping image"
-                class="object-cover w-full h-48 md:h-full rounded">
-     </div>
-      <h3 class="text-lg">{{ .Name }}</h3>
-      <i class="text-xs">{{ .Abstract }}</i>
-      <p class="">Price: {{ .Price }}</pÖ>
+    <div class="group relative">
+      <img src="/{{ .Image }}" alt="Product Image" class="aspect-square w-full rounded-md bg-gray-200 object-cover group-hover:opacity-75 lg:aspect-auto lg:h-80">
+      <div class="mt-4 flex justify-between">
+        <div>
+          <h3 class="text-sm text-gray-700">
+            <a href="/shopitems/{{ .ID }}">
+              <span aria-hidden="true" class="absolute inset-0"></span>
+              {{ .Name }}
+            </a>
+          </h3>
+          <!--<p class="mt-1 text-sm text-gray-500">{{ .Abstract }}</p>-->
+        </div>
+        <p class="text-sm font-medium text-gray-900">{{ .Price }}€</p>
+      </div>
     </div>
-  </a>
+
   {{ end }}
-</div>
+    </div>
+    </div>
+    </div>