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

# Home

<div className="relative overflow-hidden">
  <div className="absolute inset-0 bg-gradient-to-br from-emerald-50/50 via-transparent to-blue-50/30 dark:from-emerald-950/20 dark:via-transparent dark:to-blue-950/10" />

  <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-4xl h-px bg-gradient-to-r from-transparent via-emerald-200 to-transparent dark:via-emerald-800" />

  <div className="relative px-4 max-w-6xl mx-auto">
    <div className="pt-16 pb-16 text-center">
      <div className="space-y-8">
        {/* Title and Subtitle */}

        <div className="space-y-6 flex flex-col items-center justify-center">
          <h1 className="text-5xl lg:text-7xl font-bold bg-gradient-to-r from-gray-900 via-emerald-700 to-gray-900 dark:from-zinc-100 dark:via-emerald-400 dark:to-zinc-100 bg-clip-text text-transparent tracking-tight leading-tight">
            Commerce Engine
            <span className="block text-4xl lg:text-6xl mt-3">Developer Portal</span>
          </h1>

          <p className="max-w-2xl mx-auto text-xl lg:text-2xl text-gray-600 dark:text-zinc-300 leading-relaxed font-light">
            Everything you need to build powerful, custom commerce experiences with our comprehensive APIs and SDK.
          </p>
        </div>
      </div>
    </div>

    <div className="pb-16">
      <div className="mb-12 max-w-3xl mx-auto flex flex-col items-center justify-center">
        <h2 className="text-3xl lg:text-4xl font-bold text-gray-900 dark:text-zinc-100 mb-4">
          Get Started
        </h2>

        <p className="max-w-2xl mx-auto text-lg text-gray-600 dark:text-zinc-400 leading-relaxed">
          Choose your preferred way to start building with Commerce Engine
        </p>
      </div>

      <div className="max-w-4xl mx-auto">
        <CardGroup cols={2}>
          <Card title="🚀 Quickstart Guide" icon="rocket-launch" href="/storefront/quickstart">
            Authenticate and make your first API call in under 5 minutes. Perfect for getting started quickly.
          </Card>

          <Card title="AI-Assisted Development" icon="wand-magic-sparkles" href="/ai/overview">
            Use AI coding assistants to build Commerce Engine integrations faster with LLM-optimized docs, agent skills, and ready-to-use prompts.
          </Card>

          <Card title="📖 API Reference" icon="code-branch" href="/api-reference/getting-started">
            Explore comprehensive API documentation with detailed endpoints, examples, and interactive playground.
          </Card>

          <Card title="LLM Docs" icon="robot" href="https://llm-docs.commercengine.io">
            Explore our AI-optimized SDK and API reference at `llm-docs.commercengine.io`
          </Card>
        </CardGroup>
      </div>
    </div>

    <div className="py-16">
      <div className="mb-12 max-w-3xl mx-auto flex flex-col items-center justify-center">
        <h2 className="text-2xl lg:text-3xl font-semibold text-gray-900 dark:text-zinc-100 mb-4">
          Essential Resources
        </h2>

        <p className="max-w-3xl mx-auto text-gray-600 dark:text-zinc-400 leading-relaxed">
          Everything you need to build amazing commerce experiences
        </p>
      </div>

      <div className="max-w-5xl mx-auto">
        <CardGroup cols={2}>
          <Card title="🛠️ SDK Integration" icon="node-js" href="/sdk/installation">
            Get started with our 100% type-safe SDK that works seamlessly across server and client environments.
          </Card>

          <Card title="🏪 Storefront Guide" icon="store" href="/storefront/authentication">
            Learn how to build exceptional customer-facing commerce experiences from authentication to checkout.
          </Card>

          <Card title="🔐 Authentication" icon="key" href="/storefront/authentication">
            Secure user authentication with multiple login methods including email, phone, and social providers.
          </Card>

          <Card title="🛒 Hosted Checkout" icon="bag-shopping" href="/hosted-checkout/overview">
            Hosted checkout is a pre-built, embeddable checkout that runs inside an iframe on your site offering an end-to-end cart and checkout experience.
          </Card>
        </CardGroup>
      </div>
    </div>

    <div className="pb-16" />
  </div>
</div>