initial: bootstrap from BukidBountyApp base

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

@@ -0,0 +1,31 @@
+<template>
+  <div class="list-bill-view mb-4" @click="$emit('click', $event)">
+    <IconImage
+      v-if="icon"
+      :src="icon"
+      :width="iconWidth"
+      :height="iconHeight"
+    />
+    <div class="content">
+      <h4>
+        <a href="javascript:void(0);" class="fw_6">{{ title }}</a>
+      </h4>
+      <p>{{ subtitle }}</p>
+    </div>
+    <i class="fas fa-chevron-right"></i>
+  </div>
+</template>
+
+<script setup>
+import IconImage from '../IconImage.vue'
+
+defineProps({
+  title:      { type: String, required: true },
+  subtitle:   { type: String, default: '' },
+  icon:       { type: String, default: '' },
+  iconWidth:  { type: [String, Number], default: 30 },
+  iconHeight: { type: [String, Number], default: 30 },
+})
+
+defineEmits(['click'])
+</script>

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

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <ListArrowButton
+      v-for="(item, index) in items"
+      :key="index"
+      :title="item.title"
+      :subtitle="item.subtitle || ''"
+      :icon="item.icon || ''"
+      :icon-width="item.iconWidth || 30"
+      :icon-height="item.iconHeight || 30"
+      @click="$emit('item-click', item, index)"
+    />
+  </div>
+</template>
+
+<script setup>
+import ListArrowButton from './ListArrowButton.vue'
+
+defineProps({
+  /**
+   * Array of { title, subtitle?, icon?, iconWidth?, iconHeight? }
+   */
+  items: { type: Array, required: true },
+})
+
+defineEmits(['item-click'])
+</script>

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

@@ -0,0 +1,20 @@
+<template>
+  <li>
+    <a href="javascript:void(0);" @click="$emit('click', $event)">
+      <div :class="['icon-box', bgColor8 ? 'bg_color_8' : '']" style="background: transparent !important; border: none !important;">
+        <img :src="icon" />
+      </div>
+      <span style="color: var(--text-primary);">{{ title }}</span>
+    </a>
+  </li>
+</template>
+
+<script setup>
+defineProps({
+  icon:     { type: String, required: true },
+  title:    { type: String, default: '' },
+  bgColor8: { type: Boolean, default: false },
+})
+
+defineEmits(['click'])
+</script>

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>

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

@@ -0,0 +1,60 @@
+<template>
+  <li @click="$emit('click', $event)" class="side-text-button">
+    <div class="icon-wrapper-seamless">
+      <IconImage
+        v-if="icon"
+        :src="icon"
+        :width="iconWidth"
+        :height="iconHeight"
+        class="seamless-icon"
+      />
+    </div>
+    <div class="text-label" style="color: var(--text-primary);">
+      {{ text }}
+    </div>
+  </li>
+</template>
+
+<script setup>
+import IconImage from '../IconImage.vue'
+
+defineProps({
+  text:       { type: String, required: true },
+  icon:       { type: String, default: '' },
+  iconWidth:  { type: [String, Number], default: 30 },
+  iconHeight: { type: [String, Number], default: 30 },
+})
+
+defineEmits(['click'])
+</script>
+
+<style scoped>
+.side-text-button {
+    background: transparent !important;
+    border: none !important;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 16px;
+    transition: all 0.2s ease;
+    cursor: pointer;
+}
+
+.side-text-button:hover {
+    background: var(--bg-tertiary) !important;
+}
+
+.icon-wrapper-seamless {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.seamless-icon {
+    filter: brightness(1.1) contrast(1.1);
+}
+
+.text-label {
+    font-weight: 500;
+}
+</style>

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

@@ -0,0 +1,32 @@
+<template>
+  <ul class="mt-3 box-outstanding-service">
+    <SideTextButton
+      v-for="(item, index) in items"
+      :key="index"
+      :text="item.text"
+      :icon="item.icon || ''"
+      :icon-width="item.iconWidth || 30"
+      :icon-height="item.iconHeight || 30"
+      @click="$emit('item-click', item, index)"
+      @mouseenter="prefetchPage(item.pagename)"
+      @touchstart.passive="prefetchPage(item.pagename)"
+    />
+  </ul>
+</template>
+
+<script setup>
+import SideTextButton from './SideTextButton.vue'
+
+defineProps({
+  /**
+   * Array of { text, icon?, iconWidth?, iconHeight? }
+   */
+  items: { type: Array, required: true },
+})
+
+defineEmits(['item-click'])
+
+const prefetchPage = (pagename) => {
+  if (pagename && window.$prefetchPage) window.$prefetchPage(pagename);
+};
+</script>