> ## 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 overflow-hidden bg-white dark:bg-transparent" id="earn-hero-section">
    <div className="relative z-10 w-full max-w-[1200px] mx-auto px-6 sm:px-12 pt-12 pb-12 sm:pt-16 sm:pb-16 lg:pt-20 lg:pb-20">
      <div className="text-center">
        <h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold text-gray-900 dark:text-gray-100 mb-6">
          Earn Vaults
        </h1>

        <p className="text-lg sm:text-xl text-gray-700 dark:text-gray-400 max-w-3xl mx-auto mb-10 leading-relaxed">
          Integrate yield into your app or deploy your own vault strategy on Kamino.
        </p>

        <div className="flex justify-center mb-20">
          <a href="/docs/build/developers/earn" className="inline-flex items-center justify-center gap-2 px-7 py-3.5 bg-white hover:bg-gray-50 border border-gray-300 dark:bg-[#0EA5E9] dark:hover:bg-[#0284C7] dark:border-transparent text-gray-900 dark:text-white font-semibold rounded-lg transition-all hover:-translate-y-0.5 text-base">
            Developers Guide

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

        <div className="grid grid-cols-2 sm:grid-cols-3 gap-4 sm:gap-6 md:gap-8 lg:gap-10 text-center">
          <div>
            <div className="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-gray-100 mb-2">
              \$433M
            </div>

            <div className="text-xs sm:text-sm font-semibold text-gray-500 dark:text-gray-500 uppercase tracking-wider">
              KAMINO TVL
            </div>
          </div>

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

            <div className="text-xs sm:text-sm font-semibold text-gray-500 dark:text-gray-500 uppercase tracking-wider">
              ACTIVE VAULTS
            </div>
          </div>

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

              18+
            </div>

            <div className="text-xs sm:text-sm font-semibold text-gray-500 dark:text-gray-500 uppercase tracking-wider">
              AUDITS
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div className="w-full pt-16 sm:pt-20 pb-12 sm:pb-14 bg-[#fcfbfb] dark:bg-[#0c1b37] earn-howitworks">
    <div className="w-full max-w-[1200px] mx-auto px-6 sm:px-12">
      <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">
          Seamless integration flow designed for composability.
        </p>
      </div>

      <Tabs>
        <Tab title="Deposit">
          <img src="https://mintcdn.com/kamino-3d73a151/mQRdVqBCpeMtWuj7/docs/images/earn/deposit-flow.png?fit=max&auto=format&n=mQRdVqBCpeMtWuj7&q=85&s=9b450eb7d3ac8a9ee2c1863c3d7d3f91" alt="Deposit flow: User supplies tokens, and the vault allocates assets across lending markets according to its strategy" width="1500" height="985" data-path="docs/images/earn/deposit-flow.png" />
        </Tab>

        <Tab title="Earn">
          <img src="https://mintcdn.com/kamino-3d73a151/mQRdVqBCpeMtWuj7/docs/images/earn/earn-yield.png?fit=max&auto=format&n=mQRdVqBCpeMtWuj7&q=85&s=537617cd8f44bc05389f3ee548380eb6" alt="Earn yield: Borrower interest becomes yield. User receives vault shares in their wallet that track their position value" width="1500" height="985" data-path="docs/images/earn/earn-yield.png" />
        </Tab>

        <Tab title="Claim">
          <img src="https://mintcdn.com/kamino-3d73a151/mQRdVqBCpeMtWuj7/docs/images/earn/claim-rewards.png?fit=max&auto=format&n=mQRdVqBCpeMtWuj7&q=85&s=31c1a2d904ab8ed2079bf17eac3aa156" alt="Claim rewards: Lending yield accrues automatically, and users can claim additional rewards when available" width="1500" height="985" data-path="docs/images/earn/claim-rewards.png" />
        </Tab>
      </Tabs>
    </div>
  </div>

  <div className="w-full pt-8 sm:pt-10 pb-8 sm:pb-10 bg-white dark:bg-[#0c1b37]">
    <div className="w-full max-w-[1200px] mx-auto px-6 sm:px-12">
      <div className="mb-12">
        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-mono uppercase tracking-wider mb-6 bg-transparent border-2 border-blue-400/30 text-blue-600 dark:text-blue-400">
          INTEGRATION ARCHITECTURE
        </div>

        <h2 className="text-3xl lg:text-4xl font-bold tracking-tight mb-4 text-gray-900 dark:text-gray-100">
          Earn Integration Model
        </h2>

        <p className="text-lg text-gray-700 dark:text-gray-400 max-w-xl">
          Earn integrations involve four core areas.
        </p>
      </div>

      <Tabs>
        <Tab title="Vaults">
          <h3 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">
            Vault Metadata & Markets
          </h3>

          <p className="text-gray-700 dark:text-gray-400 mt-4 mb-6 text-sm">
            Discover vaults and retrieve their configuration, allocation strategy, performance metrics, and active incentive programs.
          </p>

          <ul className="space-y-3 pl-5">
            <li className="text-sm text-gray-700 dark:text-gray-400">
              Discover all available vaults via <code className="text-xs px-1 rounded bg-[#e0f5fa] dark:bg-[#0ea5e9]/10 text-[#00a3c4] dark:text-[#0ea5e9]">/kvaults/vaults</code>
            </li>

            <li className="text-sm text-gray-700 dark:text-gray-400">APY, TVL, allocation breakdown</li>
            <li className="text-sm text-gray-700 dark:text-gray-400">Reserve allocation weights and caps</li>
            <li className="text-sm text-gray-700 dark:text-gray-400">Vault token metadata (mint, decimals, symbols)</li>
            <li className="text-sm text-gray-700 dark:text-gray-400">Active farm incentives and bonus yield</li>
          </ul>
        </Tab>

        <Tab title="Transactions">
          <h3 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">
            Deposits & Withdrawals
          </h3>

          <p className="text-gray-700 dark:text-gray-400 mt-4 mb-6 text-sm">
            Generate deposit and withdrawal transactions, manage token approvals, and mint or redeem vault share tokens when users enter or exit a vault.
          </p>

          <ul className="space-y-3 pl-5">
            <li className="text-sm text-gray-700 dark:text-gray-400">Deposit and withdrawal instruction generation</li>
            <li className="text-sm text-gray-700 dark:text-gray-400">ATA creation and token approval handling</li>
            <li className="text-sm text-gray-700 dark:text-gray-400">Transaction status monitoring</li>
            <li className="text-sm text-gray-700 dark:text-gray-400">kToken receipt confirmation</li>
          </ul>
        </Tab>

        <Tab title="Positions">
          <h3 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">
            Positions & Accounting
          </h3>

          <p className="text-gray-700 dark:text-gray-400 mt-4 mb-6 text-sm">
            Access user vault positions, including share balances, exchange rates, yield accrual, and historical performance metrics.
          </p>

          <ul className="space-y-3 pl-5">
            <li className="text-sm text-gray-700 dark:text-gray-400">User vault share balances</li>

            <li className="text-sm text-gray-700 dark:text-gray-400">
              Vault exchange rate via <code className="text-xs px-1 rounded bg-[#e0f5fa] dark:bg-[#0ea5e9]/10 text-[#00a3c4] dark:text-[#0ea5e9]">getExchangeRate()</code>
            </li>

            <li className="text-sm text-gray-700 dark:text-gray-400">
              Historical performance via <code className="text-xs px-1 rounded bg-[#e0f5fa] dark:bg-[#0ea5e9]/10 text-[#00a3c4] dark:text-[#0ea5e9]">/metrics/history</code>
            </li>

            <li className="text-sm text-gray-700 dark:text-gray-400">Yield accrual via share price appreciation</li>
            <li className="text-sm text-gray-700 dark:text-gray-400">Farm reward tracking and claimable balances</li>
          </ul>
        </Tab>

        <Tab title="Risk">
          <h3 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">
            Risk & Allocation
          </h3>

          <p className="text-gray-700 dark:text-gray-400 mt-4 mb-6 text-sm">
            Retrieve vault allocation strategy, underlying reserve exposure, risk parameters, and fee configuration to evaluate how vault capital is deployed.
          </p>

          <ul className="space-y-3 pl-5">
            <li className="text-sm text-gray-700 dark:text-gray-400">Underlying reserve allocations</li>
            <li className="text-sm text-gray-700 dark:text-gray-400">Allocation caps and weights</li>
            <li className="text-sm text-gray-700 dark:text-gray-400">Performance and management fee rates</li>
            <li className="text-sm text-gray-700 dark:text-gray-400">Withdrawal penalty bps</li>
            <li className="text-sm text-gray-700 dark:text-gray-400">Active reward programs</li>
          </ul>
        </Tab>
      </Tabs>
    </div>
  </div>

  <div className="w-full pt-8 sm:pt-10 pb-8 sm:pb-10 bg-white dark:bg-[#0c1b37]">
    <div className="w-full max-w-[1200px] mx-auto px-6 sm:px-12">
      <div className="mb-12">
        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full mb-6 bg-transparent border-2 border-blue-400/30 text-blue-600 dark:text-blue-400">
          <span className="text-xs font-mono uppercase tracking-wider">INTEGRATION GUIDE</span>
        </div>

        <h2 className="text-3xl lg:text-4xl font-bold tracking-tight mb-4 text-gray-900 dark:text-gray-100">
          Implementing Earn Flows
        </h2>

        <p className="text-lg text-gray-700 dark:text-gray-400 max-w-xl">
          Practical SDK and API examples for integrating core Earn flows.
        </p>
      </div>

      <div className="mb-8 pb-8 border-b border-gray-200 dark:border-gray-800">
        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-mono mb-4 bg-blue-500/10 border border-blue-500/20 text-blue-400">
          Vault Operations
        </div>

        ### Deposits and Withdrawals

        <p className="text-gray-700 dark:text-gray-400 mb-6 leading-relaxed">
          Deposits and withdrawals to Earn vaults are available via the TypeScript SDK or the REST API. Both interfaces provide access to vault, user, and lending market data required for integration.
        </p>

        <div className="mb-6">
          ```typescript theme={null}
          import { createSolanaRpc, address, generateKeyPairSigner } from '@solana/kit';
          import { KaminoVault } from '@kamino-finance/klend-sdk';
          import { Decimal } from 'decimal.js';

          const signer = await generateKeyPairSigner();

          const vault = new KaminoVault(
            createSolanaRpc('https://api.mainnet-beta.solana.com'),
            address('HDsayqAsDWy3QvANGqh2yNraqcD8Fnjgh73Mhb3WRS5E')
          );

          const depositIxs = await vault.depositIxs(
            signer,
            new Decimal(100.0)
          );
          ```
        </div>

        <ul className="space-y-3 mb-8">
          <li className="flex items-start gap-3">
            <span className="mt-1 w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0 bg-[#0ea5e9]/10">
              <Icon icon="check" iconType="solid" className="w-3 h-3 text-[#0ea5e9]" />
            </span>

            <span className="text-gray-700 dark:text-gray-400">
              <span className="font-medium text-gray-900 dark:text-gray-100">Both:</span> Access vault metadata including allocations, fee configuration (management, performance, withdrawal), and strategy parameters.
            </span>
          </li>

          <li className="flex items-start gap-3">
            <span className="mt-1 w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0 bg-[#0ea5e9]/10">
              <Icon icon="check" iconType="solid" className="w-3 h-3 text-[#0ea5e9]" />
            </span>

            <span className="text-gray-700 dark:text-gray-400">
              <span className="font-medium text-gray-900 dark:text-gray-100">SDK:</span> Track reward APY across base lending yield, delegated farm incentives, and reserve farm incentives.
            </span>
          </li>

          <li className="flex items-start gap-3">
            <span className="mt-1 w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0 bg-[#0ea5e9]/10">
              <Icon icon="check" iconType="solid" className="w-3 h-3 text-[#0ea5e9]" />
            </span>

            <span className="text-gray-700 dark:text-gray-400">
              <span className="font-medium text-gray-900 dark:text-gray-100">API:</span> Access real-time reserve token prices via the Kamino oracle.
            </span>
          </li>

          <li className="flex items-start gap-3">
            <span className="mt-1 w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0 bg-[#0ea5e9]/10">
              <Icon icon="check" iconType="solid" className="w-3 h-3 text-[#0ea5e9]" />
            </span>

            <span className="text-gray-700 dark:text-gray-400">
              <span className="font-medium text-gray-900 dark:text-gray-100">API:</span> Retrieve current and historical reserve metrics: supplyApy, borrowApy, totalSupply, totalBorrow, utilizationRate.
            </span>
          </li>

          <li className="flex items-start gap-3">
            <span className="mt-1 w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0 bg-[#0ea5e9]/10">
              <Icon icon="check" iconType="solid" className="w-3 h-3 text-[#0ea5e9]" />
            </span>

            <span className="text-gray-700 dark:text-gray-400">
              <span className="font-medium text-gray-900 dark:text-gray-100">Both:</span> Track user transactions, current positions, and position history across multiple vaults
            </span>
          </li>
        </ul>

        <div className="mb-4">
          <div className="text-sm font-medium text-gray-900 dark:text-gray-100 mb-3">
            Explore Code Examples
          </div>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <a href="/docs/build/earn/tutorials/earn-and-withdraw#deposit-to-earn-vault" className="text-sm font-medium px-4 py-2 rounded-lg flex items-center gap-2 bg-[#0ea5e9]/10 text-[#0ea5e9] border border-[#0ea5e9]/20 hover:bg-[#0ea5e9]/20 transition-colors">
            Deposit (SDK)

            <Icon icon="chevron-right" iconType="regular" className="w-3 h-3" />
          </a>

          <a href="/docs/build/earn/recipes/earn-via-api" className="text-sm font-medium px-4 py-2 rounded-lg flex items-center gap-2 bg-[#0ea5e9]/10 text-[#0ea5e9] border border-[#0ea5e9]/20 hover:bg-[#0ea5e9]/20 transition-colors">
            Deposit (API)

            <Icon icon="chevron-right" iconType="regular" className="w-3 h-3" />
          </a>

          <a href="/docs/build/earn/tutorials/earn-and-withdraw#withdraw-from-earn-vault" className="text-sm font-medium px-4 py-2 rounded-lg flex items-center gap-2 bg-[#0ea5e9]/10 text-[#0ea5e9] border border-[#0ea5e9]/20 hover:bg-[#0ea5e9]/20 transition-colors">
            Withdraw (SDK)

            <Icon icon="chevron-right" iconType="regular" className="w-3 h-3" />
          </a>

          <a href="/docs/build/earn/recipes/earn-withdraw-via-api" className="text-sm font-medium px-4 py-2 rounded-lg flex items-center gap-2 bg-[#0ea5e9]/10 text-[#0ea5e9] border border-[#0ea5e9]/20 hover:bg-[#0ea5e9]/20 transition-colors">
            Withdraw (API)

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

      <div>
        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-mono mb-6 bg-orange-500/10 border border-orange-500/20 text-orange-400">
          Farm & Rewards
        </div>

        ### Automatic Farm Staking & Reward Claims

        <p className="text-gray-700 dark:text-gray-400 mb-6 leading-relaxed">
          A vault may include a reward farm, allowing depositors to earn extra reward tokens in addition to the base lending yield. Rewards may be distributed by the vault or by the underlying lending markets it allocates to.
        </p>

        <div className="space-y-4 mb-8">
          <div className="flex items-start gap-4 p-4 rounded-lg bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800">
            <div className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5 bg-orange-500/10">
              <Icon icon="gift" iconType="regular" className="w-4 h-4 text-orange-400" />
            </div>

            <div>
              <div className="font-mono text-xs mb-1 text-orange-600 dark:text-orange-400">Delegated Farm Incentives</div>

              <p className="text-xs text-gray-700 dark:text-gray-400">
                Additional reward tokens distributed at the vault level, layered on top of lending yield.
              </p>
            </div>
          </div>

          <div className="flex items-start gap-4 p-4 rounded-lg bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800">
            <div className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5 bg-orange-500/10">
              <Icon icon="gift" iconType="regular" className="w-4 h-4 text-orange-400" />
            </div>

            <div>
              <div className="font-mono text-xs mb-1 text-orange-600 dark:text-orange-400">Reserve Farm Incentives</div>

              <p className="text-xs text-gray-700 dark:text-gray-400">
                Reward tokens originating from underlying lending market reserves allocated by the vault.
              </p>
            </div>
          </div>
        </div>

        <div className="mb-6">
          ```typescript theme={null}
          import { createSolanaRpc, address, generateKeyPairSigner } from '@solana/kit';
          import {
            KaminoManager,
            KaminoVault,
            getMedianSlotDurationInMsFromLastEpochs
          } from '@kamino-finance/klend-sdk';

          const signer = await generateKeyPairSigner();

          const rpc = createSolanaRpc('https://api.mainnet-beta.solana.com');
          const slotDuration = await getMedianSlotDurationInMsFromLastEpochs();
          const kaminoManager = new KaminoManager(rpc, slotDuration);

          const vault = new KaminoVault(
            rpc,
            address('HDsayqAsDWy3QvANGqh2yNraqcD8Fnjgh73Mhb3WRS5E')
          );

          const claimRewardsIxs = await kaminoManager.getClaimAllRewardsForVaultIxs(
            signer,
            vault
          );
          ```
        </div>

        <div className="flex gap-3">
          <a href="/docs/build/earn/tutorials/claim-rewards" className="text-sm font-medium px-4 py-2 rounded-lg flex items-center gap-2 bg-[#0ea5e9]/10 text-[#0ea5e9] border border-[#0ea5e9]/20 hover:bg-[#0ea5e9]/20 transition-colors">
            Claim Rewards Tutorial

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

      <div className="mt-8 pt-8 border-t border-gray-200 dark:border-gray-800">
        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-mono mb-6 bg-teal-500/10 border border-teal-500/20 text-teal-400">
          Vault Creation & Revenue Share
        </div>

        ### Deploy Your Own Vault, Earn Revenue

        <p className="text-gray-700 dark:text-gray-400 mb-6 leading-relaxed">
          Create and manage your own vault using the Kamino SDK or Kamino Manager CLI tool. Set custom fees that flow directly to your treasury.
        </p>

        <div className="grid md:grid-cols-2 gap-6 mb-8">
          <div className="p-6 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#0e1f3d]">
            <div className="text-2xl font-semibold text-gray-500 dark:text-gray-400 mb-2">Performance Fee</div>
            <div className="text-xs font-mono mb-2 text-[#00a3c4] dark:text-[#0ea5e9]">performance\_fee\_bps</div>
            <p className="text-sm text-gray-700 dark:text-gray-400">% of yield earned by depositors. Set by vault curator. Taken from profits only.</p>
          </div>

          <div className="p-6 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#0e1f3d]">
            <div className="text-2xl font-semibold text-gray-500 dark:text-gray-400 mb-2">Management Fee</div>
            <div className="text-xs font-mono mb-2 text-[#00a3c4] dark:text-[#0ea5e9]">management\_fee\_bps</div>
            <p className="text-sm text-gray-700 dark:text-gray-400">Annual fee on total AUM. Set by vault curator. Accrues continuously on-chain.</p>
          </div>
        </div>

        <div className="mb-6">
          ```typescript theme={null}
          import { createSolanaRpc, address, generateKeyPairSigner } from '@solana/kit';
          import {
            KaminoManager,
            KaminoVaultConfig,
            getMedianSlotDurationInMsFromLastEpochs
          } from '@kamino-finance/klend-sdk';
          import { TOKEN_PROGRAM_ADDRESS } from '@solana-program/token';
          import { Decimal } from 'decimal.js';

          const adminSigner = await generateKeyPairSigner();

          const rpc = createSolanaRpc('https://api.mainnet-beta.solana.com');
          const slotDuration = await getMedianSlotDurationInMsFromLastEpochs();
          const kaminoManager = new KaminoManager(rpc, slotDuration);

          const kaminoVaultConfig = new KaminoVaultConfig({
            admin: adminSigner,
            tokenMint: address('EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v'),
            tokenMintProgramId: TOKEN_PROGRAM_ADDRESS,
            performanceFeeRatePercentage: new Decimal(10.0),
            managementFeeRatePercentage: new Decimal(1.0),
            name: 'Earn USDC Vault',
            vaultTokenSymbol: 'kUSDC',
            vaultTokenName: 'kUSDC receipt',
          });

          const { vault: vaultSigner, initVaultIxs: instructions } =
            await kaminoManager.createVaultIxs(kaminoVaultConfig);
          ```
        </div>

        <ul className="space-y-3 mb-8">
          <li className="flex items-start gap-3">
            <span className="mt-1 w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0 bg-[#0ea5e9]/10">
              <Icon icon="check" iconType="solid" className="w-3 h-3 text-[#0ea5e9]" />
            </span>

            <span className="text-gray-700 dark:text-gray-400">
              Fees are recorded on-chain, providing transparent and auditable accounting
            </span>
          </li>

          <li className="flex items-start gap-3">
            <span className="mt-1 w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0 bg-[#0ea5e9]/10">
              <Icon icon="check" iconType="solid" className="w-3 h-3 text-[#0ea5e9]" />
            </span>

            <span className="text-gray-700 dark:text-gray-400">
              Reserve whitelist controls restrict capital deployment to approved lending market reserves
            </span>
          </li>

          <li className="flex items-start gap-3">
            <span className="mt-1 w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0 bg-[#0ea5e9]/10">
              <Icon icon="check" iconType="solid" className="w-3 h-3 text-[#0ea5e9]" />
            </span>

            <span className="text-gray-700 dark:text-gray-400">
              Allocation caps, distribution, farm incentives, and fee rates can be updated at any time after vault creation.
            </span>
          </li>
        </ul>

        <div className="flex gap-3">
          <a href="/docs/curators/vaults" className="text-sm font-medium px-4 py-2 rounded-lg flex items-center gap-2 bg-[#0ea5e9]/10 text-[#0ea5e9] border border-[#0ea5e9]/20 hover:bg-[#0ea5e9]/20 transition-colors">
            Curator Docs

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

  <div className="w-full py-8 bg-[#fcfbfb] dark:bg-[#0c1b37] border-t border-gray-200 dark:border-gray-800">
    <div className="w-full max-w-[1200px] mx-auto px-6 sm:px-12 text-center">
      <h2 className="text-4xl lg:text-5xl font-bold text-gray-900 dark:text-gray-100 mb-6">
        Ready to integrate yield into your app?
      </h2>

      <p className="text-xl text-gray-700 dark:text-gray-400 mb-12 max-w-2xl mx-auto">
        Start with the developers guide or jump straight to the discord.
      </p>

      <div className="flex flex-wrap items-center justify-center gap-4">
        <a href="/docs/build/developers/earn" className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-white hover:bg-gray-50 dark:bg-[#0e1f3d] dark:hover:bg-[#1a2f4d] border-2 border-gray-300 dark:border-gray-700 text-gray-900 dark:text-gray-100 font-semibold rounded-lg transition-colors text-base">
          Developers Guide

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

        <a href="https://discord.com/invite/kamino" target="_blank" rel="noopener noreferrer" className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-white hover:bg-gray-50 dark:bg-[#0e1f3d] dark:hover:bg-[#1a2f4d] border border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 font-medium rounded-lg transition-colors text-base">
          <Icon icon="discord" iconType="brands" className="w-5 h-5" />

          Join Discord
        </a>
      </div>
    </div>
  </div>
</div>