From bb526b7ba9dc59d9e2d579e1758b086866ea2188 Mon Sep 17 00:00:00 2001
From: Rae McKelvey <633012+okdistribute@users.noreply.github.com>
Date: Thu, 9 Apr 2026 11:56:48 -0700
Subject: [PATCH] Add pricing more prominently

---
 src/app/pricing/page.jsx             | 275 +++++++++++++++++++++++++++
 src/components/Header.jsx            |   2 +-
 src/components/PricingCalculator.jsx | 183 ++++++++++++++++++
 3 files changed, 459 insertions(+), 1 deletion(-)
 create mode 100644 src/app/pricing/page.jsx
 create mode 100644 src/components/PricingCalculator.jsx

diff --git a/src/app/pricing/page.jsx b/src/app/pricing/page.jsx
new file mode 100644
index 00000000..7d042212
--- /dev/null
+++ b/src/app/pricing/page.jsx
@@ -0,0 +1,275 @@
+import { Fragment } from 'react'
+import { HeaderSparse } from '@/components/HeaderSparse'
+import { FooterMarketing } from '@/components/FooterMarketing'
+import { PricingCalculator } from '@/components/PricingCalculator'
+import Link from 'next/link'
+import { Check, Minus, Activity, BarChart3, Server, Headphones } from 'lucide-react'
+
+export const metadata = {
+  title: 'Pricing | Iroh',
+  description: 'Plans and pricing for iroh services. Free for development, Pro for production, Enterprise for large-scale deployments.',
+}
+
+const SERVICES_URL = 'https://services.iroh.computer'
+const CAL_URL = 'https://cal.com/team/number-0/iroh-services'
+
+const plans = [
+  {
+    name: 'Free',
+    description: 'For local development and testing.',
+    price: '$0',
+    period: '/month',
+    href: `${SERVICES_URL}?utm_source=website&utm_content=pricing-free`,
+    buttonLabel: 'Get Started',
+    features: [
+      'All features in Pro, limited',
+      '1 day retention',
+      'Community support',
+    ],
+  },
+  {
+    name: 'Pro',
+    description: 'For shipping your app to prod.',
+    price: '$19',
+    period: '/month',
+    popular: true,
+    href: `${SERVICES_URL}?utm_source=website&utm_content=pricing-pro`,
+    buttonLabel: 'Free trial',
+    features: [
+      'Pay as you go pricing',
+      '7 day retention',
+      '8x5 support tickets',
+    ],
+  },
+  {
+    name: 'Enterprise',
+    description: 'For large-scale deployments.',
+    price: 'Contact Us',
+    period: '',
+    href: CAL_URL,
+    buttonLabel: "Let's Chat",
+    features: [
+      'On-prem and multi-cloud',
+      'Custom retention',
+      'SLAs',
+      'Support Engineer',
+    ],
+  },
+]
+
+const sectionIcons = {
+  Platform: Activity,
+  Metrics: BarChart3,
+  Hosting: Server,
+  Support: Headphones,
+}
+
+const featureSections = [
+  {
+    name: 'Platform',
+    features: [
+      { name: 'Collaborators', free: 'One user', pro: 'Unlimited users', enterprise: 'Unlimited users' },
+      { name: 'Network Diagnostics', free: '3 reports', pro: '10 reports', proNote: 'then pay as you go', enterprise: 'Custom', enterpriseNote: 'Volume discounts' },
+    ],
+  },
+  {
+    name: 'Metrics',
+    features: [
+      { name: 'Data Points per Minute', free: '1K DPM', freeNote: '100 metrics \u00d7 10 endpoints', pro: '10K DPM', proNote: 'then $1.49/1K DPM', enterprise: 'Custom', enterpriseNote: 'Volume discounts' },
+      { name: 'Retention', free: '1 day', pro: '7 days', enterprise: 'Custom' },
+      { name: 'Concurrent Endpoints', free: '10', pro: '100', proNote: 'then $0.50/100 endpoints', enterprise: 'Custom' },
+    ],
+  },
+  {
+    name: 'Hosting',
+    features: [
+      { name: 'Relays', free: 'Public', freeNote: 'Multi-tenant', pro: 'Cloud', proNote: '$199/relay', enterprise: 'Custom' },
+      { name: 'Connections per Relay', free: 'Variable', freeNote: 'Rate-limited', pro: '60k', enterprise: 'Custom' },
+      { name: 'Multi-region', free: null, pro: true, enterprise: 'Custom' },
+      { name: 'Multi-cloud', free: null, pro: null, enterprise: true },
+      { name: 'Dedicated DNS', free: null, pro: null, enterprise: true },
+    ],
+  },
+  {
+    name: 'Support',
+    features: [
+      { name: 'Community (Github & Discord)', free: true, pro: true, enterprise: true },
+      { name: 'SLAs', free: null, pro: null, enterprise: 'Custom' },
+      { name: 'Dedicated Support Engineer', free: null, pro: null, enterprise: true },
+    ],
+  },
+]
+
+function FeatureCell({ value, note }) {
+  if (value === true) {
+    return (
+      <td className="px-6 py-4 text-center">
+        <Check className="h-5 w-5 text-irohPurple-500 inline-block" />
+      </td>
+    )
+  }
+  if (value === null || value === undefined) {
+    return (
+      <td className="px-6 py-4 text-center">
+        <Minus className="h-5 w-5 text-irohGray-400 inline-block" />
+      </td>
+    )
+  }
+  return (
+    <td className="px-6 py-4 text-center">
+      <div className="font-medium">{value}</div>
+      {note && <p className="text-sm text-irohGray-500 dark:text-irohGray-400">{note}</p>}
+    </td>
+  )
+}
+
+export default function PricingPage() {
+  return (
+    <div>
+      <HeaderSparse />
+
+      <div className="min-h-screen transition-colors font-space bg-irohGray-50 dark:bg-irohGray-900 text-irohGray-700 dark:text-irohGray-100">
+        {/* Hero */}
+        <section className="py-24 px-6 border-b border-irohGray-300 dark:border-irohGray-800">
+          <div className="container mx-auto max-w-4xl pt-12 text-center">
+            <p className="text-base font-semibold leading-7 text-irohPurple-500">Plans and Pricing</p>
+            <h1 className="mt-2 text-4xl sm:text-5xl font-bold leading-tight">
+              Go to production with confidence.
+            </h1>
+            <p className="mx-auto mt-6 max-w-2xl text-lg text-irohGray-600 dark:text-irohGray-300 leading-relaxed">
+              Customized hosting and monitoring for iroh apps, with people that support you.
+            </p>
+          </div>
+        </section>
+
+        {/* Plan Cards */}
+        <section className="py-20 px-6 border-b border-irohGray-300 dark:border-irohGray-800">
+          <div className="container mx-auto max-w-5xl">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+              {plans.map((plan) => (
+                <div
+                  key={plan.name}
+                  className={`relative p-8 pb-12 rounded-lg border flex flex-col ${
+                    plan.popular
+                      ? 'border-irohPurple-500 shadow-lg'
+                      : 'border-irohGray-300 dark:border-irohGray-700'
+                  } bg-white dark:bg-irohGray-800`}
+                >
+                  {plan.popular && (
+                    <span className="absolute -top-3 left-1/2 -translate-x-1/2 bg-irohPurple-500 text-white text-xs font-semibold px-3 py-1 rounded-full">
+                      Most popular
+                    </span>
+                  )}
+                  <h2 className="text-2xl font-bold text-irohPurple-500">{plan.name}</h2>
+                  <p className="mt-2 text-sm text-irohGray-500 dark:text-irohGray-400">
+                    {plan.description}
+                  </p>
+                  <p className="mt-6 flex items-baseline gap-x-1">
+                    <span className="text-4xl font-bold tracking-tight">{plan.price}</span>
+                    {plan.period && (
+                      <span className="text-sm font-semibold text-irohGray-500 dark:text-irohGray-400">
+                        {plan.period}
+                      </span>
+                    )}
+                  </p>
+                  <div className="flex-1">
+                    <div className="border-t border-irohGray-200 dark:border-irohGray-600 mt-6 pt-4" />
+                    <ul className="mt-2 space-y-3 text-sm">
+                      {plan.features.map((feature) => (
+                        <li key={feature} className="flex gap-x-3">
+                          <Check className="h-5 w-5 flex-none text-irohPurple-500" />
+                          {feature}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                  <Link
+                    href={plan.href}
+                    className={`mt-8 block rounded-md py-2.5 px-3 text-center text-sm font-semibold transition-colors ${
+                      plan.popular
+                        ? 'bg-irohPurple-500 text-white hover:bg-irohPurple-400'
+                        : 'border border-irohPurple-500 text-irohPurple-500 hover:bg-irohPurple-500/10'
+                    }`}
+                  >
+                    {plan.buttonLabel}
+                  </Link>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Feature Comparison Grid */}
+        <section className="py-20 px-6 border-b border-irohGray-300 dark:border-irohGray-800">
+          <div className="container mx-auto max-w-5xl">
+            <h2 className="text-3xl font-bold mb-8 text-center">Compare plans</h2>
+            <div className="overflow-x-auto">
+              <table className="w-full text-base min-w-[600px]">
+                <thead>
+                  <tr className="border-b border-irohGray-300 dark:border-irohGray-700">
+                    <th className="pb-4 text-left" />
+                    <th className="pb-4 px-6 text-center text-lg font-bold text-irohPurple-500">Free</th>
+                    <th className="pb-4 px-6 text-center text-lg font-bold text-irohPurple-500">Pro</th>
+                    <th className="pb-4 px-6 text-center text-lg font-bold text-irohPurple-500">Enterprise</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {featureSections.map((section) => {
+                    const Icon = sectionIcons[section.name]
+                    return (
+                      <Fragment key={section.name}>
+                        <tr>
+                          <td className="pt-8 pb-4 pl-2 font-bold text-xl border-b-2 border-irohPurple-500/30" colSpan={4}>
+                            <span className="inline-flex items-center gap-3 text-irohPurple-500">
+                              {Icon && <Icon className="h-5 w-5" />}
+                              {section.name}
+                            </span>
+                          </td>
+                        </tr>
+                        {section.features.map((feature) => (
+                          <tr key={feature.name} className="border-b border-dotted border-irohGray-300 dark:border-irohGray-700">
+                            <td className="pl-2 pr-8 py-4 font-medium text-irohGray-600 dark:text-irohGray-300">
+                              {feature.name}
+                            </td>
+                            <FeatureCell value={feature.free} note={feature.freeNote} />
+                            <FeatureCell value={feature.pro} note={feature.proNote} />
+                            <FeatureCell value={feature.enterprise} note={feature.enterpriseNote} />
+                          </tr>
+                        ))}
+                      </Fragment>
+                    )
+                  })}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </section>
+
+        {/* Calculator */}
+        <section className="py-20 px-6 border-b border-irohGray-300 dark:border-irohGray-800">
+          <div className="container mx-auto max-w-5xl">
+            <PricingCalculator />
+          </div>
+        </section>
+
+        {/* CTA */}
+        <section className="py-20 px-6">
+          <div className="container mx-auto max-w-4xl text-center">
+            <p className="text-irohGray-600 dark:text-irohGray-300">
+              Need hosting, support or development?{' '}
+              <a
+                href={CAL_URL}
+                className="text-irohPurple-500 hover:underline"
+              >
+                Book a meeting
+              </a>
+            </p>
+          </div>
+        </section>
+      </div>
+
+      <FooterMarketing />
+    </div>
+  )
+}
+
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index a273f2f7..973fb623 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -30,7 +30,7 @@ export const navItems = [
   ]},
   {content: 'Docs', href: 'https://docs.iroh.computer/'},
   {content: 'Blog', href: '/blog'},
-  {content: 'Roadmap', href: '/roadmap'},
+  {content: 'Pricing', href: '/pricing'},
 ];
 
 export function TopLevelNavItem({href, children}) {
diff --git a/src/components/PricingCalculator.jsx b/src/components/PricingCalculator.jsx
new file mode 100644
index 00000000..e3163021
--- /dev/null
+++ b/src/components/PricingCalculator.jsx
@@ -0,0 +1,183 @@
+'use client'
+
+import { useState } from 'react'
+
+const PRO_BASE = 19
+const INCLUDED_ENDPOINTS = 100
+const ENDPOINT_RATE = 0.50
+const METRICS_RATE = 1.49
+const RELAY_RATE = 199
+
+const relayOptions = [0, 1, 2, 3, 4, 5]
+const peakConnectionOptions = [100, 200, 300, 500, 1000, 2000, 5000, 10000]
+const avgConnectionOptions = [1, 10, 50, 100, 250, 500, 1000, 2000, 5000]
+const metricsPerNodeOptions = [87, 90, 100, 110]
+
+const frequencyOptions = [
+  { label: 'Every minute', value: '1', factor: 1 },
+  { label: 'Every 5 minutes', value: '0.2', factor: 0.2 },
+  { label: 'Every hour', value: '0.0167', factor: 1 / 60 },
+  { label: 'Every day', value: '0.0007', factor: 1 / 1440 },
+]
+
+function formatPrice(n) {
+  return `$${n.toFixed(2)}`
+}
+
+function formatNumber(n) {
+  return n.toLocaleString()
+}
+
+function SelectInput({ label, description, value, onChange, options, formatOption }) {
+  return (
+    <div className="space-y-2">
+      <label className="text-base font-medium text-irohGray-800 dark:text-irohGray-100">{label}</label>
+      <p className="text-sm text-irohGray-500 dark:text-irohGray-400">{description}</p>
+      <select
+        value={value}
+        onChange={(e) => onChange(Number(e.target.value))}
+        className="w-40 rounded-md border border-irohGray-300 dark:border-irohGray-600 bg-white dark:bg-irohGray-800 text-irohGray-800 dark:text-irohGray-100 px-3 py-2 text-sm"
+      >
+        {options.map((opt) => (
+          <option key={opt} value={opt}>
+            {formatOption ? formatOption(opt) : formatNumber(opt)}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}
+
+export function PricingCalculator() {
+  const [relays, setRelays] = useState(1)
+  const [peakConnections, setPeakConnections] = useState(500)
+  const [avgConnections, setAvgConnections] = useState(100)
+  const [metricsPerNode, setMetricsPerNode] = useState(87)
+  const [frequency, setFrequency] = useState('1')
+
+  const freq = frequencyOptions.find((f) => f.value === frequency)?.factor ?? 1
+  const dpm = avgConnections * metricsPerNode * freq
+
+  const extraConnections = Math.max(0, peakConnections - INCLUDED_ENDPOINTS)
+  const connectionsCost = (extraConnections / 100) * ENDPOINT_RATE
+  const metricsCost = (dpm / 1000) * METRICS_RATE
+  const relayCost = relays * RELAY_RATE
+  const total = PRO_BASE + connectionsCost + metricsCost + relayCost
+
+  return (
+    <div className="mt-16 mb-8 max-w-5xl mx-auto">
+      <h2 className="text-2xl font-bold text-center mb-2">Estimate your monthly cost</h2>
+      <p className="text-center text-irohGray-500 dark:text-irohGray-400 mb-8">
+        Adjust the values to see what Pro would cost for your workload.
+      </p>
+      <div className="rounded-lg border border-irohGray-300 dark:border-irohGray-700 p-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          {/* Inputs */}
+          <div className="space-y-6">
+            <SelectInput
+              label="Number of relays"
+              description="Dedicated relay servers for your application"
+              value={relays}
+              onChange={setRelays}
+              options={relayOptions}
+            />
+            <SelectInput
+              label="Peak concurrent endpoints"
+              description="Maximum endpoints sending metrics at the same time"
+              value={peakConnections}
+              onChange={setPeakConnections}
+              options={peakConnectionOptions}
+            />
+            <SelectInput
+              label="Average endpoints"
+              description="Average number of connected endpoints"
+              value={avgConnections}
+              onChange={setAvgConnections}
+              options={avgConnectionOptions}
+            />
+            <SelectInput
+              label="Metrics per endpoint"
+              description="Number of metric series each endpoint reports"
+              value={metricsPerNode}
+              onChange={setMetricsPerNode}
+              options={metricsPerNodeOptions}
+            />
+            <div className="space-y-2">
+              <label className="text-base font-medium text-irohGray-800 dark:text-irohGray-100">Push frequency</label>
+              <p className="text-sm text-irohGray-500 dark:text-irohGray-400">
+                How often each endpoint pushes metrics
+              </p>
+              <select
+                value={frequency}
+                onChange={(e) => setFrequency(e.target.value)}
+                className="w-40 rounded-md border border-irohGray-300 dark:border-irohGray-600 bg-white dark:bg-irohGray-800 text-irohGray-800 dark:text-irohGray-100 px-3 py-2 text-sm"
+              >
+                {frequencyOptions.map((opt) => (
+                  <option key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <p className="text-base text-irohGray-500 dark:text-irohGray-400">
+              Calculated DPM:{' '}
+              <span className="font-medium text-irohGray-800 dark:text-irohGray-100">
+                {formatNumber(Math.round(dpm))}
+              </span>
+            </p>
+          </div>
+
+          {/* Cost breakdown */}
+          <div className="rounded-lg border border-irohGray-300 dark:border-irohGray-700 bg-irohGray-100 dark:bg-irohGray-800 p-6">
+            <h3 className="text-xl font-bold mb-6">Cost breakdown</h3>
+            <div className="space-y-4 text-base">
+              <div className="flex justify-between">
+                <span>Pro plan base</span>
+                <span className="font-medium">{formatPrice(PRO_BASE)}/mo</span>
+              </div>
+
+              <div>
+                <div className="flex justify-between">
+                  <span>Relays</span>
+                  <span className="font-medium">{formatPrice(relayCost)}/mo</span>
+                </div>
+                <p className="text-sm text-irohGray-500 dark:text-irohGray-400 mt-0.5">
+                  {relays} &times; ${RELAY_RATE}/each
+                </p>
+              </div>
+
+              <div>
+                <div className="flex justify-between">
+                  <span>Connections</span>
+                  <span className="font-medium">{formatPrice(connectionsCost)}/mo</span>
+                </div>
+                <p className={`text-sm text-irohGray-500 dark:text-irohGray-400 mt-0.5 ${extraConnections === 0 ? 'italic' : ''}`}>
+                  {extraConnections === 0
+                    ? 'Included in base plan'
+                    : `${formatNumber(extraConnections)} extra \u00d7 $${ENDPOINT_RATE}/100`}
+                </p>
+              </div>
+
+              <div>
+                <div className="flex justify-between">
+                  <span>Metrics DPM</span>
+                  <span className="font-medium">{formatPrice(metricsCost)}/mo</span>
+                </div>
+                <p className="text-sm text-irohGray-500 dark:text-irohGray-400 mt-0.5">
+                  {formatNumber(Math.round(dpm))} DPM &times; ${METRICS_RATE}/1K
+                </p>
+              </div>
+
+              <div className="border-t border-irohGray-300 dark:border-irohGray-600 pt-4">
+                <div className="flex justify-between text-lg font-bold">
+                  <span>Estimated total</span>
+                  <span>{formatPrice(total)}/mo</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}