fix(landing-page): polish alternative & agent page CTAs, footer layout + i18n (#5256)

* fix(landing-page): unify alternative-page CTA buttons and tidy the sub-page footer

The /alternatives/* hero and final-CTA button pairs used mismatched box
models: the filled button had a border-less box with white-space:nowrap
while the outlined button had a 1px --line border, no nowrap, and less
horizontal padding. On non-English locales the longer labels made the
outlined button wrap and drift out of alignment with the filled one, and
its faint --line border barely registered against the near-white paper.
Both pairs now share one box (equal padding, a 1px border on each with the
primary's matching its fill, nowrap) and the outlined border is lifted to
--ink-faint / .55-alpha white so it reads as a real button edge.

The sub-page footer packed eight nav sections into a 7-track grid, so
Company orphaned onto a second row under Product. Community and Company —
the two shortest sections — now share the last column stacked vertically
(mirroring the reference footer), keeping everything on one clean row.

* feat(landing-page): lead alternative-page CTAs with the desktop download

The /alternatives/* hero and final CTAs showed a generic get-started button
(the /quickstart/ action) as the emphasized primary, with Download demoted
to an outlined secondary. On comparison pages the intended conversion is
installing the desktop client, so drop the get-started CTA entirely and
surface only two buttons: Download (now the emphasized primary) and Star on
GitHub (secondary). Applied in the component by matching the locale-stable
hrefs, so it holds uniformly across every translation.

* refactor(landing-page): share download-first CTA logic across agent pages

Extend the alternative-page CTA change to the 21 /agents/*-design/ guide
pages, which used the same three-button hero (get-started + Star + Download).
Factor the shaping into app/cta-actions.ts (downloadFirstCtas): drop the
/quickstart/ get-started action and surface Download as the emphasized
primary with Star on GitHub as the secondary. The alternatives component and
every agent page now consume the shared helper for both the hero and final
CTAs, and the compact/non-rich fallback CTA rows are aligned to match.

* fix(landing-page): point every download CTA at the on-site download page

The download CTA inherited whatever href the per-locale copy carried — the
English base linked to /download/ but older translated copy linked straight
to GitHub /releases, so the button target differed by language. Normalize it:
downloadFirstCtas now always rewrites the download action to the localized
/download/ page, and the non-rich fallback rows link there too.

* fix(landing-page): localize the footer Company column for every locale

The footer's Company column (Company / About / Careers / FAQ / Privacy / Terms)
was driven by a small inline map that only carried en/zh/zh-tw, so every other
locale — ko, ja, de, fr, ru, es, pt-br, it — silently rendered those labels in
English while the rest of the footer was translated. Move the labels into a
shared footer-legal-i18n.ts covering all landing locales (typed against
LandingLocaleCode so a missing locale fails typecheck) and consume it from both
the sub-page footer and the homepage footer, so the two can no longer drift.

---------

Co-authored-by: Joey <276262049+xne998808-ai@users.noreply.github.com>

Author: xne998808-ai

apps/landing-page/app/_components/alternative-detail.astro

@@ -13,6 +13,7 @@
 import Layout from './sub-page-layout.astro';
 import { getInfoPageCopy, getAlternativeCopy } from '../info-page-i18n';
 import { localeFromPath, localizedHref } from '../i18n';
+import { downloadFirstCtas } from '../cta-actions';
 import '../_partials/comparison-v4.css';
 
 interface Props {
@@ -39,6 +40,10 @@ const features = page.features;
 const ctaHref = (a: { href: string; external?: boolean }) =>
   a.external ? a.href : href(a.href);
 
+// Comparison pages lead with the desktop download — see cta-actions.ts.
+const heroCtas = rich ? downloadFirstCtas(rich.heroCtaActions) : [];
+const finalCtas = rich ? downloadFirstCtas(rich.ctaActions) : [];
+
 const faqEntries = (rich?.faq ?? page.faq).map(({ name, text }) => ({ name, text }));
 
 const homeUrl = new URL(href('/'), SITE).toString();
@@ -93,7 +98,7 @@ const jsonLd = [
             <h1 class="v4h1">{page.heading}</h1>
             <p class="v4dek">{rich.heroCtaLead}</p>
             <div class="v4cta-row">
-              {rich.heroCtaActions.map((a) => (
+              {heroCtas.map((a) => (
                 <a
                   class={a.variant === 'primary' ? 'v4btn-p' : 'v4btn-g'}
                   href={ctaHref(a)}
@@ -203,7 +208,7 @@ const jsonLd = [
             <h2 class="v4final-h">{rich.ctaTitle}</h2>
             <p class="v4final-p">{rich.ctaBody}</p>
             <div class="v4cta-row">
-              {rich.ctaActions.map((a) => (
+              {finalCtas.map((a) => (
                 <a
                   class={a.variant === 'primary' ? 'v4btn-coral' : 'v4btn-gd'}
                   href={ctaHref(a)}
@@ -312,9 +317,8 @@ const jsonLd = [
             <p>{page.ctaBody}</p>
           </div>
           <div class="info-cta-actions">
-            <a class="btn btn-primary" href={REPO} target="_blank" rel="noreferrer noopener">{common.starOnGithub}</a>
-            <a class="btn btn-ghost" href={href('/quickstart/')}>{common.quickstart}</a>
-            <a class="btn btn-ghost" href={REPO_RELEASES} target="_blank" rel="noreferrer noopener">{common.downloadDesktop}</a>
+            <a class="btn btn-primary" href={href('/download/')}>{common.downloadDesktop}</a>
+            <a class="btn btn-ghost" href={REPO} target="_blank" rel="noreferrer noopener">{common.starOnGithub}</a>
           </div>
           <div class="info-cta-meta">
             <span class="stamp">● {common.apache}</span>

apps/landing-page/app/_components/site-footer.astro

@@ -8,6 +8,7 @@ import {
   isLandingLocale,
   localizedHref,
 } from '../i18n';
+import { getFooterLegalCopy } from '../footer-legal-i18n';
 
 interface Props {
   counts: HeaderProps['counts'];
@@ -48,14 +49,9 @@ const FOOTER_AGENTS = [
   { name: 'OpenCode', route: 'opencode-design' },
 ] as const;
 
-// Legal / company labels — small inline map (en/zh/zh-tw, fallback en) so
-// this stays out of the larger footer i18n surface.
-const L = {
-  en: { company: 'Company', about: 'About', careers: 'Careers', faq: 'FAQ', privacy: 'Privacy Policy', terms: 'Terms', allAgents: 'All agents', allSolutions: 'All use cases' },
-  zh: { company: '公司', about: '关于', careers: '招聘', faq: '常见问题', privacy: '隐私政策', terms: '服务条款', allAgents: '全部 Agent', allSolutions: '全部场景' },
-  'zh-tw': { company: '公司', about: '關於', careers: '招聘', faq: '常見問題', privacy: '隱私政策', terms: '服務條款', allAgents: '全部 Agent', allSolutions: '全部場景' },
-} satisfies Record<string, Record<string, string>>;
-const l = L[locale as keyof typeof L] ?? L.en;
+// Legal / company labels — localized for every landing locale (see
+// footer-legal-i18n.ts), falling back to English for any unknown code.
+const l = getFooterLegalCopy(locale);
 ---
 
 <footer class='sub-footer' data-od-id='footer'>
@@ -126,26 +122,31 @@ const l = L[locale as keyof typeof L] ?? L.en;
         </ul>
       </div>
 
-      <div class='sub-footer-col'>
-        <h5><a href={href('/community/')}>{menu.community}</a></h5>
-        <ul>
-          <li><a href={href('/community/contributors/')}>{menu.communityItems.contributors}</a></li>
-          <li><a href={href('/community/ambassadors/')}>{menu.communityItems.ambassadors}</a></li>
-          <li><a href={href('/community/moderators/')}>{menu.communityItems.moderators}</a></li>
-        </ul>
-      </div>
-
-      <div class='sub-footer-col'>
-        <h5>{l.company}</h5>
-        <ul>
-          <li><a href={href('/about/')}>{l.about}</a></li>
-          <li><a href={href('/careers/')}>{l.careers}</a></li>
-          <li><a href={href('/faq/')}>{l.faq}</a></li>
-          <li><a href={href('/privacy/')}>{l.privacy}</a></li>
-          <li><a href={href('/terms/')}>{l.terms}</a></li>
-          <li><a href={REPO} target='_blank' rel='noopener'>{ui.footer.github}</a></li>
-          <li><a href={DISCORD} target='_blank' rel='noopener'>{ui.footer.discord}</a></li>
-        </ul>
+      {/* Community + Company share one grid column, stacked vertically. Eight
+          nav sections into a 7-track grid used to orphan Company onto a second
+          row; pairing the two shortest sections keeps everything on one row. */}
+      <div class='sub-footer-col-stack'>
+        <div class='sub-footer-col'>
+          <h5><a href={href('/community/')}>{menu.community}</a></h5>
+          <ul>
+            <li><a href={href('/community/contributors/')}>{menu.communityItems.contributors}</a></li>
+            <li><a href={href('/community/ambassadors/')}>{menu.communityItems.ambassadors}</a></li>
+            <li><a href={href('/community/moderators/')}>{menu.communityItems.moderators}</a></li>
+          </ul>
+        </div>
+
+        <div class='sub-footer-col'>
+          <h5>{l.company}</h5>
+          <ul>
+            <li><a href={href('/about/')}>{l.about}</a></li>
+            <li><a href={href('/careers/')}>{l.careers}</a></li>
+            <li><a href={href('/faq/')}>{l.faq}</a></li>
+            <li><a href={href('/privacy/')}>{l.privacy}</a></li>
+            <li><a href={href('/terms/')}>{l.terms}</a></li>
+            <li><a href={REPO} target='_blank' rel='noopener'>{ui.footer.github}</a></li>
+            <li><a href={DISCORD} target='_blank' rel='noopener'>{ui.footer.discord}</a></li>
+          </ul>
+        </div>
       </div>
     </div>
 

