docs: redesign to fit more new centralized design (#51)

Author: dkundel-openai

docs/src/components/Hero.astro

@@ -3,24 +3,24 @@ import { Code, TabItem, Tabs } from '@astrojs/starlight/components';
 import helloWorldExample from '../../../examples/docs/toppage/textAgent.ts?raw';
 import helloWorldVoiceExample from '../../../examples/docs/toppage/voiceAgent.ts?raw';
 const path = Astro.url.pathname;
-const pathPrefix = path !== '/' ? !path.endsWith("/") ? path + "/" : path : '';
+const pathPrefix =
+  path !== '/' ? (!path.endsWith('/') ? path + '/' : path) : '';
 ---
 
 <div class="openai-hero">
   <div class="openai-hero-container flex gap-4">
-    <a
-      href={`${pathPrefix}guides/quickstart`}
-      class="openai-quickstart flex-1 flex items-center"
-    >
+    <div class="openai-quickstart flex-1 flex items-center">
       <div>
         <h2 class="title"><slot name="title" /></h2>
         <p>
           <slot name="description" />
         </p>
-        <span class="openai-hero-cta"><slot name="cta" /></span>
+        <a href={`${pathPrefix}guides/quickstart`} class="openai-hero-cta">
+          <slot name="cta" />
+        </a>
       </div>
-    </a>
-    <div class="flex-1 overflow-x-scroll">
+    </div>
+    <div class="openai-hero-code flex-1 overflow-x-scroll">
       <Tabs>
         <TabItem label="Text Agent">
           <Code lang="typescript" code={helloWorldExample} />

docs/src/content/docs/index.mdx

@@ -11,11 +11,8 @@ import helloWorldExample from '../../../../examples/docs/hello-world.ts?raw';
 
 <Hero>
   <Fragment slot="title">Quickstart</Fragment>
-  <Fragment slot="description">
-    Build your first agent in minutes. Learn the basics of the OpenAI Agents
-    SDK.
-  </Fragment>
-  <Fragment slot="cta">Get started</Fragment>
+  <Fragment slot="description">Build your first agent in minutes.</Fragment>
+  <Fragment slot="cta">Let's build</Fragment>
 </Hero>
 
 The [OpenAI Agents SDK for TypeScript](https://github.com/openai/openai-agents-js)
@@ -36,12 +33,6 @@ real-world applications without a steep learning curve. In addition, the SDK
 comes with built-in **tracing** that lets you visualize and debug your agentic
 flows, as well as evaluate them and even fine-tune models for your application.
 
-<LinkCard
-  title="OpenAI Agents SDK for Python"
-  href="https://github.com/openai/openai-agents-python"
-  description="Build agentic AI apps with Python."
-/>
-
 ## Why use the Agents SDK
 
 The SDK has two driving design principles:

docs/src/content/docs/ja/index.mdx

@@ -11,55 +11,47 @@ import helloWorldExample from '../../../../../examples/docs/hello-world.ts?raw';
 
 <Hero>
   <Fragment slot="title">クイックスタート</Fragment>
-  <Fragment slot="description">
-    数分で最初のエージェントを構築できます。OpenAI Agents SDK
-    の基本を学びましょう。
-  </Fragment>
-  <Fragment slot="cta">はじめる</Fragment>
+  <Fragment slot="description">数分で最初のエージェントを構築します。</Fragment>
+  <Fragment slot="cta">作ってみよう</Fragment>
 </Hero>
 
-[TypeScript 用 OpenAI Agents SDK](https://github.com/openai/openai-agents-js) は、最小限の抽象化で軽量かつ使いやすいパッケージとしてエージェント指向の AI アプリを構築できるようにします。これは、以前のエージェント向け実験プロジェクトである [Swarm](https://github.com/openai/swarm/tree/main) を本番環境向けにアップグレードしたもので、[Python でも利用可能です](https://github.com/openai/openai-agents-python)。Agents SDK が提供する基本コンポーネントはごく少数です。
+[OpenAI Agents SDK for TypeScript](https://github.com/openai/openai-agents-js) は、きわめて少ない抽象化でエージェント指向の AI アプリを簡単かつ軽量に構築できるパッケージです。これは以前のエージェント向け実験
+[Swarm](https://github.com/openai/swarm/tree/main) を本番利用向けにアップグレードしたもので、[Python 版](https://github.com/openai/openai-agents-python) も提供されています。Agents SDK にはごく少数の基本コンポーネントがあります。
 
-- **エージェント**: `instructions` と `tools` を備えた LLM
-- **ハンドオフ**: 特定のタスクを別のエージェントに委任する仕組み
-- **ガードレール**: エージェントへの入力を検証する仕組み
+- ** エージェント **: instructions と tools を備えた LLM
+- ** ハンドオフ **: 特定タスクを別のエージェントに委任
+- ** ガードレール **: エージェントへの入力を検証
 
-TypeScript と組み合わせることで、これらの基本コンポーネントだけでツールとエージェント間の複雑な関係を表現でき、学習コストを抑えつつ実用的なアプリケーションを構築できます。さらに、SDK には **トレーシング** が組み込まれており、エージェントフローの可視化やデバッグ、評価、さらにはアプリ向けモデルのファインチューニングまで行えます。
+TypeScript と組み合わせることで、これらの基本コンポーネントはツールとエージェント間の複雑な関係を表現でき、学習コストを抑えつつ実運用アプリを構築できます。さらに SDK には ** トレーシング ** が組み込まれており、エージェントフローの可視化とデバッグ、評価、さらにはモデルのファインチューニングまで行えます。
 
-<LinkCard
-  title="Python 用 OpenAI Agents SDK"
-  href="https://github.com/openai/openai-agents-python"
-  description="Python でエージェント指向 AI アプリを構築"
-/>
+## Agents SDK を使用する理由
 
-## Agents SDK を利用する理由
+SDK の設計原則は次の 2 つです。
 
-SDK の設計原則は次の二つです。
+1. 使う価値のある十分な機能を備えつつ、学習が容易な最小限の基本コンポーネント
+2. デフォルトで優れた動作を提供しつつ、細部を自由にカスタマイズ可能
 
-1. 使う価値のある機能を十分に備えつつ、習得が早いようコンポーネントを絞る
-2. デフォルトでもすぐに使えるが、動作を細かくカスタマイズできる
+主な機能は以下のとおりです。
 
-主な特徴は以下のとおりです。
-
-- **エージェントループ**: ツール呼び出し、結果の LLM への送信、LLM が完了するまでのループ処理を内蔵
-- **TypeScript ファースト**: 新しい抽象概念を学ばなくても、言語機能でエージェントをオーケストレーション
-- **ハンドオフ**: 複数エージェント間での協調や委任を実現する強力な機能
-- **ガードレール**: 入力のバリデーションやチェックをエージェントと並行実行し、不合格なら早期終了
-- **関数ツール**: 任意の TypeScript 関数をツール化し、自動スキーマ生成と Zod による検証を提供
-- **トレーシング**: ワークフローの可視化・デバッグ・モニタリングに加え、OpenAI の評価・ファインチューニング・蒸留ツールを活用可能
-- **Realtime Agents**: 自動割り込み検知、コンテキスト管理、ガードレールなどを備えた高機能な音声エージェントを構築
+- ** エージェントループ **: tool を呼び出し、その結果を LLM に送り、LLM が完了するまでループ処理
+- ** TypeScript ファースト **: 新しい抽象化を覚えることなく、言語機能でエージェントを編成・連鎖
+- ** ハンドオフ **: 複数エージェント間の調整と委任を実現する強力な機能
+- ** ガードレール **: 入力検証やチェックをエージェントと並行して実行し、不合格なら早期終了
+- ** 関数ツール **: 任意の TypeScript 関数を自動スキーマ生成と Zod 検証付きで tool 化
+- ** トレーシング **: ワークフローを可視化・デバッグ・監視し、OpenAI の評価、ファインチューニング、蒸留ツールを活用
+- ** Realtime Agents **: 自動割り込み検知、コンテキスト管理、ガードレールなどを備えた高機能音声エージェントを構築
 
 ## インストール
 
 ```bash
 npm install @openai/agents
 ```
 
-## Hello World の例
+## Hello World コード例
 
 <Code lang="typescript" code={helloWorldExample} title="Hello World" />
 
-(_実行する場合は `OPENAI_API_KEY` 環境変数を設定してください_)
+(_実行する場合は、環境変数 `OPENAI_API_KEY` を設定してください_)
 
 ```bash
 export OPENAI_API_KEY=sk-...