Course Feature Cards Grid

<div class="grid md:grid-cols-3 gap-8">
  <!-- Word Card -->
  <div
    class="group relative bg-slate-50 rounded-3xl p-8 transition-all duration-300 hover:bg-blue-50 hover:-translate-y-1">
    <div
      class="w-14 h-14 rounded-2xl bg-blue-100 text-blue-600 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="file-text"
        class="lucide lucide-file-text w-7 h-7">
        <path
          d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z">
        </path>
        <path d="M14 2v5a1 1 0 0 0 1 1h5"></path>
        <path d="M10 9H8"></path>
        <path d="M16 13H8"></path>
        <path d="M16 17H8"></path>
      </svg>
    </div>
    <h3 class="text-xl font-semibold text-slate-900 mb-3 font-manrope" style="">
      Word Wizardry
    </h3>
    <p class="text-sm text-slate-500 mb-8 leading-relaxed group-hover:text-blue-900/70 font-manrope" style="">
      From basic letters to complex reports with automated table of
      contents. Stop using spaces to align text.
    </p>
    <ul class="space-y-3 text-sm text-slate-600 mb-8">
      <li class="flex items-center gap-2 font-manrope" style="">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check"
          class="lucide lucide-check w-4 h-4 text-blue-500">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        Styles &amp; Headings
      </li>
      <li class="flex items-center gap-2 font-manrope" style="">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check"
          class="lucide lucide-check w-4 h-4 text-blue-500">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        Mail Merge
      </li>
      <li class="flex items-center gap-2 font-manrope" style="">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check"
          class="lucide lucide-check w-4 h-4 text-blue-500">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        Collaborative Editing
      </li>
    </ul>
    <a href="#"
      class="inline-flex items-center text-sm font-semibold text-blue-600 hover:gap-2 transition-all font-manrope"
      style="">
      Start Course
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right"
        class="lucide lucide-arrow-right w-4 h-4 ml-1">
        <path d="M5 12h14"></path>
        <path d="m12 5 7 7-7 7"></path>
      </svg>
    </a>
  </div>

  <!-- Excel Card -->
  <div
    class="group relative bg-slate-50 rounded-3xl p-8 transition-all duration-300 hover:bg-emerald-50 hover:-translate-y-1">
    <div class="absolute top-0 right-0 p-4">
      <span class="bg-emerald-100 text-emerald-700 text-[10px] font-bold px-2 py-1 rounded-full uppercase tracking-wide font-manrope" style="">
                Most Popular
              </span>
    </div>
    <div
      class="w-14 h-14 rounded-2xl bg-emerald-100 text-emerald-600 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="table-2"
        class="lucide lucide-table-2 w-7 h-7">
        <path
          d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18">
        </path>
      </svg>
    </div>
    <h3 class="text-xl font-semibold text-slate-900 mb-3 font-manrope" style="">
      Excel Ninja
    </h3>
    <p class="text-sm text-slate-500 mb-8 leading-relaxed group-hover:text-emerald-900/70 font-manrope" style="">
      Turn data into decisions. Learn VLOOKUP, Pivot Tables, and Macros
      without getting a headache.
    </p>
    <ul class="space-y-3 text-sm text-slate-600 mb-8">
      <li class="flex items-center gap-2 font-manrope" style="">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check"
          class="lucide lucide-check w-4 h-4 text-emerald-500">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        Advanced Formulas
      </li>
      <li class="flex items-center gap-2 font-manrope" style="">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check"
          class="lucide lucide-check w-4 h-4 text-emerald-500">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        Data Visualization
      </li>
      <li class="flex items-center gap-2 font-manrope" style="">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check"
          class="lucide lucide-check w-4 h-4 text-emerald-500">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        Automation
      </li>
    </ul>
    <a href="#"
      class="inline-flex items-center text-sm font-semibold text-emerald-600 hover:gap-2 transition-all font-manrope"
      style="">
      Start Course
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right"
        class="lucide lucide-arrow-right w-4 h-4 ml-1">
        <path d="M5 12h14"></path>
        <path d="m12 5 7 7-7 7"></path>
      </svg>
    </a>
  </div>

  <!-- PowerPoint Card -->
  <div
    class="group relative bg-slate-50 rounded-3xl p-8 transition-all duration-300 hover:bg-orange-50 hover:-translate-y-1">
    <div
      class="w-14 h-14 rounded-2xl bg-orange-100 text-orange-600 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="presentation"
        class="lucide lucide-presentation w-7 h-7">
        <path d="M2 3h20"></path>
        <path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3"></path>
        <path d="m7 21 5-5 5 5"></path>
      </svg>
    </div>
    <h3 class="text-xl font-semibold text-slate-900 mb-3 font-manrope" style="">
      PowerPoint Pro
    </h3>
    <p class="text-sm text-slate-500 mb-8 leading-relaxed group-hover:text-orange-900/70 font-manrope" style="">
      Create decks that keep people awake. Master master-slides,
      transitions, and embedding media.
    </p>
    <ul class="space-y-3 text-sm text-slate-600 mb-8">
      <li class="flex items-center gap-2 font-manrope" style="">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check"
          class="lucide lucide-check w-4 h-4 text-orange-500">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        Storytelling
      </li>
      <li class="flex items-center gap-2 font-manrope" style="">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check"
          class="lucide lucide-check w-4 h-4 text-orange-500">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        Animation Timing
      </li>
      <li class="flex items-center gap-2 font-manrope" style="">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check"
          class="lucide lucide-check w-4 h-4 text-orange-500">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        Design Principles
      </li>
    </ul>