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

Open in your IDE?
  1. <section id="home" class="relative overflow-hidden">
  2.     <div class="hero-gradient py-20 md:py-32">
  3.         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  4.             <div class="grid md:grid-cols-2 gap-12 items-center">
  5.                 <div data-aos="fade-right" data-aos-duration="1000">
  6.                     <h1 class="text-4xl md:text-6xl font-extrabold text-white mb-6 leading-tight">
  7.                         <span id="hero-title-part1">{{ 'hero.title_part1'|trans }}</span>
  8.                         <span class="text-gold" id="hero-title-part2">{{ 'hero.title_part2'|trans }}</span>
  9.                     </h1>
  10.                     <p id="hero-subtext" class="text-xl text-gray-200 mb-8">
  11.                         {{ 'hero.subtext'|trans }}
  12.                     </p>
  13.                     <div class="flex flex-wrap gap-4">
  14.                         <a href="#request-order" class="inline-flex items-center px-6 py-3 bg-red text-white font-bold rounded-lg shadow-lg hover:bg-red-dark transition duration-300 transform hover:scale-105">
  15.                             <i class="fas fa-shipping-fast mr-2"></i>
  16.                             <span id="request-order-cta">{{ 'hero.cta.quote'|trans }}</span>
  17.                         </a>
  18.                         <a href="#company-profile" class="inline-flex items-center px-6 py-3 bg-gold text-primary-blue font-bold rounded-lg shadow-lg hover:bg-yellow-600 transition duration-300 transform hover:scale-105">
  19.                             <i class="fas fa-building mr-2"></i>
  20.                             <span id="company-profile-cta">{{ 'hero.cta.profile'|trans }}</span>
  21.                         </a>
  22.                         <a href="#afi-business" class="inline-flex items-center px-6 py-3 bg-green text-white font-bold rounded-lg shadow-lg hover:bg-green-dark transition duration-300 transform hover:scale-105">
  23.                             <i class="fas fa-store mr-2"></i>
  24.                             <span id="afi-business-cta">{{ 'hero.cta.business'|trans }}</span>
  25.                         </a>
  26.                     </div>
  27.                 </div>
  28.                 <div data-aos="fade-left" data-aos-duration="1000" class="relative">
  29.                     <div class="relative z-10 float-animation">
  30.                         <div class="bg-white rounded-2xl shadow-2xl p-2 transform rotate-1">
  31.                             <img src="https://aficargo.com/H.png"
  32.                                  alt="{{ 'nav.home'|trans }}"
  33.                                  class="rounded-xl w-full h-64 md:h-80 object-cover">
  34.                         </div>
  35.                     </div>
  36.                     <div class="absolute -top-4 -right-4 w-24 h-24 bg-gold rounded-full opacity-20"></div>
  37.                     <div class="absolute -bottom-4 -left-4 w-32 h-32 bg-primary-blue rounded-full opacity-20"></div>
  38.                 </div>
  39.             </div>
  40.         </div>
  41.     </div>
  43.     <div class="bg-white shadow-xl -mb-8 relative z-10 max-w-5xl mx-auto rounded-xl p-6 transform -translate-y-1/2">
  44.         <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
  45.             <div class="text-center" data-aos="zoom-in" data-aos-delay="100">
  46.                 <div class="stat-number text-4xl font-bold mb-2">15+</div>
  47.                 <p id="stat-years" class="text-gray-600 font-medium">{{ 'stats.years'|trans }}</p>
  48.             </div>
  49.             <div class="text-center" data-aos="zoom-in" data-aos-delay="200">
  50.                 <div class="stat-number text-4xl font-bold mb-2">6+</div>
  51.                 <p id="stat-countries" class="text-gray-600 font-medium">{{ 'stats.countries'|trans }}</p>
  52.             </div>
  53.             <div class="text-center" data-aos="zoom-in" data-aos-delay="300">
  54.                 <div class="stat-number text-4xl font-bold mb-2">15K+</div>
  55.                 <p id="stat-shipments" class="text-gray-600 font-medium">{{ 'stats.shipments'|trans }}</p>
  56.             </div>
  57.             <div class="text-center" data-aos="zoom-in" data-aos-delay="400">
  58.                 <div class="stat-number text-4xl font-bold mb-2">99%</div>
  59.                 <p id="stat-delivery" class="text-gray-600 font-medium">{{ 'stats.delivery'|trans }}</p>
  60.             </div>
  61.         </div>
  62.     </div>
  63. </section>