product-launch launch waitlist pricing faq dark saas bold
Product Launch
Bold product launch page with feature preview, pricing teaser, FAQ, and waitlist signup.
bold Responsive Vanilla JS
Live Preview
Sections
navbarherofeaturespricing-teaserfaqwaitlist-ctafooter
Patterns used
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pulse — The Future of Team Productivity</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://webspire.de/webspire-tokens.css">
<link rel="stylesheet" href="https://webspire.de/webspire-components.css">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
<style>
body { font-family: 'Inter', sans-serif; }
/* Brand tokens */
:root {
--ws-color-accent: oklch(0.58 0.22 295);
--ws-color-accent-light: oklch(0.68 0.18 295);
--ws-color-accent-dark: oklch(0.5 0.24 295);
--ws-color-accent-dim: oklch(0.58 0.22 295 / 0.2);
--ws-color-accent-border: oklch(0.58 0.22 295 / 0.3);
--ws-color-secondary: oklch(0.62 0.22 320);
}
/* Template-specific helpers */
.faq-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-content.open { max-height: 500px; }
.faq-icon { transition: transform 0.3s ease; }
.faq-icon.open { transform: rotate(45deg); }
</style>
</head>
<body class="bg-slate-950 text-white antialiased">
<!-- Navbar -->
<nav class="ws-navbar sticky top-0 z-50 bg-slate-950/90 backdrop-blur-md border-b border-slate-800/50" aria-label="Main navigation">
<div class="max-w-6xl mx-auto flex items-center justify-between px-4 sm:px-6 py-4">
<a href="#" class="flex items-center gap-2 text-xl font-extrabold">
<div class="w-8 h-8 rounded-lg" style="background: linear-gradient(135deg, var(--ws-color-accent), var(--ws-color-secondary));"></div>
Pulse
</a>
<ul class="hidden md:flex items-center gap-8 text-sm text-slate-400">
<li><a href="#features" class="hover:text-white transition-colors">Features</a></li>
<li><a href="#pricing" class="hover:text-white transition-colors">Pricing</a></li>
<li><a href="#faq" class="hover:text-white transition-colors">FAQ</a></li>
</ul>
<a href="#waitlist" class="hidden sm:inline-flex px-5 py-2.5 text-sm font-semibold rounded-lg transition-colors" style="background: var(--ws-color-accent);">Get Early Access</a>
<button class="md:hidden p-2 text-slate-400" aria-label="Open menu">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16"/></svg>
</button>
</div>
</nav>
<!-- Hero -->
<section class="ws-hero relative py-24 sm:py-32 px-4 overflow-hidden">
<div class="absolute inset-0 pointer-events-none">
<div class="absolute top-1/4 left-1/2 -translate-x-1/2 w-[800px] h-[400px] rounded-full blur-3xl" style="background: var(--ws-color-accent-dim);"></div>
</div>
<div class="relative max-w-3xl mx-auto text-center">
<div class="inline-flex items-center px-3 py-1 text-xs font-medium rounded-full border mb-6" style="background: var(--ws-color-accent-dim); color: var(--ws-color-accent-light); border-color: var(--ws-color-accent-border);">
<span class="w-2 h-2 rounded-full mr-2 animate-pulse" style="background: var(--ws-color-accent-light);"></span>
Launching April 15, 2026
</div>
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-black leading-tight mb-6">
The Future of<br>
<span style="background: linear-gradient(to right, var(--ws-color-accent-light), var(--ws-color-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">Team Productivity</span>
</h1>
<p class="text-slate-400 text-lg sm:text-xl max-w-2xl mx-auto mb-10 leading-relaxed">Pulse brings AI-powered workflows, real-time collaboration, and intelligent automation together in one beautiful workspace.</p>
<!-- Early access form -->
<form class="ws-forms flex flex-col sm:flex-row gap-3 max-w-md mx-auto mb-8">
<label for="hero-email" class="sr-only">Email address</label>
<input id="hero-email" type="email" placeholder="Enter your work email" required class="flex-1 px-5 py-3.5 bg-slate-900 border border-slate-700 rounded-xl text-sm text-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:border-transparent transition"
style="--tw-ring-color: var(--ws-color-accent);" />
<button type="submit" class="px-6 py-3.5 text-sm font-bold rounded-xl transition-all" style="background: linear-gradient(to right, var(--ws-color-accent), var(--ws-color-secondary));">Get Early Access</button>
</form>
<p class="text-slate-500 text-sm">Join 2,400+ people on the waitlist. No credit card required.</p>
</div>
</section>
<!-- Features -->
<section id="features" class="ws-features py-24 px-4">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-16">
<p class="text-sm font-semibold uppercase tracking-widest mb-3" style="color: var(--ws-color-accent-light);">Features</p>
<h2 class="text-3xl sm:text-4xl font-bold">Everything You Need, Nothing You Don't</h2>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="p-6 bg-slate-900/50 border border-slate-800 rounded-2xl transition-colors hover:border-[oklch(0.58_0.22_295_/_0.3)]">
<div class="w-11 h-11 flex items-center justify-center rounded-xl mb-4" style="background: var(--ws-color-accent-dim); color: var(--ws-color-accent-light);">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
</div>
<h3 class="font-semibold mb-2">AI Workflows</h3>
<p class="text-slate-400 text-sm leading-relaxed">Intelligent automation that learns from your team's patterns and suggests optimizations.</p>
</div>
<div class="p-6 bg-slate-900/50 border border-slate-800 rounded-2xl transition-colors hover:border-[oklch(0.58_0.22_295_/_0.3)]">
<div class="w-11 h-11 flex items-center justify-center rounded-xl mb-4" style="background: var(--ws-color-accent-dim); color: var(--ws-color-accent-light);">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
</div>
<h3 class="font-semibold mb-2">Real-Time Collab</h3>
<p class="text-slate-400 text-sm leading-relaxed">Work together with cursor presence, live editing, and instant sync across devices.</p>
</div>
<div class="p-6 bg-slate-900/50 border border-slate-800 rounded-2xl transition-colors hover:border-[oklch(0.58_0.22_295_/_0.3)]">
<div class="w-11 h-11 flex items-center justify-center rounded-xl mb-4" style="background: var(--ws-color-accent-dim); color: var(--ws-color-accent-light);">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
</div>
<h3 class="font-semibold mb-2">Smart Analytics</h3>
<p class="text-slate-400 text-sm leading-relaxed">Actionable insights on team performance, project health, and resource allocation.</p>
</div>
<div class="p-6 bg-slate-900/50 border border-slate-800 rounded-2xl transition-colors hover:border-[oklch(0.58_0.22_295_/_0.3)]">
<div class="w-11 h-11 flex items-center justify-center rounded-xl mb-4" style="background: var(--ws-color-accent-dim); color: var(--ws-color-accent-light);">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
</div>
<h3 class="font-semibold mb-2">Enterprise Security</h3>
<p class="text-slate-400 text-sm leading-relaxed">SOC 2 Type II, SSO, RBAC, and end-to-end encryption. Your data stays yours.</p>
</div>
</div>
</div>
</section>
<!-- Pricing Teaser -->
<section id="pricing" class="ws-pricing py-24 px-4">
<div class="max-w-3xl mx-auto text-center">
<p class="text-sm font-semibold uppercase tracking-widest mb-3" style="color: var(--ws-color-accent-light);">Simple Pricing</p>
<h2 class="text-3xl sm:text-4xl font-bold mb-6">Built for Teams of All Sizes</h2>
<p class="text-slate-400 text-lg mb-12">No per-seat fees. No hidden costs. Just one transparent price.</p>
<div class="bg-gradient-to-br from-slate-900 to-slate-900/50 border border-slate-800 rounded-3xl p-10 sm:p-14">
<p class="text-slate-400 text-sm uppercase tracking-wider mb-4">Starting at</p>
<div class="flex items-baseline justify-center gap-2 mb-4">
<span class="text-5xl sm:text-6xl font-black">$29</span>
<span class="text-slate-400 text-lg">/month</span>
</div>
<p class="text-slate-500 mb-8">Per workspace, unlimited members</p>
<div class="flex flex-wrap justify-center gap-x-6 gap-y-3 text-sm text-slate-400 mb-10">
<span class="flex items-center gap-2">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" style="color: var(--ws-color-accent-light);"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
Unlimited projects
</span>
<span class="flex items-center gap-2">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" style="color: var(--ws-color-accent-light);"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
AI workflows
</span>
<span class="flex items-center gap-2">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" style="color: var(--ws-color-accent-light);"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
Priority support
</span>
<span class="flex items-center gap-2">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" style="color: var(--ws-color-accent-light);"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
SSO & RBAC
</span>
</div>
<a href="#waitlist" class="inline-flex px-8 py-3.5 text-sm font-bold rounded-xl transition-all" style="background: linear-gradient(to right, var(--ws-color-accent), var(--ws-color-secondary));">Join the Waitlist — It's Free</a>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="ws-faq py-24 px-4">
<div class="max-w-2xl mx-auto">
<div class="text-center mb-16">
<p class="text-sm font-semibold uppercase tracking-widest mb-3" style="color: var(--ws-color-accent-light);">FAQ</p>
<h2 class="text-3xl sm:text-4xl font-bold">Common Questions</h2>
</div>
<div class="space-y-4">
<div class="border border-slate-800 rounded-xl overflow-hidden">
<button class="faq-toggle flex items-center justify-between w-full px-6 py-4 text-left" aria-expanded="false">
<span class="font-medium text-sm">When does Pulse launch?</span>
<span class="faq-icon text-slate-400 text-xl leading-none">+</span>
</button>
<div class="faq-content px-6 pb-4">
<p class="text-slate-400 text-sm leading-relaxed">We're targeting April 15, 2026 for our public launch. Early access users will get in two weeks before that. Join the waitlist to secure your spot.</p>
</div>
</div>
<div class="border border-slate-800 rounded-xl overflow-hidden">
<button class="faq-toggle flex items-center justify-between w-full px-6 py-4 text-left" aria-expanded="false">
<span class="font-medium text-sm">Is there a free plan?</span>
<span class="faq-icon text-slate-400 text-xl leading-none">+</span>
</button>
<div class="faq-content px-6 pb-4">
<p class="text-slate-400 text-sm leading-relaxed">Yes! We'll offer a generous free tier for small teams (up to 5 members). Paid plans start at $29/month for unlimited team members.</p>
</div>
</div>
<div class="border border-slate-800 rounded-xl overflow-hidden">
<button class="faq-toggle flex items-center justify-between w-full px-6 py-4 text-left" aria-expanded="false">
<span class="font-medium text-sm">Can I import data from other tools?</span>
<span class="faq-icon text-slate-400 text-xl leading-none">+</span>
</button>
<div class="faq-content px-6 pb-4">
<p class="text-slate-400 text-sm leading-relaxed">Absolutely. We support one-click imports from Notion, Asana, Jira, Linear, and Trello. Your data migrates in minutes, not hours.</p>
</div>
</div>
<div class="border border-slate-800 rounded-xl overflow-hidden">
<button class="faq-toggle flex items-center justify-between w-full px-6 py-4 text-left" aria-expanded="false">
<span class="font-medium text-sm">How does the AI work?</span>
<span class="faq-icon text-slate-400 text-xl leading-none">+</span>
</button>
<div class="faq-content px-6 pb-4">
<p class="text-slate-400 text-sm leading-relaxed">Pulse AI analyzes your team's workflows and suggests automations, detects bottlenecks, and can auto-assign tasks based on workload and expertise. All AI processing is done with your data security in mind.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Waitlist CTA -->
<section id="waitlist" class="ws-cta py-24 px-4">
<div class="max-w-2xl mx-auto text-center">
<div class="rounded-3xl p-10 sm:p-14 border" style="background: linear-gradient(135deg, var(--ws-color-accent-dim), oklch(0.62 0.22 320 / 0.2)); border-color: var(--ws-color-accent-border);">
<h2 class="text-3xl sm:text-4xl font-bold mb-4">Don't Miss the Launch</h2>
<p class="text-slate-400 text-lg mb-8">Be among the first to experience Pulse. Early access users get 50% off for life.</p>
<form class="ws-forms flex flex-col sm:flex-row gap-3 max-w-md mx-auto mb-4">
<label for="waitlist-email" class="sr-only">Email address</label>
<input id="waitlist-email" type="email" placeholder="Your work email" required class="flex-1 px-5 py-3.5 bg-slate-900 border border-slate-700 rounded-xl text-sm text-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:border-transparent transition" />
<button type="submit" class="px-6 py-3.5 text-sm font-bold rounded-xl transition-colors whitespace-nowrap" style="background: var(--ws-color-accent);">Join Waitlist</button>
</form>
<p class="text-slate-500 text-xs">2,400+ people already signed up</p>
</div>
</div>
</section>
<!-- Footer -->
<footer class="ws-footer border-t border-slate-800/50 py-10 px-4">
<div class="max-w-6xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-6">
<div class="flex items-center gap-2 text-lg font-bold">
<div class="w-6 h-6 rounded-md" style="background: linear-gradient(135deg, var(--ws-color-accent), var(--ws-color-secondary));"></div>
Pulse
</div>
<div class="flex gap-6">
<a href="#" class="text-slate-500 transition-colors hover:text-[oklch(0.68_0.18_295)]" aria-label="Twitter / X">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
</a>
<a href="#" class="text-slate-500 transition-colors hover:text-[oklch(0.68_0.18_295)]" aria-label="GitHub">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
</a>
<a href="#" class="text-slate-500 transition-colors hover:text-[oklch(0.68_0.18_295)]" aria-label="Discord">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189z"/></svg>
</a>
</div>
<p class="text-slate-600 text-sm">© 2026 Pulse Inc. All rights reserved.</p>
</div>
</footer>
<!-- FAQ accordion script -->
<script>
document.querySelectorAll('.faq-toggle').forEach(function(button) {
button.addEventListener('click', function() {
var content = this.nextElementSibling;
var icon = this.querySelector('.faq-icon');
var isOpen = content.classList.contains('open');
// Close all
document.querySelectorAll('.faq-content').forEach(function(c) { c.classList.remove('open'); });
document.querySelectorAll('.faq-icon').forEach(function(i) { i.classList.remove('open'); });
document.querySelectorAll('.faq-toggle').forEach(function(b) { b.setAttribute('aria-expanded', 'false'); });
// Open clicked if it was closed
if (!isOpen) {
content.classList.add('open');
icon.classList.add('open');
this.setAttribute('aria-expanded', 'true');
}
});
});
</script>
</body>
</html>
Bold, dark-themed product launch page with violet-to-fuchsia gradient accents. Features a hero with email capture and waitlist counter, four feature cards, a pricing teaser with feature list, an interactive FAQ accordion, and a final waitlist CTA section.