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 creating a site to catalogue past and future TAs for the whole community.
  </span>
  <a href=`https://fgo-ta.com/` target="_blank" rel="noopener noreferrer"><span class="fancy">Visit fgo-ta.com &gt;&gt;</span></a>
  <div class="fade" style={display}></div>
</div>

<style>
  div {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    flex-flow: column;
    background-color: var(--c-primary-background);
    text-align: center;
    align-items: center;
    justify-content: center;
    color: var(--c-primary-text);
    font-size: 1.5em;
    padding: 2rem 0rem 0rem 0rem;
    font-weight: 400;
    font-size: 1.3rem;
  }

  a {
    font-weight: 500;
    font-family: 'Work Sans Variable', sans-serif;
    color: var(--c-primary-text);
    margin: 1rem 0px 0px;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    background: radial-gradient(var(--c-primary-background), var(--c-secondary-background)) ;
    border-radius: 10px;
    border: 2px var(--c-accent-1) solid;
  }

  a:hover {
    border-color: var(--c-accent-1-alt);
  }

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

  .fancy {
    color: var(--c-accent-1);
  }

  @supports (background-clip: text) {
    a:hover .fancy {
      background: linear-gradient(125deg, var(--c-accent-1), var(--c-accent-1-alt), var(--c-accent-2) );
      background-clip: text;
      color: transparent;
    }
  }
</style>