Hero E-commerce Modern

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

<section class="w-full bg-white">
  <div class="max-w-7xl mx-auto px-4">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center py-12 lg:py-24">
      <div class="flex flex-col justify-center space-y-8">
        <div class="space-y-4">
          <div class="inline-block">
            <span class="inline-flex items-center rounded-full bg-orange-100 px-3 py-1 text-sm font-medium text-orange-700">
              ✅ New Collection
            </span>
          </div>
          <h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl xl:text-7xl/none">
            Discover Your<span class="block text-orange-500">Perfect Style</span>
          </h1>
          <p class="max-w-[600px] text-xl text-gray-600 leading-relaxed">
            Explore our curated collection of premium fashion pieces designed for the
            modern lifestyle. Quality craftsmanship meets contemporary design.
          </p>
        </div>
        <div class="flex flex-col gap-4 min-[400px]:flex-row">
          <button data-slot="button"
            class="inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-lg text-lg font-semibold text-white bg-orange-500 hover:bg-orange-600 transition duration-150 ease-in-out cursor-pointer hover:shadow-lg">
            Shop Now
          </button>
          <button data-slot="button"
            class="inline-flex items-center justify-center px-6 py-3 border-2 border-gray-200 rounded-lg text-lg font-semibold text-gray-700 hover:bg-gray-50 transition duration-150 ease-in-out cursor-pointer hover:shadow-lg">
            View Lookbook
          </button>
        </div>
        <div class="flex items-center gap-8 pt-4">
          <div class="text-center">
            <div class="text-2xl font-bold text-gray-900">50K+</div>
            <div class="text-sm text-gray-600">Happy Customers</div>
          </div>
          <div class="text-center">
            <div class="text-2xl font-bold text-gray-900">1000+</div>
            <div class="text-sm text-gray-600">Products</div>
          </div>
          <div class="text-center">
            <div class="text-2xl font-bold text-gray-900">4.9★</div>
            <div class="text-sm text-gray-600">Rating</div>
          </div>
        </div>
      </div>
      <div class="relative lg:order-last">
        <div class="relative">
          <img alt="Fashion model showcasing modern clothing collection" width="600" height="400" decoding="async"
            data-nimg="1" class="w-full h-auto rounded-2xl shadow-2xl object-cover"
            src="https://landinggo.com/assets/img/stock/hero/marketing-pexels-1620x1080.webp" loading="lazy" />
          <div class="absolute -bottom-6 -left-6 bg-white rounded-xl p-4 shadow-lg border">
            <div class="flex items-center gap-3">
              <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center">
                <span class="text-orange-600 font-bold">✓</span>
              </div>
              <div>
                <div class="font-semibold text-gray-900">Free Shipping</div>
                <div class="text-sm text-gray-600">On orders over $100</div>
              </div>
            </div>
          </div>
          <div class="absolute -top-6 -right-2 bg-orange-500 text-white rounded-xl p-4 shadow-lg">
            <div class="text-center">
              <div class="text-2xl font-bold">30%</div>
              <div class="text-sm">OFF</div>
            </div>
          </div>
        </div>

        <!-- Customer testimonial -->
        <div class="mt-16 max-w-4xl mx-auto">
          <div class="flex flex-col md:flex-row gap-6 items-center">
            <div class="flex-shrink-0">
              <!-- Customer image -->
              <img 
                src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-1.webp" 
                alt="Customer testimonial" 
                class="w-16 h-16 rounded-full border-4 border-orange-300"
                width="40" 
                height="40"
                loading="lazy"
              >
            </div>
            <div>
              <p class="text-gray-600 mb-4">"This platform has completely transformed how we approach product development."</p>
              <div>
                <p class="font-medium text-gray-800">Sarah Johnson
                  <span class="text-sm text-gray-500">- Product Director, TechSolutions Inc.</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>