App Promotion Card

<div class="overflow-hidden relative flex items-center bg-[url(https://images.unsplash.com/photo-1633269540827-728aabbb7646?w=2160&q=80)] bg-cover rounded-3xl pt-8 pr-8 pb-8 pl-8">
  <div class="relative z-10 max-w-[400px] text-white">
    <div class="flex items-center gap-3 mb-6">
      <div class="w-10 h-10 rounded-xl bg-cyan-400 grid place-content-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 text-slate-900">
          <path d="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z"></path>
          <path d="M22 10v6"></path>
          <path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5"></path>
        </svg>
      </div>
      <div>
        <span class="text-xl font-bold">Aura</span>
        <p class="text-xs text-slate-300">Professional Learning Platform</p>
      </div>
    </div>
    <h3 class="text-3xl font-bold leading-tight mb-4">
      Master new skills.Advance your career.
      <br>
    </h3>
    <p class="text-sm text-slate-300 mb-6">Join thousands of professionals learning from industry experts through our mobile app.</p>
    <div class="space-y-3">
      <a href="#" class="flex items-center gap-3 text-sm font-medium hover:text-cyan-400 transition-colors">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5">
          <rect width="14" height="20" x="5" y="2" rx="2" ry="2"></rect>
          <path d="M12 18h.01"></path>
        </svg>
        <div>
          <div>Download for iOS & Android</div>
          <div class="text-xs text-slate-400">Available on all platforms</div>
        </div>
      </a>
      <a href="#" class="flex items-center gap-3 text-sm font-medium hover:text-cyan-400 transition-colors">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5">
          <circle cx="12" cy="12" r="10"></circle>
          <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path>
          <path d="M2 12h20"></path>
        </svg>
        <div>
          <div>Visit aurachat.io</div>
          <div class="text-xs text-slate-400">Web version available</div>
        </div>
      </a>
    </div>
  </div>
</div>