> ## 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 Foundation

> モバイル・デスクトップ・TV デバイスで BRICKS アプリケーションを動作させるクロスプラットフォームランタイム

export const FeatureCard = ({ icon, title, description, href }) => {
  const Tag = href ? 'a' : 'div';
  return (
    <Tag href={href} className={`block rounded-2xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5 p-6 no-underline ${href ? 'group 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>
    </Tag>
  );
};

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 Foundation
        </h1>
      </div>
    </div>

    <p className="text-xl text-gray-600 dark:text-gray-300 font-medium mb-2">
      アプリを <span className="text-[#4b8ae2]">あらゆる場所で実行。</span>
    </p>

    <p className="text-lg text-gray-500 dark:text-gray-400 max-w-2xl mb-8 leading-relaxed">
      BRICKS Foundation は、<a href="https://bricks.tools" className="text-[#4b8ae2] hover:text-[#3f7dd4] no-underline font-medium">BRICKS</a> アプリケーションをスマートフォン、タブレット、デスクトップ、TV、組込みデバイスで動作させるクロスプラットフォームランタイムです。デバイスをワークスペースにバインドすれば、数秒でコンテンツの表示を開始できます。
    </p>

    <div className="flex flex-wrap gap-3">
      <a href="/ja/foundation/installation" 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://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 について
      </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="単一のコードベースで iOS、Android、macOS、Windows、Linux、Raspberry Pi 上の BRICKS アプリを動作させます。" href="/ja/foundation/installation" />

      <FeatureCard icon="🔗" title="デバイスバインド" description="パスコードまたは QR コードでデバイスをワークスペースにバインドし、BRICKS Controller からリモート管理します。" href="/ja/foundation/device-binding" />

      <FeatureCard icon="🚀" title="アプリの起動" description="デバイスへのアプリ割り当て、バージョン切替、キャッシュの更新・クリアをローカルまたはリモートで実行。" href="/ja/foundation/launch-applications" />

      <FeatureCard icon="🐛" title="デバッグパネル" description="データ値、ジェネレーター状態、キャンバス情報をリアルタイムで確認するデバイス上のオーバーレイ。" href="/ja/foundation/debug-panel" />

      <FeatureCard icon="💻" title="ローカルデバッグ" description="Chrome DevTools をローカルネットワーク経由で接続し、DOM の検査、JavaScript のデバッグ、パフォーマンス計測を行います。" href="/ja/foundation/local-debugging" />

      <FeatureCard icon="🔄" title="ローカル同期" description="同一 LAN 上のデバイス間でアプリのデータと状態を低遅延で同期します。" href="/ja/foundation/local-sync" />

      <FeatureCard icon="📡" title="リモートデバッグ" description="BRICKS Controller を通じて、現場に設置したデバイスのアプリプロパティをリモートから検査。" href="/ja/foundation/remote-debug" />

      <FeatureCard icon="📊" title="アクティビティログ監視" description="デバイスイベント、アプリ動作、データ変更、エラーを長期的に記録・確認します。" href="/ja/foundation/activity-log" />

      <FeatureCard icon="🧠" title="Buttress 推論オフロード" description="デバイスのハードウェアでは追いつかない場合に、LAN 上の Buttress サーバーへ LLM や音声認識の推論をオフロードします。" href="/ja/foundation/buttress" />
    </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="iOS、Android、macOS、Windows、Linux、Raspberry Pi 向けの BRICKS Foundation を入手します。" href="/ja/foundation/installation" linkText="インストールガイド" />

      <StepItem number="2" title="インストールと起動" description="デバイスにアプリをインストールして開きます。" />

      <StepItem number="3" title="デバイスをバインド" description="デバイス上でパスコードを生成し、BRICKS Controller に入力してワークスペースにバインドします。" href="/ja/foundation/device-binding" linkText="デバイスバインドガイド" />

      <StepItem number="4" title="アプリを実行" description="BRICKS Controller からデバイスにアプリを割り当てると、自動的に実行が開始されます。" href="/ja/foundation/launch-applications" linkText="アプリの起動" />
    </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-3 gap-4">
      <a href="/ja/foundation/installation" 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 text-center">
        <h3 className="text-sm font-semibold text-gray-900 dark:text-white m-0">モバイル</h3>
        <p className="text-xs text-gray-400 dark:text-gray-500 mt-1 mb-3">iOS & Android</p>

        <span className="inline-flex items-center px-3 py-1.5 rounded-lg bg-[#4b8ae2]/10 text-[#4b8ae2] text-xs font-medium group-hover:bg-[#4b8ae2] group-hover:text-white transition-colors">
          インストールガイド →
        </span>
      </a>

      <a href="/ja/foundation/installation" 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 text-center">
        <h3 className="text-sm font-semibold text-gray-900 dark:text-white m-0">デスクトップ</h3>
        <p className="text-xs text-gray-400 dark:text-gray-500 mt-1 mb-3">macOS、Windows、Linux</p>

        <span className="inline-flex items-center px-3 py-1.5 rounded-lg bg-[#4b8ae2]/10 text-[#4b8ae2] text-xs font-medium group-hover:bg-[#4b8ae2] group-hover:text-white transition-colors">
          インストールガイド →
        </span>
      </a>

      <a href="/ja/foundation/installation" 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 text-center">
        <h3 className="text-sm font-semibold text-gray-900 dark:text-white m-0">組込み</h3>
        <p className="text-xs text-gray-400 dark:text-gray-500 mt-1 mb-3">Raspberry Pi</p>

        <span className="inline-flex items-center px-3 py-1.5 rounded-lg bg-[#4b8ae2]/10 text-[#4b8ae2] text-xs font-medium group-hover:bg-[#4b8ae2] group-hover:text-white transition-colors">
          インストールガイド →
        </span>
      </a>
    </div>
  </div>

  <div>
    <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">
      <div className="rounded-2xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5 p-6">
        <h3 className="text-sm font-semibold text-gray-900 dark:text-white mb-3">モバイル</h3>

        <ul className="text-sm text-gray-500 dark:text-gray-400 space-y-2 m-0 p-0 list-none">
          <li className="flex items-start gap-2"><span className="text-[#4b8ae2] mt-0.5">•</span> iOS 14 以降</li>
          <li className="flex items-start gap-2"><span className="text-[#4b8ae2] mt-0.5">•</span> Android 8.0 以降</li>
        </ul>
      </div>

      <div className="rounded-2xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5 p-6">
        <h3 className="text-sm font-semibold text-gray-900 dark:text-white mb-3">デスクトップ</h3>

        <ul className="text-sm text-gray-500 dark:text-gray-400 space-y-2 m-0 p-0 list-none">
          <li className="flex items-start gap-2"><span className="text-[#4b8ae2] mt-0.5">•</span> macOS 11+ (ARM64、x64)</li>
          <li className="flex items-start gap-2"><span className="text-[#4b8ae2] mt-0.5">•</span> Windows 10+ (x64、ARM64)</li>
          <li className="flex items-start gap-2"><span className="text-[#4b8ae2] mt-0.5">•</span> Linux (x86\_64、ARM64)</li>
        </ul>
      </div>

      <div className="rounded-2xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5 p-6">
        <h3 className="text-sm font-semibold text-gray-900 dark:text-white mb-3">組込み</h3>

        <ul className="text-sm text-gray-500 dark:text-gray-400 space-y-2 m-0 p-0 list-none">
          <li className="flex items-start gap-2"><span className="text-[#4b8ae2] mt-0.5">•</span> Raspberry Pi 4 以降(64bit OS)</li>
        </ul>
      </div>
    </div>
  </div>
</div>