App Showcase Hero

<div class="py-20 overflow-hidden">
        <div class="max-w-7xl mx-auto px-6 text-center">
            <h1 class="text-4xl md:text-6xl font-extrabold text-slate-900 mb-6 tracking-tight leading-tight">Manage
                finances <br>without the headache.</h1>
            <p class="max-w-2xl mx-auto text-slate-500 mb-12 text-lg">The all-in-one banking solution for the creator
                economy.</p>
            <div class="relative max-w-4xl mx-auto">
                <div
                    class="absolute -top-20 left-1/2 -translate-x-1/2 w-[120%] h-60 bg-indigo-600/10 blur-[120px] rounded-full">
                </div>
                <div
                    class="relative bg-white border-8 border-slate-900 rounded-[3rem] shadow-[0_40px_100px_-20px_rgba(0,0,0,0.3)] overflow-hidden aspect-[16/10]">
                    <div class="h-10 bg-slate-900 flex items-center gap-2 px-6">
                        <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                        <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                        <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                    </div>
                    <div class="p-10 grid grid-cols-3 gap-8 text-left h-full">
                        <div class="col-span-2 space-y-8">
                            <div class="h-14 bg-slate-50 rounded-2xl w-3/4 animate-pulse"></div>
                            <div class="grid grid-cols-2 gap-6">
                                <div
                                    class="h-40 bg-indigo-50 rounded-2xl border border-indigo-100 flex flex-col justify-end p-4">
                                    <div class="h-4 w-12 bg-indigo-200 rounded-full mb-2"></div>
                                    <div class="h-6 w-20 bg-indigo-600 rounded-full"></div>
                                </div>
                                <div
                                    class="h-40 bg-emerald-50 rounded-2xl border border-emerald-100 flex flex-col justify-end p-4">
                                    <div class="h-4 w-12 bg-emerald-200 rounded-full mb-2"></div>
                                    <div class="h-6 w-20 bg-emerald-600 rounded-full"></div>
                                </div>
                            </div>
                        </div>
                        <div class="space-y-6">
                            <div class="h-full bg-slate-50 rounded-3xl border border-slate-100 p-6">
                                <div class="space-y-4">
                                    <div class="h-4 bg-slate-200 rounded-full w-full"></div>
                                    <div class="h-4 bg-slate-200 rounded-full w-5/6"></div>
                                    <div class="h-4 bg-slate-200 rounded-full w-2/3"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>