feat(store): new endpoints, ui and beginnings of main store page

pages/store/[id]/index.vue

@@ -79,7 +79,7 @@
 
               <template #addons>
                 <VueNavigation />
-                <VuePagination />
+                <CarouselPagination class="py-2 px-12" />
               </template>
             </VueCarousel>
           </div>
@@ -115,19 +115,6 @@
   </div>
 </template>
 
-<style lang="scss">
-.carousel__icon {
-  color: #f4f4f5;
-}
-.carousel__pagination-button::after {
-  background-color: #3f3f46;
-  border-radius: 999999px;
-}
-.carousel__pagination-button--active::after {
-  background-color: #a1a1aa;
-}
-</style>
-
 <script setup lang="ts">
 import { PlusIcon } from "@heroicons/vue/20/solid";
 import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";

pages/store/index.vue

@@ -1,3 +1,140 @@
+<!--
+  This example requires some changes to your config:
+  
+  ```
+  // tailwind.config.js
+  module.exports = {
+    // ...
+    plugins: [
+      // ...
+      require('@tailwindcss/forms'),
+    ],
+  }
+  ```
+-->
 <template>
-    
-</template>
+  <div class="w-full">
+    <!-- Hero section -->
+    <VueCarousel
+      :wrapAround="true"
+      :items-to-show="1"
+      :autoplay="15 * 1000"
+      :transition="500"
+      :pauseAutoplayOnHover="true"
+    >
+      <VueSlide v-for="game in recent" :key="game.id">
+        <div class="w-full h-full relative overflow-hidden">
+          <div class="absolute inset-0">
+            <img
+              :src="useObject(game.mBannerId)"
+              alt=""
+              class="size-full object-cover object-center"
+            />
+          </div>
+          <div
+            class="relative w-full h-full bg-gray-900/75 px-6 py-32 sm:px-12 sm:py-40 lg:px-16"
+          >
+            <div
+              class="relative mx-auto flex max-w-xl flex-col items-center text-center"
+            >
+              <h3 class="text-base/7 font-semibold text-blue-300">
+                Newly added
+              </h3>
+              <h2
+                class="text-3xl font-bold tracking-tight text-white sm:text-5xl"
+              >
+                {{ game.mName }}
+              </h2>
+              <p class="mt-3 text-lg text-zinc-300 line-clamp-2">
+                {{ game.mShortDescription }}
+              </p>
+              <NuxtLink
+                :href="`/store/${game.id}`"
+                class="mt-8 block w-full rounded-md border border-transparent bg-white px-8 py-3 text-base font-medium text-gray-900 hover:bg-gray-100 sm:w-auto"
+                >Check it out</NuxtLink
+              >
+            </div>
+          </div>
+        </div>
+      </VueSlide>
+
+      <template #addons>
+        <CarouselPagination class="py-2" :items="recent"/>
+      </template>
+    </VueCarousel>
+  </div>
+</template>
+
+<script setup lang="ts">
+const headers = useRequestHeaders(["cookie"]);
+const { data: recent } = await useFetch("/api/v1/store/recent", { headers });
+
+useHead({
+  title: "Store",
+});
+
+const categories = [
+  {
+    name: "New Arrivals",
+    href: "#",
+    imageSrc:
+      "https://tailwindui.com/plus/img/ecommerce-images/home-page-01-category-01.jpg",
+  },
+  {
+    name: "Productivity",
+    href: "#",
+    imageSrc:
+      "https://tailwindui.com/plus/img/ecommerce-images/home-page-01-category-02.jpg",
+  },
+  {
+    name: "Workspace",
+    href: "#",
+    imageSrc:
+      "https://tailwindui.com/plus/img/ecommerce-images/home-page-01-category-04.jpg",
+  },
+  {
+    name: "Accessories",
+    href: "#",
+    imageSrc:
+      "https://tailwindui.com/plus/img/ecommerce-images/home-page-01-category-05.jpg",
+  },
+  {
+    name: "Sale",
+    href: "#",
+    imageSrc:
+      "https://tailwindui.com/plus/img/ecommerce-images/home-page-01-category-03.jpg",
+  },
+];
+const collections = [
+  {
+    name: "Handcrafted Collection",
+    href: "#",
+    imageSrc:
+      "https://tailwindui.com/plus/img/ecommerce-images/home-page-01-collection-01.jpg",
+    imageAlt:
+      "Brown leather key ring with brass metal loops and rivets on wood table.",
+    description:
+      "Keep your phone, keys, and wallet together, so you can lose everything at once.",
+  },
+  {
+    name: "Organized Desk Collection",
+    href: "#",
+    imageSrc:
+      "https://tailwindui.com/plus/img/ecommerce-images/home-page-01-collection-02.jpg",
+    imageAlt:
+      "Natural leather mouse pad on white desk next to porcelain mug and keyboard.",
+    description:
+      "The rest of the house will still be a mess, but your desk will look great.",
+  },
+  {
+    name: "Focus Collection",
+    href: "#",
+    imageSrc:
+      "https://tailwindui.com/plus/img/ecommerce-images/home-page-01-collection-03.jpg",
+    imageAlt:
+      "Person placing task list card into walnut card holder next to felt carrying case on leather desk pad.",
+    description:
+      "Be more productive than enterprise project managers with a single piece of paper.",
+  },
+];
+</script>