hero app mobile download app-store google-play phone-mockup app download hero phone mockup app-store google-play mobile app download hero with phone mockup mobile app landing page hero app store badge hero section
Hero App Download
Fetch pattern JSON:
curl https://webspire.de/patterns/hero/app-download.json app-download.html
<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 & 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)]">
⭐⭐⭐⭐⭐ 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>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
heroappmobiledownloadapp-storegoogle-playphone-mockup
Hero variant targeting mobile app landing pages. Left side contains the headline, subtext, and two app store download badges. Right side shows a decorative phone frame with a placeholder app screen. Fully responsive — stacks on mobile with the phone below.