> ## Documentation Index
> Fetch the complete documentation index at: https://starter-prism.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Prism — The Gradient Theme

> Start building awesome documentation in under five minutes with the Prism theme.

export const Banner = () => {
  return <div className="flex not-prose bg-primary-dark" style={{
    borderRadius: '1rem'
  }}>
      <div className="flex-1" style={{
    padding: '2rem 2rem'
  }}>
        <h1 className="text-3xl text-white font-bold">Templates</h1>
        <h2 className="mt-1 text-white">Here you'll find guides, resources, and references to build with Venus.</h2>
        <button className="mt-5 flex items-center space-x-1 font-medium px-4 py-1 bg-white rounded-xl group-hover:opacity-[0.9]" style={{
    color: '#09090B'
  }}>
          <span>Get started</span>
          <svg xmlns="http://www.w3.org/2000/svg" width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="w-3 h-3">
            <path d="m9 18 6-6-6-6" />
          </svg>
        </button>
      </div>
      <div className="hidden sm:flex flex-1">
        <img src="https://raw.githubusercontent.com/mintlify/themes/main/prism/images/cta.svg" />
      </div>
    </div>;
};

export const HeroCard = ({img, title, description, href}) => {
  return <a className="border-b pb-8 cursor-pointer border-gray-500 dark:border-gray-800 hover:!border-primary dark:hover:!border-primary-light" href={href}>
      <img src={img} className="w-full" />
      <h1 className="mt-4 font-semibold text-gray-900 dark:text-white">{title}</h1>
      <h2 className="mt-1 text-gray-600 dark:text-gray-400 text-sm leading-6">{description}</h2>
    </a>;
};

export const StartButton = ({children = 'Go to Quickstart'}) => {
  return <a className="group" href="/quickstart">
      <button className="flex items-center space-x-1 font-medium px-4 py-1 bg-primary-dark rounded-xl group-hover:opacity-[0.9] text-white group-hover:opacity-[0.9]">
        <span>{children}</span>
        <svg xmlns="http://www.w3.org/2000/svg" width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="w-3 h-3">
          <path d="m9 18 6-6-6-6" />
        </svg>
      </button>
    </a>;
};

<StartButton />

<br />

<br />

<CardGroup>
  <HeroCard img="https://raw.githubusercontent.com/mintlify/themes/main/prism/images/setting-up.svg" title="Setting up your docs" description="Everything you need to know about the doc setup process, from start to finish" href="/quickstart" />

  <HeroCard img="https://raw.githubusercontent.com/mintlify/themes/main/prism/images/themes.svg" title="Explore themes" description="Explore a variety of themes you can use to spice up the look and feel of your documentation" href="/quickstart" />
</CardGroup>

## Make it yours

Update your docs to your brand and add valuable content for the best user conversion.

<CardGroup cols={3}>
  <Card title="Customize Style" icon="palette" href="https://mintlify.com/docs/settings/global">
    Customize your docs to your company's colors and brands
  </Card>

  <Card title="Reference APIs" icon="code" href="https://mintlify.com/docs/api-playground/openapi">
    Automatically generate endpoints from an OpenAPI spec
  </Card>

  <Card title="Add Components" icon="screwdriver-wrench" href="https://mintlify.com/docs/components/accordion">
    Build interactive features and designs to guide your users
  </Card>
</CardGroup>

<br />

<br />

<Banner />