海洋波浪横幅 Tailwind网站组件

<section class="relative bg-gradient-to-br from-cyan-500 to-blue-700 text-white rounded-3xl overflow-hidden">
            <div class="absolute inset-0 opacity-20">
                <svg class="absolute bottom-0 left-0 w-full h-24" viewBox="0 0 1200 120" fill="none">
                    <path d="M0,60 C300,120 600,0 900,60 C1050,90 1150,30 1200,60 L1200,120 L0,120 Z" fill="currentColor"></path>
                </svg>
            </div>
            <div class="relative px-6 py-18 sm:px-12 sm:py-24 lg:px-16">
                <div class="max-w-4xl">
                    <h1 class="text-4xl sm:text-6xl lg:text-7xl font-bold mb-6">
                        深海探险
                    </h1>
                    <p class="text-lg sm:text-xl mb-8 text-cyan-100 max-w-2xl">
                        潜入神秘的海洋世界，发现生命的奇迹
                    </p>
                    <div class="flex flex-col sm:flex-row gap-4">
                        <button class="bg-white text-blue-700 px-8 py-3 rounded-full font-semibold hover:bg-blue-50 transition-colors">
                            立即体验
                        </button>
                        <button class="border-2 border-white text-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-blue-700 transition-colors">
                            了解详情
                        </button>
                    </div>
                </div>
            </div>
        </section>