fitur fitur darkmode dan foto foto

src/assets/main.css

@@ -39,3 +39,461 @@ body {
 .btn-WA {
   @apply inline-flex items-center justify-center gap-2 rounded-xl bg-green-500 px-5 py-3 text-sm font-semibold text-white transition hover:bg-green-600;
 }
+
+/* SecondTech dark mode */
+html.dark body {
+  background: #121212;
+  color: #f8fafc;
+}
+
+html.dark header {
+  background: rgba(18, 18, 18, 0.94);
+  border-color: rgba(37, 99, 235, 0.34);
+}
+
+html.dark main,
+html.dark section {
+  background: #121212;
+}
+
+html.dark .card {
+  background: #181818;
+  border-color: rgba(37, 99, 235, 0.30);
+  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.20);
+}
+
+html.dark .input {
+  background: #181818;
+  border-color: rgba(37, 99, 235, 0.34);
+  color: #f8fafc;
+}
+
+html.dark .input::placeholder {
+  color: #94a3b8;
+}
+
+html.dark .btn-secondary {
+  background: #181818;
+  border-color: rgba(37, 99, 235, 0.38);
+  color: #f8fafc;
+  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
+}
+
+html.dark .btn-primary {
+  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.24);
+}
+
+html.dark .bg-white,
+html.dark .bg-slate-50,
+html.dark .bg-slate-100 {
+  background-color: #181818;
+}
+
+html.dark .text-slate-950,
+html.dark .text-slate-900,
+html.dark .text-slate-800,
+html.dark .text-slate-700 {
+  color: #f8fafc;
+}
+
+html.dark .text-slate-600,
+html.dark .text-slate-500 {
+  color: #cbd5e1;
+}
+
+html.dark .border-slate-200 {
+  border-color: rgba(37, 99, 235, 0.30);
+}
+
+/* SecondTech stronger dark mode repair */
+html.dark,
+html.dark body {
+  background: #121212 !important;
+  color: #f8fafc !important;
+}
+
+html.dark header,
+html.dark footer,
+html.dark main,
+html.dark section {
+  background-color: #121212 !important;
+}
+
+html.dark header {
+  border-color: rgba(37, 99, 235, 0.35) !important;
+}
+
+html.dark .card {
+  background: #181818 !important;
+  border-color: rgba(37, 99, 235, 0.34) !important;
+  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.22) !important;
+}
+
+html.dark .input,
+html.dark input,
+html.dark select,
+html.dark textarea {
+  background-color: #181818 !important;
+  border-color: rgba(37, 99, 235, 0.38) !important;
+  color: #f8fafc !important;
+}
+
+html.dark .input::placeholder,
+html.dark input::placeholder,
+html.dark textarea::placeholder {
+  color: #94a3b8 !important;
+}
+
+html.dark .btn-secondary {
+  background: #181818 !important;
+  border-color: rgba(37, 99, 235, 0.42) !important;
+  color: #f8fafc !important;
+  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.14) !important;
+}
+
+html.dark .btn-primary {
+  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.26) !important;
+}
+
+html.dark .bg-white,
+html.dark .bg-slate-50,
+html.dark .bg-slate-100,
+html.dark .bg-brand-50 {
+  background-color: #181818 !important;
+}
+
+html.dark .text-slate-950,
+html.dark .text-slate-900,
+html.dark .text-slate-800,
+html.dark .text-slate-700,
+html.dark .text-brand-900,
+html.dark .text-brand-800,
+html.dark .text-brand-700 {
+  color: #f8fafc !important;
+}
+
+html.dark .text-slate-600,
+html.dark .text-slate-500,
+html.dark .text-slate-400 {
+  color: #cbd5e1 !important;
+}
+
+html.dark .nav-link,
+html.dark .mobile-link,
+html.dark a:not(.btn-primary) {
+  color: #dbeafe !important;
+}
+
+html.dark .nav-link:hover,
+html.dark .mobile-link:hover,
+html.dark a:not(.btn-primary):hover {
+  color: #ffffff !important;
+}
+
+html.dark .border-slate-200,
+html.dark .border-brand-600 {
+  border-color: rgba(37, 99, 235, 0.42) !important;
+}
+
+html.dark .shadow-sm {
+  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.18) !important;
+}
+
+/* SecondTech final dark mode repair */
+html.dark,
+html.dark body {
+  background: #121212 !important;
+  color: #f8fafc !important;
+}
+
+html.dark header,
+html.dark footer,
+html.dark main,
+html.dark section {
+  background-color: #121212 !important;
+}
+
+html.dark header {
+  border-color: rgba(37, 99, 235, 0.35) !important;
+}
+
+html.dark .card {
+  background: #181818 !important;
+  border-color: rgba(37, 99, 235, 0.34) !important;
+  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.22) !important;
+}
+
+html.dark .input,
+html.dark input,
+html.dark select,
+html.dark textarea {
+  background-color: #181818 !important;
+  border-color: rgba(37, 99, 235, 0.38) !important;
+  color: #f8fafc !important;
+}
+
+html.dark .input::placeholder,
+html.dark input::placeholder,
+html.dark textarea::placeholder {
+  color: #94a3b8 !important;
+}
+
+html.dark .btn-secondary {
+  background: #181818 !important;
+  border-color: rgba(37, 99, 235, 0.42) !important;
+  color: #f8fafc !important;
+  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.14) !important;
+}
+
+html.dark .btn-primary {
+  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.26) !important;
+}
+
+html.dark .bg-white,
+html.dark .bg-slate-50,
+html.dark .bg-slate-100,
+html.dark .bg-brand-50,
+html.dark .bg-emerald-50,
+html.dark .bg-red-50 {
+  background-color: #181818 !important;
+}
+
+html.dark .text-zinc-950,
+html.dark .text-zinc-900,
+html.dark .text-zinc-800,
+html.dark .text-slate-950,
+html.dark .text-slate-900,
+html.dark .text-slate-800,
+html.dark .text-slate-700,
+html.dark .text-brand-900,
+html.dark .text-brand-800,
+html.dark .text-brand-700,
+html.dark .text-emerald-700,
+html.dark .text-red-700 {
+  color: #f8fafc !important;
+}
+
+html.dark .text-slate-600,
+html.dark .text-slate-500,
+html.dark .text-slate-400,
+html.dark .text-zinc-600,
+html.dark .text-zinc-500,
+html.dark .text-zinc-400 {
+  color: #cbd5e1 !important;
+}
+
+html.dark .nav-link,
+html.dark .mobile-link,
+html.dark a:not(.btn-primary) {
+  color: #dbeafe !important;
+}
+
+html.dark .nav-link:hover,
+html.dark .mobile-link:hover,
+html.dark a:not(.btn-primary):hover {
+  color: #ffffff !important;
+}
+
+html.dark .border-slate-200,
+html.dark .border-brand-600 {
+  border-color: rgba(37, 99, 235, 0.42) !important;
+}
+
+html.dark .shadow-sm {
+  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.18) !important;
+}
+
+/* SecondTech final dark mode override */
+:root {
+  --hero-title-color: #0f1729;
+}
+
+html.dark {
+  --hero-title-color: #f8fafc;
+  color-scheme: dark;
+}
+
+html.dark,
+html.dark body {
+  background: #121212 !important;
+  color: #f8fafc !important;
+}
+
+html.dark header,
+html.dark footer,
+html.dark main,
+html.dark section {
+  background-color: #121212 !important;
+}
+
+html.dark header {
+  border-color: rgba(37, 99, 235, 0.36) !important;
+}
+
+html.dark .card {
+  background: #181818 !important;
+  border-color: rgba(37, 99, 235, 0.34) !important;
+  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.22) !important;
+}
+
+html.dark .input,
+html.dark input,
+html.dark select,
+html.dark textarea {
+  background-color: #181818 !important;
+  border-color: rgba(37, 99, 235, 0.38) !important;
+  color: #f8fafc !important;
+}
+
+html.dark .input::placeholder,
+html.dark input::placeholder,
+html.dark textarea::placeholder {
+  color: #94a3b8 !important;
+}
+
+html.dark .btn-secondary {
+  background: #181818 !important;
+  border-color: rgba(37, 99, 235, 0.42) !important;
+  color: #f8fafc !important;
+  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.14) !important;
+}
+
+html.dark .btn-primary {
+  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.26) !important;
+}
+
+html.dark .bg-white,
+html.dark .bg-slate-50,
+html.dark .bg-slate-100,
+html.dark .bg-brand-50,
+html.dark .bg-emerald-50,
+html.dark .bg-red-50 {
+  background-color: #181818 !important;
+}
+
+html.dark .bg-white\/90 {
+  background-color: rgba(24, 24, 24, 0.9) !important;
+  color: #f8fafc !important;
+  border: 1px solid rgba(37, 99, 235, 0.35) !important;
+}
+
+html.dark .text-zinc-950,
+html.dark .text-zinc-900,
+html.dark .text-zinc-800,
+html.dark .text-slate-950,
+html.dark .text-slate-900,
+html.dark .text-slate-800,
+html.dark .text-slate-700,
+html.dark .text-brand-950,
+html.dark .text-brand-900,
+html.dark .text-brand-800,
+html.dark .text-brand-700,
+html.dark .text-emerald-700,
+html.dark .text-red-700 {
+  color: #f8fafc !important;
+}
+
+html.dark .text-slate-600,
+html.dark .text-slate-500,
+html.dark .text-slate-400,
+html.dark .text-zinc-600,
+html.dark .text-zinc-500,
+html.dark .text-zinc-400 {
+  color: #cbd5e1 !important;
+}
+
+html.dark .label,
+html.dark label,
+html.dark h1,
+html.dark h2,
+html.dark h3,
+html.dark h4,
+html.dark p,
+html.dark span {
+  color: inherit;
+}
+
+html.dark .nav-link,
+html.dark .mobile-link,
+html.dark a:not(.btn-primary) {
+  color: #dbeafe !important;
+}
+
+html.dark .nav-link:hover,
+html.dark .mobile-link:hover,
+html.dark a:not(.btn-primary):hover {
+  color: #ffffff !important;
+}
+
+html.dark .border-slate-200,
+html.dark .border-brand-600 {
+  border-color: rgba(37, 99, 235, 0.42) !important;
+}
+
+html.dark .shadow-sm {
+  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.18) !important;
+}
+
+/* Sidebar active links are generated by scoped component CSS, so override directly. */
+html.dark .side-link {
+  color: #e2e8f0 !important;
+}
+
+html.dark .side-link.router-link-active {
+  background: rgba(37, 99, 235, 0.18) !important;
+  border: 1px solid rgba(37, 99, 235, 0.40) !important;
+  color: #ffffff !important;
+  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.16) !important;
+}
+
+html.dark .side-link.router-link-active svg,
+html.dark .side-link svg {
+  color: currentColor !important;
+}
+
+html.dark .side-link.admin-link,
+html.dark .side-link.admin-link.router-link-active {
+  background: rgba(37, 99, 235, 0.18) !important;
+  border: 1px solid rgba(37, 99, 235, 0.40) !important;
+  color: #ffffff !important;
+}
+
+/* Product cards: category badge and save button use bg-white/90. */
+html.dark button.bg-white\/90,
+html.dark span.bg-white\/90 {
+  background-color: rgba(24, 24, 24, 0.90) !important;
+  color: #f8fafc !important;
+  border: 1px solid rgba(37, 99, 235, 0.35) !important;
+}
+
+html.dark button.bg-white\/90:hover {
+  background-color: #2563eb !important;
+  color: #ffffff !important;
+}
+
+html.dark .rounded-full.bg-brand-50,
+html.dark .rounded-full.bg-emerald-50,
+html.dark .rounded-full.bg-red-50 {
+  background-color: rgba(37, 99, 235, 0.16) !important;
+  color: #f8fafc !important;
+  border: 1px solid rgba(37, 99, 235, 0.35) !important;
+}
+
+/* Dark mode sidebar hover fix */
+html.dark .side-link:hover {
+  background: rgba(37, 99, 235, 0.16) !important;
+  border-color: rgba(37, 99, 235, 0.38) !important;
+  color: #ffffff !important;
+}
+
+html.dark .side-link:hover svg {
+  color: #ffffff !important;
+}
+
+html.dark .side-link.router-link-active,
+html.dark .side-link.router-link-active:hover {
+  background: rgba(37, 99, 235, 0.22) !important;
+  border: 1px solid rgba(37, 99, 235, 0.45) !important;
+  color: #ffffff !important;
+  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.16) !important;
+}

