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

# Introduction

> Your first automation, written and working.

export const HeroCard = ({ filename, title, description, href }) => {
  return (
    <a className="group cursor-pointer pb-8" href={href}>
      <img
        src={`/images/hero/${filename}.png`}
        className="block dark:hidden pointer-events-none group-hover:scale-105 transition-all duration-100"
      />
      <img
        src={`/images/hero/${filename}-dark.png`}
        className="pointer-events-none group-hover:scale-105 transition-all duration-100 hidden dark:block"
      />
      <h3 className="mt-5 text-gray-900 dark:text-zinc-50 font-medium">
        {title}
      </h3>
      <span className="mt-1.5">{description}</span>
    </a>
  );
};

<div className="relative">
  <div className="absolute top-0 left-0 right-0">
    <img src="https://mintcdn.com/aidentai/2A2mGhVmTLbf3NZq/images/hero/background-light.png?fit=max&auto=format&n=2A2mGhVmTLbf3NZq&q=85&s=89da2cd03c02e20e60d762a3b8d41324" className="block dark:hidden pointer-events-none" alt="Decorative background image." width="2304" height="682" data-path="images/hero/background-light.png" />

    <img src="https://mintcdn.com/aidentai/2A2mGhVmTLbf3NZq/images/hero/background-dark.png?fit=max&auto=format&n=2A2mGhVmTLbf3NZq&q=85&s=910c3c33ea3a6867c3923d65d4c61ec9" className="hidden dark:block pointer-events-none" alt="Decorative background image." width="2304" height="682" data-path="images/hero/background-dark.png" />
  </div>

  <div className="relative z-10 w-full px-4 py-16 lg:py-48 lg:pb-24">
    <h1 className="block text-4xl font-medium text-center text-gray-900 dark:text-zinc-50 tracking-tight">
      Meet Aident AI
    </h1>

    <div className="max-w-2xl mx-auto px-4 mt-4 text-lg text-center text-gray-500 dark:text-zinc-500">
      Describe a job in plain English and Aiden turns it into a Playbook you can run on demand, on a schedule, or when something happens in another app.
    </div>

    <div className="max-w-4xl mx-auto px-6 lg:px-0 mt-8 lg:mt-16 grid sm:grid-cols-2 gap-x-6 gap-y-4">
      <HeroCard filename="rocket" title="Get Started" description="Describe and create your first workflow" href="/get-started" />

      <HeroCard filename="cli" title="Changelog" description="See the latest of what we just shipped" href="/changelog" />
    </div>
  </div>
</div>