Adding polish

packages/console/app/src/asset/lander/brand-assets-dark.svg

@@ -0,0 +1,10 @@
+<svg width="22" height="26" viewBox="0 0 22 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 7H7V19H15V7ZM19 23H3V3H19V23Z" fill="url(#paint0_linear_1311_86681)" stroke="#F1ECEC"/>
+<path d="M3 0V26M19 0V26M15 0V26M7 0V26M0 3H22M0 7H22M0 19H22M0 23H22" stroke="#4B4646" stroke-opacity="0.4"/>
+<defs>
+<linearGradient id="paint0_linear_1311_86681" x1="11" y1="3" x2="11" y2="23" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1B1818"/>
+<stop offset="1" stop-color="#2D2828"/>
+</linearGradient>
+</defs>
+</svg>

packages/console/app/src/asset/lander/brand-assets-light.svg

@@ -0,0 +1,10 @@
+<svg width="22" height="26" viewBox="0 0 22 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 7H7V19H15V7ZM19 23H3V3H19V23Z" fill="url(#paint0_linear_1311_86671)" stroke="#8E8B8B"/>
+<path d="M3 0V26M19 0V26M15 0V26M7 0V26M0 3H22M0 7H22M0 19H22M0 23H22" stroke="#110000" stroke-opacity="0.121569"/>
+<defs>
+<linearGradient id="paint0_linear_1311_86671" x1="11" y1="3" x2="11" y2="23" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F9F8F8"/>
+<stop offset="1" stop-color="#E9E8E8"/>
+</linearGradient>
+</defs>
+</svg>

packages/console/app/src/asset/lander/logo-dark.svg

@@ -0,0 +1,11 @@
+<svg width="22" height="26" viewBox="0 0 22 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1311_86675)">
+<path d="M15 19H7V11H15V19Z" fill="#4B4646"/>
+<path d="M15 7H7V19H15V7ZM19 23H3V3H19V23Z" fill="#F1ECEC"/>
+</g>
+<defs>
+<clipPath id="clip0_1311_86675">
+<rect width="16" height="20" fill="white" transform="translate(3 3)"/>
+</clipPath>
+</defs>
+</svg>

packages/console/app/src/asset/lander/logo-light.svg

@@ -0,0 +1,11 @@
+<svg width="22" height="26" viewBox="0 0 22 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1311_86665)">
+<path d="M15 19H7V11H15V19Z" fill="#BCBBBB"/>
+<path d="M15 7H7V19H15V7ZM19 23H3V3H19V23Z" fill="#211E1E"/>
+</g>
+<defs>
+<clipPath id="clip0_1311_86665">
+<rect width="16" height="20" fill="white" transform="translate(3 3)"/>
+</clipPath>
+</defs>
+</svg>

packages/console/app/src/asset/lander/wordmark-dark.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="26" viewBox="0 0 22 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.33203 7.99967V6.33301H10.9987M17.6654 7.99967V6.33301H10.9987M10.9987 6.33301V19.6663M10.9987 19.6663H9.33203M10.9987 19.6663H12.6654" stroke="#F1ECEC" stroke-width="2" stroke-linecap="square"/>
+</svg>

packages/console/app/src/asset/lander/wordmark-light.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="26" viewBox="0 0 22 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.33203 7.99967V6.33301H10.9987M17.6654 7.99967V6.33301H10.9987M10.9987 6.33301V19.6663M10.9987 19.6663H9.33203M10.9987 19.6663H12.6654" stroke="black" stroke-width="2" stroke-linecap="square"/>
+</svg>

packages/console/app/src/component/header-context-menu.css

@@ -2,33 +2,49 @@
   position: fixed;
   z-index: 1000;
   min-width: 160px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--border-radius-sm);
