download app mobile desktop cta platform download app cta macos windows ios android platform store app download section with platform buttons desktop and mobile CTA cards
CTA Download
Fetch pattern JSON:
curl https://webspire.de/patterns/cta/download.json download.html
<section class="ws-cta bg-[var(--ws-cta-bg)] py-20">
<div class="mx-auto max-w-5xl px-6">
<div class="mb-12 text-center">
<h2 class="text-3xl font-bold tracking-tight text-[var(--ws-cta-text)] sm:text-4xl">Get the App</h2>
<p class="mt-4 text-lg text-[var(--ws-cta-text-soft)]">Available on all your devices. Start for free.</p>
</div>
<div class="grid gap-6 sm:grid-cols-2">
<!-- Desktop Card -->
<div class="rounded-2xl border border-[var(--ws-cta-border)] bg-[var(--ws-cta-bg)] p-8 transition hover:border-[var(--ws-cta-action-bg)] hover:shadow-lg">
<div class="mb-6 flex h-12 w-12 items-center justify-center rounded-xl bg-[var(--ws-cta-action-bg)]">
<svg class="h-6 w-6 text-[var(--ws-cta-action-text)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
<rect x="3" y="4" width="18" height="13" rx="2"/>
<path d="M8 21h8M12 17v4"/>
</svg>
</div>
<h3 class="mb-2 text-xl font-semibold text-[var(--ws-cta-text)]">Desktop App</h3>
<p class="mb-6 text-sm text-[var(--ws-cta-text-soft)]">Full-featured experience with offline support and local storage.</p>
<div class="flex flex-wrap gap-3">
<a href="#" class="inline-flex items-center gap-2 rounded-lg bg-[var(--ws-cta-action-bg)] px-4 py-2.5 text-sm font-semibold text-[var(--ws-cta-action-text)] transition hover:bg-[var(--ws-cta-action-bg-hover)]">
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<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>
macOS
</a>
<a href="#" class="inline-flex items-center gap-2 rounded-lg border border-[var(--ws-cta-border)] px-4 py-2.5 text-sm font-semibold text-[var(--ws-cta-text)] transition hover:bg-[var(--ws-cta-border)]">
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M3 3h8v8H3zm10 0h8v8h-8zM3 13h8v8H3zm10 0h8v8h-8z"/>
</svg>
Windows
</a>
</div>
</div>
<!-- Mobile Card -->
<div class="rounded-2xl border border-[var(--ws-cta-border)] bg-[var(--ws-cta-bg)] p-8 transition hover:border-[var(--ws-cta-action-bg)] hover:shadow-lg">
<div class="mb-6 flex h-12 w-12 items-center justify-center rounded-xl bg-[var(--ws-cta-action-bg)]">
<svg class="h-6 w-6 text-[var(--ws-cta-action-text)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
<rect x="7" y="2" width="10" height="20" rx="3"/>
<circle cx="12" cy="18" r="1" fill="currentColor" stroke="none"/>
</svg>
</div>
<h3 class="mb-2 text-xl font-semibold text-[var(--ws-cta-text)]">Mobile App</h3>
<p class="mb-6 text-sm text-[var(--ws-cta-text-soft)]">Capture ideas on the go. Sync seamlessly with your desktop.</p>
<div class="flex flex-wrap gap-3">
<a href="#" class="inline-flex items-center gap-2 rounded-lg bg-[var(--ws-cta-action-bg)] px-4 py-2.5 text-sm font-semibold text-[var(--ws-cta-action-text)] transition hover:bg-[var(--ws-cta-action-bg-hover)]">
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<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>
App Store
</a>
<a href="#" class="inline-flex items-center gap-2 rounded-lg border border-[var(--ws-cta-border)] px-4 py-2.5 text-sm font-semibold text-[var(--ws-cta-text)] transition hover:bg-[var(--ws-cta-border)]">
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M3.18 23.71l10.85-10.85-3.03-3.03L3.18 7.71v16zM17.5 9.85L14.6 7.05l2.44-2.44c.39-.39.39-1.02 0-1.41l-.85-.85c-.39-.39-1.02-.39-1.41 0l-2.5 2.5L9.85 2.5C9.07 1.72 7.89 1.56 6.95 2.1L13 8.16l4.5-4.5v6.19z"/>
</svg>
Google Play
</a>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
downloadappmobiledesktopctaplatform
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Sektions-Überschrift (z. B. "Get the App"). |
| subline | No | Kurzer Begleittext unter der Überschrift. |
| desktop-card | Yes | Karte für die Desktop-App mit Icon, Titel, Beschreibung und Plattform-Buttons. |
| mobile-card | Yes | Karte für die Mobile-App mit Icon, Titel, Beschreibung und Store-Buttons. |
Download-CTA-Sektion mit zwei gleichwertigen Karten: Desktop App (macOS + Windows) und Mobile App (App Store + Google Play). Hover-Effekt hebt die aktive Karte hervor. Responsiv: 2-Spalten auf sm, 1-Spalte auf Mobile.