Update home page

src/pages/home.html

@@ -1,25 +1,27 @@
-<header class="text-center">
-  <h1
-    class="bg-gradient-to-r from-green-300 via-blue-500 to-purple-600 bg-clip-text text-3xl font-extrabold text-transparent sm:text-5xl"
-  >
-    Understand User Flow.<span class="sm:block"> Increase Conversion. </span>
+<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/cover.jpg')] bg-cover bg-center rounded-md"
+>
+  <h1 class="text-6xl">
+    <div>Buy less,</div>
+    <div class="font-black">but better</div>
   </h1>
-  <p class="mx-auto mt-4 max-w-xl sm:text-xl/relaxed">
-    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt illo
-    tenetur fuga ducimus numquam ea!
+  <p class="text-balance">
+    We offer a unique collection of high end items for every home.
   </p>
-  <div class="mt-8 flex flex-wrap justify-center gap-4">
-    <a
-      class="block w-full rounded border border-blue-600 bg-blue-600 px-12 py-3 text-sm font-medium text-white focus:outline-none focus:ring active:text-opacity-75 sm:w-auto"
-      href="#"
+  <a href="#/shop" :class="btn.light">
+    Explore the shop&nbsp;
+    <span x-html="svg('arrow-right')" class="text-semibold"></span>
+  </a>
+</section>
+
+<section>
+  <h3 class="my-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)"
+      :key="product.name"
     >
-      Get Started
-    </a>
-    <a
-      class="block w-full rounded border border-blue-600 px-12 py-3 text-sm font-medium focus:outline-none focus:ring active:text-opacity-75 sm:w-auto"
-      href="#"
-    >
-      Learn More
-    </a>
-  </div>
-</header>
+      <li x-html="component('product-card')"></li>
+    </template>
+  </ul>
+</section>