aljaz/opencode
1
0
Fork 0
mirror of https://github.com/aljazceru/opencode.git synced 2025-12-23 10:44:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs: lander

Browse Source
This commit is contained in:
Jay V
2025-09-03 18:30:04 -07:00
parent 222244719b
commit d0104278fa
2 changed files with 50 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
cloud/app/src/routes/index.css
View File

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

19
cloud/app/src/routes/index.tsx
View File

@@ -59,7 +59,7 @@ export default function Home() {
<section data-component="top"> <section data-component="top">
<img data-slot="logo light" src={logoLight} alt="opencode logo light" /> <img data-slot="logo light" src={logoLight} alt="opencode logo light" />
<img data-slot="logo dark" src={logoDark} alt="opencode logo dark" /> <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>
<section data-component="cta"> <section data-component="cta">
@@ -104,23 +104,26 @@ export default function Home() {
<section data-component="features"> <section data-component="features">
<ul data-slot="list"> <ul data-slot="list">
<li> <li>
<strong>Native TUI</strong>: A responsive, native, themeable terminal UI. <strong>Native TUI</strong> A responsive, native, themeable terminal UI
</li> </li>
<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>
<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>
<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>
<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>
<li> <li>
<strong>Use any model</strong>: Supports 75+ LLM providers through{" "} <strong>Claude Pro</strong> Log in with Anthropic to use your Claude Pro or Max account
<a href="https://models.dev">Models.dev</a>, including local models. </li>
<li>
<strong>Use any model</strong> Supports 75+ LLM providers through{" "}
<a href="https//models.dev">Models.dev</a>, including local models
</li> </li>
</ul> </ul>
</section> </section>