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

> Documentation for the BRICKS platform

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">
      View docs →
    </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> Documentation
    </h1>

    <p className="text-lg text-gray-500 dark:text-gray-400 max-w-2xl leading-relaxed">
      Guides and references for the <a href="https://bricks.tools" className="text-[#e2924b] hover:text-[#d4863f] no-underline font-medium">BRICKS</a> platform.
    </p>
  </div>

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

    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
      <ProductCard icon="📱" title="BRICKS Foundation" description="Runtime app for running BRICKS applications on mobile, desktop, and dedicated hardware." href="/foundation" />

      <ProductCard icon="🧭" title="BRICKS Controller" description="Web interface for managing workspaces, BRICKS Foundation, applications, modules, and media." href="/controller" />

      <ProductCard icon="🖥️" title="CTOR" description="A desktop IDE with an integrated AI agent for building and deploying BRICKS applications." href="/ctor" badge="Preview" />

      <ProductCard icon="📦" title="bricks-ctor" description="TypeScript SDK for defining, building, and deploying BRICKS applications as code." href="/ctor-pkg" badge="Preview" />

      <ProductCard icon="🧠" title="BRICKS Buttress" description="Backend service that offloads LLM and speech-to-text inference from BRICKS Foundation devices to LAN hardware." href="/buttress" badge="Preview" />

      <ProductCard icon="⌨️" title="BRICKS CLI" description="Command-line tool for managing BRICKS Foundation, applications, modules, and media in your workspace." href="/cli" />
    </div>
  </div>

  <div>
    <h2 className="text-xs font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-6">Quick links</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 website</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">Support</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>