cta app-download phone-mockup app-store google-play mobile badges cta app-download app-store google-play phone-mockup mobile badges rating app download CTA with store badges mobile app section with phone mockup App Store and Google Play download section
CTA App Mockup
Fetch pattern JSON:
curl https://webspire.de/patterns/cta/app-mockup.json app-mockup.html
<section class="ws-cta bg-[var(--ws-cta-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="grid items-center gap-12 overflow-hidden rounded-3xl bg-[var(--ws-color-surface-alt)] p-10 lg:grid-cols-2 lg:gap-16 lg:p-16">
<!-- Left: text + badges + rating -->
<div>
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-color-accent)]">Available now</p>
<h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-cta-text)] sm:text-4xl">Take Webspire with you, everywhere</h2>
<p class="mt-4 text-base leading-relaxed text-[var(--ws-cta-text-soft)]">Browse patterns, preview layouts, and copy code directly from your phone. The mobile app keeps your entire pattern library in your pocket.</p>
<!-- App store badges -->
<div class="mt-8 flex flex-wrap gap-3">
<!-- Apple App Store badge -->
<a href="#" class="inline-flex h-10 items-center gap-2.5 rounded-xl border border-[var(--ws-cta-border)] bg-[var(--ws-cta-bg)] px-4 transition hover:bg-[var(--ws-color-surface-alt)]" aria-label="Download on the App Store">
<svg class="h-5 w-5 shrink-0 text-[var(--ws-cta-text)]" 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 leading-tight">
<p class="text-[10px] text-[var(--ws-cta-text-soft)]">Download on the</p>
<p class="text-sm font-semibold text-[var(--ws-cta-text)]">App Store</p>
</div>
</a>
<!-- Google Play badge -->
<a href="#" class="inline-flex h-10 items-center gap-2.5 rounded-xl border border-[var(--ws-cta-border)] bg-[var(--ws-cta-bg)] px-4 transition hover:bg-[var(--ws-color-surface-alt)]" aria-label="Get it on Google Play">
<svg class="h-5 w-5 shrink-0 text-[var(--ws-cta-text)]" viewBox="0 0 24 24" fill="currentColor">
<path d="M3.18 23.76c.3.17.65.19.99.06l12.12-6.99-2.61-2.61-10.5 9.54zm-1.37-19.2c-.09.26-.12.54-.12.83v17.22c0 .29.03.57.12.83l.09.09 9.64-9.64v-.22L1.9 4.47l-.09.09zM20.06 10.49l-2.59-1.49-2.91 2.91 2.91 2.91 2.6-1.5c.74-.43.74-1.41-.01-1.83zm-18.25 11.3l10.5-9.54-2.61-2.61-7.89 4.55v7.6z"/>
</svg>
<div class="text-left leading-tight">
<p class="text-[10px] text-[var(--ws-cta-text-soft)]">Get it on</p>
<p class="text-sm font-semibold text-[var(--ws-cta-text)]">Google Play</p>
</div>
</a>
</div>
<!-- Star rating + review count -->
<div class="mt-6 flex items-center gap-2">
<div class="flex gap-0.5">
<svg class="h-4 w-4 text-amber-400" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-4 w-4 text-amber-400" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-4 w-4 text-amber-400" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-4 w-4 text-amber-400" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-4 w-4 text-amber-400" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</div>
<p class="text-sm text-[var(--ws-cta-text-soft)]"><span class="font-semibold text-[var(--ws-cta-text)]">4.8 rating</span> · 12K reviews</p>
</div>
</div>
<!-- Right: stacked phone mockups -->
<div class="relative flex justify-center">
<!-- Back phone (slightly offset) -->
<div class="absolute right-4 top-4 h-full max-h-[480px] w-[200px] overflow-hidden rounded-3xl border-4 border-slate-800 bg-slate-900 opacity-60 sm:w-[220px]"> <!-- ws-ok -->
<div class="h-full bg-gradient-to-b from-violet-600 to-indigo-800"></div>
</div>
<!-- Front phone -->
<div class="relative h-full max-h-[480px] w-[200px] overflow-hidden rounded-3xl border-4 border-slate-800 bg-slate-900 shadow-2xl sm:w-[220px]"> <!-- ws-ok -->
<!-- Notch -->
<div class="absolute left-1/2 top-3 h-3 w-16 -translate-x-1/2 rounded-full bg-slate-800"></div> <!-- ws-ok -->
<!-- Screen content gradient -->
<div class="h-full bg-gradient-to-b from-emerald-500 to-sky-600">
<div class="mt-10 space-y-3 p-4">
<div class="h-3 w-2/3 rounded bg-white/30"></div>
<div class="h-3 w-1/2 rounded bg-white/20"></div>
<div class="mt-4 h-24 rounded-xl bg-white/20"></div>
<div class="h-3 w-3/4 rounded bg-white/30"></div>
<div class="h-3 w-1/3 rounded bg-white/20"></div>
<div class="mt-2 h-16 rounded-xl bg-white/20"></div>
<div class="h-16 rounded-xl bg-white/20"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
ctaapp-downloadphone-mockupapp-storegoogle-playmobilebadges
Slots
| Name | Required | Description |
|---|---|---|
| eyebrow | No | Small label above the heading. |
| heading | Yes | Main CTA headline. |
| description | No | Supporting text. |
| store-badges | Yes | App Store and Google Play download buttons. |
| rating | No | Star rating and review count. |
| phone-mockups | Yes | Two stacked phone frames with screen content. |
Two-column CTA section inside a rounded-3xl surface card. The left side has an eyebrow, headline, description, Apple App Store badge, Google Play badge, and a 5-star rating row with review count. The right side shows two stacked phone frames at different z-levels — the front phone is fully visible with gradient screen content, the back phone is slightly offset and semi-transparent to create depth. Both frames are pure CSS, no images required.