科技未来风格横幅 Tailwind网站组件

<section class="relative bg-gradient-to-br from-blue-900 via-purple-900 to-indigo-900 text-white overflow-hidden rounded-2xl">
            <div class="absolute inset-0 opacity-20">
                <div class="absolute top-10 left-10 w-2 h-2 bg-white rounded-full animate-pulse"></div>
                <div class="absolute top-32 right-20 w-1 h-1 bg-blue-300 rounded-full animate-ping delay-100"></div>
                <div class="absolute bottom-20 left-1/3 w-1.5 h-1.5 bg-purple-300 rounded-full animate-pulse delay-200"></div>
                <div class="absolute top-1/2 right-1/3 w-1 h-1 bg-white rounded-full animate-ping delay-300"></div>
            </div>
            <div class="relative px-6 py-20 sm:px-12 sm:py-32 lg:px-16">
                <div class="max-w-4xl mx-auto text-center">
                    <h1 class="text-4xl sm:text-6xl lg:text-7xl font-bold mb-6 bg-gradient-to-r from-white to-blue-200 bg-clip-text text-transparent">
                        未来科技
                    </h1>
                    <p class="text-lg sm:text-xl lg:text-2xl mb-8 text-blue-100">
                        探索无限可能，创造美好明天
                    </p>
                    <button class="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 px-8 py-4 rounded-full text-lg font-semibold transition-all duration-300 transform hover:scale-105 shadow-lg">
                        开始探索
                    </button>
                </div>
            </div>
        </section>