accords-library.com/src/pages/chronology/index.tsx

import type { NextPage } from 'next'
import SubPanel from 'components/Panels/SubPanel'
import styles from 'styles/Panels/SubPanel.module.css'
import NavOption from 'components/Panels/NavOption'

const Chronology: NextPage = () => {

  return (
    <>
      <SubPanel>
        <h2>Chronology</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vulputate facilisis blandit. Aliquam blandit neque sem, ac pulvinar leo ultricies sit amet.</p>
        <hr />

        <NavOption 
          url="/chronology/timelines" 
          title="Timelines" 
          subtitle="Diagram of how the games connect to each other"
          border={true}
        />

        <NavOption 
          url="/chronology/overview" 
          title="Chronology Overview" 
          subtitle="List of all the events from the main timeline"
          border={true}
        />

        <NavOption 
          url="/chronology/walkthrough" 
          title="Chronology Walkthrough" 
          subtitle="Chronological exploration of the lore and stories"
          border={true}
        />

      </SubPanel>

    </>
  )
}
export default Chronology