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

# Help center

> Search docs, guides, and resources for incident.io

export const GettingStartedLinks = () => {
  const LINKS = [{
    title: "What's in incident.io?",
    href: "/getting-started/what-is-incident-io",
    description: "Get an overview of the platform and what each product does."
  }, {
    title: "Installing incident.io",
    href: "/getting-started/installing",
    description: "Connect your Slack workspace and get up and running in minutes."
  }, {
    title: "Your first incident",
    href: "/incidents/declaring",
    description: "Walk through declaring and managing your first incident."
  }, {
    title: "Our API",
    href: "/integrations/api-overview",
    description: "Connect incident.io with the tools your team already uses."
  }];
  return <div className="homepage-section not-prose">
<div className="grid grid-cols-1 md:grid-cols-[1fr_1.5fr] gap-8 md:gap-12">
<div>
<h2 className="type-32 font-[600] m-0 mb-2">
Get started with{" "}
<span className="text-[var(--alarmalade-500)]">incident.io</span>
</h2>
</div>
<CardGroup cols={1}>
{LINKS.map(card => <Card key={card.href} title={card.title} href={card.href}>
{card.description}
</Card>)}
</CardGroup>
</div>
</div>;
};

export const HomepageProductSection = () => {
  const PRODUCTS = [{
    title: "On-call",
    description: "Alerting, flexible schedules, and reliable paging",
    href: "/on-call/getting-started",
    icon: "/icons/on-call.svg#alarmalade",
    image: "/images/homepage/product-bento-oncall.png",
    darkImage: "/images/homepage/product-bento-oncall-dark.png",
    imageStyle: {
      transform: "translateY(16px) scale(0.9)"
    }
  }, {
    title: "Response",
    description: "Automation, context, and all of your tools in one place.",
    href: "/incidents",
    icon: "/icons/bolt.svg#alarmalade",
    image: "/images/homepage/product-bento-response.png",
    darkImage: "/images/homepage/product-bento-response-dark.png",
    imageStyle: {
      transformOrigin: "top center",
      transform: "scale(0.9)"
    }
  }, {
    title: "Status Pages",
    description: "Easy way to communicate with customers during an incident",
    href: "/status-pages",
    icon: "/icons/status-page.svg#alarmalade",
    image: "/images/homepage/product-bento-statuspages.png",
    darkImage: "/images/homepage/product-bento-statuspages-dark.png",
    imageStyle: {
      transform: "translateY(16px)"
    }
  }];
  return <div className="not-prose flex flex-col gap-16">
<section className="flex flex-col gap-8">
<header>
<h2 className="type-24 font-[600] m-0 text-[var(--content-primary)] dark:text-[var(--content-invert)]">Product</h2>
<p className="text-[var(--content-secondary)] dark:text-[var(--content-secondary-dark)] text-base m-0 mb-6">Explore the help center by product</p>
</header>

        <div className="product-bento grid grid-cols-1 md:grid-cols-3 gap-4">
          {PRODUCTS.map((product, i) => {
    return <a key={product.title} href={product.href} className="bg-[var(--surface-secondary)] dark:bg-[var(--background-dark)] dark:border dark:border-[var(--stroke-primary-dark)] rounded-xl overflow-hidden flex flex-col no-underline text-inherit block">
                {product.image && <div className="overflow-hidden grow">
                    <img src={product.image} alt={product.title} className="w-full h-auto rounded-lg block dark:hidden" style={product.imageStyle ?? ({})} noZoom />
                    {product.darkImage && <img src={product.darkImage} alt={product.title} className="w-full h-auto rounded-lg hidden dark:block" style={product.imageStyle ?? ({})} noZoom />}
                  </div>}
                <div className="px-6 pb-6 flex flex-col gap-4">
                  <div className="product-icon-box">
                    <img src={product.icon} alt="" width="20" height="20" />
                  </div>
                  <div>
                    <h3 className="type-14 font-[600] m-0 mb-1 text-[var(--content-primary)] dark:text-[var(--content-invert)]">{product.title}</h3>
                    <p className="type-14 m-0 text-[var(--content-secondary)] dark:text-[var(--content-secondary-dark)]">{product.description}</p>
                  </div>
                </div>
              </a>;
  })}
        </div>
      </section>

      <section className="flex flex-col gap-8">
        <header>
          <h2 className="type-24 font-[600] m-0 text-[var(--content-primary)] dark:text-[var(--content-invert)]">Platform</h2>
          <p className="text-[var(--content-secondary)] dark:text-[var(--content-secondary-dark)] text-base m-0">Explore the help center by platform</p>
        </header>

        <CardGroup cols={4} className="w-full">
          <Card title="Catalog" icon="/icons/book.svg" href="/catalog" />
          <Card title="Workflows" icon="/icons/workflows.svg" href="/workflows" />
          <Card title="Insights" icon="/icons/chart.svg" href="/insights" />
          <Card title="Integrations" icon="/icons/integration.svg" href="/integrations" />
        </CardGroup>
      </section>
    </div>;
};

