3D Isometric Hero

<div class="max-w-7xl mx-auto px-6 py-20 min-h-screen flex items-center">
        <div class="grid lg:grid-cols-2 items-center gap-16 w-full">
            <div class="text-center lg:text-left">
                <h1 class="text-6xl font-black text-slate-900 mb-6 leading-tight">Software that <br><span
                        class="text-indigo-600 italic underline decoration-indigo-100 decoration-8">just works.</span>
                </h1>
                <p class="text-xl text-slate-500 mb-10 leading-relaxed max-w-xl mx-auto lg:mx-0">Ditch the spreadsheets.
                    Automated accounting for freelancers and small agencies.</p>
                <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
                    <input type="text" placeholder="Enter your domain"
                        class="bg-slate-100 px-6 py-4 rounded-xl outline-none focus:ring-2 focus:ring-indigo-500 w-full sm:w-64 border border-slate-200">
                    <button
                        class="bg-slate-900 text-white px-8 py-4 rounded-xl font-bold hover:bg-slate-800 transition-all active:scale-95 shadow-xl shadow-slate-200">Get
                        Started</button>
                </div>
            </div>
            <div class="relative hidden lg:block">
                <div class="grid grid-cols-2 gap-4 -rotate-12 translate-x-12 translate-y-12 opacity-80">
                    <div class="h-64 bg-indigo-600 rounded-3xl shadow-2xl shadow-indigo-200 animate-float"></div>
                    <div
                        class="h-64 bg-slate-900 rounded-3xl shadow-2xl shadow-slate-200 mt-12 animate-float [animation-delay:1s]">
                    </div>
                    <div class="h-64 bg-slate-100 rounded-3xl shadow-2xl -mt-12 animate-float [animation-delay:0.5s]">
                    </div>
                    <div class="h-64 bg-indigo-100 rounded-3xl shadow-2xl animate-float [animation-delay:1.5s]"></div>
                </div>
            </div>
        </div>
    </div>