moodist/src/components/hero.astro

---
import { BsSoundwave } from 'react-icons/bs/index';

import { Container } from './container';

import { count as soundCount } from '@/lib/sounds';

const count = soundCount();
---

<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>Moodist</span></h2>
      <h1 class="desc">Ambient sounds for focus and calm.</h1>

      <p class="sounds">
        <span aria-hidden="true" class="icon">
          <BsSoundwave />
        </span>
        <span>{count} Sounds</span>
      </p>
    </div>
  </Container>
</div>

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

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

      & .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: 45s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }

    & .title {
      font-family: var(--font-display);
      font-size: var(--font-2xlg);
      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);
    }

    & .sounds {
      position: relative;
      display: flex;
      column-gap: 8px;
      align-items: center;
      justify-content: center;
      width: max-content;
      height: 28px;
      padding-right: 12px;
      margin: 20px auto 0;
      font-size: var(--font-xsm);
      color: var(--color-foreground-subtle);
      background: linear-gradient(var(--color-neutral-100), transparent);
      border: 1px solid var(--color-neutral-200);
      border-radius: 100px;

      & .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 0 10px;
        color: var(--color-foreground);
        border-right: 1px solid var(--color-neutral-200);
        border-radius: 0 100px 100px 0;
      }

      &::before {
        position: absolute;
        top: -1px;
        left: 50%;
        width: 70%;
        height: 1px;
        content: '';
        background: linear-gradient(
          90deg,
          transparent,
          var(--color-neutral-400),
          transparent
        );
        transform: translateX(-50%);
      }
    }
  }

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

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