Course Card Base

<section class="ws-course-card bg-[var(--ws-color-surface)]" aria-label="Popular courses">
  <div class="mx-auto max-w-6xl px-4 py-16 sm:py-24">
    <div class="text-center">
      <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Popular Courses</h2>
      <p class="mt-2 text-lg text-gray-600">Level up your skills with our most enrolled programs.</p>
    </div>

    <div class="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
      <!-- Course 1 -->
      <article class="group overflow-hidden rounded-xl border border-gray-200 shadow-sm transition hover:shadow-lg">
        <div class="aspect-video bg-gradient-to-br from-indigo-500 to-purple-600"></div>
        <div class="p-5">
          <span class="inline-block rounded-full bg-indigo-100 px-2.5 py-0.5 text-xs font-semibold text-indigo-700">Web Development</span>
          <h3 class="mt-3 text-lg font-bold text-gray-900 group-hover:text-indigo-600">Modern Frontend with Astro &amp; Tailwind</h3>
          <p class="mt-1.5 line-clamp-2 text-sm text-gray-600">Build blazing-fast websites using Astro's island architecture and Tailwind CSS utility-first approach.</p>
          <div class="mt-4 flex items-center justify-between border-t border-gray-100 pt-4">
            <div class="flex items-center gap-2">
              <span class="flex h-8 w-8 items-center justify-center rounded-full bg-indigo-600 text-xs font-bold text-white" aria-hidden="true">SM</span>
              <span class="text-sm text-gray-700">Sarah Mitchell</span>
            </div>
            <div class="text-right">
              <div class="flex items-center gap-1 text-xs text-amber-500" aria-label="4.8 out of 5 stars">
                <span aria-hidden="true">&#9733;&#9733;&#9733;&#9733;&#9734;</span>
                <span class="text-gray-500">(2,847)</span>
              </div>
              <div class="mt-0.5">
                <span class="text-sm font-bold text-gray-900">$49</span>
                <span class="ml-1 text-xs text-gray-400 line-through">$89</span>
              </div>
            </div>
          </div>
        </div>
      </article>

      <!-- Course 2 -->
      <article class="group overflow-hidden rounded-xl border border-gray-200 shadow-sm transition hover:shadow-lg">
        <div class="aspect-video bg-gradient-to-br from-emerald-500 to-teal-600"></div>
        <div class="p-5">
          <span class="inline-block rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-semibold text-emerald-700">Data Science</span>
          <h3 class="mt-3 text-lg font-bold text-gray-900 group-hover:text-emerald-600">Python for Data Analysis</h3>
          <p class="mt-1.5 line-clamp-2 text-sm text-gray-600">Master pandas, NumPy, and matplotlib to transform raw data into actionable business insights.</p>
          <div class="mt-4 flex items-center justify-between border-t border-gray-100 pt-4">
            <div class="flex items-center gap-2">
              <span class="flex h-8 w-8 items-center justify-center rounded-full bg-emerald-600 text-xs font-bold text-white" aria-hidden="true">JC</span>
              <span class="text-sm text-gray-700">James Chen</span>
            </div>
            <div class="text-right">
              <div class="flex items-center gap-1 text-xs text-amber-500" aria-label="4.9 out of 5 stars">
                <span aria-hidden="true">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
                <span class="text-gray-500">(4,102)</span>
              </div>
              <div class="mt-0.5">
                <span class="text-sm font-bold text-gray-900">$59</span>
                <span class="ml-1 text-xs text-gray-400 line-through">$119</span>
              </div>
            </div>
          </div>
        </div>
      </article>

      <!-- Course 3 -->
      <article class="group overflow-hidden rounded-xl border border-gray-200 shadow-sm transition hover:shadow-lg">
        <div class="aspect-video bg-gradient-to-br from-rose-500 to-pink-600"></div>
        <div class="p-5">
          <span class="inline-block rounded-full bg-rose-100 px-2.5 py-0.5 text-xs font-semibold text-rose-700">UX Design</span>
          <h3 class="mt-3 text-lg font-bold text-gray-900 group-hover:text-rose-600">UX Research &amp; Design Thinking</h3>
          <p class="mt-1.5 line-clamp-2 text-sm text-gray-600">Learn user research methods, wireframing, prototyping, and usability testing from industry practitioners.</p>
          <div class="mt-4 flex items-center justify-between border-t border-gray-100 pt-4">
            <div class="flex items-center gap-2">
              <span class="flex h-8 w-8 items-center justify-center rounded-full bg-rose-600 text-xs font-bold text-white" aria-hidden="true">AL</span>
              <span class="text-sm text-gray-700">Anna Larsson</span>
            </div>
            <div class="text-right">
              <div class="flex items-center gap-1 text-xs text-amber-500" aria-label="4.7 out of 5 stars">
                <span aria-hidden="true">&#9733;&#9733;&#9733;&#9733;&#9734;</span>
                <span class="text-gray-500">(1,563)</span>
              </div>
              <div class="mt-0.5">
                <span class="text-sm font-bold text-gray-900">$39</span>
              </div>
            </div>
          </div>
        </div>
      </article>
    </div>
  </div>
</section>