fix: resolve broken images on deployment by importing assets from src/assets

frontend/src/App.jsx

@@ -7,6 +7,7 @@ import { SearchModal, ImageViewer, SettingsModal } from './components/Modals'
 import { Menu, MoreHorizontal } from 'lucide-react'
 import './App.css'
 import GuideTour from './components/GuideTour'
+import defaultAvatar from './assets/hnam.jpeg'
 
 const API_BASE = '/api'
 
@@ -36,7 +37,7 @@ function App() {
         return saved ? JSON.parse(saved) : {
             name: 'Guest',
             email: 'guest@example.com',
-            avatar: '/hnam.jpeg'
+            avatar: defaultAvatar
         }
     })
 

frontend/src/components/Sidebar.jsx

@@ -18,6 +18,7 @@ import {
     PanelLeft,
     PanelRight
 } from 'lucide-react'
+import pochiLogo from '../assets/pochi.jpeg'
 
 const Sidebar = ({
     isOpen,
@@ -210,7 +211,7 @@ const Sidebar = ({
                 <div className="sidebar-top-nav">
                     <div className="nav-header">
                         <div className="sidebar-brand">
-                            <img src="/pochi.jpeg" alt="Pochi Logo" className="brand-logo" id="tour-logo" />
+                            <img src={pochiLogo} alt="Pochi Logo" className="brand-logo" id="tour-logo" />
                         </div>
                         {isOpen && (
                             <button