Merge branch 'fitur-navbar' into dev

src/components/Navbar.vue

@@ -2,8 +2,12 @@
   <header class="sticky top-0 z-50 border-b border-slate-200 bg-white/90 backdrop-blur">
     <div class="container-page flex h-16 items-center justify-between">
       <RouterLink to="/" class="flex items-center gap-2">
-        <div class="flex h-9 w-9 items-center justify-center rounded-xl bg-brand-600 text-white">
-          <Cpu size="20" />
+        <div class="flex items-center justify-center">
+          <img 
+            src="/round-logo-sija.png" 
+            alt="SecondTech Logo" 
+            class="h-10 w-10 object-contain"
+          />
         </div>
         <span class="text-lg font-extrabold tracking-tight">SecondTech</span>
       </RouterLink>

src/data/products.js

@@ -98,13 +98,40 @@ export const products = [
 ]
 
 export const categories = [
-  "Semua",
-  "Laptop",
-  "PC",
-  "Monitor",
-  "Keyboard",
-  "Router",
-  "Switch",
-  "Server",
-  "Access Point"
+  {
+    name: "Semua",
+    icon: "Boxes"
+  },
+  {
+    name: "Laptop",
+    icon: "Laptop"
+  },
+  {
+    name: "PC",
+    icon: "PcCase"
+  },
+  {
+    name: "Monitor",
+    icon: "Monitor"
+  },
+  {
+    name: "Keyboard",
+    icon: "Keyboard"
+  },
+  {
+    name: "Router",
+    icon: "Router"
+  },
+  {
+    name: "Switch",
+    icon: "Network"
+  },
+  {
+    name: "Server",
+    icon: "Server"
+  },
+  {
+    name: "Access Point",
+    icon: "Wifi"
+  }
 ]

src/views/HomeView.vue

@@ -38,12 +38,17 @@
     </div>
 
     <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
-      <div v-for="cat in categoryList" :key="cat" class="card p-5 text-center transition hover:-translate-y-1 hover:shadow-md">
-        <div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-2xl bg-brand-50 text-brand-700">
-          <Cpu size="22" />
-        </div>
-        <p class="font-bold">{{ cat }}</p>
-      </div>
+<div
+  v-for="cat in categoryList"
+  :key="cat.name"
+  class="card p-5 text-center transition hover:-translate-y-1 hover:shadow-md"
+>
+  <div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-2xl bg-brand-50 text-brand-700">
+    <component :is="iconMap[cat.icon]" :size="22" />
+  </div>
+
+  <p class="font-bold">{{ cat.name }}</p>
+</div>
     </div>
   </section>
 
@@ -71,14 +76,38 @@
 
 <script setup>
 import { computed, ref } from "vue"
-import { Cpu } from "lucide-vue-next"
 import ProductCard from "../components/ProductCard.vue"
-import { products, categories } from "../data/products"
 import { getSavedProducts, setSavedProducts } from "../utils"
+import {
+  Boxes,
+  Laptop,
+  PcCase,
+  Monitor,
+  Keyboard,
+  Router,
+  Network,
+  Server,
+  Wifi
+} from "lucide-vue-next"
+
+import { products, categories } from "../data/products"
 
 const saved = ref(getSavedProducts())
-const categoryList = categories.filter((c) => c !== "Semua").slice(0, 6)
+const categoryList = categories
+  .filter((category) => category.name !== "Semua")
+  .slice(0, 6)
 const latestProducts = computed(() => products.slice(0, 4))
+const iconMap = {
+  Boxes,
+  Laptop,
+  PcCase,
+  Monitor,
+  Keyboard,
+  Router,
+  Network,
+  Server,
+  Wifi
+}
 
 function toggleSave(id) {
   if (saved.value.includes(id)) {

src/views/ProductDetailView.vue

@@ -45,7 +45,7 @@
         </div>
 
         <div class="mt-8 flex flex-wrap gap-3">
-          <a :href="waLink" target="_blank" class="btn-primary">Hubungi via WhatsApp</a>
+          <a :href="waLink" target="_blank" class="btn-WA">Hubungi via WhatsApp</a>
           <button class="btn-secondary" @click="toggleSave">
             {{ saved ? "Hapus dari Tersimpan" : "Simpan Barang" }}
           </button>