Technical Training Center About 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">About TTC</li>
    </ol>
  </nav>

  <!-- ii. Background & History Section -->
  <section class="row align-items-center mb-5 pb-lg-5">
    <div class="col-lg-6 mb-4 mb-lg-0">
      <div class="pe-lg-4">
        <h6 class="text-primary fw-bold text-uppercase ls-1">Inheritance of Skill</h6>
        <h2 class="display-5 fw-bold mb-4">Our Background & History</h2>
        <p class="text-muted fs-5 pb-2">Technical Training Center (TTC) was established in 1990 under the Bureau of Manpower, Employment and Training (BMET) to transform our vast human resources into a skilled workforce.</p>
        <p class="text-secondary small">Starting with just three technical trades, we have evolved through decades of industrial shifts. Today, TTC stands as a lighthouse of vocational excellence, having trained over 50,000 technicians who are now serving in key industrial sectors across the globe.</p>
        <div class="d-flex align-items-center mt-4">
          <div class="bg-primary text-white p-3 rounded-circle me-3">
            <i class="bi bi-clock-history fs-3"></i>
          </div>
          <div>
            <h5 class="mb-0 fw-bold">34 Years</h5>
            <small class="text-muted">Of technical educational excellence</small>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <img src="https://images.stockcake.com/public/1/c/6/1c6d3662-9ad7-4f6c-900b-0430f05082dc/historic-school-building-stockcake.jpg" alt="Historical Building">
    </div>
  </section>

  <!-- iii. Mission and Vision Section (Using Bootstrap Card) -->
  <section class="row g-4 mb-5">
    <h2 class="text-center fw-bold mb-4">Our Purpose</h2>
    <div class="col-md-6">
      <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden purpose-card">
        <div class="card-body p-5">
          <div class="icon-box-mission mb-4 text-primary bg-primary bg-opacity-10 d-inline-block p-3 rounded-4">
            <i class="bi bi-rocket-takeoff-fill fs-2"></i>
          </div>
          <h3 class="fw-bold mb-3">Our Mission</h3>
          <p class="text-muted mb-0">To provide high-quality technological and vocational training that meets domestic and international market needs, ensuring financial independence and professional growth for our trainees through practical knowledge.</p>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden purpose-card bg-primary text-white">
        <div class="card-body p-5">
          <div class="icon-box-vision mb-4 text-warning bg-white bg-opacity-25 d-inline-block p-3 rounded-4">
            <i class="bi bi-eye-fill fs-2"></i>
          </div>
          <h3 class="fw-bold mb-3">Our Vision</h3>
          <p class="text-white opacity-75 mb-0">To be a globally recognized center of excellence in technical education, producing innovative technicians who contribute to the 4th Industrial Revolution and lead the nation's economic development.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- iv. Core Values Section -->
  <section class="py-5 mb-5 rounded-5 bg-light px-4 border">
    <div class="text-center mb-5">
      <h2 class="fw-bold">Our Core Values</h2>
      <div class="mx-auto bg-primary rounded-pill mt-2" style="height: 4px; width: 60px;"></div>
    </div>
    <div class="row g-4 text-center">
      <div class="col-md-3">
        <div class="p-3">
          <i class="bi bi-check-circle-fill text-primary display-5 mb-3"></i>
          <h5 class="fw-bold">Integrity</h5>
          <p class="small text-muted">Maintaining highest ethical standards in training.</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="p-3">
          <i class="bi bi-lightbulb-fill text-primary display-5 mb-3"></i>
          <h5 class="fw-bold">Innovation</h5>
          <p class="small text-muted">Embracing new technologies and methods.</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="p-3">
          <i class="bi bi-people-fill text-primary display-5 mb-3"></i>
          <h5 class="fw-bold">Teamwork</h5>
          <p class="small text-muted">Collaborative learning and work culture.</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="p-3">
          <i class="bi bi-award-fill text-primary display-5 mb-3"></i>
          <h5 class="fw-bold">Excellence</h5>
          <p class="small text-muted">Striving for perfection in every skill trade.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- v. Campus Image Gallery (Using Bootstrap Carousel) -->
  <section class="pb-5">
    <h2 class="fw-bold text-center mb-4">Campus Image Gallery</h2>
    <div id="galleryCarousel" class="carousel slide rounded-5 overflow-hidden shadow-lg border border-5 border-white" data-bs-ride="carousel">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#galleryCarousel" data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#galleryCarousel" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#galleryCarousel" data-bs-slide-to="2"></button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="https://images.unsplash.com/photo-1562774053-701939374585?w=1200" class="d-block w-100" style="height: 500px; object-fit: cover;" alt="Main Campus">
          <div class="carousel-caption d-none d-md-block bg-dark bg-opacity-50 rounded-pill px-4">
            <h5>Institutional Main Building</h5>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://images.unsplash.com/photo-1581092160562-40aa08e78837?w=1200" class="d-block w-100" style="height: 500px; object-fit: cover;" alt="Machinery Lab">
          <div class="carousel-caption d-none d-md-block bg-dark bg-opacity-50 rounded-pill px-4">
            <h5>Advanced CNC Machinery Lab</h5>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://images.unsplash.com/photo-1544725121-be3b5d0c19f2?w=1200" class="d-block w-100" style="height: 500px; object-fit: cover;" alt="IT Lab">
          <div class="carousel-caption d-none d-md-block bg-dark bg-opacity-50 rounded-pill px-4">
            <h5>Central Information Technology Suite</h5>
          </div>
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#galleryCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon p-4 rounded-circle bg-dark bg-opacity-25 shadow-sm"></span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#galleryCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon p-4 rounded-circle bg-dark bg-opacity-25 shadow-sm"></span>
      </button>
    </div>
  </section>
</div>

<style>
  .ls-1 {
    letter-spacing: 1.5px;
  }

  .purpose-card {
    transition: all 0.3s ease;
    cursor: default;
  }

  .purpose-card:hover {
    transform: translateY(-10px);
  }

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

</style>