<legend className="text-6xl mb-20">WoW Progression Stats</legend>

      <legend className="text-6xl mb-20 font-serif">WoW Progression Stats</legend>

    <legend>

    <legend className="font-serif">

import logo from './logo.svg';
import './App.css';
import { Switch, Route } from 'react-router-dom';

import { Switch, Route, NavLink } from 'react-router-dom';
import slugify from 'slugify';

function NavBar() {
  return (
    <header className="container mx-auto mt-2 grid grid-cols-2">
      <legend className="justify-self-start font-serif"><NavLink to="/">WoW Progression Stats</NavLink></legend>
      <div className="grid grid-flow-col auto-cols-max gap-x-3 justify-end">
        <NavLink activeClassName="underline" exact to="/">Search</NavLink>
        <NavLink activeClassName="underline" exact to="/faq">FAQ</NavLink>
      </div>
    </header>
  )
}

function Fallback() {

function QA({ question, children }: React.PropsWithChildren<{ question: string }>) {
  return (
    <div className="mt-5" id={slugify(question)}>
      <legend className="font-serif text-3xl"><a href={`#${slugify(question)}`}>{question}</a></legend>
      <div className="text-lg">
        {children}
      </div>
    </div>
  )
}
function About() {

    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>

    <div className="container mx-auto mt-10">
      <div className="w-2/3">
        <QA question={"What is this site for?"}>
          <p>This site is a way to see some aggregate statistics about World of Warcraft guilds' progression through Mythic raid content.</p>
        </QA>
        <QA question={"What do these charts mean?"}>
          <p>Each chart represents a single raid night. Each dot on the chart shows a how far the guild got on a single pull, along with a <a href="https://en.wikipedia.org/wiki/Local_regression">trend line</a>.</p>
        </QA>
        <QA question={"What is 'Progression Time'?"}>
          <p>The <em>Progression Time</em> statistic measures the actual amount of time spent progressing a boss. It is measured by taking the amount of time from the start of the first pull to the end of the last pull on each raid night, and then summing.</p>
          <p className="mt-2">For example: suppose you pull a boss at 8:02pm on a Tuesday. You don't kill it, and you end your last pull at 10:58pm. The next day, you start again with a first pull at 8:05pm and kill it in two pulls, ending at 8:18pm. Then your <em>Progression Time</em> on that boss would be <code>2.9 + 0.2 = 3.1 hours</code> regardless of whether you pull other bosses that night.</p>
        </QA>
        <QA question={"Who runs this?"}>
          <p>This site is run by <a className="underline" href="https://raider.io/characters/us/turalyon/Eisenpelz">emallson</a>, who raids on <a className="underline" href="https://www.wowprogress.com/team/us/turalyon/raid-OEWeekend">Occasional Excellence's Weekend Team.</a></p>
        </QA>
      </div>

  );

  )

    <>
      <NavBar />

      </Route>
      <Route path="/faq">
        <About />

  </>