fix: website hero copy

2 files changed, 52 insertions, 25 deletions

diff --git a/packages/console/app/src/routes/index.css b/packages/console/app/src/routes/index.css
index e5101442f..5cb91a6fb 100644
--- a/packages/console/app/src/routes/index.css
+++ b/packages/console/app/src/routes/index.css
@@ -338,6 +338,11 @@ body {
     }
   }
 
+  [data-slot="installation-instructions"] {
+    color: var(--color-text-strong);
+    margin-bottom: 8px;
+  }
+
   [data-slot="installation"] {
     width: 100%;
     max-width: 100%;
@@ -348,6 +353,11 @@ body {
     }
   }
 
+  [data-slot="installation-options"] {
+    font-size: 13px;
+    margin-top: 12px;
+  }
+
   [data-component="tabs"] {
     [data-slot="tablist"] {
       display: flex;
@@ -480,10 +490,10 @@ body {
     }
 
     h1 {
-      font-size: 28px;
+      font-size: 38px;
       color: var(--color-text-strong);
       font-weight: 500;
-      margin-bottom: 16px;
+      margin-bottom: 8px;
 
       @media (max-width: 60rem) {
         font-size: 22px;
@@ -492,7 +502,7 @@ body {
 
     p {
       color: var(--color-text);
-      margin-bottom: 24px;
+      margin-bottom: 40px;
       max-width: 82%;
 
       @media (max-width: 50rem) {
diff --git a/packages/console/app/src/routes/index.tsx b/packages/console/app/src/routes/index.tsx
index 1a41f0e6a..b04fe5094 100644
--- a/packages/console/app/src/routes/index.tsx
+++ b/packages/console/app/src/routes/index.tsx
@@ -43,7 +43,7 @@ export default function Home() {
   return (
     <main data-page="opencode">
       {/*<HttpHeader name="Cache-Control" value="public, max-age=1, s-maxage=3600, stale-while-revalidate=86400" />*/}
-      <Title>OpenCode | The AI coding agent built for the terminal</Title>
+      <Title>OpenCode | The open source AI coding agent</Title>
       <Link rel="canonical" href={config.baseUrl} />
       <Meta property="og:image" content="/social-share.png" />
       <Meta name="twitter:image" content="/social-share.png" />
@@ -53,26 +53,33 @@ export default function Home() {
         <div data-component="content">
           <section data-component="hero">
             <div data-slot="hero-copy">
-              <a data-slot="releases" href={release()?.url ?? `${config.github.repoUrl}/releases`} target="_blank">
+              <a data-slot="releases"
+                 href={release()?.url ?? `${config.github.repoUrl}/releases`}
+                 target="_blank">
                 What’s new in {release()?.name ?? "the latest release"}
               </a>
-              <h1>The AI coding agent built for the terminal</h1>
+              <h1>The open source coding agent</h1>
               <p>
-                OpenCode is fully open source, giving you control and freedom to use any provider, any model, and any
-                editor.
+                OpenCode includes free models or connect from any provider
+                to <br />
+                use other models, including Claude, GPT, Gemini and more.
               </p>
-              <a href="/docs">
-                <span>Read docs </span>
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path
-                    d="M6.5 12L17 12M13 16.5L17.5 12L13 7.5"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                    stroke-linecap="square"
-                  />
-                </svg>
-              </a>
+              {/*<a href="/docs">*/}
+              {/*  <span>Read docs </span>*/}
+              {/*  <svg width="24" height="24" viewBox="0 0 24 24" fill="none"*/}
+              {/*       xmlns="http://www.w3.org/2000/svg">*/}
+              {/*    <path*/}
+              {/*      d="M6.5 12L17 12M13 16.5L17.5 12L13 7.5"*/}
+              {/*      stroke="currentColor"*/}
+              {/*      stroke-width="1.5"*/}
+              {/*      stroke-linecap="square"*/}
+              {/*    />*/}
+              {/*  </svg>*/}
+              {/*</a>*/}
             </div>
+            <p data-slot="installation-instructions">
+              Install and use. No account, no email, and no credit card.
+            </p>
             <div data-slot="installation">
               <Tabs
                 as="section"
@@ -102,7 +109,8 @@ export default function Home() {
                 </Tabs.List>
                 <div data-slot="panels">
                   <Tabs.Content as="pre" data-slot="panel" value="curl">
-                    <button data-copy data-slot="command" onClick={handleCopyClick}>
+                    <button data-copy data-slot="command"
+                            onClick={handleCopyClick}>
                       <span data-slot="command-script">
                         <span>curl -fsSL </span>
                         <span data-slot="protocol">https://</span>
@@ -113,7 +121,8 @@ export default function Home() {
                     </button>
                   </Tabs.Content>
                   <Tabs.Content as="pre" data-slot="panel" value="npm">
-                    <button data-copy data-slot="command" onClick={handleCopyClick}>
+                    <button data-copy data-slot="command"
+                            onClick={handleCopyClick}>
                       <span>
                         <span data-slot="protocol">npm i -g </span>
                         <span data-slot="highlight">opencode-ai</span>
@@ -122,7 +131,8 @@ export default function Home() {
                     </button>
                   </Tabs.Content>
                   <Tabs.Content as="pre" data-slot="panel" value="bun">
-                    <button data-copy data-slot="command" onClick={handleCopyClick}>
+                    <button data-copy data-slot="command"
+                            onClick={handleCopyClick}>
                       <span>
                         <span data-slot="protocol">bun add -g </span>
                         <span data-slot="highlight">opencode-ai</span>
@@ -131,7 +141,8 @@ export default function Home() {
                     </button>
                   </Tabs.Content>
                   <Tabs.Content as="pre" data-slot="panel" value="brew">
-                    <button data-copy data-slot="command" onClick={handleCopyClick}>
+                    <button data-copy data-slot="command"
+                            onClick={handleCopyClick}>
                       <span>
                         <span data-slot="protocol">brew install </span>
                         <span data-slot="highlight">opencode</span>
@@ -140,7 +151,8 @@ export default function Home() {
                     </button>
                   </Tabs.Content>
                   <Tabs.Content as="pre" data-slot="panel" value="paru">
-                    <button data-copy data-slot="command" onClick={handleCopyClick}>
+                    <button data-copy data-slot="command"
+                            onClick={handleCopyClick}>
                       <span>
                         <span data-slot="protocol">paru -S </span>
                         <span data-slot="highlight">opencode</span>
@@ -151,10 +163,15 @@ export default function Home() {
                 </div>
               </Tabs>
             </div>
+            <p data-slot="installation-options">
+              Available in terminal, web, and desktop (coming soon).<br />
+              Extensions for VS Code, Cursor, Windsurf, and more.
+            </p>
           </section>
 
           <section data-component="video">
-            <video src={video} autoplay playsinline loop muted preload="auto" poster={videoPoster}>
+            <video src={video} autoplay playsinline loop muted preload="auto"
+                   poster={videoPoster}>
               Your browser does not support the video tag.
             </video>
           </section>