moodist/src/components/sections/why.astro

---
import { BiMoney, BiUserCircle, BiLogoGithub } from 'react-icons/bi/index';
import { BsSoundwave, BsStars } from 'react-icons/bs/index';
import { RxMixerHorizontal } from 'react-icons/rx/index';
import { IoShareSocialSharp } from 'react-icons/io5/index';

import { Balancer } from 'react-wrap-balancer';

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

const count = soundCount();

const reasons = [
  {
    Icon: BiMoney,
    body: 'Enjoy unlimited, cost-free access to our ambient sounds.',
    id: 'free-access',
    label: 'Free Access',
  },
  {
    Icon: BiUserCircle,
    body: 'Dive into tranquility without any sign-up requirements.',
    id: 'no-registration',
    label: 'No Registration',
  },
  {
    Icon: BsSoundwave,
    body: `Explore ${count} varied ambient sounds for every mood.`,
    id: 'diverse-sounds',
    label: 'Diverse Sounds',
  },
  {
    Icon: RxMixerHorizontal,
    body: 'Shape your ideal ambiance by blending different sounds.',
    id: 'customizable-mixes',
    label: 'Customizable Mixes',
  },
  {
    Icon: BsStars,
    body: 'Smooth and uninterrupted, focus on relaxation.',
    id: 'seamless-experience',
    label: 'Seamless Experience',
  },
  {
    Icon: IoShareSocialSharp,
    body: 'Easily share your favorite sounds for a connected experience.',
    id: 'share-selections',
    label: 'Share Selections',
  },
  {
    Icon: BiLogoGithub,
    body: 'Transparent and collaborative – built on open-source principles.',
    id: 'open-source',
    label: 'Open-Source',
    link: {
      label: 'Source Code',
      url: 'https://github.com/remvze/moodist',
    },
  },
];
---

<div class="why">
  <Container>
    <div class="titleWrapper">
      <h2 class="title">Why use Moodist?</h2>
      <div class="line"></div>
    </div>

    <div class="reasons">
      {
        reasons.map(reason => (
          <div class="reason">
            <div class="icon">
              <reason.Icon />
            </div>
            <h3 class="label">{reason.label}</h3>
            <p class="body">
              <Balancer>{reason.body}</Balancer>
            </p>
            {reason.link && (
              <a class="link" href={reason.link.url}>
                {reason.link.label} →
              </a>
            )}
          </div>
        ))
      }
    </div>
  </Container>
</div>

<style>
  .why {
    padding-bottom: 80px;

    & .titleWrapper {
      display: flex;
      column-gap: 12px;
      align-items: center;

      & .title {
        margin-bottom: 12px;
        font-family: var(--font-display);
        font-size: var(--font-lg);
        font-weight: 600;
      }

      & .line {
        flex-grow: 1;
        height: 1px;
        background: linear-gradient(
          90deg,
          var(--color-neutral-300),
          transparent
        );
        transform: translateY(-0.25rem);
      }
    }

    & .reasons {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      row-gap: 28px;
      column-gap: 20px;
      margin-top: 24px;

      & .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin-bottom: 12px;
        font-size: var(--font-md);
        color: var(--color-foreground-subtle);
        background: linear-gradient(var(--color-neutral-100), transparent);
        border: 1px solid var(--color-neutral-200);
        border-radius: 12px;
      }

      & .label {
        margin-bottom: 8px;
        font-family: var(--font-heading);
        font-weight: 600;
      }

      & .body {
        line-height: 1.6;
        color: var(--color-foreground-subtle);
      }

      & .link {
        display: block;
        margin-top: 8px;
        font-size: var(--font-sm);
        font-weight: 500;
        color: var(--color-foreground);
        text-decoration: none;
      }
    }
  }
</style>