docs: lander

cloud/app/src/routes/index.css

@@ -2,6 +2,7 @@
   --color-text: hsl(224, 10%, 10%);
   --color-text-secondary: hsl(224, 7%, 46%);
   --color-text-dimmed: hsl(224, 6%, 63%);
+  --color-text-inverted: hsl(0, 0%, 100%);
 
   --color-border: hsl(224, 6%, 77%);
 }
@@ -11,6 +12,7 @@
     --color-text: hsl(0, 0%, 100%);
     --color-text-secondary: hsl(224, 6%, 66%);
     --color-text-dimmed: hsl(224, 7%, 46%);
+    --color-text-inverted: hsl(224, 10%, 10%);
 
     --color-border: hsl(224, 6%, 36%);
   }
@@ -19,12 +21,12 @@
 [data-page="home"] {
   --padding: 3rem;
   --vertical-padding: 1.5rem;
-  --heading-font-size: 1.5625rem;
+  --heading-font-size: 1.375rem;
 
   @media (max-width: 30rem) {
     --padding: 1rem;
     --vertical-padding: 0.75rem;
-    --heading-font-size: 1.375rem;
+    --heading-font-size: 1.125rem;
   }
 
   font-family: var(--font-mono);
@@ -41,19 +43,19 @@
   [data-component="content"] {
     max-width: 67.5rem;
     margin: 0 auto;
-    border: 2px solid var(--color-border);
+    border: 1px solid var(--color-border);
   }
 
   [data-component="top"] {
     padding: var(--padding);
     display: flex;
     flex-direction: column;
-    align-items: start;
+    align-items: center;
     gap: calc(var(--vertical-padding) / 2);
 
     img {
       height: auto;
-      width: clamp(200px, 70vw, 400px);
+      width: clamp(200px, 85vw, 552px);
     }
 
     [data-slot="logo dark"] {
@@ -71,17 +73,20 @@
 
     [data-slot="title"] {
       line-height: 1.25;
+      font-weight: 500;
+      text-align: center;
       font-size: var(--heading-font-size);
+      color: var(--color-text-secondary);
       text-transform: uppercase;
     }
   }
 
   [data-component="cta"] {
-    border-top: 2px solid var(--color-border);
+    border-top: 1px solid var(--color-border);
     display: flex;
 
     & > div + div {
-      border-left: 2px solid var(--color-border);
+      border-left: 1px solid var(--color-border);
     }
 
     [data-slot="left"] {
@@ -113,7 +118,7 @@
 
       [data-slot="right"] {
         border-left: none;
-        border-top: 2px solid var(--color-border);
+        border-top: 1px solid var(--color-border);
       }
     }
 
@@ -154,7 +159,7 @@
   }
 
   [data-component="zen"] {
-    border-top: 2px solid var(--color-border);
+    border-top: 1px solid var(--color-border);
     text-align: center;
     font-size: 1.125rem;
     padding: var(--vertical-padding) 2rem;
@@ -180,7 +185,7 @@
   }
 
   [data-component="features"] {
-    border-top: 2px solid var(--color-border);
+    border-top: 1px solid var(--color-border);
     padding: var(--padding);
 
     [data-slot="list"] {
@@ -193,7 +198,17 @@
 
         strong {
           text-transform: uppercase;
-          font-weight: 700;
+          font-weight: 600;
+        }
+
+        label {
+          line-height: 1;
+          text-transform: uppercase;
+          font-size: 0.75rem;
+          letter-spacing: 0.03125rem;
+          background: var(--color-border);
+          padding: 0.125rem 0.375rem;
+          color: var(--color-text-inverted);
         }
       }
 
@@ -204,7 +219,7 @@
   }
 
   [data-component="install"] {
-    border-top: 2px solid var(--color-border);
+    border-top: 1px solid var(--color-border);
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: 1fr 1fr;
@@ -231,21 +246,21 @@
     }
 
     &:nth-child(2) {
-      border-left: 2px solid var(--color-border);
+      border-left: 1px solid var(--color-border);
 
       @media (max-width: 40rem) {
         border-left: none;
-        border-top: 2px solid var(--color-border);
+        border-top: 1px solid var(--color-border);
       }
     }
 
     &:nth-child(3) {
-      border-top: 2px solid var(--color-border);
+      border-top: 1px solid var(--color-border);
     }
 
     &:nth-child(4) {
-      border-top: 2px solid var(--color-border);
-      border-left: 2px solid var(--color-border);
+      border-top: 1px solid var(--color-border);
+      border-left: 1px solid var(--color-border);
 
       @media (max-width: 40rem) {
         border-left: none;
@@ -298,7 +313,7 @@
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: var(--images-height);
-    border-top: 2px solid var(--color-border);
+    border-top: 1px solid var(--color-border);
 
     & > [data-slot="left"] {
       display: flex;
@@ -311,12 +326,12 @@
       grid-template-rows: 1fr 1fr;
       grid-row: 1;
       grid-column: 2;
-      border-left: 2px solid var(--color-border);
+      border-left: 1px solid var(--color-border);
 
       & > [data-slot="row1"] {
         display: flex;
         grid-row: 1;
-        border-bottom: 2px solid var(--color-border);
+        border-bottom: 1px solid var(--color-border);
         height: calc(var(--images-height) / 2);
       }
 
@@ -415,7 +430,7 @@
         grid-row: 2;
         grid-column: 1;
         border-left: none;
-        border-top: 2px solid var(--color-border);
+        border-top: 1px solid var(--color-border);
 
         & > [data-slot="row1"],
         & > [data-slot="row2"] {
@@ -466,7 +481,7 @@
   }
 
   [data-component="footer"] {
-    border-top: 2px solid var(--color-border);
+    border-top: 1px solid var(--color-border);
     display: flex;
     flex-direction: row;
 
@@ -478,7 +493,7 @@
     }
 
     [data-slot="cell"] + [data-slot="cell"] {
-      border-left: 2px solid var(--color-border);
+      border-left: 1px solid var(--color-border);
     }
 
     /* Small desktop: first two columns shrink to content, third expands */
@@ -507,7 +522,7 @@
       [data-slot="cell"]:nth-child(3) {
         flex: 1 0 100%;
         border-left: none;
-        border-top: 2px solid var(--color-border);
+        border-top: 1px solid var(--color-border);
       }
     }
   }

cloud/app/src/routes/index.tsx

@@ -59,7 +59,7 @@ export default function Home() {
         <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>
+          <h1 data-slot="title">The AI coding agent built for the terminal</h1>
         </section>
 
         <section data-component="cta">
@@ -104,23 +104,26 @@ export default function Home() {
         <section data-component="features">
           <ul data-slot="list">
             <li>
-              <strong>Native TUI</strong>: A responsive, native, themeable terminal UI.
+              <strong>Native TUI</strong> A responsive, native, themeable terminal UI
             </li>
             <li>
-              <strong>LSP enabled</strong>: Automatically loads the right LSPs for the LLM.
+              <strong>LSP enabled</strong> Automatically loads the right LSPs for the LLM
             </li>
             <li>
-              <strong>Multi-session</strong>: Start multiple agents in parallel on the same project.
+              <strong>opencode zen</strong> A <a href="/docs/zen">curated list of models</a> provided by opencode <label>New</label>
             </li>
             <li>
-              <strong>Shareable links</strong>: Share a link to any sessions for reference or to debug.
+              <strong>Multi-session</strong> Start multiple agents in parallel on the same project
             </li>
             <li>
-              <strong>Claude Pro</strong>: Log in with Anthropic to use your Claude Pro or Max account.
+              <strong>Shareable links</strong> Share a link to any sessions for reference or to debug
             </li>
             <li>
-              <strong>Use any model</strong>: Supports 75+ LLM providers through{" "}
-              <a href="https://models.dev">Models.dev</a>, including local models.
+              <strong>Claude Pro</strong> Log in with Anthropic to use your Claude Pro or Max account
+            </li>
+            <li>
+              <strong>Use any model</strong> Supports 75+ LLM providers through{" "}
+              <a href="https//models.dev">Models.dev</a>, including local models
             </li>
           </ul>
         </section>