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

# Introduction

> HeadKit is the cloud platform making it fast and easy to build headless commerce stores.

export const HeroCard = ({slug, title, description, href}) => {
  return <a className="group cursor-pointer pb-8" href={href}>
      <div className="overflow-hidden rounded-lg border border-gray-200/80 bg-gray-50/50 dark:border-zinc-800 dark:bg-zinc-900/40">
        <div className="relative aspect-[680/404] w-full">
          <img src={`/images/HeadKit_Docs_${slug}-Light.svg`} alt="" className="absolute inset-0 block h-full w-full object-cover object-center dark:hidden pointer-events-none transition-transform duration-100 group-hover:scale-105" />
          <img src={`/images/HeadKit_Docs_${slug}-Dark.svg`} alt="" className="absolute inset-0 hidden h-full w-full object-cover object-center dark:block pointer-events-none transition-transform duration-100 group-hover:scale-105" />
        </div>
      </div>
      <h2 className="mt-5 text-xl font-semibold tracking-tight text-gray-900 dark:text-zinc-50 sm:text-2xl">
        {title}
      </h2>
      <span className="mt-1.5 block text-gray-600 dark:text-zinc-400">
        {description}
      </span>
    </a>;
};

<div className="relative">
  <div className="absolute -top-14 left-0 right-0 opacity-100">
    <img src="https://mintcdn.com/headkit/PZq44JjujayIwzb0/images/hero/background-light.svg?fit=max&auto=format&n=PZq44JjujayIwzb0&q=85&s=916be3bdf904e90de1240cf8c803646e" className="block h-auto w-full pointer-events-none dark:hidden" alt="Decorative background image." width="1920" height="1080" data-path="images/hero/background-light.svg" />

    <img src="https://mintcdn.com/headkit/PZq44JjujayIwzb0/images/hero/background-dark.svg?fit=max&auto=format&n=PZq44JjujayIwzb0&q=85&s=c54b7eccb4662e36be7e08c9a49dc3b6" className="hidden h-auto w-full pointer-events-none dark:block" alt="Decorative background image." width="1920" height="1080" data-path="images/hero/background-dark.svg" />
  </div>

  <div className="relative z-10 mx-auto max-w-3xl px-4 pt-8 pb-16 lg:pt-24 lg:pb-24">
    <h1 className="block text-center text-4xl font-medium tracking-tight text-gray-900 dark:text-zinc-50">
      HeadKit Documentation
    </h1>

    <div className="mx-auto mt-4 max-w-xl px-4 text-center text-lg text-gray-500 dark:text-zinc-500">
      HeadKit is the cloud platform to build, deploy, and grow headless
      commerce stores with your own storefront codebase, commerce backend, and
      managed infrastructure.
    </div>

    <div className="mt-12 grid gap-x-6 gap-y-4 px-6 sm:grid-cols-2 lg:mt-24 lg:px-0">
      <HeroCard slug="Quickstart" title="Quickstart" description="Create your store and connect repository, commerce, and payments in minutes." href="/quickstart" />

      <HeroCard slug="Branding" title="Customisation" description="Quickly brand your store with logo and colours to make it yours." href="/customisation/branding" />

      <HeroCard slug="Commerce" title="Commerce" description="Connect WooCommerce and sync catalogue, inventory, and orders." href="/connections/commerce" />

      <HeroCard slug="Framework" title={'Storefront & deploy'} description="Framework setup, environments, and how deployments reach your live store." href="/connections/framework" />
    </div>
  </div>
</div>

<div className="mx-auto mt-12 w-full max-w-4xl px-4 pb-16 sm:px-6">
  ### Other Resources

  <Columns cols={3}>
    <Card title="Customer Success" icon="desktop" href="https://headkit.io/book-demo" cta="Get a Demo">
      Want to see what's possible on HeadKit? We can show you around.
    </Card>

    <Card title="Join our Community" icon="discord" href="https://discord.gg/bSNe29JtsX" cta="Join Discord">
      Be part of the conversation, get support and share tips.
    </Card>

    <Card title="Support" icon="circle-question" href="https://headkit.io/support" cta="Support request">
      We're ready to help you build the best headless store. Please create a ticket.
    </Card>
  </Columns>
</div>