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

export const ProductTiles = ({categories}) => {
  const [activeCategory, setActiveCategory] = React.useState(categories[0].id);
  const [activeItem, setActiveItem] = React.useState(categories[0].items[0]?.id);
  const currentCategory = categories.find(cat => cat.id === activeCategory);
  const currentItem = currentCategory?.items.find(item => item.id === activeItem);
  return <div className="product-tiles-container">
      <div className="flex flex-wrap gap-2 mb-6">
        {categories.map(cat => <button key={cat.id} onClick={() => {
    setActiveCategory(cat.id);
    setActiveItem(cat.items[0]?.id);
  }} className={`product-tiles-tab ${activeCategory === cat.id ? 'active' : ''}`}>
            {cat.label}
          </button>)}
      </div>
      <div className="product-tiles-grid">
        <div className="product-tiles-list">
          {currentCategory?.items.map(item => <div key={item.id} onClick={() => {
    setActiveItem(item.id);
    if (window.innerWidth > 1024) {
      window.location.href = currentCategory.href;
    }
  }} onMouseEnter={() => setActiveItem(item.id)} className={`product-tiles-item ${activeItem === item.id ? 'active' : ''}`}>
              <img src={item.icon} alt="" className="product-tiles-icon" />
              <div className="product-tiles-item-content">
                <div className="product-tiles-item-title">{item.title}</div>
                <div className="product-tiles-item-desc">{item.description}</div>
                <a href={currentCategory.href} className="product-tiles-link">
                  Learn more →
                </a>
              </div>
            </div>)}
        </div>
        <div className="product-tiles-preview" onClick={() => window.location.href = currentCategory.href}>
          {currentCategory?.items.map(item => <img key={item.id} src={item.image} alt={item.title} className={`product-tiles-preview-img ${activeItem === item.id ? 'active' : ''}`} />)}
        </div>
      </div>
    </div>;
};

export const gridCategories = [{
  id: 'payouts',
  label: 'Payouts & B2B',
  href: '/payouts-and-b2b/',
  items: [{
    id: 'creators',
    title: 'Creator payouts',
    description: 'Pay creators and influencers instantly, anywhere they bank',
    icon: '/images/icons/multi-media.svg',
    image: '/images/use-cases/payouts-b2b-creators.jpg'
  }, {
    id: 'payroll',
    title: 'Payroll & contractors',
    description: 'Send salaries and contractor payments globally with locked FX rates',
    icon: '/images/icons/suitcase-work.svg',
    image: '/images/use-cases/payouts-b2b-payroll.jpg'
  }, {
    id: 'marketplace',
    title: 'Marketplace disbursements',
    description: 'Distribute earnings to sellers and service providers worldwide automatically',
    icon: '/images/icons/store4.svg',
    image: '/images/use-cases/payouts-b2b-marketplace.jpg'
  }, {
    id: 'suppliers',
    title: 'Supplier/vendor payments',
    description: 'Pay international vendors and suppliers in their local currency, settled in seconds',
    icon: '/images/icons/shipping.svg',
    image: '/images/use-cases/payouts-b2b-suppliers.jpg'
  }]
}, {
  id: 'ramps',
  label: 'Ramps',
  href: '/ramps/',
  items: [{
    id: 'buy-btc',
    title: 'Buy BTC',
    description: 'Let users purchase Bitcoin directly inside your app',
    icon: '/images/icons/bitcoin.svg',
    image: '/images/use-cases/ramps-buy-btc.jpg'
  }, {
    id: 'sell-btc',
    title: 'Sell BTC',
    description: 'Convert Bitcoin to fiat and settle to any bank account',
    icon: '/images/icons/money-hand.svg',
    image: '/images/use-cases/ramps-sell-btc.jpg'
  }, {
    id: 'wallet-funding',
    title: 'Wallet funding',
    description: 'On-ramp fiat to fund user wallets with stablecoins or BTC',
    icon: '/images/icons/crypto-wallet.svg',
    image: '/images/use-cases/ramps-on-ramp-usdc.jpg'
  }, {
    id: 'fiat-settlement',
    title: 'Fiat settlement',
    description: 'Off-ramp digital assets to local bank rails in real time',
    icon: '/images/icons/bank.svg',
    image: '/images/use-cases/ramps-offramp-usdc.jpg'
  }]
}, {
  id: 'rewards',
  label: 'Rewards',
  href: '/rewards/',
  items: [{
    id: 'cashback',
    title: 'BTC cashback',
    description: 'Give users Bitcoin back on purchases or actions',
    icon: '/images/icons/gift1.svg',
    image: '/images/use-cases/rewards-cashback.jpg'
  }, {
    id: 'referrals',
    title: 'Referral incentives',
    description: 'Pay out BTC or fiat when users refer new customers',
    icon: '/images/icons/people-add.svg',
    image: '/images/use-cases/rewards-refer.jpg'
  }, {
    id: 'loyalty',
    title: 'Loyalty programs',
    description: 'Build point-based or asset-based loyalty with real redemption value',
    icon: '/images/icons/repeat.svg',
    image: '/images/use-cases/rewards-redeem.jpg'
  }]
}, {
  id: 'global-p2p',
  label: 'Global P2P',
  href: '/global-p2p/',
  items: [{
    id: 'remittances',
    title: 'Cross-border remittances',
    description: 'Move money across countries on the fastest, lowest-cost rails',
    icon: '/images/icons/globe.svg',
    image: '/images/use-cases/global-p2p-remittances.jpg'
  }, {
    id: 'uma',
    title: 'Wallet-to-wallet (UMA)',
    description: 'Send and receive via UMA addresses across any participating app',
    icon: '/images/icons/at.svg',
    image: '/images/use-cases/global-p2p-uma.jpg'
  }]
}];

