diff --git a/cloud/app/src/routes/index.css b/cloud/app/src/routes/index.css
index 70782019..5c0b1826 100644
--- a/cloud/app/src/routes/index.css
+++ b/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);
}
}
}
diff --git a/cloud/app/src/routes/index.tsx b/cloud/app/src/routes/index.tsx
index 66b86413..900e4a81 100644
--- a/cloud/app/src/routes/index.tsx
+++ b/cloud/app/src/routes/index.tsx
@@ -59,7 +59,7 @@ export default function Home() {
- The AI coding agent built for the terminal.
+ The AI coding agent built for the terminal
@@ -104,23 +104,26 @@ export default function Home() {
- Native TUI : A responsive, native, themeable terminal UI.
+ Native TUI A responsive, native, themeable terminal UI
- LSP enabled : Automatically loads the right LSPs for the LLM.
+ LSP enabled Automatically loads the right LSPs for the LLM
- Multi-session : Start multiple agents in parallel on the same project.
+ opencode zen A curated list of models provided by opencode New
- Shareable links : Share a link to any sessions for reference or to debug.
+ Multi-session Start multiple agents in parallel on the same project
- Claude Pro : Log in with Anthropic to use your Claude Pro or Max account.
+ Shareable links Share a link to any sessions for reference or to debug
- Use any model : Supports 75+ LLM providers through{" "}
- Models.dev , including local models.
+ Claude Pro Log in with Anthropic to use your Claude Pro or Max account
+
+
+ Use any model Supports 75+ LLM providers through{" "}
+ Models.dev , including local models