cta membership upgrade premium discord community features checklist social-proof membership upgrade premium pro checklist discord community vault social-proof membership upgrade CTA with feature checklist premium plan section with Discord community block pro plan CTA with social proof
CTA Membership
Fetch pattern JSON:
curl https://webspire.de/patterns/cta/membership.json membership.html
<section class="ws-cta bg-[var(--ws-cta-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="mx-auto max-w-4xl overflow-hidden rounded-3xl border border-[var(--ws-cta-border)] bg-[var(--ws-color-surface)]">
<div class="grid lg:grid-cols-2">
<!-- Left: offer details -->
<div class="p-8 sm:p-10 lg:p-12">
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-cta-text-soft)]">Pro membership</p>
<h2 class="mt-3 text-balance text-2xl font-bold tracking-tight text-[var(--ws-cta-text)] sm:text-3xl">Everything you need to ship faster</h2>
<p class="mt-4 text-base leading-relaxed text-[var(--ws-cta-text-soft)]">Unlock advanced examples, exclusive templates, priority support, and early access to new features.</p>
<!-- Feature list -->
<ul class="mt-8 space-y-3">
<li class="flex items-start gap-3">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-[var(--ws-color-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
<span class="text-sm text-[var(--ws-cta-text)]">Access to the full example vault (200+ recipes)</span>
</li>
<li class="flex items-start gap-3">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-[var(--ws-color-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
<span class="text-sm text-[var(--ws-cta-text)]">Premium starter templates — ready to deploy</span>
</li>
<li class="flex items-start gap-3">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-[var(--ws-color-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
<span class="text-sm text-[var(--ws-cta-text)]">Private Discord community with direct author access</span>
</li>
<li class="flex items-start gap-3">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-[var(--ws-color-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
<span class="text-sm text-[var(--ws-cta-text)]">Early access to new features and beta releases</span>
</li>
<li class="flex items-start gap-3">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-[var(--ws-color-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
<span class="text-sm text-[var(--ws-cta-text)]">Priority issue triage and support responses</span>
</li>
</ul>
<!-- CTA buttons -->
<div class="mt-10 flex flex-col gap-3 sm:flex-row">
<a href="#" class="inline-flex items-center justify-center rounded-xl bg-[var(--ws-cta-action-bg)] px-6 py-3 text-sm font-semibold text-[var(--ws-cta-action-text)] transition-colors hover:bg-[var(--ws-cta-action-bg-hover)]">
Get Pro access
</a>
<a href="#" class="inline-flex items-center justify-center rounded-xl border border-[var(--ws-cta-border)] px-6 py-3 text-sm font-semibold text-[var(--ws-cta-text)] transition-colors hover:bg-[var(--ws-color-bg-secondary)]">
View pricing
</a>
</div>
</div>
<!-- Right: community / social proof -->
<div class="flex flex-col items-center justify-center gap-8 bg-[var(--ws-color-bg-secondary)] p-8 sm:p-10 lg:p-12">
<!-- Discord block -->
<div class="flex flex-col items-center gap-4 text-center">
<div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-[#5865F2]">
<svg class="h-7 w-7 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03z"/></svg>
</div>
<div>
<p class="text-sm font-semibold text-[var(--ws-cta-text)]">Join 2,400+ members</p>
<p class="mt-1 text-xs text-[var(--ws-cta-text-soft)]">Active Discord community — ask questions, share work, get feedback.</p>
</div>
</div>
<div class="w-full border-t border-[var(--ws-cta-border)]"></div>
<!-- Social proof avatars -->
<div class="flex flex-col items-center gap-3 text-center">
<div class="flex -space-x-2">
<div class="h-8 w-8 rounded-full border-2 border-[var(--ws-color-surface)] bg-violet-400"></div>
<div class="h-8 w-8 rounded-full border-2 border-[var(--ws-color-surface)] bg-emerald-400"></div>
<div class="h-8 w-8 rounded-full border-2 border-[var(--ws-color-surface)] bg-amber-400"></div>
<div class="h-8 w-8 rounded-full border-2 border-[var(--ws-color-surface)] bg-sky-400"></div>
<div class="h-8 w-8 rounded-full border-2 border-[var(--ws-color-surface)] bg-rose-400"></div>
</div>
<p class="text-xs text-[var(--ws-cta-text-soft)]">"The vault alone is worth 10× the price." — <span class="font-semibold text-[var(--ws-cta-text)]">@frontend_dev</span></p>
</div>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
ctamembershipupgradepremiumdiscordcommunityfeatureschecklistsocial-proof
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Optional kicker and section title above the card. |
| features | Yes | Checklist of 5 membership benefits with checkmark icons. |
| cta-buttons | Yes | Primary CTA (upgrade) and secondary CTA (view pricing). |
| community | No | Right panel with Discord block, divider, and social-proof avatar row. |
Two-column card inside a centered max-w-4xl wrapper. Left panel: kicker label, bold claim, 5-item feature checklist with accent-colored checkmarks, primary + secondary CTA buttons. Right panel: Discord logo block, divider, stacked avatar row with a short testimonial quote. Different from cta/base (full-width dark banner) — this variant frames the upgrade as a community invitation, not just a product purchase.