@props([
    'heading' => 'Ready to top up in seconds?',
    'description' => 'Create your free account and fund your wallet in under two minutes.',
])

<section class="mx-auto max-w-7xl px-4 pb-20 sm:px-6 lg:px-8">
    <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-brand-600 to-brand-800 px-8 py-16 text-center shadow-xl sm:px-16">
        <h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">{{ $heading }}</h2>
        <p class="mx-auto mt-4 max-w-xl text-brand-100">{{ $description }}</p>
        <div class="mt-8">
            <a
                href="{{ route('register') }}"
                class="inline-block rounded-full bg-white px-8 py-3.5 text-base font-semibold text-brand-700 shadow-lg transition hover:bg-brand-50"
            >
                Create free account
            </a>
        </div>
    </div>
</section>