add this image as the website logo

components/header.js

@@ -22,11 +22,10 @@ class CustomHeader extends HTMLElement {
           justify-content: space-between;
           align-items: center;
         }
-        
         .logo {
           display: flex;
           align-items: center;
-          gap: 0.5rem;
+          gap: 0.75rem;
           font-size: 1.5rem;
           font-weight: bold;
           color: white;
@@ -34,7 +33,12 @@ class CustomHeader extends HTMLElement {
           transition: color 0.3s;
         }
         
-        .logo:hover {
+        .logo-img {
+          width: 32px;
+          height: 32px;
+          border-radius: 6px;
+        }
+.logo:hover {
           color: #ef4444;
         }
         
@@ -105,15 +109,14 @@ class CustomHeader extends HTMLElement {
           }
         }
       </style>
-      
       <header>
         <nav>
           <a href="/" class="logo">
+            <img src="/public/logo.png" alt="Wear.Fun Logo" class="logo-img">
             <span>Wear.Fun</span>
             <span style="color: #ef4444;">🚀</span>
           </a>
-          
-          <ul class="nav-links" id="navLinks">
+<ul class="nav-links" id="navLinks">
             <li><a href="/" class="nav-link">Home</a></li>
             <li><a href="/meme.html" class="nav-link">Create</a></li>
             <li><a href="/shop.html" class="nav-link">Shop</a></li>