Get your free authorization key (ie, Bearer token) and immediately access our entire API set. 

<div className="not-prose mx-auto mt-4 w-full max-w-xl">
  <Onboarding />
</div>

<div className="not-prose mx-auto mt-20 max-w-5xl">

  <div className="mb-10 text-center">
    <p className="!mb-2 !text-xs !font-semibold !uppercase !tracking-[0.18em] !text-muted-foreground">
      Developer Playground
    </p>

    <h2 className="!m-0 !text-2xl !font-semibold !tracking-tight md:!text-3xl">
      Start building with CarbonSutra
    </h2>

    <p className="!mx-auto !mt-3 !max-w-2xl !text-sm !leading-6 !text-muted-foreground md:!text-base">
      Explore the APIs, test real requests, and understand the response
      structure before integrating CarbonSutra into your application.
    </p>

  </div>

  <!-- What's included -->

  <div className="grid gap-4 sm:grid-cols-2">

    <div className="rounded-2xl border border-border bg-card p-6 shadow-sm">
      <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-muted text-sm font-semibold">
        01
      </div>

      <h3 className="!m-0 !text-base !font-semibold">
        100 free API requests
      </h3>

      <p className="!mb-0 !mt-2 !text-sm !leading-6 !text-muted-foreground">
        Explore the API without any upfront commitment and test 
        carbon-emission calculations.
      </p>
    </div>


    <div className="rounded-2xl border border-border bg-card p-6 shadow-sm">
      <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-muted text-sm font-semibold">
        02
      </div>

      <h3 className="!m-0 !text-base !font-semibold">
        Personal API token
      </h3>

      <p className="!mb-0 !mt-2 !text-sm !leading-6 !text-muted-foreground">
        Receive a unique authorization token securely by email after
        registration.
      </p>
    </div>


    <div className="rounded-2xl border border-border bg-card p-6 shadow-sm">
      <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-muted text-sm font-semibold">
        03
      </div>

      <h3 className="!m-0 !text-base !font-semibold">
        Instant access
      </h3>

      <p className="!mb-0 !mt-2 !text-sm !leading-6 !text-muted-foreground">
        Once your token arrives, you can start making authenticated API
        requests immediately.
      </p>
    </div>


    <div className="rounded-2xl border border-border bg-card p-6 shadow-sm">
      <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-muted text-sm font-semibold">
        04
      </div>

      <h3 className="!m-0 !text-base !font-semibold">
        Developer-friendly APIs
      </h3>

      <p className="!mb-0 !mt-2 !text-sm !leading-6 !text-muted-foreground">
        Test endpoints covering travel, vehicles, hotels, fuel, electricity,
        freight, and more.
      </p>
    </div>

  </div>

  <!-- Getting started -->

  <div className="mt-20">

    <div className="mb-8">
      <h2 className="!m-0 !text-2xl !font-semibold !tracking-tight">
        Getting started
      </h2>

      <p className="!mb-0 !mt-2 !text-sm !text-muted-foreground">
        From registration to your first API request in three simple steps.
      </p>
    </div>


    <div className="grid gap-4 md:grid-cols-3">

      <div className="relative rounded-2xl border border-border bg-card p-6">
        <span className="text-xs font-semibold text-muted-foreground">
          STEP 01
        </span>

        <h3 className="!mb-0 !mt-3 !text-base !font-semibold">
          Register your email
        </h3>

        <p className="!mb-0 !mt-2 !text-sm !leading-6 !text-muted-foreground">
          Enter your email address above to create your Playground account.
        </p>
      </div>


      <div className="relative rounded-2xl border border-border bg-card p-6">
        <span className="text-xs font-semibold text-muted-foreground">
          STEP 02
        </span>

        <h3 className="!mb-0 !mt-3 !text-base !font-semibold">
          Receive your token
        </h3>

        <p className="!mb-0 !mt-2 !text-sm !leading-6 !text-muted-foreground">
          We'll send your unique Playground API token to your registered
          email address.
        </p>
      </div>


      <div className="relative rounded-2xl border border-border bg-card p-6">
        <span className="text-xs font-semibold text-muted-foreground">
          STEP 03
        </span>

        <h3 className="!mb-0 !mt-3 !text-base !font-semibold">
          Open the Playground
        </h3>

        <p className="!mb-0 !mt-2 !text-sm !leading-6 !text-muted-foreground">
          Use your token to authenticate requests and start exploring the
          APIs.
        </p>
      </div>

    </div>

  </div>

  <!-- Security -->

  <div className="mt-16 rounded-2xl border border-border bg-muted/40 p-6 md:p-8">

    <div className="flex flex-col gap-5 md:flex-row md:items-start">

      <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-border bg-background text-sm font-semibold">
        !
      </div>

      <div>
        <h2 className="!m-0 !text-lg !font-semibold">
          Keep your token secure
        </h2>

        <p className="!mb-0 !mt-2 !text-sm !leading-6 !text-muted-foreground">
          Your API token provides access to your Playground usage allowance.
          Treat it like a password and keep it private.
        </p>

        <p className="!mb-0 !mt-3 !text-sm !leading-6 !text-muted-foreground">
          Never share your token publicly, commit it to source control, or
          include it directly in client-side application code.
        </p>
      </div>

    </div>

  </div>

  <!-- Final CTA -->

  <div className="mt-16 overflow-hidden rounded-2xl border border-border bg-card">

    <div className="px-6 py-10 text-center md:px-10 md:py-12">

      <p className="!mb-2 !text-xs !font-semibold !uppercase !tracking-[0.18em] !text-muted-foreground">
        Ready to build?
      </p>

      <h2 className="!m-0 !text-2xl !font-semibold !tracking-tight md:!text-3xl">
        Explore your first API request
      </h2>

      <p className="!mx-auto !mt-3 !max-w-xl !text-sm !leading-6 !text-muted-foreground">
        Your Playground token is all you need to start testing CarbonSutra
        APIs and exploring carbon-emission calculations.
      </p>

      <div className="mt-7">
        <a
          href="/api-playground"
          className="group inline-flex items-center gap-2 rounded-xl bg-black px-5 py-2.5 text-sm font-semibold !text-white no-underline shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:bg-black/90 hover:shadow-lg dark:bg-white dark:!text-black dark:hover:bg-white/90"
        >
          Open API Playground

          <span className="transition-transform duration-200 group-hover:translate-x-1">
            →
          </span>
        </a>
      </div>

    </div>

  </div>

</div>