Product Split Hero

<div class="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
        <div>
            <h1 class="text-6xl font-black text-slate-900 leading-[1.1] mb-6">Built for the <br><span
                    class="text-indigo-600">modern builder.</span></h1>
            <p class="text-lg text-slate-600 mb-8 leading-relaxed">Stop wasting time on boilerplate. Get a head start
                with 500+ pre-designed components ready to be used in your next project.</p>
            <div class="flex gap-4">
                <button
                    class="bg-indigo-600 text-white px-8 py-4 rounded-xl font-bold shadow-xl shadow-indigo-100 hover:-translate-y-1 transition-all">Start
                    Free Trial</button>
                <button
                    class="bg-slate-100 text-slate-900 px-8 py-4 rounded-xl font-bold hover:bg-slate-200 transition-all">View
                    Docs</button>
            </div>
        </div>
        <div class="relative">
            <div
                class="absolute -inset-4 bg-gradient-to-tr from-indigo-500 to-purple-500 rounded-3xl blur-2xl opacity-20">
            </div>
            <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&q=80&w=800"
                alt="Dashboard" class="relative rounded-2xl shadow-2xl border border-slate-200">
        </div>
    </div>
    <script>
        document.querySelectorAll('button').forEach(btn => {
            btn.addEventListener('mousedown', function () { this.classList.add('scale-95'); });
            btn.addEventListener('mouseup', function () { this.classList.remove('scale-95'); });
        });
    </script>