category images with alt text on main page

config.yaml

@@ -14,8 +14,19 @@ params:
     professionalism and inclusivity.
   catalogButtons:
     home:
-      - categoryName: 'aslkjjdlk'
+      - categoryName: 'Backdrops'
         img: https://placehold.co/300x200/
+      - categoryName: 'Arches'
+        img: https://placehold.co/300x200/
+      - categoryName: 'Canopies'
+        img: https://placehold.co/300x200/
+      - categoryName: 'Chandeliers'
+        img: https://placehold.co/300x200/
+      - categoryName: 'Signature Pieces'
+        img: https://placehold.co/300x200/
+      - categoryName: 'Centerpieces'
+        img: https://placehold.co/300x200/
+
   social:
     main:
       - url: 'mailto:iangalloart@gmail.com'

themes/gallo/layouts/partials/categories.html

@@ -1,5 +1,21 @@
-{{ range .Site.Params.catalogButtons.home }}
-<a target="_blank" href="/catalog/#{{ .categoryName }}">
-  <img src="{{ .img }}">
-</a>
-{{ end }}
+<div class="grid grid-cols-3 gap-3 m-5 my-8">
+  {{ range .Site.Params.catalogButtons.home }}
+  <a
+    class="rounded-xl aspect-[3/2] overflow-hidden"
+    href="/catalog/#{{ .categoryName }}"
+  >
+    <div class="relative h-full max-w-full">
+      <p
+        class="w-full z-10 text-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white font-bold text-4xl"
+      >
+        {{ .categoryName }}
+      </p>
+      <img
+        class="h-full max-w-full opacity-50"
+        src="{{ .img }}"
+        alt="Category {{ .categoryName }}"
+      />
+    </div>
+  </a>
+  {{ end }}
+</div>

themes/gallo/layouts/partials/rental-catalog.html

@@ -26,7 +26,7 @@
           <span>{{ .quant }}</span>
         </div>
         {{ end }} {{ if ne .dimensions "" }}
-        <div class="text-right flex flex-row justify-between">
+        <div class="gap-1 text-right flex flex-row justify-between">
           <strong>Dimensions:</strong>
           <span>{{ .dimensions }}</span>
         </div>