> ## Documentation Index
> Fetch the complete documentation index at: https://rain-sandbox-trial.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

export const ContentWrapper = ({children, className = ""}) => {
  return <div className={`mx-auto px-4 ${className}`}>{children}</div>;
};

<ContentWrapper>
  <div className="relative overflow-hidden rounded-3xl bg-[#F6F7F9] dark:bg-white/[0.02] py-12">
    <div className="home-hero-dots" />

    <div className="relative max-w-[1220px] mx-auto">
      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-10">
        <div className="max-w-[560px]">
          <h1 className="m-0 mb-5 text-4xl md:text-[2.6rem] font-bold leading-[1.1] tracking-tight text-zinc-900 dark:text-zinc-100">
            The stablecoin infrastructure for cards, accounts & payouts.
          </h1>

          <p className="m-0 mb-8 max-w-[32rem] text-base leading-relaxed text-zinc-600 dark:text-zinc-400">
            One platform across funding, spend, and movement. Explore the architecture, pick the products you need, and ship an integration in days not quarters.
          </p>

          <div className="flex flex-wrap gap-3">
            <a className="inline-flex items-center gap-2 rounded-full bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 px-5 py-3 text-[0.95rem] font-semibold no-underline transition-opacity hover:opacity-85" href="/docs/what-is-rain">
              Get started <span aria-hidden="true">→</span>
            </a>

            <a className="inline-flex items-center gap-2 rounded-full bg-transparent text-zinc-900 dark:text-white border border-zinc-300 dark:border-white/25 px-5 py-3 text-[0.95rem] font-semibold no-underline transition-opacity hover:opacity-85" href="#explore-by-product">
              Explore all products
            </a>
          </div>
        </div>

        <div className="home-hero-media">
          <iframe className="home-hero-media-frame" src="https://rain.coastdemo.com/share/6a32ba8ae301c794f2e5b530?mode=link&zoom=100&layoutType=web" title="The Rain card app showing spending power and a list of recent transactions" frameBorder="0" />
        </div>
      </div>

      <div className="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8 mt-12 pt-8 border-t border-zinc-200 dark:border-white/10">
        <div className="pl-0 border-l-0 md:[&:nth-child(odd)]:pl-0 md:[&:nth-child(odd)]:border-l-0 md:pl-5 md:border-l md:border-zinc-200 md:dark:border-white/10 first:pl-0 first:border-l-0">
          <p className="m-0 mb-2 text-xs font-bold tracking-widest uppercase text-zinc-900 dark:text-zinc-100">USDC-native</p>
          <p className="m-0 text-[0.9rem] leading-relaxed text-zinc-600 dark:text-zinc-400">Settle in stablecoin, on-chain, with on-chain collateral contracts you can audit.</p>
        </div>

        <div className="pl-5 border-l border-zinc-200 dark:border-white/10">
          <p className="m-0 mb-2 text-xs font-bold tracking-widest uppercase text-zinc-900 dark:text-zinc-100">Programmable</p>
          <p className="m-0 text-[0.9rem] leading-relaxed text-zinc-600 dark:text-zinc-400">Webhooks for every state change. SDKs in TypeScript. OpenAPI for everything else.</p>
        </div>

        <div className="pl-0 border-l-0 md:pl-5 md:border-l md:border-zinc-200 md:dark:border-white/10">
          <p className="m-0 mb-2 text-xs font-bold tracking-widest uppercase text-zinc-900 dark:text-zinc-100">Two models</p>
          <p className="m-0 text-[0.9rem] leading-relaxed text-zinc-600 dark:text-zinc-400">Rain-Managed or Partner-Managed shift how much of the funding work you handle directly.</p>
        </div>

        <div className="pl-5 border-l border-zinc-200 dark:border-white/10">
          <p className="m-0 mb-2 text-xs font-bold tracking-widest uppercase text-zinc-900 dark:text-zinc-100">Compliant</p>
          <p className="m-0 text-[0.9rem] leading-relaxed text-zinc-600 dark:text-zinc-400">KYC/KYB built in. Visa & Mastercard programs. PCI-compliant card decryption.</p>
        </div>
      </div>
    </div>
  </div>

  <div className="max-w-[1220px] mx-auto mt-14 md:mt-16">
    <div className="max-w-[1220px] mx-auto home-video">
      <Frame>
        <iframe className="w-full aspect-video rounded-xl" src="https://player.vimeo.com/video/1199596687?h=a2ba058b01&title=0&byline=0&portrait=0" title="What is Rain" frameBorder="0" allow="autoplay; fullscreen; picture-in-picture" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen />
      </Frame>
    </div>
  </div>

  <div id="explore-by-product" className="max-w-[1220px] mx-auto mt-14 md:mt-16">
    <div className="flex flex-col md:flex-row gap-8 md:gap-10">
      <div className="md:w-1/3">
        <span className="inline-block rounded-full bg-[#f73196]/10 text-[#f73196] px-3 py-1 text-[0.7rem] font-bold tracking-widest uppercase">Products</span>
        <h2 className="mt-4 mb-2 text-3xl md:text-4xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100">Explore by Product</h2>
        <p className="m-0 text-base leading-relaxed text-zinc-600 dark:text-zinc-400">Each product is a slice of the architecture above. Pick where you want to start. The docs build up from concepts to API in the same order.</p>
      </div>

      <div className="md:w-2/3 home-video">
        <Frame>
          <iframe className="w-full aspect-video rounded-xl" src="https://player.vimeo.com/video/1199597758?h=2421cae752&title=0&byline=0&portrait=0" title="Rain platform overview" frameBorder="0" allow="autoplay; fullscreen; picture-in-picture" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen />
        </Frame>
      </div>
    </div>

    <div className="mt-8 [&_.card]:bg-zinc-50 [&_.card]:dark:bg-white/[0.04] [&_.card>div]:pt-[1.1rem] [&_.card>div]:pb-5 [&_.card>div]:px-6 [&_.card_h2]:text-xl [&_.card_h2]:font-bold [&_.card_h2]:leading-tight [&_.card_.prose]:mt-2.5">
      <Columns cols={3}>
        <Card title="Cards" img="https://mintcdn.com/rain-sandbox-trial/U8v-QAH_XCJgQ4nx/images/home/product-cards.png?fit=max&auto=format&n=U8v-QAH_XCJgQ4nx&q=85&s=f3cce3259e94324f52a49f024dd9feb1" href="/docs/issuing-cards" width="374" height="205" data-path="images/home/product-cards.png">
          Issue virtual & physical cards, run authorization, capture, settlement and disputes backed by stablecoin collateral.
          <span className="block mt-3 font-semibold text-sm underline underline-offset-2 text-zinc-900 dark:text-zinc-100">Explore Cards →</span>
        </Card>

        <Card title="Accounts" img="https://mintcdn.com/rain-sandbox-trial/U8v-QAH_XCJgQ4nx/images/home/product-accounts.png?fit=max&auto=format&n=U8v-QAH_XCJgQ4nx&q=85&s=b0425cdea1b8b1da0bbf9fb61163c0a0" href="/docs/onramps" width="374" height="205" data-path="images/home/product-accounts.png">
          Named virtual ACH/wire accounts, plus onramps and offramps between fiat and stablecoin.
          <span className="block mt-3 font-semibold text-sm underline underline-offset-2 text-zinc-900 dark:text-zinc-100">Explore Accounts →</span>
        </Card>

        <Card title="Money Movement" img="https://mintcdn.com/rain-sandbox-trial/U8v-QAH_XCJgQ4nx/images/home/product-money-movement.png?fit=max&auto=format&n=U8v-QAH_XCJgQ4nx&q=85&s=992df73c2554f94b32706eb4d1703626" href="/docs/how-money-movement-works" width="374" height="205" data-path="images/home/product-money-movement.png">
          Send & receive fiat and stablecoin between any two parties: payouts, transfers, B2B and payroll on the same rails.
          <span className="block mt-3 font-semibold text-sm underline underline-offset-2 text-zinc-900 dark:text-zinc-100">Explore Money Movement →</span>
        </Card>
      </Columns>
    </div>
  </div>

  <div className="max-w-[1220px] mx-auto mt-14 md:mt-16">
    <span className="inline-block rounded-full bg-[#f73196]/10 text-[#f73196] px-3 py-1 text-[0.7rem] font-bold tracking-widest uppercase">Get started</span>
    <h2 className="mt-4 mb-2 text-3xl md:text-4xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100">Build Your Integration</h2>
    <p className="m-0 mb-8 max-w-[36rem] text-base leading-relaxed text-zinc-600 dark:text-zinc-400">Three paths from API key to first transaction. All share the same primitives, so pick the order that fits your team.</p>

    <div className="[&_.card]:bg-zinc-50 [&_.card]:dark:bg-white/[0.04] [&_.card>div]:pt-[1.1rem] [&_.card>div]:pb-5 [&_.card>div]:px-6 [&_.card_h2]:text-xl [&_.card_h2]:font-bold [&_.card_h2]:leading-tight [&_.card_.prose]:mt-2.5">
      <Columns cols={3}>
        <Card title="Issue Your First Card" img="https://mintcdn.com/rain-sandbox-trial/U8v-QAH_XCJgQ4nx/images/home/build-issue-card.png?fit=max&auto=format&n=U8v-QAH_XCJgQ4nx&q=85&s=0c9a059dd357977dc9788fd9fc80679a" href="/docs/quickstarts" width="360" height="218" data-path="images/home/build-issue-card.png">
          <span className="block mb-1.5 text-[0.7rem] font-bold tracking-widest uppercase text-zinc-500">15 min · Quickstart</span>
          API key → application → card → fund → spend. The hello-world for the Rain Platform.
        </Card>

        <Card title="Understand the Lifecycle" img="https://mintcdn.com/rain-sandbox-trial/U8v-QAH_XCJgQ4nx/images/home/build-lifecycle.png?fit=max&auto=format&n=U8v-QAH_XCJgQ4nx&q=85&s=ff2521675556cb5de38d1ee9f850b8e5" href="/docs/transaction-lifecycle" width="360" height="218" data-path="images/home/build-lifecycle.png">
          <span className="block mb-1.5 text-[0.7rem] font-bold tracking-widest uppercase text-zinc-500">30 min · Guide</span>
          How an authorization flows from the network through Rain to your webhooks and how settlement nets against collateral.
        </Card>

        <Card title="API Reference" img="https://mintcdn.com/rain-sandbox-trial/U8v-QAH_XCJgQ4nx/images/home/build-api-reference.png?fit=max&auto=format&n=U8v-QAH_XCJgQ4nx&q=85&s=5471ea1d7694ab1042fdbf327d9c101b" href="/reference/rain-api" width="360" height="218" data-path="images/home/build-api-reference.png">
          <span className="block mb-1.5 text-[0.7rem] font-bold tracking-widest uppercase text-zinc-500">Reference</span>
          Every endpoint, parameter and webhook payload. OpenAPI source of truth, with try-it-out.
        </Card>
      </Columns>
    </div>
  </div>

  <div className="max-w-[1220px] mx-auto mt-16 pb-10">
    <div className="flex justify-between items-center flex-wrap gap-4 pt-8 border-t border-zinc-200 dark:border-white/10">
      <span className="text-[0.85rem] text-zinc-500">© {new Date().getFullYear()} Rain</span>

      <div className="flex gap-6">
        <a className="text-[0.85rem] text-zinc-500 no-underline hover:text-zinc-900 dark:hover:text-zinc-100" href="https://www.rain.xyz">rain.xyz</a>
      </div>
    </div>
  </div>
</ContentWrapper>