feat(console): add desktop download hero

packages/console/app/src/i18n/ar.ts

@@ -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 للطرفية",

packages/console/app/src/i18n/br.ts

@@ -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",

packages/console/app/src/i18n/da.ts

@@ -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",

packages/console/app/src/i18n/de.ts

@@ -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",

packages/console/app/src/i18n/en.ts

@@ -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",

packages/console/app/src/i18n/es.ts

@@ -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",

packages/console/app/src/i18n/fr.ts

@@ -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",

packages/console/app/src/i18n/it.ts

@@ -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",

packages/console/app/src/i18n/ja.ts

@@ -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",

packages/console/app/src/i18n/ko.ts

@@ -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 터미널",

packages/console/app/src/i18n/no.ts

@@ -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",

packages/console/app/src/i18n/pl.ts

@@ -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",

packages/console/app/src/i18n/ru.ts

@@ -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",

packages/console/app/src/i18n/th.ts

@@ -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",

packages/console/app/src/i18n/tr.ts

@@ -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",

packages/console/app/src/i18n/uk.ts

@@ -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",

packages/console/app/src/i18n/zh.ts

@@ -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 终端",

packages/console/app/src/i18n/zht.ts

@@ -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 終端",

packages/console/app/src/routes/download/index.css

@@ -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;
-
-        @media (max-width: 50rem) {
-          width: 80px;
-          height: 80px;
-        }
-      }
-
-      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);
+    [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;
-          border-radius: 16px;
+          aspect-ratio: 16 / 9;
         }
       }
-
-      @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;

packages/console/app/src/routes/download/index.tsx

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