Update catalog on home page and header

themes/gallo/layouts/partials/categories.html

@@ -1,10 +1,19 @@
-<div class="flex flex-col bg-white font-bold">
+<section class="bg-white text-gray-600 body-font">
-  <div class="flex py-8 justify-center">
+  <div class="container px-5 py-24 mx-auto">
-    <p class="border-gray-200 border rounded-xl w-full max-w-[1000px] mx-auto p-2 text-4xl text-center text-black">
+    <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-3 gap-3 mx-auto">
+    <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"
@@ -25,4 +34,5 @@
       </a>
       {{ end }}
     </div>
-</div>
+  </div>
+</section>

themes/gallo/layouts/partials/header.html

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