Animated Invoice Showcase Hero Section

<div class="max-w-7xl lg:px-8 mr-auto ml-auto pt-24 pr-6 pb-24 pl-6">
        <div class="grid grid-cols-1 items-center gap-16 lg:grid-cols-12">
          <div class="lg:col-span-5 opacity-0 animate-slide-in-left scroll-element" style="animation-play-state: running; opacity: 1;">
            <h2 class="text-4xl font-bold tracking-tight text-white sm:text-5xl">A delightful client experience</h2>
            <p class="mt-4 text-lg text-zinc-400">
              Share a secure link, track views, and offer one-click payment. Your clients see exactly what they need—nothing more.
            </p>
            <ul class="mt-8 space-y-3 text-sm text-zinc-300">
              <li class="flex items-start gap-3 opacity-0 animate-fade-in scroll-element" style="animation-delay: 0.2s; animation-play-state: running; opacity: 1;">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check mt-0.5 h-4 w-4 text-green-400"><path d="M20 6 9 17l-5-5"></path></svg>
                Custom domains and branding
              </li>
              <li class="flex items-start gap-3 opacity-0 animate-fade-in scroll-element" style="animation-delay: 0.4s; animation-play-state: running; opacity: 1;">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check mt-0.5 h-4 w-4 text-green-400"><path d="M20 6 9 17l-5-5"></path></svg>
                View and accept estimates as invoices
              </li>
              <li class="flex items-start gap-3 opacity-0 animate-fade-in scroll-element" style="animation-delay: 0.6s; animation-play-state: running; opacity: 1;">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check mt-0.5 h-4 w-4 text-green-400"><path d="M20 6 9 17l-5-5"></path></svg>
                Partial payments and deposits
              </li>
            </ul>
            <div class="mt-8 flex items-center gap-3 opacity-0 animate-slide-up scroll-element" style="animation-delay: 0.8s; animation-play-state: running; opacity: 1;">
              <a href="#" class="inline-flex items-center gap-2 rounded-md bg-white px-4 py-2 text-sm font-medium text-black transition hover:bg-zinc-100 hover:scale-105 transform" title="Link disabled in preview mode">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="eye" class="lucide lucide-eye w-4 h-4"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle></svg>
                Open sample invoice
              </a>
              <a href="#" class="inline-flex items-center gap-2 rounded-md border border-zinc-800 px-4 py-2 text-sm font-medium text-white transition hover:border-zinc-700 hover:bg-zinc-900 hover:scale-105 transform" title="Link disabled in preview mode">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="layout-template" class="lucide lucide-layout-template w-4 h-4"><rect width="18" height="7" x="3" y="3" rx="1"></rect><rect width="9" height="7" x="3" y="14" rx="1"></rect><rect width="5" height="7" x="16" y="14" rx="1"></rect></svg>
                Explore templates
              </a>
            </div>
          </div>

          <div class="lg:col-span-7 opacity-0 animate-slide-in-right scroll-element parallax-container" style="animation-play-state: running; transform: translateY(-9.48288px); opacity: 1;">
            <div class="relative rounded-xl border border-zinc-800 bg-zinc-950 p-6 hover:border-zinc-700 hover:shadow-2xl transition-all duration-700">
              <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
                <div class="lg:col-span-2">
                  <div class="rounded-lg border border-zinc-800 bg-zinc-900/50 p-4 hover:bg-zinc-900/70 transition-colors duration-500">
                    <div class="flex items-center justify-between mb-3">
                      <div class="text-sm font-medium text-white">Invoice to</div>
                      <div class="text-xs text-zinc-500 font-mono">INV-2024-118</div>
                    </div>
                    <div class="text-sm">
                      <div class="font-medium text-white">Lumen Works</div>
                      <div class="text-zinc-400">hello@lumen.works</div>
                    </div>
                    <div class="mt-4 rounded-md bg-black/50 border border-zinc-800 p-4 hover:border-zinc-700 transition-colors duration-300">
                      <div class="grid grid-cols-5 text-xs text-zinc-500 uppercase tracking-wider">
                        <div class="col-span-2">Item</div>
                        <div class="text-right">Qty</div>
                        <div class="text-right">Rate</div>
                        <div class="text-right">Amount</div>
                      </div>
                      <div class="mt-3 h-px w-full bg-zinc-800"></div>
                      <div class="mt-3 grid grid-cols-5 items-center text-sm hover:bg-zinc-800/50 rounded p-2 transition-colors duration-300">
                        <div class="col-span-2 text-zinc-300">Web Design</div>
                        <div class="text-right text-zinc-400">1</div>
                        <div class="text-right font-mono text-zinc-400">$2,200</div>
                        <div class="text-right font-mono text-white">$2,200</div>
                      </div>
                      <div class="mt-2 grid grid-cols-5 items-center text-sm hover:bg-zinc-800/50 rounded p-2 transition-colors duration-300">
                        <div class="col-span-2 text-zinc-300">Illustrations</div>
                        <div class="text-right text-zinc-400">3</div>
                        <div class="text-right font-mono text-zinc-400">$250</div>
                        <div class="text-right font-mono text-white">$750</div>
                      </div>
                      <div class="mt-4 h-px w-full bg-zinc-800"></div>
                      <div class="mt-3 space-y-2 text-sm">
                        <div class="flex items-center justify-between">
                          <span class="text-zinc-400">Subtotal</span>
                          <span class="font-mono text-zinc-300">$2,950</span>
                        </div>
                        <div class="flex items-center justify-between">
                          <span class="text-zinc-400">Tax (8%)</span>
                          <span class="font-mono text-zinc-300">$236</span>
                        </div>
                        <div class="flex items-center justify-between border-t border-zinc-800 pt-3">
                          <span class="font-medium text-white">Total due</span>
                          <span class="font-mono font-medium text-white">$3,186</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="space-y-4">
                  <div class="rounded-lg border border-zinc-800 bg-zinc-900/50 p-4 hover:bg-zinc-900/70 hover:scale-105 transition-all duration-500">
                    <div class="flex items-center justify-between mb-3">
                      <div class="text-sm font-medium text-white">Client view</div>
                      <span class="inline-flex items-center gap-1 rounded-full bg-blue-500/10 px-2 py-1 text-xs font-medium text-blue-400 border border-blue-500/20">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="eye" class="lucide lucide-eye w-3 h-3"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle></svg> Live
                      </span>
                    </div>
                    <p class="text-xs text-zinc-400 mb-4">Secure link with status tracking and instant payment.</p>
                    <div class="grid grid-cols-2 gap-2">
                      <button class="inline-flex items-center justify-center gap-1 rounded-md bg-white px-3 py-2 text-xs font-medium text-black transition hover:bg-zinc-100 hover:scale-105 transform">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="send" class="lucide lucide-send w-3 h-3"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"></path><path d="m21.854 2.147-10.94 10.939"></path></svg> Send
                      </button>
                      <button class="inline-flex items-center justify-center gap-1 rounded-md border border-zinc-800 px-3 py-2 text-xs font-medium text-white transition hover:border-zinc-700 hover:scale-105 transform">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="copy" class="lucide lucide-copy w-3 h-3"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg> Copy
                      </button>
                    </div>
                  </div>

                  <div class="rounded-lg border border-zinc-800 bg-zinc-900/50 p-4 hover:bg-zinc-900/70 hover:scale-105 transition-all duration-500">
                    <div class="flex items-center justify-between mb-3">
                      <div class="text-sm font-medium text-white">Payment</div>
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="credit-card" class="lucide lucide-credit-card w-4 h-4 text-zinc-400"><rect width="20" height="14" x="2" y="5" rx="2"></rect><line x1="2" x2="22" y1="10" y2="10"></line></svg>
                    </div>
                    <div class="text-sm">
                      <div class="flex items-center justify-between mb-3">
                        <span class="text-zinc-300 font-mono">Card •••• 4242</span>
                        <span class="font-mono text-white">$3,186.00</span>
                      </div>
                      <div class="flex items-center gap-2 text-xs text-zinc-500 mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="shield-check" class="lucide lucide-shield-check w-3 h-3"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path><path d="m9 12 2 2 4-4"></path></svg>
                        PSD2 &amp; SCA compliant
                      </div>
                      <button class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-green-600 px-3 py-2 text-xs font-medium text-white transition hover:bg-green-700 hover:scale-105 transform">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="lock" class="lucide lucide-lock w-3 h-3"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg> Pay securely
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>