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>
      <div class="logo-wrapper">
        <img
          alt="Faded Moodist Logo"
          aria-hidden="true"
          class="logo"
          height={48}
          src="/logo.svg"
          width={48}
        />
      </div>

      <h1 class="title">
        Ambient Sounds<span class="line">For Focus and Calm</span>
      </h1>
      <h2 class="desc">Free and Open-Source.</h2>

      <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);

        &::before {
          position: absolute;
          top: 0;
          left: 50%;
          width: 300px;
          height: 100px;
          content: '';
          background: var(--color-neutral-200);
          filter: blur(50px);
          border-radius: 100%;
          opacity: 0.8;
          transform: translate(-50%, -50%);
        }
      }
    }

    & .logo-wrapper {
      mask-image: linear-gradient(#000, rgb(0 0 0 / 40%), rgb(0 0 0 / 5%));

      & .logo {
        display: block;
        width: 48px;
        margin: 0 auto 20px;
        opacity: 1;
        animation-name: logo;
        animation-duration: 60s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
      }
    }

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

      & .line {
        display: block;
        margin-top: 2px;
        background: linear-gradient(
          var(--color-foreground-subtler),
          var(--color-foreground-subtle)
        );
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    & .desc {
      margin-top: 12px;
      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>