<div className="not-prose homepage-content">
  {/* Hero Header - Two Column Layout */}

  <div className="hero-header">
    <div className="hero-header-left">
      <img src="https://mintcdn.com/ramps-docs-sync-20260320/fN3IZy_ihoUrhXOh/logo/grid-logo.svg?fit=max&auto=format&n=fN3IZy_ihoUrhXOh&q=85&s=1836c38e372b9ee383490412fc74ddde" alt="Grid" className="hero-logo" width="90" height="25" data-path="logo/grid-logo.svg" />

      <span className="hero-subtitle">Documentation</span>
    </div>

    <div className="hero-header-right">
      <p className="hero-tagline">Build applications and financial products that move money globally across fiat, stablecoins, and Bitcoin with a single API.</p>
    </div>
  </div>

  {/* Hero Banner with Sand Dunes Image */}

  <a href="/flow-builder" className="hero-banner">
    <div className="hero-banner-bg" />

    <div className="hero-banner-overlay">
      <span className="hero-banner-text">Ready to build? <span className="hero-banner-text-link">Get the API calls for your exact use case</span></span>
      <span className="hero-banner-button">Build your flow</span>
    </div>
  </a>

  {/* Info Cards: Understand Grid & Start Building */}

  <div className="info-cards-grid">
    <div className="info-card">
      <img src="https://mintcdn.com/ramps-docs-sync-20260320/SToHfX38E6JNxvih/images/icons/IconNewspaper2.svg?fit=max&auto=format&n=SToHfX38E6JNxvih&q=85&s=0b4525c349ed0cdbaa26a66cc042b0b5" alt="" className="info-card-icon" width="24" height="24" data-path="images/icons/IconNewspaper2.svg" />

      <div className="info-card-content">
        <div className="info-card-title">Understand Grid</div>
        <div className="info-card-desc">Learn how Grid works before you integrate</div>
      </div>

      <div className="info-card-links">
        <a href="/platform-overview/introduction/what-is-grid" className="info-card-link">What is Grid?</a>
        <a href="/platform-overview/capabilities" className="info-card-link">Capabilities</a>
        <a href="/platform-overview/core-concepts/entities" className="info-card-link">Entities & relationships</a>
      </div>
    </div>

    <div className="info-card">
      <img src="https://mintcdn.com/ramps-docs-sync-20260320/SToHfX38E6JNxvih/images/icons/grid-icon.svg?fit=max&auto=format&n=SToHfX38E6JNxvih&q=85&s=a955db77518c3cc5513defc53d21e32c" alt="" className="info-card-icon" width="24" height="24" data-path="images/icons/grid-icon.svg" />

      <div className="info-card-content">
        <div className="info-card-title">Start building</div>
        <div className="info-card-desc">Jump into a quickstart guide</div>
      </div>

      <div className="info-card-links">
        <a href="/payouts-and-b2b/quickstart" className="info-card-link">Send a payout</a>
        <a href="/ramps/quickstart" className="info-card-link">On-ramp to crypto</a>
        <a href="/rewards/quickstart" className="info-card-link">Send Bitcoin rewards</a>
      </div>
    </div>
  </div>

  <div className="section-header">
    <div className="section-header-text">
      <span className="section-title">Capabilities</span>
      <span className="section-subtitle">Primitives for moving money</span>
    </div>

    <a href="/platform-overview/capabilities" className="section-header-arrow" aria-label="View all capabilities">
      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M4 10h12M11 5l5 5-5 5" />
      </svg>
    </a>
  </div>

  <div className="capabilities-grid">
    <div className="capability-card">
      <div className="capability-header">
        <svg className="capability-toggle" width="32" height="16" viewBox="0 0 32 16" fill="none">
          <rect width="32" height="16" fill="#00B3E0" />

          <rect x="17.6" y="1.6" width="12.8" height="12.8" fill="#F8F8F7" />
        </svg>

        <div className="capability-title">Send</div>
      </div>

      <div className="capability-desc">Move funds to any destination</div>
    </div>

    <div className="capability-card">
      <div className="capability-header">
        <svg className="capability-toggle" width="32" height="16" viewBox="0 0 32 16" fill="none">
          <rect width="32" height="16" fill="#11A967" />

          <rect x="17.6" y="1.6" width="12.8" height="12.8" fill="#F8F8F7" />
        </svg>

        <div className="capability-title">Receive</div>
      </div>

      <div className="capability-desc">Accept incoming funds</div>
    </div>

    <div className="capability-card">
      <div className="capability-header">
        <svg className="capability-toggle" width="32" height="16" viewBox="0 0 32 16" fill="none">
          <rect width="32" height="16" fill="#FF21CC" />

          <rect x="17.6" y="1.6" width="12.8" height="12.8" fill="#F8F8F7" />
        </svg>

        <div className="capability-title">Convert</div>
      </div>

      <div className="capability-desc">Exchange currencies and assets</div>
    </div>

    <div className="capability-card">
      <div className="capability-header">
        <svg className="capability-toggle" width="32" height="16" viewBox="0 0 32 16" fill="none">
          <rect width="32" height="16" fill="#F77D26" />

          <rect x="17.6" y="1.6" width="12.8" height="12.8" fill="#F8F8F7" />
        </svg>

        <div className="capability-title">Hold</div>
      </div>

      <div className="capability-desc">Store multi-currency balances</div>
    </div>

    <div className="capability-card">
      <div className="capability-header">
        <svg className="capability-toggle" width="32" height="16" viewBox="0 0 32 16" fill="none">
          <rect width="32" height="16" fill="#CF00A7" />

          <rect x="17.6" y="1.6" width="12.8" height="12.8" fill="#F8F8F7" />
        </svg>

        <div className="capability-title">Ramp</div>
      </div>

      <div className="capability-desc">Bridge fiat and crypto</div>
    </div>

    <div className="capability-card">
      <div className="capability-header">
        <svg className="capability-toggle" width="32" height="16" viewBox="0 0 32 16" fill="none">
          <rect width="32" height="16" fill="#118453" />

          <rect x="17.6" y="1.6" width="12.8" height="12.8" fill="#F8F8F7" />
        </svg>

        <div className="capability-title">Bill</div>
      </div>

      <div className="capability-desc">Invoice and collect payments</div>
    </div>

    <div className="capability-card">
      <div className="capability-header">
        <svg className="capability-toggle" width="32" height="16" viewBox="0 0 32 16" fill="none">
          <rect width="32" height="16" fill="#44DDB5" />

          <rect x="17.6" y="1.6" width="12.8" height="12.8" fill="#F8F8F7" />
        </svg>

        <div className="capability-title">Program</div>
      </div>

      <div className="capability-desc">Create programmable flows</div>
    </div>

    <div className="capability-card">
      <div className="capability-header">
        <svg className="capability-toggle" width="32" height="16" viewBox="0 0 32 16" fill="none">
          <rect width="32" height="16" fill="#0072DB" />

          <rect x="17.6" y="1.6" width="12.8" height="12.8" fill="#F8F8F7" />
        </svg>

        <div className="capability-title">Identify</div>
      </div>

      <div className="capability-desc">KYC/KYB verification</div>
    </div>
  </div>

  <div className="section-what-you-can-build">
    <div className="section-header">
      <div className="section-header-text">
        <span className="section-title">What you can build</span>
        <span className="section-subtitle">Combine primitives, ship products</span>
      </div>

      <a href="/platform-overview/use-cases" className="section-header-arrow" aria-label="View all use cases">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M4 10h12M11 5l5 5-5 5" />
        </svg>
      </a>
    </div>

    <ProductTiles categories={gridCategories} />
  </div>

  {/* Trusted By Section */}

  <div className="trusted-by">
    <span className="trusted-by-label">Building on Grid</span>

    <div className="trusted-by-logos">
      <img src="https://mintcdn.com/ramps-docs-sync-20260320/fN3IZy_ihoUrhXOh/images/logos/coinbase.svg?fit=max&auto=format&n=fN3IZy_ihoUrhXOh&q=85&s=f466ccdb88d55c61369e45e56b4836e9" alt="Coinbase" className="trusted-by-logo" width="89" height="16" data-path="images/logos/coinbase.svg" />

      <img src="https://mintcdn.com/ramps-docs-sync-20260320/fN3IZy_ihoUrhXOh/images/logos/sofi.svg?fit=max&auto=format&n=fN3IZy_ihoUrhXOh&q=85&s=0258f77ad99d69f03a832aa9c70eba72" alt="SoFi" className="trusted-by-logo" width="68" height="20" data-path="images/logos/sofi.svg" />

      <img src="https://mintcdn.com/ramps-docs-sync-20260320/fN3IZy_ihoUrhXOh/images/logos/nu.svg?fit=max&auto=format&n=fN3IZy_ihoUrhXOh&q=85&s=e20547069465ce32d678f9f96f0c5daf" alt="Nu" className="trusted-by-logo" width="37" height="20" data-path="images/logos/nu.svg" />

      <img src="https://mintcdn.com/ramps-docs-sync-20260320/fN3IZy_ihoUrhXOh/images/logos/revolut.svg?fit=max&auto=format&n=fN3IZy_ihoUrhXOh&q=85&s=48f93cca4a5cf08c52444e0389212aad" alt="Revolut" className="trusted-by-logo" width="73" height="16" data-path="images/logos/revolut.svg" />

      <img src="https://mintcdn.com/ramps-docs-sync-20260320/fN3IZy_ihoUrhXOh/images/logos/bitso.svg?fit=max&auto=format&n=fN3IZy_ihoUrhXOh&q=85&s=a8f386428c559e134851f681555e55e1" alt="Bitso" className="trusted-by-logo" width="68" height="16" data-path="images/logos/bitso.svg" />
    </div>
  </div>

  {/* Divider Section */}

  <div className="homepage-divider" />

  ## Resources

  <div className="resources-grid">
    <div className="resources-column">
      <div className="resources-column-title">Quick links</div>

      <a href="https://github.com/lightsparkdev/grid-api" className="resources-link">
        <svg className="resources-link-icon" width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
          <path d="M10 0C4.477 0 0 4.477 0 10c0 4.42 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.342-3.369-1.342-.454-1.155-1.11-1.462-1.11-1.462-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0 1 10 4.836c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C17.137 18.163 20 14.418 20 10c0-5.523-4.477-10-10-10Z" />
        </svg>

        Grid GitHub repo
      </a>

      <a href="/payouts-and-b2b/platform-tools/sandbox-testing" className="resources-link">
        <img src="https://mintcdn.com/ramps-docs-sync-20260320/SToHfX38E6JNxvih/images/icons/hammer.svg?fit=max&auto=format&n=SToHfX38E6JNxvih&q=85&s=c435217a3fb3fbf81e200b15e5a83352" alt="" className="resources-link-icon" width="20" height="20" data-path="images/icons/hammer.svg" />

        Tools and sandbox
      </a>

      <a href="/payouts-and-b2b/platform-tools/postman-collection" className="resources-link">
        <img src="https://mintcdn.com/ramps-docs-sync-20260320/SToHfX38E6JNxvih/images/icons/IconPostman.svg?fit=max&auto=format&n=SToHfX38E6JNxvih&q=85&s=db23eb4d254acffdc04d7645f76e74d3" alt="" className="resources-link-icon" width="20" height="20" data-path="images/icons/IconPostman.svg" />

        Postman collection
      </a>
    </div>

    <div className="resources-column">
      <div className="resources-column-title">Need help?</div>

      <a href="mailto:support@lightspark.com" className="resources-link">
        <svg className="resources-link-icon" width="20" height="20" viewBox="0 0 20 20" fill="none">
          <path d="M6.667 7.5h6.666M6.667 10.833h4.166M10 17.5l-2.5-2.5H5a1.667 1.667 0 0 1-1.667-1.667V5.833A1.667 1.667 0 0 1 5 4.167h10a1.667 1.667 0 0 1 1.667 1.666v7.5A1.667 1.667 0 0 1 15 15h-2.5L10 17.5Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
        </svg>

        Contact support
      </a>

      <a href="https://www.lightspark.com/contact" className="resources-link">
        <svg className="resources-link-icon" width="20" height="20" viewBox="0 0 20 20" fill="none">
          <path d="M14.167 8.333v-2.5a4.167 4.167 0 1 0-8.334 0v2.5m8.334 0H5.833a1.667 1.667 0 0 0-1.666 1.667v5a1.667 1.667 0 0 0 1.666 1.667h8.334a1.667 1.667 0 0 0 1.666-1.667v-5a1.667 1.667 0 0 0-1.666-1.667Zm-4.167 3.334v1.666" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
        </svg>

        Request sandbox access
      </a>

      <a href="https://www.lightspark.com/contact" className="resources-link">
        <svg className="resources-link-icon" width="20" height="20" viewBox="0 0 20 20" fill="none">
          <path d="M6.667 2.5v1.667M13.333 2.5v1.667M3.333 7.5h13.334M5 4.167h10a1.667 1.667 0 0 1 1.667 1.666v10A1.667 1.667 0 0 1 15 17.5H5a1.667 1.667 0 0 1-1.667-1.667v-10A1.667 1.667 0 0 1 5 4.167Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
        </svg>

        Talk to sales
      </a>
    </div>

    <div className="resources-column">
      <div className="resources-column-title">Socials</div>

      <a href="https://x.com/lightspark" className="resources-link">
        <svg className="resources-link-icon" width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
          <path d="M15.75 1.25h2.875l-6.25 7.125L19.625 18.5h-5.75l-4.5-5.875-5.125 5.875H1.375l6.625-7.625L1 1.25h5.875l4.125 5.375L15.75 1.25Zm-1 15.125h1.625L5.5 2.875H3.75L14.75 16.375Z" />
        </svg>

        X (Twitter)
      </a>

      <a href="https://linkedin.com/company/lightspark-group" className="resources-link">
        <svg className="resources-link-icon" width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
          <path d="M18.52 0H1.477C.66 0 0 .645 0 1.44v17.12C0 19.355.66 20 1.477 20h17.04c.817 0 1.48-.645 1.48-1.44V1.44C20 .645 19.337 0 18.52 0ZM5.934 17.043H2.965V7.496h2.969v9.547ZM4.449 6.195a1.72 1.72 0 1 1 0-3.439 1.72 1.72 0 0 1 0 3.44Zm12.594 10.848h-2.965v-4.64c0-1.106-.018-2.532-1.543-2.532-1.545 0-1.78 1.207-1.78 2.452v4.72H7.792V7.496h2.844v1.305h.041c.396-.75 1.363-1.543 2.804-1.543 3 0 3.558 1.974 3.558 4.543v5.242h.004Z" />
        </svg>

        LinkedIn
      </a>
    </div>
  </div>
</div>