ui: add new logo to header

static/readme-logo-dark.svg

@@ -1,4 +1,40 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linejoin="miter">
-  <rect x="6" y="10" width="12" height="12" />
-  <rect x="14" y="6" width="12" height="12" />
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="140" height="140">
+  <defs>
+    <linearGradient id="bg-grad-dark" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#0d0d0d" />
+      <stop offset="100%" stop-color="#1a1a1a" />
+    </linearGradient>
+  </defs>
+  
+  <!-- Background circle with gradient -->
+  <circle cx="70" cy="70" r="60" fill="url(#bg-grad-dark)" />
+  
+  <!-- Stylized play button with Japanese geometric influence -->
+  <path 
+    d="M55 45 L55 95 L95 70 Z" 
+    fill="none" 
+    stroke="#ff6b6b" 
+    stroke-width="4" 
+    stroke-linejoin="miter"
+  />
+  
+  <!-- Outer frame - Japanese inspired rectangle -->
+  <rect 
+    x="30" y="30" 
+    width="80" height="80" 
+    rx="4"
+    fill="none" 
+    stroke="#2d2d2d" 
+    stroke-width="2"
+    stroke-dasharray="8 4"
+  />
+  
+  <!-- Corner accents -->
+  <path d="M35 40 L35 35 L40 35" fill="none" stroke="#ff6b6b" stroke-width="2" stroke-linecap="round" />
+  <path d="M100 35 L105 35 L105 40" fill="none" stroke="#ff6b6b" stroke-width="2" stroke-linecap="round" />
+  <path d="M105 100 L105 105 L100 105" fill="none" stroke="#ff6b6b" stroke-width="2" stroke-linecap="round" />
+  <path d="M40 105 L35 105 L35 100" fill="none" stroke="#ff6b6b" stroke-width="2" stroke-linecap="round" />
+  
+  <!-- Subtle inner glow -->
+  <circle cx="70" cy="70" r="20" fill="none" stroke="#ff6b6b" stroke-width="0.5" opacity="0.3" />
+</svg>

static/readme-logo-light.svg

@@ -1,4 +1,40 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="#000000" stroke-width="2.5" stroke-linejoin="miter">
-  <rect x="6" y="10" width="12" height="12" />
-  <rect x="14" y="6" width="12" height="12" />
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="140" height="140">
+  <defs>
+    <linearGradient id="bg-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#1a1a2e" />
+      <stop offset="100%" stop-color="#16213e" />
+    </linearGradient>
+  </defs>
+  
+  <!-- Background circle with gradient -->
+  <circle cx="70" cy="70" r="60" fill="url(#bg-grad)" />
+  
+  <!-- Stylized play button with Japanese geometric influence -->
+  <path 
+    d="M55 45 L55 95 L95 70 Z" 
+    fill="none" 
+    stroke="#e94560" 
+    stroke-width="4" 
+    stroke-linejoin="miter"
+  />
+  
+  <!-- Outer frame - Japanese inspired rectangle -->
+  <rect 
+    x="30" y="30" 
+    width="80" height="80" 
+    rx="4"
+    fill="none" 
+    stroke="#0f3460" 
+    stroke-width="2"
+    stroke-dasharray="8 4"
+  />
+  
+  <!-- Corner accents -->
+  <path d="M35 40 L35 35 L40 35" fill="none" stroke="#e94560" stroke-width="2" stroke-linecap="round" />
+  <path d="M100 35 L105 35 L105 40" fill="none" stroke="#e94560" stroke-width="2" stroke-linecap="round" />
+  <path d="M105 100 L105 105 L100 105" fill="none" stroke="#e94560" stroke-width="2" stroke-linecap="round" />
+  <path d="M40 105 L35 105 L35 100" fill="none" stroke="#e94560" stroke-width="2" stroke-linecap="round" />
+  
+  <!-- Subtle inner glow -->
+  <circle cx="70" cy="70" r="20" fill="none" stroke="#e94560" stroke-width="0.5" opacity="0.3" />
+</svg>