Component:
Steps Book Minimal

Name: Steps Book Minimal
Availability: InStock
Free
Tailwind
React
Vue
Svelte
Astro
Tags: Steps Page Section Sale Book Minimal
Colors:
Description:
This carefully crafted Steps component is perfect for Book landing pages, featuring a Minimal design that looks great and converts well.
Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.

                <!--
@type: Steps
@industry: Book
@style: Minimal
@category: Page Section, Sale
@framework: Tailwind
@license: Free
-->

<section class="bg-amber-50 py-24">
  <div class="max-w-7xl mx-auto px-6">
    <div class="grid md:grid-cols-2 gap-16">

      <!-- Left Side - Introduction -->
      <div class="space-y-8">
        <!-- Decorative Element -->
        <div class="flex items-center gap-4">
          <div class="w-16 h-px bg-amber-900"></div>
          <p class="text-amber-900 text-sm tracking-widest uppercase">How It Works</p>
        </div>

        <!-- Heading -->
        <div class="space-y-4">
          <h2 class="text-5xl md:text-6xl font-light text-amber-950 leading-tight">
            Your Journey<br />to Ownership
          </h2>
          <p class="text-xl text-amber-800 leading-relaxed max-w-md">
            From selection to your bookshelf, we've made acquiring your perfect edition simple and seamless.
          </p>
        </div>

        <!-- Call to Action -->
        <div class="pt-4">
          <button
            class="bg-amber-900 text-amber-50 px-10 py-4 hover:bg-amber-800 transition-colors flex items-center gap-2 group">
            <span class="tracking-wide">Start Your Order</span>
            <svg class="w-5 h-5 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" />
            </svg>
          </button>
        </div>
      </div>

      <!-- Right Side - Steps -->
      <div class="space-y-8">

        <!-- Step 1 -->
        <div class="flex gap-6 group">
          <!-- Number -->
          <div class="flex-shrink-0">
            <div
              class="w-16 h-16 border-2 border-amber-900 flex items-center justify-center group-hover:bg-amber-900 transition-colors">
              <span class="text-3xl font-light text-amber-900 group-hover:text-amber-50 transition-colors">1</span>
            </div>
          </div>

          <!-- Content -->
          <div class="space-y-3 pt-2">
            <h3 class="text-2xl font-light text-amber-950">Choose Your Edition</h3>
            <p class="text-amber-800 leading-relaxed">
              Select between our Standard paperback for everyday reading or the premium Collector's edition with
              hand-signed authenticity and archival quality.
            </p>
            <!-- Progress Line -->
            <div class="w-full h-px bg-amber-200 mt-8"></div>
          </div>
        </div>

        <!-- Step 2 -->
        <div class="flex gap-6 group">
          <!-- Number -->
          <div class="flex-shrink-0">
            <div
              class="w-16 h-16 border-2 border-amber-900 flex items-center justify-center group-hover:bg-amber-900 transition-colors">
              <span class="text-3xl font-light text-amber-900 group-hover:text-amber-50 transition-colors">2</span>
            </div>
          </div>

          <!-- Content -->
          <div class="space-y-3 pt-2">
            <h3 class="text-2xl font-light text-amber-950">Personalize Your Order</h3>
            <p class="text-amber-800 leading-relaxed">
              Add gift wrapping, include a personalized message, or request special delivery instructions. We
              accommodate your unique needs with care.
            </p>
            <!-- Progress Line -->
            <div class="w-full h-px bg-amber-200 mt-8"></div>
          </div>
        </div>

        <!-- Step 3 -->
        <div class="flex gap-6 group">
          <!-- Number -->
          <div class="flex-shrink-0">
            <div
              class="w-16 h-16 border-2 border-amber-900 flex items-center justify-center group-hover:bg-amber-900 transition-colors">
              <span class="text-3xl font-light text-amber-900 group-hover:text-amber-50 transition-colors">3</span>
            </div>
          </div>

          <!-- Content -->
          <div class="space-y-3 pt-2">
            <h3 class="text-2xl font-light text-amber-950">Secure Checkout</h3>
            <p class="text-amber-800 leading-relaxed">
              Complete your purchase with confidence using our encrypted payment system. We accept all major credit
              cards, PayPal, and digital wallets.
            </p>
            <!-- Progress Line -->
            <div class="w-full h-px bg-amber-200 mt-8"></div>
          </div>
        </div>

        <!-- Step 4 -->
        <div class="flex gap-6 group">
          <!-- Number -->
          <div class="flex-shrink-0">
            <div
              class="w-16 h-16 border-2 border-amber-900 flex items-center justify-center group-hover:bg-amber-900 transition-colors">
              <span class="text-3xl font-light text-amber-900 group-hover:text-amber-50 transition-colors">4</span>
            </div>
          </div>

          <!-- Content -->
          <div class="space-y-3 pt-2">
            <h3 class="text-2xl font-light text-amber-950">We Prepare & Ship</h3>
            <p class="text-amber-800 leading-relaxed">
              Your book is carefully packaged to ensure pristine arrival. Collector's editions receive additional
              protective wrapping and expedited handling.
            </p>
            <!-- Progress Line -->
            <div class="w-full h-px bg-amber-200 mt-8"></div>
          </div>
        </div>

        <!-- Step 5 -->
        <div class="flex gap-6 group">
          <!-- Number -->
          <div class="flex-shrink-0">
            <div class="w-16 h-16 bg-amber-900 flex items-center justify-center">
              <svg class="w-8 h-8 text-amber-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
              </svg>
            </div>
          </div>

          <!-- Content -->
          <div class="space-y-3 pt-2">
            <h3 class="text-2xl font-light text-amber-950">Enjoy Your Book</h3>
            <p class="text-amber-800 leading-relaxed">
              Your literary treasure arrives ready to be cherished. Open the pages and begin your journey through "The
              Silent Garden."
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
Steps Book Minimal

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions
