# Overview

import "../src/Overview.css";

<div className="api-overview">

<div className="api-overview__intro">
  <p className="api-overview__lead">
    Add item authentication to your marketplace, resale, claims, or operations
    workflow. The LegitGrails API lets your backend discover supported items,
    upload photos, submit orders, and receive authentication outcomes.
  </p>

  <p className="api-overview__security-note">
    The API is designed for server-to-server use. Keep API keys in secure
    server-side storage and never expose them in client applications.
  </p>

</div>

## Get started

<div className="api-overview__cards">
  <a className="api-overview__card" href="/quickstart">
    <span className="api-overview__card-heading">
      <span className="api-overview__card-title">Quickstart</span>
      <span className="api-overview__card-arrow" aria-hidden="true">→</span>
    </span>
    <span className="api-overview__card-description">
      Create a test order and retrieve its authentication outcome.
    </span>
  </a>

  <a className="api-overview__card" href="/integration-setup">
    <span className="api-overview__card-heading">
      <span className="api-overview__card-title">Integration setup</span>
      <span className="api-overview__card-arrow" aria-hidden="true">→</span>
    </span>
    <span className="api-overview__card-description">
      Connect your account and configure the API for your environment.
    </span>
  </a>

  <a className="api-overview__card" href="/authentication">
    <span className="api-overview__card-heading">
      <span className="api-overview__card-title">Authentication and API keys</span>
      <span className="api-overview__card-arrow" aria-hidden="true">→</span>
    </span>
    <span className="api-overview__card-description">
      Authenticate requests and manage Live and Test API keys safely.
    </span>
  </a>
</div>

## Build your order flow

<div className="api-overview__cards">
  <a className="api-overview__card" href="/catalog">
    <span className="api-overview__card-heading">
      <span className="api-overview__card-title">Catalog</span>
      <span className="api-overview__card-arrow" aria-hidden="true">→</span>
    </span>
    <span className="api-overview__card-description">
      Find supported brands, categories, models, answer times, and photo requirements.
    </span>
  </a>

  <a className="api-overview__card" href="/photos">
    <span className="api-overview__card-heading">
      <span className="api-overview__card-title">Photos</span>
      <span className="api-overview__card-arrow" aria-hidden="true">→</span>
    </span>
    <span className="api-overview__card-description">
      Upload item images and respond when an order needs updated photos.
    </span>
  </a>

  <a className="api-overview__card" href="/orders">
    <span className="api-overview__card-heading">
      <span className="api-overview__card-title">Orders</span>
      <span className="api-overview__card-arrow" aria-hidden="true">→</span>
    </span>
    <span className="api-overview__card-description">
      Create authentication orders, track their status, and use the outcome.
    </span>
  </a>
</div>

## Run your integration reliably

<div className="api-overview__cards">
  <a className="api-overview__card" href="/webhooks">
    <span className="api-overview__card-heading">
      <span className="api-overview__card-title">Webhooks</span>
      <span className="api-overview__card-arrow" aria-hidden="true">→</span>
    </span>
    <span className="api-overview__card-description">
      Receive authenticated notifications when an order needs photos or has an outcome.
    </span>
  </a>

  <a className="api-overview__card" href="/rate-limits">
    <span className="api-overview__card-heading">
      <span className="api-overview__card-title">Rate limits</span>
      <span className="api-overview__card-arrow" aria-hidden="true">→</span>
    </span>
    <span className="api-overview__card-description">
      Understand per-API-key quotas and respond correctly to rate limiting.
    </span>
  </a>

  <a className="api-overview__card" href="/errors">
    <span className="api-overview__card-heading">
      <span className="api-overview__card-title">Errors</span>
      <span className="api-overview__card-arrow" aria-hidden="true">→</span>
    </span>
    <span className="api-overview__card-description">
      Interpret error responses and build predictable failure handling.
    </span>
  </a>
</div>

## Reference and updates

<div className="api-overview__cards api-overview__cards--compact">
  <a className="api-overview__card" href="/api">
    <span className="api-overview__card-heading">
      <span className="api-overview__card-title">API reference</span>
      <span className="api-overview__card-arrow" aria-hidden="true">→</span>
    </span>
    <span className="api-overview__card-description">
      Browse endpoints, request schemas, parameters, and response examples.
    </span>
  </a>

  <a className="api-overview__card" href="/changelog">
    <span className="api-overview__card-heading">
      <span className="api-overview__card-title">Changelog</span>
      <span className="api-overview__card-arrow" aria-hidden="true">→</span>
    </span>
    <span className="api-overview__card-description">
      Review recent API features and integration behavior changes.
    </span>
  </a>
</div>

</div>