src/components/Navbar.vue

@@ -2,12 +2,8 @@
   <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 items-center justify-center">
-          <img 
-            src="/round-logo-sija.png" 
-            alt="SecondTech Logo" 
-            class="h-10 w-10 object-contain"
-          />
+        <div class="flex h-9 w-9 items-center justify-center rounded-xl bg-brand-600 text-white">
+          <Cpu size="20" />
         </div>
         <span class="text-lg font-extrabold tracking-tight">SecondTech</span>
       </RouterLink>
@@ -18,41 +14,24 @@
         <RouterLink class="nav-link" to="/jual">Jual Barang</RouterLink>
         <RouterLink class="nav-link" to="/dashboard">Dashboard</RouterLink>
         <RouterLink class="nav-link" to="/tersimpan">Tersimpan</RouterLink>
-
-        <RouterLink
-          v-if="isSuperadmin"
-          class="nav-link"
-          to="/admin/products"
-        >
-          Admin Marketplace
-        </RouterLink>
+        <RouterLink v-if="isSuperadmin" class="nav-link" to="/admin/products">Admin Marketplace</RouterLink>
       </nav>
 
       <div class="hidden items-center gap-3 md:flex">
+        <button type="button" class="btn-secondary !px-3 !py-2" @click="toggleTheme">
+          <Sun v-if="darkMode" size="18" />
+          <Moon v-else size="18" />
+        </button>
+
         <template v-if="currentUser">
