<section class="pt-20 md:pt-40 bg-gray-900 overflow-hidden">
<div class="container px-4 mx-auto mb-20">
<div class="text-center mb-24 md:mb-32">
<div class="inline-flex items-center mb-8">
<span class="block w-2 h-2 mr-2 rounded-full bg-blue-500"></span>
<span class="uppercase text-sm text-gray-200 font-medium">FEATURES</span>
</div>
<h1 class="text-5xl sm:text-7xl md:text-8xl font-heading font-semibold text-white">Create podcast every day</h1>
</div>
<div class="flex flex-wrap -mx-4">
<div class="w-full lg:w-1/2 px-4 mb-20 lg:mb-0">
<div>
<img class="w-full max-w-lg 2xl:max-w-2xl mx-auto" src="suncealand-assets/images/features-frame1.png" alt="">
</div>
</div>
<div class="w-full lg:w-1/2 px-4 2xl:pt-16">
<div class="relative max-w-lg mx-auto 2xl:mx-0 2xl:max-w-2xl mb-12 md:mb-16 px-7 pb-12 pt-9 border border-gray-800 rounded-xl">
<div class="absolute top-0 left-0 transform -translate-y-1/2 px-5 h-1 w-full pt-px">
<div class="h-full bg-blue-500"></div>
</div>
<div class="flex">
<span class="flex-shrink-0 inline-block mt-4 mr-8 w-3 h-3 bg-yellow-500 rounded-full"></span>
<div>
<h4 class="font-heading text-3xl sm:text-4xl text-white font-semibold mb-6">Comfort like you've never experienced before.</h4>
<p class="text-gray-200">The house by the pond cras ornare.</p>
</div>
</div>
</div>
<div class="max-w-lg mx-auto 2xl:mx-0 2xl:max-w-2xl mb-12 md:mb-20 px-7">
<div class="flex">
<span class="flex-shrink-0 inline-block mt-4 mr-8 w-3 h-3 bg-yellow-500 rounded-full"></span>
<div>
<h4 class="font-heading text-3xl sm:text-4xl text-white font-semibold">Create great podcasts</h4>
</div>
</div>
</div>
<div class="max-w-lg mx-auto 2xl:mx-0 2xl:max-w-2xl px-7">
<div class="flex">
<span class="flex-shrink-0 inline-block mt-4 mr-8 w-3 h-3 bg-yellow-500 rounded-full"></span>
<div>
<h4 class="font-heading text-3xl sm:text-4xl text-white font-semibold">Make every day feel like Sunday</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="relative pt-16 pb-18">
<div class="container px-4 mx-auto">
<img class="absolute top-0 left-0 h-full w-full object-cover lg:object-fill" src="suncealand-assets/background/circles-bottom.svg" alt="">
<div class="animate-moving relative flex items-center justify-between">
<span class="relative flex-shrink-0 inline-block mr-8 md:mr-20 lg:mr-40 uppercase text-sm font-medium">
<span class="absolute top-0 left-0 text-gray-200">Online Platform</span>
<span class="bg-clip-text bg-gradient-to-br from-indigo-800 to-gray-200 text-transparent relative z-10 animate-pulse">Online Platform</span>
</span>
<span class="relative flex-shrink-0 inline-block mr-8 md:mr-20 lg:mr-40 uppercase text-sm font-medium">
<span class="absolute top-0 left-0 text-gray-200">Everything youd need to podcasts</span>
<span class="bg-clip-text bg-gradient-to-br from-indigo-800 to-gray-200 text-transparent relative z-10 animate-pulse">Everything youd need to podcasts</span>
</span>
<span class="relative flex-shrink-0 inline-block mr-8 md:mr-20 lg:mr-40 uppercase text-sm font-medium">
<span class="absolute top-0 left-0 text-gray-200">COLLABORATION</span>
<span class="bg-clip-text bg-gradient-to-br from-indigo-800 to-gray-200 text-transparent relative z-10 animate-pulse">COLLABORATION</span>
</span>
<span class="relative flex-shrink-0 inline-block mr-8 md:mr-20 lg:mr-40 uppercase text-sm font-medium">
<span class="absolute top-0 left-0 text-gray-200">Perfect quality</span>
<span class="bg-clip-text bg-gradient-to-br from-indigo-800 to-gray-200 text-transparent relative z-10 animate-pulse">Perfect quality</span>
</span>
<span class="relative flex-shrink-0 inline-block mr-8 md:mr-20 lg:mr-40 uppercase text-sm font-medium">
<span class="absolute top-0 left-0 text-gray-200">NEW APP</span>
<span class="bg-clip-text bg-gradient-to-br from-indigo-800 to-gray-200 text-transparent relative z-10 animate-pulse">NEW APP</span>
</span>
<span class="relative flex-shrink-0 inline-block uppercase text-sm font-medium">
<span class="absolute top-0 left-0 text-gray-200">MORE and more and more</span>
<span class="bg-clip-text bg-gradient-to-br from-indigo-800 to-gray-200 text-transparent relative z-10 animate-pulse">MORE and more and more</span>
</span>
</div>
</div>
</div>
</section>