initial: bootstrap from BukidBountyApp base

resources/js/Components/Core/Services/ServiceButtonGrid.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="mt-5">
+    <div class="tf-container">
+      <div class="tf-title d-flex justify-content-between">
+        <h3 class="fw_6">{{ title }}</h3>
+        <a
+          v-if="viewAllText"
+          href="javascript:void(0);"
+          class="primary_color fw_6"
+          @click="$emit('view-all')"
+        >
+          {{ viewAllText }}
+        </a>
+      </div>
+      <ul class="box-service mt-3">
+        <ServiceButton
+          v-for="(item, index) in items"
+          :key="index"
+          :icon="item.icon"
+          :title="item.title"
+          :bg-color8="item.bgColor8 || false"
+          @click="$emit('item-click', item, index)"
+          @mouseenter="prefetchPage(item.pagename)"
+          @touchstart.passive="prefetchPage(item.pagename)"
+        />
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import ServiceButton from './ServiceButton.vue'
+
+defineProps({
+  title:       { type: String, default: '' },
+  viewAllText: { type: String, default: '' },
+  /**
+   * Array of { icon, title, bgColor8? }
+   */
+  items: { type: Array, required: true },
+})
+
+defineEmits(['view-all', 'item-click'])
+
+const prefetchPage = (pagename) => {
+  if (pagename && window.$prefetchPage) window.$prefetchPage(pagename);
+};
+</script>