saas landing-page dark-theme developer-tools bold bold
SaaS Landing Bold
Dark, high-contrast SaaS landing with vibrant accents, glass cards, and bold typography for developer tools.
bold Responsive Vanilla JS
Live Preview
Sections
navbarherostatsfeaturespricingtestimonialsctafooter
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>DevPulse — Real-Time Developer Analytics</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">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
body { font-family: Inter, system-ui, sans-serif; }
/* ── Brand tokens ────────────────────────────────────────── */
:root {
--ws-color-surface: #0f172a;
--ws-color-surface-alt: #1e293b;
--ws-color-surface-muted: #334155;
--ws-color-text: #f1f5f9;
--ws-color-text-soft: #cbd5e1;
--ws-color-text-muted: #94a3b8;
--ws-color-text-faint: #64748b;
--ws-color-text-inverse: #0f172a;
--ws-color-border: rgba(255,255,255,0.06);
--ws-color-primary: #10b981;
--ws-color-primary-hover: #059669;
--ws-color-primary-soft: rgba(16,185,129,0.1);
--ws-color-primary-text: #0f172a;
}
/* ── Snippet: glass/frosted (dark-tuned) ─────────────────── */
.glass-frosted {
background: rgba(255,255,255,0.04);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,0.08);
}
/* ── Snippet: text/gradient ──────────────────────────────── */
.text-gradient {
--text-gradient-from: #10b981;
--text-gradient-to: #6ee7b7;
background: linear-gradient(135deg, var(--text-gradient-from), var(--text-gradient-to));
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
/* ── Snippet: interactions/hover-lift ────────────────────── */
.hover-lift {
transition: transform 0.25s cubic-bezier(0.16,1,0.3,1),
box-shadow 0.25s cubic-bezier(0.16,1,0.3,1);
}
.hover-lift:hover {
transform: translateY(-4px);
box-shadow: 0 0 0 1px rgba(16,185,129,0.3), 0 0 32px -4px rgba(16,185,129,0.2);
}
@media (prefers-reduced-motion: reduce) { .hover-lift { transition: none; } }
/* ── Template helpers ────────────────────────────────────── */
.hero-glow {
background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(16,185,129,0.12) 0%, transparent 70%);
}
.glow-border {
box-shadow: 0 0 0 1px rgba(16,185,129,0.2), 0 0 24px -4px rgba(16,185,129,0.15);
}
</style>
</head>
<body class="bg-slate-950 text-slate-100 antialiased">
<!-- Navbar · ws-navbar -->
<nav class="ws-navbar fixed top-0 inset-x-0 z-50 glass-frosted">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="#" class="flex items-center gap-2 text-xl font-extrabold tracking-tight">
<svg class="w-8 h-8 text-emerald-400" viewBox="0 0 32 32" fill="none" aria-hidden="true">
<rect width="32" height="32" rx="8" fill="currentColor" fill-opacity="0.15"/>
<path d="M8 22 L12 12 L16 18 L20 8 L24 16" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
</svg>
<span>Dev<span class="text-gradient">Pulse</span></span>
</a>
<div class="hidden md:flex items-center gap-8 text-sm font-medium text-slate-300">
<a href="#features" class="hover:text-emerald-400 transition-colors">Features</a>
<a href="#pricing" class="hover:text-emerald-400 transition-colors">Pricing</a>
<a href="#testimonials" class="hover:text-emerald-400 transition-colors">Testimonials</a>
<a href="#" class="text-slate-400 hover:text-slate-200 transition-colors">Docs</a>
</div>
<div class="hidden md:flex items-center gap-3">
<a href="#" class="text-sm font-medium text-slate-300 hover:text-white transition-colors px-4 py-2">Sign in</a>
<a href="#" class="text-sm font-semibold bg-emerald-500 hover:bg-emerald-400 text-slate-950 px-5 py-2 rounded-lg transition-colors">Start Free</a>
</div>
<button id="mobile-toggle" class="md:hidden p-2 text-slate-400 hover:text-white" aria-label="Toggle navigation menu" aria-expanded="false">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
</button>
</div>
</div>
<div id="mobile-menu" class="hidden md:hidden border-t border-white/5 bg-slate-950/95 backdrop-blur-xl">
<div class="px-4 py-4 space-y-3">
<a href="#features" class="block text-sm font-medium text-slate-300 hover:text-emerald-400">Features</a>
<a href="#pricing" class="block text-sm font-medium text-slate-300 hover:text-emerald-400">Pricing</a>
<a href="#testimonials" class="block text-sm font-medium text-slate-300 hover:text-emerald-400">Testimonials</a>
<a href="#" class="block text-sm font-medium text-slate-300 hover:text-emerald-400">Docs</a>
<div class="pt-3 border-t border-white/5 flex flex-col gap-2">
<a href="#" class="text-sm text-center text-slate-300 py-2">Sign in</a>
<a href="#" class="text-sm text-center font-semibold bg-emerald-500 text-slate-950 py-2 rounded-lg">Start Free</a>
</div>
</div>
</div>
</nav>
<!-- Hero · ws-hero -->
<section class="ws-hero relative pt-32 pb-20 sm:pt-40 sm:pb-28 hero-glow overflow-hidden">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="inline-flex items-center gap-2 glass-frosted rounded-full px-4 py-1.5 text-xs font-medium text-emerald-400 mb-8">
<span class="w-1.5 h-1.5 bg-emerald-400 rounded-full animate-pulse"></span>
Now tracking 2.4B events/day
</div>
<h1 class="text-4xl sm:text-6xl lg:text-7xl font-black tracking-tight leading-[1.08] mb-6">
Ship faster with<br>
<span class="text-gradient">real-time insights</span>
</h1>
<p class="max-w-2xl mx-auto text-lg sm:text-xl text-slate-400 leading-relaxed mb-10">
DevPulse gives engineering teams instant visibility into deployments, errors, and performance.
From commit to production — every metric that matters, in one dashboard.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#" class="w-full sm:w-auto text-center bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold text-base px-8 py-3.5 rounded-xl transition-colors">
Start Free Trial
</a>
<a href="#" class="w-full sm:w-auto text-center glass-frosted hover:bg-white/[0.06] text-slate-200 font-semibold text-base px-8 py-3.5 rounded-xl transition-colors group">
Live Demo
<span class="inline-block ml-1 group-hover:translate-x-0.5 transition-transform" aria-hidden="true">→</span>
</a>
</div>
<p class="mt-6 text-xs text-slate-500">No credit card required · 14-day free trial · Cancel anytime</p>
</div>
</section>
<!-- Stats · ws-stats -->
<section class="ws-stats border-y border-white/5 bg-slate-900/50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
<div>
<p class="text-3xl sm:text-4xl font-extrabold text-gradient">4,200+</p>
<p class="mt-1 text-sm text-slate-400">Engineering Teams</p>
</div>
<div>
<p class="text-3xl sm:text-4xl font-extrabold text-gradient">99.99%</p>
<p class="mt-1 text-sm text-slate-400">Uptime SLA</p>
</div>
<div>
<p class="text-3xl sm:text-4xl font-extrabold text-gradient"><50ms</p>
<p class="mt-1 text-sm text-slate-400">Avg Latency</p>
</div>
<div>
<p class="text-3xl sm:text-4xl font-extrabold text-gradient">2.4B</p>
<p class="mt-1 text-sm text-slate-400">Events / Day</p>
</div>
</div>
</section>
<!-- Features · ws-features -->
<section id="features" class="ws-features py-24 sm:py-32">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<p class="text-sm font-semibold text-emerald-400 tracking-widest uppercase mb-3">Capabilities</p>
<h2 class="text-3xl sm:text-5xl font-extrabold tracking-tight">Everything your team needs</h2>
<p class="mt-4 max-w-2xl mx-auto text-lg text-slate-400">From real-time error tracking to deployment analytics, DevPulse covers the full engineering lifecycle.</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="glass-frosted rounded-2xl p-8 hover-lift">
<div class="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-5">
<svg class="w-6 h-6 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"/></svg>
</div>
<h3 class="text-lg font-bold mb-2">Real-Time Alerts</h3>
<p class="text-sm text-slate-400 leading-relaxed">Get notified in Slack, PagerDuty, or email the moment an error spike or performance regression is detected.</p>
</div>
<div class="glass-frosted rounded-2xl p-8 hover-lift">
<div class="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-5">
<svg class="w-6 h-6 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.5 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z"/></svg>
</div>
<h3 class="text-lg font-bold mb-2">Deploy Analytics</h3>
<p class="text-sm text-slate-400 leading-relaxed">Track deployment frequency, lead time, failure rate, and MTTR. Measure DORA metrics without spreadsheets.</p>
</div>
<div class="glass-frosted rounded-2xl p-8 hover-lift">
<div class="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-5">
<svg class="w-6 h-6 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v3.75m0-10.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.75c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.57-.598-3.75h-.152c-3.196 0-6.1-1.249-8.25-3.286zm0 13.036h.008v.008H12v-.008z"/></svg>
</div>
<h3 class="text-lg font-bold mb-2">Error Intelligence</h3>
<p class="text-sm text-slate-400 leading-relaxed">AI-powered error grouping with stack trace deduplication. See root causes, not noise. Fix issues 3x faster.</p>
</div>
<div class="glass-frosted rounded-2xl p-8 hover-lift">
<div class="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-5">
<svg class="w-6 h-6 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/></svg>
</div>
<h3 class="text-lg font-bold mb-2">SDK & API First</h3>
<p class="text-sm text-slate-400 leading-relaxed">Lightweight SDKs for Node, Python, Go, and Rust. Open API with webhooks, GraphQL, and Terraform provider.</p>
</div>
<div class="glass-frosted rounded-2xl p-8 hover-lift">
<div class="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-5">
<svg class="w-6 h-6 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"/></svg>
</div>
<h3 class="text-lg font-bold mb-2">Team Insights</h3>
<p class="text-sm text-slate-400 leading-relaxed">Understand engineering throughput across squads. Spot bottlenecks and celebrate wins with transparent metrics.</p>
</div>
<div class="glass-frosted rounded-2xl p-8 hover-lift">
<div class="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-5">
<svg class="w-6 h-6 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>
</div>
<h3 class="text-lg font-bold mb-2">SOC 2 Compliant</h3>
<p class="text-sm text-slate-400 leading-relaxed">Enterprise-grade security with SOC 2 Type II, GDPR compliance, SSO/SAML, role-based access, and audit logs.</p>
</div>
</div>
</div>
</section>
<!-- Pricing · ws-pricing -->
<section id="pricing" class="ws-pricing py-24 sm:py-32 bg-slate-900/40">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<p class="text-sm font-semibold text-emerald-400 tracking-widest uppercase mb-3">Pricing</p>
<h2 class="text-3xl sm:text-5xl font-extrabold tracking-tight">Simple, transparent pricing</h2>
<p class="mt-4 max-w-xl mx-auto text-lg text-slate-400">Start free. Scale as you grow. No surprise invoices.</p>
</div>
<div class="grid md:grid-cols-3 gap-6 lg:gap-8 max-w-5xl mx-auto items-start">
<!-- Starter -->
<div class="glass-frosted rounded-2xl p-8 hover-lift">
<h3 class="text-lg font-bold">Starter</h3>
<p class="text-sm text-slate-400 mt-1">For small teams getting started</p>
<p class="mt-6 flex items-baseline gap-1">
<span class="text-4xl font-extrabold">$0</span>
<span class="text-slate-500 text-sm">/month</span>
</p>
<a href="#" class="mt-8 block text-center glass-frosted hover:bg-white/[0.06] text-slate-200 font-semibold text-sm py-3 rounded-xl transition-colors">Get Started</a>
<ul class="mt-8 space-y-3 text-sm text-slate-300">
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-emerald-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Up to 100K events/mo</li>
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-emerald-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>3 team members</li>
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-emerald-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>7-day data retention</li>
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-emerald-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Email alerts</li>
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-emerald-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Community support</li>
</ul>
</div>
<!-- Pro (highlighted) -->
<div class="relative rounded-2xl glow-border bg-gradient-to-b from-emerald-500/[0.08] to-transparent hover-lift">
<div class="absolute -top-3.5 left-1/2 -translate-x-1/2 bg-emerald-500 text-slate-950 text-xs font-bold px-4 py-1 rounded-full">Most Popular</div>
<div class="rounded-2xl p-8" style="background:transparent;">
<h3 class="text-lg font-bold">Pro</h3>
<p class="text-sm text-slate-400 mt-1">For growing engineering orgs</p>
<p class="mt-6 flex items-baseline gap-1">
<span class="text-4xl font-extrabold text-gradient">$49</span>
<span class="text-slate-500 text-sm">/month</span>
</p>
<a href="#" class="mt-8 block text-center bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold text-sm py-3 rounded-xl transition-colors">Start Free Trial</a>
<ul class="mt-8 space-y-3 text-sm text-slate-300">
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-emerald-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Up to 10M events/mo</li>
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-emerald-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Unlimited team members</li>
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-emerald-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>90-day data retention</li>
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-emerald-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Slack & PagerDuty alerts</li>
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-emerald-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>DORA metrics dashboard</li>
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-emerald-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Priority email support</li>
</ul>
</div>
</div>
<!-- Enterprise -->
<div class="glass-frosted rounded-2xl p-8 hover-lift">
<h3 class="text-lg font-bold">Enterprise</h3>
<p class="text-sm text-slate-400 mt-1">For large-scale operations</p>
<p class="mt-6 flex items-baseline gap-1">
<span class="text-4xl font-extrabold">Custom</span>
</p>
<a href="#" class="mt-8 block text-center glass-frosted hover:bg-white/[0.06] text-slate-200 font-semibold text-sm py-3 rounded-xl transition-colors">Contact Sales</a>
<ul class="mt-8 space-y-3 text-sm text-slate-300">
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-emerald-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Unlimited events</li>
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-emerald-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>SSO / SAML</li>
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-emerald-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>1-year data retention</li>
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-emerald-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Custom integrations</li>
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-emerald-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>SOC 2 & GDPR</li>
<li class="flex items-start gap-3"><svg class="w-5 h-5 text-emerald-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Dedicated account manager</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Testimonials · ws-testimonials -->
<section id="testimonials" class="ws-testimonials py-24 sm:py-32">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<p class="text-sm font-semibold text-emerald-400 tracking-widest uppercase mb-3">Testimonials</p>
<h2 class="text-3xl sm:text-5xl font-extrabold tracking-tight">Loved by engineering teams</h2>
</div>
<div class="grid md:grid-cols-3 gap-6">
<div class="glass-frosted rounded-2xl p-8">
<div class="flex gap-1 mb-4" aria-label="5 out of 5 stars">
<svg class="w-5 h-5 text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><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="w-5 h-5 text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><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="w-5 h-5 text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><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="w-5 h-5 text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><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="w-5 h-5 text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><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>
<blockquote class="text-sm text-slate-300 leading-relaxed mb-6">"DevPulse cut our incident response time by 60%. The real-time error grouping is a game-changer — we stopped drowning in duplicate alerts overnight."</blockquote>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-emerald-500/20 flex items-center justify-center text-sm font-bold text-emerald-400">SK</div>
<div>
<p class="text-sm font-semibold">Sarah Kim</p>
<p class="text-xs text-slate-500">VP Engineering, Stackline</p>
</div>
</div>
</div>
<div class="glass-frosted rounded-2xl p-8">
<div class="flex gap-1 mb-4" aria-label="5 out of 5 stars">
<svg class="w-5 h-5 text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><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="w-5 h-5 text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><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="w-5 h-5 text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><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="w-5 h-5 text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><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="w-5 h-5 text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><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>
<blockquote class="text-sm text-slate-300 leading-relaxed mb-6">"We replaced three separate tools with DevPulse. The DORA metrics dashboard alone justified the switch — our leadership finally has visibility into delivery velocity."</blockquote>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-emerald-500/20 flex items-center justify-center text-sm font-bold text-emerald-400">MR</div>
<div>
<p class="text-sm font-semibold">Marcus Rivera</p>
<p class="text-xs text-slate-500">CTO, Buildkraft</p>
</div>
</div>
</div>
<div class="glass-frosted rounded-2xl p-8">
<div class="flex gap-1 mb-4" aria-label="5 out of 5 stars">
<svg class="w-5 h-5 text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><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="w-5 h-5 text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><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="w-5 h-5 text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><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="w-5 h-5 text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><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="w-5 h-5 text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><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>
<blockquote class="text-sm text-slate-300 leading-relaxed mb-6">"The SDK integration took 15 minutes. Within an hour we had full observability across our microservices. The sub-50ms latency means zero performance overhead."</blockquote>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-emerald-500/20 flex items-center justify-center text-sm font-bold text-emerald-400">JT</div>
<div>
<p class="text-sm font-semibold">Jenna Torres</p>
<p class="text-xs text-slate-500">Lead SRE, NovaPay</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA · ws-cta -->
<section class="ws-cta py-24 sm:py-32">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="glass-frosted rounded-3xl p-12 sm:p-16 glow-border relative overflow-hidden">
<div class="absolute inset-0 hero-glow pointer-events-none" aria-hidden="true"></div>
<div class="relative">
<h2 class="text-3xl sm:text-5xl font-black tracking-tight mb-4">Ready to ship with confidence?</h2>
<p class="text-lg text-slate-400 max-w-xl mx-auto mb-8">Join 4,200+ engineering teams using DevPulse to deploy faster, catch errors sooner, and build better software.</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#" class="w-full sm:w-auto text-center bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold text-base px-8 py-3.5 rounded-xl transition-colors">Start Your Free Trial</a>
<a href="#" class="w-full sm:w-auto text-center text-slate-300 hover:text-white font-semibold text-base px-8 py-3.5 transition-colors">Talk to Sales</a>
</div>
<p class="mt-5 text-xs text-slate-500">Free 14-day trial · No credit card required</p>
</div>
</div>
</div>
</section>
<!-- Footer · ws-footer -->
<footer class="ws-footer border-t border-white/5 bg-slate-950">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="grid grid-cols-2 md:grid-cols-5 gap-8">
<div class="col-span-2 md:col-span-1">
<a href="#" class="flex items-center gap-2 text-lg font-extrabold tracking-tight">
<svg class="w-7 h-7 text-emerald-400" viewBox="0 0 32 32" fill="none" aria-hidden="true">
<rect width="32" height="32" rx="8" fill="currentColor" fill-opacity="0.15"/>
<path d="M8 22 L12 12 L16 18 L20 8 L24 16" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
</svg>
<span>Dev<span class="text-gradient">Pulse</span></span>
</a>
<p class="mt-3 text-sm text-slate-500 leading-relaxed">Real-time developer analytics for modern engineering teams.</p>
</div>
<div>
<h4 class="text-xs font-semibold uppercase tracking-widest text-slate-400 mb-4">Product</h4>
<ul class="space-y-2.5 text-sm text-slate-500">
<li><a href="#" class="hover:text-slate-300 transition-colors">Features</a></li>
<li><a href="#" class="hover:text-slate-300 transition-colors">Pricing</a></li>
<li><a href="#" class="hover:text-slate-300 transition-colors">Integrations</a></li>
<li><a href="#" class="hover:text-slate-300 transition-colors">Changelog</a></li>
</ul>
</div>
<div>
<h4 class="text-xs font-semibold uppercase tracking-widest text-slate-400 mb-4">Developers</h4>
<ul class="space-y-2.5 text-sm text-slate-500">
<li><a href="#" class="hover:text-slate-300 transition-colors">Documentation</a></li>
<li><a href="#" class="hover:text-slate-300 transition-colors">API Reference</a></li>
<li><a href="#" class="hover:text-slate-300 transition-colors">SDKs</a></li>
<li><a href="#" class="hover:text-slate-300 transition-colors">Status</a></li>
</ul>
</div>
<div>
<h4 class="text-xs font-semibold uppercase tracking-widest text-slate-400 mb-4">Company</h4>
<ul class="space-y-2.5 text-sm text-slate-500">
<li><a href="#" class="hover:text-slate-300 transition-colors">About</a></li>
<li><a href="#" class="hover:text-slate-300 transition-colors">Blog</a></li>
<li><a href="#" class="hover:text-slate-300 transition-colors">Careers</a></li>
<li><a href="#" class="hover:text-slate-300 transition-colors">Contact</a></li>
</ul>
</div>
<div>
<h4 class="text-xs font-semibold uppercase tracking-widest text-slate-400 mb-4">Legal</h4>
<ul class="space-y-2.5 text-sm text-slate-500">
<li><a href="#" class="hover:text-slate-300 transition-colors">Privacy</a></li>
<li><a href="#" class="hover:text-slate-300 transition-colors">Terms</a></li>
<li><a href="#" class="hover:text-slate-300 transition-colors">Security</a></li>
<li><a href="#" class="hover:text-slate-300 transition-colors">GDPR</a></li>
</ul>
</div>
</div>
<div class="mt-12 pt-8 border-t border-white/5 flex flex-col sm:flex-row items-center justify-between gap-4">
<p class="text-xs text-slate-600">© 2026 DevPulse, Inc. All rights reserved.</p>
<div class="flex items-center gap-5">
<a href="#" class="text-slate-600 hover:text-slate-400 transition-colors" aria-label="GitHub">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/></svg>
</a>
<a href="#" class="text-slate-600 hover:text-slate-400 transition-colors" aria-label="X (Twitter)">
<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-600 hover:text-slate-400 transition-colors" aria-label="LinkedIn">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
</a>
</div>
</div>
</div>
</footer>
<script>
const toggle = document.getElementById('mobile-toggle');
const menu = document.getElementById('mobile-menu');
toggle.addEventListener('click', () => {
const open = !menu.classList.contains('hidden');
menu.classList.toggle('hidden');
toggle.setAttribute('aria-expanded', String(!open));
});
menu.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
menu.classList.add('hidden');
toggle.setAttribute('aria-expanded', 'false');
});
});
</script>
</body>
</html>
Bold, dark SaaS landing page designed for developer tools. High-contrast design with vibrant emerald accents and glass-morphism cards.