Cta Book Minimal

                <!--
@type: Call To Action (CTA)
@industry: Book
@style: Minimal
@category: Page Section, Content, Sale
@framework: Tailwind
@license: Free
-->

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

      <!-- Left Side - Visual Element -->
      <div class="relative">
        <!-- Decorative Background -->
        <div class="absolute inset-0 bg-amber-900 opacity-5 blur-3xl"></div>

        <!-- Quote Card -->
        <div class="relative bg-white border border-amber-900 p-12 space-y-8">
          <!-- Quote Mark -->
          <div class="text-amber-900 opacity-20">
            <svg class="w-16 h-16" fill="currentColor" viewBox="0 0 24 24">
              <path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z" />
            </svg>
          </div>

          <!-- Quote Text -->
          <blockquote class="space-y-6">
            <p class="text-2xl font-light text-amber-950 leading-relaxed">
              A masterpiece of quiet observation. Morrison's prose lingers in the mind long after the final page.
            </p>
            <div class="flex items-center gap-4 pt-4">
              <img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-4.webp" alt="Sarah Chen" class="w-12 h-12 object-cover rounded-full">
              <div>
                <p class="text-amber-950 font-light">Sarah Chen</p>
                <p class="text-amber-700 text-sm">The Literary Review</p>
              </div>
            </div>
          </blockquote>
        </div>
      </div>

      <!-- Right Side - CTA Content -->
      <div>
        <!-- Decorative Line -->
        <div class="flex items-center gap-4 mt-6 mb-2">
          <div class="w-16 h-px bg-amber-900"></div>
          <p class="text-amber-900 text-sm tracking-widest uppercase">Limited Edition</p>
        </div>

        <!-- Heading -->
        <div class="space-y-4">
          <h2 class="text-5xl font-light text-amber-950 leading-tight">
            Begin Your<br />Journey Today
          </h2>
          <p class="text-lg text-amber-800 leading-relaxed max-w-lg">
            Order your signed first edition copy and receive exclusive companion materials that illuminate the story's
            hidden depths.
          </p>
        </div>

        <!-- Price & CTA -->
        <div class="space-y-6">
          <div class="flex items-baseline gap-3">
            <span class="text-5xl font-light text-amber-950">$45</span>
            <span class="text-amber-700 text-lg line-through">$65</span>
            <span class="bg-amber-900 text-amber-50 px-3 py-1 text-sm">Save 30%</span>
          </div>

          <div class="flex flex-col sm:flex-row gap-4">
            <button
              class="bg-amber-900 text-amber-50 px-10 py-4 hover:bg-amber-800 transition-colors flex items-center justify-center gap-2 group">
              <span class="tracking-wide">Order Now</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>
            <button class="border border-amber-900 text-amber-900 px-10 py-4 hover:bg-amber-100 transition-colors">
              <span class="tracking-wide">Gift This Book</span>
            </button>
          </div>

          <!-- Trust Indicators -->
          <div class="flex items-center gap-6 pt-4 text-sm text-amber-700">
            <div class="flex items-center gap-2">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                  d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
              </svg>
              <span>Secure checkout</span>
            </div>
            <div class="flex items-center gap-2">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                  d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
              </svg>
              <span>Free shipping over $35</span>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>