服务流程步骤 Tailwind网站组件

<section class="py-16">
            <div class="max-w-4xl mx-auto">
                <div class="text-center mb-16">
                    <h2 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">服务流程</h2>
                    <p class="text-lg text-gray-600">标准化服务流程，确保项目顺利进行</p>
                </div>
                <div class="relative">
                    <div class="absolute left-8 top-0 bottom-0 w-0.5 bg-gray-200"></div>
                    <div class="space-y-12">
                        <div class="relative flex items-start">
                            <div class="flex-shrink-0 w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold text-lg relative z-10">
                                1
                            </div>
                            <div class="ml-8">
                                <h3 class="text-xl font-semibold text-gray-900 mb-2">需求沟通</h3>
                                <p class="text-gray-600">深入了解您的需求，制定初步解决方案</p>
                                <div class="mt-4 bg-blue-50 rounded-lg p-4">
                                    <p class="text-sm text-blue-800">详细需求分析 • 可行性评估 • 初步方案设计</p>
                                </div>
                            </div>
                        </div>
                        <div class="relative flex items-start">
                            <div class="flex-shrink-0 w-16 h-16 bg-green-600 rounded-full flex items-center justify-center text-white font-bold text-lg relative z-10">
                                2
                            </div>
                            <div class="ml-8">
                                <h3 class="text-xl font-semibold text-gray-900 mb-2">方案确认</h3>
                                <p class="text-gray-600">确定最终实施方案，签署合作协议</p>
                                <div class="mt-4 bg-green-50 rounded-lg p-4">
                                    <p class="text-sm text-green-800">方案细化 • 时间规划 • 合同签署</p>
                                </div>
                            </div>
                        </div>
                        <div class="relative flex items-start">
                            <div class="flex-shrink-0 w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center text-white font-bold text-lg relative z-10">
                                3
                            </div>
                            <div class="ml-8">
                                <h3 class="text-xl font-semibold text-gray-900 mb-2">项目实施</h3>
                                <p class="text-gray-600">专业团队执行项目，定期汇报进度</p>
                                <div class="mt-4 bg-purple-50 rounded-lg p-4">
                                    <p class="text-sm text-purple-800">项目开发 • 进度跟踪 • 质量控制</p>
                                </div>
                            </div>
                        </div>
                        <div class="relative flex items-start">
                            <div class="flex-shrink-0 w-16 h-16 bg-orange-600 rounded-full flex items-center justify-center text-white font-bold text-lg relative z-10">
                                4
                            </div>
                            <div class="ml-8">
                                <h3 class="text-xl font-semibold text-gray-900 mb-2">交付验收</h3>
                                <p class="text-gray-600">项目交付，用户验收，提供使用培训</p>
                                <div class="mt-4 bg-orange-50 rounded-lg p-4">
                                    <p class="text-sm text-orange-800">成果交付 • 验收测试 • 培训支持</p>
                                </div>
                            </div>
                        </div>
                        <div class="relative flex items-start">
                            <div class="flex-shrink-0 w-16 h-16 bg-teal-600 rounded-full flex items-center justify-center text-white font-bold text-lg relative z-10">
                                5
                            </div>
                            <div class="ml-8">
                                <h3 class="text-xl font-semibold text-gray-900 mb-2">售后服务</h3>
                                <p class="text-gray-600">持续技术支持，定期维护更新</p>
                                <div class="mt-4 bg-teal-50 rounded-lg p-4">
                                    <p class="text-sm text-teal-800">技术支持 • 系统维护 • 功能升级</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>