-  background-color: var(--color-bg);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  padding: var(--space-1);
+  border-radius: 8px;
+  background-color: var(--color-background);
+  box-shadow: 0 0 0 1px rgba(19, 16, 16, 0.08), 0 6px 8px -4px rgba(19, 16, 16, 0.12), 0 4px 3px -2px rgba(19, 16, 16, 0.12), 0 1px 2px -1px rgba(19, 16, 16, 0.12);
+  padding: 6px;
 
   @media (prefers-color-scheme: dark) {
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 0 0 1px rgba(247, 237, 237, 0.1);
   }
 }
 
 .context-menu-item {
-  display: block;
+  display: flex;
+  gap: 12px;
   width: 100%;
-  padding: var(--space-2-5) var(--space-3);
-  border: none;
+  padding: 8px 16px 8px 8px;
+  font-weight: 500;
+  cursor: pointer;
   background: none;
+  border: none;
+  align-items: center;
   color: var(--color-text);
   font-size: var(--font-size-sm);
-  font-family: var(--font-sans);
   text-align: left;
   cursor: pointer;
-  border-radius: var(--border-radius-sm);
-  transition: background-color 0.15s ease;
+  border-radius: 2px;
+  transition: background-color 0.2s ease;
+
+  [data-slot="copy dark"] {
+    display: none;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    [data-slot="copy light"] {
+      display: none;
+    }
+    [data-slot="copy dark"] {
+      display: block;
+    }
+  }
 
   &:hover {
-    background-color: var(--color-bg-surface);
+    background-color: var(--color-background-weak-hover);
+    color: var(--color-text-strong);
   }
 }
 

packages/console/app/src/component/header.tsx

@@ -1,5 +1,11 @@
 import logoLight from "../asset/logo-ornate-light.svg"
 import logoDark from "../asset/logo-ornate-dark.svg"
+import copyLogoLight from "../asset/lander/logo-light.svg"
+import copyLogoDark from "../asset/lander/logo-dark.svg"
+import copyWordmarkLight from "../asset/lander/wordmark-light.svg"
+import copyWordmarkDark from "../asset/lander/wordmark-dark.svg"
+import copyBrandAssetsLight from "../asset/lander/brand-assets-light.svg"
+import copyBrandAssetsDark from "../asset/lander/brand-assets-dark.svg"
 import { A, createAsync } from "@solidjs/router"
 import { createMemo, Match, Show, Switch } from "solid-js"
 import { createStore } from "solid-js/store"
@@ -50,6 +56,53 @@ export function Header(props: { zen?: boolean }) {
     setStore("contextMenuOpen", true)
   }
 
