ceos/opencode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(console): promote desktop tabs launch (#35972)

Browse source
This commit is contained in:
David Hill 2026-07-14 22:07:23 +01:00 • committed by GitHub
commit 64950cd358
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
24 changed files with 322 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

64
packages/console/app/src/routes/download/index.css
View file

@ -284,7 +284,7 @@
}
[data-component="content"] {
padding: 6rem 5rem;
padding: 3rem 5rem 6rem;
@media (max-width: 60rem) {
padding: 4rem 1.5rem;
@ -316,67 +316,43 @@
/* Download Hero Section */
[data-component="download-hero"] {
/* display: grid; */
display: none;
grid-template-columns: 260px 1fr;
display: grid;
grid-template-columns: 255px 1fr;
gap: 4rem;
padding-bottom: 2rem;
padding: 4px;
border: 1px solid var(--color-border-weak);
border-radius: 8px;
margin-bottom: 4rem;
@media (max-width: 50rem) {
grid-template-columns: 1fr;
gap: 1.5rem;
padding-bottom: 2rem;
gap: 0;
margin-bottom: 2rem;
}
[data-component="hero-icon"] {
display: flex;
justify-content: flex-end;
align-items: center;
@media (max-width: 40rem) {
display: none;
}
[data-slot="icon-placeholder"] {
width: 120px;
height: 120px;
background: var(--color-background-weak);
border: 1px solid var(--color-border-weak);
border-radius: 24px;
[data-component="hero-video"] {
video {
display: block;
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: 4px;
@media (max-width: 50rem) {
width: 80px;
height: 80px;
aspect-ratio: 16 / 9;
}
}
img {
width: 120px;
height: 120px;
border-radius: 24px;
box-shadow:
0 1.467px 2.847px 0 rgba(0, 0, 0, 0.42),
0 0.779px 1.512px 0 rgba(0, 0, 0, 0.34),
0 0.324px 0.629px 0 rgba(0, 0, 0, 0.24);
@media (max-width: 50rem) {
width: 80px;
height: 80px;
border-radius: 16px;
}
}
@media (max-width: 50rem) {
justify-content: flex-start;
}
}
[data-component="hero-text"] {
display: flex;
flex-direction: column;
justify-content: center;
padding-right: 3rem;
@media (max-width: 50rem) {
padding: 1.5rem;
}
h1 {
font-size: 1.5rem;

10
packages/console/app/src/routes/download/index.tsx
View file

@ -11,7 +11,7 @@ import { LocaleLinks } from "~/component/locale-links"
import { config } from "~/config"
import { useI18n } from "~/context/i18n"
import { useLanguage } from "~/context/language"
import desktopAppIcon from "../../asset/lander/opencode-desktop-icon.png"
import desktopTabsVideo from "../../asset/lander/desktop-tabs-landscape.mp4"
import type { DownloadPlatform } from "./types"
type OS = "macOS" | "Windows" | "Linux" | null
@ -93,12 +93,14 @@ export default function Download() {
<div data-component="content">
<section data-component="download-hero">
<div data-component="hero-icon">
<img src={desktopAppIcon} alt="" />
<div data-component="hero-video">
<video src={desktopTabsVideo} autoplay playsinline loop muted preload="metadata" aria-hidden="true" />
</div>
<div data-component="hero-text">
<h1>{i18n.t("download.hero.title")}</h1>
<p>{i18n.t("download.hero.subtitle")}</p>
<p>
{i18n.t("home.promo.body")} {i18n.t("home.promo.cta")}
</p>
<Show when={detectedOS()}>
<a
href={language.route(getDownloadHref(getDownloadPlatform(detectedOS())))}