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

#  

>  

export const cards = [
  { title: "Console Guide", description: "Configure your account and send your first payment", href: "/guide/USA_geographies", icon: "☐" },
  { title: "API Reference", description: "Integrate Devdraft programmatically", href: "/developers/home/quickstart", icon: "⟡" },
  { title: "SDKs", description: "Client libraries for TypeScript, Python, Go and more", href: "/sdks/sdk-quickstart", icon: "⬡" },
  { title: "Webhooks", description: "Get notified on payment events", href: "/developers/webhooks/overview", icon: "△" },
  { title: "Supported Countries", description: "See where Devdraft operates", href: "/guide/resources/supported_countries_list", icon: "◎" },
  { title: "Changelog", description: "Latest updates and improvements", href: "/changelogs/2026/february", icon: "◷" },
];

export const Page = () => (
  <div>
    <div style={{ textAlign: 'center', paddingTop: '80px', paddingBottom: '64px' }}>
      <h1 style={{ fontSize: '40px', fontWeight: '600', color: 'inherit', marginBottom: '16px', letterSpacing: '-0.5px' }}>
        Documentation
      </h1>
      <p style={{ fontSize: '18px', color: '#71717a', maxWidth: '480px', margin: '0 auto', lineHeight: '1.6' }}>
        Send and receive USD/EUR payments globally using stablecoin infrastructure.
      </p>
    </div>

    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: '24px' }}>
      {cards.map((card) => (
        <a key={card.title} href={card.href} style={{ textDecoration: 'none', borderBottom: 'none', border: 'none', display: 'block' }}>
          <div style={{
            borderRadius: '16px',
            padding: '32px',
            height: '160px',
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'flex-end',
            background: 'transparent',
            border: '0.5px solid #19a7a9',
            cursor: 'pointer',
            transition: 'all 0.15s ease-in-out',
            boxShadow: '0 4px 14px 0 rgba(25, 167, 169, 0.1)',
          }}
          onMouseEnter={e => {
            e.currentTarget.style.background = 'rgba(25, 167, 169, 0.05)';
            e.currentTarget.style.boxShadow = '0 6px 20px 0 rgba(25, 167, 169, 0.2)';
            e.currentTarget.style.transform = 'translateY(-2px)';
          }}
          onMouseLeave={e => {
            e.currentTarget.style.background = 'transparent';
            e.currentTarget.style.boxShadow = '0 4px 14px 0 rgba(25, 167, 169, 0.1)';
            e.currentTarget.style.transform = 'none';
          }}
          >
            <div style={{ fontSize: '24px', marginBottom: '8px' }}>{card.icon}</div>
            <div style={{ fontWeight: '500', fontSize: '16px' }}>{card.title}</div>
            <div style={{ opacity: 0.6, fontSize: '13px', marginTop: '4px' }}>{card.description}</div>
          </div>
        </a>
      ))}
    </div>
  </div>
);

<Page />