ganti hero dan logo

src/components/Navbar.vue

@@ -2,9 +2,7 @@
   <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>
+        <img src="/round-logo-sija.png" alt="SecondTech logo" class="h-9 w-9 rounded-full object-cover" />
         <span class="text-lg font-extrabold tracking-tight">SecondTech</span>
       </RouterLink>
 
@@ -52,7 +50,7 @@
         <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" }}
+          {{ darkMode ? 'Light Mode' : 'Dark Mode' }}
         </button>
 
         <div v-if="currentUser" class="mt-2 grid gap-2">
@@ -74,60 +72,60 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref, watch } from "vue"
-import { useRoute, useRouter } from "vue-router"
-import { Cpu, Menu, Moon, Sun } from "lucide-vue-next"
-import { clearAuth, fetchCurrentUser, getCurrentUser, getToken, setAuth } from "../utils"
+import { computed, onMounted, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { 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 open = ref(false);
+const route = useRoute();
+const router = useRouter();
+const currentUser = ref(getCurrentUser());
+const darkMode = ref(localStorage.getItem('secondtech_theme') === 'dark');
 
-const isSuperadmin = computed(() => currentUser.value?.role === "superadmin")
+const isSuperadmin = computed(() => currentUser.value?.role === 'superadmin');
 
 watch(
   () => route.fullPath,
   () => {
-    currentUser.value = getCurrentUser()
-  }
-)
+    currentUser.value = getCurrentUser();
+  },
+);
 
 function applyTheme() {
-  document.documentElement.classList.toggle("dark", darkMode.value)
-  localStorage.setItem("secondtech_theme", darkMode.value ? "dark" : "light")
+  document.documentElement.classList.toggle('dark', darkMode.value);
+  localStorage.setItem('secondtech_theme', darkMode.value ? 'dark' : 'light');
 }
 
 function toggleTheme() {
-  darkMode.value = !darkMode.value
-  applyTheme()
+  darkMode.value = !darkMode.value;
+  applyTheme();
 }
 
 async function refreshCurrentUser() {
-  if (!getToken()) return
+  if (!getToken()) return;
 
   try {
-    const data = await fetchCurrentUser()
-    setAuth({ token: getToken(), user: data.user })
-    currentUser.value = getCurrentUser()
+    const data = await fetchCurrentUser();
+    setAuth({ token: getToken(), user: data.user });
+    currentUser.value = getCurrentUser();
   } catch {
-    clearAuth()
-    currentUser.value = null
+    clearAuth();
+    currentUser.value = null;
   }
 }
 
 function logout() {
-  clearAuth()
-  currentUser.value = null
-  open.value = false
-  router.push("/login")
+  clearAuth();
+  currentUser.value = null;
+  open.value = false;
+  router.push('/login');
 }
 
 onMounted(() => {
-  applyTheme()
-  refreshCurrentUser()
-})
+  applyTheme();
+  refreshCurrentUser();
+});
 </script>
 
 <style scoped>

src/views/HomeView.vue

@@ -35,7 +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="/public/Hero.jpeg" alt="Tech marketplace" />
       </div>
     </div>
   </section>