feat(web): refresh landing page for v4.0 — Team Mode, model versions, optimized hero

- Add dedicated Team Mode section after Hephaestus highlighting v4.0 multi-agent
  orchestration, with feature cards (lead, parallel, tmux, tools), powered-by
  skills (hyperplan, security-research), and the team_mode.enabled opt-in line.
- Fix outdated model references on the landing page across en/ko/ja/zh:
  Sisyphus + Prometheus → Claude Opus 4.7 Max, Hephaestus → GPT 5.5 Medium,
  Oracle → GPT 5.5 High, Momus → GPT 5.5 xHigh, Metis → Claude Sonnet 4.6,
  Librarian + Explore → GPT 5.4 Mini Fast.
- Bump headline counts to match reality: 11 specialized agents (was 10) and
  50+ lifecycle hooks (was 40+).
- Replace the 1.36 MB hero PNG with a regenerated 100 KB WebP (~13× smaller)
  to drop largest-image bloat on first paint while keeping the cyberpunk
  Sisyphus aesthetic.
This commit is contained in:
YeonGyu-Kim
2026-05-08 18:37:28 +09:00
parent d8ba0d2152
commit c03f2d0ca6
7 changed files with 316 additions and 42 deletions
+130 -4
View File
@@ -18,6 +18,12 @@ import {
HardDrive,
ArrowRight,
Target,
Users,
Network,
Terminal,
Wrench,
Sparkles,
Sword,
} from "lucide-react"
import { HeroStats } from "@/components/landing/hero-stats"
import { InstallCommand } from "@/components/landing/install-command"
@@ -38,7 +44,7 @@ const FALLBACK_STATS = {
export const landingMetadata: Metadata = {
title: "Oh My OpenAgent — The Best Agent Harness",
description:
"Meet Sisyphus: The batteries-included agent that codes like you. Multi-model orchestration, background agents, 40+ lifecycle hooks.",
"Meet Sisyphus: The batteries-included agent that codes like you. Multi-model orchestration, Team Mode, background agents, 50+ lifecycle hooks.",
}
export async function LandingPage(): Promise<JSX.Element> {
@@ -112,7 +118,7 @@ export async function LandingPage(): Promise<JSX.Element> {
<section className="relative flex min-h-[90vh] items-center justify-center overflow-hidden pt-16">
<div className="absolute inset-0 z-0 opacity-30">
<Image
src="/images/hero.png"
src="/images/hero.webp"
alt=""
fill
priority
@@ -146,10 +152,10 @@ export async function LandingPage(): Promise<JSX.Element> {
}}
labels={{
githubStars: t("hero.githubStars", { count: "{count}" }),
specializedAgents: t("hero.specializedAgents", { count: "10" }),
specializedAgents: t("hero.specializedAgents", { count: "11" }),
totalDownloads: t("hero.totalDownloads", { count: "{count}" }),
monthlyDownloads: t("hero.monthlyDownloads", { count: "{count}" }),
lifecycleHooks: t("hero.lifecycleHooks", { count: "40+" }),
lifecycleHooks: t("hero.lifecycleHooks", { count: "50+" }),
}}
/>
@@ -466,6 +472,126 @@ export async function LandingPage(): Promise<JSX.Element> {
</div>
</section>
<section
id="team-mode"
className="relative overflow-hidden border-t border-white/5 bg-[#0a0a0a] py-24"
>
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-fuchsia-900/20 via-black to-black opacity-70" />
<div className="relative z-10 container mx-auto px-4 md:px-6">
<div className="mx-auto max-w-5xl">
<div className="mb-6 flex flex-wrap items-center gap-3">
<Badge className="border-fuchsia-500/30 bg-fuchsia-500/10 px-4 py-1.5 font-mono text-fuchsia-300">
{t("teamMode.badge")}
</Badge>
<Badge variant="outline" className="border-zinc-700 text-xs text-zinc-400">
opt-in
</Badge>
</div>
<h2 className="mb-4 text-4xl font-bold tracking-tight md:text-5xl">
<span className="bg-gradient-to-r from-fuchsia-400 via-purple-400 to-cyan-400 bg-clip-text text-transparent">
{t("teamMode.title")}
</span>
</h2>
<h3 className="mb-6 text-2xl font-bold text-zinc-200 md:text-3xl">
{t("teamMode.headline")}
</h3>
<p className="mb-12 max-w-3xl text-xl leading-relaxed text-zinc-400">
{t("teamMode.description")}
</p>
<div className="mb-16 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
{(
[
{ key: "lead", icon: Network },
{ key: "parallel", icon: Users },
{ key: "tmux", icon: Terminal },
{ key: "tools", icon: Wrench },
] as const
).map(({ key, icon: Icon }) => (
<div key={key}>
<Card className="h-full border-zinc-800 bg-zinc-900/30 transition-colors hover:border-fuchsia-500/30">
<CardHeader className="pb-3">
<div className="w-fit rounded-lg bg-fuchsia-500/10 p-2 text-fuchsia-300">
<Icon className="h-5 w-5" />
</div>
<CardTitle className="mt-3 text-lg text-fuchsia-200">
{t(`teamMode.features.${key}.title`)}
</CardTitle>
</CardHeader>
<CardContent>
<p className="text-sm leading-relaxed text-zinc-400">
{t(`teamMode.features.${key}.description`)}
</p>
</CardContent>
</Card>
</div>
))}
</div>
<div className="mb-10 flex items-center gap-3">
<Sparkles className="h-4 w-4 text-fuchsia-400" />
<span className="font-mono text-sm tracking-widest text-fuchsia-300/80 uppercase">
{t("teamMode.poweredBy")}
</span>
<div className="h-px flex-1 bg-gradient-to-r from-fuchsia-500/30 to-transparent" />
</div>
<div className="mb-12 grid grid-cols-1 gap-6 lg:grid-cols-2">
{(
[
{ key: "hyperplan", icon: Sword, accent: "purple" as const },
{ key: "securityResearch", icon: Shield, accent: "rose" as const },
] as const
).map(({ key, icon: Icon, accent }) => (
<div key={key}>
<Card
className={`h-full border-zinc-800 bg-zinc-900/30 ${
accent === "purple"
? "hover:border-purple-500/40"
: "hover:border-rose-500/40"
} transition-colors`}
>
<CardHeader>
<div className="flex items-center gap-3">
<div
className={`rounded-lg p-2 ${
accent === "purple"
? "bg-purple-500/10 text-purple-300"
: "bg-rose-500/10 text-rose-300"
}`}
>
<Icon className="h-5 w-5" />
</div>
<CardTitle
className={`font-mono text-lg ${
accent === "purple" ? "text-purple-300" : "text-rose-300"
}`}
>
{t(`teamMode.skills.${key}.name`)}
</CardTitle>
</div>
</CardHeader>
<CardContent>
<p className="leading-relaxed text-zinc-300">
{t(`teamMode.skills.${key}.description`)}
</p>
</CardContent>
</Card>
</div>
))}
</div>
<div className="flex flex-col items-start gap-4 rounded-xl border border-zinc-800 bg-black/40 p-6 sm:flex-row sm:items-center sm:justify-between">
<code className="font-mono text-sm break-all text-fuchsia-200/90">
{t("teamMode.optIn")}
</code>
<p className="text-sm text-zinc-400 italic sm:text-right">{t("teamMode.tagline")}</p>
</div>
</div>
</div>
</section>
<section className="border-t border-white/5 bg-[#0a0a0a] py-24">
<div className="container mx-auto px-4 md:px-6">
<div className="mb-16 text-center">
+45 -8
View File
@@ -79,7 +79,7 @@
},
"boulderTitle": "Session Continuity",
"boulderDescription": "Active work tracked in boulder.json. Power outage? System crash? Doesn't matter. Pick up exactly where you stopped.",
"model": "Claude Opus 4.6 Max"
"model": "Claude Opus 4.7 Max"
},
"prometheusAtlas": {
"badge": "Orchestration Workflow",
@@ -88,7 +88,7 @@
"prometheus": {
"name": "Prometheus",
"role": "Strategic Planner",
"model": "Claude Opus 4.6 Max",
"model": "Claude Opus 4.7 Max",
"description": "The architect. Interviews you, explores your codebase, and creates detailed battle plans. Never writes code. Uses Metis and Momus as quality gates.",
"features": [
"Intelligent interview mode",
@@ -139,7 +139,44 @@
"verify": "VERIFY — Prove it works"
},
"tagline": "For when good enough isn't.",
"model": "GPT 5.3 Codex Medium"
"model": "GPT 5.5 Medium"
},
"teamMode": {
"badge": "NEW · v4.0",
"title": "Team Mode",
"headline": "Multiple Agents. Side-by-Side. In Parallel.",
"description": "A lead agent orchestrates a team of category-specialized members, all running in parallel and communicating through dedicated tools. Watch every member work simultaneously in tmux. Opt-in — flip team_mode.enabled and restart.",
"features": {
"lead": {
"title": "Lead Orchestration",
"description": "One coordinator. Multiple specialists. Real-time messaging via team_send_message and team_task_create."
},
"parallel": {
"title": "True Parallelism",
"description": "Up to 8 members work simultaneously. No waiting, no queues — every angle covered at once."
},
"tmux": {
"title": "Tmux Visualization",
"description": "Focus and grid windows let you zoom into one teammate without losing the bigger picture."
},
"tools": {
"title": "team_* Tool Family",
"description": "12 dedicated tools (team_create, team_status, team_send_message, ...) gated behind team_mode.enabled."
}
},
"poweredBy": "Powered by Team Mode",
"skills": {
"hyperplan": {
"name": "hyperplan",
"description": "5 hostile agents tear apart your plan from orthogonal angles before a single line of code is written."
},
"securityResearch": {
"name": "security-research",
"description": "3 vulnerability hunters + 2 PoC engineers audit your codebase. Severity calibrated by actual exploitability."
}
},
"optIn": "team_mode.enabled = true → restart opencode",
"tagline": "Off by default. Devastating when on."
},
"agents": {
"title": "Specialized Agents",
@@ -147,31 +184,31 @@
"oracle": {
"name": "Oracle",
"role": "Architecture Consultant",
"model": "GPT 5.4 High",
"model": "GPT 5.5 High",
"description": "Complex debugging and architectural decisions. When the path forward isn't obvious."
},
"librarian": {
"name": "Librarian",
"role": "Docs & Code Search",
"model": "MiniMax M2.5",
"model": "GPT 5.4 Mini Fast",
"description": "Finds real GitHub examples and official docs. Evidence-based, with permalinks."
},
"explore": {
"name": "Explore",
"role": "Codebase Grep",
"model": "MiniMax M2.5",
"model": "GPT 5.4 Mini Fast",
"description": "Blazing fast codebase search. Cheap, parallel, always background."
},
"metis": {
"name": "Metis",
"role": "Plan Consultant",
"model": "Claude Opus 4.6",
"model": "Claude Sonnet 4.6",
"description": "Catches ambiguities in plans before they become production bugs."
},
"momus": {
"name": "Momus",
"role": "Plan Reviewer",
"model": "GPT 5.4",
"model": "GPT 5.5 xHigh",
"description": "Ruthless validation. Only approves when the plan is bulletproof."
},
"dynamicSystem": {
+45 -8
View File
@@ -79,7 +79,7 @@
},
"boulderTitle": "Session Continuity",
"boulderDescription": "アクティブな作業はboulder.jsonに追跡されます。停電?システムクラッシュ?関係ありません。止まったそのままの場所から再開できます。",
"model": "Claude Opus 4.6 Max"
"model": "Claude Opus 4.7 Max"
},
"prometheusAtlas": {
"badge": "オーケストレーションワークフロー",
@@ -88,7 +88,7 @@
"prometheus": {
"name": "Prometheus",
"role": "Strategic Planner",
"model": "Claude Opus 4.6 Max",
"model": "Claude Opus 4.7 Max",
"description": "設計者。あなたとインタビューし、コードベースを探索し、詳細な実行計画を作成します。コードは絶対に書きません。MetisとMomusを品質ゲートとして使用します。",
"features": [
"知的なインタビューモード",
@@ -139,7 +139,44 @@
"verify": "VERIFY — 動作を証明する"
},
"tagline": "良いだけではない時に。",
"model": "GPT 5.3 Codex Medium"
"model": "GPT 5.5 Medium"
},
"teamMode": {
"badge": "NEW · v4.0",
"title": "Team Mode",
"headline": "複数のエージェント。横並び。並列で。",
"description": "リードエージェントがカテゴリ特化のメンバーチームを統括します。全員が並列で動き、専用ツールでリアルタイムに通信。tmuxで全メンバーの作業を同時に観察できます。オプトイン — team_mode.enabledを切り替えて再起動。",
"features": {
"lead": {
"title": "リードオーケストレーション",
"description": "コーディネーター1人、スペシャリスト複数。team_send_messageとteam_task_createによるリアルタイムメッセージング。"
},
"parallel": {
"title": "真の並列性",
"description": "最大8メンバーが同時に作業。待機なし、キューなし — あらゆる角度を一度にカバー。"
},
"tmux": {
"title": "Tmuxビジュアライゼーション",
"description": "Focusとgridウィンドウで一人のチームメンバーに集中しつつ、全体像も見逃しません。"
},
"tools": {
"title": "team_* ツールファミリー",
"description": "12の専用ツール(team_create、team_status、team_send_message、…)。team_mode.enabledの裏でゲーティング。"
}
},
"poweredBy": "Team Modeで動作",
"skills": {
"hyperplan": {
"name": "hyperplan",
"description": "5つの敵対的エージェントが、コード一行が書かれる前に直交する角度から計画を引き裂きます。"
},
"securityResearch": {
"name": "security-research",
"description": "3人の脆弱性ハンター + 2人のPoCエンジニアがコードベースを監査。実際の悪用可能性で重大度を調整。"
}
},
"optIn": "team_mode.enabled = true → opencode再起動",
"tagline": "デフォルトはOFF。ONにすると圧倒的。"
},
"agents": {
"title": "Specialized Agents",
@@ -147,31 +184,31 @@
"oracle": {
"name": "Oracle",
"role": "Architecture Consultant",
"model": "GPT 5.4 High",
"model": "GPT 5.5 High",
"description": "複雑なデバッグとアーキテクチャ決定。前進の道が明らかでない時。"
},
"librarian": {
"name": "Librarian",
"role": "Docs & Code Search",
"model": "MiniMax M2.5",
"model": "GPT 5.4 Mini Fast",
"description": "実際のGitHub例と公式ドキュメントを見つける。証拠ベース、パーマリンク付き。"
},
"explore": {
"name": "Explore",
"role": "Codebase Grep",
"model": "MiniMax M2.5",
"model": "GPT 5.4 Mini Fast",
"description": "超高速コードベース検索。安価で、並列で、常にバックグラウンドで。"
},
"metis": {
"name": "Metis",
"role": "Plan Consultant",
"model": "Claude Opus 4.6",
"model": "Claude Sonnet 4.6",
"description": "プランの曖昧さをプロダクションバグになる前に捕捉する。"
},
"momus": {
"name": "Momus",
"role": "Plan Reviewer",
"model": "GPT 5.4",
"model": "GPT 5.5 xHigh",
"description": "容赦ない検証。プランが弾丸不可能な時だけ承認する。"
},
"dynamicSystem": {
+51 -14
View File
@@ -79,7 +79,7 @@
},
"boulderTitle": "세션 연속성",
"boulderDescription": "모든 작업은 boulder.json에 기록됩니다. 정전? 시스템 크래시? 상관없습니다. 멈춘 그 자리에서 즉시 재개하세요.",
"model": "Claude Opus 4.6 Max"
"model": "Claude Opus 4.7 Max"
},
"prometheusAtlas": {
"badge": "오케스트레이션 워크플로우",
@@ -87,8 +87,8 @@
"headline": "계획과 실행은 엄연히 다른 영역입니다",
"prometheus": {
"name": "Prometheus",
"role": "전략 기획자",
"model": "Claude Opus 4.6 Max",
"role": "Strategic Planner",
"model": "Claude Opus 4.7 Max",
"description": "설계자입니다. 당신과 인터뷰하고, 코드베이스를 탐색하여 상세한 작전 계획을 짭니다. 코드는 절대 쓰지 않습니다. Metis와 Momus를 통해 품질을 검증합니다.",
"features": [
"지능형 인터뷰 모드",
@@ -139,39 +139,76 @@
"verify": "VERIFY — 동작 증명"
},
"tagline": "'적당히'로는 충분하지 않을 때.",
"model": "GPT 5.3 Codex Medium"
"model": "GPT 5.5 Medium"
},
"teamMode": {
"badge": "NEW · v4.0",
"title": "Team Mode",
"headline": "여러 에이전트. 나란히. 병렬로.",
"description": "리드 에이전트가 카테고리별 전문 멤버 팀을 지휘합니다. 모두 병렬로 동작하며 전용 도구로 실시간 통신합니다. tmux에서 모든 멤버가 동시에 작업하는 모습을 지켜보세요. 옵트인 — team_mode.enabled를 켜고 재시작하세요.",
"features": {
"lead": {
"title": "리드 오케스트레이션",
"description": "코디네이터 한 명, 전문가 여럿. team_send_message와 team_task_create를 통한 실시간 메시징."
},
"parallel": {
"title": "진짜 병렬성",
"description": "최대 8명의 멤버가 동시 작업. 대기 없음, 큐 없음 — 모든 각도를 한 번에 커버."
},
"tmux": {
"title": "Tmux 시각화",
"description": "Focus와 grid 윈도우로 한 팀원에 집중하면서도 전체 그림을 놓치지 않습니다."
},
"tools": {
"title": "team_* 도구 패밀리",
"description": "12개 전용 도구(team_create, team_status, team_send_message, ...). team_mode.enabled 뒤에 게이팅."
}
},
"poweredBy": "Team Mode 기반",
"skills": {
"hyperplan": {
"name": "hyperplan",
"description": "5명의 적대적 에이전트가 코드 한 줄 작성되기 전에 직교 각도에서 계획을 갈가리 분해합니다."
},
"securityResearch": {
"name": "security-research",
"description": "3명의 취약점 헌터 + 2명의 PoC 엔지니어가 코드베이스를 감사. 실제 익스플로잇 가능성으로 심각도 보정."
}
},
"optIn": "team_mode.enabled = true → opencode 재시작",
"tagline": "기본은 OFF. 켜면 압도적."
},
"agents": {
"title": "특화 에이전트",
"subtitle": "각 태스크에 최적화된 프롬프트와 툴셋으로 무장한 전문가들입니다.",
"oracle": {
"name": "Oracle",
"role": "아키텍처 컨설턴트",
"model": "GPT 5.4 High",
"role": "Architecture Consultant",
"model": "GPT 5.5 High",
"description": "복잡한 디버깅과 아키텍처 결정. 길이 보이지 않을 때."
},
"librarian": {
"name": "Librarian",
"role": "문서 & 코드 검색",
"model": "MiniMax M2.5",
"role": "Docs & Code Search",
"model": "GPT 5.4 Mini Fast",
"description": "실제 GitHub 예제와 공식 문서를 찾습니다. 증거 기반, 퍼머링크 제공."
},
"explore": {
"name": "Explore",
"role": "코드베이스 탐색",
"model": "MiniMax M2.5",
"role": "Codebase Grep",
"model": "GPT 5.4 Mini Fast",
"description": "초고속 코드베이스 검색. 저렴하고 빠르며, 항상 백그라운드에서 실행."
},
"metis": {
"name": "Metis",
"role": "계획 컨설턴트",
"model": "Claude Opus 4.6",
"role": "Plan Consultant",
"model": "Claude Sonnet 4.6",
"description": "계획의 모호함이 프로덕션 버그로 이어지기 전에 차단합니다."
},
"momus": {
"name": "Momus",
"role": "계획 검토자",
"model": "GPT 5.4",
"role": "Plan Reviewer",
"model": "GPT 5.5 xHigh",
"description": "무자비한 검증. 계획이 완벽하지 않으면 승인하지 않습니다."
},
"dynamicSystem": {
+45 -8
View File
@@ -79,7 +79,7 @@
},
"boulderTitle": "Session Continuity",
"boulderDescription": "活跃工作被记录在 boulder.json 中。停电?系统崩溃?没关系。从你停下的地方精确恢复。",
"model": "Claude Opus 4.6 Max"
"model": "Claude Opus 4.7 Max"
},
"prometheusAtlas": {
"badge": "编排工作流",
@@ -88,7 +88,7 @@
"prometheus": {
"name": "Prometheus",
"role": "Strategic Planner",
"model": "Claude Opus 4.6 Max",
"model": "Claude Opus 4.7 Max",
"description": "架构师。与你访谈,探索代码库,并创建详细的执行计划。从不写代码。使用 Metis 和 Momus 作为质量关卡。",
"features": [
"智能访谈模式",
@@ -139,7 +139,44 @@
"verify": "VERIFY — 证明有效"
},
"tagline": "当足够好还不够时。",
"model": "GPT 5.3 Codex Medium"
"model": "GPT 5.5 Medium"
},
"teamMode": {
"badge": "NEW · v4.0",
"title": "Team Mode",
"headline": "多个 Agent。并排运行。真正并行。",
"description": "一个领导 Agent 协调一队按类别专业化的成员,全部并行运行,通过专用工具实时通信。在 tmux 中同时观察每个成员工作。选择性启用 — 翻转 team_mode.enabled 并重启。",
"features": {
"lead": {
"title": "领导编排",
"description": "一个协调者,多个专家。通过 team_send_message 和 team_task_create 进行实时消息传递。"
},
"parallel": {
"title": "真正的并行",
"description": "最多 8 个成员同时工作。无等待,无队列 — 所有角度一次覆盖。"
},
"tmux": {
"title": "Tmux 可视化",
"description": "Focus 和 grid 窗口让你聚焦一名队员的同时不失全局视野。"
},
"tools": {
"title": "team_* 工具家族",
"description": "12 个专用工具(team_create、team_status、team_send_message、…),在 team_mode.enabled 后启用。"
}
},
"poweredBy": "由 Team Mode 驱动",
"skills": {
"hyperplan": {
"name": "hyperplan",
"description": "5 个敌对 Agent 在写一行代码前,从正交角度撕碎你的计划。"
},
"securityResearch": {
"name": "security-research",
"description": "3 个漏洞猎手 + 2 个 PoC 工程师审计你的代码库。严重性按实际可利用性校准。"
}
},
"optIn": "team_mode.enabled = true → 重启 opencode",
"tagline": "默认关闭。开启时具有毁灭性。"
},
"agents": {
"title": "Specialized Agents",
@@ -147,31 +184,31 @@
"oracle": {
"name": "Oracle",
"role": "Architecture Consultant",
"model": "GPT 5.4 High",
"model": "GPT 5.5 High",
"description": "复杂调试和架构决策。当前路不明时。"
},
"librarian": {
"name": "Librarian",
"role": "Docs & Code Search",
"model": "MiniMax M2.5",
"model": "GPT 5.4 Mini Fast",
"description": "寻找真正的 GitHub 示例和官方文档。基于证据,附带永久链接。"
},
"explore": {
"name": "Explore",
"role": "Codebase Grep",
"model": "MiniMax M2.5",
"model": "GPT 5.4 Mini Fast",
"description": "超高速代码库搜索。便宜、并行、始终在后台运行。"
},
"metis": {
"name": "Metis",
"role": "Plan Consultant",
"model": "Claude Opus 4.6 Max",
"model": "Claude Sonnet 4.6",
"description": "在计划中的歧义变成生产 Bug 之前捕获它们。"
},
"momus": {
"name": "Momus",
"role": "Plan Reviewer",
"model": "GPT 5.4 Extra High",
"model": "GPT 5.5 xHigh",
"description": "严苛验证。只有当计划无懈可击时才批准。"
},
"dynamicSystem": {
Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 98 KiB