+  const copyWordmarkToClipboard = async () => {
+    try {
+      const wordmarkSvg = `<svg width="234" height="42" viewBox="0 0 234 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1306_86249)">
+<path d="M18 30H6V18H18V30Z" fill="#CFCECD"/>
+<path d="M18 12H6V30H18V12ZM24 36H0V6H24V36Z" fill="#656363"/>
+<path d="M48 30H36V18H48V30Z" fill="#CFCECD"/>
+<path d="M36 30H48V12H36V30ZM54 36H36V42H30V6H54V36Z" fill="#656363"/>
+<path d="M84 24V30H66V24H84Z" fill="#CFCECD"/>
+<path d="M84 24H66V30H84V36H60V6H84V24ZM66 18H78V12H66V18Z" fill="#656363"/>
+<path d="M108 36H96V18H108V36Z" fill="#CFCECD"/>
+<path d="M108 12H96V36H90V6H108V12ZM114 36H108V12H114V36Z" fill="#656363"/>
+<path d="M144 30H126V18H144V30Z" fill="#CFCECD"/>
+<path d="M144 12H126V30H144V36H120V6H144V12Z" fill="#211E1E"/>
+<path d="M168 30H156V18H168V30Z" fill="#CFCECD"/>
+<path d="M168 12H156V30H168V12ZM174 36H150V6H174V36Z" fill="#211E1E"/>
+<path d="M198 30H186V18H198V30Z" fill="#CFCECD"/>
+<path d="M198 12H186V30H198V12ZM204 36H180V6H198V0H204V36Z" fill="#211E1E"/>
+<path d="M234 24V30H216V24H234Z" fill="#CFCECD"/>
+<path d="M216 12V18H228V12H216ZM234 24H216V30H234V36H210V6H234V24Z" fill="#211E1E"/>
+</g>
+<defs>
+<clipPath id="clip0_1306_86249">
+<rect width="234" height="42" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+`
+      await navigator.clipboard.writeText(wordmarkSvg)
+    } catch (err) {
+      console.error("Failed to copy wordmark to clipboard:", err)
+    }
+  }
+
+  const copyLogoToClipboard = async () => {
+    try {
+      const logoSvg = `<svg width="80" height="100" viewBox="0 0 80 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M60 80H20V40H60V80Z" fill="#BCBBBB"/>
+<path d="M60 20H20V80H60V20ZM80 100H0V0H80V100Z" fill="#211E1E"/>
+</svg>
+`
+      await navigator.clipboard.writeText(logoSvg)
+    } catch (err) {
+      console.error("Failed to copy logo to clipboard:", err)
+    }
+  }
+
   return (
     <section data-component="top">
       <div onContextMenu={handleLogoContextMenu}>
@@ -64,20 +117,26 @@ export function Header(props: { zen?: boolean }) {
           class="context-menu"
           style={`left: ${store.contextMenuPosition.x}px; top: ${store.contextMenuPosition.y}px;`}
         >
-          <button
-            className="context-menu-item"
-            onClick={() => window.open("https://github.com/sst/opencode", "_blank")}
-          >
+          <button class="context-menu-item" onClick={copyLogoToClipboard}>
+            <img data-slot="copy light" src={copyLogoLight}
+                 alt="Logo"/>
+            <img data-slot="copy dark" src={copyLogoDark}
+                 alt="Logo"/>
             Copy logo as SVG
           </button>
-          <button
-            className="context-menu-item"
-            onClick={() => window.open("https://github.com/sst/opencode", "_blank")}
-          >
+          <button class="context-menu-item" onClick={copyWordmarkToClipboard}>
+            <img data-slot="copy light" src={copyWordmarkLight}
+                 alt="Wordmark"/>
+            <img data-slot="copy dark" src={copyWordmarkDark}
+                 alt="Wordmark"/>
             Copy wordmark as SVG
           </button>
-          <button className="context-menu-item"
+          <button class="context-menu-item"
                   onClick={() => (window.location.href = "/brand")}>
+            <img data-slot="copy light" src={copyBrandAssetsLight}
+                 alt="Brand Assets"/>
+            <img data-slot="copy dark" src={copyBrandAssetsDark}
+                 alt="Brand Assets"/>
             Brand assets
           </button>
         </div>
@@ -90,7 +149,20 @@ export function Header(props: { zen?: boolean }) {
             </a>
           </li>
           <li>
-            <a href="/brand">Brand assets</a>
+            <a href="/docs">Docs</a>
+          </li>
+          <li>
+            <A href="/enterprise">Enterprise</A>
+          </li>
+          <li>
+            <Switch>
+              <Match when={props.zen}>
+              <a href="/auth">Login</a>
+              </Match>
+              <Match when={!props.zen}>
+                <A href="/zen">Zen</A>
+              </Match>
+            </Switch>
           </li>
         </ul>
       </nav>
@@ -151,7 +223,20 @@ export function Header(props: { zen?: boolean }) {
                   </a>
                 </li>
                 <li>
-                  <a href="/brand">Brand assets</a>
+                  <a href="/docs">Docs</a>
+                </li>
+                <li>
+                  <A href="/enterprise">Enterprise</A>
+                </li>
+                <li>
+                  <Switch>
+                    <Match when={props.zen}>
+                      <a href="/auth">Login</a>
+                    </Match>
+                    <Match when={!props.zen}>
+                      <A href="/zen">Zen</A>
+                    </Match>
+                  </Switch>
                 </li>
               </ul>
             </nav>