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

# Introduction

> The complete digital payments platform for businesses of all sizes

<div className="min-h-screen bg-background">
  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-20">
    <div className="text-center mb-20">
      <div className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-300 mb-8">
        <span className="w-2 h-2 bg-blue-500 rounded-full mr-2" />

        Powered by Pesaswap
      </div>

      <h1 className="text-5xl lg:text-6xl xl:text-7xl font-bold text-foreground mb-6 leading-tight">
        Build Fast & Secure Payments
      </h1>

      <p className="text-xl lg:text-2xl text-muted-foreground mb-10 max-w-3xl mx-auto leading-relaxed">
        Complete documentation and guides for integrating Pesaswap's enterprise-grade payment infrastructure into your applications.
      </p>

      <div className="flex flex-col sm:flex-row gap-4 justify-center">
        <a href="/essentials/ExplorationGuide" className="inline-flex items-center justify-center px-8 py-4 bg-foreground text-background font-semibold rounded-lg hover:bg-foreground/90 transition-colors">
          Get Started
        </a>

        <a href="/api-reference/payments/payments--create" className="inline-flex items-center justify-center px-8 py-4 border border-border text-foreground font-semibold rounded-lg hover:bg-muted transition-colors">
          View API Reference
        </a>
      </div>
    </div>

    <div className="mb-20">
      <div className="text-center mb-16">
        <h2 className="text-3xl lg:text-4xl font-bold text-foreground mb-4">
          Everything you need to accept payments
        </h2>

        <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
          From simple checkout to complex payment orchestration, we've got you covered.
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {/* Payment Operations */}

        <div className="group relative h-full">
          <div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-purple-500/10 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

          <div className="relative p-6 border border-border rounded-xl hover:border-blue-300 dark:hover:border-blue-600 transition-colors h-full flex flex-col">
            <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/20 rounded-lg flex items-center justify-center mb-4">
              <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
              </svg>
            </div>

            <h3 className="text-xl font-semibold text-foreground mb-3">
              Payment Operations
            </h3>

            <p className="text-muted-foreground mb-6 leading-relaxed flex-grow">
              Manage accounts, teams, analytics, and payment operations with our comprehensive control center.
            </p>

            <a href="/essentials/explore-pesaswap/payment-operations/managing-accounts-and-profiles" className="inline-flex items-center text-blue-600 hover:text-blue-700 font-medium text-sm group-hover:translate-x-1 transition-transform mt-auto">
              Learn more

              <svg className="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
              </svg>
            </a>
          </div>
        </div>

        {/* Server Setup */}

        <div className="group relative h-full">
          <div className="absolute inset-0 bg-gradient-to-r from-purple-500/10 to-pink-500/10 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

          <div className="relative p-6 border border-border rounded-xl hover:border-purple-300 dark:hover:border-purple-600 transition-colors h-full flex flex-col">
            <div className="w-12 h-12 bg-purple-100 dark:bg-purple-900/20 rounded-lg flex items-center justify-center mb-4">
              <svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
              </svg>
            </div>

            <h3 className="text-xl font-semibold text-foreground mb-3">
              Server Setup
            </h3>

            <p className="text-muted-foreground mb-6 leading-relaxed flex-grow">
              Complete server-side configuration guides with customizable and native integrations.
            </p>

            <a href="/essentials/explore-pesaswap/checkout-experience/customizable-and-native-integrations/server-setup" className="inline-flex items-center text-purple-600 hover:text-purple-700 font-medium text-sm group-hover:translate-x-1 transition-transform mt-auto">
              Setup Guide

              <svg className="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
              </svg>
            </a>
          </div>
        </div>

        {/* Web Hooks */}

        <div className="group relative h-full">
          <div className="absolute inset-0 bg-gradient-to-r from-green-500/10 to-emerald-500/10 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

          <div className="relative p-6 border border-border rounded-xl hover:border-green-300 dark:hover:border-green-600 transition-colors h-full flex flex-col">
            <div className="w-12 h-12 bg-green-100 dark:bg-green-900/20 rounded-lg flex items-center justify-center mb-4">
              <svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
              </svg>
            </div>

            <h3 className="text-xl font-semibold text-foreground mb-3">
              Web Hooks
            </h3>

            <p className="text-muted-foreground mb-6 leading-relaxed flex-grow">
              Powerful REST APIs with webhooks, rate limiting, and comprehensive documentation.
            </p>

            <a href="/essentials/explore-pesaswap/payment-orchestration/accept-payments/webhooks" className="inline-flex items-center text-green-600 hover:text-green-700 font-medium text-sm group-hover:translate-x-1 transition-transform mt-auto">
              Learn more

              <svg className="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
              </svg>
            </a>
          </div>
        </div>

        {/* Payment Methods */}

        <div className="group relative h-full">
          <div className="absolute inset-0 bg-gradient-to-r from-yellow-500/10 to-orange-500/10 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

          <div className="relative p-6 border border-border rounded-xl hover:border-yellow-300 dark:hover:border-yellow-600 transition-colors h-full flex flex-col">
            <div className="w-12 h-12 bg-yellow-100 dark:bg-yellow-900/20 rounded-lg flex items-center justify-center mb-4">
              <svg className="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
              </svg>
            </div>

            <h3 className="text-xl font-semibold text-foreground mb-3">
              Payment Methods
            </h3>

            <p className="text-muted-foreground mb-6 leading-relaxed flex-grow">
              Accept cards, wallets, bank transfers, and more with intelligent routing and optimization.
            </p>

            <a href="/essentials/explore-pesaswap/checkout-experience/payment-method-management" className="inline-flex items-center text-yellow-600 hover:text-yellow-700 font-medium text-sm group-hover:translate-x-1 transition-transform mt-auto">
              Learn more

              <svg className="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
              </svg>
            </a>
          </div>
        </div>

        {/* Payment Links */}

        <div className="group relative h-full">
          <div className="absolute inset-0 bg-gradient-to-r from-indigo-500/10 to-blue-500/10 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

          <div className="relative p-6 border border-border rounded-xl hover:border-indigo-300 dark:hover:border-indigo-600 transition-colors h-full flex flex-col">
            <div className="w-12 h-12 bg-indigo-100 dark:bg-indigo-900/20 rounded-lg flex items-center justify-center mb-4">
              <svg className="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
              </svg>
            </div>

            <h3 className="text-xl font-semibold text-foreground mb-3">
              Payment Links
            </h3>

            <p className="text-muted-foreground mb-6 leading-relaxed flex-grow">
              Create and share payment links instantly via email, SMS, or social media.
            </p>

            <a href="/essentials/explore-pesaswap/payment-orchestration/accept-payments/payment-links" className="inline-flex items-center text-indigo-600 hover:text-indigo-700 font-medium text-sm group-hover:translate-x-1 transition-transform mt-auto">
              Try now

              <svg className="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
              </svg>
            </a>
          </div>
        </div>

        {/* Users and Roles */}

        <div className="group relative h-full">
          <div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-indigo-500/10 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

          <div className="relative p-6 border border-border rounded-xl hover:border-blue-300 dark:hover:border-blue-600 transition-colors h-full flex flex-col">
            <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/20 rounded-lg flex items-center justify-center mb-4">
              <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a4 4 0 00-3-3.87M9 20H4v-2a4 4 0 013-3.87M16 11a4 4 0 10-8 0 4 4 0 008 0z" />
              </svg>
            </div>

            <h3 className="text-xl font-semibold text-foreground mb-3">
              Users and Roles
            </h3>

            <p className="text-muted-foreground mb-6 leading-relaxed flex-grow">
              Manage users, roles, and access permissions to securely control your payments system.
            </p>

            <a href="/essentials/explore-pesaswap/payment-operations/users and roles/users-and-roles" className="inline-flex items-center text-blue-600 hover:text-blue-700 font-medium text-sm group-hover:translate-x-1 transition-transform mt-auto">
              Get started

              <svg className="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>

    <div className="mb-20">
      <div className="text-center mb-16">
        <h2 className="text-3xl lg:text-4xl font-bold text-foreground mb-4">
          Advanced Features
        </h2>

        <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
          Powerful tools to optimize your payment operations and maximize revenue.
        </p>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <div className="bg-gradient-to-br from-blue-600 to-purple-700 rounded-2xl p-8 text-white relative overflow-hidden">
          <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -translate-y-16 translate-x-16" />

          <div className="relative">
            <div className="w-12 h-12 bg-white/20 rounded-lg flex items-center justify-center mb-6">
              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
              </svg>
            </div>

            <h3 className="text-2xl font-bold mb-4">Smart Routing</h3>

            <p className="text-blue-100 mb-6 leading-relaxed">
              Automatically route payments to the best processor based on success rates, costs, and performance metrics.
            </p>

            <a href="/essentials/explore-pesaswap/payment-orchestration/smart-routing" className="inline-flex items-center bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors">
              Learn more

              <svg className="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
              </svg>
            </a>
          </div>
        </div>

        <div className="bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl p-8 text-white relative overflow-hidden">
          <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -translate-y-16 translate-x-16" />

          <div className="relative">
            <div className="w-12 h-12 bg-white/20 rounded-lg flex items-center justify-center mb-6">
              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
              </svg>
            </div>

            <h3 className="text-2xl font-bold mb-4">Analytics & Insights</h3>

            <p className="text-green-100 mb-6 leading-relaxed">
              Real-time dashboards with detailed analytics to help you understand and optimize your payment performance.
            </p>

            <a href="/essentials/explore-pesaswap/payment-operations/analytics-and-operations" className="inline-flex items-center bg-white text-green-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors">
              View dashboard

              <svg className="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>

    <div className="mb-20">
      <div className="text-center mb-16">
        <h2 className="text-3xl lg:text-4xl font-bold text-foreground mb-4">
          Developer Resources
        </h2>

        <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
          Everything you need to integrate quickly and efficiently.
        </p>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
        <a href="/api-reference/payments/payments--create" className="group text-center p-6 border border-border rounded-xl hover:border-blue-300 dark:hover:border-blue-600 transition-colors">
          <div className="w-16 h-16 bg-blue-100 dark:bg-blue-900/20 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
            <svg className="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
            </svg>
          </div>

          <h3 className="font-semibold text-foreground mb-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
            API Documentation
          </h3>

          <p className="text-sm text-muted-foreground">
            Comprehensive guides and references
          </p>
        </a>

        <a href="/essentials/check-list-for-production/going-live/for-saas-setup" className="group text-center p-6 border border-border rounded-xl hover:border-purple-300 dark:hover:border-purple-600 transition-colors">
          <div className="w-16 h-16 bg-purple-100 dark:bg-purple-900/20 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
            <svg className="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>

          <h3 className="font-semibold text-foreground mb-2 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors">
            Production Checklist
          </h3>

          <p className="text-sm text-muted-foreground">
            Complete setup guide for going live
          </p>
        </a>

        <a href="/essentials/ExplorationGuide" className="group text-center p-6 border border-border rounded-xl hover:border-green-300 dark:hover:border-green-600 transition-colors">
          <div className="w-16 h-16 bg-green-100 dark:bg-green-900/20 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
            <svg className="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
            </svg>
          </div>

          <h3 className="font-semibold text-foreground mb-2 group-hover:text-green-600 dark:group-hover:text-green-400 transition-colors">
            Tutorials
          </h3>

          <p className="text-sm text-muted-foreground">
            Step-by-step integration guides
          </p>
        </a>

        <a href="mailto:support@pesaswap.io" className="group text-center p-6 border border-border rounded-xl hover:border-orange-300 dark:hover:border-orange-600 transition-colors">
          <div className="w-16 h-16 bg-orange-100 dark:bg-orange-900/20 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
            <svg className="w-8 h-8 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
            </svg>
          </div>

          <h3 className="font-semibold text-foreground mb-2 group-hover:text-orange-600 dark:group-hover:text-orange-400 transition-colors">
            Support
          </h3>

          <p className="text-sm text-muted-foreground">
            24/7 developer support
          </p>
        </a>
      </div>
    </div>

    <div className="text-center p-12 border border-border rounded-2xl bg-muted/30">
      <h2 className="text-2xl font-bold mb-4 text-foreground">
        Need help getting started?
      </h2>

      <p className="text-muted-foreground mb-8 max-w-2xl mx-auto">
        Can't find what you're looking for? Our team is here to help you integrate Pesaswap into your application.
      </p>

      <div className="flex flex-col sm:flex-row gap-4 justify-center">
        <a href="mailto:info@pesaswap.io" className="inline-flex items-center justify-center px-6 py-3 bg-foreground text-background font-semibold rounded-lg hover:bg-foreground/90 transition-colors">
          <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
          </svg>

          Contact Support
        </a>

        <a href="/essentials/faq" className="inline-flex items-center justify-center px-6 py-3 border border-border text-foreground font-semibold rounded-lg hover:bg-muted transition-colors">
          <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>

          View FAQ
        </a>
      </div>
    </div>
  </div>
</div>