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

#  

>  

export const cards = [
  { title: "Guide", description: "Learn how to use Bila to manage payments and sub-wallets", href: "/guide/sub-wallets/what-is-a-sub-wallet", icon: "☐" },
  { title: "Developers", description: "Integrate Bila programmatically with our REST API", href: "/developers/overview", icon: "⟡" },
  { title: "API Reference", description: "Interactive API reference for all endpoints", href: "/api-reference", icon: "⬡" },
  { title: "Payments", description: "Add money and make payments to recipients", href: "/how-to-add-money-to-my-bila-account", icon: "△" },
  { title: "Sub Wallets", description: "Create and manage sub-wallets for your business", href: "/guide/sub-wallets/what-is-a-sub-wallet", icon: "◎" },
  { title: "Help Center", description: "Get support and answers to common questions", href: "https://help.usebila.com/en", 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' }}>
        Accept collections, trigger payouts, and manage your business finances with Bila.
      </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 #f16101',
            cursor: 'pointer',
            transition: 'all 0.15s ease-in-out',
            boxShadow: '0 4px 14px 0 rgba(241, 97, 1, 0.1)',
          }}
          onMouseEnter={e => {
            e.currentTarget.style.background = 'rgba(241, 97, 1, 0.05)';
            e.currentTarget.style.boxShadow = '0 6px 20px 0 rgba(241, 97, 1, 0.2)';
            e.currentTarget.style.transform = 'translateY(-2px)';
          }}
          onMouseLeave={e => {
            e.currentTarget.style.background = 'transparent';
            e.currentTarget.style.boxShadow = '0 4px 14px 0 rgba(241, 97, 1, 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 />