firq-dev-website/src/components/fgotaHero.astro

---
export interface Props {
  fadeout?: boolean
}
const { fadeout } = Astro.props
const display = fadeout ? "": "display: none"
---

<div>
  <span>
    I am currently working on a site to catalogue past and future TAs.<br/>
    Check it out at <a href="https://fgo-ta.com">fgo-ta.com</a>
  </span>
  <div class="fade" style={display}></div>
</div>

<style>
  div {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    flex-flow: column;
    background-color: var(--c-darkergray);
    text-align: center;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5em;
    padding: 2rem 0rem 0rem 0rem;
  }
  a {
    text-align: center;
    text-decoration: none;
    color: var(--c-darkpurple);
  }

  .fade {
    margin-top: 3rem;
    background: linear-gradient(to bottom, transparent, var(--c-lightgray));
    height: 2.5rem;
    width: 100%;
  }
</style>