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

> 於手機、桌面與電視裝置執行 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> 應用。將裝置綁定至工作區，即可在數秒內開始顯示內容。
    </p>

    <div className="flex flex-wrap gap-3">
      <a href="/zh-Hant/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="/zh-Hant/foundation/installation" />

      <FeatureCard icon="🔗" title="裝置綁定" description="以通行碼或 QR code 將裝置綁定至工作區，之後即可從 BRICKS Controller 遠端管理。" href="/zh-Hant/foundation/device-binding" />

      <FeatureCard icon="🚀" title="啟動應用" description="將應用指派給裝置、切換版本、重新整理或清除快取 — 無論在本機或遠端。" href="/zh-Hant/foundation/launch-applications" />

      <FeatureCard icon="🐛" title="除錯面板" description="裝置內建的疊加面板，可即時檢視資料值、產生器狀態與畫布資訊。" href="/zh-Hant/foundation/debug-panel" />

      <FeatureCard icon="💻" title="本機除錯" description="透過區域網路連接 Chrome DevTools，檢視 DOM、除錯 JavaScript 並進行效能分析。" href="/zh-Hant/foundation/local-debugging" />

      <FeatureCard icon="🔄" title="Local Sync" description="在同一區域網路的裝置之間以極低延遲同步應用資料與狀態。" href="/zh-Hant/foundation/local-sync" />

      <FeatureCard icon="📡" title="遠端除錯" description="透過 BRICKS Controller 遠端檢視已部署裝置的應用屬性。" href="/zh-Hant/foundation/remote-debug" />

      <FeatureCard icon="📊" title="Activity Log 監控" description="長期記錄並檢視裝置事件、應用動作、資料變更與錯誤。" href="/zh-Hant/foundation/activity-log" />

      <FeatureCard icon="🧠" title="Buttress 推論卸載" description="當裝置硬體效能不足時，將 LLM 與語音辨識推論卸載至區域網路上的 Buttress 伺服器。" href="/zh-Hant/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="取得適用於您平台的 BRICKS Foundation — iOS、Android、macOS、Windows、Linux 或 Raspberry Pi。" href="/zh-Hant/foundation/installation" linkText="安裝指南" />

      <StepItem number="2" title="安裝並啟動" description="在裝置上安裝並開啟應用程式。" />

      <StepItem number="3" title="綁定裝置" description="在裝置上產生通行碼，再於 BRICKS Controller 輸入以將其綁定至您的工作區。" href="/zh-Hant/foundation/device-binding" linkText="裝置綁定指南" />

      <StepItem number="4" title="執行您的應用" description="從 BRICKS Controller 將應用指派給裝置，即會自動開始執行。" href="/zh-Hant/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="/zh-Hant/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="/zh-Hant/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="/zh-Hant/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 以上(64 位元作業系統)</li>
        </ul>
      </div>
    </div>
  </div>
</div>