<div class="container py-4">
    <!-- Header -->
    <div class="text-center mb-5">
        <span class="badge bg-info-subtle text-info rounded-pill px-3 py-2 mb-2 fw-semibold font-outfit text-uppercase">TRANSITION CENTER</span>
        <h2 class="fw-bold font-outfit text-dark display-6">University Transition Support</h2>
        <p class="text-muted mx-auto" style="max-width: 540px;">Your guide to navigating the critical period between High School completion and college enrollment. Stay organized and prepare for student life.</p>
    </div>

    <!-- Hub Modules Grid -->
    <div class="row g-4">
        <div class="col-md-6">
            <div class="card border-0 shadow-sm p-4 h-100 card-hover-effect border-start border-4 border-info">
                <div class="badge-icon-box bg-info-subtle text-info rounded-3 p-3 me-3 align-self-start mb-3"><i class="fa-solid fa-list-check fs-4"></i></div>
                <h5 class="fw-bold font-outfit mb-3">University Readiness Checklist</h5>
                <p class="text-muted text-sm">Stay on top of critical action items before registration day. Track housing applications, medical examinations, document requests, and school fee payments.</p>
                <a href="<?= APP_URL ?>/transition/checklist" class="btn btn-outline-info rounded-pill px-4 align-self-start mt-auto">Open My Checklist <i class="fa-solid fa-chevron-right ms-2 fs-xs"></i></a>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="card border-0 shadow-sm p-4 h-100 card-hover-effect border-start border-4 border-primary">
                <div class="badge-icon-box bg-primary-subtle text-primary rounded-3 p-3 me-3 align-self-start mb-3"><i class="fa-solid fa-chalkboard-user fs-4"></i></div>
                <h5 class="fw-bold font-outfit mb-3">Academic Readiness Prep</h5>
                <p class="text-muted text-sm">Review subject modules and syllabi. Request peer tutoring classes from university seniors to prepare for first-semester computer science, engineering, or business courses.</p>
                <a href="<?= APP_URL ?>/mentors" class="btn btn-outline-primary rounded-pill px-4 align-self-start mt-auto">Find Prep Tutors <i class="fa-solid fa-chevron-right ms-2 fs-xs"></i></a>
            </div>
        </div>
    </div>
</div>
