Hero Travel Light

                <!--
@type: Hero
@industry: Travel
@style: Light
@category: Page Section, Content, Sale
@framework: Tailwind
@license: Free
-->

<style>
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(30px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .animate-fadeInUp {
    animation: fadeInUp 0.8s ease-out forwards;
  }

  .animate-slideInRight {
    animation: slideInRight 1s ease-out forwards;
  }

  .text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
</style>
</head>

<section class="bg-gradient-to-br from-emerald-50 via-gray-50 to-emerald-50 relative flex items-center justify-center overflow-hidden py-16 md:py-20">
  <!-- Background Decorative Elements -->
  <div class="absolute inset-0 overflow-hidden">
    <!-- Gradient overlays -->
    <div class="absolute top-0 right-0 w-96 h-96 bg-gradient-to-br from-emerald-100 to-transparent rounded-full opacity-30">
    </div>
    <div class="absolute bottom-0 left-0 w-80 h-80 bg-gradient-to-tr from-red-100 to-transparent rounded-full opacity-40">
    </div>
  </div>

  <!-- Main Content Container -->
  <div class="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
    <div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">

      <!-- Left Column - Content -->
      <div class="text-center lg:text-left">
        <!-- Badge -->
        <div
          class="inline-flex items-center px-4 py-2 bg-white/80 backdrop-blur-sm rounded-full shadow-lg mb-6 animate-fadeInUp border border-emerald-100">
          <span class="w-2 h-2 bg-red-500 rounded-full mr-2 animate-pulse"></span>
          <span class="text-sm font-medium text-gray-700">Discover Amazing Places</span>
        </div>

        <!-- Main Headline -->
        <h1
          class="text-4xl lg:text-6xl xl:text-7xl font-bold text-gray-900 mb-6 text-shadow animate-fadeInUp">
          Explore the
          <span class="text-emerald-600">World</span>
          <br>
          Like Never
          <span class="text-red-500">Before</span>
        </h1>

        <!-- Subtitle -->
        <p
          class="text-lg lg:text-xl text-gray-600 mb-8 max-w-lg mx-auto lg:mx-0 leading-relaxed animate-fadeInUp">
          Embark on unforgettable journeys to breathtaking destinations. Create memories that will last a lifetime
          with our curated travel experiences.
        </p>

        <!-- CTA Buttons -->
        <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start animate-fadeInUp">
          <button
            class="group px-8 py-4 bg-red-500 hover:bg-red-600 text-white font-semibold rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105">
            <span class="flex items-center justify-center">
              Start Your Journey
              <svg class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none"
                stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3">
                </path>
              </svg>
            </span>
          </button>

          <button
            class="px-8 py-4 bg-white/90 hover:bg-white text-gray-700 font-semibold rounded-full shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-200 hover:border-red-300">
            View Destinations
          </button>
        </div>

        <!-- Stats -->
        <div class="grid grid-cols-3 gap-8 mt-12 animate-fadeInUp">
          <div class="text-center">
            <div class="text-2xl lg:text-3xl font-bold text-gray-900">150+</div>
            <div class="text-sm text-gray-600">Destinations</div>
          </div>
          <div class="text-center">
            <div class="text-2xl lg:text-3xl font-bold text-gray-900">50K+</div>
            <div class="text-sm text-gray-600">Happy Travelers</div>
          </div>
          <div class="text-center">
            <div class="text-2xl lg:text-3xl font-bold text-gray-900">4.9★</div>
            <div class="text-sm text-gray-600">Average Rating</div>
          </div>
        </div>
      </div>

      <!-- Right Column - Visual Elements -->
      <div class="relative animate-slideInRight">
        <!-- Main Image Card -->
        <div class="relative bg-white rounded-3xl shadow-2xl p-6 card-hover">
          <div class="rounded-2xl overflow-hidden relative">
            <img src="https://landinggo.com/assets/img/stock/hero/travel-unsplash-1620x1080.webp" alt="Travel Image" loading="lazy">
            <!-- Floating Badge -->
            <div class="absolute top-4 right-4 bg-red-500 text-white px-3 py-1 rounded-full text-sm font-medium shadow-lg">
              Popular
            </div>
          </div>

          <!-- Card Content -->
          <div class="mt-4">
            <h3 class="text-lg font-semibold text-gray-900">Swiss Alps Experience</h3>
            <p class="text-gray-600 text-sm mt-1">7 Days • Adventure Tour</p>
            <div class="flex items-center justify-between mt-3">
              <span class="text-emerald-600 font-semibold">From $1,299</span>
              <div class="flex text-yellow-400">
                ★★★★★
              </div>
            </div>
          </div>
        </div>

        <!-- Floating Cards -->
        <div class="absolute -top-4 -left-4 bg-white rounded-2xl shadow-xl p-4">
          <div class="flex items-center space-x-3">
            <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
              <svg class="w-6 h-6 text-red-500" fill="currentColor" viewBox="0 0 24 24">
                <path
                  d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
              </svg>
            </div>
            <div>
              <div class="text-sm font-semibold text-gray-900">Premium Package</div>
              <div class="text-xs text-gray-600">All inclusive</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>