vrr/opencode
2
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-07-24 14:33:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

feat(console): add desktop download hero

Browse source
This commit is contained in:
David Hill 2026-07-08 23:06:14 +01:00
parent a4981cad43
commit 249dcddd28
20 changed files with 44 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/console/app/src/i18n/ar.ts
View file

@ -704,7 +704,7 @@ export const dict = {
"download.title": "OpenCode | تنزيل",
"download.meta.description": "نزّل OpenCode لـ macOS، Windows، وLinux",
"download.hero.title": "تنزيل OpenCode",
"download.hero.title": "تنزيل OpenCode لسطح المكتب",
"download.hero.subtitle": "متاح في نسخة تجريبية لـ macOS، Windows، وLinux",
"download.hero.button": "تنزيل لـ {{os}}",
"download.section.terminal": "OpenCode للطرفية",

2
packages/console/app/src/i18n/br.ts
View file

@ -715,7 +715,7 @@ export const dict = {
"download.title": "OpenCode | Baixar",
"download.meta.description": "Baixe o OpenCode para macOS, Windows e Linux",
"download.hero.title": "Baixar OpenCode",
"download.hero.title": "Baixar OpenCode Desktop",
"download.hero.subtitle": "Disponível em Beta para macOS, Windows e Linux",
"download.hero.button": "Baixar para {{os}}",
"download.section.terminal": "OpenCode Terminal",

2
packages/console/app/src/i18n/da.ts
View file

@ -710,7 +710,7 @@ export const dict = {
"download.title": "OpenCode | Download",
"download.meta.description": "Download OpenCode til macOS, Windows og Linux",
"download.hero.title": "Download OpenCode",
"download.hero.title": "Download OpenCode Desktop",
"download.hero.subtitle": "Tilgængelig i beta til macOS, Windows og Linux",
"download.hero.button": "Download til {{os}}",
"download.section.terminal": "OpenCode Terminal",

2
packages/console/app/src/i18n/de.ts
View file

@ -715,7 +715,7 @@ export const dict = {
"download.title": "OpenCode | Download",
"download.meta.description": "Lade OpenCode für macOS, Windows und Linux herunter",
"download.hero.title": "OpenCode herunterladen",
"download.hero.title": "OpenCode Desktop herunterladen",
"download.hero.subtitle": "In Beta verfügbar für macOS, Windows und Linux",
"download.hero.button": "Download für {{os}}",
"download.section.terminal": "OpenCode Terminal",

2
packages/console/app/src/i18n/en.ts
View file

@ -708,7 +708,7 @@ export const dict = {
"download.title": "OpenCode | Download",
"download.meta.description": "Download OpenCode for macOS, Windows, and Linux",
"download.hero.title": "Download OpenCode",
"download.hero.title": "Download OpenCode Desktop",
"download.hero.subtitle": "Available in Beta for macOS, Windows, and Linux",
"download.hero.button": "Download for {{os}}",
"download.section.terminal": "OpenCode Terminal",

2
packages/console/app/src/i18n/es.ts
View file

@ -715,7 +715,7 @@ export const dict = {
"download.title": "OpenCode | Descargar",
"download.meta.description": "Descarga OpenCode para macOS, Windows y Linux",
"download.hero.title": "Descargar OpenCode",
"download.hero.title": "Descargar OpenCode Desktop",
"download.hero.subtitle": "Disponible en Beta para macOS, Windows y Linux",
"download.hero.button": "Descargar para {{os}}",
"download.section.terminal": "OpenCode Terminal",

2
packages/console/app/src/i18n/fr.ts
View file

@ -722,7 +722,7 @@ export const dict = {
"download.title": "OpenCode | Téléchargement",
"download.meta.description": "Téléchargez OpenCode pour macOS, Windows et Linux",
"download.hero.title": "Télécharger OpenCode",
"download.hero.title": "Télécharger OpenCode Desktop",
"download.hero.subtitle": "Disponible en bêta pour macOS, Windows et Linux",
"download.hero.button": "Télécharger pour {{os}}",
"download.section.terminal": "OpenCode Terminal",

2
packages/console/app/src/i18n/it.ts
View file

@ -713,7 +713,7 @@ export const dict = {
"download.title": "OpenCode | Download",
"download.meta.description": "Scarica OpenCode per macOS, Windows e Linux",
"download.hero.title": "Scarica OpenCode",
"download.hero.title": "Scarica OpenCode Desktop",
"download.hero.subtitle": "Disponibile in Beta per macOS, Windows e Linux",
"download.hero.button": "Scarica per {{os}}",
"download.section.terminal": "OpenCode Terminal",

2
packages/console/app/src/i18n/ja.ts
View file

@ -712,7 +712,7 @@ export const dict = {
"download.title": "OpenCode | ダウンロード",
"download.meta.description": "OpenCode を macOS、Windows、Linux 向けにダウンロード",
"download.hero.title": "OpenCode をダウンロード",
"download.hero.title": "OpenCode デスクトップ版をダウンロード",
"download.hero.subtitle": "macOS、Windows、Linux 向けベータ版を利用可能",
"download.hero.button": "{{os}} 向けダウンロード",
"download.section.terminal": "OpenCode Terminal",

2
packages/console/app/src/i18n/ko.ts
View file

@ -704,7 +704,7 @@ export const dict = {
"download.title": "OpenCode | 다운로드",
"download.meta.description": "macOS, Windows, Linux용 OpenCode 다운로드",
"download.hero.title": "OpenCode 다운로드",
"download.hero.title": "OpenCode 데스크톱 다운로드",
"download.hero.subtitle": "macOS, Windows, Linux용 베타 버전 사용 가능",
"download.hero.button": "{{os}}용 다운로드",
"download.section.terminal": "OpenCode 터미널",

2
packages/console/app/src/i18n/no.ts
View file

@ -711,7 +711,7 @@ export const dict = {
"download.title": "OpenCode | Last ned",
"download.meta.description": "Last ned OpenCode for macOS, Windows og Linux",
"download.hero.title": "Last ned OpenCode",
"download.hero.title": "Last ned OpenCode Desktop",
"download.hero.subtitle": "Tilgjengelig i beta for macOS, Windows og Linux",
"download.hero.button": "Last ned for {{os}}",
"download.section.terminal": "OpenCode Terminal",

2
packages/console/app/src/i18n/pl.ts
View file

@ -712,7 +712,7 @@ export const dict = {
"download.title": "OpenCode | Pobierz",
"download.meta.description": "Pobierz OpenCode na macOS, Windows i Linux",
"download.hero.title": "Pobierz OpenCode",
"download.hero.title": "Pobierz OpenCode Desktop",
"download.hero.subtitle": "Dostępne w wersji Beta na macOS, Windows i Linux",
"download.hero.button": "Pobierz na {{os}}",
"download.section.terminal": "Terminal OpenCode",

2
packages/console/app/src/i18n/ru.ts
View file

@ -720,7 +720,7 @@ export const dict = {
"download.title": "OpenCode | Скачать",
"download.meta.description": "Скачать OpenCode для macOS, Windows и Linux",
"download.hero.title": "Скачать OpenCode",
"download.hero.title": "Скачать OpenCode Desktop",
"download.hero.subtitle": "Доступна бета для macOS, Windows и Linux",
"download.hero.button": "Скачать для {{os}}",
"download.section.terminal": "OpenCode Terminal",

2
packages/console/app/src/i18n/th.ts
View file

@ -707,7 +707,7 @@ export const dict = {
"download.title": "OpenCode | ดาวน์โหลด",
"download.meta.description": "ดาวน์โหลด OpenCode สำหรับ macOS, Windows และ Linux",
"download.hero.title": "ดาวน์โหลด OpenCode",
"download.hero.title": "ดาวน์โหลด OpenCode สำหรับเดสก์ท็อป",
"download.hero.subtitle": "พร้อมใช้งานในเวอร์ชันเบต้าสำหรับ macOS, Windows และ Linux",
"download.hero.button": "ดาวน์โหลดสำหรับ {{os}}",
"download.section.terminal": "OpenCode Terminal",

2
packages/console/app/src/i18n/tr.ts
View file

@ -715,7 +715,7 @@ export const dict = {
"download.title": "OpenCode | İndir",
"download.meta.description": "OpenCode'u macOS, Windows ve Linux için indirin",
"download.hero.title": "OpenCode'u İndir",
"download.hero.title": "OpenCode Desktop'u İndir",
"download.hero.subtitle": "macOS, Windows ve Linux için Beta olarak sunuluyor",
"download.hero.button": "{{os}} için indir",
"download.section.terminal": "OpenCode Terminal",

2
packages/console/app/src/i18n/uk.ts
View file

@ -674,7 +674,7 @@ export const dict = {
"download.title": "OpenCode | Завантажити",
"download.meta.description": "Завантажте OpenCode для macOS, Windows та Linux",
"download.hero.title": "Завантажити OpenCode",
"download.hero.title": "Завантажити OpenCode Desktop",
"download.hero.subtitle": "Доступно в бета-версії для macOS, Windows та Linux",
"download.hero.button": "Завантажити для {{os}}",
"download.section.terminal": "Термінал OpenCode",

2
packages/console/app/src/i18n/zh.ts
View file

@ -686,7 +686,7 @@ export const dict = {
"download.title": "OpenCode | 下载",
"download.meta.description": "下载适用于 macOS, Windows, 和 Linux 的 OpenCode",
"download.hero.title": "下载 OpenCode",
"download.hero.title": "下载 OpenCode 桌面版",
"download.hero.subtitle": "适用于 macOS, Windows, 和 Linux 的 Beta 版",
"download.hero.button": "下载 {{os}} 版",
"download.section.terminal": "OpenCode 终端",

2
packages/console/app/src/i18n/zht.ts
View file

@ -686,7 +686,7 @@ export const dict = {
"download.title": "OpenCode | 下載",
"download.meta.description": "下載適用於 macOS、Windows 與 Linux 的 OpenCode",
"download.hero.title": "下載 OpenCode",
"download.hero.title": "下載 OpenCode 桌面版",
"download.hero.subtitle": "適用於 macOS、Windows 與 Linux 的 Beta 版現已提供",
"download.hero.button": "下載 {{os}} 版",
"download.section.terminal": "OpenCode 終端",

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())))}