diff --git a/cloud/app/src/routes/index.css b/cloud/app/src/routes/index.css index 0a903026..c4b1fb72 100644 --- a/cloud/app/src/routes/index.css +++ b/cloud/app/src/routes/index.css @@ -78,22 +78,22 @@ [data-component="cta"] { border-top: 2px solid var(--color-border); - display: grid; - grid-template-columns: auto 1fr auto; - align-items: stretch; + display: flex; & > div + div { border-left: 2px solid var(--color-border); } - [data-slot="left"], - [data-slot="right"] { + [data-slot="left"] { + flex: 0 0 auto; text-align: center; line-height: 1.4; padding: var(--vertical-padding) 2rem; text-transform: uppercase; + font-size: 1.125rem; @media (max-width: 30rem) { + font-size: 1rem; padding-bottom: calc(var(--vertical-padding) + 4px); } @@ -103,53 +103,18 @@ } } - [data-slot="center"] { + [data-slot="right"] { + flex: 1; padding: var(--vertical-padding) 1rem; } - @media (max-width: 55rem) { - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: auto auto; - - [data-slot="left"] { - grid-column: 1; - grid-row: 1; - } + @media (max-width: 50rem) { + flex-direction: column; [data-slot="right"] { - grid-column: 2; - grid-row: 1; - } - - [data-slot="center"] { - grid-column: 1 / -1; - grid-row: 2; border-left: none; border-top: 2px solid var(--color-border); } - - @media (max-width: 22rem) { - grid-template-columns: 1fr; - grid-template-rows: auto auto auto; - - [data-slot="left"] { - grid-column: 1; - grid-row: 1; - } - - [data-slot="right"] { - grid-column: 1; - grid-row: 2; - border-top: 2px solid var(--color-border); - border-left: none; - } - - [data-slot="center"] { - grid-column: 1; - grid-row: 3; - } - } } [data-slot="command"] { @@ -168,7 +133,7 @@ @media (max-width: 24rem) { font-size: 0.875rem; } - @media (max-width: 64rem) { + @media (max-width: 56rem) { [data-slot="protocol"] { display: none; } @@ -188,6 +153,32 @@ } } + [data-component="zen"] { + border-top: 2px solid var(--color-border); + text-align: center; + font-size: 1.125rem; + padding: var(--vertical-padding) 2rem; + + @media (max-width: 30rem) { + font-size: 1rem; + padding-left: 1rem; + padding-right: 1rem; + } + + a[target="_self"] { + text-transform: uppercase; + } + + [data-slot="description"] { + color: var(--color-text-secondary); + } + + [data-slot="divider"] { + font-weight: bold; + color: var(--color-border); + } + } + [data-component="features"] { border-top: 2px solid var(--color-border); padding: var(--padding); diff --git a/cloud/app/src/routes/index.tsx b/cloud/app/src/routes/index.tsx index a3bc8285..4f8e671d 100644 --- a/cloud/app/src/routes/index.tsx +++ b/cloud/app/src/routes/index.tsx @@ -11,6 +11,7 @@ import { createAsync, query, redirect } from "@solidjs/router" import { getActor } from "~/context/auth" import { withActor } from "~/context/auth.withActor" import { Account } from "@opencode/cloud-core/account.js" +import { Show } from "solid-js" function CopyStatus() { return ( @@ -26,13 +27,13 @@ const isLoggedIn = query(async () => { const actor = await getActor() if (actor.type === "account") { const workspaces = await withActor(() => Account.workspaces()) - throw redirect(`/workspace/${workspaces[0].id}`) + return workspaces[0].id + // throw redirect(`/workspace/${workspaces[0].id}`) } - return false }, "isLoggedIn") export default function Home() { - createAsync(() => isLoggedIn(), { + const workspaceId = createAsync(() => isLoggedIn(), { deferStream: true, }) onMount(() => { @@ -69,7 +70,7 @@ export default function Home() {
Get Started
-
+
-
- - Login - -
+ +
+ opencode zen + + , a curated list of models provided by opencode + +  /  + + Sign in + +
+
+