From c052f3dee3f843d85b0a558f526308b8a3314b2b Mon Sep 17 00:00:00 2001
From: Farhan <101630148+KucingOyenBarbar@users.noreply.github.com>
Date: Tue, 7 Nov 2023 20:48:32 +0700
Subject: [PATCH 1/5] Fix Active Menu

---
 components/navbar/NavbarFixed.vue  | 10 +++++---
 components/navbar/NavbarSticky.vue | 40 ++++++++++++++++++------------
 2 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/components/navbar/NavbarFixed.vue b/components/navbar/NavbarFixed.vue
index 72074f8..0de33e8 100644
--- a/components/navbar/NavbarFixed.vue
+++ b/components/navbar/NavbarFixed.vue
@@ -61,6 +61,7 @@ const toggleMenu = (() => {
 })
 
 
+const routePathMenu: globalThis.ComputedRef<string | string[]> = computed(() => route.params.id)
 </script>
 
 <template>
@@ -122,7 +123,7 @@ const toggleMenu = (() => {
           <!-- Show Dropdown display in laptop or desktop -->
           <li @mouseenter="showDropdown(true)" @mouseleave="showDropdown(false)"
             class="nav-item dropdown d-none d-lg-block">
-            <NuxtLink :class="`nav-link mx-md-1  ${route.path === '/articles' ? 'active' : ''
+            <NuxtLink :class="`nav-link mx-md-1  ${route.path === '/articles' || route.path === `/${routePathMenu}` ? 'active' : ''
               }`" to="/articles" role="button" data-bs-toggle="dropdown1" aria-expanded="false">
               Berita
               <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="currentColor">
@@ -159,7 +160,7 @@ const toggleMenu = (() => {
 
           <!-- Showing dropdown display in mobile or tablet -->
           <li class="nav-item dropdown d-lg-none d-md-block">
-            <NuxtLink :class="`nav-link mx-md-1  ${route.path === '/articles' ? 'active' : ''
+            <NuxtLink :class="`nav-link mx-md-1  ${route.path === '/articles' || route.path === `/${routePathMenu}` ? 'active' : ''
               }`" to="/articles" role="button" data-bs-toggle="dropdown" aria-expanded="false">
               Berita
               <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
@@ -173,8 +174,9 @@ const toggleMenu = (() => {
                 <NuxtLink @click="toggleMenu" class="dropdown-item" :to="`/articles`">Indeks</NuxtLink>
               </li>
               <li v-for="category in categories" :key="category.id">
-                <NuxtLink @click="toggleMenu()" class="dropdown-item" :to="`/category/${category.slug}`">{{ category.name
-                }}</NuxtLink>
+                <NuxtLink @click="toggleMenu()" class="dropdown-item" :active-class="`active-menu`"
+                  :to="`/category/${category.slug}`">{{ category.name
+                  }}</NuxtLink>
               </li>
             </ul>
           </li>
diff --git a/components/navbar/NavbarSticky.vue b/components/navbar/NavbarSticky.vue
index 81e5f05..fd8b053 100644
--- a/components/navbar/NavbarSticky.vue
+++ b/components/navbar/NavbarSticky.vue
@@ -13,6 +13,7 @@ const isDropdownEvents: globalThis.Ref<boolean> = ref(false);
 const isDropdownTranslate: globalThis.Ref<boolean> = ref(false);
 const isLanguage: globalThis.Ref<string> = ref("ID");
 
+
 const toggleColorMode = () => {
   const newColorMode: "dark" | "light" =
     colorMode.preference === "dark" ? "light" : "dark";
@@ -78,6 +79,7 @@ const toggleMenu = (() => {
     : navbar?.classList.add('show')
 })
 
+const routePathMenu: globalThis.ComputedRef<string | string[]> = computed(() => route.params.id)
 
 </script>
 
@@ -141,7 +143,8 @@ const toggleMenu = (() => {
           <!-- Show Dropdown display in laptop or desktop -->
           <li @mouseenter="showDropdown(true)" @mouseleave="showDropdown(false)"
             class="nav-item dropdown d-none d-lg-block">
-            <NuxtLink :class="`nav-link mx-md-1  ${route.path === '/articles' ? 'active' : ''
+            <NuxtLink :class="`nav-link mx-md-1  ${route.path === '/articles'
+              || route.path == `/category/${routePathMenu}` ? 'active' : ''
               }`" to="/articles" role="button" data-bs-toggle="dropdown1" aria-expanded="false">
               Berita
               <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="currentColor">
@@ -152,14 +155,17 @@ const toggleMenu = (() => {
             </NuxtLink>
             <ul class="dropdown-menu" :class="{ show: isDropdownVisible }">
               <li v-for="category in categories" :key="category.id">
-                <NuxtLink @click="toggleMenu" class="dropdown-item" :to="`/category/${category.slug}`">{{ category.name }}
+                <NuxtLink @click="toggleMenu" class="dropdown-item" :active-class="`active-menu`"
+                  :to="`/category/${category.slug}`">
+                  {{
+                    category.name }}
                 </NuxtLink>
               </li>
             </ul>
           </li>
           <li @mouseenter="showDropdownEvents(true)" @mouseleave="showDropdownEvents(false)"
             class="nav-item dropdown d-none d-lg-block">
-            <NuxtLink :class="`nav-link mx-md-1  ${route.path === '/events' ? 'active' : ''
+            <NuxtLink :class="`nav-link mx-md-1  ${route.path === '/events' || route.path === `/events/category/${routePathMenu}` ? 'active' : ''
               }`" to="/events" role="button" data-bs-toggle="dropdown1" aria-expanded="false">
               Acara
               <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="currentColor">
@@ -170,8 +176,9 @@ const toggleMenu = (() => {
             </NuxtLink>
             <ul class="dropdown-menu" :class="{ show: isDropdownEvents }">
               <li v-for="category in categoriesEvents" :key="category.id">
-                <NuxtLink @click="toggleMenu" class="dropdown-item" :to="`/events/category/${category.slug}`">{{
-                  category.name }}</NuxtLink>
+                <NuxtLink @click="toggleMenu" class="dropdown-item" :active-class="`active-menu`"
+                  :to="`/events/category/${category.slug}`">{{
+                    category.name }}</NuxtLink>
               </li>
 
             </ul>
@@ -179,7 +186,8 @@ const toggleMenu = (() => {
 
           <!-- Showing dropdown display in mobile or tablet -->
           <li class="nav-item dropdown d-lg-none d-md-block">
-            <NuxtLink :class="`nav-link mx-md-1  ${route.path === '/articles' ? 'active' : ''
+            <NuxtLink :class="`nav-link mx-md-1  ${route.path === '/articles'
+              || route.path == `/category/${routePathMenu}` ? 'active' : ''
               }`" to="/articles" role="button" data-bs-toggle="dropdown" aria-expanded="false">
               Berita
               <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
@@ -190,17 +198,19 @@ const toggleMenu = (() => {
             </NuxtLink>
             <ul class="dropdown-menu" :class="{ show: isDropdownVisible }">
               <li>
-                <NuxtLink @click="toggleMenu" class="dropdown-item" :to="`/articles`">Indeks</NuxtLink>
+                <NuxtLink @click="toggleMenu" class="dropdown-item" :active-class="`active-menu`" :to="`/articles`">Indeks
+                </NuxtLink>
               </li>
               <li v-for="category in categories" :key="category.id">
-                <NuxtLink @click="toggleMenu" class="dropdown-item" :to="`/category/${category.slug}`">{{ category.name }}
+                <NuxtLink @click="toggleMenu" class="dropdown-item" :active-class="`active-menu`"
+                  :to="`/category/${category.slug}`">{{ category.name }}
                 </NuxtLink>
               </li>
             </ul>
           </li>
 
           <li class="nav-item dropdown d-lg-none d-md-block">
-            <NuxtLink :class="`nav-link mx-md-1  ${route.path === '/events' ? 'active' : ''
+            <NuxtLink :class="`nav-link mx-md-1  ${route.path === '/events' || route.path == `/events/category/${routePathMenu}` ? 'active' : ''
               }`" to="/events" role="button" data-bs-toggle="dropdown" aria-expanded="false">
               Acara
               <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
@@ -210,12 +220,10 @@ const toggleMenu = (() => {
               </svg>
             </NuxtLink>
             <ul class="dropdown-menu" :class="{ show: isDropdownEvents }">
-              <li>
-                <NuxtLink @click="toggleMenu" class="dropdown-item" :to="`/events`">Indeks</NuxtLink>
-              </li>
               <li v-for="category in categoriesEvents" :key="category.id">
-                <NuxtLink @click="toggleMenu" class="dropdown-item" :to="`/events/category/${category.slug}`">{{
-                  category.name }}</NuxtLink>
+                <NuxtLink @click="toggleMenu" class="dropdown-item" :active-class="`active-menu`"
+                  :to="`/events/category/${category.slug}`">{{
+                    category.name }}</NuxtLink>
               </li>
             </ul>
           </li>
@@ -375,8 +383,8 @@ const toggleMenu = (() => {
   color: #d71149 !important;
 }
 
-.dropdown-item.active {
-  color: var(--primary-600, #d71149) !important;
+.dropdown-item.active-menu {
+  color: #d71149 !important;
 }
 
 .navbar-sticky .bi {

From 8d2b15876652b0946aac450801537b51801f218b Mon Sep 17 00:00:00 2001
From: Farhan <101630148+KucingOyenBarbar@users.noreply.github.com>
Date: Tue, 7 Nov 2023 23:44:51 +0700
Subject: [PATCH 2/5] Perbaikan Halaman Events

---
 components/navbar/NavbarFixed.vue        |   4 +-
 components/navbar/NavbarSticky.vue       |   4 +-
 pages/articles/[id].vue                  | 589 -----------------------
 pages/events/[id].vue                    | 259 ++--------
 pages/events/category/[id].vue           | 210 ++++++--
 pages/events/index.vue                   | 387 ---------------
 utils/data/getInitialCategoryPostData.ts | 183 +++----
 7 files changed, 316 insertions(+), 1320 deletions(-)
 delete mode 100644 pages/articles/[id].vue
 delete mode 100644 pages/events/index.vue

diff --git a/components/navbar/NavbarFixed.vue b/components/navbar/NavbarFixed.vue
index 0de33e8..41c066d 100644
--- a/components/navbar/NavbarFixed.vue
+++ b/components/navbar/NavbarFixed.vue
@@ -141,7 +141,7 @@ const routePathMenu: globalThis.ComputedRef<string | string[]> = computed(() =>
           <li @mouseenter="showDropdownEvents(true)" @mouseleave="showDropdownEvents(false)"
             class="nav-item dropdown d-none d-lg-block">
             <NuxtLink :class="`nav-link mx-md-1  ${route.path === '/events' ? 'active' : ''
-              }`" to="/events" role="button" data-bs-toggle="dropdown1" aria-expanded="false">
+              }`" to="/#" role="button" data-bs-toggle="dropdown1" aria-expanded="false">
               Acara
               <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="currentColor">
                 <path
@@ -183,7 +183,7 @@ const routePathMenu: globalThis.ComputedRef<string | string[]> = computed(() =>
 
           <li class="nav-item dropdown d-lg-none d-md-block">
             <NuxtLink :class="`nav-link mx-md-1  ${route.path === '/events' ? 'active' : ''
-              }`" to="/events" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+              }`" to="/#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
               Acara
               <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                 <path
diff --git a/components/navbar/NavbarSticky.vue b/components/navbar/NavbarSticky.vue
index fd8b053..bfa0ea3 100644
--- a/components/navbar/NavbarSticky.vue
+++ b/components/navbar/NavbarSticky.vue
@@ -166,7 +166,7 @@ const routePathMenu: globalThis.ComputedRef<string | string[]> = computed(() =>
           <li @mouseenter="showDropdownEvents(true)" @mouseleave="showDropdownEvents(false)"
             class="nav-item dropdown d-none d-lg-block">
             <NuxtLink :class="`nav-link mx-md-1  ${route.path === '/events' || route.path === `/events/category/${routePathMenu}` ? 'active' : ''
-              }`" to="/events" role="button" data-bs-toggle="dropdown1" aria-expanded="false">
+              }`" to="#" role="button" data-bs-toggle="dropdown1" aria-expanded="false">
               Acara
               <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="currentColor">
                 <path
@@ -211,7 +211,7 @@ const routePathMenu: globalThis.ComputedRef<string | string[]> = computed(() =>
 
           <li class="nav-item dropdown d-lg-none d-md-block">
             <NuxtLink :class="`nav-link mx-md-1  ${route.path === '/events' || route.path == `/events/category/${routePathMenu}` ? 'active' : ''
-              }`" to="/events" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+              }`" to="/#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
               Acara
               <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                 <path
diff --git a/pages/articles/[id].vue b/pages/articles/[id].vue
deleted file mode 100644
index aa42606..0000000
--- a/pages/articles/[id].vue
+++ /dev/null
@@ -1,589 +0,0 @@
-<script setup>
-
-definePageMeta({ layout: "content-layout" })
-
-
-const route = useRoute();
-
-const postId = String(route.params.id)
-
-
-
-const { data: post } = await useFetch('/api/posts', {
-  transform: (posts) => {
-    return posts.find(post => post.slug === postId)
-  }
-})
-
-
-const { data: postsData } = await useFetch('/api/posts')
-
-// const { data: posts } = await useAsyncData('posts', () => $fetch('/api/posts'))
-
-
-// useSeoMeta({
-//   title: post.title.rendered,
-//   author: "Smart Nation",
-//   description: post.excerpt.rendered,
-//   ogTitle: post.title.rendered,
-//   ogDescription: post.excerpt.rendered,
-//   ogImage: post.featured_media,
-//   ogImageAlt: post.title.rendered,
-//   ogImageType: "image/png",
-//   ogImageWidth: 100,
-//   ogImageHeight: 443,
-//   ogImageUrl: "https://smartnation.id/",
-// });
-
-useSeoMeta({
-  title: 'Halaman detail'
-})
-
-</script>
-
-<template>
-  <!-- rendered content main -->
-  <main id="content">
-    <!-- section berita detail start -->
-    <section class="berita-section-container position-relative py-5 mt-5">
-      <div class="container">
-        <div class="row justify-content-start g-3 pt-3">
-
-          <div class="col-lg-8 col-md-auto">
-            <!-- Article Content Start -->
-            <div class="row justify-content-start">
-              <div class="col">
-                <div class="article-details-container d-grid gap-3">
-                  <div class="article-details__title__wrapper">
-                    <h1 class="article-details__title">{{ post.title.rendered }}</h1>
-                  </div>
-
-                  <div class="article-details__info__wrapper">
-                    <div class="d-flex flex-wrap justify-content-start g-2">
-                      <div class="article-details__info__created me-3">
-                        <BootstrapIcon name="clock" />
-                        {{ useFormatter(post.date_gmt) }}
-                      </div>
-                      <div class="article-details__info__comments me-3">
-                        <BootstrapIcon name="chat" /> 10
-                      </div>
-                      <span class="article-details__info__views me-3">
-                        <BootstrapIcon name="eye" /> 10
-                      </span>
-                    </div>
-                  </div>
-
-                  <div class="article-details__content__wrapper">
-                    <div class="article-details__content__cover__wrapper">
-                      <NuxtImg class="img-fluid article-details__cover" :src="post.featured_media" :height="433"
-                        :alt="post.title.rendered" />
-                    </div>
-                    <div class="article-details__content__tags py-3">
-                      <ArticlesArticleCategories v-for="(category, index) in post.categories" :key="index"
-                        :categoryId="category" />
-                    </div>
-
-                    <div class="article-details__content" v-html="post.content.rendered"></div>
-
-                    <div class="article-details__content__share pt-3">
-                      <div class="d-flex flex-wrap justify-content-end g-2">
-                        <NuxtLink to="/" target="_blank" rel="noopener" title="Bagikan Ke Twitter"
-                          aria-label="Bagikan Ke Twiter"
-                          class="link-offset-2 link-underline link-underline-opacity-0 me-2">
-                          <BootstrapIcon name="twitter" class="article-details__content__share__medsos" />
-                        </NuxtLink>
-                        <NuxtLink to="/" target="_blank" rel="noopener" title="Bagikan Ke Twitter"
-                          aria-label="Bagikan Ke Twiter"
-                          class="link-offset-2 link-underline link-underline-opacity-0 me-2">
-                          <BootstrapIcon name="facebook" class="article-details__content__share__medsos" />
-                        </NuxtLink>
-                        <NuxtLink to="/" target="_blank" rel="noopener" title="Bagikan Ke Twitter"
-                          aria-label="Bagikan Ke Twiter"
-                          class="link-offset-2 link-underline link-underline-opacity-0 me-2">
-                          <BootstrapIcon name="instagram" class="article-details__content__share__medsos" />
-                        </NuxtLink>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <!-- Article Content End -->
-            <!-- Article Comments Start -->
-            <div class="row justify-content-start">
-              <div class="col">
-                <div class="article-comments__card">
-                  <div class="article-comments__body">
-                    <h3 class="article-comments-title">Komentar</h3>
-                    <p class="article-comments__text">
-                      Alamat Email Anda Tidak Akan Dipublikasikan. Bidang yang
-                      Wajib Ditandai
-                      <span class="article-comments__text__label">*</span>
-                    </p>
-
-                    <div class="d-flex flex-column justify-content-start g-2">
-                      <form class="article-form__input-container">
-                        <div class="mb-3">
-                          <label for="exampleFormControlTextarea1" class="form-label" hidden>Example textarea</label>
-                          <textarea class="form-control article-form__input__text" id="exampleFormControlTextarea1"
-                            rows="3"></textarea>
-                        </div>
-
-                        <div class="mb-3">
-                          <div class="row">
-                            <div class="col-sm-6 mb-3">
-                              <input type="text" class="form-control article-form__input" placeholder="Nama Lengkap"
-                                aria-label="Nama Lengkap" />
-                            </div>
-                            <div class="col-sm-6 mb-3">
-                              <input type="text" class="form-control article-form__input" placeholder="Alamat Email"
-                                aria-label="Alamat Email" />
-                            </div>
-                          </div>
-                        </div>
-
-                        <div class="mb-3 form-check">
-                          <input type="checkbox" class="form-check-input rounded-0" id="exampleCheck1" checked />
-                          <label class="form-check-label article-form__input_check__label" for="exampleCheck1">Simpan
-                            nama, email, dan situs web saya pada
-                            peramban ini untuk komentar saya
-                            berikutnya.</label>
-                        </div>
-
-                        <div class="mb-3">
-                          <button disabled type="submit" class="article-form__button">
-                            Posting
-                          </button>
-                        </div>
-                      </form>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div class="row justify-content-start">
-              <div class="col">
-                <div class="d-flex flex-column justify-content-start g-2 py-5">
-                  <div class="article-comments-card mb-3">
-                    <div class="d-flex justify-content-start align-content-start">
-                      <NuxtImg src="/images/user1.png" class="rounded me-3" :width="70" :height="70" />
-                      <div class="d-flex flex-column justify-content-start g-2">
-                        <div class="article-comments__name">Atika Putri</div>
-                        <div class="article-comments__created">
-                          30 Menit yang lalu
-                        </div>
-                        <div class="article-comments__content">
-                          Wahh Sangat Menarik
-                        </div>
-                        <div class="article-comments__action">
-                          <div class="hstack gap-3">
-                            <span class="d-inline">
-                              <BootstrapIcon name="hand-thumbs-up" /> 0
-                            </span>
-                            <span class="d-inline">
-                              <BootstrapIcon name="hand-thumbs-down" /> 0
-                            </span>
-                            <span class="d-inline"> Balas </span>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="article-comments-card mb-3">
-                    <div class="d-flex justify-content-start align-content-start">
-                      <NuxtImg src="/images/user1.png" class="rounded me-3" :width="70" :height="70" />
-                      <div class="d-flex flex-column justify-content-start g-2">
-                        <div class="article-comments__name">Atika Putri</div>
-                        <div class="article-comments__created">
-                          30 Menit yang lalu
-                        </div>
-                        <div class="article-comments__content">
-                          Wahh Sangat Menarik
-                        </div>
-                        <div class="article-comments__action">
-                          <div class="hstack gap-3">
-                            <span class="d-inline">
-                              <BootstrapIcon name="hand-thumbs-up" /> 0
-                            </span>
-                            <span class="d-inline">
-                              <BootstrapIcon name="hand-thumbs-down" /> 0
-                            </span>
-                            <span class="d-inline"> Balas </span>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="article-comments-card mb-3">
-                    <div class="d-flex justify-content-start align-content-start">
-                      <NuxtImg src="/images/user1.png" class="rounded me-3" :width="70" :height="70" />
-                      <div class="d-flex flex-column justify-content-start g-2">
-                        <div class="article-comments__name">Atika Putri</div>
-                        <div class="article-comments__created">
-                          30 Menit yang lalu
-                        </div>
-                        <div class="article-comments__content">
-                          Wahh Sangat Menarik
-                        </div>
-                        <div class="article-comments__action">
-                          <div class="hstack gap-3">
-                            <span class="d-inline">
-                              <BootstrapIcon name="hand-thumbs-up" /> 0
-                            </span>
-                            <span class="d-inline">
-                              <BootstrapIcon name="hand-thumbs-down" /> 0
-                            </span>
-                            <span class="d-inline"> Balas </span>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- Article Comments End -->
-          </div>
-          <div class="col-lg-4 col-md-auto">
-            <div class="px-md-3 mx-md-2">
-              <HeadingTitle class="text-capitalize fw-bold fs-5" title="Berita Terpopuler" />
-              <PostsPostItem :posts="postsData.slice(0, 5)" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-    <!-- section berita detail end -->
-  </main>
-</template>
-
-<style scoped>
-.article-details__title {
-  color: var(--danger-600, #ce2f2f);
-  font-family: Poppins;
-  font-size: 24px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 120%;
-  /* 28.8px */
-}
-
-.article-details__content {
-  color: var(--font-800, #454545);
-  text-align: justify;
-  font-family: Poppins;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 150%;
-  /* 21px */
-}
-
-.article-details__cover {
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-attachment: scroll;
-  width: 100%;
-  min-height: auto;
-}
-
-.article-details__content__wrapper {
-  width: 100%;
-  height: auto;
-  margin-bottom: 30px;
-}
-
-.article-details__info__created {
-  color: var(--font-400, #888);
-  font-family: Poppins;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 120%;
-  /* 8.992px */
-}
-
-.article-details__info__comments {
-  color: var(--font-400, #888);
-  font-family: Poppins;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 120%;
-  /* 8.992px */
-}
-
-.article-details__info__views {
-  color: var(--font-400, #888);
-  font-family: Poppins;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 120%;
-  /* 8.992px */
-}
-
-.article-details__content__share__medsos {
-  font-size: 22px;
-  color: #d1d1d1;
-}
-
-.article-comments-card {
-  border-radius: 16px;
-  border: 0.836px solid var(--font-100, #e7e7e7);
-  background: var(--font-50, #f6f6f6);
-  padding: 20px;
-}
-
-.article-comments__name {
-  color: var(--font-800, #454545);
-  font-family: Poppins;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 120%;
-  /* 12px */
-}
-
-.article-comments__created {
-  color: var(--font-400, #888);
-  font-family: Poppins;
-  font-size: 11px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 120%;
-  padding-top: 5px;
-  margin-bottom: 8px;
-  /* 9.6px */
-}
-
-.article-comments__content {
-  color: var(--font-900, #3d3d3d);
-  font-family: Poppins;
-  font-size: 11px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 120%;
-  margin-bottom: 10px;
-  /* 9.6px */
-}
-
-.btnCategory {
-  color: #6d6d6d;
-  font-family: Poppins;
-  font-size: 10px;
-  font-style: normal;
-  font-weight: 400;
-  border-radius: 5px;
-  background-color: #e7e7e7;
-}
-
-.article-comments__card {
-  width: 100%;
-  /* height: auto; */
-  height: auto;
-  flex-shrink: 0;
-  border-radius: 16px;
-  border: 0.837px solid var(--font-200, #d1d1d1);
-  background: var(--Background, #fff);
-  overflow: hidden;
-}
-
-.article-comments__card .article-comments__body {
-  padding: 20px;
-}
-
-.article-comments__card,
-.article-comments__title {
-  color: var(--font-700, #4f4f4f);
-  font-family: Poppins;
-  font-size: 18px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 120%;
-  /* 19.2px */
-}
-
-.article-comments__card,
-.article-comments__text {
-  color: var(--font-400, #888);
-  font-family: Poppins;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 120%;
-  /* 9.6px */
-}
-
-.article-comments__text__label {
-  color: #ce2f2f;
-}
-
-.article-form__input-container {
-  width: 100%;
-  height: auto;
-}
-
-.article-form__input__text {
-  border-radius: 12px;
-  border: 0.837px solid #d1d1d1;
-  background: #f6f6f6;
-  height: 137.268px;
-}
-
-.article-form__input {
-  height: 40px;
-  border-radius: 8px;
-  border: 0.837px solid var(--font-100, #e7e7e7);
-  background: var(--font-50, #f6f6f6);
-  color: var(--font-300, #b0b0b0);
-  font-family: Poppins;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 120%;
-  /* 9.6px */
-}
-
-.article-form__button {
-  border-radius: 8px;
-  background: var(--font-300, #b0b0b0);
-  color: var(--Background, #fff);
-  width: 74.687px;
-  height: auto;
-  padding: 8.37px;
-  border: 0;
-  border-radius: 8px;
-  cursor: pointer;
-  color: var(--font-50, #f6f6f6);
-  font-family: Poppins;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 120%;
-  /* 9.6px */
-  transition: ease 300ms;
-}
-
-.article-form__button:hover {
-  background: var(--font-300, #b0b0b0);
-}
-
-.article-form__button:disabled {
-  border-radius: 8px;
-  background: var(--font-300, #b0b0b0);
-}
-
-.article-form__input_check__label {
-  color: var(--font-400, #888);
-  font-family: Poppins;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 120%;
-  /* 9.6px */
-}
-
-.article-comments__empty {
-  border-radius: 16px;
-  border: 0.836px solid var(--font-100, #e7e7e7);
-  background: var(--font-50, #f6f6f6);
-  height: 397px;
-  margin-top: 20px;
-  margin-bottom: 20px;
-  padding: 20px;
-  text-align: center;
-}
-
-.article-comments__empty .article-comments__empty__text {
-  color: var(--font-800, #454545);
-  /* Font/Title 2 */
-  font-family: Poppins;
-  font-size: 25px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 120%;
-  /* 30px */
-}
-
-@media (min-width: 1200px) {
-  .article-details__cover {
-    min-height: 433.57px;
-  }
-}
-
-.dark-mode .article-details__content {
-  color: #fff;
-}
-
-.dark-mode .article-comments__card {
-  background-color: #262626;
-  border: 1px solid #454545;
-}
-
-.dark-mode .article-comments__card,
-.article-comments__title {
-  color: var(--font-700, #fff);
-}
-
-.dark-mode .article-comments__card,
-.article-comments__text {
-  color: var(--font-400, #fff);
-}
-
-.dark-mode .article-form__input__text {
-  background-color: #262626;
-  border: 1px solid #454545;
-  color: #fff;
-}
-
-.dark-mode .article-form__input__text::placeholder {
-  color: #fff;
-}
-
-.dark-mode .article-form__input {
-  background-color: #262626;
-  border: 1px solid #454545;
-  color: #fff;
-}
-
-.dark-mode .article-form__input::placeholder {
-  color: #fff;
-}
-
-.dark-mode .article-form__input_check__label {
-  color: #fff;
-}
-
-.dark-mode .article-comments-card {
-  background-color: #262626;
-  border: 1px solid #454545;
-}
-
-.dark-mode .article-comments-card .article-comments__name {
-  color: #fff;
-}
-
-.dark-mode .article-comments-card .article-comments__created {
-  color: #fff;
-}
-
-.dark-mode .article-comments-card .article-comments__content {
-  color: #fff;
-}
-
-.dark-mode .article-details__info__created {
-  color: #fff;
-}
-
-.dark-mode .article-details__info__views {
-  color: #fff;
-}
-
-.dark-mode .article-details__info__comments {
-  color: #fff;
-}
-</style>
diff --git a/pages/events/[id].vue b/pages/events/[id].vue
index 57a73b8..77a824e 100644
--- a/pages/events/[id].vue
+++ b/pages/events/[id].vue
@@ -1,38 +1,44 @@
 <script setup>
 
 definePageMeta({ layout: "content-layout" })
-
+import { posts } from "~/utils/data/getInitialPostsData"
 
 const route = useRoute();
 
 const postId = String(route.params.id)
-
-
-const { data: post } = await useAsyncData('post', () => $fetch('/api/posts'), {
-  transform: (posts) => {
-    return posts.find(post => post.slug === postId)
-  }
+const post = posts.find(post => post.slug === postId)
+
+if (!post) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: 'Halaman Tidak Ditemukan!'
+  })
+}
+
+
+useSeoMeta({
+  title: post.title.rendered,
+  description: post.excerpt.rendered,
+  author: 'Smart Nation',
+  articleAuthor: 'Smart Nation',
+  articlePublishedTime: useFormatter(post.date_gmt),
+  articleModifiedTime: useFormatter(post.date_gmt),
+  articleSection: 'Smart City',
+  articleTag: post.categories,
+  ogType: 'article',
+  ogTitle: post.title.rendered,
+  ogDescription: post.excerpt.rendered,
+  ogImage: post.featured_media,
+  ogSiteName: 'SmartNation.id',
+  ogUrl: 'https://smartnation.vercel.app/',
+  ogLocale: "ID",
+  ogImageUrl: `https://smartnation.vercel.app/${post.featured_media}`,
 })
 
 
-const { data: postsData } = await useFetch('/api/posts')
-
-// const { data: posts } = await useAsyncData('posts', () => $fetch('/api/posts'))
-
-
-// useSeoMeta({
-//   title: post.title.rendered,
-//   author: "Smart Nation",
-//   description: post.excerpt.rendered,
-//   ogTitle: post.title.rendered,
-//   ogDescription: post.excerpt.rendered,
-//   ogImage: post.featured_media,
-//   ogImageAlt: post.title.rendered,
-//   ogImageType: "image/png",
-//   ogImageWidth: 100,
-//   ogImageHeight: 443,
-//   ogImageUrl: "https://smartnation.id/",
-// });
+const postsCategories = posts.filter(post => post.categories.find(category => category === 90))
+  .sort((a, b) => b.date_gmt.toString().localeCompare(a.date_gmt.toString()))
+  ?.slice(0, 5)
 
 </script>
 
@@ -40,211 +46,24 @@ const { data: postsData } = await useFetch('/api/posts')
   <!-- rendered content main -->
   <main id="content">
     <!-- section berita detail start -->
-    <section class="berita-section-container position-relative py-5">
+    <section class="berita-section-container position-relative py-5 mt-5">
       <div class="container">
         <div class="row justify-content-start g-3 pt-3">
 
-          <div class="col-lg-8 col-md-auto">
+          <div class="col-lg-12 col-xl-8 col-md-auto">
             <!-- Article Content Start -->
-            <div class="row justify-content-start">
-              <div class="col">
-                <div class="article-details-container d-grid gap-3">
-                  <div class="article-details__title__wrapper">
-                    <h1 class="article-details__title">{{ post.title.rendered }}</h1>
-                  </div>
-
-                  <div class="article-details__info__wrapper">
-                    <div class="d-flex flex-wrap justify-content-start g-2">
-                      <div class="article-details__info__created me-3">
-                        <BootstrapIcon name="clock" />
-                        {{ useFormatter(post.date_gmt) }}
-                      </div>
-                      <div class="article-details__info__comments me-3">
-                        <BootstrapIcon name="chat" /> 10
-                      </div>
-                      <span class="article-details__info__views me-3">
-                        <BootstrapIcon name="eye" /> 10
-                      </span>
-                    </div>
-                  </div>
-
-                  <div class="article-details__content__wrapper">
-                    <div class="article-details__content__cover__wrapper">
-                      <NuxtImg class="img-fluid article-details__cover" :src="post.featured_media" :height="433"
-                        :alt="post.title.rendered" />
-                    </div>
-                    <div class="article-details__content__tags py-3">
-                      <ArticlesArticleCategories v-for="(category, index) in post.categories" :key="index"
-                        :categoryId="category" />
-                    </div>
-
-                    <div class="article-details__content" v-html="post.content.rendered"></div>
-
-                    <div class="article-details__content__share pt-3">
-                      <div class="d-flex flex-wrap justify-content-end g-2">
-                        <NuxtLink to="/" target="_blank" rel="noopener" title="Bagikan Ke Twitter"
-                          aria-label="Bagikan Ke Twiter"
-                          class="link-offset-2 link-underline link-underline-opacity-0 me-2">
-                          <BootstrapIcon name="twitter" class="article-details__content__share__medsos" />
-                        </NuxtLink>
-                        <NuxtLink to="/" target="_blank" rel="noopener" title="Bagikan Ke Twitter"
-                          aria-label="Bagikan Ke Twiter"
-                          class="link-offset-2 link-underline link-underline-opacity-0 me-2">
-                          <BootstrapIcon name="facebook" class="article-details__content__share__medsos" />
-                        </NuxtLink>
-                        <NuxtLink to="/" target="_blank" rel="noopener" title="Bagikan Ke Twitter"
-                          aria-label="Bagikan Ke Twiter"
-                          class="link-offset-2 link-underline link-underline-opacity-0 me-2">
-                          <BootstrapIcon name="instagram" class="article-details__content__share__medsos" />
-                        </NuxtLink>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
+            <PostsPostContentDetails :post="post" />
             <!-- Article Content End -->
             <!-- Article Comments Start -->
-            <div class="row justify-content-start">
-              <div class="col">
-                <div class="article-comments__card">
-                  <div class="article-comments__body">
-                    <h3 class="article-comments-title">Komentar</h3>
-                    <p class="article-comments__text">
-                      Alamat Email Anda Tidak Akan Dipublikasikan. Bidang yang
-                      Wajib Ditandai
-                      <span class="article-comments__text__label">*</span>
-                    </p>
-
-                    <div class="d-flex flex-column justify-content-start g-2">
-                      <form class="article-form__input-container">
-                        <div class="mb-3">
-                          <label for="exampleFormControlTextarea1" class="form-label" hidden>Example textarea</label>
-                          <textarea class="form-control article-form__input__text" id="exampleFormControlTextarea1"
-                            rows="3"></textarea>
-                        </div>
-
-                        <div class="mb-3">
-                          <div class="row">
-                            <div class="col-sm-6 mb-3">
-                              <input type="text" class="form-control article-form__input" placeholder="Nama Lengkap"
-                                aria-label="Nama Lengkap" />
-                            </div>
-                            <div class="col-sm-6 mb-3">
-                              <input type="text" class="form-control article-form__input" placeholder="Alamat Email"
-                                aria-label="Alamat Email" />
-                            </div>
-                          </div>
-                        </div>
-
-                        <div class="mb-3 form-check">
-                          <input type="checkbox" class="form-check-input rounded-0" id="exampleCheck1" checked />
-                          <label class="form-check-label article-form__input_check__label" for="exampleCheck1">Simpan
-                            nama, email, dan situs web saya pada
-                            peramban ini untuk komentar saya
-                            berikutnya.</label>
-                        </div>
-
-                        <div class="mb-3">
-                          <button disabled type="submit" class="article-form__button">
-                            Posting
-                          </button>
-                        </div>
-                      </form>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div class="row justify-content-start">
-              <div class="col">
-                <div class="d-flex flex-column justify-content-start g-2 py-5">
-                  <div class="article-comments-card mb-3">
-                    <div class="d-flex justify-content-start align-content-start">
-                      <NuxtImg src="/images/user1.png" class="rounded me-3" :width="70" :height="70" />
-                      <div class="d-flex flex-column justify-content-start g-2">
-                        <div class="article-comments__name">Atika Putri</div>
-                        <div class="article-comments__created">
-                          30 Menit yang lalu
-                        </div>
-                        <div class="article-comments__content">
-                          Wahh Sangat Menarik
-                        </div>
-                        <div class="article-comments__action">
-                          <div class="hstack gap-3">
-                            <span class="d-inline">
-                              <BootstrapIcon name="hand-thumbs-up" /> 0
-                            </span>
-                            <span class="d-inline">
-                              <BootstrapIcon name="hand-thumbs-down" /> 0
-                            </span>
-                            <span class="d-inline"> Balas </span>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="article-comments-card mb-3">
-                    <div class="d-flex justify-content-start align-content-start">
-                      <NuxtImg src="/images/user1.png" class="rounded me-3" :width="70" :height="70" />
-                      <div class="d-flex flex-column justify-content-start g-2">
-                        <div class="article-comments__name">Atika Putri</div>
-                        <div class="article-comments__created">
-                          30 Menit yang lalu
-                        </div>
-                        <div class="article-comments__content">
-                          Wahh Sangat Menarik
-                        </div>
-                        <div class="article-comments__action">
-                          <div class="hstack gap-3">
-                            <span class="d-inline">
-                              <BootstrapIcon name="hand-thumbs-up" /> 0
-                            </span>
-                            <span class="d-inline">
-                              <BootstrapIcon name="hand-thumbs-down" /> 0
-                            </span>
-                            <span class="d-inline"> Balas </span>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="article-comments-card mb-3">
-                    <div class="d-flex justify-content-start align-content-start">
-                      <NuxtImg src="/images/user1.png" class="rounded me-3" :width="70" :height="70" />
-                      <div class="d-flex flex-column justify-content-start g-2">
-                        <div class="article-comments__name">Atika Putri</div>
-                        <div class="article-comments__created">
-                          30 Menit yang lalu
-                        </div>
-                        <div class="article-comments__content">
-                          Wahh Sangat Menarik
-                        </div>
-                        <div class="article-comments__action">
-                          <div class="hstack gap-3">
-                            <span class="d-inline">
-                              <BootstrapIcon name="hand-thumbs-up" /> 0
-                            </span>
-                            <span class="d-inline">
-                              <BootstrapIcon name="hand-thumbs-down" /> 0
-                            </span>
-                            <span class="d-inline"> Balas </span>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
+            <PostsPostComments />
+            <PostsPostUserComments />
 
             <!-- Article Comments End -->
           </div>
-          <div class="col-lg-4 col-md-auto">
+          <div class="col-lg-auto col-xl-4 col-md-auto">
             <div class="px-md-3 mx-md-2">
-              <HeadingTitle class="text-capitalize fw-bold fs-5" title="ISNA Terpopuler Lainnya" />
-              <PostsPostItem :posts="postsData.slice(0, 5)" />
+              <HeadingTitle class="text-capitalize fw-bold fs-5" title="Acara Terpopuler" />
+              <PostsPostItem :posts="postsCategories" />
             </div>
           </div>
         </div>
diff --git a/pages/events/category/[id].vue b/pages/events/category/[id].vue
index b2cef66..9d7adc7 100644
--- a/pages/events/category/[id].vue
+++ b/pages/events/category/[id].vue
@@ -1,38 +1,69 @@
 <script lang="ts" setup>
-import { posts } from "~/utils/data/getInitialData";
-import { CategoryPostsType } from "~/utils/data/getInitialCategoryPostData";
-import { PostsDataType } from "~/utils/data/getInitialPostsData";
+import { categories } from "~/utils/data/getInitialCategoryPostData";
+import { posts } from "~/utils/data/getInitialPostsData";
 
 
 const route = useRoute();
 const categoryId = route.params.id
 const categoryPostsId: globalThis.Ref<number | undefined> = ref(139);
 const categoryTitle: globalThis.Ref<string | undefined> = ref('')
+const categoryDescription: globalThis.Ref<string | undefined> = ref('')
+const categoryParentId: globalThis.Ref<number | undefined> = ref(0)
 
-const { data } = await useFetch('/api/categories', {
-  transform: (categories: CategoryPostsType) => {
-    return categories.find(category => {
-      if (category.slug === categoryId) {
-        categoryTitle.value = category.name
-        categoryPostsId.value = category.id
-      }
-    })
-  }
-})
+const category = categories.find(category => category.slug === categoryId)
+
+if (!category) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: 'Page Not Found'
+  })
+}
 
-const { data: postsData } = await useFetch('/api/posts')
+categoryTitle.value = category.name
+categoryPostsId.value = category.id
+categoryDescription.value = category.description
+categoryParentId.value = category.parent
+
+
+
+const eventsData = posts.filter(post => post.categories.find(category => category === categoryPostsId.value))
+  .sort((a, b) => b.date_gmt.toString().localeCompare(a.date_gmt.toString()))
+  ?.slice(0, 12)
+
+
+const isnaYearsData = ref([
+  {
+    id: 1,
+    value: 2015,
+  },
+  {
+    id: 2,
+    value: 2016,
+  },
+  {
+    id: 3,
+    value: 2018,
+  },
+  {
+    id: 4,
+    value: 2020,
+  },
+  {
+    id: 5,
+    value: 2022,
+  },
+])
+
+const isnaValues: globalThis.Ref<string | undefined> = ref('')
 
 useSeoMeta({
   title: `Berita Kategori ${categoryTitle?.value}`,
-  description: ``,
+  description: `Kumpulan Acara ISNA dari beberapa Kategori`,
 });
-
-
 </script>
 
 <template>
-  <HeroParallaxBackground v-for="(post, index) in postsData.slice(0, 1)" :key="index"
-    :text="`Kumpulan Acara ${categoryTitle}`" :desc="`Kumpulan Acara ISNA dari beberapa Kategori`"
+  <HeroParallaxBackground :text="`Kumpulan Acara ${categoryTitle}`" :desc="`Kumpulan Acara ISNA dari beberapa Kategori`"
     :background="'/images/background/bg-isna.png'" />
   <main id="content">
     <!-- Section berita start -->
@@ -40,18 +71,49 @@ useSeoMeta({
       <div class="container">
         <div class="row justify-content-start align-content-start g-5">
           <div class="col-xl-8 col-xxl-8 col-lg-12 col-md-auto">
-            <article class="article-section position-relative mb-3">
+            <div class="d-flex flex-column">
+              <LazyHeadingTitle :title="`Tentang ${categoryTitle}`" />
+
+              <div class="row justify-content-start g-2">
+                <div class="col-lg-4 d-none d-lg-block d-xl-block">
+                  <NuxtImg :src="'/images/event_isna.png'" class="isna-images__logo" loading="lazy" />
+                </div>
+                <div class="col-lg-8">
+                  <div class="d-flex flex-column">
+                    <h3 class='isna-heading__title'>Apa itu {{ categoryTitle }}?</h3>
+                    <p class="isna-heading__description">{{ categoryDescription }}
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+            </div>
+            <div class="d-flex justify-content-between py-3">
               <h1 class="berita-section-title">{{ categoryTitle }}</h1>
 
+              <div v-if="categoryPostsId === Number(90) || categoryParentId === Number(90)">
+                <div class="dropdown" style="width: 150px">
+                  <button class="btn btn-outline-danger dropdown-toggle" type="button" id="dropdownMenuButton1"
+                    data-bs-toggle="dropdown" aria-expanded="false">
+                    Pilih Tahun
+                  </button>
+                  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
+                    <li v-for="isna in isnaYearsData" :key="isna.id"><a class="dropdown-item">{{ isna.value }}</a></li>
+                  </ul>
+                </div>
+
+              </div>
+            </div>
+
+
+            <div>
               <div class="d-flex flex-column ">
-                <ul class="list-group list-group-flush">
-                  <li v-for="post in postsData
-                    .sort((a, b) => b.date_gmt.toString().localeCompare(a.date_gmt.toString()))
-                    ?.slice(0, 12)" :key="post.id" class="list-group-item mx-0 px-0">
+                <ul v-if="eventsData" class="list-group list-group-flush">
+                  <li v-for="post in eventsData" :key="post.id" class="list-group-item mx-0 px-0">
                     <div class="card border-0 rounded-0">
                       <div class="row justify-content-start align-items-center g-3">
                         <div class="col-xl-4 col-xxl-4 col-lg-4  col-md-12 ">
-                          <NuxtLink :to="`/${post.slug}`" :aria-label="`Baca Selengkapnya ${post.title.rendered}`">
+                          <NuxtLink :to="`/events/${post.slug}`" :aria-label="`Baca Selengkapnya ${post.title.rendered}`">
                             <NuxtImg :class="'article-thumbnail'" :src="post.featured_media" loading="lazy"
                               :alt="post.title.rendered" />
                           </NuxtLink>
@@ -67,7 +129,8 @@ useSeoMeta({
                               }}</span>
                             </div>
 
-                            <NuxtLink :to="`/${post.slug}`" :aria-label="`Baca Selengkapnya ${post.title.rendered}`"
+                            <NuxtLink :to="`/events/${post.slug}`"
+                              :aria-label="`Baca Selengkapnya ${post.title.rendered}`"
                               :class="'article-title lh-base link-offset-2 link-underline link-underline-opacity-0 '">
                               {{
                                 post.title.rendered.length >= 80
@@ -86,7 +149,6 @@ useSeoMeta({
                   </li>
                 </ul>
               </div>
-
               <!-- Pagination start -->
               <div v-show="posts.length >= 12" class="d-flex justify-content-center g-2 pt-5">
                 <nav aria-label="Page navigation example">
@@ -114,19 +176,20 @@ useSeoMeta({
                 </nav>
               </div>
               <!-- Pagination end -->
-            </article>
+            </div>
+
+
           </div>
           <div class="col-xl-4 col-xxl-4 col-lg-12 ">
             <article>
               <h1 class="berita-section-title text-decoration-underline">
-                Berita Terpopuler Lainnya
+                Terpopuler
               </h1>
 
               <div class="d-flex flex-column">
                 <div class="vstack g-3">
-                  <ArticlesArticleRecomended v-for="(post, index) in posts
-                    .sort((a, b) => a.title.localeCompare(b.title))
-                    .slice(0, 10)" :key="post.id" :number="index" :postId="post.slug" :title="post.title" />
+                  <ArticlesArticleListTitle
+                    :posts="posts.filter(post => post.categories.find(category => category === Number(90))).sort((a, b) => b.date_gmt.toString().localeCompare(a.date_gmt.toString())).slice(0, 10)" />
                 </div>
               </div>
             </article>
@@ -168,9 +231,11 @@ useSeoMeta({
   line-height: 120%;
   /* 24px */
 }
+
 .text-decoration-underline {
   margin-bottom: 25px !important;
 }
+
 .line-break {
   position: relative;
   top: -5px;
@@ -254,6 +319,83 @@ useSeoMeta({
   object-fit: cover;
 }
 
+
+.isna-images__logo {
+  background-size: cover;
+  background-repeat: no-repeat;
+  /* object-position: center; */
+  width: 250px;
+  height: 250px;
+  border-radius: 4px;
+
+}
+
+.isna-heading__title {
+  overflow: hidden;
+  color: var(--font-600, #5D5D5D);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: Poppins;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 120%;
+  /* 19.2px */
+}
+
+.dropdown-item {
+  margin-bottom: 10px;
+
+  color: var(--font-600, #5D5D5D);
+  font-family: Poppins;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 120%;
+  text-align: center;
+  /* margin: 0 auto;
+  width: 124px; */
+
+}
+
+.dropdown-item:hover {
+  color: var(--primary-600, #D71149);
+}
+
+.dropdown-item:focus {
+  color: var(--primary-600, #D71149);
+  background: transparent;
+  outline: none;
+  border: none;
+}
+
+.dropdown-menu {
+  /* position: absolute; */
+  width: 124px;
+  padding: 24px;
+  gap: 12px;
+  border-radius: 4px;
+  border: 1px solid var(--font-100, #E7E7E7);
+  background: var(--Background, #FFF);
+  margin-top: 13px !important;
+}
+
+.dropdown-divider {
+  width: 95px;
+  justify-content: center;
+  margin: 0 auto;
+  margin-bottom: 20px;
+}
+
+
+.dropdown-toggle {
+  /* width: 100%; */
+  width: 100%;
+  text-align: center;
+  border-radius: 4px;
+  vertical-align: top;
+}
+
 @media (min-width: 992px) {
   .article-thumbnail {
     width: 256px;
@@ -322,4 +464,8 @@ useSeoMeta({
 .dark-mode .article-desc {
   color: rgba(255, 255, 255, 0.9);
 }
+
+.dark-mode .isna-heading__title {
+  color: rgba(255, 255, 255, 0.9);
+}
 </style>
diff --git a/pages/events/index.vue b/pages/events/index.vue
deleted file mode 100644
index be7e74c..0000000
--- a/pages/events/index.vue
+++ /dev/null
@@ -1,387 +0,0 @@
-<script lang="ts" setup>
-import { posts } from "~/utils/data/getInitialPostsData";
-
-
-// Set Meta SEO
-useSeoMeta({
-  title: "Kumpulan Acara ISNA",
-  ogTitle: "Kumpulan Acara ISNA",
-  description: "Kumpulan Acara ISNA dari beberapa Kategori",
-});
-
-const postsData = posts.filter(post => post.categories.find(category => category === Number(90) || category === Number(91) || category === Number(92)))
-  .sort((a, b) => b.date_gmt.toString().localeCompare(a.date_gmt.toString()))
-
-</script>
-
-<template>
-  <HeroParallaxBackground text="Kumpulan Acara ISNA" desc="Kumpulan Acara ISNA dari beberapa Kategori"
-    background="/images/background/bg-isna.png" />
-
-  <main id="content">
-
-    <section class="py-5">
-      <div class="container">
-        <div class="row justify-content-start align-content-start g-5">
-          <div class="col-xl-8 col-xxl-8 col-lg-12 col-md-auto">
-            <div class="d-flex flex-column">
-              <LazyHeadingTitle title="Tentang ISNA" />
-
-              <div class="row justify-content-start g-2">
-                <div class="col-lg-4">
-                  <NuxtImg :src="'/images/event_isna.png'" class="isna-images__logo" loading="lazy" />
-                </div>
-                <div class="col-lg-8">
-                  <div class="d-flex flex-column">
-                    <h3 class='isna-heading__title'>Apa itu ISNA?</h3>
-                    <p> Indonesia Smart Nation Award (ISNA) merupakan acara dwi tahunan yang digelar oleh Citiasia, Inc. sejak 2015. ISNA bertujuan untuk memberikan penghargaan yang diberikan kepada Kota/Kabupaten yang inovasinya memberikan dampak secara luas kepada masyarakat. Melalui ISNA, Citiasia, Inc. berkomitmen untuk mendorong pertumbuhan dan pengembangan konsep kota cerdas dalam pengelolaan perkotaan demi kepentingan seluruh masyarakat Indonesia dan mewujudkan Indonesia Maju menjadi Smart Nation.
-                    </p>
-                  </div>
-                </div>
-              </div>
-
-            </div>
-            <div class="d-flex justify-content-between">
-              <div>
-                <LazyHeadingTitle title="ISNA" />
-              </div>
-
-              <div class="dropdown" style="width: 150px">
-                <button style="
-                        width: 130px;
-                        text-align: center;
-                        border-radius: 4px;
-                        vertical-align: top;
-                      " class="btn btn-outline-danger dropdown-toggle" type="button" id="dropdownMenuButton1"
-                  data-bs-toggle="dropdown" aria-expanded="false">
-                  Pilih Tahun
-                </button>
-                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
-                  <li><a class="dropdown-item">2015</a></li>
-                  <li>
-                    <hr class="dropdown-divider" />
-                  </li>
-                  <li><a class="dropdown-item">2016</a></li>
-                  <li>
-                    <hr class="dropdown-divider" />
-                  </li>
-                  <li><a class="dropdown-item">2018</a></li>
-                  <li>
-                    <hr class="dropdown-divider" />
-                  </li>
-                  <li><a class="dropdown-item">2020</a></li>
-                  <li>
-                    <hr class="dropdown-divider" />
-                  </li>
-                </ul>
-              </div>
-            </div>
-            <div class="d-flex flex-column ">
-              <ul class="list-group list-group-flush">
-                <li v-for="post in postsData" :key="post.id" class="list-group-item mx-0 px-0">
-                  <div class="card border-0 rounded-0">
-                    <div class="row justify-content-start align-items-center g-3">
-                      <div class="col-xl-5 col-xxl-4 col-lg-4  col-md-12 ">
-                        <NuxtLink :to="`/events/${post.slug}`" :aria-label="`Baca Selengkapnya ${post.title.rendered}`">
-                          <NuxtImg :class="'article-thumbnail'" :src="post.featured_media" loading="lazy"
-                            :alt="post.title.rendered" />
-                        </NuxtLink>
-                      </div>
-
-                      <div class="col-xl-7 col-xxl-8 col-lg-8 col-md-12">
-                        <div class="card-body px-0 mx-0 px-md-2 mx-md-2">
-                          <div class="d-flex justify-content-between g-3 mb-3">
-                            <span class="article-info-tag">ISNA</span>
-                            <span class="article-info-tag text-start text-secondary">{{ useFormatter(post.date_gmt)
-                            }}</span>
-                          </div>
-
-                          <NuxtLink :to="`/events/${post.slug}`" :aria-label="`Baca Selengkapnya ${post.title.rendered}`"
-                            :class="'article-title lh-base link-offset-2 link-underline link-underline-opacity-0 '">
-                            {{
-                              post.title.rendered.length >= 80
-                              ? `${post.title.rendered.substring(0, 80)}...`
-                              : post.title.rendered
-                            }}
-                          </NuxtLink>
-                          <div class="article-desc pt-2" v-html="post.excerpt.rendered.length >= 120
-                                ? `${post.excerpt.rendered.substring(0, 120)}...`
-                                : post.excerpt.rendered
-                              "></div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </li>
-              </ul>
-            </div>
-
-            <!-- Pagination start -->
-            <div class="d-flex justify-content-center g-2 pt-5">
-              <nav aria-label="Page navigation example">
-                <ul class="pagination">
-                  <li class="page-item mx-2">
-                    <a class="page-link border-0 text-dark" href="#" aria-label="Previous">
-                      <span aria-hidden="true">&laquo;</span>
-                    </a>
-                  </li>
-                  <li class="page-item mx-1">
-                    <a class="page-link text-center text-white border-0 rounded bg-danger" href="#">1</a>
-                  </li>
-                  <li class="page-item mx-1">
-                    <a class="page-link text-center text-dark border-0 rounded bg-none" href="#">2</a>
-                  </li>
-                  <li class="page-item mx-1">
-                    <a class="page-link text-center text-dark border-0 rounded bg-none" href="#">3</a>
-                  </li>
-                  <li class="page-item mx-2">
-                    <a class="page-link border-0 text-dark" href="#" aria-label="Next">
-                      <span aria-hidden="true">&raquo;</span>
-                    </a>
-                  </li>
-                </ul>
-              </nav>
-            </div>
-            <!-- Pagination end -->
-          </div>
-
-          <div class="col-xl-4 col-xxl-4 col-lg-12 ">
-            <article>
-
-              <LazyHeadingTitle class="text-decoration-underline" title="Terpopuler" />
-              <div class="d-flex flex-column">
-                <div class="vstack g-3">
-                  <ArticlesArticleListTitle :posts="posts.slice(0, 10)" />
-                </div>
-              </div>
-            </article>
-          </div>
-        </div>
-
-
-
-      </div>
-    </section>
-
-  </main>
-</template>
-
-
-<style scoped>
-#assetTentang {
-  background-color: #5d5d5d;
-  z-index: 535;
-  width: 100%;
-  height: 350px;
-}
-
-#explain {
-  font-family: Poppins;
-  font-style: normal;
-}
-.text-decoration-underline {
-  margin-bottom: 25px !important;
-}
-p {
-  text-align: justify;
-}
-.dropdown-item {
-  margin-top: 25px;
-  font-family: Poppins;
-  font-style: normal;
-  font-size: 20px;
-  text-align: center;
-  line-height: 15px;
-  margin-bottom: 10px;
-}
-
-.dropdown-divider {
-  width: 95px;
-  justify-content: center;
-  margin: 0 auto;
-  margin-bottom: 20px;
-}
-
-.berita-section-title {
-  color: var(--primary-600, #d71149);
-  font-family: Poppins;
-  font-size: 24px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 120%;
-  text-transform: capitalize;
-  /* 28.8px */
-  /* 24px */
-}
-
-.article-title {
-  overflow: hidden;
-  color: var(--font-600, #5d5d5d);
-  text-overflow: ellipsis;
-  font-family: Poppins;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 120%;
-  /* 19.2px */
-  transition: ease-in 300ms;
-}
-
-.article-title:hover {
-  color: #d71149 !important;
-}
-
-.article-desc {
-  overflow: hidden;
-  color: var(--font-600, #5d5d5d);
-  text-overflow: ellipsis;
-  font-family: Poppins;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 120%;
-  /* 18px */
-}
-
-.article-timestamp-icon {
-  font-size: 12px;
-}
-
-.article-timestamp {
-  color: var(--font-400, #888);
-
-  /* Font/Caption Reguler */
-  font-family: Poppins;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 120%;
-  /* 12px */
-}
-
-.article-link-title {
-  color: var(--font-500, #6d6d6d);
-  font-family: Poppins;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 120%;
-  /* 19.2px */
-}
-
-.article-info-tag {
-  color: var(--primary-600, #d71149);
-  font-family: Poppins;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 120%;
-  /* 19.2px */
-}
-
-.article-thumbnail {
-  width: 100%;
-  height: auto;
-  border-radius: 4px;
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center;
-  object-fit: cover;
-}
-
-@media (min-width: 992px) {
-  .article-thumbnail {
-    width: 256px;
-    height: 151px;
-  }
-}
-
-.article-list-container {
-  border-right: 0;
-}
-
-@media (min-width: 992px) {
-  .article-list-container {
-    border-right: 1px solid var(--font-100, #e7e7e7);
-  }
-}
-
-.article-list-title {
-  margin-top: 5px;
-  color: var(--font-600, #5d5d5d);
-  font-family: Poppins;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 120%;
-  transition: ease-in 300ms;
-  /* 16.8px */
-}
-
-.article-list-title:hover {
-  color: #d71149 !important;
-}
-
-.isna-images__logo {
-  background-size: cover;
-  background-repeat: no-repeat;
-  /* object-position: center; */
-  width: 250px;
-  height: 250px;
-  border-radius: 4px;
-
-}
-
-.isna-heading__title {
-  overflow: hidden;
-  color: var(--font-600, #5D5D5D);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: Poppins;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 120%;
-  /* 19.2px */
-}
-
-.dark-mode .card {
-  background-color: #262626 !important;
-}
-
-.dark-mode .list-group {
-  background-color: #262626;
-}
-
-.dark-mode .list-group-flush {
-  background-color: #262626;
-}
-
-.dark-mode .list-group-item {
-  background-color: #262626;
-}
-
-.dark-mode .article-title {
-  color: #fafafa;
-}
-
-.dark-mode .article-list-title {
-  color: #fafafa;
-}
-
-.dark-mode .article-info-tag {
-  color: rgba(255, 255, 255, 0.9) !important;
-}
-
-.dark-mode .article-link-title {
-  color: rgba(255, 255, 255, 0.9) !important;
-}
-
-.dark-mode .article-desc {
-  color: rgba(255, 255, 255, 0.9);
-}
-
-.dark-mode .isna-heading__title {
-  color: rgba(255, 255, 255, 0.9);
-}
-</style>
diff --git a/utils/data/getInitialCategoryPostData.ts b/utils/data/getInitialCategoryPostData.ts
index de93ad7..2206146 100644
--- a/utils/data/getInitialCategoryPostData.ts
+++ b/utils/data/getInitialCategoryPostData.ts
@@ -14,206 +14,213 @@ const categories: CategoryPostsType = [
   {
     id: 148,
     count: 335,
-    description: "",
-    name: "Artikel",
-    slug: "artikel",
-    taxonomy: "category",
+    description: '',
+    name: 'Artikel',
+    slug: 'artikel',
+    taxonomy: 'category',
     parent: 0,
   },
   {
     id: 82,
     count: 222,
-    description: "",
-    name: "Berita",
-    slug: "berita",
-    taxonomy: "category",
+    description: '',
+    name: 'Berita',
+    slug: 'berita',
+    taxonomy: 'category',
     parent: 0,
   },
   {
     id: 83,
     count: 30,
-    description: "",
-    name: "Citiasia Inc",
-    slug: "citiasiainc",
-    taxonomy: "category",
+    description: '',
+    name: 'Citiasia Inc',
+    slug: 'citiasiainc',
+    taxonomy: 'category',
     parent: 82,
   },
   {
     id: 84,
     count: 28,
-    description: "",
-    name: "Daerah",
-    slug: "daerah",
-    taxonomy: "category",
+    description: '',
+    name: 'Daerah',
+    slug: 'daerah',
+    taxonomy: 'category',
     parent: 82,
   },
   {
     id: 88,
     count: 6,
-    description: "",
-    name: "Events",
-    slug: "events",
-    taxonomy: "category",
+    description: '',
+    name: 'Events',
+    slug: 'events',
+    taxonomy: 'category',
     parent: 0,
   },
   {
     id: 145,
     count: 19,
-    description: "",
-    name: "Government",
-    slug: "gov",
-    taxonomy: "category",
+    description: '',
+    name: 'Government',
+    slug: 'gov',
+    taxonomy: 'category',
     parent: 0,
   },
   {
     id: 117,
     count: 3,
-    description: "",
-    name: "Health",
-    slug: "health",
-    taxonomy: "category",
+    description: '',
+    name: 'Health',
+    slug: 'health',
+    taxonomy: 'category',
     parent: 0,
   },
   {
     id: 101,
     count: 21,
-    description: "",
-    name: "Insight",
-    slug: "insight",
-    taxonomy: "category",
+    description: '',
+    name: 'Insight',
+    slug: 'insight',
+    taxonomy: 'category',
     parent: 0,
   },
   {
     id: 85,
     count: 7,
-    description: "",
-    name: "Internasional",
-    slug: "internasional",
-    taxonomy: "category",
+    description: '',
+    name: 'Internasional',
+    slug: 'internasional',
+    taxonomy: 'category',
     parent: 82,
   },
   {
     id: 89,
     count: 0,
-    description: "",
-    name: "ISCIF",
-    slug: "iscif-events",
-    taxonomy: "category",
+    description: `Citiasia Center for Smart Nation (CCSN) menyelenggarakan Indonesia Smart City Investment Forum (ISCIF) Talkshow, yang sekaligus menjadi ajang pengumuman pemenang 4th Indonesia Smart Nation Award (ISNA). ISCIF mengusung tema "Smart City 2020: Driving Innovation and Productivity during the Global Pandemic" yang mengundang pemimpin daerah, pengambil kebijakan, akademisi, dan praktisi smart city untuk berbagi pengalaman dan inovasi pembangunan yang relevan dengan tantangan pandemi serta menciptakan platform berharga untuk pertukaran ide.`,
+    name: 'ISCIF',
+    slug: 'iscif-events',
+    taxonomy: 'category',
     parent: 88,
   },
 
   {
     id: 90,
     count: 9,
-    description: "",
-    name: "ISNA",
-    slug: "isna-events",
-    taxonomy: "category",
+    description: `Indonesia Smart Nation Award (ISNA) merupakan acara dwi tahunan yang digelar oleh Citiasia, Inc.
+    sejak 2015. ISNA bertujuan untuk memberikan penghargaan yang diberikan kepada Kota/Kabupaten yang
+    inovasinya memberikan dampak secara luas kepada masyarakat. Melalui ISNA, Citiasia, Inc. berkomitmen
+    untuk mendorong pertumbuhan dan pengembangan konsep kota cerdas dalam pengelolaan perkotaan demi
+    kepentingan seluruh masyarakat Indonesia dan mewujudkan Indonesia Maju menjadi Smart Nation.`,
+    name: 'ISNA',
+    slug: 'isna-events',
+    taxonomy: 'category',
     parent: 88,
   },
 
   {
     id: 91,
     count: 27,
-    description: "",
-    name: "ISNA 2015",
-    slug: "isna-2015",
-    taxonomy: "category",
+    description: `Indonesia Smart Nation Award (ISNA) 2015 adalah pagelaran pertama yang dilaksanakan oleh Citiasia, Inc. yang berkolaborasi dengan PT Indosat Tbk dan Datacomm Cloud Business. Acara dilaksanakan pada Selasa, 20 Oktober 2015 di Hotel JS Luwansa, Kuningan, Jakarta. ISNA memberi penghargaan kepada 45 daerah (provinsi, kabupaten, dan kota) di Indonesia yang memiliki infrastruktur ICT pendukung komunikasi regional yang efektif. Citiasia Center for Smart Nation (CCSN) yang merupakan lini strategis milik Citiasia, Inc. mengumumkan hasil studi "Indonesia Smart Region Maturity Index” pada kesempatan yang sama, indeks ini mengukur kondisi kesiapan daerah untuk pembangunan Smart City di wilayah Indonesia.
+
+    `,
+    name: 'ISNA 2015',
+    slug: 'isna-2015',
+    taxonomy: 'category',
     parent: 90,
   },
   {
     id: 92,
     count: 0,
-    description: "",
-    name: "ISNA 2016",
-    slug: "isna-2016",
-    taxonomy: "category",
+    description: `Indonesia Smart Nation Award (ISNA) diselenggarakan untuk kedua kalinya pada tahun 2016, pada kesempatan ini Citiasia, Inc. menyampaikan hasil riset mengenai indeks daerah dan pengakuan terhadap prestasi lokal yang dirangkum dalam Indonesia Smart Nation Index 2016. Indeks yang disusun oleh Citiasia Center for Smart Nations (CCSN) ini mengevaluasi seluruh wilayah di Indonesia (34 provinsi, 412 kabupaten, dan 93 kota) dengan menggunakan data resmi dari berbagai sumber, menganalisis 72 media cetak nasional dan lokal serta 100 media online untuk mendorong dan mewujudkan cita-cita bersama dalam mewujudkan Indonesia Smart Nation.`,
+    name: 'ISNA 2016',
+    slug: 'isna-2016',
+    taxonomy: 'category',
     parent: 90,
   },
   {
     id: 93,
     count: 2,
-    description: "",
-    name: "ISNA 2018",
-    slug: "isna-2018",
-    taxonomy: "category",
+    description: `Indonesia Smart Nation Awards (ISNA) ke-3 2018 sukses digelar pada Kamis, 3 Mei 2018 di Nusantara 2 Hall, ICE BSD City, Tangerang. ISNA 2018 diisi dengan kegiatan talkshow yang bertema “Creating Competitive and Sustainable Cities for Tourism, Trade & Investment”, Acara tersebut dihadiri langsung oleh Menteri Pariwisata Arief Yahya dan lebih dari 50 kepala daerah, praktisi di bidang pariwisata, investasi, dan ICT. ISNA berhasil dilaksanakan atas kerjasama dengan Citiasia Center for Smart Nation (CCSN), Debindo, Visit Wonderful Indonesia (ViWI) dan Kementerian Pariwisata Republik Indonesia.`,
+    name: 'ISNA 2018',
+    slug: 'isna-2018',
+    taxonomy: 'category',
     parent: 90,
   },
   {
     id: 94,
     count: 11,
-    description: "",
-    name: "ISNA 2020",
-    slug: "isna-2020",
-    taxonomy: "category",
+    description: `Indonesia Smart Nation Award ke-4 2020 diselenggarakan bersamaan dengan Indonesia Smart City Investment Forum (ISCIF) 2020 secara daring melalui platform konferensi Zoom Virtu-Ex pada tanggal 5 Oktober 2020. Tema ISCIF 2020 dan ISNA ke-4 adalah “Smart City 2020: Driving Innovation & Productivity During The Global Pandemic.” Citiasia Center for Smart Nation (CCSN) melakukan survei mengenai inovasi yang diinisiasi oleh pemerintah kota dan kabupaten sebagai respon terhadap pandemi COVID-19, dengan lebih dari 500  kabupaten dan kota di seluruh Indonesia yang berpartisipasi dan menghasilkan lebih dari 180 inovasi.`,
+    name: 'ISNA 2020',
+    slug: 'isna-2020',
+    taxonomy: 'category',
     parent: 90,
   },
   {
     id: 155,
     count: 11,
-    description: "",
-    name: "ISNA 2022",
-    slug: "isna-2022",
-    taxonomy: "category",
+    description: `Indonesia Smart Nation Award (ISNA) ke-5 2022 digelar pada Kamis 17 November 2022 di ICE BSD, Tangerang. Tema ISNA 2022 tahun ini adalah “Smart City Innovation: For Post-Pandemic Economic Recovery”. ISNA 2022 menjadi salah satu rangkaian acara di pagelaran IndoBuildTech (IBT) Expo 2022, acara ini diisi dengan sesi Talkshow dan Book Launching. Kesempatan ini dimaksimalkan dengan menghadirkan 3 narasumber luar biasa, diantaranya adalah Aryo Ramandhito (Senior Analyst RUN System), Hanny Winarti (General Account Management Lead, Qiscus), dan Wahyudi (Telkom Indonesia).
+    `,
+    name: 'ISNA 2022',
+    slug: 'isna-2022',
+    taxonomy: 'category',
     parent: 90,
   },
 
   {
     id: 86,
     count: 45,
-    description: "",
-    name: "Nasional",
-    slug: "nasional",
-    taxonomy: "category",
+    description: '',
+    name: 'Nasional',
+    slug: 'nasional',
+    taxonomy: 'category',
     parent: 82,
   },
 
   {
     id: 139,
     count: 64,
-    description: "",
-    name: "Smart City",
-    slug: "smartcity",
-    taxonomy: "category",
+    description: '',
+    name: 'Smart City',
+    slug: 'smartcity',
+    taxonomy: 'category',
     parent: 0,
   },
 
   {
     id: 154,
     count: 16,
-    description: "",
-    name: "Smartnation 2022",
-    slug: "smartnation-2022",
-    taxonomy: "category",
+    description: '',
+    name: 'Smartnation 2022',
+    slug: 'smartnation-2022',
+    taxonomy: 'category',
     parent: 0,
   },
   {
     id: 137,
     count: 27,
-    description: "",
-    name: "Technology",
-    slug: "tech",
-    taxonomy: "category",
+    description: '',
+    name: 'Technology',
+    slug: 'tech',
+    taxonomy: 'category',
     parent: 0,
   },
 
   {
     id: 129,
     count: 3,
-    description: "",
-    name: "Training",
-    slug: "training",
-    taxonomy: "category",
+    description: `Citiasia Inc. menyediakan layanan pelatihan yang disesuaikan dengan kebutuhan dan bidang industri klien kami. Kami menggabungkan teori implementatif dengan solusi praktis yang relevan untuk klien, pendekatan ini berfokus pada hasil untuk meningkatkan efektivitas dan relevansi pelatihan bagi klien kami.`,
+    name: 'Training',
+    slug: 'training',
+    taxonomy: 'category',
     parent: 0,
   },
 
   {
     id: 112,
     count: 5,
-    description: "",
-    name: "World",
-    slug: "world",
-    taxonomy: "category",
+    description: '',
+    name: 'World',
+    slug: 'world',
+    taxonomy: 'category',
     parent: 0,
   },
 ];

From 4401b6450f6d76a0508b35b5c8b7b0736d8b380b Mon Sep 17 00:00:00 2001
From: Farhan <101630148+KucingOyenBarbar@users.noreply.github.com>
Date: Wed, 8 Nov 2023 11:38:08 +0700
Subject: [PATCH 3/5] Perbaikan Halaman Galeri

---
 components/gallery/GalleryCardAlbum.vue |   8 +-
 components/navbar/NavbarFixed.vue       |   4 +-
 components/navbar/NavbarSticky.vue      |   4 +-
 pages/[id].vue                          |  23 +-
 pages/about-us.vue                      |   2 +-
 pages/category/[id].vue                 |   7 +
 pages/contact-us.vue                    |   2 +-
 pages/events/[id].vue                   |  18 +-
 pages/events/category/[id].vue          |   4 +
 pages/gallery-smartnation.vue           |  61 ---
 pages/gallery/[id].vue                  | 597 ++++++------------------
 pages/gallery/index.vue                 |  51 +-
 pages/index.vue                         |   7 +-
 13 files changed, 228 insertions(+), 560 deletions(-)
 delete mode 100644 pages/gallery-smartnation.vue

diff --git a/components/gallery/GalleryCardAlbum.vue b/components/gallery/GalleryCardAlbum.vue
index 831bfef..04cd5e7 100644
--- a/components/gallery/GalleryCardAlbum.vue
+++ b/components/gallery/GalleryCardAlbum.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-const props = defineProps({ title: { type: String }, created: { type: String }, albumImage: { type: String }, total: { type: Number }, redirect: { type: String } })
+defineProps({ title: { type: String }, created: { type: String }, albumImage: { type: String }, total: { type: Number }, redirect: { type: String } })
 
 
 </script>
 
 <template>
   <div class="card album-card">
-    <NuxtLink :to="redirect" aria-label="Lihat Selengkapnya" title="Lihat Selengkapnya">
+    <NuxtLink :to="`/gallery/${redirect}`" aria-label="Lihat Selengkapnya" :title="`Album ${title}`">
       <NuxtImg class="card-img-top img-fluid album-cover__images" :src="albumImage" alt="Album 1" loading="lazy"
         format="webp" />
     </NuxtLink>
@@ -14,9 +14,9 @@ const props = defineProps({ title: { type: String }, created: { type: String },
 
     <div class="card-body">
       <div class="d-flex flex-column justify-content-start align-self-stretch">
-        <NuxtLink class="album-cover__title" :to="'/gallery/album-isna-2016'" aria-label="Lihat Selengkapnya"
+        <NuxtLink class="album-cover__title" :to="`/gallery/${redirect}`" aria-label="Lihat Selengkapnya"
           title="Lihat Selengkapnya">
-          {{ title }}
+          {{ `Album ${title}` }}
         </NuxtLink>
 
         <h5 class="card-subtitle album-cover__subtitle ">
diff --git a/components/navbar/NavbarFixed.vue b/components/navbar/NavbarFixed.vue
index 41c066d..89f6253 100644
--- a/components/navbar/NavbarFixed.vue
+++ b/components/navbar/NavbarFixed.vue
@@ -204,8 +204,8 @@ const routePathMenu: globalThis.ComputedRef<string | string[]> = computed(() =>
 
 
           <li class="nav-item">
-            <NuxtLink @click="toggleMenu()" :class="`nav-link mx-md-1  ${route.path === '/gallery-smartnation' ? 'active' : ''
-              }`" to="/gallery-smartnation">Galeri
+            <NuxtLink @click="toggleMenu()" :class="`nav-link mx-md-1  ${route.path === '/gallery' || route.path === `/gallery/${route.params.id}` ? 'active' : ''
+              }`" to="/gallery">Galeri
             </NuxtLink>
           </li>
           <li class="nav-item">
diff --git a/components/navbar/NavbarSticky.vue b/components/navbar/NavbarSticky.vue
index bfa0ea3..007edcc 100644
--- a/components/navbar/NavbarSticky.vue
+++ b/components/navbar/NavbarSticky.vue
@@ -229,8 +229,8 @@ const routePathMenu: globalThis.ComputedRef<string | string[]> = computed(() =>
           </li>
 
           <li class="nav-item">
-            <NuxtLink @click="toggleMenu" :class="`nav-link mx-md-1  ${route.path === '/gallery-smartnation' ? 'active' : ''
-              }`" to="/gallery-smartnation">Galeri
+            <NuxtLink @click="toggleMenu" :class="`nav-link mx-md-1  ${route.path === '/gallery' ? 'active' : ''
+              }`" to="/gallery">Galeri
             </NuxtLink>
           </li>
           <li class="nav-item">
diff --git a/pages/[id].vue b/pages/[id].vue
index e6966fd..e39750e 100644
--- a/pages/[id].vue
+++ b/pages/[id].vue
@@ -1,14 +1,12 @@
-<script setup>
-
-definePageMeta({ layout: "content-layout" })
+<script setup lang="ts">
 
+import { ColorModeInstance } from "@nuxtjs/color-mode/dist/runtime/types";
 import { posts } from "~/utils/data/getInitialPostsData"
 
+definePageMeta({ layout: "content-layout" })
 
 const route = useRoute();
-
 const postId = String(route.params.id)
-
 const post = posts.find(post => post.slug === postId)
 
 if (!post) {
@@ -23,11 +21,11 @@ useSeoMeta({
   title: post.title.rendered,
   description: post.excerpt.rendered,
   author: 'Smart Nation',
-  articleAuthor: 'Smart Nation',
-  articlePublishedTime: useFormatter(post.date_gmt),
-  articleModifiedTime: useFormatter(post.date_gmt),
-  articleSection: 'Smart City',
-  articleTag: post.categories,
+  // articleAuthor: 'Smart Nation',
+  // articlePublishedTime: useFormatter(post.date_gmt),
+  // articleModifiedTime: useFormatter(post.date_gmt),
+  // articleSection: 'Smart City',
+  // articleTag: post.categories,
   ogType: 'article',
   ogTitle: post.title.rendered,
   ogDescription: post.excerpt.rendered,
@@ -38,6 +36,9 @@ useSeoMeta({
   ogImageUrl: `https://smartnation.vercel.app/${post.featured_media}`,
 })
 
+
+const colorMode: ColorModeInstance = useColorMode()
+
 </script>
 
 <template>
@@ -69,6 +70,8 @@ useSeoMeta({
       </div>
     </section>
     <!-- section berita detail end -->
+
+    <hr v-if="colorMode.preference === 'dark'" class="text-secondary" />
   </main>
 </template>
 
diff --git a/pages/about-us.vue b/pages/about-us.vue
index 6904cb7..455bc61 100644
--- a/pages/about-us.vue
+++ b/pages/about-us.vue
@@ -208,7 +208,7 @@ const { data: clients } = await useFetch('/api/client')
       </div>
     </section>
     <!-- section portofolio end -->
-    <hr v-show="colorMode.preference === 'dark'" />
+    <hr v-if="colorMode.preference === 'dark'" class="text-secondary" />
   </main>
 </template>
 
diff --git a/pages/category/[id].vue b/pages/category/[id].vue
index 449f6f1..cf368d3 100644
--- a/pages/category/[id].vue
+++ b/pages/category/[id].vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { ColorModeInstance } from "@nuxtjs/color-mode/dist/runtime/types";
 import { categories } from "~/utils/data/getInitialCategoryPostData";
 import { posts } from "~/utils/data/getInitialPostsData"
 
@@ -27,6 +28,8 @@ useSeoMeta({
 });
 
 
+const colorMode: ColorModeInstance = useColorMode()
+
 </script>
 
 <template>
@@ -91,6 +94,8 @@ useSeoMeta({
       </div>
     </section>
     <!-- Section berita end -->
+
+    <hr v-if="colorMode.preference === 'dark'" class="text-secondary" />
   </main>
 </template>
 
@@ -106,9 +111,11 @@ useSeoMeta({
   /* 28.8px */
   /* 24px */
 }
+
 .text-decoration-underline {
   margin-bottom: 25px !important;
 }
+
 .line-break {
   position: relative;
   top: -5px;
diff --git a/pages/contact-us.vue b/pages/contact-us.vue
index 21dd296..7cb9b63 100644
--- a/pages/contact-us.vue
+++ b/pages/contact-us.vue
@@ -32,7 +32,7 @@ const colorMode = useColorMode();
     </section>
     <!-- section kontak end -->
 
-    <hr v-show="colorMode.preference === 'dark'" />
+    <hr v-if="colorMode.preference === 'dark'" class="text-secondary" />
   </main>
 </template>
 
diff --git a/pages/events/[id].vue b/pages/events/[id].vue
index 77a824e..2a4b5e2 100644
--- a/pages/events/[id].vue
+++ b/pages/events/[id].vue
@@ -1,6 +1,7 @@
-<script setup>
+<script setup lang="ts">
 
 definePageMeta({ layout: "content-layout" })
+import { ColorModeInstance } from "@nuxtjs/color-mode/dist/runtime/types";
 import { posts } from "~/utils/data/getInitialPostsData"
 
 const route = useRoute();
@@ -20,11 +21,11 @@ useSeoMeta({
   title: post.title.rendered,
   description: post.excerpt.rendered,
   author: 'Smart Nation',
-  articleAuthor: 'Smart Nation',
-  articlePublishedTime: useFormatter(post.date_gmt),
-  articleModifiedTime: useFormatter(post.date_gmt),
-  articleSection: 'Smart City',
-  articleTag: post.categories,
+  // articleAuthor: 'Smart Nation',
+  // articlePublishedTime: useFormatter(post.date_gmt),
+  // articleModifiedTime: useFormatter(post.date_gmt),
+  // articleSection: 'Smart City',
+  // articleTag: post.categories,
   ogType: 'article',
   ogTitle: post.title.rendered,
   ogDescription: post.excerpt.rendered,
@@ -40,6 +41,8 @@ const postsCategories = posts.filter(post => post.categories.find(category => ca
   .sort((a, b) => b.date_gmt.toString().localeCompare(a.date_gmt.toString()))
   ?.slice(0, 5)
 
+const colorMode: ColorModeInstance = useColorMode()
+
 </script>
 
 <template>
@@ -70,6 +73,9 @@ const postsCategories = posts.filter(post => post.categories.find(category => ca
       </div>
     </section>
     <!-- section berita detail end -->
+
+
+    <hr v-if="colorMode.preference === 'dark'" class="text-secondary" />
   </main>
 </template>
 
diff --git a/pages/events/category/[id].vue b/pages/events/category/[id].vue
index 9d7adc7..5534a90 100644
--- a/pages/events/category/[id].vue
+++ b/pages/events/category/[id].vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { ColorModeInstance } from "@nuxtjs/color-mode/dist/runtime/types";
 import { categories } from "~/utils/data/getInitialCategoryPostData";
 import { posts } from "~/utils/data/getInitialPostsData";
 
@@ -56,6 +57,7 @@ const isnaYearsData = ref([
 
 const isnaValues: globalThis.Ref<string | undefined> = ref('')
 
+const colorMode: ColorModeInstance = useColorMode()
 useSeoMeta({
   title: `Berita Kategori ${categoryTitle?.value}`,
   description: `Kumpulan Acara ISNA dari beberapa Kategori`,
@@ -198,6 +200,8 @@ useSeoMeta({
       </div>
     </section>
     <!-- Section berita end -->
+
+    <hr v-if="colorMode.preference === 'dark'" class="text-secondary" />
   </main>
 </template>
 
diff --git a/pages/gallery-smartnation.vue b/pages/gallery-smartnation.vue
deleted file mode 100644
index 44b1c97..0000000
--- a/pages/gallery-smartnation.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<script lang="ts" setup>
-import { CategoryPostsType, categories } from '~/utils/data/getInitialCategoryPostData';
-
-// Set Meta SEO
-useSeoMeta({
-  title: "Galeri Smartnation",
-  ogTitle: 'Galeri Smartnation',
-  description: 'Kumpulan Galeri Smartnation',
-})
-
-
-const colorMode = useColorMode()
-
-
-const categoriesData = categories.filter(category =>
-  category.id === Number(90) ||
-  category.id === Number(91) ||
-  category.id === Number(92) ||
-  category.id === Number(93) ||
-  category.id === Number(94) ||
-  category.id === Number(155)
-)
-  .map(cat => ({ id: cat.id, name: cat.name, slug: cat.slug }))
-  .sort((a, b) => b.name.localeCompare(a.name))
-
-</script>
-
-<template>
-  <LazyHeroParallaxBackground text="Galeri Smartnation" desc="Kumpulan Semua Galeri & Video Smart Nation"
-    background="/images/background/bg-galeri.png" />
-  <main id="content">
-
-    <section class="albums-section-container py-5">
-      <div class="container px-3 px-md-0 px-lg-0">
-        <div class="row justify-content-start g-3">
-          <div v-for="category in categoriesData" :key="category.id" class="col-xl-4 col-lg-4 col-md-6" data-aos="fade-up"
-            data-aos-duration="1500">
-            <GalleryCardAlbum :title="category.name" :created="'20 December 2023'"
-              :albumImage="'https://drive.google.com/uc?export=download&id=1cDzj6ZUrHyGEAeXzh2P-3AjWwUonmtqc'" :total="10"
-              :class="'mb-3'" />
-          </div>
-        </div>
-      </div>
-    </section>
-    <hr v-show="colorMode.preference === 'dark'" />
-  </main>
-</template>
-
-
-
-<style lang="css">
-.album-cover__images {
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  width: 100%;
-  height: 250px;
-  border-radius: 8px 8px 0 0;
-}
-</style>
-
diff --git a/pages/gallery/[id].vue b/pages/gallery/[id].vue
index f1a3691..11ed125 100644
--- a/pages/gallery/[id].vue
+++ b/pages/gallery/[id].vue
@@ -1,531 +1,244 @@
-<script setup>
+<script setup lang="ts">
+import { RouteLocationNormalizedLoaded } from "#vue-router"
+import { posts } from "~/utils/data/getInitialPostsData";
+import { categories } from "~/utils/data/getInitialCategoryPostData";
+import { ColorModeInstance } from "@nuxtjs/color-mode/dist/runtime/types";
+
 definePageMeta({
+  layout: "content-layout",
   layoutTransition: {
     name: 'slide-in',
     mode: 'out-in'
   },
   pageTransition: { name: 'fade', mode: 'out-in' }
-  
+
 })
 
-import { posts } from "~/utils/data/getInitialData";
+const route: RouteLocationNormalizedLoaded = useRoute()
+const galleryId = ref(route.params.id)
+const pageTitle: globalThis.Ref<string | undefined> = ref('')
+const pageDescription: globalThis.Ref<string | undefined> = ref('')
+const albumsId = ref(0)
 
-const route = useRoute()
 
-const { id } = route.params
+const categoriesData = categories.filter(category => category.slug === route.params.id)[0]
 
 
+if (!categoriesData) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: 'Halaman Tidak Ditemukan!'
+  })
+}
 
+pageTitle.value = `Album ${categoriesData.name}`;
+pageDescription.value = categoriesData.description;
+albumsId.value = categoriesData.id
 
 useSeoMeta({
-  title: "Detail Galeri Smart Nation",
-  description: "Halaman detail galeri smart nation"
+  title: `${pageTitle.value} - Smart Nation`,
+  description: pageDescription.value,
+  ogTitle: `${pageTitle.value} - Smart Nation`,
+  ogDescription: pageDescription.value,
 })
 
-definePageMeta({
-  layout: "content-layout"
-})
+const albumsData = posts.filter(post => post.categories.find(category => category === categoriesData.id))
+  .sort((a, b) => b.date_gmt.toString().localeCompare(a.date_gmt.toString()))
+
 
+const categoriesDataAlbums = categories.filter(category =>
+  category.id === Number(90) ||
+  category.id === Number(91) ||
+  category.id === Number(92) ||
+  category.id === Number(93) ||
+  category.id === Number(94) ||
+  category.id === Number(155)
+)
+  .sort((a, b) => b.name.localeCompare(a.name))
+  .slice(0, 3)
+
+
+const colorMode: ColorModeInstance = useColorMode()
 
 </script>
 
 
 <template>
-  <section class="berita-section-container position-relative py-5">
+  <section class="py-5 mt-5">
+
     <div class="container">
-      <div class="row d-flex g-3 py-5">
+      <div class="row justify-content-start g-3">
         <div class="col-lg-7 col-md-12 col-sm-12 me-5">
-          
-          <!-- Article Content Start -->
-          <section class="article-details-container">
-            <div class="d-grid gap-3">
-              <div class="article-details__title__wrapper">
-                <h1 class="article-details__title">Album ISNA 2016</h1>
-              </div>
-              
-              <div class="article-details__content__wrapper">
-                <div class="article-details__content__cover__wrapper">
-                  <div class="carousel slide">
-                    <img class="img-fluid rounded-4"
-                    src="https://smartnation.id/wp-content/uploads/2021/10/Arief_Yahya-1.jpg" alt="content-foto"
-                    >
-                    <a class="carousel-control-prev" role="button" data-slide="prev">
-                      <span class="carousel-control-prev-icon" style=" position: relative; left: -30px"></span>
-                      <span class="sr-only">Previous</span>
-                    </a>
-                    <a class="carousel-control-next" role="button" data-slide="next">
-                      <span class="carousel-control-next-icon" style="position: relative; left: 30px"></span>
-                      <span class="sr-only">Next</span>
-                    </a>
-                  </div>
-                </div>
-                
-                <div class="container article_content p-0 mt-3">
-                  <p>
-                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate ab voluptas non ducimus similique
-                    adipisci ut! Magni tempora eligendi ratione distinctio commodi nulla cum. Harum vitae hic accusantium
-                    velit sapiente. Amet veniam quidem magnam rem optio ducimus fuga rerum officiis? Incidunt velit sunt
-                    animi excepturi nostrum, quia, eveniet earum soluta officia neque odio, reprehenderit quis culpa dolor
-                    sequi eaque tenetur itaque totam. Tempore quasi iure, impedit sapiente cupiditate laboriosam, sint
-                    eligendi enim corporis voluptatum at? Alias reprehenderit reiciendis, odit eum recusandae
-                    exercitationem dolor fugiat perferendis temporibus quam dicta praesentium eveniet!
-                  </p>
+          <div class="d-flex flex-column">
+            <h1 class="event-heading__title">{{ pageTitle }}</h1>
+            <div class="event-albums__images__container">
+
+              <Swiper v-if="albumsData" :modules="[SwiperAutoplay, SwiperEffectCreative, SwiperNavigation]"
+                :slides-per-view="1" :space-between="50" :grabCursor="true" :navigation="{
+                  nextEl: '.swiper-button-next',
+                  prevEl: '.swiper-button-prev',
+                }" :effect="'creative'" :creative-effect="{
+  prev: {
+    shadow: false,
+    translate: ['-20%', 0, -1],
+  },
+  next: {
+    translate: ['100%', 0, 0],
+  },
+}" class="custom-swiper">
+                <SwiperSlide v-for="albums in albumsData" :key="albums.id">
+                  <NuxtImg class="event-albums__images " :src="albums.featured_media" :alt="albums.title.rendered"
+                    loading="lazy" :quality="50" format="webp" />
+                </SwiperSlide>
+                <!-- Custom Navigation -->
+                <div class="custom-navigation">
+                  <div class="swiper-button-prev"></div>
+                  <div class="swiper-button-next"></div>
                 </div>
-                
-              </div>
+              </Swiper>
             </div>
-          </section>
-          
+            <div class="event-albums__description__container">
+              <div class="event-albums__description" v-html="pageDescription"></div>
+            </div>
+          </div>
         </div>
-        <div class="col-lg-4 col-sm-12">
-          <div class="d-flex flex-column g-0 px-md-3 mx-md-2 ">
-            <h3 style="color: #CE2F2F;
-            font-family: Poppins;
-            font-size: 16px;
-            font-style: normal;
-            font-weight: 600;
-            line-height: 120%;">Album Lainnya</h3>
-            <div class="d-grid gap-2 py-3">
-              <div class="vstack gap-3 tablet-hstack">
-                <div class="scroll-container">
-                  <div class="otherAlbum container rounded-4"
-                  style="background-image: linear-gradient(to top, rgba(0, 0, 0, 1), transparent), url('https://smartnation.id/wp-content/uploads/2021/10/Rudiantara-1.jpg');">
-                  <p>Judul Album</p>
-                </div>
-                <div class="otherAlbum container rounded-4"
-                style="background-image: linear-gradient(to top, rgba(0, 0, 0, 1), transparent), url('https://smartnation.id/wp-content/uploads/2021/10/presscon1-1.jpg');">
-                <p>Judul Album</p>
-              </div>
+        <div class="col-lg-4 col-md-12">
+          <h1 class="event-heading__title__albums">Album Lainnya</h1>
+          <div class="d-flex flex-column pt-3">
+            <div v-for="albums in categoriesDataAlbums" :key="albums.id">
+              <figure class="figure">
+                <NuxtLink :to="`/gallery/${albums.slug}`" :aria-label="`Album ${albums.name}`" target="_top">
+                  <NuxtImg :src="`https://drive.google.com/uc?export=download&id=1cDzj6ZUrHyGEAeXzh2P-3AjWwUonmtqc`"
+                    class="figure-img" alt="Album ISNA 2020" loading="lazy" :quality="50" format="webp" />
+                  <figcaption class="figure-caption">{{ `Album ${albums.name}` }} </figcaption>
+                </NuxtLink>
+              </figure>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-</div>
-</section>
+  </section>
+
+  <hr v-if="colorMode.preference === 'dark'" class="text-secondary" />
 </template>
 
 <style scoped>
-.article-details__title {
-  color: var(--danger-600, #CE2F2F);
+.event-heading__title {
+  color: #CE2F2F;
   font-family: Poppins;
-  font-size: 32px;
+  font-size: 22px;
   font-style: normal;
   font-weight: 600;
   line-height: 120%;
-  /* 28.8px */
+  margin-bottom: 13px;
+  /* 37.2px */
 }
 
-.article_content {
-  color: #454545;
-  text-align: justify;
+.event-heading__title__albums {
+  color: var(--danger-600, #CE2F2F);
   font-family: Poppins;
-  font-size: 16px;
+  font-size: 22px;
   font-style: normal;
-  font-weight: 400;
+  font-weight: 600;
   line-height: 120%;
-  /* 19.2px */
-}
-
-.article-details__content {
-  color: var(--font-800, #454545);
-  text-align: justify;
-  font-family: Poppins;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 150%;
-  /* 21px */
+  /* 22.5px */
 }
 
-.article-details__cover {
+.event-albums__images {
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   background-attachment: scroll;
   width: 100%;
-  min-height: 433.57px;
+  height: 433.57px;
+  border-radius: 12px;
+  filter: brightness(50%);
 }
 
-
-.article-details__content__wrapper {
+.event-albums__images__container {
   width: 100%;
   height: auto;
-  margin-bottom: 30px;
+  margin-bottom: 20px;
 }
 
-
-.article-details__info__created {
-  color: var(--font-400, #888);
-  font-family: Poppins;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 120%;
-  /* 8.992px */
-}
-
-.article-details__info__comments {
-  color: var(--font-400, #888);
-  font-family: Poppins;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 120%;
-  /* 8.992px */
-}
-
-.article-details__info__views {
-  color: var(--font-400, #888);
-  font-family: Poppins;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 120%;
-  /* 8.992px */
-}
-
-.article-details__content__share__medsos {
-  font-size: 22px;
-  color: #D1D1D1;
-}
-
-.article-comments-card {
-  border-radius: 16px;
-  border: 0.836px solid var(--font-100, #E7E7E7);
-  background: var(--font-50, #F6F6F6);
-  padding: 20px;
-}
-
-.article-comments__name {
+.event-albums__description {
   color: var(--font-800, #454545);
+  text-align: justify;
   font-family: Poppins;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 120%;
-  /* 12px */
-}
-
-.article-comments__created {
-  color: var(--font-400, #888);
-  font-family: Poppins;
-  font-size: 11px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 120%;
-  padding-top: 5px;
-  margin-bottom: 8px;
-  /* 9.6px */
-}
-
-.article-comments__content {
-  color: var(--font-900, #3D3D3D);
-  font-family: Poppins;
-  font-size: 11px;
+  font-size: 16px;
   font-style: normal;
   font-weight: 400;
-  line-height: 120%;
-  margin-bottom: 10px;
-  /* 9.6px */
-}
-
-.dateFormat {
-  font-family: Poppins;
-  font-size: 14px;
-  font-weight: 400;
-  color: #888888;
+  line-height: 150%;
+  /* 24px */
 }
 
-.titleComment {
-  font-family: Poppins;
-  font-size: 20px;
-  font-weight: 400;
-  line-height: 19.2px;
-  color: #4F4F4F;
+.swiper-button-next {
+  width: 32px;
+  height: 32px;
+  color: #fff;
 }
 
-.descComment {
-  font-family: Poppins;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 9.6px;
-  color: #888888;
+.swiper-button-prev {
+  width: 32px;
+  height: 32px;
+  color: #fff;
 }
 
-.commentTextArea {
+.custom-swiper {
+  width: 100%;
+  height: auto;
   border-radius: 12px;
-  border: 1px solid #d1d1d1;
-  background-color: #f6f6f6;
-  height: 180px;
-  font-family: Poppins;
+  border: 0;
 }
 
-.nameForm,
-.emailForm,
-.webForm {
-  border-radius: 8px;
-  border: 1px solid #d1d1d1;
-  background-color: #f6f6f6;
-  height: 30px;
-  color: #b0b0b0;
-  font-family: Poppins;
-  font-size: 10px;
-  font-weight: 400;
-}
 
-.labelCheckBox {
-  font-family: Poppins;
-  font-size: 12px;
-  font-weight: 400;
-  color: #888888;
-}
-
-.btnCategory {
-  color: #6d6d6d;
-  font-family: Poppins;
-  font-size: 10px;
-  font-style: normal;
-  font-weight: 400;
-  border-radius: 5px;
-  background-color: #e7e7e7;
-}
-
-.btnComment {
-  width: 80px;
-  height: 25px;
-  color: #F6F6F6;
-  font-family: Poppins;
-  font-size: 8px;
-  font-weight: 400;
-  border-radius: 8px;
-  background-color: #8E0D3D;
-}
-
-.nameUserComment {
-  font-family: Poppins;
-  font-size: 14px;
-  font-weight: 600;
-  color: #454545;
-  margin-bottom: 4px;
-}
-
-.timeUserComment {
-  font-family: Poppins;
-  font-size: 12px;
-  font-weight: 400;
-  color: #888888;
-  margin-bottom: 8px;
-}
-
-.contentUserComment {
-  font-family: Poppins;
-  font-size: 13px;
-  font-weight: 400;
-  color: #3D3D3D;
-  margin-bottom: 8px;
-}
-
-.dataLikes,
-.dataDislikes {
-  font-family: Poppins;
-  font-size: 14px;
-  font-weight: 400;
-  color: #888888;
-}
-
-.contentArticle {
-  text-align: justify;
-  font-family: Poppins;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 21px;
-  color: #454545;
+.figure {
+  position: relative;
+  width: 100%;
+  height: auto;
+  overflow: hidden;
+  margin-bottom: 0;
 }
 
-#dummy_ig {
-  background-color: #F6F6F6;
-  height: 80px;
-  width: 80px;
-  z-index: 1;
+.figure .figure-img {
+  width: 100%;
+  height: 200px;
+  margin-bottom: 20px;
+  background: linear-gradient(180deg, rgba(50, 50, 50, 0.00) 0%, rgba(39, 39, 39, 0.50) 100%);
   border-radius: 8px;
-  margin-top: 3px;
-  margin-bottom: 3px;
-}
-
-#text-button {
-  font-size: 13px;
-  color: #FFF;
-  text-align: center;
-}
-
-#ig {
-  border-radius: 12px;
-  border: 1px solid #D71149;
-}
-
-#ig .contentButton>div {
-  color: #FE3565;
-  font-family: Poppins;
-  font-size: 9.75px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 120%;
-}
-
-.titleInstagramContent {
-  color: #CE2F2F;
-  font-family: Poppins;
-  font-size: 18px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 120%;
-  /* 21.6px */
-}
-
-.leadInstagramContent {
-  color: #6D6D6D;
-  font-family: Poppins;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 120%;
-  /* 14.4px */
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  filter: brightness(50%);
 }
 
-.descInstagramContent {
-  color: #454545;
+.figure .figure-caption {
+  color: var(--font-100, #E7E7E7);
   font-family: Poppins;
-  font-size: 15px;
+  font-size: 16px;
   font-style: normal;
-  font-weight: 600;
-  line-height: 120%;
-  /* 18px */
+  font-weight: 500;
+  line-height: 150%;
+  position: absolute;
+  top: 150px;
+  left: 20px;
 }
 
-.otherAlbum {
-  position: relative;
-  width: 100%;
-  height: 138px;
-  overflow: hidden;
-  background-size: cover;
-  background-position: center center;
-  margin: 0 0 1em 0;
-}
 
-.otherAlbum p {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  padding: 20px;
-  margin: 0;
-  color: white;
-  font-size: 18px;
-}
 
-@media (max-width: 992px) {
-  .main-content {
-    display: flex;
-    flex-direction: row;
-  }
-  
-  .article-details__title {
-    color: var(--danger-600, #CE2F2F);
-    font-family: Poppins;
-    font-size: 28px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 120%;
-    /* 28.8px */
-  }
-  
-  .article_content {
-    color: #454545;
-    text-align: justify;
-    font-family: Poppins;
-    font-size: 15px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 120%;
-    /* 19.2px */
-  }
-  
-  /*  */
-  .tablet-hstack {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    gap: 0;
-  }
-  
-  .scroll-container {
-    width: 100%;
-    overflow-x: auto;
-    white-space: nowrap;
-  }
-  
-  .otherAlbum {
-    width: 50%;
-    margin: 0px 1em 0 0;
-    height: 140px;
-    display: inline-block;
-    scroll-behavior: smooth;
-  }
-  
-  .otherAlbum p {
-    position: absolute;
-    bottom: 0%;
-  }
-  
-  /* Hide scrollbars in WebKit-based browsers */
-  .scroll-container::-webkit-scrollbar {
-    width: 0;
-  }
-  
-  /* Hide scroll track in WebKit-based browsers */
-  .scroll-container::-webkit-scrollbar-track {
-    display: none;
+@media (min-width: 1400px) {
+  .event-heading__title {
+    font-size: 31px;
   }
 }
 
-@media (max-width: 768px) {
-  .article-details__title {
-    color: var(--danger-600, #CE2F2F);
-    font-family: Poppins;
-    font-size: 18px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 120%;
-    /* 28.8px */
-  }
-  
-  .article_content {
-    color: #454545;
-    text-align: justify;
-    font-family: Poppins;
-    font-size: 10px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 120%;
-    /* 19.2px */
-  }
-  
-  .otherAlbum p {
-    position: absolute;
-    bottom: 0%;
-    font-size: 14px;
-  }
-  
-  /* Hide scrollbars in WebKit-based browsers */
-  .scroll-container::-webkit-scrollbar {
-    width: 0;
-  }
-  
-  /* Hide scroll track in WebKit-based browsers */
-  .scroll-container::-webkit-scrollbar-track {
-    display: none;
-  }
+/*
+   dark mode
+*/
+
+.dark-mode .event-albums__description {
+  color: #fff;
 }
 </style>
 
diff --git a/pages/gallery/index.vue b/pages/gallery/index.vue
index 3ce3a54..edbc12b 100644
--- a/pages/gallery/index.vue
+++ b/pages/gallery/index.vue
@@ -1,32 +1,28 @@
 <script lang="ts" setup>
-import { CategoryPostsType } from '~/utils/data/getInitialCategoryPostData';
+import { categories } from '~/utils/data/getInitialCategoryPostData';
 
 // Set Meta SEO
 useSeoMeta({
     title: "Galeri Smartnation",
     ogTitle: 'Galeri Smartnation',
-    description: 'Kumpulan Galeri Smartnation',
+    description: 'Kumpulan Semua Galeri & Video Smart Nation',
 })
 
 
 const colorMode = useColorMode()
 
-const { data: categories } = await useAsyncData('category-posts', () => $fetch('/api/categories'), {
-    transform: (categories: CategoryPostsType) => {
-        return categories.filter(category =>
-            category.id === Number(90) ||
-            category.id === Number(91) ||
-            category.id === Number(92) ||
-            category.id === Number(93) ||
-            category.id === Number(94) ||
-            category.id === Number(155)
-        )
-            .map(cat => ({ id: cat.id, name: cat.name, slug: cat.slug }))
-            .sort((a, b) => b.name.localeCompare(a.name))
-    }
-})
 
-const albumsTitleName: (title: string) => string = (title: string) => `Album ${title}`
+const categoriesData = categories.filter(category =>
+    category.id === Number(90) ||
+    category.id === Number(91) ||
+    category.id === Number(92) ||
+    category.id === Number(93) ||
+    category.id === Number(94) ||
+    category.id === Number(155) ||
+    category.id === Number(89) ||
+    category.id === Number(129)
+)
+    .sort((a, b) => b.name.localeCompare(a.name))
 
 </script>
 
@@ -35,24 +31,19 @@ const albumsTitleName: (title: string) => string = (title: string) => `Album ${t
         background="/images/background/bg-galeri.png" />
     <main id="content">
 
-        <section class="albums-section-container">
+        <section class="albums-section-container py-5">
             <div class="container px-3 px-md-0 px-lg-0">
-
-
-                <div v-for="category in categories" :key="category.id" class="row justify-content-start g-2 py-4"
-                    data-aos="fade-up" data-aos-duration="1500">
-                    <div class="col">
-                        <div class="d-flex flex-column">
-                            <LazyHeadingTitle :title="albumsTitleName(category.name)" />
-                            <Albums :categoryId="category.id" />
-
-                        </div>
+                <div class="row justify-content-start g-3">
+                    <div v-for="category in categoriesData" :key="category.id" class="col-xl-4 col-lg-4 col-md-6"
+                        data-aos="fade-up" data-aos-duration="1500">
+                        <GalleryCardAlbum :title="category.name" :created="new Date().toISOString()"
+                            :albumImage="'https://drive.google.com/uc?export=download&id=1cDzj6ZUrHyGEAeXzh2P-3AjWwUonmtqc'"
+                            :total="category.count" :class="'mb-3'" :redirect="category.slug" />
                     </div>
                 </div>
             </div>
         </section>
-
-        <hr v-show="colorMode.preference === 'dark'" />
+        <hr v-if="colorMode.preference === 'dark'" class="text-secondary" />
     </main>
 </template>
 
diff --git a/pages/index.vue b/pages/index.vue
index 4546865..9491e37 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 
+import { ColorModeInstance } from '@nuxtjs/color-mode/dist/runtime/types';
 import { categories } from '~/utils/data/getInitialCategoryPostData';
 import { posts } from "~/utils/data/getInitialPostsData"
 
@@ -19,6 +20,8 @@ useSeoMeta({
 
 
 
+const colorMode: ColorModeInstance = useColorMode()
+
 </script>
 
 <template>
@@ -56,7 +59,7 @@ useSeoMeta({
   <!-- News Feed Section Start -->
   <section class="latest-newsfeed-section position-relative py-5">
     <div class="container" data-aos="fade-up" data-aos-duration="1500">
-      <LazyHeadingTitle style="color: #FFFFFF !important" class="latest-newsfeed__title" title="Berita Terkini" />
+      <LazyHeadingTitle :class="colorMode.preference !== 'dark' && 'text-white'" title="Berita Terkini" />
       <div class="row justify-content-arround g-3 py-3">
         <div class="col-xl-6 col-xxl-6 col-lg-12 col-md-auto">
           <ArticlesArticleListSingleColumn :isBackground="true"
@@ -152,9 +155,11 @@ useSeoMeta({
   /* border: 2px solid #555555; */
   border-radius: 10px;
 }
+
 .text-decoration-underline {
   margin-bottom: 25px !important;
 }
+
 .article-list-item::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
   background-color: #f5f5f5;

From 514c58c53bb1e77dcf680e5b8d2fedec5fa5ade7 Mon Sep 17 00:00:00 2001
From: Farhan <101630148+KucingOyenBarbar@users.noreply.github.com>
Date: Wed, 8 Nov 2023 13:39:16 +0700
Subject: [PATCH 4/5] penambahan tooltips

---
 pages/about-us.vue | 71 ++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 59 insertions(+), 12 deletions(-)

diff --git a/pages/about-us.vue b/pages/about-us.vue
index 455bc61..46b3552 100644
--- a/pages/about-us.vue
+++ b/pages/about-us.vue
@@ -1,4 +1,5 @@
-<script setup>
+<script setup lang="ts">
+import Swal from 'sweetalert2';
 // Set Meta SEO
 useSeoMeta({
   title: "Tentang Kami",
@@ -9,9 +10,33 @@ useSeoMeta({
 const colorMode = useColorMode();
 
 const { data: teams } = await useFetch('/api/teams')
-
 const { data: clients } = await useFetch('/api/client')
 
+
+const showTooltip = (name: string, message: string, images: string) => {
+  // alert(message)
+  return Swal.fire({
+    title: name,
+    text: message,
+    imageUrl: images,
+    // imageWidth: 300,
+    imageHeight: 300,
+    width: 1000,
+    color: "#5d5d5d",
+    background: "#fff url(/images/trees.png)",
+    backdrop: `
+    rgba(0,0,123,0.4)
+    url("/images/nyan-cat.gif")
+    left top
+    no-repeat
+  `,
+    showCloseButton: true,
+    showCancelButton: false,
+    showConfirmButton: false,
+    focusConfirm: true,
+  });
+}
+
 </script>
 
 <template>
@@ -104,16 +129,38 @@ const { data: clients } = await useFetch('/api/client')
     <section class="teams-citiasia-section-container py-5">
       <div class="container" data-aos="fade-down" data-aos-duration="1500">
         <h1 class="teams-citiasia__title">Tim Citiasia Inc</h1>
-        <div class="row row-cols-2 row-cols-lg-5 row-cols-md-3 justify-content-start g-3 pt-5">
-          <div v-for="team in teams" :key="team.id" class="col">
-            <figure class="figure">
-              <NuxtImg :src="team.thumbnail" class="figure-img img-fluid rounded teams-citiasia__images" :alt="team.name"
-                loading="lazy" :quality="75" format="webp" />
-              <figcaption class="figure-caption">
-                <h3 class="teams-citiasia__name">{{ team.name }}</h3>
-                <p class="teams-citiasia__job">{{ team.jobs }}</p>
-              </figcaption>
-            </figure>
+
+
+        <!-- Tampilkan tooltips ketika user menghover -->
+        <div class="d-none d-lg-none d-xl-block d-xxl-block">
+          <div class="row row-cols-2 row-cols-lg-5 row-cols-md-3 justify-content-start g-3 pt-5 ">
+            <div v-for="team in teams" :key="team.id" class="col">
+              <figure class="figure">
+                <NuxtImg :src="team.thumbnail" class="figure-img img-fluid rounded teams-citiasia__images"
+                  :alt="team.name" loading="lazy" :quality="75" format="webp" />
+                <figcaption class="figure-caption" @mouseover="showTooltip(team.name, team.description, team.thumbnail)">
+                  <h3 class="teams-citiasia__name">{{ team.name }}</h3>
+                  <p class="teams-citiasia__job">{{ team.jobs }}</p>
+                </figcaption>
+              </figure>
+            </div>
+          </div>
+        </div>
+
+
+        <!-- sembunyikan tootips pada tampilan mobile -->
+        <div class="d-xl-none d-xxl-none">
+          <div class="row row-cols-2 row-cols-lg-5 row-cols-md-3 justify-content-start g-3 pt-5 ">
+            <div v-for="team in teams" :key="team.id" class="col">
+              <figure class="figure">
+                <NuxtImg :src="team.thumbnail" class="figure-img img-fluid rounded teams-citiasia__images"
+                  :alt="team.name" loading="lazy" :quality="75" format="webp" />
+                <figcaption class="figure-caption">
+                  <h3 class="teams-citiasia__name">{{ team.name }}</h3>
+                  <p class="teams-citiasia__job">{{ team.jobs }}</p>
+                </figcaption>
+              </figure>
+            </div>
           </div>
         </div>
       </div>

From f191c379e78297a36351cde271952ed7aa120fff Mon Sep 17 00:00:00 2001
From: Farhan <101630148+KucingOyenBarbar@users.noreply.github.com>
Date: Wed, 8 Nov 2023 14:53:54 +0700
Subject: [PATCH 5/5] penambahan interaksi halaman events

---
 pages/events/category/[id].vue | 81 ++++++++++++++++++----------------
 1 file changed, 43 insertions(+), 38 deletions(-)

diff --git a/pages/events/category/[id].vue b/pages/events/category/[id].vue
index 5534a90..99cb438 100644
--- a/pages/events/category/[id].vue
+++ b/pages/events/category/[id].vue
@@ -5,13 +5,16 @@ import { posts } from "~/utils/data/getInitialPostsData";
 
 
 const route = useRoute();
+const colorMode: ColorModeInstance = useColorMode()
 const categoryId = route.params.id
 const categoryPostsId: globalThis.Ref<number | undefined> = ref(139);
 const categoryTitle: globalThis.Ref<string | undefined> = ref('')
 const categoryDescription: globalThis.Ref<string | undefined> = ref('')
 const categoryParentId: globalThis.Ref<number | undefined> = ref(0)
 
-const category = categories.find(category => category.slug === categoryId)
+const isnaValues: globalThis.Ref<number> = ref(0)
+
+let category = categories.find(category => category.slug === categoryId)
 
 if (!category) {
   throw createError({
@@ -25,43 +28,47 @@ categoryPostsId.value = category.id
 categoryDescription.value = category.description
 categoryParentId.value = category.parent
 
+let eventsData =
+  posts.filter(post => post.categories.find(category => category === categoryPostsId.value))
+    .sort((a, b) => b.date_gmt.toString().localeCompare(a.date_gmt.toString()))
+    ?.slice(0, 12)
 
+const isnaCategoriesData = categories.filter(category => category.parent === Number(90))
+
+
+const handleClickButton = (values: any) => {
+  window.scrollTo({ top: 0, behavior: "smooth" })
+  isnaValues.value = values
+
+  console.log(posts.filter(post => post.categories.find(category => category === isnaValues.value))
+    .sort((a, b) => b.date_gmt.toString().localeCompare(a.date_gmt.toString()))
+    ?.slice(0, 12))
+
+  const category = categories.find(category => category.id === isnaValues.value)
+
+  if (category) {
+    categoryTitle.value = category.name
+    categoryDescription.value = category.description
+
+    useSeoMeta({
+      title: `Berita Kategori ${categoryTitle.value}`,
+      description: categoryDescription.value,
+    });
+
+    return eventsData = posts.filter(post => post.categories.find(category => category === isnaValues.value))
+      .sort((a, b) => b.date_gmt.toString().localeCompare(a.date_gmt.toString()))
+      ?.slice(0, 12)
+  }
+
+  return null
+}
 
-const eventsData = posts.filter(post => post.categories.find(category => category === categoryPostsId.value))
-  .sort((a, b) => b.date_gmt.toString().localeCompare(a.date_gmt.toString()))
-  ?.slice(0, 12)
-
-
-const isnaYearsData = ref([
-  {
-    id: 1,
-    value: 2015,
-  },
-  {
-    id: 2,
-    value: 2016,
-  },
-  {
-    id: 3,
-    value: 2018,
-  },
-  {
-    id: 4,
-    value: 2020,
-  },
-  {
-    id: 5,
-    value: 2022,
-  },
-])
-
-const isnaValues: globalThis.Ref<string | undefined> = ref('')
 
-const colorMode: ColorModeInstance = useColorMode()
 useSeoMeta({
-  title: `Berita Kategori ${categoryTitle?.value}`,
-  description: `Kumpulan Acara ISNA dari beberapa Kategori`,
+  title: `Berita Kategori ${categoryTitle.value}`,
+  description: categoryDescription.value,
 });
+
 </script>
 
 <template>
@@ -92,7 +99,6 @@ useSeoMeta({
             </div>
             <div class="d-flex justify-content-between py-3">
               <h1 class="berita-section-title">{{ categoryTitle }}</h1>
-
               <div v-if="categoryPostsId === Number(90) || categoryParentId === Number(90)">
                 <div class="dropdown" style="width: 150px">
                   <button class="btn btn-outline-danger dropdown-toggle" type="button" id="dropdownMenuButton1"
@@ -100,14 +106,12 @@ useSeoMeta({
                     Pilih Tahun
                   </button>
                   <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
-                    <li v-for="isna in isnaYearsData" :key="isna.id"><a class="dropdown-item">{{ isna.value }}</a></li>
+                    <li v-for="isna in isnaCategoriesData" :key="isna.id" @click="handleClickButton(isna.id)"><a
+                        class="dropdown-item border-bottom">{{ isna.name.replace('ISNA', "") }}</a></li>
                   </ul>
                 </div>
-
               </div>
             </div>
-
-
             <div>
               <div class="d-flex flex-column ">
                 <ul v-if="eventsData" class="list-group list-group-flush">
@@ -359,6 +363,7 @@ useSeoMeta({
   text-align: center;
   /* margin: 0 auto;
   width: 124px; */
+  cursor: pointer;
 
 }