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

# Home

>  

export const GradientHoverCard = ({children, direction = "vertical", title, iconName, href}) => <a className="gradient-hover-card-wrapper" href={href}>
    <div className="gradient-hover-card-inner">
      <div className="gradient-hover-card-inner__vertical-container">
        <img className="gradient-hover-card-inner_icon" src={`/image/${iconName}.svg`} />
        <p className="gradient-hover-card-title">{title}</p>
        <p className="gradient-hover-card-content">{children}</p>
      </div>
    </div>
  </a>;

<div className="hero-section flex flex-col items-center text-center relative overflow-hidden">
  <h1 className="hero-title">Build with HopNow</h1>

  <p className="hero-description">
    Complete developer platform for virtual accounts, stablecoins, payouts, and
    FX. Move money programmatically across borders with a single API.
  </p>

  <div className="hero-buttons flex items-center">
    <a href="/introduction" className="hero-btn-primary flex items-center">
      <span>Get Started </span>
      <span className="hero-btn-primary-arrow">›</span>
    </a>

    <a href="/webhooks/overview" className="hero-btn-secondary">
      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M1.33301 11.375V2.62499C1.33301 2.23822 1.48665 1.86728 1.76014 1.59379C2.03363 1.3203 2.40457 1.16666 2.79134 1.16666H10.083C10.2377 1.16666 10.3861 1.22811 10.4955 1.33751C10.6049 1.44691 10.6663 1.59528 10.6663 1.74999V12.25C10.6663 12.4047 10.6049 12.5531 10.4955 12.6625C10.3861 12.7719 10.2377 12.8333 10.083 12.8333H2.79134C2.40457 12.8333 2.03363 12.6797 1.76014 12.4062C1.48665 12.1327 1.33301 11.7618 1.33301 11.375ZM1.33301 11.375C1.33301 10.9882 1.48665 10.6173 1.76014 10.3438C2.03363 10.0703 2.40457 9.91666 2.79134 9.91666H10.6663" stroke="#101828" strokeWidth="1.16667" strokeLinecap="round" strokeLinejoin="round" />
      </svg>

      <span>View Guides</span>
    </a>
  </div>

  <div className="hero-divider" />

  <div className="hero-animation-item circle-1" />
</div>

<div className="hero-animation-item circle-2" />

<div className="content-wrapper">
  <h2 className="section-title">Quickstart Guides</h2>

  <div className="home-quick-start">
    <CardGroup cols={2}>
      <GradientHoverCard iconName="create-virtual-account" title="Create a virtual account" href="/api-reference/virtual-accounts/create-virtual-account">
        Issue local banking details to receive funds in multiple currencies
      </GradientHoverCard>

      <GradientHoverCard iconName="execute-fx" title="Execute an FX trade" href="/api-reference/fx/create-fx-quote">
        Lock in exchange rates and convert between currencies
      </GradientHoverCard>

      <GradientHoverCard iconName="create-wallet" title="Create a wallet" href="/api-reference/wallets/create-wallet">
        Generate crypto wallets and addresses for stablecoins
      </GradientHoverCard>

      <GradientHoverCard iconName="issue-payout" title="Issue a payout" href="/api-reference/payouts/create-payout">
        Send money to beneficiaries worldwide with realtime tracking
      </GradientHoverCard>
    </CardGroup>
  </div>

  <div className="resources-section">
    <h2 className="section-title">Resources</h2>

    <div className="support-card flex items-center gap-4">
      <img src="https://mintcdn.com/hopinnovationsinc/6nUQ1_LYopXKNJTR/image/support.svg?fit=max&auto=format&n=6nUQ1_LYopXKNJTR&q=85&s=9bf575e9cea6d765522b8798c185c18f" width={48} height={48} data-path="image/support.svg" />

      <div className="flex-1">
        <h3 className="support-card-title font-semibold">
          Need help with integration?
        </h3>

        <p className="text-sm">Our team is here to support you 24/7/365</p>
      </div>

      <a className="support-btn flex items-center gap-1" href="mailto:support@hopnow.io">
        <span className="font-semibold">Contact Support</span>

        <Icon color="white" size={14} icon="arrow-right" />
      </a>
    </div>
  </div>
</div>