竹林禅意横幅 Tailwind网站组件

<section class="relative bg-gradient-to-br from-green-50 to-emerald-100 text-gray-800 rounded-2xl">
            <div class="absolute inset-0 opacity-40">
                <svg class="absolute top-12 right-12 w-16 h-40 text-green-400" viewBox="0 0 40 100" fill="none">
                    <rect x="18" y="0" width="4" height="100" fill="currentColor"></rect>
                    <ellipse cx="12" cy="20" rx="8" ry="3" fill="currentColor"></ellipse>
                    <ellipse cx="28" cy="35" rx="8" ry="3" fill="currentColor"></ellipse>
                    <ellipse cx="15" cy="50" rx="8" ry="3" fill="currentColor"></ellipse>
                </svg>
                <svg class="absolute bottom-12 left-12 w-12 h-30 text-green-300" viewBox="0 0 40 100" fill="none">
                    <rect x="18" y="0" width="4" height="80" fill="currentColor"></rect>
                    <ellipse cx="12" cy="15" rx="8" ry="3" fill="currentColor"></ellipse>
                    <ellipse cx="28" cy="30" rx="8" ry="3" fill="currentColor"></ellipse>
                </svg>
            </div>
            <div class="relative px-6 py-20 sm:px-12 sm:py-28 lg:px-16">
                <div class="max-w-3xl">
                    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-light mb-6 text-green-800">
                        竹林深处
                    </h1>
                    <p class="text-lg sm:text-xl mb-8 text-green-700 max-w-2xl">
                        在翠竹摇曳中寻找内心的平静，体验东方禅意之美
                    </p>
                    <button class="bg-green-600 text-white px-8 py-4 rounded-full font-medium hover:bg-green-700 transition-colors">
                        静心体验
                    </button>
                </div>
            </div>
        </section>