Creative Process Steps Section with Image & Animations

<div
    class="relative overflow-hidden sm:px-10 lg:px-14 lg:py-14 bg-gradient-to-br from-gray-50 to-white ring-gray-200 ring-1 rounded-3xl pt-10 pr-6 pb-10 pl-6 max-w-6xl">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
        <div class="scroll-element fade-in-left animate-in">
            <p class="text-[11px] sm:text-xs uppercase font-light text-gray-500 tracking-widest mb-3">Process</p>
            <h2 class="sm:text-5xl text-3xl font-light text-gray-900 tracking-tighter mb-6">Our Creative Process</h2>
            <p class="text-xl text-gray-600 mb-8">We believe great design starts with understanding your vision and ends
                with exceeding your expectations.</p>

            <div class="space-y-6">
                <div class="flex items-start gap-4 scroll-element fade-in-up stagger-1 animate-in">
                    <div class="flex-shrink-0 w-8 h-8 rounded-full bg-coral-50 flex items-center justify-center">
                        <span class="text-coral-500 font-semibold text-sm">01</span>
                    </div>
                    <div class="">
                        <h3 class="font-semibold mb-2 text-gray-900">Discovery &amp; Strategy</h3>
                        <p class="text-gray-600">We dive deep into your brand, audience, and goals to create a solid
                            foundation.</p>
                    </div>
                </div>

                <div class="flex items-start gap-4 scroll-element fade-in-up stagger-2 animate-in">
                    <div class="flex-shrink-0 w-8 h-8 rounded-full bg-coral-50 flex items-center justify-center">
                        <span class="text-coral-500 font-semibold text-sm">02</span>
                    </div>
                    <div class="">
                        <h3 class="font-semibold mb-2 text-gray-900">Creative Development</h3>
                        <p class="text-gray-600">Our team crafts innovative concepts that bring your vision to life.</p>
                    </div>
                </div>

                <div class="flex items-start gap-4 scroll-element fade-in-up stagger-3 animate-in">
                    <div class="flex-shrink-0 w-8 h-8 rounded-full bg-coral-50 flex items-center justify-center">
                        <span class="text-coral-500 font-semibold text-sm">03</span>
                    </div>
                    <div class="">
                        <h3 class="font-semibold mb-2 text-gray-900">Execution &amp; Delivery</h3>
                        <p class="text-gray-600">We refine every detail to ensure pixel-perfect results that exceed
                            expectations.</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="relative scroll-element fade-in-right animate-in">
            <div
                class="aspect-square flex bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a7491ea5-1a7a-4f23-a5e0-d0f3c352111c_1600w.jpg)] bg-cover ring-1 ring-gray-200 rounded-2xl pt-8 pr-8 pb-8 pl-8 items-end justify-start">
                <div
                    class="max-w-md text-left bg-white/90 backdrop-blur-sm rounded-2xl pt-6 pr-6 pb-6 pl-6 ring-1 ring-gray-200/50">
                    <h3 class="text-2xl font-light tracking-tighter text-gray-900 mb-3">Creative Excellence</h3>
                    <p class="text-gray-700">Every project is a canvas for innovation and artistic expression.</p>
                </div>
            </div>
        </div>
    </div>
</div>