Support channel grid

Build a support routing section with Tailwind CSS: a centered heading and subline, then a grid of three or four channel cards. Each card has an icon tile, a channel name, a one-line description, a response-time line in muted text, and an action link with an arrow; give one card a live-chat status chip with a green dot and another a muted "Offline until 9am" chip. Cards lift on hover with a shadow, and the grid collapses to one column on mobile.

<section class="mx-auto max-w-5xl px-6 py-16">
  <div class="mx-auto mb-10 max-w-lg text-center">
    <h2 class="text-3xl font-semibold text-neutral-900">Talk to the right team</h2>
    <p class="mt-2 text-neutral-500">Pick a channel and skip the triage queue entirely.</p>
  </div>
  <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
    <a href="#" class="group rounded-2xl border border-neutral-200 bg-white p-6 transition hover:-translate-y-0.5 hover:shadow-lg">
      <div class="flex items-start justify-between">
        <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-neutral-900 text-white"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M20 15a3 3 0 0 1-3 3H9l-5 3v-6a3 3 0 0 1-1-2V7a3 3 0 0 1 3-3h11a3 3 0 0 1 3 3v8Z"/></svg></span>
        <span class="inline-flex items-center gap-1.5 rounded-full bg-green-50 px-2.5 py-1 text-xs font-medium text-green-700">
          <span class="h-1.5 w-1.5 rounded-full bg-green-500"></span> Online
        </span>
      </div>
      <h3 class="mt-4 font-semibold text-neutral-900">Live chat</h3>
      <p class="mt-1 text-sm text-neutral-500">Product questions, account changes, quick fixes.</p>
      <p class="mt-4 text-xs text-neutral-400">Typical reply: under 2 minutes</p>
      <span class="mt-3 inline-block text-sm font-medium text-neutral-900">Start a chat <span class="inline-block transition group-hover:translate-x-1">→</span></span>
    </a>
    <a href="#" class="group rounded-2xl border border-neutral-200 bg-white p-6 transition hover:-translate-y-0.5 hover:shadow-lg">
      <div class="flex items-start justify-between">
        <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-neutral-900 text-white">@</span>
      </div>
      <h3 class="mt-4 font-semibold text-neutral-900">Email support</h3>
      <p class="mt-1 text-sm text-neutral-500">Bugs, billing disputes, anything with attachments.</p>
      <p class="mt-4 text-xs text-neutral-400">Typical reply: 4 business hours</p>
      <span class="mt-3 inline-block text-sm font-medium text-neutral-900">[email protected] <span class="inline-block transition group-hover:translate-x-1">→</span></span>
    </a>
    <a href="#" class="group rounded-2xl border border-neutral-200 bg-white p-6 transition hover:-translate-y-0.5 hover:shadow-lg">
      <div class="flex items-start justify-between">
        <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-neutral-900 text-white"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M7 3H4a1 1 0 0 0-1 1c0 9.4 7.6 17 17 17a1 1 0 0 0 1-1v-3l-5-2-1.5 2a14 14 0 0 1-7.5-7.5L9 8 7 3Z"/></svg></span>
        <span class="rounded-full bg-neutral-100 px-2.5 py-1 text-xs font-medium text-neutral-500">Offline until 9am</span>
      </div>
      <h3 class="mt-4 font-semibold text-neutral-900">Enterprise hotline</h3>
      <p class="mt-1 text-sm text-neutral-500">Incidents and escalations for annual contracts.</p>
      <p class="mt-4 text-xs text-neutral-400">Mon–Fri, 9am–7pm CET</p>
      <span class="mt-3 inline-block text-sm font-medium text-neutral-900">+1 (555) 012-3456 <span class="inline-block transition group-hover:translate-x-1">→</span></span>
    </a>
  </div>
</section>