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

# Earn Overview

<div className="w-full" id="earn-page">
  <div className="relative w-full bg-white dark:bg-transparent" id="earn-hero-section">
    <div className="w-full pb-2 sm:pb-3 lg:pb-4">
      <div className="rounded-2xl overflow-hidden">
        {/* Banner image with overlaid title (overlay removed pending redesign) */}

        <div className="relative flex flex-col min-h-[440px] sm:min-h-[480px] lg:min-h-[520px]">
          <img src="https://mintcdn.com/kamino-3d73a151/PLATQ08CVUwkaQvR/images/earn/earn-hero.webp?fit=max&auto=format&n=PLATQ08CVUwkaQvR&q=85&s=2f6ebc3d45ef4e3a88c246ce06a6bed7" alt="" fetchPriority="high" className="absolute inset-0 w-full h-full object-cover" width="1836" height="856" data-path="images/earn/earn-hero.webp" />

          {/* Heading: centered in its own region, independent of the subheading */}

          <div className="relative z-10 flex-1 flex items-center justify-center px-6">
            <h1 className="earn-hero-title font-medium text-white translate-y-[3rem] lg:translate-y-[5rem]">
              Earn
            </h1>
          </div>

          {/* Subheading: bottom band with its own gradient overlay (scrim only here) */}

          <div className="relative z-10 px-6 pt-20 pb-8 sm:pb-10 bg-gradient-to-t from-black/55 via-black/30 to-transparent">
            <p className="text-lg sm:text-xl font-medium text-gray-100 max-w-lg mx-auto leading-relaxed text-balance text-center">
              Integrate yield into your app or deploy your own vault strategy on Kamino.
            </p>
          </div>
        </div>

        {/* Stats bar — flush against the photo, Kamino Blue (#C6F4FF) */}

        <div className="bg-[#C6F4FF] dark:bg-[#0e1d3a] py-8 px-4 sm:px-6">
          <div className="grid grid-cols-3 divide-x divide-black/10 dark:divide-white/10 text-center">
            <div className="px-2 sm:px-4">
              <div className="text-3xl sm:text-4xl lg:text-5xl font-medium text-gray-900 dark:text-gray-100 mb-2">
                \$510M
              </div>

              <div className="text-[10px] sm:text-sm font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider">
                Kamino TVL
              </div>
            </div>

            <div className="px-2 sm:px-4">
              <div className="text-3xl sm:text-4xl lg:text-5xl font-medium text-gray-900 dark:text-gray-100 mb-2">
                50+
              </div>

              <div className="text-[10px] sm:text-sm font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider">
                Active Vaults
              </div>
            </div>

            <div className="px-2 sm:px-4">
              <div className="flex items-center justify-center gap-2 text-3xl sm:text-4xl lg:text-5xl font-medium text-gray-900 dark:text-gray-100 mb-2">
                <Icon icon="circle-check" iconType="solid" size={28} className="text-[#0EA5E9]" />

                18+
              </div>

              <div className="text-[10px] sm:text-sm font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider">
                Audits
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div className="w-full pt-2 sm:pt-3 pb-2 sm:pb-3">
    <div className="max-w-[1200px] mx-auto rounded-2xl bg-[#fcfbfb] dark:bg-[#0c1b37] px-6 sm:px-12 py-12 sm:py-16">
      <div className="text-center mb-12">
        <h2 className="text-3xl lg:text-4xl font-semibold text-gray-900 dark:text-gray-100 mb-4">
          Earn Integration Options
        </h2>

        <p className="text-lg text-gray-700 dark:text-gray-400 max-w-2xl mx-auto">
          Choose between a faster app integration or a fully managed vault strategy.
        </p>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
        {/* Integrate Earn into your app */}

        <div>
          <h3 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-5">Integrate Earn into your app</h3>

          <div className="space-y-3">
            <div className="rounded-xl bg-[#C6F4FF] dark:bg-[#13284d] p-5">
              <p className="text-sm text-gray-800 dark:text-gray-200"><span className="font-semibold text-gray-900 dark:text-gray-100">Best for:</span> wallets, dashboards, dApps, AI agents, and small teams.</p>
            </div>

            <div className="rounded-xl bg-[#C6F4FF] dark:bg-[#13284d] p-5">
              <h4 className="font-semibold text-gray-900 dark:text-gray-100 mb-1">Use existing Kamino vaults</h4>
              <p className="text-sm text-gray-700 dark:text-gray-300">Skip configuration and plug into fully automated vaults.</p>
            </div>

            <div className="rounded-xl bg-[#C6F4FF] dark:bg-[#13284d] p-5">
              <p className="text-sm text-gray-800 dark:text-gray-200"><span className="font-semibold text-gray-900 dark:text-gray-100">Primary advantage:</span> fastest path to ship Earn into a product, integrated in minutes.</p>
            </div>
          </div>

          <a href="#how-it-works" className="inline-flex items-center gap-2 mt-5 text-sm font-semibold text-[#0ea5e9] hover:gap-3 transition-all no-underline">
            Read How Earn Works

            <Icon icon="arrow-right" iconType="regular" className="w-4 h-4" />
          </a>
        </div>

        {/* Deploy Your Own Vault Strategy */}

        <div>
          <h3 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-5">Deploy your own vault strategy</h3>

          <div className="space-y-3">
            <div className="rounded-xl bg-[#C6F4FF] dark:bg-[#13284d] p-5">
              <p className="text-sm text-gray-800 dark:text-gray-200"><span className="font-semibold text-gray-900 dark:text-gray-100">Best for:</span> protocols, curators, institutions, and treasury teams that want strategy control, custom access, and revenue from managed vaults.</p>
            </div>

            <div className="rounded-xl bg-[#C6F4FF] dark:bg-[#13284d] p-5">
              <h4 className="font-semibold text-gray-900 dark:text-gray-100 mb-1">Set Custom Performance Fee</h4>
              <p className="text-sm text-gray-700 dark:text-gray-300">Earn a share of yield generated by the vault and align revenue with strategy performance.</p>
            </div>

            <div className="rounded-xl bg-[#C6F4FF] dark:bg-[#13284d] p-5">
              <h4 className="font-semibold text-gray-900 dark:text-gray-100 mb-1">Provide Additional Farm Rewards</h4>
              <p className="text-sm text-gray-700 dark:text-gray-300">Add token incentives to attract deposits, retain users, or support a new vault launch.</p>
            </div>

            <div className="rounded-xl bg-[#C6F4FF] dark:bg-[#13284d] p-5">
              <h4 className="font-semibold text-gray-900 dark:text-gray-100 mb-1">Whitelist Market Reserves</h4>
              <p className="text-sm text-gray-700 dark:text-gray-300">Control where vault capital can be deployed by limiting deposits to approved Kamino lending reserves.</p>
            </div>

            <div className="rounded-xl bg-[#C6F4FF] dark:bg-[#13284d] p-5">
              <h4 className="font-semibold text-gray-900 dark:text-gray-100 mb-1">Permissioned Deposits</h4>
              <p className="text-sm text-gray-700 dark:text-gray-300">Maintain deposits for accredited investors and KYC users, or restrict vault access through an allowlist model.</p>
            </div>

            <div className="rounded-xl bg-[#C6F4FF] dark:bg-[#13284d] p-5">
              <p className="text-sm text-gray-800 dark:text-gray-200"><span className="font-semibold text-gray-900 dark:text-gray-100">Primary advantage:</span> launch a branded vault product with strategy control, depositor controls, and revenue.</p>
            </div>
          </div>

          <a href="/docs/curators/vaults/guides/create-a-vault" className="inline-flex items-center gap-2 mt-5 text-sm font-semibold text-[#0ea5e9] hover:gap-3 transition-all no-underline">
            Read the Curator Docs

            <Icon icon="arrow-right" iconType="regular" className="w-4 h-4" />
          </a>
        </div>
      </div>
    </div>
  </div>

  <div id="how-it-works" className="w-full pt-2 pb-2 sm:pt-3 sm:pb-3 earn-howitworks scroll-mt-24">
    <div className="max-w-[1200px] mx-auto rounded-2xl bg-[#fcfbfb] dark:bg-[#13284d] px-6 sm:px-12 py-12 sm:py-16">
      <div className="text-center mb-16">
        <h2 className="text-4xl lg:text-5xl font-semibold text-gray-900 dark:text-gray-100 mb-4">
          How It Works
        </h2>

        <p className="text-lg text-gray-700 dark:text-gray-400 max-w-2xl mx-auto">
          A high-level view of the Earn Vault model.
        </p>
      </div>

      <div className="hidden lg:block">
        {/* Selector labels */}

        <div className="flex flex-wrap justify-center gap-x-8 gap-y-2 mb-8">
          <a href="#hiw-deposit" className="text-sm sm:text-base font-semibold text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors no-underline">Deposit</a>
          <a href="#hiw-earn" className="text-sm sm:text-base font-semibold text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors no-underline">Earn</a>
          <a href="#hiw-claim" className="text-sm sm:text-base font-semibold text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors no-underline">Claim</a>
        </div>

        {/* Slide track */}

        <div className="hiw-track flex overflow-x-auto snap-x snap-mandatory scroll-smooth">
          <div id="hiw-deposit" className="hiw-slide relative shrink-0 w-full snap-center flex items-center justify-center px-12 sm:px-16">
            <img src="https://mintcdn.com/kamino-3d73a151/O3MRVWxAZCaSynKP/images/earn/deposit-flow.png?fit=max&auto=format&n=O3MRVWxAZCaSynKP&q=85&s=c6e0addd40c9bd3e5eaea0c93f1ab3bf" loading="lazy" alt="Deposit flow: User supplies tokens, and the vault allocates assets across lending markets according to its strategy" className="w-full max-w-3xl rounded-xl" width="1080" height="700" data-path="images/earn/deposit-flow.png" />
          </div>

          <div id="hiw-earn" className="hiw-slide relative shrink-0 w-full snap-center flex items-center justify-center px-12 sm:px-16">
            <img src="https://mintcdn.com/kamino-3d73a151/O3MRVWxAZCaSynKP/images/earn/earn-yield.png?fit=max&auto=format&n=O3MRVWxAZCaSynKP&q=85&s=bb204e05b9dcad0334aba2ffe8340c9a" loading="lazy" alt="Earn yield: Borrower interest becomes yield. User receives vault shares in their wallet that track their position value" className="w-full max-w-3xl rounded-xl" width="1080" height="700" data-path="images/earn/earn-yield.png" />
          </div>

          <div id="hiw-claim" className="hiw-slide relative shrink-0 w-full snap-center flex items-center justify-center px-12 sm:px-16">
            <img src="https://mintcdn.com/kamino-3d73a151/O3MRVWxAZCaSynKP/images/earn/claim-rewards.png?fit=max&auto=format&n=O3MRVWxAZCaSynKP&q=85&s=f758e26b74e9db80c15e7c45403d6769" loading="lazy" alt="Claim rewards: Lending yield accrues automatically, and users can claim additional rewards when available" className="w-full max-w-3xl rounded-xl" width="1080" height="700" data-path="images/earn/claim-rewards.png" />
          </div>
        </div>
      </div>

      <div className="lg:hidden space-y-3">
        <div className="rounded-xl bg-[#C6F4FF] dark:bg-[#1d3a66] p-5">
          <div className="text-xs font-mono font-semibold text-[#0ea5e9] mb-1">01</div>
          <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-1">Deposit</h3>
          <p className="text-sm text-gray-700 dark:text-gray-300">User supplies tokens, and the vault allocates assets across lending markets according to its strategy.</p>
        </div>

        <div className="rounded-xl bg-[#C6F4FF] dark:bg-[#1d3a66] p-5">
          <div className="text-xs font-mono font-semibold text-[#0ea5e9] mb-1">02</div>
          <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-1">Earn</h3>
          <p className="text-sm text-gray-700 dark:text-gray-300">Borrower interest becomes yield. User receives vault shares in their wallet that track their position value.</p>
        </div>

        <div className="rounded-xl bg-[#C6F4FF] dark:bg-[#1d3a66] p-5">
          <div className="text-xs font-mono font-semibold text-[#0ea5e9] mb-1">03</div>
          <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-1">Claim</h3>
          <p className="text-sm text-gray-700 dark:text-gray-300">Lending yield accrues automatically, and users can claim additional rewards when available.</p>
        </div>
      </div>
    </div>
  </div>

  <div className="w-full pt-2 pb-8 sm:pt-3 sm:pb-12">
    <div className="max-w-[1200px] mx-auto rounded-2xl bg-[#fcfbfb] dark:bg-[#13284d] px-6 sm:px-12 py-12 sm:py-16">
      <div className="text-center mb-16">
        <h2 className="text-4xl lg:text-5xl font-semibold text-gray-900 dark:text-gray-100 mb-4">
          Earn Integration Model
        </h2>

        <p className="text-lg text-gray-700 dark:text-gray-400 max-w-2xl mx-auto">
          Built for seamless integration. Earn centers on three core layers of composability.
        </p>
      </div>

      <div className="hidden lg:block">
        {/* Selector labels */}

        <div className="flex flex-wrap justify-center gap-x-8 gap-y-2 mb-8">
          <a href="#eim-vault-data" className="text-sm sm:text-base font-semibold text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors no-underline">Vault Data</a>
          <a href="#eim-transactions" className="text-sm sm:text-base font-semibold text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors no-underline">Transactions</a>
          <a href="#eim-positions" className="text-sm sm:text-base font-semibold text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors no-underline">Positions</a>
        </div>

        {/* Slide track */}

        <div className="hiw-track flex overflow-x-auto snap-x snap-mandatory scroll-smooth">
          <div id="eim-vault-data" className="hiw-slide relative shrink-0 w-full snap-center flex items-center justify-center px-12 sm:px-16">
            <img src="https://mintcdn.com/kamino-3d73a151/O3MRVWxAZCaSynKP/images/earn/integration-vault-data.png?fit=max&auto=format&n=O3MRVWxAZCaSynKP&q=85&s=f3a57e4b5379a5a60a417bd29676b5a7" loading="lazy" alt="Layer 1, Vault Data: discover vaults and retrieve configuration, allocation strategy, performance metrics, and active incentive programs" className="w-full max-w-3xl rounded-xl" width="1080" height="800" data-path="images/earn/integration-vault-data.png" />
          </div>

          <div id="eim-transactions" className="hiw-slide relative shrink-0 w-full snap-center flex items-center justify-center px-12 sm:px-16">
            <img src="https://mintcdn.com/kamino-3d73a151/O3MRVWxAZCaSynKP/images/earn/integration-transactions.png?fit=max&auto=format&n=O3MRVWxAZCaSynKP&q=85&s=03fea27389b94fec961efdca1b79a21c" loading="lazy" alt="Layer 2, Transactions: generate deposit and withdrawal transactions, manage approvals, and mint or redeem vault shares" className="w-full max-w-3xl rounded-xl" width="1080" height="800" data-path="images/earn/integration-transactions.png" />
          </div>

          <div id="eim-positions" className="hiw-slide relative shrink-0 w-full snap-center flex items-center justify-center px-12 sm:px-16">
            <img src="https://mintcdn.com/kamino-3d73a151/O3MRVWxAZCaSynKP/images/earn/integration-positions.png?fit=max&auto=format&n=O3MRVWxAZCaSynKP&q=85&s=034d3a3bc7b31e9227606f4aca510213" loading="lazy" alt="Layer 3, Positions and Accounting: access user vault positions, share balances, yield accrual, and historical performance" className="w-full max-w-3xl rounded-xl" width="1080" height="800" data-path="images/earn/integration-positions.png" />
          </div>
        </div>
      </div>

      <div className="lg:hidden space-y-3">
        <div className="rounded-xl bg-[#C6F4FF] dark:bg-[#1d3a66] p-5">
          <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-1">Vault Data</h3>
          <p className="text-sm text-gray-700 dark:text-gray-300 mb-3">Discover vaults and retrieve their configuration, allocation strategy, performance metrics, and active incentive programs.</p>
          <p className="text-xs text-gray-700 dark:text-gray-300"><span className="font-semibold text-gray-900 dark:text-gray-100">Best Tools:</span> REST API, TypeScript SDK</p>
          <p className="text-xs text-gray-700 dark:text-gray-300"><span className="font-semibold text-gray-900 dark:text-gray-100">Available Vault Data:</span> APY, TVL, historical performance, vault configuration, allocation strategy, reserve data, market metadata.</p>
        </div>

        <div className="rounded-xl bg-[#C6F4FF] dark:bg-[#1d3a66] p-5">
          <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-1">Transactions</h3>
          <p className="text-sm text-gray-700 dark:text-gray-300 mb-3">Generate deposit and withdrawal transactions, manage token approvals, and mint or redeem vault share tokens when users enter or exit a vault.</p>
          <p className="text-xs text-gray-700 dark:text-gray-300"><span className="font-semibold text-gray-900 dark:text-gray-100">Best Tools:</span> TypeScript SDK, REST API, Rust Interface Crate</p>
          <p className="text-xs text-gray-700 dark:text-gray-300"><span className="font-semibold text-gray-900 dark:text-gray-100">Vault Interactions:</span> Instruction building, backend and frontend signing flows.</p>
        </div>

        <div className="rounded-xl bg-[#C6F4FF] dark:bg-[#1d3a66] p-5">
          <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-1">Positions & Accounting</h3>
          <p className="text-sm text-gray-700 dark:text-gray-300 mb-3">Access user vault positions, including share balances, yield accrual, and historical performance metrics.</p>
          <p className="text-xs text-gray-700 dark:text-gray-300"><span className="font-semibold text-gray-900 dark:text-gray-100">Best Tools:</span> TypeScript SDK, REST API</p>
          <p className="text-xs text-gray-700 dark:text-gray-300"><span className="font-semibold text-gray-900 dark:text-gray-100">Available User Data:</span> Share balances, portfolio, token exchange rates.</p>
        </div>
      </div>
    </div>
  </div>
</div>