File "news-events.php"

Full path: /home/fsibplc/public_html/sommilito-bank/news-events.php
File size: 10.57 B
MIME-type: text/x-php
Charset: utf-8

Download   Open   Edit   Advanced Editor   Back

<?php include 'header.php' ?>

<!-- For page Hero -->
<?php
$page = 'News & Events';
$title = "Our Latest Corporate News, Events, Trainings";
include 'page-hero.php';
?>

<!-- HERO SECTION 
<section class="bg-gradient-to-r from-teal-600 to-teal-900 text-white text-center py-20">
  <h1 class="text-4xl font-bold mb-3">News & Events</h1>
  <p class="text-lg max-w-2xl mx-auto">Stay updated with our latest corporate news, events, trainings, and more.</p>
</section>-->

<!-- NAV TABS WITH OUTER BORDER -->
 </br>
<div class="flex flex-wrap justify-center gap-4 py-6 border-2 border-gray-300 rounded-xl p-4 bg-white shadow-md mx-6">

  <button onclick="showTab(event, 'corporate-news')"
    class="tab-btn bg-teal-700 text-white px-6 py-2 rounded shadow shadow font-semibold text-lg">
    Corporate News
  </button>

  <button onclick="showTab(event, 'agreement-signing')"
    class="tab-btn bg-white text-gray-700 border px-6 py-2 rounded shadow font-semibold text-lg">
    Agreement Signing
  </button>

  <button onclick="showTab(event, 'training')"
    class="tab-btn bg-white text-gray-700 border px-6 py-2 rounded shadow font-semibold text-lg">
    Training
  </button>

  <button onclick="showTab(event, 'interview')"
    class="tab-btn bg-white text-gray-700 border px-6 py-2 rounded shadow font-semibold text-lg">
    Interview
  </button>

  <button onclick="showTab(event, 'fair')"
    class="tab-btn bg-white text-gray-700 border px-6 py-2 rounded shadow font-semibold text-lg">
    Fair
  </button>

  <button onclick="showTab(event, 'csr')"
    class="tab-btn bg-white text-gray-700 border px-6 py-2 rounded shadow font-semibold text-lg">
    CSR
  </button>

  <button onclick="showTab(event, 'meeting')"
    class="tab-btn bg-white text-gray-700 border px-6 py-2 rounded shadow font-semibold text-lg">
    Meeting
  </button>

</div></br>

<!-- TAB CONTENT -->

<!-- Corporate News -->
<div id="corporate-news" class="tab-content max-w-7xl mx-auto space-y-4">

  <div class="border rounded overflow-hidden">
    <button onclick="toggleAccordion(this)"
      class="w-full flex justify-between items-center px-5 py-4 bg-blue-100 hover:bg-blue-200 font-semibold">
      <span>New Branch Opening in Dhaka</span>
      <span>+</span>
    </button>

    <div class="accordion-content hidden bg-white border-t px-5 py-4 text-gray-700">

    <!-- Optional Image -->
    <div class="mb-4 flex justify-center">
        <img src="./assets/logo/sommilito-logo.png" alt="Branch Image" class="w-64 h-40 object-cover rounded-lg shadow-md">
    </div>

    <!-- Text Content -->
    <p class="text-center">
        Our new branch in Dhaka has officially opened to serve customers with enhanced services.
    </p>

    </div>
  </div>

  <div class="border rounded overflow-hidden">
    <button onclick="toggleAccordion(this)"
      class="w-full flex justify-between items-center px-5 py-4 bg-blue-100 hover:bg-blue-200 font-semibold">
      <span>Corporate Partnership Announcement</span>
      <span>+</span>
    </button>

      <div class="accordion-content hidden bg-white border-t px-5 py-4 text-gray-700">

    <!-- Optional Image -->
    <div class="mb-4 flex justify-center">
        <img src="./assets/logo/sommilito-logo.png" alt="Branch Image" class="w-64 h-40 object-cover rounded-lg shadow-md">
    </div>

    <!-- Text Content -->
    <p class="text-center">
        Our new branch in Dhaka has officially opened to serve customers with enhanced services.
    </p>

    </div>

  </div>

</div>

<!-- Agreement Signing -->
<div id="agreement-signing" class="tab-content hidden max-w-7xl mx-auto space-y-4">

  <div class="border rounded overflow-hidden">
    <button onclick="toggleAccordion(this)"
      class="w-full flex justify-between items-center px-5 py-4 bg-blue-100 hover:bg-blue-200 font-semibold">
      <span>MoU with ABC Company</span>
      <span>+</span>
    </button>

     <div class="accordion-content hidden bg-white border-t px-5 py-4 text-gray-700">

    <!-- Optional Image -->
    <div class="mb-4 flex justify-center">
        <img src="./assets/logo/sommilito-logo.png" alt="Branch Image" class="w-64 h-40 object-cover rounded-lg shadow-md">
    </div>

    <!-- Text Content -->
    <p class="text-center">
        Our new branch in Dhaka has officially opened to serve customers with enhanced services.
    </p>

    </div>

  </div>

</div>

<!-- Training -->
<div id="training" class="tab-content hidden max-w-7xl mx-auto space-y-4">

  <div class="border rounded overflow-hidden">
    <button onclick="toggleAccordion(this)"
      class="w-full flex justify-between items-center px-5 py-4 bg-blue-100 hover:bg-blue-200 font-semibold">
      <span>Employee Leadership Training</span>
      <span>+</span>
    </button>

     <div class="accordion-content hidden bg-white border-t px-5 py-4 text-gray-700">

    <!-- Optional Image -->
    <div class="mb-4 flex justify-center">
        <img src="./assets/logo/sommilito-logo.png" alt="Branch Image" class="w-64 h-40 object-cover rounded-lg shadow-md">
    </div>

    <!-- Text Content -->
    <p class="text-center">
        Our new branch in Dhaka has officially opened to serve customers with enhanced services.
    </p>

    </div>

  </div>

