```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Developer Platform Pricing</title>
<style>
:root {
--bg: #090d16;
--card-bg: #111827;
--card-border: #1f2937;
--text-main: #f9fafb;
--text-muted: #9ca3af;
--text-dim: #6b7280;
--accent: #6366f1;
--accent-hover: #4f46e5;
--accent-light: rgba(99, 102, 241, 0.1);
--accent-glow: rgba(99, 102, 241, 0.25);
--pro-bg: #131d31;
--pro-border: #3b82f6;
--pro-accent: #3b82f6;
--pro-accent-hover: #2563eb;
--check-icon: #10b981;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
background-color: var(--bg);
color: var(--text-main);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
padding: 40px 20px 80px;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
}
.container {
width: 100%;
max-width: 1140px;
margin: 0 auto;
}
/* Header */
.header {
text-align: center;
margin-bottom: 48px;
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
.header-tag {
display: inline-block;
font-size: 0.8125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--pro-accent);
background-color: rgba(59, 130, 246, 0.1);
padding: 4px 12px;
border-radius: 9999px;
margin-bottom: 16px;
border: 1px solid rgba(59, 130, 246, 0.2);
}
.header h1 {
font-size: 2.5rem;
font-weight: 800;
letter-spacing: -0.025em;
color: var(--text-main);
margin-bottom: 12px;
}
.header p {
font-size: 1.125rem;
color: var(--text-muted);
}
/* Billing Toggle */
.toggle-container {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 56px;
}
.toggle-label {
font-size: 0.875rem;
font-weight: 500;
color: var(--text-muted);
cursor: pointer;
user-select: none;
}
.toggle-label.active {
color: var(--text-main);
}
.switch {
position: relative;
display: inline-block;
width: 48px;
height: 26px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0; left: 0; right: 0; bottom: 0;
background-color: #374151;
transition: .2s ease-in-out;
border-radius: 9999px;
}
.slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .2s ease-in-out;
border-radius: 50%;
}
input:checked + .slider {
background-color: var(--pro-accent);
}
input:checked + .slider:before {
transform: translateX(22px);
}
.save-badge {
font-size: 0.75rem;
font-weight: 600;
color: #10b981;
background-color: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(16, 185, 129, 0.2);
padding: 2px 8px;
border-radius: 9999px;
}
/* Pricing Grid */
.pricing-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
align-items: stretch;
}
@media (min-width: 900px) {
.pricing-grid {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
}
/* Cards */
.card {
background-color: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 16px;
padding: 32px 28px;
display: flex;
flex-direction: column;
position: relative;
transition: transform 0.2s ease, border-color 0.2s ease;
}
.card:hover {
border-color: #374151;
}
/* Middle Tier Visual Emphasis */
.card.emphasized {
background-color: var(--pro-bg);
border-color: rgba(59, 130, 246, 0.5);
box-shadow: 0 0 40px -10px var(--accent-glow);
}
@media (min-width: 900px) {
.card.emphasized {
transform: translateY(-8px);
}
.card.emphasized:hover {
transform: translateY(-12px);
border-color: var(--pro-accent);
}
}
.card-header {
margin-bottom: 24px;
}
.tier-name-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.tier-name {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-main);
}
.emphasized .tier-name {
color: #ffffff;
}
.emphasis-indicator {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.05em;
color: #60a5fa;
background: rgba(59, 130, 246, 0.15);
padding: 3px 10px;
border-radius: 9999px;
border: 1px solid rgba(96, 165, 250, 0.3);
}
.positioning {
font-size: 0.875rem;
color: var(--text-muted);
min-height: 42px;
line-height: 1.4;
}
/* Pricing Display */
.price-container {
margin-bottom: 28px;
display: flex;
align-items: baseline;
gap: 4px;
}
.currency {
font-size: 1.5rem;
font-weight: 600;
color: var(--text-main);
}
.price {
font-size: 3rem;
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1;
color: var(--text-main);
}
.period {
font-size: 0.875rem;
color: var(--text-muted);
font-weight: 500;
}
/* Divider */
.divider {
height: 1px;
background-color: var(--card-border);
margin-bottom: 28px;
}
.emphasized .divider {
background-color: rgba(255, 255, 255, 0.1);
}
/* Features List */
.features-title {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-dim);
margin-bottom: 16px;
}
.features-list {
list-style: none;
margin-bottom: 36px;
flex-grow: 1;
}
.feature-item {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 0.9375rem;
color: var(--text-muted);
margin-bottom: 12px;
}
.feature-item.highlight {
color: var(--text-main);
}
.check-icon {
width: 18px;
height: 18px;
fill: none;
stroke: var(--check-icon);
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
flex-shrink: 0;
margin-top: 2px;
}
/* CTA Buttons */
.cta-button {
display: block;
width: 100%;
padding: 12px 20px;
border-radius: 8px;
font-size: 0.9375rem;
font-weight: 600;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: all 0.15s ease-in-out;
border: 1px solid transparent;
}
.cta-secondary {
background-color: #1f2937;
color: var(--text-main);
border-color: #374151;
}
.cta-secondary:hover {
background-color: #374151;
color: #ffffff;
}
.cta-primary {
background-color: var(--pro-accent);
color: #ffffff;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.cta-primary:hover {
background-color: var(--pro-accent-hover);
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}
/* Footer / Trust Section */
.footer-trust {
margin-top: 64px;
text-align: center;
border-top: 1px solid var(--card-border);
padding-top: 40px;
width: 100%;
}
.trust-text {
font-size: 0.875rem;
color: var(--text-dim);
margin-bottom: 20px;
}
.tech-specs {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 32px;
color: var(--text-muted);
font-size: 0.875rem;
font-weight: 500;
}
.tech-spec-item {
display: flex;
align-items: center;
gap: 8px;
}
.dot {
width: 6px;
height: 6px;
background-color: var(--check-icon);
border-radius: 50%;
}
</style>
</head>
<body>
<div class="container">
<!-- Header Section -->
<header class="header">
<span class="header-tag">Developer Infrastructure</span>
<h1>Simple, transparent pricing</h1>
<p>Deploy in seconds. Scale to millions of requests without friction or hidden fees.</p>
</header>
<!-- Billing Toggle -->
<div class="toggle-container">
<span class="toggle-label active" id="monthly-label">Monthly billing</span>
<label class="switch">
<input type="checkbox" id="billing-toggle">
<span class="slider"></span>
</label>
<span class="toggle-label" id="annual-label">Annual billing</span>
<span class="save-badge">Save 20%</span>
</div>
<!-- Pricing Cards Grid -->
<div class="pricing-grid">
<!-- Tier 1: Hobby -->
<div class="card">
<div class="card-header">
<div class="tier-name-row">
<h2 class="tier-name">Hobby</h2>
</div>
<p class="positioning">Essential tools for side projects, learning, and personal experiments.</p>
</div>
<div class="price-container">
<span class="currency">$</span>
<span class="price" data-monthly="0" data-annual="0">0</span>
<span class="period">/ month</span>
</div>
<div class="divider"></div>
<div class="features-title">Includes</div>
<ul class="features-list">
<li class="feature-item highlight">
<svg class="check-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
<span><strong>1</strong> concurrent build pipeline</span>
</li>
<li class="feature-item highlight">
<svg class="check-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
<span><strong>10 GB</strong> egress bandwidth / mo</span>
</li>
<li class="feature-item">
<svg class="check-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
<span>Automatic SSL & custom domains</span>
</li>
<li class="feature-item">
<svg class="check-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
<span>Community Discord support</span>
</li>
<li class="feature-item">
<svg class="check-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
<span>1 developer seat</span>
</li>
</ul>
<a href="#start-hobby" class="cta-button cta-secondary">Deploy for Free</a>
</div>
<!-- Tier 2: Pro (Emphasized) -->
<div class="card emphasized">
<div class="card-header">
<div class="tier-name-row">
<h2 class="tier-name">Pro</h2>
<span class="emphasis-indicator">Most Popular</span>
</div>
<p class="positioning">Advanced capabilities and high performance for professional developers.</p>
</div>
<div class="price-container">
<span class="currency">$</span>
<span class="price" data-monthly="20" data-annual="16">20</span>
<span class="period" id="pro-period">/ month</span>
</div>
<div class="divider"></div>
<div class="features-title">Everything in Hobby, plus</div>
<ul class="features-list">
<li class="feature-item highlight">
<svg class="check-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
<span><strong>5</strong> concurrent build pipelines</span>
</li>
<li class="feature-item highlight">
<svg class="check-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
<span><strong>1 TB</strong> egress bandwidth / mo</span>
</li>
<li class="feature-item">
<svg class="check-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
<span>Preview deployments & branch URLs</span>
</li>
<li class="feature-item">
<svg class="check-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
<span>30-day build & log retention</span>
</li>
<li class="feature-item">
<svg class="check-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
<span>Priority email support (24h SLA)</span>
</li>
</ul>
<a href="#start-pro" class="cta-button cta-primary">Start 14-Day Trial</a>
</div>
<!-- Tier 3: Team -->
<div class="card">
<div class="card-header">
<div class="tier-name-row">
<h2 class="tier-name">Team</h2>
</div>
<p class="positioning">Collaborative controls, security, and dedicated scale for engineering teams.</p>
</div>
<div class="price-container">
<span class="currency">$</span>
<span class="price" data-monthly="60" data-annual="48">60</span>
<span class="period" id="team-period">/ seat / month</span>
</div>
<div class="divider"></div>
<div class="features-title">Everything in Pro, plus</div>
<ul class="features-list">
<li class="feature-item highlight">
<svg class="check-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
<span><strong>Unlimited</strong> concurrent builds</span>
</li>
<li class="feature-item highlight">
<svg class="check-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
<span><strong>4 TB</strong> shared egress bandwidth</span>
</li>
<li class="feature-item">
<svg class="check-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
<span>SSO, SAML, & custom RBAC permissions</span>
</li>
<li class="feature-item">
<svg class="check-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
<span>SOC2 Type II & Audit logs</span>
</li>
<li class="feature-item">
<svg class="check-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
<span>24/7 Phone & dedicated Slack channel</span>
</li>
</ul>
<a href="#start-team" class="cta-button cta-secondary">Create Team Account</a>
</div>
</div>
<!-- Trust / Footer Details -->
<div class="footer-trust">
<p class="trust-text">All plans include standard infrastructure guarantees</p>
<div class="tech-specs">
<div class="tech-spec-item">
<span class="dot"></span>
<span>99.99% Uptime SLA</span>
</div>
<div class="tech-spec-item">
<span class="dot"></span>
<span>Global Edge Network (300+ PoPs)</span>
</div>
<div class="tech-spec-item">
<span class="dot"></span>
<span>Automated DDoS Protection</span>
</div>
</div>
</div>
</div>
<!-- Billing Toggle Logic -->
<script>
const billingToggle = document.getElementById('billing-toggle');
const prices = document.querySelectorAll('.price');
const monthlyLabel = document.getElementById('monthly-label');
const annualLabel = document.getElementById('annual-label');
const proPeriod = document.getElementById('pro-period');
const teamPeriod = document.getElementById('team-period');
function updatePricing() {
const isAnnual = billingToggle.checked;
// Update active label styles
if (isAnnual) {
annualLabel.classList.add('active');
monthlyLabel.classList.remove('active');
proPeriod.textContent = '/ month, billed annually';
teamPeriod.textContent = '/ seat / mo, billed annually';
} else {
monthlyLabel.classList.add('active');
annualLabel.classList.remove('active');
proPeriod.textContent = '/ month';
teamPeriod.textContent = '/ seat / month';
}
// Update numbers
prices.forEach(priceEl => {
const targetValue = isAnnual
? priceEl.getAttribute('data-annual')
: priceEl.getAttribute('data-monthly');
priceEl.textContent = targetValue;
});
}
billingToggle.addEventListener('change', updatePricing);
monthlyLabel.addEventListener('click', () => {
billingToggle.checked = false;
updatePricing();
});
annualLabel.addEventListener('click', () => {
billingToggle.checked = true;
updatePricing();
});
</script>
</body>
</html>
```