<section id="tracking" class="py-20 bg-white"> <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-12" data-aos="fade-up"> <h2 id="tracking-heading" class="text-4xl font-extrabold text-primary-blue mb-4"> {{ 'tracking.heading'|trans }} </h2> <p id="tracking-subtext" class="text-xl text-gray-600"> {{ 'tracking.subtext'|trans }} </p> </div> <div class="bg-gradient-to-r from-primary-blue to-blue-600 rounded-2xl shadow-2xl p-8" data-aos="zoom-in"> <div class="flex flex-col md:flex-row items-center"> <div class="md:w-2/3 mb-6 md:mb-0 md:pr-8"> <h3 id="tracking-form-heading" class="text-2xl font-bold text-white mb-4"> {{ 'tracking.form_title'|trans }} </h3> <div class="flex"> <input type="text" placeholder="{{ 'tracking.placeholder'|trans }}" class="flex-grow px-4 py-3 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-gold"> <button id="track-button" class="bg-gold text-primary-blue font-bold px-6 py-3 rounded-r-lg hover:bg-yellow-600 transition duration-300"> <i class="fas fa-search mr-2"></i><span id="track-button-text">{{ 'tracking.button'|trans }}</span> </button> </div> <p id="tracking-note" class="text-gray-200 mt-4 text-sm"> <i class="fas fa-info-circle mr-2"></i> {{ 'tracking.note'|trans }} </p> </div> <div class="md:w-1/3 text-center"> <div class="inline-block p-4 bg-white/20 rounded-full"> <i class="fas fa-map-marker-alt text-white text-5xl"></i> </div> <p id="gps-tracking-text" class="text-white font-semibold mt-4"> {{ 'tracking.gps_available'|trans }} </p> </div> </div> </div> </div></section>