Update catalog on home page and header

themes/gallo/layouts/partials/categories.html

@@ -1,28 +1,38 @@
-<div class="flex flex-col bg-white font-bold">
-  <div class="flex py-8 justify-center">
-    <p class="border-gray-200 border rounded-xl w-full max-w-[1000px] mx-auto p-2 text-4xl text-center text-black">
-      Rental Catalog
-    </p>
+<section class="bg-white text-gray-600 body-font">
+  <div class="container px-5 py-24 mx-auto">
+    <div class="flex flex-col w-full mb-20">
+      <h1
+        class="lg:w-2/3 mx-auto text-3xl mx-auto text-left font-medium title-font mb-4 text-gray-900"
+      >
+        Rental Catalog
+      </h1>
+      <p class="lg:w-2/3 text-gray-600 mx-auto leading-relaxed text-base">
+        Browse our extensive catalog of wedding structures to find the perfect
+        setting for your special day. Our structures are designed to provide a stunning
+        backdrop for your ceremony and reception, ensuring an unforgettable
+        experience for you and your guests.
+      </p>
+    </div>
+    <div class="pb-16 max-w-[1000px] grid grid-cols-1 gap-4 mx-auto md:grid-cols-2 lg:grid-cols-3">
+      {{ 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="text-black w-full z-10 text-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-2xl"
+          >
+            {{ .categoryName }}
+          </p>
+          <img
+            class="h-full max-w-full opacity-50"
+            src="{{ .img }}"
+            alt="Category {{ .categoryName }}"
+          />
+        </div>
+      </a>
+      {{ end }}
+    </div>
   </div>
-  <div class="pb-16 max-w-[1000px] grid grid-cols-3 gap-3 mx-auto">
-    {{ 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="text-black w-full z-10 text-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-2xl"
-        >
-          {{ .categoryName }}
-        </p>
-        <img
-          class="h-full max-w-full opacity-50"
-          src="{{ .img }}"
-          alt="Category {{ .categoryName }}"
-        />
-      </div>
-    </a>
-    {{ end }}
-  </div>
-</div>
+</section>

themes/gallo/layouts/partials/header.html

@@ -1,16 +1,18 @@
-<div
+<section
   style="
-    background-blend-mode: multiply;
-    background: url({{ .Site.Params.headerImg }}) rgba(0, 0, 0, 0.6);
-    background-position: center;
-    background-size: cover;
-  "
-  class="flex justify-start min-h-96"
+background-blend-mode: multiply;
+background: url({{ .Site.Params.headerImg }}) rgba(0, 0, 0, 0.75);
+background-position: center;
+background-size: cover;
+"
+  class="flex justify-start py-36 px-5"
 >
-  <div
-    class="flex flex-col ml-16 mb-8 place-self-center text-white max-w-4xl gap-4"
-  >
-    <h1 class="text-3xl font-bold">{{ .Site.Params.headerTitle }}</h1>
-    <p class="text-md">{{ .Site.Params.headerDesc }}</p>
+  <div class="flex flex-col w-full mx-auto container">
+    <h1 class="lg:w-2/3 mx-auto text-3xl text-left font-bold title-font mb-4">
+      {{ .Site.Params.headerTitle }}
+    </h1>
+    <p class="lg:w-2/3 text-md mx-auto leading-relaxed text-base">
+      {{ .Site.Params.headerDesc }}
+    </p>
   </div>
-</div>
+</section>