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

# Ravenna Documentation

> Documentation for Ravenna, the Slack-native AI service desk. Find setup guides, integrations, ticketing features, workflows, and API references.

export const HeroCard = ({icon, backgroundImg, title, description, href, className = ''}) => {
  return <a href={href} className={`group bg-stone-100 dark:bg-neutral-900
    flex flex-col items-start justify-between
    overflow-hidden rounded relative h-full
    transition-all duration-200
    hover:bg-stone-200 dark:hover:bg-neutral-800
    ${className}`}>
  <div className="relative w-full flex-1 min-h-[250px] overflow-hidden">
    {}
    <div className="absolute inset-0 bg-cover bg-center
                 transition-transform duration-700 ease-out
                 group-hover:scale-110" style={{
    backgroundImage: `url(${backgroundImg})`,
    backgroundRepeat: 'no-repeat'
  }} />

    {}
    <div className="relative z-10 flex h-full items-center justify-center p-6">
      <Icon icon={icon} size={36} color="#FFF" />
    </div>
  </div>

  <div className="flex flex-col font-medium gap-3 items-start w-full p-6 bg-stone-100 dark:bg-neutral-900">
    <h3 className="text-xl text-black dark:text-white tracking-tight font-medium leading-none">
      {title}
    </h3>
    <p className="text-sm text-black text-opacity-50 dark:text-neutral-300 dark:text-opacity-70 tracking-tight leading-snug">
      {description}
    </p>
  </div>
</a>;
};

<div className="relative" id="wtf">
  <div className="absolute bottom-0 top-14 lg:-bottom-0 left-0 right-0">
    <img src="https://d1kzozfjh72w00.cloudfront.net/documentation/core-assets/hero--light.svg" className="block dark:hidden pointer-events-none" alt="Ravenna documentation hero image light mode" />

    <img src="https://d1kzozfjh72w00.cloudfront.net/documentation/core-assets/hero--dark.svg" className="hidden dark:block pointer-events-none" alt="Ravenna documentation hero image dark mode" />
  </div>

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

    <div className="max-w-xl mx-auto px-4 mt-4 text-lg text-center text-gray-500 dark:text-zinc-500">
      Everything you need to build, automate, and optimize your agentic service desk.
    </div>

    <div className="px-6 lg:px-0 mt-12 lg:mt-24 grid sm:grid-cols-2 gap-x-6 gap-y-4">
      <Frame>
        <HeroCard title="Documentation" icon="" backgroundImg="https://d1kzozfjh72w00.cloudfront.net/documentation/hero-cards/Docs.png" description="Explore the core features and tools that empower your team to manage requests efficiently." href="/documentation/get-started/overview" />
      </Frame>

      <Frame>
        <HeroCard title="Guides" icon="" backgroundImg="https://d1kzozfjh72w00.cloudfront.net/documentation/hero-cards/Guides.png" description="Step-by-step instructions to help you launch and optimize your AI-powered support desk quickly and confidently." href="/guides/day-one/overview" />
      </Frame>

      <Frame>
        <HeroCard title="Integrations" icon="" backgroundImg="https://d1kzozfjh72w00.cloudfront.net/documentation/hero-cards/Integrations.png" description="Connect Ravenna with your favorite tools to streamline workflows and maximize productivity." href="/integrations/overview" />
      </Frame>

      <Frame>
        <HeroCard title="API Reference" icon="" backgroundImg="https://d1kzozfjh72w00.cloudfront.net/documentation/hero-cards/API.png" description="Access detailed documentation to build custom integrations and extend Ravenna's functionality." href="/api/overview" />
      </Frame>
    </div>
  </div>
</div>