Split Image Glass Hero

<div class="flex flex-col md:flex-row min-h-screen">
        <div class="w-full md:w-1/2 p-12 md:p-24 flex flex-col justify-center bg-indigo-50">
            <h1 class="text-5xl md:text-6xl font-black text-indigo-950 mb-6 leading-tight">Organize your <br>creative
                chaos.</h1>
            <p class="text-lg text-indigo-800/70 mb-10 max-w-md">One workspace for all your docs, projects, and
                high-fidelity prototypes.</p>
            <div class="flex flex-wrap gap-4">
                <button
                    class="bg-indigo-600 text-white px-8 py-4 rounded-2xl font-bold shadow-lg shadow-indigo-200 hover:bg-indigo-700 transition-all active:scale-95">Start
                    Building</button>
                <button
                    class="bg-white text-indigo-600 px-8 py-4 rounded-2xl font-bold border border-indigo-200 hover:bg-slate-50 transition-all active:scale-95">Watch
                    Intro</button>
            </div>
        </div>
        <div
            class="w-full md:w-1/2 bg-[url('https://images.unsplash.com/photo-1497215728101-856f4ea42174?auto=format&fit=crop&q=80&w=1200')] bg-cover bg-center relative min-h-[400px]">
            <div class="absolute inset-0 bg-indigo-900/10"></div>
            <div class="absolute bottom-10 left-10 glass-card p-6 rounded-3xl max-w-xs text-white shadow-2xl">
                <p class="text-sm font-bold mb-2 italic">"This changed how our team ships features."</p>
                <p class="text-[10px] opacity-70 uppercase tracking-widest">— Product Lead at Google</p>
            </div>
        </div>
    </div>