export const Divider = () => {
  return <hr className="divider border-0 border-t border-[var(--surface-tertiary)] m-0" />;
};

export const HomepageHelpHero = () => {
  return <div id="homepage-help-hero" className="px-6 -mx-4 relative flex flex-col items-center">
      <h1 className="type-32 md:type-48 font-medium m-0 mb-3 text-[var(--content-primary)] dark:text-[var(--content-invert)]">
        Need some help?
      </h1>
      <p className="type-16 m-0 mb-10 text-[var(--content-secondary)] dark:text-[var(--content-secondary-dark)]">
        Search our docs, and other resources
      </p>

      <button id="help-hero-search" className="mb-10 flex items-center gap-3 w-full max-w-[560px] py-3.5 px-4 bg-white border border-[var(--surface-tertiary)] rounded-xl cursor-pointer transition-all duration-150 outline-none shadow-[0_1px_3px_rgba(0,0,0,0.06)] hover:border-[var(--alarmalade-500)] hover:shadow-[0_0_0_3px_rgba(242,85,51,0.1)] dark:bg-[var(--background-dark)] dark:border-[var(--stroke-primary-dark)] dark:hover:border-[var(--alarmalade-500)] dark:hover:shadow-[0_0_0_3px_rgba(242,85,51,0.15)]">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="shrink-0 opacity-30 dark:opacity-60 dark:text-[var(--content-secondary-dark)]" aria-hidden>
          <circle cx="11" cy="11" r="8" />
          <path d="m21 21-4.3-4.3" />
        </svg>
        <span className="flex-1 text-left text-[var(--content-tertiary)] dark:text-[var(--content-secondary-dark)] type-14">
          Search
        </span>
        <span className="flex items-center gap-0.5">
          <span className="type-12 font-medium w-6 h-6 flex items-center justify-center bg-[var(--surface-secondary)] border border-[var(--surface-tertiary)] rounded-md text-[var(--content-tertiary)] dark:bg-gray-950 dark:border-transparent dark:text-gray-400">
            ⌘
          </span>
          <span className="type-12 font-medium w-6 h-6 flex items-center justify-center bg-[var(--surface-secondary)] border border-[var(--surface-tertiary)] rounded-md text-[var(--content-tertiary)] dark:bg-gray-950 dark:border-transparent dark:text-gray-400">
            K
          </span>
        </span>
      </button>

      <div role="group" aria-label="Quick links" className="grid md:grid-cols-3 gap-4 w-full max-w-3xl">
        {[{
    title: "Getting started",
    icon: "/icons/rocket.svg",
    href: "/getting-started"
  }, {
    title: "API Reference guide",
    icon: "/icons/code-block.svg",
    href: "/api-reference"
  }, {
    title: "Changelog",
    icon: "/icons/refresh.svg",
    href: "https://incident.io/changelog"
  }].map(card => <a key={card.title} href={card.href} className="hero-card">
            <div className="hero-card-illustration" aria-hidden="true">
              <img src={card.icon} alt="" noZoom />
            </div>
            <p className="hero-card-title type-14">{card.title}</p>
          </a>)}
      </div>
    </div>;
};

<div className="homepage flex flex-col gap-16">
  <HomepageHelpHero />

  <Divider />

  <HomepageProductSection />

  <Divider />

  <GettingStartedLinks />
</div>