From 800aad776be3e1e2e60161b0507aa1749ec4ffd6 Mon Sep 17 00:00:00 2001
From: Ray C <rayc2045@gmail.com>
Date: Sat, 11 May 2024 23:03:47 +0800
Subject: [PATCH] Update home page

---
 src/pages/home.html | 41 ++++++++++++++++++++++++++++++++++++++---
 1 file changed, 38 insertions(+), 3 deletions(-)

diff --git a/src/pages/home.html b/src/pages/home.html
index 43e2032..6e344b7 100644
--- a/src/pages/home.html
+++ b/src/pages/home.html
@@ -1,5 +1,5 @@
 <section
-  class="py-40 mx-auto space-y-8 flex flex-col justify-center items-center text-center text-gray-100 bg-[url('./src/images/covers/banner.jpg')] bg-cover bg-center rounded-md"
+  class="mb-12 py-48 mx-auto space-y-8 flex flex-col justify-center items-center text-center text-gray-100 bg-[url('./src/images/covers/banner.jpg')] bg-cover bg-center rounded-md"
 >
   <h1 class="text-6xl">
     <div>Buy less,</div>
@@ -14,8 +14,8 @@ <h1 class="text-6xl">
   </a>
 </section>
 
-<section>
-  <h3 class="my-12 text-xl text-center">New & Noteworthy</h3>
+<section class="my-12">
+  <h3 class="mb-12 text-xl text-center">New & Noteworthy</h3>
   <ul class="grid place-content-center grid-cols-2 md:grid-cols-4 gap-8">
     <template
       x-for="product in shop.products.filter(p => p.label === 'new').slice(0, 4)"
@@ -25,3 +25,38 @@ <h3 class="my-12 text-xl text-center">New & Noteworthy</h3>
     </template>
   </ul>
 </section>
+
+<section class="my-12">
+  <div class="grid gap-8 md:grid-cols-3">
+    <a
+      href="#/shop?category=accessory"
+      class="aspect-square rounded-md bg-[url('./src/images/covers/accessories.jpg')] bg-cover bg-center hover:brightness-90 transition duration-300 relative"
+    >
+      <h3
+        class="absolute left-8 bottom-8 text-gray-100 text-xl text-bold tracking-wider"
+      >
+        Accessories
+      </h3>
+    </a>
+    <a
+      href="#/shop?category=essential"
+      class="aspect-square rounded-md bg-[url('./src/images/covers/essentials.jpg')] bg-cover bg-center hover:brightness-90 transition duration-300 relative"
+    >
+      <h3
+        class="absolute left-8 bottom-8 text-gray-100 text-xl text-bold tracking-wider"
+      >
+        Essentials
+      </h3>
+    </a>
+    <a
+      href="#/shop?category=living"
+      class="aspect-square rounded-md bg-[url('./src/images/covers/living.jpg')] bg-cover bg-center hover:brightness-90 transition duration-300 relative"
+    >
+      <h3
+        class="absolute left-8 bottom-8 text-gray-100 text-xl text-bold tracking-wider"
+      >
+        Living
+      </h3>
+    </a>
+  </div>
+</section>