Update icon and feature graphic to white minimal theme

- White background with dark slate devices (#1e293b)
- Cyan signal bars (#0ea5e9)
- Simplified clean design: phone → signal → laptop

assets/feature-graphic.svg

@@ -1,131 +1,65 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 500">
-  <defs>
-    <linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#0f172a"/>
-      <stop offset="100%" style="stop-color:#1e293b"/>
-    </linearGradient>
-  </defs>
+  <rect width="1024" height="500" fill="#ffffff"/>
 
-  <!-- Background -->
-  <rect width="1024" height="500" fill="url(#bgGrad)"/>
-
-  <!-- Grid pattern -->
-  <g stroke="#334155" stroke-width="1" opacity="0.3">
-    <line x1="0" y1="100" x2="1024" y2="100"/>
-    <line x1="0" y1="200" x2="1024" y2="200"/>
-    <line x1="0" y1="300" x2="1024" y2="300"/>
-    <line x1="0" y1="400" x2="1024" y2="400"/>
-    <line x1="200" y1="0" x2="200" y2="500"/>
-    <line x1="400" y1="0" x2="400" y2="500"/>
-    <line x1="600" y1="0" x2="600" y2="500"/>
-    <line x1="800" y1="0" x2="800" y2="500"/>
+  <!-- Subtle grid -->
+  <g stroke="#e2e8f0" stroke-width="1">
+    <line x1="0" y1="125" x2="1024" y2="125"/>
+    <line x1="0" y1="250" x2="1024" y2="250"/>
+    <line x1="0" y1="375" x2="1024" y2="375"/>
   </g>
 
-  <!-- Left side network visualization -->
-  <g transform="translate(120, 250)">
-    <!-- Connection lines -->
-    <g stroke="#0ea5e9" stroke-width="3" opacity="0.6">
-      <line x1="0" y1="0" x2="-60" y2="-80"/>
-      <line x1="0" y1="0" x2="-80" y2="0"/>
-      <line x1="0" y1="0" x2="-60" y2="80"/>
-      <line x1="0" y1="0" x2="80" y2="0"/>
-    </g>
-
-    <!-- Data pulses -->
-    <g fill="#22d3ee">
-      <circle cx="-30" cy="-40" r="3"/>
-      <circle cx="-40" cy="0" r="3"/>
-      <circle cx="-30" cy="40" r="3"/>
-      <circle cx="40" cy="0" r="3"/>
-    </g>
-
-    <!-- Outer nodes -->
-    <g fill="#0f172a" stroke="#0ea5e9" stroke-width="2">
-      <circle cx="-60" cy="-80" r="16"/>
-      <circle cx="-80" cy="0" r="16"/>
-      <circle cx="-60" cy="80" r="16"/>
-    </g>
-    <g fill="#22d3ee">
-      <circle cx="-60" cy="-80" r="6"/>
-      <circle cx="-80" cy="0" r="6"/>
-      <circle cx="-60" cy="80" r="6"/>
-    </g>
-
-    <!-- Center hub -->
-    <circle cx="0" cy="0" r="36" fill="#0f172a" stroke="#0ea5e9" stroke-width="3"/>
-    <circle cx="0" cy="0" r="26" fill="#0ea5e9"/>
-
-    <!-- Signal bars -->
-    <g fill="#0f172a">
-      <rect x="-14" y="4" width="6" height="12" rx="1"/>
-      <rect x="-5" cy="0" y="-2" width="6" height="18" rx="1"/>
-      <rect x="4" y="-8" width="6" height="24" rx="1"/>
-    </g>
+  <!-- Phone - left -->
+  <g transform="translate(100, 160)">
+    <rect width="70" height="130" rx="12" fill="#1e293b"/>
+    <rect x="6" y="10" width="58" height="95" rx="4" fill="#ffffff"/>
+    <rect x="22" y="112" width="26" height="5" rx="2" fill="#ffffff"/>
   </g>
 
-  <!-- Flowing data lines to right -->
-  <g stroke="#0ea5e9" stroke-width="2" fill="none" opacity="0.5">
-    <path d="M 200 250 Q 300 200, 400 250 T 600 250"/>
-    <path d="M 200 250 Q 300 300, 400 250 T 600 250"/>
+  <!-- Signal bars -->
+  <g fill="#0ea5e9" transform="translate(200, 200)">
+    <rect x="0" y="55" width="16" height="35" rx="3"/>
+    <rect x="24" y="38" width="16" height="52" rx="3"/>
+    <rect x="48" y="18" width="16" height="72" rx="3"/>
   </g>
-  <g fill="#22d3ee">
-    <circle cx="280" cy="220" r="4"/>
-    <circle cx="350" cy="260" r="4"/>
-    <circle cx="450" cy="240" r="4"/>
-    <circle cx="520" cy="255" r="4"/>
+
+  <!-- Laptop - center-left -->
+  <g transform="translate(290, 190)">
+    <rect width="100" height="70" rx="8" fill="#1e293b"/>
+    <rect x="6" y="6" width="88" height="52" rx="3" fill="#ffffff"/>
+    <rect x="-8" y="72" width="116" height="10" rx="3" fill="#1e293b"/>
   </g>
 
   <!-- App name -->
-  <text x="500" y="180" font-family="system-ui, -apple-system, sans-serif" font-size="64" font-weight="700" fill="#ffffff">Tether API</text>
+  <text x="480" y="220" font-family="system-ui, -apple-system, sans-serif" font-size="56" font-weight="700" fill="#1e293b">Tether API</text>
 
   <!-- Tagline -->
-  <text x="500" y="240" font-family="system-ui, -apple-system, sans-serif" font-size="24" font-weight="400" fill="#94a3b8">Phone status on your desktop</text>
+  <text x="480" y="270" font-family="system-ui, -apple-system, sans-serif" font-size="22" fill="#64748b">Phone status on your desktop</text>
 
   <!-- Feature chips -->
-  <g font-family="system-ui, sans-serif" font-size="14" fill="#e2e8f0">
-    <g transform="translate(500, 290)">
-      <rect x="0" y="0" width="120" height="32" rx="16" fill="#0ea5e9" opacity="0.2" stroke="#0ea5e9" stroke-width="1"/>
-      <text x="60" y="21" text-anchor="middle">5G / LTE / WiFi</text>
+  <g font-family="system-ui, sans-serif" font-size="14" fill="#1e293b">
+    <g transform="translate(480, 310)">
+      <rect width="110" height="32" rx="16" fill="#f1f5f9" stroke="#e2e8f0"/>
+      <text x="55" y="21" text-anchor="middle">5G / LTE / WiFi</text>
     </g>
-    <g transform="translate(635, 290)">
-      <rect x="0" y="0" width="100" height="32" rx="16" fill="#0ea5e9" opacity="0.2" stroke="#0ea5e9" stroke-width="1"/>
-      <text x="50" y="21" text-anchor="middle">REST API</text>
+    <g transform="translate(600, 310)">
+      <rect width="85" height="32" rx="16" fill="#f1f5f9" stroke="#e2e8f0"/>
+      <text x="42" y="21" text-anchor="middle">REST API</text>
     </g>
-    <g transform="translate(750, 290)">
-      <rect x="0" y="0" width="90" height="32" rx="16" fill="#0ea5e9" opacity="0.2" stroke="#0ea5e9" stroke-width="1"/>
-      <text x="45" y="21" text-anchor="middle">Waybar</text>
+    <g transform="translate(695, 310)">
+      <rect width="75" height="32" rx="16" fill="#f1f5f9" stroke="#e2e8f0"/>
+      <text x="37" y="21" text-anchor="middle">Waybar</text>
     </g>
-    <g transform="translate(855, 290)">
-      <rect x="0" y="0" width="100" height="32" rx="16" fill="#0ea5e9" opacity="0.2" stroke="#0ea5e9" stroke-width="1"/>
-      <text x="50" y="21" text-anchor="middle">Auto-start</text>
+    <g transform="translate(780, 310)">
+      <rect width="95" height="32" rx="16" fill="#f1f5f9" stroke="#e2e8f0"/>
+      <text x="47" y="21" text-anchor="middle">Auto-start</text>
     </g>
   </g>
 
-  <!-- Right side: laptop illustration -->
-  <g transform="translate(780, 380)">
-    <!-- Laptop -->
-    <rect x="0" y="50" width="160" height="8" rx="2" fill="#334155"/>
-    <rect x="15" y="-20" width="130" height="75" rx="4" fill="#1e293b" stroke="#334155" stroke-width="2"/>
-    <rect x="22" y="-13" width="116" height="60" rx="2" fill="#0f172a"/>
-
-    <!-- Terminal content -->
-    <text x="28" y="5" font-family="monospace" font-size="10" fill="#22d3ee">$ curl /status</text>
-    <text x="28" y="18" font-family="monospace" font-size="9" fill="#94a3b8">{"type":"LTE"}</text>
-    <text x="28" y="30" font-family="monospace" font-size="9" fill="#94a3b8">{"signal":3}</text>
-    <text x="28" y="42" font-family="monospace" font-size="9" fill="#94a3b8">{"battery":87}</text>
-  </g>
-
-  <!-- Decorative corner nodes -->
-  <g fill="#0ea5e9" opacity="0.3">
-    <circle cx="50" cy="50" r="8"/>
-    <circle cx="974" cy="50" r="8"/>
-    <circle cx="50" cy="450" r="8"/>
-    <circle cx="974" cy="450" r="8"/>
-  </g>
-  <g stroke="#0ea5e9" stroke-width="1" fill="none" opacity="0.2">
-    <line x1="50" y1="50" x2="120" y2="50"/>
-    <line x1="50" y1="50" x2="50" y2="120"/>
-    <line x1="974" y1="50" x2="904" y2="50"/>
-    <line x1="974" y1="50" x2="974" y2="120"/>
+  <!-- Code snippet -->
+  <g transform="translate(480, 370)">
+    <rect width="420" height="80" rx="8" fill="#1e293b"/>
+    <text x="16" y="28" font-family="monospace" font-size="13" fill="#0ea5e9">$ curl http://phone:8765/status</text>
+    <text x="16" y="50" font-family="monospace" font-size="12" fill="#94a3b8">{"type":"LTE","signal":3,"battery":87}</text>
+    <text x="16" y="68" font-family="monospace" font-size="12" fill="#22c55e">200 OK</text>
   </g>
 </svg>

assets/icon.svg

@@ -1,85 +1,20 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-  <defs>
-    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#0f172a"/>
-      <stop offset="100%" style="stop-color:#1e293b"/>
-    </linearGradient>
-  </defs>
+  <rect width="512" height="512" rx="108" fill="#ffffff"/>
 
-  <!-- Dark background -->
-  <rect width="512" height="512" rx="96" fill="url(#bg)"/>
+  <!-- Phone -->
+  <rect x="72" y="176" width="88" height="160" rx="16" fill="#1e293b"/>
+  <rect x="82" y="190" width="68" height="116" rx="6" fill="#ffffff"/>
+  <rect x="100" y="316" width="32" height="6" rx="3" fill="#ffffff"/>
 
-  <!-- Circuit traces -->
-  <g stroke="#0ea5e9" stroke-width="3" fill="none" opacity="0.4">
-    <path d="M 80 256 H 140"/>
-    <path d="M 372 256 H 432"/>
-    <path d="M 256 80 V 140"/>
-    <path d="M 256 372 V 432"/>
-    <path d="M 140 180 L 180 140"/>
-    <path d="M 332 140 L 372 180"/>
-    <path d="M 140 332 L 180 372"/>
-    <path d="M 332 372 L 372 332"/>
+  <!-- Signal bars -->
+  <g fill="#0ea5e9">
+    <rect x="192" y="270" width="20" height="44" rx="4"/>
+    <rect x="224" y="246" width="20" height="68" rx="4"/>
+    <rect x="256" y="222" width="20" height="92" rx="4"/>
   </g>
 
-  <!-- Main connection lines -->
-  <g stroke="#0ea5e9" stroke-width="4" fill="none">
-    <!-- Center to outer nodes -->
-    <line x1="256" y1="256" x2="160" y2="160"/>
-    <line x1="256" y1="256" x2="352" y2="160"/>
-    <line x1="256" y1="256" x2="160" y2="352"/>
-    <line x1="256" y1="256" x2="352" y2="352"/>
-    <!-- Horizontal and vertical -->
-    <line x1="256" y1="256" x2="140" y2="256"/>
-    <line x1="256" y1="256" x2="372" y2="256"/>
-    <line x1="256" y1="256" x2="256" y2="140"/>
-    <line x1="256" y1="256" x2="256" y2="372"/>
-  </g>
-
-  <!-- Data flow dots (animated feel) -->
-  <g fill="#22d3ee">
-    <circle cx="190" cy="190" r="4"/>
-    <circle cx="322" cy="190" r="4"/>
-    <circle cx="190" cy="322" r="4"/>
-    <circle cx="322" cy="322" r="4"/>
-    <circle cx="180" cy="256" r="3"/>
-    <circle cx="332" cy="256" r="3"/>
-    <circle cx="256" cy="180" r="3"/>
-    <circle cx="256" cy="332" r="3"/>
-  </g>
-
-  <!-- Outer nodes -->
-  <g fill="#0f172a" stroke="#0ea5e9" stroke-width="3">
-    <circle cx="160" cy="160" r="24"/>
-    <circle cx="352" cy="160" r="24"/>
-    <circle cx="160" cy="352" r="24"/>
-    <circle cx="352" cy="352" r="24"/>
-    <circle cx="140" cy="256" r="20"/>
-    <circle cx="372" cy="256" r="20"/>
-    <circle cx="256" cy="140" r="20"/>
-    <circle cx="256" cy="372" r="20"/>
-  </g>
-
-  <!-- Inner node fills -->
-  <g fill="#22d3ee">
-    <circle cx="160" cy="160" r="10"/>
-    <circle cx="352" cy="160" r="10"/>
-    <circle cx="160" cy="352" r="10"/>
-    <circle cx="352" cy="352" r="10"/>
-    <circle cx="140" cy="256" r="8"/>
-    <circle cx="372" cy="256" r="8"/>
-    <circle cx="256" cy="140" r="8"/>
-    <circle cx="256" cy="372" r="8"/>
-  </g>
-
-  <!-- Center hub (phone) -->
-  <circle cx="256" cy="256" r="56" fill="#0f172a" stroke="#0ea5e9" stroke-width="4"/>
-  <circle cx="256" cy="256" r="40" fill="#0ea5e9"/>
-
-  <!-- Signal bars in center -->
-  <g fill="#0f172a">
-    <rect x="236" y="268" width="8" height="16" rx="2"/>
-    <rect x="248" y="258" width="8" height="26" rx="2"/>
-    <rect x="260" y="248" width="8" height="36" rx="2"/>
-    <rect x="272" y="238" width="8" height="46" rx="2"/>
-  </g>
+  <!-- Laptop -->
+  <rect x="312" y="196" width="128" height="88" rx="12" fill="#1e293b"/>
+  <rect x="322" y="206" width="108" height="64" rx="4" fill="#ffffff"/>
+  <rect x="300" y="288" width="152" height="14" rx="4" fill="#1e293b"/>
 </svg>