<section class="py-20 md:py-40 bg-gray-900 overflow-hidden">
<div class="container px-4 mx-auto">
<div class="max-w-4xl mx-auto text-center mb-24">
<h1 class="text-5xl sm:text-7xl md:text-8xl font-heading font-semibold text-white mb-12">Cloud backup solutions for you</h1>
<p class="text-2xl text-gray-200">Record your audio and upload it now.</p>
</div>
<div class="max-w-2xl mx-auto mb-24">
<div class="flex flex-wrap items-center -mx-4">
<div class="w-full md:w-1/3 px-4 mb-8 md:mb-0">
<div class="h-56 max-w-2xs mx-auto px-8 pt-10 bg-gray-800 rounded-2xl">
<img class="mb-10" src="suncealand-assets/logos/slack-logo.svg" alt="">
<h4 class="text-2xl font-medium text-white">Slack</h4>
<span class="text-gray-200">As always</span>
</div>
</div>
<div class="w-full md:w-1/3 px-4 mb-8 md:mb-0 mt-8 md:mt-12">
<div class="animate-bouncingSlow h-56 max-w-2xs mx-auto px-8 pt-10 bg-gray-800 rounded-2xl">
<img class="mb-10" src="suncealand-assets/logos/miro-logo-icon.svg" alt="">
<h4 class="text-2xl font-medium text-white">Miro</h4>
<span class="text-gray-200">Oh, irreplaceable</span>
</div>
</div>
<div class="w-full md:w-1/3 px-4">
<div class="h-56 max-w-2xs mx-auto px-8 pt-10 bg-gray-800 rounded-2xl">
<img class="mb-10" src="suncealand-assets/logos/we-logo.svg" alt="">
<h4 class="text-2xl font-medium text-white">Wetransfer</h4>
<span class="text-gray-200">The fastest</span>
</div>
</div>
</div>
</div>
<div class="max-w-5xl mx-auto">
<div class="relative flex -mb-4 flex-wrap items-center justify-between">
<span class="relative inline-block w-full md:w-auto mb-4 uppercase text-sm font-medium">
<span class="absolute top-0 left-0 text-gray-200">GREAT COLLABORATION</span>
<span class="bg-clip-text bg-gradient-to-br from-indigo-800 to-gray-200 text-transparent relative z-10 animate-pulse">GREAT COLLABORATION</span>
</span>
<span class="relative inline-block w-full md:w-auto mb-4 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 inline-block w-full md:w-auto mb-4 uppercase text-sm font-medium">
<span class="absolute top-0 left-0 text-gray-200">FASTEST TRANSFER</span>
<span class="bg-clip-text bg-gradient-to-br from-indigo-800 to-gray-200 text-transparent relative z-10 animate-pulse">FASTEST TRANSFER</span>
</span>
</div>
</div>
</div>
</section>