<div style="max-width: 1200px; margin: 0 auto;">
  <section class="hero-section" style="display: flex; align-items: center; gap: 40px; min-height: 420px;">
    <div class="hero-text" style="flex: 1;">
      <h1 style="color: #333; font-size: 3rem; font-weight: 700; margin-bottom: 20px; line-height: 1.2;">Teya Developer Portal</h1>
      <p style="color: #666; font-size: 1.25rem; line-height: 1.6; margin-bottom: 0;">
        Build powerful payment solutions with our comprehensive APIs, SDKs, and integration guides.
      </p>
    </div>
    <div class="hero-image" style="flex: 1;">
      <img src="/images/Hero.svg" alt="Teya Developer Portal" style="width: 100%; height: auto; max-width: 720px; border: none; border-radius: 0; outline: none; box-shadow: none;">
    </div>
  </section>

  <div id="integration-guide" style="padding-bottom: 60px;">
  <div class="ig-nav-cards">

  <a href="/partners/overview" class="ig-nav-card">
  <div class="ig-nav-card-icon" style="background:#f0f7ff;color:#008BB9;"><i class="fas fa-handshake"></i></div>
  <div class="ig-nav-card-content">
  <h4>Partners</h4>
  <p class="ig-card-subtitle">Build for the merchants you serve</p>
  <p>Pair your ePOS with a Teya card machine, run it on one, take payments on your own device, or offer online payments to your merchants.</p>
  </div>
  </a>

  <a href="/online-payments/overview" class="ig-nav-card">
  <div class="ig-nav-card-icon" style="background:#fef3c7;color:#d97706;"><i class="fas fa-shopping-cart"></i></div>
  <div class="ig-nav-card-content">
  <h4>Businesses</h4>
  <p class="ig-card-subtitle">Accept payments for your own business</p>
  <p>Take payments online with Pay By Link, Hosted Checkout, Embedded Components, or ready-made plugins for Shopify and WooCommerce.</p>
  </div>
  </a>

  <a href="/apis/overview" class="ig-nav-card">
  <div class="ig-nav-card-icon" style="background:#f0faf0;color:#16a34a;"><i class="fas fa-cogs"></i></div>
  <div class="ig-nav-card-content">
  <h4>API Reference</h4>
  <p class="ig-card-subtitle">Full endpoint-level documentation</p>
  <p>POSLink and Online Payments API endpoints for partners, plus Payments, Online Payments, Dynamic Currency Conversion, and Reporting for businesses.</p>
  </div>
  </a>

  </div>
  </div>
</div>
