erase background

static/img/og-image-bg.svg

@@ -0,0 +1,29 @@
+<svg width="1200" height="520" viewBox="0 0 1200 520" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="tui-pages terminal art (chafa source)">
+  <defs>
+    <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
+      <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#27272a" stroke-width="1" stroke-opacity="0.3"/>
+    </pattern>
+  </defs>
+
+  <rect width="1200" height="520" fill="#000000"/>
+  <rect width="1200" height="520" fill="url(#grid)"/>
+
+  <g transform="translate(80, 90)">
+    <text font-family="ui-monospace, 'JetBrains Mono', monospace" font-weight="700" font-size="22" fill="#f4f4f5" x="0" y="0">tui-pages</text>
+    <rect x="140" y="-15" width="4" height="24" fill="#b7410e"/>
+  </g>
+
+  <text font-family="Inter, system-ui, sans-serif" font-weight="700" font-size="84" fill="#f4f4f5" x="80" y="280" letter-spacing="-2">
+    A framework for
+  </text>
+  <text font-family="Inter, system-ui, sans-serif" font-weight="700" font-size="84" fill="#b7410e" x="80" y="370" letter-spacing="-2">
+    building TUIs in Rust.
+  </text>
+
+  <text font-family="Inter, system-ui, sans-serif" font-weight="400" font-size="28" fill="#a1a1aa" x="80" y="430">
+    Pre-programmed focus, keymaps, and page navigation.
+  </text>
+  <text font-family="Inter, system-ui, sans-serif" font-weight="400" font-size="28" fill="#a1a1aa" x="80" y="470">
+    Stop rewriting the same architecture for every project.
+  </text>
+</svg>

static/img/terminal-default.svg

@@ -1,17 +1,17 @@
 <svg viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" class="w-full h-auto" role="img" aria-label="examples/default terminal screenshot">
   <style>
-    .bg { fill: #18181b; }
-    .chrome { fill: #27272a; }
+    .bg { fill: transparent; stroke: #3f3f46; stroke-width: 1; }
+    .chrome { fill: transparent; }
     .dot { fill: #52525b; }
-    .sep { stroke: #27272a; stroke-width: 1; }
-    .tab { fill: #18181b; }
+    .sep { stroke: #3f3f46; stroke-width: 1; }
+    .tab { fill: transparent; }
     text { font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; fill: #f4f4f5; }
     .t-md { font-size: 15px; }
     .t-sm { font-size: 13px; }
     .t-xs { font-size: 11px; }
     .muted { fill: #a1a1aa; }
     .dim { fill: #71717a; }
-    .sel-bg { fill: #b7410e; }
+    .sel-bg { fill: #b7410e; fill-opacity: 0.85; }
     .sel-fg { fill: #fff5f0; }
   </style>