<%- include('header') %>
<main>
  <section>
    <div>
      <h1>Sorts Visualizer : Interactive Play</h1>
      <p>
        Sorts Visualizer is a tool designed to bring sorting algorithms to life. Whether you're a programmer, student, or curious about
        how data is organized, this tool allows you to see various sorting algorithms in action.
      </p>
      <a href="/random"><button id="start">Try Out!</button></a>
    </div>
    <img src="assets/stuff.png" alt="Computer & Analysics Stuff" />
  </section>
  <section>
    <img src="assets/stats.png" alt="Stats and Graphs" />
    <div>
      <h1>What Are Sorting Algorithms?</h1>
      <p>
        Sorting algorithms are the cornerstones of computer science. They provide a structured approach to rearranging data elements
        into a specific order, based on numerical values, alphabetical characters, or any other user-defined criteria. Sorting
        algorithms are instrumental in various applications like data retrieval, analysis, and manipulation.
      </p>
    </div>
  </section>
  <section>
    <div>
      <h1>What Are The Different Sorting Algorithms?</h1>
      <div>
        <p>Sorting algorithms can be broadly classified into three main categories:</p>
        <ul>
          <li>
            <b>Comparison Sorts:</b> These algorithms work by repeatedly comparing elements to determine their order. They are
            versatile and can handle various data types.
          </li>
          <li>
            <b>Non-Comparison Sorts:</b> These algorithms sort elements without directly comparing them. They often excel with specific
            data types or situations where certain assumptions can be made about the data.
          </li>
          <li>
            <b>Other:</b> These algorithms are not based on comparison or non-comparison sorts. They are not often used in practice, but
            they can be useful in certain situations.
          </li>
        </ul>
      </div>
    </div>
    <img src="assets/exploration.png" alt="Data Exploration" />
  </section>
  <section>
    <img src="assets/lines.png" alt="Colorful Lines" />
    <div>
      <h1>When To Use A Specific Sorting Algorithm?</h1>
      <div>
        <p>The choice of sorting algorithm depends on several factors:</p>
        <ul>
          <li>
            <b>Speed:</b> Some algorithms are generally faster than others, this can be calculated using the time complexity of the
            algorithm (Big O notation).
          </li>
          <li>
            <b>Performance:</b> Some algorithms might require more memory usage than others, or additional data structures,
            such as heaps or trees.
          </li>
          <li>
            <b>Data Type:</b> Some algorithms are optimized for specific data types. Very common data types include integers,
            floating point numbers, strings... 
          </li>
          <li>
            <b>Stability:</b> Some Stable sorting algorithms preserve the original order of equal elements. This can be useful in
            certain situations.
          </li>
        </ul>
      </div>
    </div>
  </section>
  <section>
    <div>
      <h1>Our Reference & Source Code</h1>
      <div>
        <p>
          We are free, as in freedom (and free beer too!). You can view our code on GitHub. Feel free to contribute to it as well if
          you have the capabilities to. For the Reference, we used Wikipedia throughout this whole project.
        </p>
        <ul>
          <li>
            <b>Source Code:</b>
            <a href="https://github.com/redeemedspoon/sorts-visualizer">https://github.com/redeemedspoon/sorts-visualizer</a>
          </li>
          <li>
            <b>Reference:</b>
            <a href="https://en.wikipedia.org/wiki/Sorting_algorithm">https://en.wikipedia.org/wiki/Sorting_algorithm</a>
          </li>
        </ul>
      </div>
    </div>
    <img src="assets/source.png" alt="Source & Reference" />
  </section>
</main>
<%- include('footer') %>
