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

# Quickstart

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>;
};

## Navigation

<Tabs>
  <Tab title="Using Quickstart">
    <Tip>It is recommended for users to use Quickstart if they are unfamilar with the site layout and function.</Tip>

    <Steps>
      <Step title="Go to Quickstart">
        Use this button to reach Quickstart or Click the Quickstart Tab on the sidebar.

        <StartButton />
      </Step>

      <Step title="Choose Tutorials or Overviews">
        More Detailed Instructions will be provided as to which choice provides information suited to your needs.
      </Step>

      <Step title="Enjoy Studying!">
        You will then be redirected to your desired selection screen to study.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Using Topbar Tabs">
    <Tip>Use the Topbar Tabs if you're familiar with the site layout or know what you need to study.</Tip>

    <Steps>
      <Step title="Choose Tutorials or Overviews.">
        Assuming you know what in particular you wish to study. Tabs on the topbar provide direct links to reaction selection.
      </Step>

      <Step title="Enjoy Studying!">
        You will be redirected to a selection area for reasons. If you are confused by what is offered. Please visit quickstart:

        <StartButton />
      </Step>
    </Steps>
  </Tab>
</Tabs>

<br />

<Banner />