Steps E-commerce Modern

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

<section class="w-full py-12 md:py-24 bg-white">
  <div class="max-w-7xl mx-auto px-4 text-center">
    <div class="max-w-4xl mx-auto space-y-6">
      <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl md:text-5xl">
        Your Seamless Shopping Journey
      </h2>
      <p class="text-lg text-gray-600 md:text-xl">
        Experience effortless shopping with StyleHub in just a few simple steps.
      </p>
    </div>
    <div class="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
      <div
        class="bg-gray-50 p-8 rounded-xl border border-gray-200 shadow-md flex flex-col items-center text-center transition-all duration-300 hover:border-orange-500 hover:shadow-lg hover:scale-[1.02]">
        <div class="relative mb-6">
          <img alt="Step 1: Discover Your Favorites" loading="lazy" width="150" height="150" class="rounded-full object-cover border-4 border-orange-100"
          src="https://placehold.co/150x150">
          <div class="absolute -bottom-2 -right-2 bg-orange-500 text-white rounded-full h-10 w-10 flex items-center justify-center text-lg font-bold shadow-md">
            1
          </div>
        </div>
        <h3 class="text-2xl font-semibold text-gray-900 mb-2">Discover Your Favorites</h3>
        <p class="text-gray-600">Browse our extensive catalog or use smart filters to find exactly what you're looking for.</p>
      </div>
      <div
        class="bg-gray-50 p-8 rounded-xl border border-gray-200 shadow-md flex flex-col items-center text-center transition-all duration-300 hover:border-orange-500 hover:shadow-lg hover:scale-[1.02]">
        <div class="relative mb-6">
          <img alt="Step 2: Add to Cart &amp; Customize" loading="lazy" width="150" height="150" class="rounded-full object-cover border-4 border-orange-100"
          src="https://placehold.co/150x150">
          <div
            class="absolute -bottom-2 -right-2 bg-orange-500 text-white rounded-full h-10 w-10 flex items-center justify-center text-lg font-bold shadow-md">
            2
          </div>
        </div>
        <h3 class="text-2xl font-semibold text-gray-900 mb-2">Add to Cart &amp; Customize</h3>
        <p class="text-gray-600">Select your desired items, choose sizes or variations, and add them to your shopping
          cart.</p>
      </div>
      <div
        class="bg-gray-50 p-8 rounded-xl border border-gray-200 shadow-md flex flex-col items-center text-center transition-all duration-300 hover:border-orange-500 hover:shadow-lg hover:scale-[1.02]">
        <div class="relative mb-6"><img alt="Step 3: Secure &amp; Easy Checkout" loading="lazy" width="150" height="150"
            class="rounded-full object-cover border-4 border-orange-100"
            src="https://placehold.co/150x150">
          <div
            class="absolute -bottom-2 -right-2 bg-orange-500 text-white rounded-full h-10 w-10 flex items-center justify-center text-lg font-bold shadow-md">
            3
          </div>
        </div>
        <h3 class="text-2xl font-semibold text-gray-900 mb-2">Secure &amp; Easy Checkout</h3>
        <p class="text-gray-600">Complete your purchase with our secure and streamlined checkout process, offering
          multiple payment options.</p>
      </div>
      <div
        class="bg-gray-50 p-8 rounded-xl border border-gray-200 shadow-md flex flex-col items-center text-center transition-all duration-300 hover:border-orange-500 hover:shadow-lg hover:scale-[1.02]">
        <div class="relative mb-6"><img alt="Step 4: Receive &amp; Enjoy" loading="lazy" width="150" height="150"
            class="rounded-full object-cover border-4 border-orange-100"
            src="https://placehold.co/150x150">
          <div
            class="absolute -bottom-2 -right-2 bg-orange-500 text-white rounded-full h-10 w-10 flex items-center justify-center text-lg font-bold shadow-md">
            4
          </div>
        </div>
        <h3 class="text-2xl font-semibold text-gray-900 mb-2">Receive &amp; Enjoy</h3>
        <p class="text-gray-600">Your order will be delivered swiftly to your doorstep. Unbox and enjoy your new items!
        </p>
      </div>
    </div>
    <div class="mt-12">
      <button
        class="inline-flex items-center justify-center gap-2 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">
        Start Shopping Now
      </button>
    </div>
  </div>
</section>