-          <span class="text-sm font-bold text-slate-700">
-            {{ currentUser.name }}
-          </span>
-
-          <span
-            v-if="isSuperadmin"
-            class="rounded-full bg-red-50 px-3 py-1 text-xs font-bold text-red-700"
-          >
-            Superadmin
-          </span>
-
-          <button class="btn-secondary !px-4 !py-2" @click="logout">
-            Logout
-          </button>
+          <span class="text-sm font-bold text-slate-700">{{ currentUser.name }}</span>
+          <span v-if="isSuperadmin" class="rounded-full bg-red-50 px-3 py-1 text-xs font-bold text-red-700">Superadmin</span>
+          <button class="btn-secondary !px-4 !py-2" @click="logout">Logout</button>
         </template>
 
         <template v-else>
-          <RouterLink to="/login" class="btn-secondary !px-4 !py-2">
-            Login
-          </RouterLink>
-          <RouterLink to="/register" class="btn-primary !px-4 !py-2">
-            Register
-          </RouterLink>
+          <RouterLink to="/login" class="btn-secondary !px-4 !py-2">Login</RouterLink>
+          <RouterLink to="/register" class="btn-primary !px-4 !py-2">Register</RouterLink>
         </template>
       </div>
 
@@ -68,37 +47,26 @@
         <RouterLink class="mobile-link" to="/jual" @click="open = false">Jual Barang</RouterLink>
         <RouterLink class="mobile-link" to="/dashboard" @click="open = false">Dashboard</RouterLink>
         <RouterLink class="mobile-link" to="/tersimpan" @click="open = false">Tersimpan</RouterLink>
