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

export const SidebarToggle = () => {
  return <script dangerouslySetInnerHTML={{
    __html: `
          (function () {
            const CLASS = 'home-no-sidebar';

            function apply() {
              const onHome = window.location.pathname === '/' ||
                            window.location.pathname === '/index' ||
                            document.body.classList.contains('page-index');
              document.body.classList.toggle(CLASS, onHome);
            }

            // Monkey-patch history methods so we know when SPA navigation occurs
            ['pushState', 'replaceState'].forEach(fn => {
              const orig = history[fn];
              history[fn] = function () {
                const ret = orig.apply(this, arguments);
                window.dispatchEvent(new Event('locationchange'));
                return ret;
              };
            });
            window.addEventListener('popstate', () => window.dispatchEvent(new Event('locationchange')));
            window.addEventListener('locationchange', apply);

            // initial run
            apply();
          })();
        `
  }} />;
};

<SidebarToggle />

<div className="home-container" style={{ margin: "0 auto", padding: "0 4rem 2rem 4rem" }}>
  <img className="block dark:hidden" src="https://mintcdn.com/fjall/SEhaHVzV3Jzcp_JQ/images/hero.png?fit=max&auto=format&n=SEhaHVzV3Jzcp_JQ&q=85&s=8c48433195a8bf2134a306c3b68435ab" alt="Fjall" style={{ width: "350px", maxWidth: "800px", margin: "-2rem auto 3rem" }} width="369" height="400" data-path="images/hero.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/fjall/SEhaHVzV3Jzcp_JQ/images/hero.png?fit=max&auto=format&n=SEhaHVzV3Jzcp_JQ&q=85&s=8c48433195a8bf2134a306c3b68435ab" alt="Fjall" style={{ width: "350px", maxWidth: "800px", margin: "-2rem auto 3rem" }} width="369" height="400" data-path="images/hero.png" />

  <h1 style={{ textAlign: "center", fontSize: "3rem", marginBottom: "1rem" }}>Build above the Cloud</h1>

  <p style={{ textAlign: "center", fontSize: "1.25rem", color: "#666", marginBottom: "3rem", maxWidth: "600px", margin: "0 auto 3rem" }}>
    Infrastructure at the click of a button
  </p>

  <div
    className="card-grid"
    style={{
  display: "grid",
  gridTemplateColumns: "repeat(3, 1fr)",
  gap: "1.5rem",
  marginBottom: "3rem",
}}
  >
    <Card title="Getting Started" icon="arrow-right" href="/initial-setup/getting-started">
      Deploy your first application in minutes
    </Card>

    <Card title="Patterns" icon="layer-group" href="/patterns/introduction">
      Battle-tested factory patterns for infrastructure deployment
    </Card>

    <Card title="Resources" icon="box" href="/resources/compute/ecs-cluster">
      AWS infrastructure with sensible defaults
    </Card>
  </div>
</div>