xagentAI · lessthanno · Sep 8, 2026 · Sep 8, 2026 · Sep 8, 2026 · Sep 8, 2026
diff --git a/app/docs.css b/app/docs.css
@@ -2,6 +2,80 @@
   margin-top: 1.5rem;
 }
 
+.home-entry-grid {
+  --home-entry-accent: #08f0a5;
+  --home-entry-border: #e1e5e3;
+  --home-entry-ink: #171b1a;
+  --home-entry-muted: #59635f;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+  margin: 1.25rem 0 2.5rem;
+}
+
+.home-entry-card {
+  display: flex;
+  min-width: 0;
+  min-height: 12rem;
+  flex-direction: column;
+  padding: 1.25rem;
+  border: 1px solid var(--home-entry-border);
+  border-radius: 0.85rem;
+  background: #ffffff;
+  color: var(--home-entry-ink);
+  text-decoration: none;
+  transition:
+    border-color 140ms ease,
+    box-shadow 140ms ease,
+    transform 140ms ease;
+}
+
+.home-entry-card:hover {
+  border-color: var(--home-entry-accent);
+  box-shadow: 0 0.75rem 2rem rgba(23, 27, 26, 0.08);
+  color: var(--home-entry-ink);
+  text-decoration: none;
+  transform: translateY(-2px);
+}
+
+.home-entry-card:focus-visible {
+  outline: 2px solid var(--home-entry-accent);
+  outline-offset: 3px;
+}
+
+.home-entry-index {
+  color: #68716e;
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+}
+
+.home-entry-title {
+  margin-top: 1.25rem;
+  color: var(--home-entry-ink);
+  font-size: 1.05rem;
+  line-height: 1.35;
+}
+
+.home-entry-description {
+  margin-top: 0.625rem;
+  color: var(--home-entry-muted);
+  font-size: 0.95rem;
+  line-height: 1.55;
+}
+
+.home-entry-action {
+  width: fit-content;
+  margin-top: auto;
+  padding-top: 1.25rem;
+  border-bottom: 1px solid currentColor;
+  color: var(--home-entry-ink);
+  font-size: 0.875rem;
+  font-weight: 700;
+  line-height: 1.35;
+}
+
 .token-allocation-table:focus-visible {
   border-radius: 0.25rem;
   outline: 2px solid currentColor;
@@ -213,6 +287,14 @@
 }
 
 @media (max-width: 40rem) {
+  .home-entry-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .home-entry-card {
+    min-height: 0;
+  }
+
   .brand-kit-actions,
   .brand-kit-button {
     width: 100%;
@@ -235,3 +317,13 @@
     gap: 0.4rem;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .home-entry-card {
+    transition: none;
+  }
+
+  .home-entry-card:hover {
+    transform: none;
+  }
+}
diff --git a/content/en/changelog.mdx b/content/en/changelog.mdx
@@ -2,6 +2,11 @@
 
 All notable changes to the X-Agent Litepaper and documentation are documented here.
 
+## Homepage Navigation Refresh — September 8, 2026
+
+- Redesigned the homepage entry cards with clearer title-first hierarchy, improved spacing, and more explicit navigation actions.
+- Added responsive two-column and single-column layouts, visible keyboard focus, and synchronized English, Japanese, and Korean presentation.
+
 ## Token Allocation Announcement — September 7, 2026
 
 - Added a dedicated **Announcements** section for public information that may continue to evolve without repeatedly revising the Litepaper.

diff --git a/content/en/index.mdx b/content/en/index.mdx
@@ -2,8 +2,6 @@
 title: X-Agent Overview
 ---
 
-import { Cards } from 'nextra/components'
-
 # X-Agent
 
 > X-Agent: Empowering People to Build Custom AI Agents for ∞ possibilities.
@@ -14,24 +12,32 @@ X-Agent is a next-generation platform connecting Web3 social networks with auton
 
 ## Start here
 
-<Cards num={2}>
-  <Cards.Card title="How X-Agent Works" href="/en/how-it-works">
-    Follow the path from a natural-language request to a deployed, shareable AI
-    Agent.
-  </Cards.Card>
-  <Cards.Card title="Read the Litepaper" href="/en/litepaper">
-    Understand the vision, product model, token mechanics, roadmap, and business
-    model.
-  </Cards.Card>
-  <Cards.Card title="Review XAGT" href="/en/token/overview">
-    Find the current supply, token role, allocation status, and official
-    contract information.
-  </Cards.Card>
-  <Cards.Card title="Verify Security" href="/en/security">
-    Access official contract information and the independent security audit
-    report.
-  </Cards.Card>
-</Cards>
+<div className="home-entry-grid">
+  <a className="home-entry-card" href="/en/how-it-works">
+    <span className="home-entry-index">01</span>
+    <strong className="home-entry-title">How X-Agent Works</strong>
+    <span className="home-entry-description">Follow the path from a natural-language request to a deployed, shareable AI Agent.</span>
+    <span className="home-entry-action">Explore</span>
+  </a>
+  <a className="home-entry-card" href="/en/litepaper">
+    <span className="home-entry-index">02</span>
+    <strong className="home-entry-title">Read the Litepaper</strong>
+    <span className="home-entry-description">Understand the vision, product model, token mechanics, roadmap, and business model.</span>
+    <span className="home-entry-action">Explore</span>
+  </a>
+  <a className="home-entry-card" href="/en/token/overview">
+    <span className="home-entry-index">03</span>
+    <strong className="home-entry-title">Review XAGT</strong>
+    <span className="home-entry-description">Find the current supply, token role, allocation status, and official contract information.</span>
+    <span className="home-entry-action">Explore</span>
+  </a>
+  <a className="home-entry-card" href="/en/security">
+    <span className="home-entry-index">04</span>
+    <strong className="home-entry-title">Verify Security</strong>
+    <span className="home-entry-description">Access official contract information and the independent security audit report.</span>
+    <span className="home-entry-action">Explore</span>
+  </a>
+</div>
 
 ## Latest official update
 

diff --git a/content/ja/changelog.mdx b/content/ja/changelog.mdx
@@ -2,6 +2,11 @@
 
 X-AgentのLitepaperおよびドキュメントの主な変更を記録しています。
 
+## ホームページナビゲーションの更新 — 2026年9月8日
+
+- ホームページの入口カードを、タイトルを優先した明確な情報構造、適切な余白、分かりやすいナビゲーション操作に刷新しました。
+- デスクトップの2列表示とモバイルの1列表示、視認性の高いキーボードフォーカスを追加し、英語・日本語・韓国語で表示を統一しました。
+
 ## トークン配分に関するお知らせ — 2026年9月7日
 
 - Litepaperを繰り返し改訂することなく、継続的に更新される公開情報を掲載できる独立した「お知らせ」セクションを追加しました。

diff --git a/content/ja/index.mdx b/content/ja/index.mdx
@@ -2,8 +2,6 @@
 title: X-Agent概要
 ---
 
-import { Cards } from 'nextra/components'
-
 # X-Agent
 
 > X-Agent: Empowering People to Build Custom AI Agents for ∞ possibilities.
@@ -14,20 +12,32 @@ X-Agentは、Web3ソーシャルネットワークと自律型AIをつなぐ次
 
 ## はじめに
 
-<Cards num={2}>
-  <Cards.Card title="X-Agentの仕組み" href="/ja/how-it-works">
-    自然言語による依頼から、共有可能なAIエージェントを展開するまでの流れを確認します。
-  </Cards.Card>
-  <Cards.Card title="Litepaperを読む" href="/ja/litepaper">
-    ビジョン、プロダクトモデル、トークンメカニズム、ロードマップ、ビジネスモデルを理解します。
-  </Cards.Card>
-  <Cards.Card title="XAGTを確認" href="/ja/token/overview">
-    現在の供給量、トークンの役割、配分状況、公式コントラクト情報を確認します。
-  </Cards.Card>
-  <Cards.Card title="セキュリティを確認" href="/ja/security">
-    公式コントラクト情報と第三者によるセキュリティ監査報告書を確認します。
-  </Cards.Card>
-</Cards>
+<div className="home-entry-grid">
+  <a className="home-entry-card" href="/ja/how-it-works">
+    <span className="home-entry-index">01</span>
+    <strong className="home-entry-title">X-Agentの仕組み</strong>
+    <span className="home-entry-description">自然言語による依頼から、共有可能なAIエージェントを展開するまでの流れを確認します。</span>
+    <span className="home-entry-action">詳しく見る</span>
+  </a>
+  <a className="home-entry-card" href="/ja/litepaper">
+    <span className="home-entry-index">02</span>
+    <strong className="home-entry-title">Litepaperを読む</strong>
+    <span className="home-entry-description">ビジョン、プロダクトモデル、トークンメカニズム、ロードマップ、ビジネスモデルを理解します。</span>
+    <span className="home-entry-action">詳しく見る</span>
+  </a>
+  <a className="home-entry-card" href="/ja/token/overview">
+    <span className="home-entry-index">03</span>
+    <strong className="home-entry-title">XAGTを確認</strong>
+    <span className="home-entry-description">現在の供給量、トークンの役割、配分状況、公式コントラクト情報を確認します。</span>
+    <span className="home-entry-action">詳しく見る</span>
+  </a>
+  <a className="home-entry-card" href="/ja/security">
+    <span className="home-entry-index">04</span>
+    <strong className="home-entry-title">セキュリティを確認</strong>
+    <span className="home-entry-description">公式コントラクト情報と第三者によるセキュリティ監査報告書を確認します。</span>
+    <span className="home-entry-action">詳しく見る</span>
+  </a>
+</div>
 
 ## 最新の公式情報
 

diff --git a/content/ko/changelog.mdx b/content/ko/changelog.mdx
@@ -2,6 +2,11 @@
 
 X-Agent Litepaper 및 문서의 주요 변경 사항을 기록합니다.
 
+## 홈페이지 탐색 개선 — 2026년 9월 8일
+
+- 홈페이지 진입 카드를 제목 중심의 명확한 정보 구조, 개선된 여백, 분명한 탐색 동작으로 새롭게 구성했습니다.
+- 데스크톱 2열 및 모바일 1열 반응형 레이아웃과 명확한 키보드 포커스를 추가하고 영어·일본어·한국어 표시를 통일했습니다.
+
 ## 토큰 배분 공지 — 2026년 9월 7일
 
 - Litepaper를 반복해서 개정하지 않고도 계속 업데이트되는 공개 정보를 게시할 수 있도록 독립된 「공지사항」 섹션을 추가했습니다.

diff --git a/content/ko/index.mdx b/content/ko/index.mdx
@@ -2,8 +2,6 @@
 title: X-Agent 개요
 ---
 
-import { Cards } from 'nextra/components'
-
 # X-Agent
 
 > X-Agent: Empowering People to Build Custom AI Agents for ∞ possibilities.
@@ -14,20 +12,32 @@ X-Agent는 Web3 소셜 네트워크와 자율형 AI를 연결하는 차세대
 
 ## 시작하기
 
-<Cards num={2}>
-  <Cards.Card title="X-Agent 작동 방식" href="/ko/how-it-works">
-    자연어 요청이 배포 및 공유 가능한 AI 에이전트로 이어지는 과정을 확인합니다.
-  </Cards.Card>
-  <Cards.Card title="Litepaper 읽기" href="/ko/litepaper">
-    비전, 제품 모델, 토큰 메커니즘, 로드맵 및 비즈니스 모델을 이해합니다.
-  </Cards.Card>
-  <Cards.Card title="XAGT 살펴보기" href="/ko/token/overview">
-    현재 공급량, 토큰 역할, 배분 상태 및 공식 컨트랙트 정보를 확인합니다.
-  </Cards.Card>
-  <Cards.Card title="보안 확인" href="/ko/security">
-    공식 컨트랙트 정보와 독립적인 보안 감사 보고서를 확인합니다.
-  </Cards.Card>
-</Cards>
+<div className="home-entry-grid">
+  <a className="home-entry-card" href="/ko/how-it-works">
+    <span className="home-entry-index">01</span>
+    <strong className="home-entry-title">X-Agent 작동 방식</strong>
+    <span className="home-entry-description">자연어 요청이 배포 및 공유 가능한 AI 에이전트로 이어지는 과정을 확인합니다.</span>
+    <span className="home-entry-action">자세히 보기</span>
+  </a>
+  <a className="home-entry-card" href="/ko/litepaper">
+    <span className="home-entry-index">02</span>
+    <strong className="home-entry-title">Litepaper 읽기</strong>
+    <span className="home-entry-description">비전, 제품 모델, 토큰 메커니즘, 로드맵 및 비즈니스 모델을 이해합니다.</span>
+    <span className="home-entry-action">자세히 보기</span>
+  </a>
+  <a className="home-entry-card" href="/ko/token/overview">
+    <span className="home-entry-index">03</span>
+    <strong className="home-entry-title">XAGT 살펴보기</strong>
+    <span className="home-entry-description">현재 공급량, 토큰 역할, 배분 상태 및 공식 컨트랙트 정보를 확인합니다.</span>
+    <span className="home-entry-action">자세히 보기</span>
+  </a>
+  <a className="home-entry-card" href="/ko/security">
+    <span className="home-entry-index">04</span>
+    <strong className="home-entry-title">보안 확인</strong>
+    <span className="home-entry-description">공식 컨트랙트 정보와 독립적인 보안 감사 보고서를 확인합니다.</span>
+    <span className="home-entry-action">자세히 보기</span>
+  </a>
+</div>
 
 ## 최신 공식 업데이트
 

diff --git a/scripts/site-smoke.test.mjs b/scripts/site-smoke.test.mjs
@@ -30,6 +30,18 @@ for (const [locale, paths] of Object.entries(routes)) {
 }
 
 for (const locale of ['en', 'ja', 'ko']) {
+  test(`the ${locale} homepage exposes four structured entry cards`, async () => {
+    const response = await request(`/${locale}`)
+    assert.equal(response.status, 200)
+    const html = await response.text()
+    assert.equal((html.match(/class="home-entry-card"/g) || []).length, 4)
+    assert.match(
+      html,
+      /class="home-entry-title"[\s\S]+class="home-entry-description"/
+    )
+    assert.doesNotMatch(html, /class="home-entry-description"><p/)
+  })
+
   test(`the ${locale} announcement index links to its localized detail page`, async () => {
     const response = await request(`/${locale}/announcement`)
     assert.equal(response.status, 200)