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

# Sort by Name

> Welcome to the Reaction Tutorial Catalog. Here you search through Reactions to find your desired reaction.

export const Banner = () => {
  return <div className="flex not-prose bg-primary-dark" style={{
    borderRadius: '0.5rem'
  }}>
      <div className="flex-1" style={{
    padding: '2rem 2rem'
  }}>
        <h1 className="text-3xl text-white font-bold">Explore</h1>
        <h2 className="mt-1 text-white">Need help navigating or just do not know what you would like to study? Click here!</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>Quickstart</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://chemlord.github.io/reactionrepo/docs/oxidation-reactions/potassium-permanganate-oxidation/potassium-permanganate-oxidation-tutorial/testing.png" />
      </div>
    </div>;
};

export const HeroCard = ({imgLight, imgDark, 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 flex flex-col items-center text-center" href={href}>
      <img src={imgLight} className="w-full dark:hidden" alt={title} />
      <img src={imgDark} className="w-full hidden dark:block" alt={title} />
      <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 = '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>;
};

<CardGroup cols={3}>
  <HeroCard imgLight="https://chemlord.github.io/reactionrepo/docs/oxidation-reactions/pdcoverviewlight.png" imgDark="https://chemlord.github.io/reactionrepo/docs/oxidation-reactions/pdcoverviewdark.png" title="Corey-Schmidt Oxidation" description="Mild Method for Primary and Secondary Alcohol Oxidation" href="/your-link" />

  <HeroCard imgLight="https://chemlord.github.io/reactionrepo/docs/oxidation-reactions/dess-martin-oxidation/DMPOverviewLightFix.png" imgDark="https://chemlord.github.io/reactionrepo/docs/oxidation-reactions/dess-martin-oxidation/DMPOverviewDarkFix.png" title="Dess-Martin Oxidation" description="Mild Method for Primary and Secondary Alcohol Oxidation" href="/overviews/dess-martin-oxidation/dess-martin-oxidation-overview" />

  <HeroCard imgLight="https://chemlord.github.io/reactionrepo/docs/oxidation-reactions/swern-oxidation/RegularSwernOverviewL.png" imgDark="https://chemlord.github.io/reactionrepo/docs/oxidation-reactions/swern-oxidation/RegularSwernOverviewD.png" title="Swern Oxidation w/ (COCl)2" description="Harsh Method for Primary and Secondary Alcohol Oxidation" href="/your-link" />
</CardGroup>