+        <RouterLink v-if="isSuperadmin" class="mobile-link" to="/admin/products" @click="open = false">Admin Marketplace</RouterLink>
 
-        <RouterLink
-          v-if="isSuperadmin"
-          class="mobile-link"
-          to="/admin/products"
-          @click="open = false"
-        >
-          Admin Marketplace
-        </RouterLink>
+        <button type="button" class="btn-secondary mt-2 !py-2 text-center" @click="toggleTheme">
+          <Sun v-if="darkMode" size="18" />
+          <Moon v-else size="18" />
+          {{ darkMode ? "Light Mode" : "Dark Mode" }}
+        </button>
 
         <div v-if="currentUser" class="mt-2 grid gap-2">
           <div class="rounded-xl bg-slate-50 px-3 py-2">
             <p class="text-sm font-bold text-slate-800">{{ currentUser.name }}</p>
             <p class="text-xs text-slate-500">{{ currentUser.email }}</p>
-            <p v-if="isSuperadmin" class="mt-1 text-xs font-bold text-red-700">
-              Superadmin
-            </p>
+            <p v-if="isSuperadmin" class="mt-1 text-xs font-bold text-red-700">Superadmin</p>
           </div>
-
-          <button class="btn-secondary !py-2 text-center" @click="logout">
-            Logout
-          </button>
+          <button class="btn-secondary !py-2 text-center" @click="logout">Logout</button>
         </div>
 
         <div v-else class="mt-2 grid grid-cols-2 gap-2">
-          <RouterLink to="/login" class="btn-secondary !py-2 text-center" @click="open = false">
-            Login
-          </RouterLink>
-          <RouterLink to="/register" class="btn-primary !py-2 text-center" @click="open = false">
-            Register
-          </RouterLink>
+          <RouterLink to="/login" class="btn-secondary !py-2 text-center" @click="open = false">Login</RouterLink>
+          <RouterLink to="/register" class="btn-primary !py-2 text-center" @click="open = false">Register</RouterLink>
         </div>
       </div>
     </div>
@@ -108,17 +76,16 @@
 <script setup>
 import { computed, onMounted, ref, watch } from "vue"
 import { useRoute, useRouter } from "vue-router"
