Hero.astro

---
import DiscordCTA from "@components/discord/DiscordCTA.astro";
import ServerLogo from "@components/icons/ServerLogo.astro";

interface Props {
  name: string;
  tagline: string;
  description: string;
  discordUrl: string;
  memberCount?: string;
}

const { name, tagline, description, discordUrl, memberCount } = Astro.props;

const techPills = ["HTML", "CSS", "JavaScript", "Design", "Accessibility"];
---

<section
  class="border-border from-surface-elevated to-surface relative overflow-hidden border-b bg-gradient-to-b py-16 sm:py-24"
>
  <div class="mx-auto max-w-4xl px-4 text-center sm:px-6">
    <div class="flex justify-center">
      <ServerLogo size="lg" />
    </div>
    <p class="text-admin mt-6 text-sm font-semibold tracking-wider uppercase">
      Welcome to
    </p>
    <h1 class="text-ink mt-2 text-4xl font-bold tracking-tight sm:text-5xl">
      {name}
    </h1>
    <p class="text-ink-muted mt-4 text-lg sm:text-xl">{tagline}</p>
    {
      memberCount && (
        <p class="text-admin mt-3 text-sm font-medium">
          {memberCount} members and growing
        </p>
      )
    }
    <p class="text-ink-muted mx-auto mt-6 max-w-2xl text-base leading-relaxed">
      {description}
    </p>
    <div
      class="mt-8 flex flex-col items-center justify-center gap-4 sm:flex-row"
    >
      <DiscordCTA href={discordUrl} />
      <a
        href="/learning"
        class="border-admin text-admin hover:bg-admin/15 focus-visible:outline-admin inline-flex items-center justify-center rounded-lg border px-5 py-2.5 text-sm font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
      >
        Browse resources
      </a>
    </div>
    <ul
      class="text-ink-muted mt-10 flex flex-wrap items-center justify-center gap-3 text-xs font-medium"
    >
      {
        techPills.map((pill) => (
          <li class="border-border bg-surface-elevated rounded-full border px-3 py-1">
            {pill}
          </li>
        ))
      }
    </ul>
  </div>
</section>