wip: hero and nav updates

8 files changed, 83 insertions, 4 deletions

diff --git a/packages/console/app/src/component/header.tsx b/packages/console/app/src/component/header.tsx
index 06e710a18..088c737ab 100644
--- a/packages/console/app/src/component/header.tsx
+++ b/packages/console/app/src/component/header.tsx
@@ -34,7 +34,7 @@ const fetchSvgContent = async (svgPath: string): Promise<string> => {
   }
 }
 
-export function Header(props: { zen?: boolean }) {
+export function Header(props: { zen?: boolean; hideGetStarted?: boolean }) {
   const navigate = useNavigate()
   const githubData = createAsync(() => github())
   const starCount = createMemo(() =>
@@ -169,6 +169,13 @@ export function Header(props: { zen?: boolean }) {
               </Match>
             </Switch>
           </li>
+          <Show when={!props.hideGetStarted}>
+            <li>
+              <A href="/download" data-slot="cta-button">
+                Get started
+              </A>
+            </li>
+          </Show>
         </ul>
       </nav>
       <nav data-component="nav-mobile">
@@ -243,6 +250,13 @@ export function Header(props: { zen?: boolean }) {
                     </Match>
                   </Switch>
                 </li>
+                <Show when={!props.hideGetStarted}>
+                  <li>
+                    <A href="/download" data-slot="cta-button">
+                      Get started
+                    </A>
+                  </li>
+                </Show>
               </ul>
             </nav>
           </div>
diff --git a/packages/console/app/src/routes/brand/index.css b/packages/console/app/src/routes/brand/index.css
index 1fc6c17d3..cfec326b2 100644
--- a/packages/console/app/src/routes/brand/index.css
+++ b/packages/console/app/src/routes/brand/index.css
@@ -84,6 +84,7 @@
       ul {
         display: flex;
         justify-content: space-between;
+        align-items: center;
         gap: 48px;
         li {
           display: inline-block;
@@ -98,6 +99,18 @@
             text-underline-offset: 2px;
             text-decoration-thickness: 1px;
           }
+          [data-slot="cta-button"] {
+            background: var(--color-background-strong);
+            color: var(--color-text-inverted);
+            padding: 8px 16px;
+            border-radius: 4px;
+            font-weight: 500;
+            text-decoration: none;
+          }
+          [data-slot="cta-button"]:hover {
+            background: var(--color-background-strong-hover);
+            text-decoration: none;
+          }
         }
       }
 
diff --git a/packages/console/app/src/routes/download/index.css b/packages/console/app/src/routes/download/index.css
index 7894e018b..eb12295c2 100644
--- a/packages/console/app/src/routes/download/index.css
+++ b/packages/console/app/src/routes/download/index.css
@@ -84,6 +84,7 @@
       ul {
         display: flex;
         justify-content: space-between;
+        align-items: center;
         gap: 48px;
         li {
           display: inline-block;
@@ -98,6 +99,18 @@
             text-underline-offset: 2px;
             text-decoration-thickness: 1px;
           }
+          [data-slot="cta-button"] {
+            background: var(--color-background-strong);
+            color: var(--color-text-inverted);
+            padding: 8px 16px;
+            border-radius: 4px;
+            font-weight: 500;
+            text-decoration: none;
+          }
+          [data-slot="cta-button"]:hover {
+            background: var(--color-background-strong-hover);
+            text-decoration: none;
+          }
         }
       }
 
diff --git a/packages/console/app/src/routes/download/index.tsx b/packages/console/app/src/routes/download/index.tsx
index 98cc14fb2..2af4df46a 100644
--- a/packages/console/app/src/routes/download/index.tsx
+++ b/packages/console/app/src/routes/download/index.tsx
@@ -31,7 +31,7 @@ export default function Download() {
       <Link rel="canonical" href={`${config.baseUrl}/download`} />
       <Meta name="description" content="Download OpenCode for macOS, Windows, and Linux" />
       <div data-component="container">
-        <Header />
+        <Header hideGetStarted />
 
         <div data-component="content">
           <section data-component="download-hero">
diff --git a/packages/console/app/src/routes/enterprise/index.css b/packages/console/app/src/routes/enterprise/index.css
index d3c47f08e..c4a9ca29c 100644
--- a/packages/console/app/src/routes/enterprise/index.css
+++ b/packages/console/app/src/routes/enterprise/index.css
@@ -84,6 +84,7 @@
       ul {
         display: flex;
         justify-content: space-between;
+        align-items: center;
         gap: 48px;
         li {
           display: inline-block;
@@ -98,6 +99,18 @@
             text-underline-offset: 2px;
             text-decoration-thickness: 1px;
           }
+          [data-slot="cta-button"] {
+            background: var(--color-background-strong);
+            color: var(--color-text-inverted);
+            padding: 8px 16px;
+            border-radius: 4px;
+            font-weight: 500;
+            text-decoration: none;
+          }
+          [data-slot="cta-button"]:hover {
+            background: var(--color-background-strong-hover);
+            text-decoration: none;
+          }
         }
       }
 
diff --git a/packages/console/app/src/routes/index.css b/packages/console/app/src/routes/index.css
index 6f658771f..4d91e5d1e 100644
--- a/packages/console/app/src/routes/index.css
+++ b/packages/console/app/src/routes/index.css
@@ -225,6 +225,7 @@ body {
       ul {
         display: flex;
         justify-content: space-between;
+        align-items: center;
         gap: 48px;
         li {
           display: inline-block;
@@ -239,6 +240,18 @@ body {
             text-underline-offset: var(--space-1);
             text-decoration-thickness: 1px;
           }
+          [data-slot="cta-button"] {
+            background: var(--color-background-strong);
+            color: var(--color-text-inverted);
+            padding: 8px 16px;
+            border-radius: 4px;
+            font-weight: 500;
+            text-decoration: none;
+          }
+          [data-slot="cta-button"]:hover {
+            background: var(--color-background-strong-hover);
+            text-decoration: none;
+          }
         }
       }
 
@@ -436,7 +449,7 @@ body {
         cursor: pointer;
         align-items: center;
         color: var(--color-text);
-        gap: var(--space-1);
+        gap: 16px;
         color: var(--color-text);
         padding: 8px 16px 8px 8px;
         border-radius: 4px;
diff --git a/packages/console/app/src/routes/zen/index.css b/packages/console/app/src/routes/zen/index.css
index 6a9f5706d..a8d0b7352 100644
--- a/packages/console/app/src/routes/zen/index.css
+++ b/packages/console/app/src/routes/zen/index.css
@@ -147,6 +147,7 @@ body {
       ul {
         display: flex;
         justify-content: space-between;
+        align-items: center;
         gap: 48px;
         li {
           display: inline-block;
@@ -161,6 +162,18 @@ body {
             text-underline-offset: var(--space-1);
             text-decoration-thickness: 1px;
           }
+          [data-slot="cta-button"] {
+            background: var(--color-background-strong);
+            color: var(--color-text-inverted);
+            padding: 8px 16px;
+            border-radius: 4px;
+            font-weight: 500;
+            text-decoration: none;
+          }
+          [data-slot="cta-button"]:hover {
+            background: var(--color-background-strong-hover);
+            text-decoration: none;
+          }
         }
       }
 
diff --git a/packages/console/app/src/routes/zen/index.tsx b/packages/console/app/src/routes/zen/index.tsx
index 7fd393962..6b163315c 100644
--- a/packages/console/app/src/routes/zen/index.tsx
+++ b/packages/console/app/src/routes/zen/index.tsx
@@ -38,7 +38,7 @@ export default function Home() {
       <Meta name="opencode:auth" content={loggedin() ? "true" : "false"} />
 
       <div data-component="container">
-        <Header zen />
+        <Header zen hideGetStarted />
 
         <div data-component="content">
           <section data-component="hero">