docs: edits

2 files changed, 83 insertions, 23 deletions

diff --git a/packages/web/src/components/Header.astro b/packages/web/src/components/Header.astro
index b3e393826..42c8e2f02 100644
--- a/packages/web/src/components/Header.astro
+++ b/packages/web/src/components/Header.astro
@@ -3,6 +3,7 @@ import config from 'virtual:starlight/user-config';
 import { Icon } from '@astrojs/starlight/components';
 import { HeaderLinks } from 'toolbeam-docs-theme/components';
 import Default from 'toolbeam-docs-theme/overrides/Header.astro';
+import SocialIcons from 'virtual:starlight/components/SocialIcons';
 import SiteTitle from '@astrojs/starlight/components/SiteTitle.astro';
 
 const path = Astro.url.pathname;
@@ -11,19 +12,32 @@ const links = config.social || [];
 ---
 
 { path.startsWith("/s")
-  ? <div class="header sl-flex">
-      <div class="title-wrapper sl-flex">
-        <SiteTitle {...Astro.props} />
-      </div>
-      <div class="middle-group sl-flex">
-        <HeaderLinks {...Astro.props} />
-      </div>
-    </div>
+? <div class="header sl-flex">
+	<div class="title-wrapper sl-flex">
+		<SiteTitle {...Astro.props} />
+	</div>
+	<div class="middle-group sl-flex">
+		<HeaderLinks {...Astro.props} />
+	</div>
+	<div class="sl-hidden md:sl-flex right-group">
+		{
+			links.length > 0 && (
+				<div class="sl-flex social-icons">
+					{links.map(({ href, icon }) => (
+						<a {href} rel="me" target="_blank">
+							<Icon name={icon} size="1rem" />
+						</a>
+					))}
+				</div>
+			)
+		}
+	</div>
+</div>
   : <Default {...Astro.props}><slot /></Default>
 }
-
 <style>
 	.header {
+		gap: var(--sl-nav-gap);
 		justify-content: space-between;
 		align-items: center;
 		height: 100%;
@@ -53,4 +67,50 @@ const links = config.social || [];
 			display: flex;
 		}
 	}
+
+	.right-group,
+	.social-icons {
+		gap: 1rem;
+		align-items: center;
+
+    a {
+          line-height: 1;
+
+          svg {
+              color: var(--sl-color-text-dimmed);
+          }
+      }
+	}
+
+	@media (min-width: 50rem) {
+		:global(:root[data-has-sidebar]) {
+			--__sidebar-pad: calc(2 * var(--sl-nav-pad-x));
+		}
+		:global(:root:not([data-has-toc])) {
+			--__toc-width: 0rem;
+		}
+		.header {
+			--__sidebar-width: max(0rem, var(--sl-content-inline-start, 0rem) - var(--sl-nav-pad-x));
+			--__main-column-fr: calc(
+				(
+						100% + var(--__sidebar-pad, 0rem) - var(--__toc-width, var(--sl-sidebar-width)) -
+							(2 * var(--__toc-width, var(--sl-nav-pad-x))) - var(--sl-content-inline-start, 0rem) -
+							var(--sl-content-width)
+					) / 2
+			);
+			display: grid;
+			grid-template-columns:
+        /* 1 (site title): runs up until the main content column’s left edge or the width of the title, whichever is the largest  */
+				minmax(
+					calc(var(--__sidebar-width) + max(0rem, var(--__main-column-fr) - var(--sl-nav-gap))),
+					auto
+				)
+				/* 2 (search box): all free space that is available. */
+				1fr
+				/* 3 (right items): use the space that these need. */
+				auto;
+			align-content: center;
+		}
+	}
 </style>
+
diff --git a/packages/web/src/components/Lander.astro b/packages/web/src/components/Lander.astro
index d27358f8f..86952555e 100644
--- a/packages/web/src/components/Lander.astro
+++ b/packages/web/src/components/Lander.astro
@@ -19,7 +19,7 @@ const imageAttrs = {
 const github = config.social.filter(s => s.icon === 'github')[0];
 
 const command = "npm i -g";
-const pkg = "opencode";
+const pkg = "opencode-ai";
 
 let darkImage: ImageMetadata | undefined;
 let lightImage: ImageMetadata | undefined;
@@ -68,12 +68,12 @@ if (image) {
 
     <section class="content">
       <ul>
-      <li><b>Native TUI</b>: A native terminal UI for a smoother, snappier experience.</li>
-        <li><b>LSP enabled</b>: Loads the right LSPs for your codebase. Helps the LLM make fewer mistakes.</li>
-        <li><b>Multi-session</b>: Start multiple conversations in a project to have agents working in parallel.</li>
-        <li><b>Use any model</b>: Supports all the models from OpenAI, Anthropic, Google, OpenRouter, and more.</li>
-        <li><b>Change tracking</b>: View the file changes from the current conversation in the sidebar.</li>
-        <li><b>Edit with Vim</b>: Use Vim as an external editor to compose longer messages.</li>
+        <li><b>Native TUI</b>: A responsive, native, themeable terminal UI.</li>
+        <li><b>LSP enabled</b>: Automatically loads the right LSPs for the LLM.</li>
+        <li><b>Multi-session</b>: Start multiple agents in parallel on the same project.</li>
+        <li><b>Shareable links</b>: Share a link to any sessions for reference or to debug.</li>
+        <li><b>Claude Pro</b>: Log in with Anthropic to use your Claude Pro or Max account.</li>
+        <li><b>Use any model</b>: Supports 75+ LLM providers through <a href="https://models.dev">Models.dev</a>, including local models.</li>
       </ul>
     </section>
 
@@ -94,7 +94,7 @@ if (image) {
   --heading-font-size: var(--sl-text-3xl);
 
   margin: 1rem;
-  border: 2px solid var(--sl-color-white);
+  border: 2px solid var(--sl-color-border);
 }
 @media (max-width: 30rem) {
   .hero {
@@ -126,7 +126,7 @@ section.cta {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  border-top: 2px solid var(--sl-color-white);
+  border-top: 2px solid var(--sl-color-border);
 
   & > div {
     flex: 1;
@@ -145,7 +145,7 @@ section.cta {
   }
 
   & > div + div {
-    border-left: 2px solid var(--sl-color-white);
+    border-left: 2px solid var(--sl-color-border);
   }
 
   .command {
@@ -195,7 +195,7 @@ section.cta {
 }
 
 section.content {
-  border-top: 2px solid var(--sl-color-white);
+  border-top: 2px solid var(--sl-color-border);
   padding: var(--padding);
 
   ul {
@@ -212,7 +212,7 @@ section.content {
 }
 
 section.approach {
-  border-top: 2px solid var(--sl-color-white);
+  border-top: 2px solid var(--sl-color-border);
   padding: var(--padding);
 
   p + p {
@@ -221,7 +221,7 @@ section.approach {
 }
 
 section.footer {
-  border-top: 2px solid var(--sl-color-white);
+  border-top: 2px solid var(--sl-color-border);
   display: flex;
   flex-direction: row;
 
@@ -233,7 +233,7 @@ section.footer {
   }
 
   & > div + div {
-    border-left: 2px solid var(--sl-color-white);
+    border-left: 2px solid var(--sl-color-border);
   }
 }
 </style>