<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pricing - DevScale</title>
<style>
:root {
--bg-color: #0b0f19;
--card-bg: #111827;
--card-bg-highlight: #1a2234;
--text-primary: #f9fafb;
--text-secondary: #9ca3af;
--accent: #3b82f6;
--accent-hover: #2563eb;
--border: #374151;
--border-highlight: #60a5fa;
--radius: 12px;
--transition: 0.2s ease;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: var(--bg-color);
color: var(--text-primary);
line-height: 1.5;
padding: 4rem 1rem;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
}
.container {
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
header {
text-align: center;
margin-bottom: 4rem;
}
h1 {
font-size: 2.5rem;
font-weight: 800;
letter-spacing: -0.025em;
margin-bottom: 1rem;
}
.subtitle {
font-size: 1.125rem;
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 2rem;
align-items: stretch;
}
@media (min-width: 768px) {
.pricing-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.pricing-card {
background-color: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 2.5rem 2rem;
display: flex;
flex-direction: column;
position: relative;
transition: transform var(--transition), border-color var(--transition);
}
.pricing-card:hover {
transform: translateY(-4px);
}
/* Emphasized Middle Tier (Pro) */
.pricing-card.featured {
background-color: var(--card-bg-highlight);
border-color: var(--border-highlight);
box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.1);
}
.tier-name {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.tier-description {
font-size: 0.875rem;
color: var(--text-secondary);
margin-bottom: 2rem;
min-height: 2.5rem;
}
.price-container {
margin-bottom: 2rem;
display: flex;
align-items: baseline;
gap: 0.25rem;
}
.price {
font-size: 2.5rem;
font-weight: 700;
letter-spacing: -0.025em;
}
.price-period {
font-size: 0.875rem;
color: var(--text-secondary);
}
.features-list {
list-style: none;
margin-bottom: 2.5rem;
flex-grow: 1;
}
.features-list li {
font-size: 0.875rem;
color: var(--text-secondary);
margin-bottom: 0.875rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.features-list li::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2360a5fa' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
flex-shrink: 0;
}
.cta-button {
display: inline-block;
width: 100%;
padding: 0.75rem 1.5rem;
font-size: 0.875rem;
font-weight: 600;
text-align: center;
text-decoration: none;
border-radius: calc(var(--radius) - 4px);
cursor: pointer;
transition: background-color var(--transition), color var(--transition);
}
.cta-secondary {
background-color: transparent;
color: var(--text-primary);
border: 1px solid var(--border);
}
.cta-secondary:hover {
background-color: var(--border);
}
.cta-primary {
background-color: var(--accent);
color: #ffffff;
border: 1px solid transparent;
}
.cta-primary:hover {
background-color: var(--accent-hover);
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Simple, transparent pricing</h1>
<p class="subtitle">Choose the plan that fits your workflow. Upgrade or downgrade at any time.</p>
</header>
<div class="pricing-grid">
<!-- Hobby Tier -->
<div class="pricing-card">
<h2 class="tier-name">Hobby</h2>
<p class="tier-description">For side projects and individuals exploring the tool.</p>
<div class="price-container">
<span class="price">$0</span>
<span class="price-period">/ forever</span>
</div>
<ul class="features-list">
<li>Up to 3 personal projects</li>
<li>Community support</li>
<li>Standard execution speed</li>
<li>7-day logs retention</li>
</ul>
<a href="#hobby" class="cta-button cta-secondary">Get Started</a>
</div>
<!-- Pro Tier (Emphasized) -->
<div class="pricing-card featured">
<h2 class="tier-name">Pro</h2>
<p class="tier-description">For professional developers building production apps.</p>
<div class="price-container">
<span class="price">$20</span>
<span class="price-period">/ month</span>
</div>
<ul class="features-list">
<li>Unlimited projects</li>
<li>Priority email support</li>
<li>2x faster execution speed</li>
<li>30-day logs retention</li>
<li>Advanced environment variables</li>
</ul>
<a href="#pro" class="cta-button cta-primary">Start Pro Trial</a>
</div>
<!-- Team Tier -->
<div class="pricing-card">
<h2 class="tier-name">Team</h2>
<p class="tier-description">For growing teams requiring security and collaboration.</p>
<div class="price-container">
<span class="price">$60</span>
<span class="price-period">/ seat / month</span>
</div>
<ul class="features-list">
<li>Everything in Pro</li>
<li>Dedicated support & SLA</li>
<li>Custom roles & permissions</li>
<li>Unlimited logs retention</li>
<li>Audit logs & SSO integration</li>
</ul>
<a href="#team" class="cta-button cta-secondary">Contact Sales</a>
</div>
</div>
</div>
</body>
</html>