import React from 'react';

import styles from '~/styles/index.module.css'

export default function Index() {
  return (
    <main className="mainColumn">
      <p>
        Hi, we're tempest!  And we also go by ashe.  We're a median plural
        system of three members, but most of the time you'll probably see us
        operating as one
      </p>

      <p>We like coding, VR, and making CG art</p>

      <h2>At a glance</h2>
      <div className={styles.glance}>
        <span className={styles.label}>Names:</span>
        <span>ashe or ashelyn</span>

        <span className={styles.label}>Pronouns:</span>
        <span>they/them</span>

        <span className={styles.label}>Cohort:</span>
        <span>millenial</span>

        <span className={styles.label}>Orientation:</span>
        <span>ace</span>

        <span className={styles.label}>Partners:</span>
        <span>three</span>

        <span className={styles.label}>Children:</span>
        <span>two</span>

        <span className={styles.label}>Capitalize name:</span>
        <span>not unless we're at work</span>
      </div>

      <p>
        <em>Note:</em> This is the information for our system in aggregate,
        for individual info see our <a href="/about">about</a> page
      </p>
    </main>
  )
}