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

# TON Center

export const Columns = ({children, cols = 2}) => {
  const columnWidth = `${100 / cols}%`;
  return <div style={{
    display: 'flex',
    flexWrap: 'wrap',
    gap: '1rem'
  }}>
      {Array.isArray(children) ? children.map((child, i) => <div key={i} style={{
    flex: `1 0 ${columnWidth}`,
    maxWidth: columnWidth,
    boxSizing: 'border-box',
    display: 'flex'
  }}>
              <div style={{
    flex: 1
  }}>{child}</div>
            </div>) : <div style={{
    flex: `1 0 ${columnWidth}`,
    maxWidth: columnWidth,
    boxSizing: 'border-box',
    display: 'flex'
  }}>
            <div style={{
    flex: 1
  }}>{children}</div>
          </div>}
    </div>;
};

<section
  style={{
    padding: '2rem 1rem',
    display: 'flex',
    justifyContent: 'center'
}}
>
  <div
    style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(2, 1fr)',
        gap: '1rem',
        maxWidth: '800px',
        width: '100%'
    }}
  >
    <div
      style={{
            gridColumn: '1 / -1',
            textAlign: 'center',
            marginBottom: '2rem'
        }}
    >
      <div
        style={{
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center'
            }}
      >
        <Card title={<span style={{ fontSize: '2rem', fontWeight: 'bold' }}>TON Center</span>}>
          Fast and reliable HTTP API for The Open Network
        </Card>

        <a
          href="https://t.me/toncenter"
          style={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    width: '100%',
                    height: '56px',
                    backgroundColor: '#0098ea',
                    color: 'white',
                    borderRadius: '6px',
                    textDecoration: 'none',
                    fontWeight: 'bold',
                    fontSize: '1rem',
                    boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
                    transition: 'background-color 0.3s',
                    marginTop: '1.25rem',
                    gridColumn: '1 / span 2'
                }}
          onMouseOver={(e) => e.currentTarget.style.backgroundColor = '#0077c7'}
          onMouseOut={(e) => e.currentTarget.style.backgroundColor = '#0098ea'}
        >
          Get your API key
        </a>
      </div>
    </div>

    <Card title="Get Started" icon="rocket" href="/docs/intro" color="#07acff">
      Learn the basics of TON Center API and how to start building with it in minutes.
    </Card>

    <Card title="Cookbook" icon="code" href="/docs/cookbook-v3/find-transaction-trace" color="#07acff">
      Practical guides and examples for working with TON Center APIs.
    </Card>

    <Card title="API v2 Reference" icon="server" href="/apiv2/accounts/get-address-information" color="#07acff">
      Access real-time blockchain data directly from TON nodes. Ideal for fast, low-latency reads.
    </Card>

    <Card title="API v3 Reference" icon="database" href="/apiv3/accounts/get-account-states" color="#07acff">
      Explore structured and indexed blockchain data for deeper insights and analytics use cases.
    </Card>
  </div>
</section>