docs: lander

cloud/app/src/routes/index.css

@@ -50,7 +50,8 @@
   }
 
   [data-component="top"] {
-    padding: var(--padding);
+    padding: calc(var(--padding) * 1.5) var(--padding) var(--padding);
+    position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -82,6 +83,25 @@
       color: var(--color-text-secondary);
       text-transform: uppercase;
     }
+
+    [data-slot="login"] {
+      position: absolute;
+      top: 0;
+      right: 0;
+      border-width: 0 0 1px 1px;
+      border-style: solid;
+      border-color: var(--color-border);
+      background-color: var(--color-bg);
+
+      @media (max-width: 30rem) {
+        display: none;
+      }
+
+      a {
+        display: block;
+        padding: 0.5rem 1rem calc(0.5rem + 4px);
+      }
+    }
   }
 
   [data-component="cta"] {
@@ -111,6 +131,19 @@
       }
     }
 
+    [data-slot="center"] {
+      display: none;
+
+      @media (max-width: 30rem) {
+        display: block;
+        flex: 1;
+        text-align: center;
+        padding: var(--vertical-padding) 0.5rem;
+        border-top: 1px solid var(--color-border);
+        border-left: none;
+      }
+    }
+
     [data-slot="right"] {
       flex: 1;
       padding: var(--vertical-padding) 1rem;

cloud/app/src/routes/index.tsx

@@ -53,17 +53,24 @@ export default function Home() {
   return (
     <main data-page="home">
       <Title>opencode | AI coding agent built for the terminal</Title>
+
       <div data-component="content">
         <section data-component="top">
           <img data-slot="logo light" src={logoLight} alt="opencode logo light" />
           <img data-slot="logo dark" src={logoDark} alt="opencode logo dark" />
           <h1 data-slot="title">The AI coding agent built for the terminal</h1>
+          <div data-slot="login">
+            <a href="/auth">opencode zen</a>
+          </div>
         </section>
 
         <section data-component="cta">
           <div data-slot="left">
             <a href="/docs">Get Started</a>
           </div>
+          <div data-slot="center">
+            <a href="/auth">opencode zen</a>
+          </div>
           <div data-slot="right">
             <button data-copy data-slot="command">
               <span>
@@ -165,6 +172,7 @@ export default function Home() {
           </div>
         </footer>
       </div>
+
       <div data-component="legal">
         <span>
           ©2025 <a href="https://anoma.ly">Anomaly Innovations</a>