moodist/src/components/hero.astro

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

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

const count = soundCount();
---

<div class="hero">
  <Container>
    <img
      alt="Faded Moodist Logo"
      class="logo"
      height={45}
      src="/logo.svg"
      width={45}
    />

    <div class="title">
      <div class="left"></div>
      <h1>Moodist</h1>
      <div class="right"></div>
    </div>

    <p class="desc">
      <Balancer>Ambient sounds for focus and calm.</Balancer>
    </p>

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

<style>
  .hero {
    padding: 140px 0 60px;
    text-align: center;

    & .logo {
      display: block;
      width: 45px;
      margin: 0 auto 12px;
    }

    & .title {
      display: flex;
      column-gap: 15px;
      align-items: center;

      & div {
        flex-grow: 1;
        height: 1px;

        &.left {
          background: linear-gradient(
            90deg,
            transparent,
            var(--color-neutral-300)
          );
        }

        &.right {
          background: linear-gradient(
            90deg,
            var(--color-neutral-300),
            transparent
          );
        }
      }

      & h1 {
        font-family: var(--font-display);
        font-size: var(--font-2xlg);
        font-weight: 600;
      }
    }

    & .desc {
      margin-top: 5px;
      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-color: var(--color-neutral-100);
      border: 1px solid var(--color-neutral-200);
      border-radius: 100px;

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

      &::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%);
      }
    }
  }
</style>