> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bricks.tools/llms.txt
> Use this file to discover all available pages before exploring further.

# BRICKS Controller

> デバイス・アプリケーション・モジュール・ワークスペースを管理する Web インターフェース

export const FeatureCard = ({ icon, title, description, href }) => (
  <a href={href} className="group block rounded-2xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5 p-6 no-underline hover:border-[#4b8ae2]/40 hover:shadow-lg hover:shadow-[#4b8ae2]/5 transition-all duration-200">
    <div className="flex items-center gap-3 mb-3">
      <span className="text-2xl">{icon}</span>
      <h3 className="text-base font-semibold text-gray-900 dark:text-white m-0">{title}</h3>
    </div>
    <p className="text-sm text-gray-500 dark:text-gray-400 m-0 leading-relaxed">{description}</p>
  </a>
);

export const StepItem = ({ number, title, description, href, linkText }) => (
  <div className="flex gap-4">
    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-[#4b8ae2] flex items-center justify-center">
      <span className="text-sm font-bold text-white">{number}</span>
    </div>
    <div className="pb-8">
      <h4 className="text-sm font-semibold text-gray-900 dark:text-white m-0">{title}</h4>
      <p className="text-sm text-gray-500 dark:text-gray-400 mt-1 mb-1">{description}</p>
      {href && <a href={href} className="text-sm font-medium text-[#4b8ae2] hover:text-[#3f7dd4] no-underline">{linkText} →</a>}
    </div>
  </div>
);

<div className="max-w-5xl mx-auto px-6 py-16">
  <div className="mb-16">
    <div className="flex items-center gap-4 mb-6">
      <div>
        <h1 className="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white tracking-tight m-0">
          BRICKS Controller
        </h1>
      </div>
    </div>

    <p className="text-xl text-gray-600 dark:text-gray-300 font-medium mb-2">
      すべてを <span className="text-[#4b8ae2]">Web から管理。</span>
    </p>

    <p className="text-lg text-gray-500 dark:text-gray-400 max-w-2xl mb-8 leading-relaxed">
      <a href="https://control.bricks.tools" className="text-[#4b8ae2] hover:text-[#3f7dd4] no-underline font-medium">BRICKS Controller</a> は <a href="https://bricks.tools" className="text-[#4b8ae2] hover:text-[#3f7dd4] no-underline font-medium">BRICKS</a> プラットフォームの Web 管理インターフェースです。デバイス、アプリケーション、モジュール、メディア、ワークスペースをブラウザからすべて管理できます。
    </p>

    <div className="flex flex-wrap gap-3">
      <a href="/ja/controller/workspaces" className="inline-flex items-center px-5 py-2.5 rounded-lg bg-[#4b8ae2] hover:bg-[#3f7dd4] text-white text-sm font-medium no-underline transition-colors">
        はじめる
      </a>

      <a href="https://control.bricks.tools" className="inline-flex items-center px-5 py-2.5 rounded-lg border border-gray-300 dark:border-white/15 text-gray-700 dark:text-gray-300 text-sm font-medium no-underline hover:bg-gray-50 dark:hover:bg-white/5 transition-colors">
        BRICKS Controller を開く
      </a>
    </div>
  </div>

  <div className="mb-16">
    <h2 className="text-xs font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-6">機能</h2>

    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
      <FeatureCard icon="👥" title="ワークスペース管理" description="ワークスペースの作成、メンバー・ロール管理、API トークンとパスコードの発行。" href="/ja/controller/workspaces" />

      <FeatureCard icon="📱" title="デバイス管理" description="デバイスのバインド、オンライン状態の監視、スクリーンショット取得、アクション送信、グループ化。" href="/ja/controller/devices" />

      <FeatureCard icon="📦" title="アプリケーション管理" description="アプリ作成、バージョン管理、ビューポート設定、デバイスのバインド、リリースの共有。" href="/ja/controller/applications" />

      <FeatureCard icon="🧩" title="モジュール管理" description="再利用可能なモジュールを作成し、ワークスペース内のアプリで共有します。" href="/ja/controller/modules" />

      <FeatureCard icon="🖼️" title="メディア管理" description="メディアファイルのアップロード・整理・配信。タグ付け、AI 分析、画像処理にも対応。" href="/ja/controller/media" />

      <FeatureCard icon="🗄️" title="Data Bank" description="アプリケーションが実行時に読み書きできる構造化データを保存・管理します。" href="/ja/controller/data-bank" />
    </div>
  </div>

  <div className="mb-16">
    <h2 className="text-xs font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-6">クイックスタート</h2>

    <div className="rounded-2xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5 p-8">
      <StepItem number="1" title="ワークスペースを作成" description="サインインして、デバイス、アプリ、チームメンバーを整理するワークスペースを設定します。" href="/ja/controller/workspaces" linkText="ワークスペース管理" />

      <StepItem number="2" title="デバイスをバインド" description="デバイスに BRICKS Foundation をインストールし、パスコードを入力してワークスペースにバインドします。" href="/ja/controller/devices" linkText="デバイス管理" />

      <StepItem number="3" title="アプリを作成" description="新しいアプリを作成するか、既存のアプリから bricks-ctor を生成します。" href="/ja/controller/applications" linkText="アプリケーション管理" />

      <StepItem number="4" title="デバイスへデプロイ" description="アプリをデバイスまたはデバイスグループに割り当てると、自動で実行が開始されます。" href="/ja/controller/applications" linkText="アプリケーション管理" />
    </div>
  </div>
</div>