fix: website hero copy

This commit is contained in:
David Hill 2025-12-02 17:00:40 +00:00
parent 2555dba188
commit 408cdaf5e0
2 changed files with 52 additions and 25 deletions

View file

@ -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) {

View file

@ -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">
Whats 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>