<!-- =====================================================
EXAMCURE COURSES PAGE — HERO + NAVIGATION
Place this above the existing LearnWorlds course catalogue
===================================================== -->
<section id="ec-course-directory" class="ec-directory">
<!-- HERO -->
<div class="ec-hero">
<div class="ec-hero-overlay"></div>
<div class="ec-hero-content">
<span class="ec-eyebrow">EXAMCURE LEARNING CATALOGUE</span>
<h1>
Healthcare Licensing and Board Exam Preparation Courses
</h1>
<p>
Explore complete programmes, MCQ banks, mock exams, study guides,
and free resources for medical, nursing, dental, pharmacy, and
allied-health examinations.
</p>
<div class="ec-hero-actions">
<a href="#ec-programmes" class="ec-btn ec-btn-primary">
Browse Programmes
</a>
<a href="#ec-free-resources" class="ec-btn ec-btn-secondary">
Explore Free Resources
</a>
</div>
</div>
</div>
<!-- TRUST STRIP -->
<div class="ec-trust-strip">
<div class="ec-trust-item">
<strong>Exam-Focused</strong>
<span>Preparation organised around relevant exam topics</span>
</div>
<div class="ec-trust-item">
<strong>Multiple Professions</strong>
<span>Medical, nursing, dental, pharmacy, and allied health</span>
</div>
<div class="ec-trust-item">
<strong>Flexible Resources</strong>
<span>Programmes, MCQ banks, mock exams, and study guides</span>
</div>
</div>
<!-- PROFESSION SELECTOR -->
<section class="ec-section" aria-labelledby="ec-profession-heading">
<div class="ec-section-heading">
<span class="ec-section-label">CHOOSE YOUR PATH</span>
<h2 id="ec-profession-heading">
Browse by Profession
</h2>
<p>
Select your profession to find the most relevant licensing,
residency, or board-exam preparation resources.
</p>
</div>
<div class="ec-profession-grid">
<a href="#ec-all-courses" class="ec-profession-card">
<span class="ec-profession-icon">GP</span>
<h3>General Practice</h3>
<p>
Preparation for GP licensing examinations across Gulf authorities.
</p>
<span class="ec-card-link">Browse resources →</span>
</a>
<a href="#ec-all-courses" class="ec-profession-card">
<span class="ec-profession-icon">FM</span>
<h3>Family Medicine</h3>
<p>
Family-medicine licensing, residency, and board-exam resources.
</p>
<span class="ec-card-link">Browse resources →</span>
</a>
<a href="#ec-all-courses" class="ec-profession-card">
<span class="ec-profession-icon">MD</span>
<h3>Specialist Doctors</h3>
<p>
Specialty-focused preparation for licensing and board examinations.
</p>
<span class="ec-card-link">Browse resources →</span>
</a>
<a href="#ec-all-courses" class="ec-profession-card">
<span class="ec-profession-icon">RN</span>
<h3>Nursing</h3>
<p>
Resources for registered nurses and selected nursing specialties.
</p>
<span class="ec-card-link">Browse resources →</span>
</a>
<a href="#ec-all-courses" class="ec-profession-card">
<span class="ec-profession-icon">DDS</span>
<h3>Dental</h3>
<p>
Preparation for dentists and selected dental-specialty examinations.
</p>
<span class="ec-card-link">Browse resources →</span>
</a>
<a href="#ec-all-courses" class="ec-profession-card">
<span class="ec-profession-icon">RX</span>
<h3>Pharmacy</h3>
<p>
Pharmacy licensing-exam question banks and revision resources.
</p>
<span class="ec-card-link">Browse resources →</span>
</a>
<a href="#ec-all-courses" class="ec-profession-card">
<span class="ec-profession-icon">AH</span>
<h3>Allied Health</h3>
<p>
Preparation for selected allied-health professions and authorities.
</p>
<span class="ec-card-link">Browse resources →</span>
</a>
<a href="#ec-all-courses" class="ec-profession-card">
<span class="ec-profession-icon">BD</span>
<h3>Residency and Board Exams</h3>
<p>
Resources for selected residency-entry and postgraduate examinations.
</p>
<span class="ec-card-link">Browse resources →</span>
</a>
</div>
</section>
<!-- PROGRAMMES -->
<section id="ec-programmes" class="ec-section ec-programme-section">
<div class="ec-section-heading">
<span class="ec-section-label">COMPLETE PREPARATION</span>
<h2>Choose a Complete Exam Preparation Programme</h2>
<p>
Programmes bring related learning resources together in one structured
preparation pathway. The exact contents, price, and access period are
shown on each current programme page.
</p>
</div>
<div class="ec-product-type-grid">
<article class="ec-product-type-card ec-featured-card">
<span class="ec-product-badge">RECOMMENDED START</span>
<div class="ec-product-symbol">01</div>
<h3>Complete Programmes</h3>
<p>
Structured preparation pathways that may combine MCQ banks,
mock exams, study materials, and authority-specific activities.
</p>
<a href="#ec-all-courses" class="ec-text-button">
Browse programmes →
</a>
</article>
<article class="ec-product-type-card">
<div class="ec-product-symbol">02</div>
<h3>MCQ Banks</h3>
<p>
Exam-focused practice questions with answer explanations and
topic-based revision opportunities.
</p>
<a href="#ec-all-courses" class="ec-text-button">
Browse MCQ banks →
</a>
</article>
<article class="ec-product-type-card">
<div class="ec-product-symbol">03</div>
<h3>Mock Exams</h3>
<p>
Timed or structured practice activities designed to support
examination readiness and self-assessment.
</p>
<a href="#ec-all-courses" class="ec-text-button">
Browse mock exams →
</a>
</article>
<article class="ec-product-type-card">
<div class="ec-product-symbol">04</div>
<h3>Study Guides</h3>
<p>
Focused revision materials covering selected examination topics,
preparation strategies, and essential concepts.
</p>
<a href="#ec-all-courses" class="ec-text-button">
Browse study guides →
</a>
</article>
</div>
</section>
<!-- FREE RESOURCES -->
<section id="ec-free-resources" class="ec-free-section">
<div class="ec-free-content">
<div>
<span class="ec-free-label">START FREE</span>
<h2>Explore Free Exam Preparation Resources</h2>
<p>
Review selected study guides, sample MCQs, diagnostic activities,
and introductory resources before choosing a paid product.
</p>
<p class="ec-small-note">
Available free resources vary by profession and examination.
</p>
</div>
<a href="#ec-all-courses" class="ec-btn ec-btn-light">
Browse Free Resources
</a>
</div>
</section>
<!-- CATALOGUE INTRODUCTION -->
<section id="ec-all-courses" class="ec-catalogue-intro">
<span class="ec-section-label">FULL CATALOGUE</span>
<h2>Browse All ExamCure Learning Resources</h2>
<p>
Use the course search and category filters below to locate resources
by profession, authority, examination, or product type.
</p>
<div class="ec-filter-tips">
<span>Search by exam name</span>
<span>Choose a profession</span>
<span>Select an authority</span>
<span>Check whether the resource is free or paid</span>
</div>
</section>
</section>
<style>
#ec-course-directory,
#ec-course-directory * {
box-sizing: border-box;
}
#ec-course-directory {
--ec-navy: #15243a;
--ec-navy-dark: #0e1929;
--ec-teal: #087f7b;
--ec-teal-dark: #056864;
--ec-blue: #2865d8;
--ec-text: #253247;
--ec-muted: #647085;
--ec-border: #dde4ec;
--ec-light: #f5f8fb;
--ec-white: #ffffff;
width: 100%;
color: var(--ec-text);
background: var(--ec-white);
font-family: inherit;
}
#ec-course-directory a {
text-decoration: none;
}
/* HERO */
#ec-course-directory .ec-hero {
position: relative;
display: flex;
min-height: 470px;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 72px 24px;
background:
linear-gradient(
115deg,
rgba(14, 25, 41, 0.97),
rgba(14, 25, 41, 0.80)
),
url("https://images.unsplash.com/photo-1434030216411-0b793f4b4173?auto=format&fit=crop&w=1800&q=85")
center/cover no-repeat;
}
#ec-course-directory .ec-hero-content {
position: relative;
z-index: 2;
width: 100%;
max-width: 940px;
margin: 0 auto;
text-align: center;
}
#ec-course-directory .ec-eyebrow {
display: inline-block;
margin-bottom: 20px;
padding: 9px 15px;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 999px;
background: rgba(255, 255, 255, 0.10);
color: #ffffff;
font-size: 12px;
font-weight: 750;
letter-spacing: 1.5px;
}
#ec-course-directory .ec-hero h1 {
max-width: 920px;
margin: 0 auto 20px;
color: #ffffff;
font-size: clamp(36px, 5vw, 60px);
font-weight: 780;
line-height: 1.1;
letter-spacing: -1.7px;
}
#ec-course-directory .ec-hero p {
max-width: 790px;
margin: 0 auto;
color: rgba(255, 255, 255, 0.86);
font-size: clamp(16px, 2vw, 19px);
line-height: 1.7;
}
#ec-course-directory .ec-hero-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
margin-top: 30px;
}
#ec-course-directory .ec-btn {
display: inline-flex;
min-height: 52px;
align-items: center;
justify-content: center;
padding: 14px 25px;
border: 2px solid transparent;
border-radius: 9px;
font-size: 15px;
font-weight: 750;
line-height: 1.2;
transition:
transform 0.2s ease,
background 0.2s ease,
border-color 0.2s ease;
}
#ec-course-directory .ec-btn:hover {
transform: translateY(-2px);
}
#ec-course-directory .ec-btn-primary {
background: var(--ec-teal);
color: #ffffff !important;
}
#ec-course-directory .ec-btn-primary:hover {
background: var(--ec-teal-dark);
}
#ec-course-directory .ec-btn-secondary {
border-color: rgba(255, 255, 255, 0.75);
background: transparent;
color: #ffffff !important;
}
#ec-course-directory .ec-btn-secondary:hover {
background: #ffffff;
color: var(--ec-navy) !important;
}
/* TRUST STRIP */
#ec-course-directory .ec-trust-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
max-width: 1180px;
margin: -38px auto 0;
position: relative;
z-index: 3;
overflow: hidden;
border: 1px solid var(--ec-border);
border-radius: 16px;
background: #ffffff;
box-shadow: 0 14px 38px rgba(23, 36, 58, 0.12);
}
#ec-course-directory .ec-trust-item {
padding: 24px 28px;
text-align: center;
}
#ec-course-directory .ec-trust-item + .ec-trust-item {
border-left: 1px solid var(--ec-border);
}
#ec-course-directory .ec-trust-item strong {
display: block;
margin-bottom: 6px;
color: var(--ec-navy);
font-size: 16px;
}
#ec-course-directory .ec-trust-item span {
display: block;
color: var(--ec-muted);
font-size: 13px;
line-height: 1.55;
}
/* GENERAL SECTIONS */
#ec-course-directory .ec-section {
max-width: 1220px;
margin: 0 auto;
padding: 84px 24px;
}
#ec-course-directory .ec-section-heading {
max-width: 790px;
margin: 0 auto 42px;
text-align: center;
}
#ec-course-directory .ec-section-label {
display: inline-block;
margin-bottom: 11px;
color: var(--ec-blue);
font-size: 12px;
font-weight: 800;
letter-spacing: 1.5px;
}
#ec-course-directory .ec-section-heading h2,
#ec-course-directory .ec-catalogue-intro h2,
#ec-course-directory .ec-free-section h2 {
margin: 0 0 14px;
color: var(--ec-navy);
font-size: clamp(29px, 4vw, 42px);
line-height: 1.2;
letter-spacing: -0.8px;
}
#ec-course-directory .ec-section-heading p,
#ec-course-directory .ec-catalogue-intro p {
margin: 0;
color: var(--ec-muted);
font-size: 16px;
line-height: 1.75;
}
/* PROFESSION CARDS */
#ec-course-directory .ec-profession-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
#ec-course-directory .ec-profession-card {
display: flex;
min-height: 255px;
flex-direction: column;
padding: 26px 24px;
border: 1px solid var(--ec-border);
border-radius: 15px;
background: #ffffff;
color: var(--ec-text) !important;
box-shadow: 0 5px 18px rgba(23, 36, 58, 0.04);
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
border-color 0.2s ease;
}
#ec-course-directory .ec-profession-card:hover {
transform: translateY(-4px);
border-color: #b8cae4;
box-shadow: 0 14px 30px rgba(23, 36, 58, 0.10);
}
#ec-course-directory .ec-profession-icon {
display: inline-flex;
width: 51px;
height: 51px;
align-items: center;
justify-content: center;
margin-bottom: 20px;
border-radius: 13px;
background: #eaf3ff;
color: var(--ec-blue);
font-size: 14px;
font-weight: 850;
}
#ec-course-directory .ec-profession-card h3 {
margin: 0 0 10px;
color: var(--ec-navy);
font-size: 19px;
line-height: 1.3;
}
#ec-course-directory .ec-profession-card p {
margin: 0 0 18px;
color: var(--ec-muted);
font-size: 14px;
line-height: 1.65;
}
#ec-course-directory .ec-card-link {
margin-top: auto;
color: var(--ec-blue);
font-size: 14px;
font-weight: 750;
}
/* PROGRAMME SECTION */
#ec-course-directory .ec-programme-section {
max-width: none;
padding-right: max(24px, calc((100% - 1172px) / 2));
padding-left: max(24px, calc((100% - 1172px) / 2));
background: var(--ec-light);
}
#ec-course-directory .ec-product-type-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
#ec-course-directory .ec-product-type-card {
position: relative;
display: flex;
min-height: 300px;
flex-direction: column;
padding: 28px 25px;
border: 1px solid var(--ec-border);
border-radius: 16px;
background: #ffffff;
}
#ec-course-directory .ec-featured-card {
border: 2px solid var(--ec-teal);
}
#ec-course-directory .ec-product-badge {
position: absolute;
top: -12px;
left: 20px;
padding: 6px 11px;
border-radius: 999px;
background: var(--ec-teal);
color: #ffffff;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.8px;
}
#ec-course-directory .ec-product-symbol {
display: flex;
width: 46px;
height: 46px;
align-items: center;
justify-content: center;
margin-bottom: 21px;
border-radius: 50%;
background: #edf3fb;
color: var(--ec-blue);
font-size: 13px;
font-weight: 850;
}
#ec-course-directory .ec-product-type-card h3 {
margin: 0 0 12px;
color: var(--ec-navy);
font-size: 20px;
}
#ec-course-directory .ec-product-type-card p {
margin: 0 0 22px;
color: var(--ec-muted);
font-size: 14px;
line-height: 1.7;
}
#ec-course-directory .ec-text-button {
margin-top: auto;
color: var(--ec-teal) !important;
font-size: 14px;
font-weight: 780;
}
/* FREE RESOURCES */
#ec-course-directory .ec-free-section {
max-width: 1172px;
margin: 80px auto;
padding: 0 24px;
}
#ec-course-directory .ec-free-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 45px;
padding: 45px 48px;
border-radius: 19px;
background: var(--ec-teal);
color: #ffffff;
}
#ec-course-directory .ec-free-content > div {
max-width: 760px;
}
#ec-course-directory .ec-free-label {
display: inline-block;
margin-bottom: 11px;
color: rgba(255, 255, 255, 0.78);
font-size: 12px;
font-weight: 800;
letter-spacing: 1.4px;
}
#ec-course-directory .ec-free-section h2 {
color: #ffffff;
}
#ec-course-directory .ec-free-section p {
margin: 0;
color: rgba(255, 255, 255, 0.86);
font-size: 16px;
line-height: 1.7;
}
#ec-course-directory .ec-small-note {
margin-top: 9px !important;
font-size: 13px !important;
}
#ec-course-directory .ec-btn-light {
flex: 0 0 auto;
background: #ffffff;
color: var(--ec-navy) !important;
}
#ec-course-directory .ec-btn-light:hover {
background: #f0f5f5;
}
/* CATALOGUE INTRO */
#ec-course-directory .ec-catalogue-intro {
max-width: 1000px;
margin: 0 auto;
padding: 30px 24px 50px;
text-align: center;
}
#ec-course-directory .ec-filter-tips {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 9px;
margin-top: 25px;
}
#ec-course-directory .ec-filter-tips span {
padding: 8px 12px;
border: 1px solid var(--ec-border);
border-radius: 999px;
background: #ffffff;
color: var(--ec-muted);
font-size: 12px;
font-weight: 650;
}
/* RESPONSIVE */
@media (max-width: 1020px) {
#ec-course-directory .ec-profession-grid,
#ec-course-directory .ec-product-type-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
#ec-course-directory .ec-hero {
min-height: 420px;
padding: 60px 18px 75px;
}
#ec-course-directory .ec-hero h1 {
font-size: 38px;
}
#ec-course-directory .ec-trust-strip {
grid-template-columns: 1fr;
margin: -28px 16px 0;
}
#ec-course-directory .ec-trust-item + .ec-trust-item {
border-top: 1px solid var(--ec-border);
border-left: 0;
}
#ec-course-directory .ec-section {
padding: 65px 18px;
}
#ec-course-directory .ec-free-section {
margin: 60px auto;
padding: 0 18px;
}
#ec-course-directory .ec-free-content {
align-items: flex-start;
flex-direction: column;
padding: 34px 27px;
}
}
@media (max-width: 560px) {
#ec-course-directory .ec-hero h1 {
font-size: 33px;
}
#ec-course-directory .ec-hero-actions {
flex-direction: column;
}
#ec-course-directory .ec-btn {
width: 100%;
}
#ec-course-directory .ec-profession-grid,
#ec-course-directory .ec-product-type-grid {
grid-template-columns: 1fr;
}
#ec-course-directory .ec-profession-card {
min-height: auto;
}
#ec-course-directory .ec-product-type-card {
min-height: auto;
}
#ec-course-directory .ec-catalogue-intro {
padding-bottom: 35px;
}
}
@media (prefers-reduced-motion: reduce) {
#ec-course-directory *,
#ec-course-directory *::before,
#ec-course-directory *::after {
scroll-behavior: auto !important;
transition: none !important;
}
}
</style>
<script>
(function () {
const directory = document.getElementById("ec-course-directory");
if (!directory) {
return;
}
directory.querySelectorAll('a[href^="#"]').forEach(function (link) {
link.addEventListener("click", function (event) {
const targetSelector = link.getAttribute("href");
const target = document.querySelector(targetSelector);
if (!target) {
return;
}
event.preventDefault();
target.scrollIntoView({
behavior: "smooth",
block: "start"
});
});
});
})();
</script>