-import { Cpu, Menu } from "lucide-vue-next"
+import { Cpu, Menu, Moon, Sun } from "lucide-vue-next"
 import { clearAuth, fetchCurrentUser, getCurrentUser, getToken, setAuth } from "../utils"
 
 const open = ref(false)
 const route = useRoute()
 const router = useRouter()
 const currentUser = ref(getCurrentUser())
+const darkMode = ref(localStorage.getItem("secondtech_theme") === "dark")
 
-const isSuperadmin = computed(() => {
-  return currentUser.value?.role === "superadmin"
-})
+const isSuperadmin = computed(() => currentUser.value?.role === "superadmin")
 
 watch(
   () => route.fullPath,
@@ -127,15 +94,22 @@ watch(
   }
 )
 
+function applyTheme() {
+  document.documentElement.classList.toggle("dark", darkMode.value)
+  localStorage.setItem("secondtech_theme", darkMode.value ? "dark" : "light")
+}
+
+function toggleTheme() {
+  darkMode.value = !darkMode.value
+  applyTheme()
+}
+
 async function refreshCurrentUser() {
   if (!getToken()) return
 
   try {
     const data = await fetchCurrentUser()
-    setAuth({
-      token: getToken(),
-      user: data.user
-    })
+    setAuth({ token: getToken(), user: data.user })
     currentUser.value = getCurrentUser()
   } catch {
     clearAuth()
@@ -150,7 +124,10 @@ function logout() {
   router.push("/login")
 }
 
-onMounted(refreshCurrentUser)
+onMounted(() => {
+  applyTheme()
+  refreshCurrentUser()
+})
 </script>
 
 <style scoped>

src/data/products.js

@@ -98,40 +98,25 @@ export const products = [
 ]
 
 export const categories = [
-  {
-    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"
-  }
+  "Semua",
+  "Laptop",
+  "PC",
+  "Monitor",
+  "Keyboard",
+  "Router",
+  "Switch",
+  "Server",
+  "Access Point"
+]
+
+export const categoryOptions = [
+  { 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/utils.js

@@ -63,7 +63,6 @@ async function requestJson(path, options = {}) {
     ...options,
     headers
   })
-
   const data = await response.json().catch(() => ({}))
 
   if (!response.ok) {

src/views/HomeView.vue

@@ -2,15 +2,31 @@
   <section class="bg-gradient-to-br from-brand-50 via-white to-slate-100">
     <div class="container-page grid min-h-[560px] items-center gap-10 py-16 lg:grid-cols-2">
       <div>
-        <span class="rounded-full bg-brand-100 px-4 py-2 text-sm font-bold text-brand-700">
-          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 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 berbagai kebutuhan.
-        </p>
+        <ShinyText
+          text="SecondTech"
+          className="text-1xl font-extrabold tracking-tight sm:text-1xl lg:text-2xl"
+          :color="'#1c4ed9'"
+          :shineColor="'#e0e7ff'"
+          :spread="45"
+          :speed="1"
+          :delay="2"
+          :direction="'left'"
+          :pauseOnHover="true"
+          :yoyo="true"
+        />
+        <div>
+          <TextType
+            as="h2"
+            className="mt-6 text-3xl font-extrabold tracking-tight text-zinc-950 sm:text-6xl lg:text-5xl"
+            :text="['Menjual Barang Bekas, yang kamu butuhkan, di satu tempat.']"
+            :typingSpeed="75"
+            :pauseDuration="1500"
+            :showCursor="false"
+            :textColors="['var(--hero-title-color)']"
+            cursorCharacter="|"
+          />
+        </div>
+        <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 berbagai kebutuhan.</p>
         <div class="mt-8 flex flex-wrap gap-3">
           <RouterLink to="/jual" class="btn-primary">Jual Barang Sekarang</RouterLink>
           <RouterLink to="/marketplace" class="btn-secondary">Lihat Marketplace</RouterLink>
@@ -19,11 +35,7 @@
 
       <div class="relative">
         <div class="absolute -inset-4 rounded-[2rem] bg-brand-100 blur-2xl"></div>
-        <img
-          class="relative aspect-[4/3] w-full rounded-[2rem] object-cover shadow-2xl"
-          src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=80&w=1200&auto=format&fit=crop"
-          alt="Tech marketplace"
-        />
+        <img class="relative aspect-[4/3] w-full rounded-[2rem] object-cover shadow-2xl" src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=80&w=1200&auto=format&fit=crop" alt="Tech marketplace" />
       </div>
     </div>
   </section>
@@ -38,17 +50,13 @@
     </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.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>
+      <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>
+        <p class="font-bold">{{ cat.name }}</p>
+      </div>
     </div>
   </section>
 
@@ -62,41 +70,27 @@
       </div>
 
       <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
-        <ProductCard
-          v-for="product in latestProducts"
-          :key="product.id"
-          :product="product"
-          :saved="saved.includes(product.id)"
-          @toggle-save="toggleSave"
-        />
+        <ProductCard v-for="product in latestProducts" :key="product.id" :product="product" :saved="saved.includes(product.id)" @toggle-save="toggleSave" />
       </div>
     </div>
   </section>
 </template>
 
 <script setup>
-import { computed, ref } from "vue"
-import ProductCard from "../components/ProductCard.vue"
-import { getSavedProducts, setSavedProducts } from "../utils"
-import {
-  Boxes,
-  Laptop,
-  PcCase,
-  Monitor,
-  Keyboard,
-  Router,
-  Network,
-  Server,
-  Wifi
-} from "lucide-vue-next"
+import { computed, ref } from 'vue';
+import ProductCard from '../components/ProductCard.vue';
+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"
+import { products, categoryOptions } from '../data/products';
+import ShinyText from '../vuebits/ShinyText/ShinyText.vue';
+import TextType from '../vuebits/TextType/TextType.vue';
 
-const saved = ref(getSavedProducts())
-const categoryList = categories
-  .filter((category) => category.name !== "Semua")
-  .slice(0, 6)
-const latestProducts = computed(() => products.slice(0, 4))
+const saved = ref(getSavedProducts());
+const categoryList = categoryOptions
+  .filter((category) => category.name !== 'Semua')
+  .slice(0, 6);
+const latestProducts = computed(() => products.slice(0, 4));
 const iconMap = {
   Boxes,
   Laptop,
@@ -106,15 +100,16 @@ const iconMap = {
   Router,
   Network,
   Server,
-  Wifi
-}
+  Wifi,
+};
 
 function toggleSave(id) {
   if (saved.value.includes(id)) {
-    saved.value = saved.value.filter((item) => item !== id)
+    saved.value = saved.value.filter((item) => item !== id);
   } else {
-    saved.value.push(id)
+    saved.value.push(id);
   }
-  setSavedProducts(saved.value)
+  setSavedProducts(saved.value);
 }
 </script>
+

src/views/ProductDetailView.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="container-page py-10">
     <RouterLink to="/marketplace" class="mb-6 inline-flex text-sm font-bold text-brand-700">
-      ← Kembali ke Marketplace
+      <- Kembali ke Marketplace
     </RouterLink>
 
     <div v-if="loading" class="card p-10 text-center">
@@ -9,8 +9,23 @@
     </div>
 
     <div v-else-if="product" class="grid gap-8 lg:grid-cols-2">
-      <div class="card overflow-hidden">
-        <img :src="getProductImageUrl(product.image)" :alt="product.title" class="aspect-[4/3] w-full object-cover" />
+      <div class="grid gap-4 sm:grid-cols-[88px_1fr]">
+        <div class="order-2 flex gap-3 overflow-x-auto sm:order-1 sm:grid sm:max-h-[520px] sm:overflow-y-auto">
+          <button
+            v-for="(image, index) in productImages"
+            :key="`${image}-${index}`"
+            type="button"
+            class="h-20 w-20 shrink-0 overflow-hidden rounded-xl border-2 bg-white"
+            :class="selectedImage === image ? 'border-brand-600' : 'border-slate-200'"
+            @click="selectedImage = image"
+          >
+            <img :src="getProductImageUrl(image)" :alt="`${product.title} ${index + 1}`" class="h-full w-full object-cover" />
+          </button>
+        </div>
+
+        <div class="card order-1 overflow-hidden sm:order-2">
+          <img :src="getProductImageUrl(selectedImage)" :alt="product.title" class="aspect-[4/3] w-full object-cover" />
+        </div>
       </div>
 
       <div>
@@ -45,7 +60,7 @@
         </div>
 
         <div class="mt-8 flex flex-wrap gap-3">
-          <a :href="waLink" target="_blank" class="btn-WA">Hubungi via WhatsApp</a>
+          <a :href="waLink" target="_blank" class="btn-primary">Hubungi via WhatsApp</a>
           <button class="btn-secondary" @click="toggleSave">
             {{ saved ? "Hapus dari Tersimpan" : "Simpan Barang" }}
           </button>
@@ -61,7 +76,7 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from "vue"
+import { computed, onMounted, ref, watch } from "vue"
 import { useRoute } from "vue-router"
 import { products as defaultProducts } from "../data/products"
 import { fetchProduct, formatRupiah, getProductImageUrl, getSavedProducts, setSavedProducts } from "../utils"
@@ -70,6 +85,23 @@ const route = useRoute()
 const id = Number(route.params.id)
 const product = ref(null)
 const loading = ref(true)
+const selectedImage = ref("")
+
+const productImages = computed(() => {
+  if (!product.value) return []
+  const images = product.value.images?.length ? product.value.images : [product.value.image]
+  return [...new Set(images.filter(Boolean))]
+})
+
+watch(
+  productImages,
+  (images) => {
+    if (!images.includes(selectedImage.value)) {
+      selectedImage.value = images[0] || ""
+    }
+  },
+  { immediate: true }
+)
 
 const savedIds = ref(getSavedProducts())
 const saved = computed(() => savedIds.value.includes(id))
@@ -95,7 +127,8 @@ async function loadProduct() {
     const data = await fetchProduct(id)
     product.value = data.product
   } catch {
-    product.value = defaultProducts.find((item) => Number(item.id) === id) || null
+    const fallbackProduct = defaultProducts.find((item) => Number(item.id) === id) || null
+    product.value = fallbackProduct ? { ...fallbackProduct, images: [fallbackProduct.image] } : null
   } finally {
     loading.value = false
   }

src/views/SellProductView.vue

@@ -2,7 +2,7 @@
   <section class="container-page py-10">
     <div class="mb-8">
       <h1 class="text-3xl font-extrabold">Jual Barang</h1>
-      <p class="mt-2 text-slate-600">Posting barang anda ke marketplace dengan foto produk asli.</p>
+      <p class="mt-2 text-slate-600">Posting barang ke marketplace dengan beberapa foto asli dari perangkatmu.</p>
     </div>
 
     <div class="grid gap-8 lg:grid-cols-[1fr_360px]">
@@ -19,7 +19,7 @@
         <div class="grid gap-5 sm:grid-cols-2">
           <div>
             <label class="label">Kategori</label>
-            <select v-model="form.category" class="input mt-2">
+            <select v-model="form.category" class="input mt-2" required>
               <option v-for="cat in realCategories" :key="cat" :value="cat">{{ cat }}</option>
             </select>
           </div>
@@ -58,14 +58,37 @@
 
         <div>
           <label class="label">Foto Barang</label>
-          <input type="file" accept="image/*" class="input mt-2" required @change="handleImageChange" />
-          <img v-if="previewUrl" :src="previewUrl" alt="Preview foto barang" class="mt-4 aspect-[4/3] w-full max-w-sm rounded-xl object-cover" />
-          <p class="mt-2 text-xs text-slate-500">Upload JPG, PNG, atau WebP. Maksimal 3MB.</p>
+          <input
+            ref="fileInput"
+            type="file"
+            accept="image/*"
+            multiple
+            class="input mt-2"
+            @change="handleImageChange"
+          />
+
+          <div v-if="selectedImages.length" class="mt-3 flex items-center justify-between gap-3 rounded-xl bg-brand-50 px-4 py-3 text-sm font-bold text-brand-700">
+            <span>{{ selectedImages.length }} foto dipilih</span>
+            <button type="button" class="text-red-700" @click="clearImages">Hapus semua</button>
+          </div>
+
+          <div v-if="previewUrls.length" class="mt-4 grid grid-cols-2 gap-3 sm:grid-cols-3">
+            <div v-for="(preview, index) in previewUrls" :key="preview.url" class="overflow-hidden rounded-xl border border-slate-200">
+              <img :src="preview.url" :alt="`Preview foto barang ${index + 1}`" class="aspect-[4/3] w-full object-cover" />
+              <button type="button" class="w-full bg-red-50 px-3 py-2 text-xs font-bold text-red-700" @click="removeImage(index)">
+                Hapus foto
+              </button>
+            </div>
+          </div>
+
+          <p class="mt-2 text-xs text-slate-500">
+            Maksimal 6 foto, 10 MB per foto. Kamu boleh pilih beberapa sekaligus atau tambah satu per satu.
+          </p>
         </div>
 
         <div>
           <label class="label">Deskripsi</label>
-          <textarea v-model="form.description" class="input mt-2 min-h-32" placeholder="Deskripsikan kondisi barang anda..." required></textarea>
+          <textarea v-model="form.description" class="input mt-2 min-h-32" placeholder="Jelaskan kondisi barang..." required></textarea>
         </div>
 
         <button class="btn-primary w-full" :disabled="loading">
@@ -76,10 +99,10 @@
       <div class="card h-fit p-6">
         <h2 class="text-lg font-extrabold">Tips Isi Produk</h2>
         <ul class="mt-4 grid gap-3 text-sm leading-6 text-slate-600">
-          <li>• Pakai judul yang jelas, misal “MikroTik RB941 Bekas Normal”.</li>
-          <li>• Jelaskan minus barang kalau ada.</li>
-          <li>• Pakai nomor WhatsApp aktif.</li>
-          <li>• Pakai foto yang terang dan jelas.</li>
+          <li>- Pakai judul yang jelas, misal "MikroTik RB941 Bekas Normal".</li>
+          <li>- Jelaskan minus barang kalau ada.</li>
+          <li>- Pakai nomor WhatsApp aktif.</li>
+          <li>- Upload beberapa foto dari sisi yang berbeda.</li>
         </ul>
       </div>
     </div>
@@ -94,6 +117,10 @@ import { createProduct, getCurrentUser } from "../utils"
 
 const router = useRouter()
 const realCategories = computed(() => categories.filter((cat) => cat !== "Semua"))
+const fileInput = ref(null)
+const MAX_IMAGES = 6
+const MAX_IMAGE_SIZE_MB = 10
+const MAX_IMAGE_SIZE = MAX_IMAGE_SIZE_MB * 1024 * 1024
 
 const form = reactive({
   title: "",
@@ -105,8 +132,8 @@ const form = reactive({
   whatsapp: "",
   description: ""
 })
-const selectedImage = ref(null)
-const previewUrl = ref("")
+const selectedImages = ref([])
+const previewUrls = ref([])
 const loading = ref(false)
 const errorMessage = ref("")
 
@@ -116,15 +143,55 @@ if (currentUser) {
   form.whatsapp = currentUser.whatsapp || ""
 }
 
+function imageKey(file) {
+  return `${file.name}-${file.size}-${file.lastModified}`
+}
+
+function rebuildPreviews() {
+  previewUrls.value.forEach((preview) => URL.revokeObjectURL(preview.url))
+  previewUrls.value = selectedImages.value.map((file) => ({
+    key: imageKey(file),
+    url: URL.createObjectURL(file)
+  }))
+}
+
 function handleImageChange(event) {
-  const file = event.target.files?.[0]
-  selectedImage.value = file || null
-  previewUrl.value = file ? URL.createObjectURL(file) : ""
+  const incomingFiles = Array.from(event.target.files || [])
+  const oversizedFile = incomingFiles.find((file) => file.size > MAX_IMAGE_SIZE)
+
+  if (oversizedFile) {
+    errorMessage.value = `Foto "${oversizedFile.name}" lebih dari ${MAX_IMAGE_SIZE_MB} MB. Pilih foto yang lebih kecil.`
+    event.target.value = ""
+    return
+  }
+
+  const merged = [...selectedImages.value]
+  incomingFiles.forEach((file) => {
+    if (!merged.some((item) => imageKey(item) === imageKey(file)) && merged.length < MAX_IMAGES) {
+      merged.push(file)
+    }
+  })
+
+  selectedImages.value = merged
+  rebuildPreviews()
+  errorMessage.value = ""
+  event.target.value = ""
+}
+
+function removeImage(index) {
+  selectedImages.value = selectedImages.value.filter((_, itemIndex) => itemIndex !== index)
+  rebuildPreviews()
+}
+
+function clearImages() {
+  selectedImages.value = []
+  rebuildPreviews()
+  if (fileInput.value) fileInput.value.value = ""
 }
 
 async function submitProduct() {
-  if (!selectedImage.value) {
-    errorMessage.value = "Foto barang wajib diupload."
+  if (!selectedImages.value.length) {
+    errorMessage.value = "Minimal 1 foto barang wajib diupload."
     return
   }
 
@@ -135,7 +202,9 @@ async function submitProduct() {
   Object.entries(form).forEach(([key, value]) => {
     payload.append(key, value)
   })
-  payload.append("image", selectedImage.value)
+  selectedImages.value.forEach((image) => {
+    payload.append("images", image)
+  })
 
   try {
     await createProduct(payload)