Add pricing page with 4-tier comparison cards

2026-04-24 17:20:21 +02:00
parent 6f70e1a642
commit d4449bb404
1 changed files with 126 additions and 0 deletions
--- a/src/pages/pricing.astro
+++ b/src/pages/pricing.astro
@@ -0,0 +1,126 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+import SiteHeader from '../components/SiteHeader.astro';
+import SiteFooter from '../components/SiteFooter.astro';
+import TopographicBg from '../components/TopographicBg.astro';
+import { getAuthConfig } from '../config/auth';
+
+interface FullTier {
+  name: string;
+  price: string;
+  priceNote: string;
+  envs: string;
+  apps: string;
+  retention: string;
+  features: string[];
+  href: string;
+  cta: string;
+  highlight?: boolean;
+}
+
+const auth = getAuthConfig();
+
+const tiers: FullTier[] = [
+  {
+    name: 'Trial',
+    price: 'Free',
+    priceNote: '14 days',
+    envs: '1 environment',
+    apps: '2 apps',
+    retention: '1-day retention',
+    features: ['Route topology', 'Processor-level tracing', 'Payload capture with redaction'],
+    href: auth.signUpUrl,
+    cta: 'Start free trial',
+  },
+  {
+    name: 'MID',
+    price: '20 €',
+    priceNote: 'per month',
+    envs: '2 environments',
+    apps: '10 apps',
+    retention: '7-day retention',
+    features: ['Everything in Trial', 'Data flow lineage', 'Cross-service correlation'],
+    href: auth.signUpUrl,
+    cta: 'Start on MID',
+    highlight: true,
+  },
+  {
+    name: 'HIGH',
+    price: 'Contact',
+    priceNote: 'sales',
+    envs: 'Unlimited environments',
+    apps: '50 apps',
+    retention: '90-day retention',
+    features: ['Everything in MID', 'Live debugger', 'Exchange replay', 'Live tap'],
+    href: auth.salesMailto,
+    cta: 'Talk to sales',
+  },
+  {
+    name: 'BUSINESS',
+    price: 'Contact',
+    priceNote: 'sales',
+    envs: 'Unlimited environments',
+    apps: 'Unlimited apps',
+    retention: '365-day retention',
+    features: ['Everything in HIGH', 'Priority support', 'SLA', 'Dedicated success contact'],
+    href: auth.salesMailto,
+    cta: 'Talk to sales',
+  },
+];
+---
+<BaseLayout
+  title="Pricing — Cameleer"
+  description="Simple pricing for Apache Camel observability. Free 14-day trial, then 20 €/month or enterprise plans."
+>
+  <SiteHeader />
+  <main>
+    <section class="relative overflow-hidden border-b border-border">
+      <TopographicBg opacity={0.12} lines={8} />
+      <div class="relative max-w-content mx-auto px-6 pt-20 pb-12">
+        <p class="text-accent font-mono text-xs tracking-[0.25em] uppercase mb-4">Pricing</p>
+        <h1 class="text-display font-bold text-text mb-6">Priced so engineers can say yes.</h1>
+        <p class="text-lg text-text-muted max-w-prose">
+          Start free for 14 days. No credit card required. Move up when you need more apps, longer retention, or enterprise features.
+        </p>
+      </div>
+    </section>
+
+    <section>
+      <div class="max-w-content mx-auto px-6 py-16">
+        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+          {tiers.map((tier) => (
+            <div class={`rounded-lg border bg-bg-elevated p-7 flex flex-col ${tier.highlight ? 'border-accent' : 'border-border'}`}>
+              <div class="mb-6">
+                <div class="font-mono text-xs tracking-wider text-text-muted mb-3">{tier.name.toUpperCase()}</div>
+                <div class="flex items-baseline gap-2">
+                  <span class="text-3xl font-bold text-text">{tier.price}</span>
+                  <span class="text-sm text-text-muted">{tier.priceNote}</span>
+                </div>
+              </div>
+              <ul class="text-sm space-y-2 mb-6 text-text-muted flex-grow">
+                <li><span class="text-text">{tier.envs}</span></li>
+                <li><span class="text-text">{tier.apps}</span></li>
+                <li><span class="text-text">{tier.retention}</span></li>
+                <li class="pt-3 border-t border-border mt-3"></li>
+                {tier.features.map((f) => <li>• {f}</li>)}
+              </ul>
+              <a
+                href={tier.href}
+                class={`inline-flex items-center justify-center rounded px-4 py-2.5 text-sm font-semibold transition-colors
+                  ${tier.highlight
+                    ? 'bg-accent text-bg hover:bg-accent-muted'
+                    : 'border border-border-strong text-text hover:border-accent hover:text-accent'}`}
+              >
+                {tier.cta}
+              </a>
+            </div>
+          ))}
+        </div>
+        <p class="text-center text-text-faint text-sm mt-10">
+          Prices in EUR, excluding VAT. Billed monthly. Annual billing available for HIGH and BUSINESS — <a href={auth.salesMailto} class="text-accent hover:underline">talk to sales</a>.
+        </p>
+      </div>
+    </section>
+  </main>
+  <SiteFooter />
+</BaseLayout>