moodist/src/components/tools/hero.astro

---
import { Container } from '../container';

interface Props {
  desc: string;
  title: string;
}

const { desc, title } = Astro.props;
---

<div class="hero">
  <Container>
    <div class="wrapper">
      <div class="pattern"></div>
      <img
        alt="Faded Moodist Logo"
        aria-hidden="true"
        class="logo"
        height={45}
        src="/logo.svg"
        width={45}
      />

      <h2 class="title"><span>{title}</span></h2>
      <h1 class="desc">{desc}</h1>

      <p class="moodist">Part of <a href="/">Moodist</a></p>
    </div>
  </Container>
</div>

<style>
  .hero {
    text-align: center;

    .wrapper {
      position: relative;
      padding: 120px 0 50px;

      & .pattern {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        background-image: radial-gradient(
          var(--color-neutral-500) 5%,
          transparent 5%
        );
        background-position: top center;
        background-size: 21px 21px;
        opacity: 0.8;
        mask-image: linear-gradient(#fff, transparent, transparent);
      }
    }

    & .logo {
      display: block;
      width: 45px;
      margin: 0 auto 16px;
      animation-name: logo;
      animation-duration: 30s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }

    & .title {
      font-family: var(--font-display);
      font-size: var(--font-lg);
      font-weight: 600;
      line-height: 1;

      & span {
        background: linear-gradient(
          135deg,
          var(--color-foreground),
          var(--color-foreground-subtle)
        );
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    & .desc {
      margin-top: 4px;
      line-height: 1.6;
      color: var(--color-foreground-subtle);
    }

    & .moodist {
      margin-top: 12px;
      font-size: var(--font-sm);
      color: var(--color-foreground-subtle);

      & a {
        font-weight: 500;
        color: var(--color-foreground);
        text-decoration: none;
      }
    }
  }

  @keyframes logo {
    0% {
      transform: rotate(0);
    }

    100% {
      transform: rotate(360deg);
    }
  }
</style>