</div>

<!-- Opening -->
<div id="opening" class="tab-content hidden max-w-7xl mx-auto space-y-4">
  <div class="border rounded overflow-hidden">
    <button onclick="toggleAccordion(this)"
      class="w-full flex justify-between items-center px-5 py-4 bg-blue-100 hover:bg-blue-200 font-semibold">
      <span>New Branch Opening</span>
      <span>+</span>
    </button>

      <div class="accordion-content hidden bg-white border-t px-5 py-4 text-gray-700">

    <!-- Optional Image -->
    <div class="mb-4 flex justify-center">
        <img src="./assets/logo/sommilito-logo.png" alt="Branch Image" class="w-64 h-40 object-cover rounded-lg shadow-md">
    </div>

    <!-- Text Content -->
    <p class="text-center">
        Our new branch in Dhaka has officially opened to serve customers with enhanced services.
    </p>

    </div>

  </div>
</div>

<!-- Interview -->
<div id="interview" class="tab-content hidden max-w-7xl mx-auto space-y-4">
  <div class="border rounded overflow-hidden">
    <button onclick="toggleAccordion(this)"
      class="w-full flex justify-between items-center px-5 py-4 bg-blue-100 hover:bg-blue-200 font-semibold">
      <span>Interview Branch Opening</span>
      <span>+</span>
    </button>

      <div class="accordion-content hidden bg-white border-t px-5 py-4 text-gray-700">

    <!-- Optional Image -->
    <div class="mb-4 flex justify-center">
        <img src="./assets/logo/sommilito-logo.png" alt="Branch Image" class="w-64 h-40 object-cover rounded-lg shadow-md">
    </div>

    <!-- Text Content -->
    <p class="text-center">
        Our new branch in Dhaka has officially opened to serve customers with enhanced services.
    </p>

    </div>

  </div>
</div>

<!-- Fair -->
<div id="fair" class="tab-content hidden max-w-7xl mx-auto space-y-4">
  <div class="border rounded overflow-hidden">
    <button onclick="toggleAccordion(this)"
      class="w-full flex justify-between items-center px-5 py-4 bg-blue-100 hover:bg-blue-200 font-semibold">
      <span>4th Non Fiction Book Fair</span>
      <span>+</span>
    </button>

     <div class="accordion-content hidden bg-white border-t px-5 py-4 text-gray-700">

    <!-- Optional Image -->
    <div class="mb-4 flex justify-center">
        <img src="./assets/logo/sommilito-logo.png" alt="Branch Image" class="w-64 h-40 object-cover rounded-lg shadow-md">
    </div>

    <!-- Text Content -->
    <p class="text-center">
        Our new branch in Dhaka has officially opened to serve customers with enhanced services.
    </p>

    </div>

  </div>
</div>

<!-- CSR -->
<div id="csr" class="tab-content hidden max-w-7xl mx-auto space-y-4">
  <div class="border rounded overflow-hidden">
    <button onclick="toggleAccordion(this)"
      class="w-full flex justify-between items-center px-5 py-4 bg-blue-100 hover:bg-blue-200 font-semibold">
      <span>Meeting Zonal Heads and Branch Managers</span>
      <span>+</span>
    </button>

     <div class="accordion-content hidden bg-white border-t px-5 py-4 text-gray-700">

    <!-- Optional Image -->
    <div class="mb-4 flex justify-center">
        <img src="./assets/logo/sommilito-logo.png" alt="Branch Image" class="w-64 h-40 object-cover rounded-lg shadow-md">
    </div>

    <!-- Text Content -->
    <p class="text-center">
        Our new branch in Dhaka has officially opened to serve customers with enhanced services.
    </p>

    </div>

  </div>
</div>

<!-- Meeting -->
<div id="meeting" class="tab-content hidden max-w-7xl mx-auto space-y-4">
  <div class="border rounded overflow-hidden">
    <button onclick="toggleAccordion(this)"
      class="w-full flex justify-between items-center px-5 py-4 bg-blue-100 hover:bg-blue-200 font-semibold">
      <span>Meeting MD, Zonal Heads and Branch Managers</span>
      <span>+</span>
    </button>

     <div class="accordion-content hidden bg-white border-t px-5 py-4 text-gray-700">

    <!-- Optional Image -->
    <div class="mb-4 flex justify-center">
        <img src="./assets/logo/sommilito-logo.png" alt="Branch Image" class="w-64 h-40 object-cover rounded-lg shadow-md">
    </div>

    <!-- Text Content -->
    <p class="text-center">
        Our new branch in Dhaka has officially opened to serve customers with enhanced services.
    </p>

    </div>

  </div>
</div>
<!-- Other tabs like Interview, Fair, CSR, Meeting can follow the same structure -->

</br>



<!-- JS -->
<script>
function showTab(e, tabId) {
  // hide all content
  document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
  // show selected content
  document.getElementById(tabId).classList.remove('hidden');
  // reset all buttons
  document.querySelectorAll('.tab-btn').forEach(btn => {
    btn.classList.remove('bg-teal-700','text-white');
    btn.classList.add('bg-white','text-gray-700','border');
  });
  // activate clicked button
  e.target.classList.remove('bg-white','text-gray-700','border');
  e.target.classList.add('bg-teal-700','text-white');
}

function toggleAccordion(btn) {
  const content = btn.nextElementSibling;
  content.classList.toggle('hidden');
  btn.querySelector('span:last-child').textContent = content.classList.contains('hidden') ? '+' : '-';
}
</script>


<?php include 'footer.php' ?>