TTC Courses Page

<div class="container py-4">
  <!-- i. Breadcrumb Section -->
  <nav aria-label="breadcrumb" class="mb-5">
    <ol class="breadcrumb bg-light p-3 rounded-4 shadow-sm border-0">
      <li class="breadcrumb-item"><a href="#" class="text-decoration-none fw-bold text-primary">Home</a></li>
      <li class="breadcrumb-item active fw-semibold" aria-current="page">Our Courses</li>
    </ol>
  </nav>

  <!-- ii. Available Trades/Departments List -->
  <section class="mb-5">
    <div class="text-center mb-5">
      <h6 class="text-primary fw-bold text-uppercase">Trade Programs</h6>
      <h2 class="fw-bold">Explore Our Departments</h2>
    </div>
    <div class="row g-4 justify-content-center">
      <div class="col-6 col-md-4 col-lg-2 text-center">
        <div class="card h-100 border-0 shadow-sm rounded-4 p-3 trade-box">
          <i class="bi bi-cpu fs-1 text-primary mb-2"></i>
          <h6 class="fw-bold mb-0">Electronics</h6>
        </div>
      </div>
      <div class="col-6 col-md-4 col-lg-2 text-center">
        <div class="card h-100 border-0 shadow-sm rounded-4 p-3 trade-box">
          <i class="bi bi-tools fs-1 text-primary mb-2"></i>
          <h6 class="fw-bold mb-0">Mechanics</h6>
        </div>
      </div>
      <div class="col-6 col-md-4 col-lg-2 text-center">
        <div class="card h-100 border-0 shadow-sm rounded-4 p-3 trade-box">
          <i class="bi bi-lightning-charge fs-1 text-primary mb-2"></i>
          <h6 class="fw-bold mb-0">Electrical</h6>
        </div>
      </div>
      <div class="col-6 col-md-4 col-lg-2 text-center">
        <div class="card h-100 border-0 shadow-sm rounded-4 p-3 trade-box">
          <i class="bi bi-computer fs-1 text-primary mb-2"></i>
          <h6 class="fw-bold mb-0">Computer</h6>
        </div>
      </div>
      <div class="col-6 col-md-4 col-lg-2 text-center">
        <div class="card h-100 border-0 shadow-sm rounded-4 p-3 trade-box">
          <i class="bi bi-buildings fs-1 text-primary mb-2"></i>
          <h6 class="fw-bold mb-0">Civil</h6>
        </div>
      </div>
    </div>
  </section>

  <!-- iii. Course Details & Syllabus (using accordion) -->
  <section class="mb-5 py-4">
    <h3 class="fw-bold mb-4 border-start border-4 border-primary ps-3">Course Modules & Syllabus</h3>
    <div class="accordion shadow-sm rounded-4 overflow-hidden" id="syllabusAccordion">
      <!-- Course 1 -->
      <div class="accordion-item border-0">
        <h2 class="accordion-header">
          <button class="accordion-button fw-bold py-3" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
            <i class="bi bi-laptop me-3 text-primary"></i> Computer Operation & IT Support
          </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#syllabusAccordion">
          <div class="accordion-body text-muted small">
            <ul class="list-group list-group-flush">
              <li class="list-group-item">Module 1: Introduction to Computer Hardware</li>
              <li class="list-group-item">Module 2: Operating Systems & Office Applications</li>
              <li class="list-group-item">Module 3: Basic Networking & Troubleshooting</li>
              <li class="list-group-item">Module 4: Professional Communication Skills</li>
            </ul>
          </div>
        </div>
      </div>
      <!-- Course 2 -->
      <div class="accordion-item border-0 border-top">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed fw-bold py-3" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
            <i class="bi bi-gear me-3 text-primary"></i> General Mechanics & Machining
          </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#syllabusAccordion">
          <div class="accordion-body text-muted small">
            <ul class="list-group list-group-flush">
              <li class="list-group-item">Module 1: Measurement & Engineering Drawing</li>
              <li class="list-group-item">Module 2: Lathe Machine Operations</li>
              <li class="list-group-item">Module 3: Milling & Grinding Techniques</li>
              <li class="list-group-item">Module 4: Industrial Safety & Maintenance</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- iv. Course Fees Table -->
  <section class="mb-5 pt-4">
    <h3 class="fw-bold mb-4 border-start border-4 border-primary ps-3">Course Fees Structure</h3>
    <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
          <thead class="bg-primary text-white">
            <tr>
              <th class="py-3 ps-4">Trade Name</th>
              <th class="py-3">Duration</th>
              <th class="py-3">Admission Fee</th>
              <th class="py-3 text-end pe-4">Monthly Fee</th>
            </tr>
          </thead>
          <tbody class="small fw-semibold">
            <tr>
              <td class="ps-4">Computer Operation</td>
              <td>6 Months</td>
              <td>$50.00</td>
              <td class="text-end pe-4">$10.00</td>
            </tr>
            <tr>
              <td class="ps-4">Electrical Installation</td>
              <td>6 Months</td>
              <td>$60.00</td>
              <td class="text-end pe-4">$12.00</td>
            </tr>
            <tr>
              <td class="ps-4">Refrigeration & Air-Con</td>
              <td>1 Year</td>
              <td>$100.00</td>
              <td class="text-end pe-4">$15.00</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </section>

  <!-- v. Featured Courses Slider (Bootstrap Carousel used as slider alternative) -->
  <section class="pb-5">
    <h3 class="fw-bold mb-4 text-center">Featured Programs</h3>
    <div id="courseSlider" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <div class="row g-4 px-lg-5">
            <div class="col-md-6">
              <div class="card border-0 shadow-sm rounded-4 overflow-hidden featured-course">
                <img src="https://images.unsplash.com/photo-1517048676732-d65bc937f952?w=500" class="card-img-top" height="200" style="object-fit:cover" alt="Course">
                <div class="card-body p-4">
                  <span class="badge bg-warning text-dark mb-2">Short Course</span>
                  <h5 class="fw-bold">Solar Power Technology</h5>
                  <p class="text-muted small">Learn to install and maintain commercial solar energy systems.</p>
                  <button class="btn btn-outline-primary btn-sm rounded-pill">Apply Now</button>
                </div>
              </div>
            </div>
            <div class="col-md-6 d-none d-md-block">
              <div class="card border-0 shadow-sm rounded-4 overflow-hidden featured-course">
                <img src="https://images.unsplash.com/photo-1504917595217-d4dc5f649774?w=500" class="card-img-top" height="200" style="object-fit:cover" alt="Course">
                <div class="card-body p-4">
                  <span class="badge bg-success text-white mb-2">Professional</span>
                  <h5 class="fw-bold">Industrial Automation (PLC)</h5>
                  <p class="text-muted small">Advance your career with Programmable Logic Controller skills.</p>
                  <button class="btn btn-outline-primary btn-sm rounded-pill">Apply Now</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#courseSlider" data-bs-slide="prev" style="width: 5%;">
        <span class="bg-dark rounded-circle p-2"><i class="bi bi-chevron-left"></i></span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#courseSlider" data-bs-slide="next" style="width: 5%;">
        <span class="bg-dark rounded-circle p-2"><i class="bi bi-chevron-right"></i></span>
      </button>
    </div>
  </section>
</div>

<style>
  .trade-box {
    transition: all 0.3s ease;
  }

  .trade-box:hover {
    background-color: #0d6efd;
    color: white !important;
    transform: translateY(-5px);
  }

  .trade-box:hover i {
    color: white !important;
  }

  .featured-course {
    transition: transform 0.3s;
  }

  .featured-course:hover {
    transform: scale(1.02);
  }

  .accordion-button:not(.collapsed) {
    background-color: #f8f9fa;
    color: #0d6efd;
    box-shadow: none;
  }

  .breadcrumb-item+.breadcrumb-item::before {
    content: ">";
  }

</style>