templates/partials/partialsHome/_offices.html.twig line 1

Open in your IDE?
  1. <section id="offices" class="py-20 bg-white">
  2.     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  3.         <div class="text-center mb-12" data-aos="fade-up">
  4.             <h2 id="offices-heading" class="text-4xl font-extrabold text-primary-blue mb-4">
  5.                 {{ 'offices.heading'|trans }}
  6.             </h2>
  7.             <p id="offices-subtext" class="text-xl text-gray-600">
  8.                 {{ 'offices.subtext'|trans }}
  9.             </p>
  10.         </div>
  12.         <div class="mb-8 flex justify-center">
  13.             <div class="inline-flex overflow-hidden rounded-lg border border-gray-300">
  14.                 <button id="office-map-btn" class="px-6 py-3 bg-primary-blue text-white font-semibold">
  15.                     <i class="fas fa-map-marked-alt mr-2"></i><span id="map-view-text">{{ 'offices.view.map'|trans }}</span>
  16.                 </button>
  17.                 <button id="office-list-btn" class="px-6 py-3 bg-gray-100 text-gray-700 font-semibold hover:bg-gray-200">
  18.                     <i class="fas fa-list mr-2"></i><span id="list-view-text">{{ 'offices.view.list'|trans }}</span>
  19.                 </button>
  20.             </div>
  21.         </div>
  23.         <div class="mb-8" data-aos="fade-up">
  24.             <h3 id="select-country-heading" class="text-2xl font-bold text-primary-blue mb-4 text-center">{{ 'offices.select_country'|trans }}</h3>
  25.             <div class="flex flex-wrap justify-center gap-3" id="country-selector">
  26.             </div>
  27.         </div>
  29.         <div id="selected-region-info" class="mb-8 p-8 rounded-xl shadow-xl bg-gradient-to-r from-blue-50 to-white border-l-4 border-primary-blue" data-aos="fade-up">
  30.             <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
  31.                 <div>
  32.                     <div class="flex items-center mb-2">
  33.                         <img id="office-country-flag" src="https://flagcdn.com/ug.svg" alt="Flag" class="flag-icon mr-3">
  34.                         <h3 class="text-3xl font-bold text-primary-blue">
  35.                             <span id="office-region-title">UGANDA</span>
  36.                         </h3>
  37.                     </div>
  38.                     <p id="office-region-meta" class="text-lg text-gray-600">
  39.                     </p>
  40.                 </div>
  41.                 <div class="mt-4 md:mt-0">
  42.                     <button id="contact-office-btn" class="px-6 py-2 bg-gold text-primary-blue font-bold rounded-lg hover:bg-yellow-600 transition duration-300">
  43.                         <i class="fas fa-phone-alt mr-2"></i><span id="contact-office-text">{{ 'offices.contact_btn'|trans }}</span>
  44.                     </button>
  45.                 </div>
  46.             </div>
  48.             <div id="office-locations-container" class="grid grid-cols-1 lg:grid-cols-2 gap-6">
  49.             </div>
  51.             <div id="office-gallery-section" class="mt-8 pt-8 border-t-2 border-gray-200">
  52.                 <div class="flex items-center mb-6">
  53.                     <h3 class="text-2xl font-bold text-primary-blue flex items-center">
  54.                         <i class="fas fa-images mr-3 text-gold"></i>
  55.                         <span id="office-gallery-heading">{{ 'offices.gallery.heading'|trans }}</span>
  56.                         <span id="gallery-total-count" class="ml-3 image-count-badge">0 images</span>
  57.                     </h3>
  58.                 </div>
  60.                 <div id="office-town-tabs" class="office-gallery-tabs"></div>
  61.                 <div id="office-gallery-container" class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4 mt-6"></div>
  63.                 <div id="office-empty-gallery" class="text-center py-8 hidden">
  64.                     <div class="inline-block p-4 bg-gray-100 rounded-full mb-3">
  65.                         <i class="fas fa-images text-3xl text-gray-400"></i>
  66.                     </div>
  67.                     <h4 id="office-no-images-heading" class="text-lg font-semibold text-gray-600 mb-2">{{ 'offices.gallery.empty_heading'|trans }}</h4>
  68.                     <p id="office-no-images-text" class="text-gray-500">{{ 'offices.gallery.empty_text'|trans }}</p>
  69.                 </div>
  71.                 <div class="text-center mt-6" id="office-load-more-container">
  72.                     <button id="office-load-more-gallery" class="inline-flex items-center px-6 py-2 bg-gold text-primary-blue font-semibold rounded-lg hover:bg-yellow-600 transition duration-300">
  73.                         <i class="fas fa-sync-alt mr-2"></i>
  74.                         <span id="office-load-more-text">{{ 'offices.gallery.load_more'|trans }}</span>
  75.                     </button>
  76.                 </div>
  77.             </div>
  78.         </div>
  80.         <div class="text-center" data-aos="fade-up">
  81.             <p id="offices-footer-text" class="text-lg text-gray-500">
  82.                 {{ 'offices.footer_text'|trans }}
  83.             </p>
  84.         </div>
  85.     </div>
  86. </section>