Merge branch 'fitur-home' 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">
+        <div class="flex items-center justify-center">
-          <Cpu size="20" />
+          <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",
+    name: "Semua",
-  "PC",
+    icon: "Boxes"
-  "Monitor",
+  },
-  "Keyboard",
+  {
-  "Router",
+    name: "Laptop",
-  "Switch",
+    icon: "Laptop"
-  "Server",
+  },
-  "Access Point"
+  {
+    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

@@ -6,10 +6,10 @@
           Marketplace Barang Bekas Teknologi
         </span>
         <h1 class="mt-6 text-4xl font-extrabold tracking-tight text-slate-950 sm:text-5xl lg:text-6xl">
-          Jual beli perangkat IT bekas jadi lebih mudah.
+          Jual beli perangkat Teknologi bekas.
         </h1>
         <p class="mt-6 max-w-xl text-lg leading-8 text-slate-600">
-          Temukan laptop bekas, PC, monitor, keyboard, router, switch, access point, dan server bekas untuk kebutuhan belajar SIJA/TKJ.
+          Temukan laptop bekas, PC, monitor, keyboard, router, switch, access point, dan server bekas untuk berbagai kebutuhan.
         </p>
         <div class="mt-8 flex flex-wrap gap-3">
           <RouterLink to="/jual" class="btn-primary">Jual Barang Sekarang</RouterLink>
@@ -38,11 +38,16 @@
     </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
+  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">
-          <Cpu size="22" />
+    <component :is="iconMap[cat.icon]" :size="22" />
   </div>
-        <p class="font-bold">{{ cat }}</p>
+
+  <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>