CPDPage.html

<!-- CPD Courses Page -->
<div class="min-h-screen flex flex-col bg-white">
  <!-- Header -->
  <header class="bg-primary text-white">
    <div class="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between">
      <h1 class="text-2xl font-bold">TN Medical Connect</h1>
      <nav class="space-x-4 text-sm">
        <a href="#" class="hover:underline">Home</a>
        <a href="#" class="hover:underline font-semibold">CPD Courses</a>
        <a href="#" class="hover:underline">Medical Books</a>
        <!-- ...other nav links -->
      </nav>
    </div>
  </header>

  <!-- Main Content -->
  <main class="flex-1 max-w-7xl mx-auto px-4 py-6">
    <h2 class="text-3xl font-bold text-gray-800 mb-4">🎓 CPD Courses</h2>
    <p class="text-gray-600 mb-6">Continue your professional development with online courses. We’ve curated content from Coursera, Udemy, and more – with special discounts and free courses for our community.</p>

    <!-- Courses Grid -->
    <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
      <!-- Course Card 1 -->
      <div class="border border-gray-200 rounded-lg p-4 shadow-sm flex flex-col">
        <h3 class="text-lg font-semibold text-gray-800">COVID-19 Contact Tracing</h3>
        <p class="text-sm text-gray-500">Platform: Coursera</p>
        <p class="text-sm text-gray-700 mt-2 flex-1">Learn the basics of contact tracing for COVID-19, taught by experts at Johns Hopkins University.</p>
        <span class="text-green-700 text-xs font-bold mt-2">FREE</span>
        <a href="#" class="mt-3 bg-primary text-white text-sm font-medium text-center px-3 py-2 rounded hover:bg-opacity-90">Enroll Now</a>
      </div>
      <!-- Course Card 2 -->
      <div class="border border-gray-200 rounded-lg p-4 shadow-sm flex flex-col">
        <h3 class="text-lg font-semibold text-gray-800">Diabetes Essentials</h3>
        <p class="text-sm text-gray-500">Platform: Udemy</p>
        <p class="text-sm text-gray-700 mt-2 flex-1">Comprehensive guide to managing diabetes, for patients and healthcare providers alike.</p>
        <span class="text-blue-700 text-xs font-bold mt-2">50% OFF</span>
        <a href="#" class="mt-3 bg-primary text-white text-sm font-medium text-center px-3 py-2 rounded hover:bg-opacity-90">Enroll Now</a>
      </div>
      <!-- Course Card 3 -->
      <div class="border border-gray-200 rounded-lg p-4 shadow-sm flex flex-col">
        <h3 class="text-lg font-semibold text-gray-800">Medical AI and Machine Learning</h3>
        <p class="text-sm text-gray-500">Platform: Coursera</p>
        <p class="text-sm text-gray-700 mt-2 flex-1">An introduction to AI in healthcare, covering machine learning applications in medicine (offered by Stanford University).</p>
        <span class="text-green-700 text-xs font-bold mt-2">FREE</span>
        <a href="#" class="mt-3 bg-primary text-white text-sm font-medium text-center px-3 py-2 rounded hover:bg-opacity-90">Enroll Now</a>
      </div>
      <!-- Course Card 4 -->
      <div class="border border-gray-200 rounded-lg p-4 shadow-sm flex flex-col">
        <h3 class="text-lg font-semibold text-gray-800">Emergency Medicine Crash Course</h3>
        <p class="text-sm text-gray-500">Platform: Udemy</p>
        <p class="text-sm text-gray-700 mt-2 flex-1">Quick refresher on emergency protocols and life support, ideal for general practitioners and ER staff.</p>
        <span class="text-blue-700 text-xs font-bold mt-2">30% OFF</span>
        <a href="#" class="mt-3 bg-primary text-white text-sm font-medium text-center px-3 py-2 rounded hover:bg-opacity-90">Enroll Now</a>
      </div>
      <!-- Additional course cards as needed -->
    </div>
  </main>

  <!-- Footer -->
  <footer class="bg-gray-100">
    <div class="max-w-7xl mx-auto px-4 py-5 text-xs text-gray-600">
      © 2025 TN Medical Connect &middot; <a href="#" class="text-primary hover:underline">Request a Course</a>
    </div>
  </footer>
</div>