Hero App Download

<section class="ws-hero ws-hero-app-download bg-[var(--ws-hero-bg)] text-[var(--ws-hero-text)]">
  <div class="mx-auto grid max-w-7xl items-center gap-12 px-6 py-20 lg:grid-cols-2 lg:py-28">

    <!-- Left: Text + App badges -->
    <div>
      <p class="mb-4 inline-flex rounded-full border border-white/15 bg-white/5 px-3 py-1 text-xs font-medium uppercase tracking-[0.2em] text-[var(--ws-hero-text-soft)]">
        Now available on iOS &amp; Android
      </p>
      <h1 class="text-balance text-4xl font-bold tracking-tight text-[var(--ws-hero-text)] sm:text-5xl lg:text-6xl">
        Your productivity,<br class="hidden sm:block"> in your pocket.
      </h1>
      <p class="mt-5 max-w-lg text-pretty text-lg text-[var(--ws-hero-text-soft)]">
        Manage tasks, track goals, and stay focused — wherever you are. Download the app and get started in seconds.
      </p>

      <!-- App Store Badges -->
      <div class="mt-8 flex flex-wrap gap-4">
        <!-- Apple App Store -->
        <a href="#" class="inline-flex items-center gap-3 rounded-xl border border-white/20 bg-white/5 px-5 py-3 transition hover:bg-white/10">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 shrink-0 text-white" viewBox="0 0 24 24" fill="currentColor">
            <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
          </svg>
          <div class="text-left">
            <p class="text-[10px] uppercase tracking-wider text-[var(--ws-hero-text-muted)]">Download on the</p>
            <p class="text-sm font-semibold text-[var(--ws-hero-text)]">App Store</p>
          </div>
        </a>

        <!-- Google Play -->
        <a href="#" class="inline-flex items-center gap-3 rounded-xl border border-white/20 bg-white/5 px-5 py-3 transition hover:bg-white/10">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 shrink-0 text-white" viewBox="0 0 24 24" fill="currentColor">
            <path d="M3.18 23.76c.3.17.65.19.97.08l11.65-11.65L12.15 8.5l-9 9.04c-.13.43-.13.89 0 1.32l-.03 4.9zm14.09-8.08l2.47-1.38c.43-.24.71-.7.71-1.19s-.28-.95-.71-1.19l-2.48-1.38-3.03 3.03 3.04 3.11zM3.61.4C3.27.27 2.9.3 2.59.5c-.5.34-.8.96-.77 1.62v19.84c-.03.66.27 1.28.77 1.62l.12.07 11.1-11.12v-.26L3.61.4zm0 0"/>
          </svg>
          <div class="text-left">
            <p class="text-[10px] uppercase tracking-wider text-[var(--ws-hero-text-muted)]">Get it on</p>
            <p class="text-sm font-semibold text-[var(--ws-hero-text)]">Google Play</p>
          </div>
        </a>
      </div>

      <!-- Social proof -->
      <p class="mt-6 text-sm text-[var(--ws-hero-text-muted)]">
        ⭐⭐⭐⭐⭐ &nbsp; 4.9 · 12,000+ reviews · Free to download
      </p>
    </div>

    <!-- Right: Phone mockup -->
    <div class="flex items-center justify-center">
      <div class="relative mx-auto w-56 sm:w-64">
        <!-- Phone frame -->
        <div class="relative flex aspect-[9/19] w-full flex-col overflow-hidden rounded-[2.5rem] border-[6px] border-slate-700 bg-slate-900 shadow-2xl shadow-black/60"> <!-- ws-ok -->
          <!-- Notch -->
          <div class="absolute left-1/2 top-3 h-5 w-20 -translate-x-1/2 rounded-full bg-slate-800"></div> <!-- ws-ok -->
          <!-- Screen content placeholder -->
          <div class="flex flex-1 flex-col gap-3 bg-gradient-to-b from-violet-950 to-slate-900 px-4 pb-6 pt-14">
            <!-- Mock app UI -->
            <div class="rounded-xl bg-white/5 p-3">
              <div class="mb-2 h-2 w-2/3 rounded bg-white/20"></div>
              <div class="h-2 w-1/2 rounded bg-white/10"></div>
            </div>
            <div class="rounded-xl bg-violet-500/20 p-3">
              <div class="mb-2 h-2 w-3/4 rounded bg-violet-300/40"></div>
              <div class="h-2 w-1/3 rounded bg-violet-300/20"></div>
            </div>
            <div class="rounded-xl bg-white/5 p-3">
              <div class="mb-2 h-2 w-1/2 rounded bg-white/20"></div>
              <div class="h-2 w-2/3 rounded bg-white/10"></div>
            </div>
            <div class="rounded-xl bg-white/5 p-3">
              <div class="mb-2 h-2 w-3/5 rounded bg-white/20"></div>
              <div class="h-2 w-2/5 rounded bg-white/10"></div>
            </div>
          </div>
          <!-- Home indicator -->
          <div class="flex justify-center bg-slate-900 pb-2 pt-1"> <!-- ws-ok -->
            <div class="h-1 w-10 rounded-full bg-slate-600"></div>
          </div>
        </div>
        <!-- Decorative glow -->
        <div class="absolute -inset-4 -z-10 rounded-[3rem] bg-violet-600/20 blur-2xl"></div>
      </div>
    </div>

  </div>
</section>