✨ Recent post on landing page

components/activity/Carousel.vue

@@ -0,0 +1,46 @@
+<template>
+  <v-carousel v-if="!loading" show-arrows="hover" cycle hide-delimiters progress="primary">
+    <v-carousel-item v-for="(item, i) in items" :key="i">
+      <v-sheet color="rgba(0, 0, 0, .4)"  class="h-full w-full flex items-center justify-center post-container overflow-scroll">
+        <post-item class="mt-5 mb-2" :post="item" />
+      </v-sheet>
+    </v-carousel-item>
+  </v-carousel>
+  <div v-else class="w-full flex items-center justify-center">
+    <v-progress-circular indeterminate />
+  </div>
+</template>
+
+<script setup lang="ts">
+const config = useRuntimeConfig()
+
+const items = ref<any[]>([])
+
+const loading = ref(false)
+
+async function load() {
+  loading.value = true
+
+  const res = await fetch(`${config.public.solarNetworkApi}/cgi/interactive/posts?take=5&realmId=${config.public.solarRealmId}`)
+  const result = await res.json()
+
+  items.value.push(...result.data)
+
+  loading.value = false
+}
+
+onMounted(() => {
+  load()
+})
+</script>
+
+<style scoped>
+.post-container::-webkit-scrollbar {
+  display: none;
+}
+
+.post-container {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+</style>

components/attachment/Carousel.vue

@@ -2,7 +2,7 @@
   <v-carousel
     hide-delimiter-background
     hide-delimiters
-    :progress="attachments.length > 1"
+    :progress="attachments.length > 1 ? 'primary' : false"
     :show-arrows="attachments.length > 1 ? 'hover' : false"
     height="auto"
   >

components/product/Carousel.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-carousel class="carousel-section" show-arrows="hover" cycle hide-delimiters>
+  <v-carousel show-arrows="hover" cycle hide-delimiters>
     <v-carousel-item v-for="(item, i) in props.products" :key="i" :src="item?.thumbnail" cover>
       <v-sheet color="rgba(0, 0, 0, .4)" height="calc(100% + 24px)" class="p-5">
         <v-row class="fill-height" align="center" justify="center">

pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container>
+  <v-container class="flex flex-col gap-[4rem] my-[2rem]">
     <v-row class="content-section">
       <v-col cols="12" md="4" class="d-flex align-center">
         <div>
@@ -19,6 +19,26 @@
         </v-card>
       </v-col>
     </v-row>
+    <v-row class="content-section">
+      <v-col cols="12" md="8">
+        <v-card>
+          <activity-carousel class="carousel-section" />
+        </v-card>
+      </v-col>
+      <v-col cols="12" md="4" class="d-flex align-center" order="first" order-md="last">
+        <div class="text-right">
+          <h1 class="text-4xl font-bold">Activities</h1>
+          <p class="text-lg mt-3">
+            Keep in touch, <br />
+            and learn what we doing recently.
+          </p>
+          <p class="text-grey mt-2">
+            <v-icon icon="mdi-arrow-left" size="16" class="mb-0.5" />
+            See some posts of our realm just here
+          </p>
+        </div>
+      </v-col>
+    </v-row>
   </v-container>
 </template>