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

# Build with Pleo

<section className="w-full py-2 lg:py-2 font-sans">
  <div className="max-w-7xl mx-auto px-6 lg:px-8">
    <div className="grid md:grid-cols-2 gap-4 md:gap-4 lg:gap-4 items-center">
      {/* Content */}

      <div className="space-y-8">
        <h1 className="text-5xl lg:text-[48px] font-semibold text-[#222222] dark:text-[#FFFFFF] leading-tight">
          Build with Pleo
        </h1>

        <p className="text-lg text-[#737373] leading-relaxed max-w-lg ">
          Integrate and automate your spend management with confidence. Whether you want to build custom workflows or an integration that reaches all Pleo customers, our Developer portal has the tools and guides to get you started.
        </p>

        <a href="/docs/current/getting-started/what-is-pleo" className="inline-flex items-center px-10 py-3 bg-[#222222] text-white font-medium rounded-3xl hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2">
          Get started
        </a>
      </div>

      {/* Illustration */}

      <div className="flex ">
        <div className="w-full max-w-xs md:max-w-sm lg:max-w-lg aspect-square bg-cover bg-center bg-no-repeat" style={{backgroundImage: 'url(https://mintcdn.com/pleo-61d4d38b/UuiilCOMmC9ytc__/images/pleolanding-page-image.png?fit=max&auto=format&n=UuiilCOMmC9ytc__&q=85&s=fd005629f57ca4d44727b0ff749e8260)'}} role="img" aria-label="Build with Pleo illustration" />
      </div>
    </div>
  </div>
</section>

<section className="py-12 lg:py-16 font-sans">
  <div className="max-w-7xl mx-auto px-6 lg:px-8">
    <div className="grid md:grid-cols-2 gap-8">
      {/* Customers Card */}

      <div className="bg-gray-50 border border-gray-200 rounded-xl p-8">
        <div className="flex items-center gap-4 sm:gap-6 md:gap-8">
          <div className="w-20 sm:w-24 md:w-32 flex-shrink-0">
            <div className="w-full h-20 sm:h-24 md:h-32 bg-cover bg-center bg-no-repeat" style={{backgroundImage: 'url(https://mintcdn.com/pleo-61d4d38b/UuiilCOMmC9ytc__/images/pleocustomers.png?fit=max&auto=format&n=UuiilCOMmC9ytc__&q=85&s=a749f5d4b0a4fe528d6a26d32eefda5f)'}} role="img" aria-label="Customers illustration" />
          </div>

          <div className="flex-1">
            <h3 className="text-2xl font-semibold text-gray-900 mb-4">
              Customers
            </h3>

            <p className="text-gray-600 leading-relaxed">
              Whether you're looking to automate tasks, fetch data, or create custom workflows, Pleo's API lets you build custom solutions for your business.
            </p>
          </div>
        </div>
      </div>

      {/* Partners Card */}

      <div className="bg-gray-50 border border-gray-200 rounded-xl p-8">
        <div className="flex items-center gap-4 sm:gap-6 md:gap-8">
          <div className="w-20 sm:w-24 md:w-32 flex-shrink-0">
            <div className="w-full h-20 sm:h-24 md:h-32 bg-cover bg-center bg-no-repeat" style={{backgroundImage: 'url(https://mintcdn.com/pleo-61d4d38b/R6tyZLdlnL4OuyZS/images/pleopartners.svg?fit=max&auto=format&n=R6tyZLdlnL4OuyZS&q=85&s=2d4d9f8c9971bcf276b718a8d5c1de08)'}} role="img" aria-label="Partners illustration" />
          </div>

          <div className="flex-1">
            <h3 className="text-2xl font-semibold text-gray-900 mb-4">
              Partners
            </h3>

            <p className="text-gray-600 leading-relaxed">
              Develop integrations that help customers get more from Pleo and reach thousands of businesses on our growing App Marketplace.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>