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

# Introduction

> Start building modern documentation in under five minutes

export const HeroCard = ({imgLight, imgDark, title, description, href}) => {
  return <a className="group cursor-pointer pb-8" href={href}>
      <img src={imgLight} className="block dark:hidden pointer-events-none group-hover:scale-105 transition-all duration-100" alt={`Light mode image for ${title}`} />
      <img src={imgDark} className="hidden dark:block pointer-events-none group-hover:scale-105 transition-all duration-100" alt={`Dark mode image for ${title}`} />
      <h3 className="mt-5 text-gray-900 dark:text-zinc-50 font-medium">{title}</h3>
      <p className="mt-1.5 text-gray-600 dark:text-zinc-400">{description}</p>
    </a>;
};

<div className="relative">
  <div className="absolute top-0 left-0 right-0">
    <img src="https://mintcdn.com/reactionrepo-bd9a1c17/AqE5enEskAdOSf_C/hexy.svg?fit=max&auto=format&n=AqE5enEskAdOSf_C&q=85&s=58e89a43e1e8c11e5b18bb56e34789a9" className="block dark:hidden pointer-events-none" width="1440" height="560" data-path="hexy.svg" />

    <img src="https://mintcdn.com/reactionrepo-bd9a1c17/AqE5enEskAdOSf_C/hexy.svg?fit=max&auto=format&n=AqE5enEskAdOSf_C&q=85&s=58e89a43e1e8c11e5b18bb56e34789a9" className="hidden dark:block pointer-events-none" width="1440" height="560" data-path="hexy.svg" />
  </div>

  <div className="px-4 py-8 lg:py-24 lg:pb-12 max-w-3xl mx-auto">
    <h1 className="text-4xl font-medium text-center text-gray-900 dark:text-zinc-50 tracking-tight">
      Welcome to Reaction Repo
    </h1>

    <p className="max-w-xl mx-auto px-4 mt-4 text-lg text-center text-gray-500 dark:text-zinc-500">
      Dive into our comprehensive documentation to explore reaction mechanisms, detailed explanations, and practice problems designed to enhance your understanding.
    </p>

    <div className="px-6 lg:px-0 mt-12 lg:mt-24 grid sm:grid-cols-2 gap-x-6 gap-y-4">
      <HeroCard imgLight="images/cardl.png" imgDark="images/cardd.png" title="Tutorials" description="Everything you need to know about performing the mechanisms for each reaction, from start to finish" href="/oxidation-reactions/potassium-permanganate-oxidation" />

      <HeroCard imgLight="images/thumbnailblack.png" imgDark="images/thumbnailwhite.png" title="Lab Techniques" description="Explore a variety of Reactions including History, Reagent Preparation, Fun Facts and more..." href="/oxidation-reactions/dess-martin-oxidation" />
    </div>
  </div>
</div>