apps/landing-page/app/_partials/comparison-v4.css

@@ -17,8 +17,16 @@
 .v4sub{font-size:18px;line-height:1.55;color:var(--ink-soft);font-weight:500;margin:0 0 24px;max-width:520px}
 .v4dek{font-size:18px;line-height:1.65;color:var(--ink-soft);max-width:660px;margin:0 0 34px}
 .v4cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
-.v4btn-p{background:var(--ink);color:#fff;font-weight:600;font-size:15px;padding:15px 28px;border-radius:var(--spacing-8);text-decoration:none;display:inline-flex;align-items:center;white-space:nowrap}
-.v4btn-g{color:var(--ink);font-weight:600;font-size:15px;padding:15px 24px;border-radius:var(--spacing-8);border:1px solid var(--line);text-decoration:none;display:inline-flex;align-items:center}
+/* Both CTA buttons share one box model (equal padding + a 1px border on each,
+   the primary's border matching its fill) so the filled and outlined buttons
+   stay the same height/shape across every locale — long translated labels no
+   longer make the outlined button wrap or drift out of alignment. The outlined
+   border uses --ink-faint (not the faint --line) so it reads as a real button
+   edge on the near-white paper, not a hairline. */
+.v4btn-p{background:var(--ink);color:#fff;border:1px solid var(--ink);font-weight:600;font-size:15px;padding:14px 27px;border-radius:var(--spacing-8);text-decoration:none;display:inline-flex;align-items:center;white-space:nowrap;transition:background .16s ease,border-color .16s ease}
+.v4btn-p:hover{background:#000;border-color:#000}
+.v4btn-g{color:var(--ink);background:transparent;border:1px solid var(--ink-faint);font-weight:600;font-size:15px;padding:14px 27px;border-radius:var(--spacing-8);text-decoration:none;display:inline-flex;align-items:center;white-space:nowrap;transition:background .16s ease,border-color .16s ease}
+.v4btn-g:hover{border-color:var(--ink);background:var(--paper-warm)}
 /* stats band */
 .v4stats{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
 .v4stats .n{font-size:clamp(34px,4.4vw,52px);line-height:1;font-weight:800;letter-spacing:-.035em;color:var(--ink)}
@@ -77,8 +85,12 @@
 .v4final>.v4in{position:relative;z-index:1}
 .v4final-h{font-size:clamp(30px,4vw,46px);line-height:1.1;letter-spacing:-.025em;font-weight:780;color:#fff;margin:0 0 16px;max-width:760px}
 .v4final-p{font-size:18px;line-height:1.6;color:rgba(255,255,255,.72);margin:0 0 30px;max-width:560px}
-.v4btn-coral{background:var(--coral);color:#0a0a0a;font-weight:700;font-size:15px;padding:15px 28px;border-radius:var(--spacing-8);text-decoration:none;display:inline-flex;align-items:center}
-.v4btn-gd{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35);font-weight:600;font-size:15px;padding:15px 26px;border-radius:var(--spacing-8);text-decoration:none;display:inline-flex;align-items:center}
+/* Final-CTA pair on the dark band: same equal-box treatment as the hero pair.
+   The outlined button's border is lifted to .55 alpha so it stays legible
+   against the ink background when a translated label makes it wider. */
+.v4btn-coral{background:var(--coral);color:#0a0a0a;border:1px solid var(--coral);font-weight:700;font-size:15px;padding:14px 27px;border-radius:var(--spacing-8);text-decoration:none;display:inline-flex;align-items:center;white-space:nowrap}
+.v4btn-gd{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55);font-weight:600;font-size:15px;padding:14px 27px;border-radius:var(--spacing-8);text-decoration:none;display:inline-flex;align-items:center;white-space:nowrap;transition:border-color .16s ease,background .16s ease}
+.v4btn-gd:hover{border-color:#fff;background:rgba(255,255,255,.08)}
 /* hero image (promo moved up) */
 .v4heroimg{margin:44px auto 0;max-width:740px}
 .v4heroimg img{width:100%;border-radius:var(--spacing-8);box-shadow:0 30px 64px -36px rgba(20,20,30,.5);display:block}

apps/landing-page/app/cta-actions.ts

@@ -0,0 +1,40 @@
+// Shared CTA-action shaping for the comparison (/alternatives/*) and agent
+// (/agents/*-design/) landing pages.
+//
+// These pages lead with the desktop download: drop the generic "get started"
+// CTA (the /quickstart/ action) and surface only two buttons — Download,
+// emphasized as the primary, and Star on GitHub as the secondary. Actions are
+// matched by their locale-stable hrefs, so this holds across every translation
+// without editing per-locale copy.
+//
+// The download button always points at the on-site download page
+// (DOWNLOAD_HREF), regardless of what the (drifted) per-locale copy had — the
+// English base used /download/ while older translated copy linked straight to
+// GitHub /releases; both are normalised here to the localized download page.
+
+export const CTA_REPO = 'https://github.com/nexu-io/open-design';
+export const CTA_REPO_RELEASES = `${CTA_REPO}/releases`;
+// On-site download page; ctaHref() localizes this per locale.
+export const DOWNLOAD_HREF = '/download/';
+const GET_STARTED_HREF = '/quickstart/';
+
+export type CtaAction = {
+  label: string;
+  href: string;
+  variant?: string;
+  external?: boolean;
+};
+
+const isStar = (a: CtaAction) => a.href === CTA_REPO;
+
+export const downloadFirstCtas = (actions: readonly CtaAction[]): CtaAction[] => {
+  const kept = actions.filter((a) => a.href !== GET_STARTED_HREF);
+  const download = kept.find((a) => !isStar(a));
+  const star = kept.find(isStar);
+  if (!download) return [...actions]; // unexpected shape: leave untouched
+  const out: CtaAction[] = [
+    { ...download, href: DOWNLOAD_HREF, external: false, variant: 'primary' },
+  ];
+  if (star) out.push({ ...star, variant: 'ghost' });
+  return out;
+};

apps/landing-page/app/footer-legal-i18n.ts

@@ -0,0 +1,55 @@
+// Localized labels for the footer's Company / legal column, shared by the
+// sub-page footer (site-footer.astro) and the homepage footer (page.tsx).
+//
+// These used to live in a small inline map that only covered en/zh/zh-tw, so
+// every other locale silently fell back to English in the Company column.
+// This module carries all landing locales; getFooterLegalCopy() falls back to
+// English for any code not present.
+import type { LandingLocaleCode } from './i18n';
+
+export interface FooterLegalCopy {
+  company: string;
+  about: string;
+  careers: string;
+  faq: string;
+  privacy: string;
+  terms: string;
+  allAgents: string;
+  allSolutions: string;
+}
+
+const EN: FooterLegalCopy = {
+  company: 'Company',
+  about: 'About',
+  careers: 'Careers',
+  faq: 'FAQ',
+  privacy: 'Privacy Policy',
+  terms: 'Terms',
+  allAgents: 'All agents',
+  allSolutions: 'All use cases',
+};
+
+const FOOTER_LEGAL_COPY = {
+  en: EN,
+  zh: { company: '公司', about: '关于', careers: '招聘', faq: '常见问题', privacy: '隐私政策', terms: '服务条款', allAgents: '全部 Agent', allSolutions: '全部场景' },
+  'zh-tw': { company: '公司', about: '關於', careers: '招聘', faq: '常見問題', privacy: '隱私政策', terms: '服務條款', allAgents: '全部 Agent', allSolutions: '全部場景' },
+  ja: { company: '会社情報', about: '概要', careers: '採用情報', faq: 'よくある質問', privacy: 'プライバシーポリシー', terms: '利用規約', allAgents: 'すべてのエージェント', allSolutions: 'すべてのユースケース' },
+  ko: { company: '회사', about: '소개', careers: '채용', faq: '자주 묻는 질문', privacy: '개인정보 처리방침', terms: '이용약관', allAgents: '모든 에이전트', allSolutions: '모든 사용 사례' },
+  de: { company: 'Unternehmen', about: 'Über uns', careers: 'Karriere', faq: 'FAQ', privacy: 'Datenschutz', terms: 'Nutzungsbedingungen', allAgents: 'Alle Agents', allSolutions: 'Alle Anwendungsfälle' },
+  fr: { company: 'Entreprise', about: 'À propos', careers: 'Carrières', faq: 'FAQ', privacy: 'Confidentialité', terms: 'Conditions', allAgents: 'Tous les agents', allSolutions: 'Tous les cas d’usage' },
+  ru: { company: 'Компания', about: 'О нас', careers: 'Вакансии', faq: 'Частые вопросы', privacy: 'Конфиденциальность', terms: 'Условия', allAgents: 'Все агенты', allSolutions: 'Все сценарии' },
+  es: { company: 'Empresa', about: 'Acerca de', careers: 'Empleo', faq: 'Preguntas frecuentes', privacy: 'Privacidad', terms: 'Términos', allAgents: 'Todos los agentes', allSolutions: 'Todos los casos de uso' },
+  'pt-br': { company: 'Empresa', about: 'Sobre', careers: 'Carreiras', faq: 'Perguntas frequentes', privacy: 'Privacidade', terms: 'Termos', allAgents: 'Todos os agentes', allSolutions: 'Todos os casos de uso' },
+  it: { company: 'Azienda', about: 'Chi siamo', careers: 'Lavora con noi', faq: 'FAQ', privacy: 'Privacy', terms: 'Termini', allAgents: 'Tutti gli agenti', allSolutions: 'Tutti i casi d’uso' },
+  vi: { company: 'Công ty', about: 'Giới thiệu', careers: 'Tuyển dụng', faq: 'Câu hỏi thường gặp', privacy: 'Quyền riêng tư', terms: 'Điều khoản', allAgents: 'Tất cả agent', allSolutions: 'Tất cả trường hợp dùng' },
+  pl: { company: 'Firma', about: 'O nas', careers: 'Kariera', faq: 'FAQ', privacy: 'Prywatność', terms: 'Regulamin', allAgents: 'Wszystkie agenty', allSolutions: 'Wszystkie zastosowania' },
+  id: { company: 'Perusahaan', about: 'Tentang', careers: 'Karier', faq: 'FAQ', privacy: 'Privasi', terms: 'Ketentuan', allAgents: 'Semua agent', allSolutions: 'Semua kasus penggunaan' },
+  nl: { company: 'Bedrijf', about: 'Over ons', careers: 'Vacatures', faq: 'FAQ', privacy: 'Privacy', terms: 'Voorwaarden', allAgents: 'Alle agents', allSolutions: 'Alle toepassingen' },
+  ar: { company: 'الشركة', about: 'من نحن', careers: 'الوظائف', faq: 'الأسئلة الشائعة', privacy: 'سياسة الخصوصية', terms: 'الشروط', allAgents: 'كل الوكلاء', allSolutions: 'كل حالات الاستخدام' },
+  tr: { company: 'Şirket', about: 'Hakkımızda', careers: 'Kariyer', faq: 'SSS', privacy: 'Gizlilik', terms: 'Şartlar', allAgents: 'Tüm agent’lar', allSolutions: 'Tüm kullanım senaryoları' },
+  uk: { company: 'Компанія', about: 'Про нас', careers: 'Кар’єра', faq: 'Часті запитання', privacy: 'Конфіденційність', terms: 'Умови', allAgents: 'Усі агенти', allSolutions: 'Усі сценарії' },
+} satisfies Record<LandingLocaleCode, FooterLegalCopy>;
+
+export function getFooterLegalCopy(locale: string): FooterLegalCopy {
+  return (FOOTER_LEGAL_COPY as Record<string, FooterLegalCopy>)[locale] ?? EN;
+}

apps/landing-page/app/globals.css

@@ -5191,6 +5191,15 @@ footer .container {
   grid-template-columns: repeat(7, minmax(0, 1fr));
   gap: 28px;
   margin-bottom: 36px;
+  align-items: start;
+}
+/* A grid cell that stacks two short nav sections vertically so the sub-page
+   footer's eight sections fit the 7-track grid without a section orphaning
+   onto a second row (used for Community + Company in site-footer.astro). */
+.sub-footer-col-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
 }
 .sub-footer-col h5 {
   font-family: var(--mono);

apps/landing-page/app/page.tsx

@@ -32,6 +32,7 @@ import {
   PRECISE_LAZY_PLACEHOLDER,
 } from './image-assets';
 import { getHomeExtra, getHomeCta } from './home-translations';
+import { getFooterLegalCopy } from './footer-legal-i18n';
 
 /**
  * `<img>` wrapper for non-hero homepage images. Outputs `data-precise-src`
@@ -189,13 +190,6 @@ const FOOTER_AGENTS = [
   { name: 'OpenCode', route: 'opencode-design' },
 ] as const;
 
-// Legal / company labels — small inline map (en/zh/zh-tw, fallback en) kept
-// identical to `site-footer.astro` so the two footers never drift.
-const FOOTER_LEGAL = {
-  en: { company: 'Company', about: 'About', careers: 'Careers', faq: 'FAQ', privacy: 'Privacy Policy', terms: 'Terms', allAgents: 'All agents' },
-  zh: { company: '公司', about: '关于', careers: '招聘', faq: '常见问题', privacy: '隐私政策', terms: '服务条款', allAgents: '全部 Agent' },
-  'zh-tw': { company: '公司', about: '關於', careers: '招聘', faq: '常見問題', privacy: '隱私政策', terms: '服務條款', allAgents: '全部 Agent' },
-} satisfies Record<string, Record<string, string>>;
 
 const ext = {
   target: '_blank',
@@ -334,8 +328,7 @@ export default function Page({
   const home = getHomePageCopy(locale);
   const ui = getLandingUiCopy(locale);
   const menu = getHeaderProductMenuCopy(locale);
-  const footL =
-    FOOTER_LEGAL[locale as keyof typeof FOOTER_LEGAL] ?? FOOTER_LEGAL.en;
+  const footL = getFooterLegalCopy(locale);
   const localeDef = getLocaleDefinition(locale);
   const localeOptions = LANDING_LOCALES.map((entry) => ({
     ...entry,