> ## 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 平台的文件

export const ProductCard = ({ icon, title, description, href, badge }) => (
  <a href={href} className="group block rounded-2xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5 p-8 no-underline hover:border-[#e2924b]/40 hover:shadow-lg hover:shadow-[#e2924b]/5 transition-all duration-200">
    <div className="flex items-center gap-3 mb-3">
      <span className="text-3xl">{icon}</span>
      <h3 className="text-lg font-semibold text-gray-900 dark:text-white m-0">{title}</h3>
      {badge && (
        <span className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400 border border-amber-200 dark:border-amber-800/40">
          <span className="w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse" />
          {badge}
        </span>
      )}
    </div>
    <p className="text-sm text-gray-500 dark:text-gray-400 m-0 leading-relaxed">{description}</p>
    <span className="inline-flex items-center mt-4 text-sm font-medium text-[#e2924b] group-hover:text-[#d4863f] transition-colors">
      檢視文件 →
    </span>
  </a>
);

<div className="max-w-5xl mx-auto px-6 py-16">
  <div className="mb-16">
    <h1 className="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white tracking-tight mb-4">
      <span className="text-[#e2924b]">BRICKS</span> 文件
    </h1>

    <p className="text-lg text-gray-500 dark:text-gray-400 max-w-2xl leading-relaxed">
      <a href="https://bricks.tools" className="text-[#e2924b] hover:text-[#d4863f] no-underline font-medium">BRICKS</a> 平台的使用指南與參考文件。
    </p>
  </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">
      <ProductCard icon="📱" title="BRICKS Foundation" description="在手機、桌面與專用硬體上執行 BRICKS 應用的運行時應用程式。" href="/zh-Hant/foundation" />

      <ProductCard icon="🧭" title="BRICKS Controller" description="管理工作區、BRICKS Foundation、應用程式、模組與媒體的網頁介面。" href="/zh-Hant/controller" />

      <ProductCard icon="🖥️" title="CTOR" description="內建 AI 代理的桌面 IDE，用於建置與部署 BRICKS 應用。" href="/zh-Hant/ctor" badge="預覽版" />

      <ProductCard icon="📦" title="bricks-ctor" description="以程式碼定義、建置與部署 BRICKS 應用的 TypeScript SDK。" href="/zh-Hant/ctor-pkg" badge="預覽版" />

      <ProductCard icon="🧠" title="BRICKS Buttress" description="將 LLM 與語音辨識推論從 BRICKS Foundation 裝置卸載至區域網路硬體的後端服務。" href="/zh-Hant/buttress" badge="預覽版" />

      <ProductCard icon="⌨️" title="BRICKS CLI" description="在工作區中管理 BRICKS Foundation、應用程式、模組與媒體的命令列工具。" href="/zh-Hant/cli" />
    </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-3 gap-4">
      <a href="https://bricks.tools" 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-[#e2924b]/40 transition-all duration-200">
        <h3 className="text-sm font-semibold text-gray-900 dark:text-white m-0 mb-1">BRICKS 官方網站</h3>
        <p className="text-xs text-gray-400 dark:text-gray-500 m-0">bricks.tools</p>
      </a>

      <a href="https://control.bricks.tools" 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-[#e2924b]/40 transition-all duration-200">
        <h3 className="text-sm font-semibold text-gray-900 dark:text-white m-0 mb-1">BRICKS Controller</h3>
        <p className="text-xs text-gray-400 dark:text-gray-500 m-0">control.bricks.tools</p>
      </a>

      <a href="mailto:support@bricks.tools" 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-[#e2924b]/40 transition-all duration-200">
        <h3 className="text-sm font-semibold text-gray-900 dark:text-white m-0 mb-1">技術支援</h3>
        <p className="text-xs text-gray-400 dark:text-gray-500 m-0">[support@bricks.tools](mailto:support@bricks.tools)</p>
      </a>
    </div>
  </div>
</div>