From fb10784c0146cbf97416d1c3d8a6c81450038b47 Mon Sep 17 00:00:00 2001 From: Oliver Date: Sun, 7 Jun 2026 06:23:21 -0300 Subject: [PATCH] pricing: 3 plans (Trainee/Junior/Senior) + monthly/yearly toggle + remove startup discount --- index.html | 447 +++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 317 insertions(+), 130 deletions(-) diff --git a/index.html b/index.html index 1c750d8..7ef6769 100644 --- a/index.html +++ b/index.html @@ -793,44 +793,97 @@ /* ══════════════════════════════════════════════════════════ PRICING ══════════════════════════════════════════════════════════ */ - .pricing-card { - max-width: 420px; + .pricing-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; + max-width: 960px; margin: 0 auto; + align-items: start; + } + .pricing-card { background: var(--bg-card); - border: 1px solid var(--border-hi); + border: 1px solid var(--border); border-radius: var(--radius-card); - padding: 44px 40px; + padding: 36px 28px; text-align: center; box-shadow: var(--shadow); + position: relative; + transition: border-color 0.2s, transform 0.2s; + } + .pricing-card.featured { + border-color: var(--accent); + background: linear-gradient(180deg, rgba(79, 142, 247, 0.06) 0%, var(--bg-card) 100%); + transform: scale(1.04); + } + .pricing-badge { + position: absolute; + top: -11px; + left: 50%; + transform: translateX(-50%); + background: var(--accent); + color: #fff; + font-size: 11px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.04em; + padding: 3px 18px; + border-radius: 20px; + } + .pricing-plan-name { + font-size: 13px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.06em; + color: var(--accent); + margin-bottom: 6px; } - .pricing-amount { font-size: 3rem; font-weight: 800; color: var(--text); line-height: 1; } - .pricing-amount span { - font-size: 1rem; + .pricing-amount .pricing-currency { font-size: 1.4rem; vertical-align: super; } + .pricing-period { + font-size: 0.9rem; font-weight: 500; color: var(--text-muted); } - .pricing-term { - font-size: 13px; + .pricing-yearly-bonus { + display: none; + font-size: 12px; + color: var(--success); + font-weight: 600; + margin-top: 4px; + } + .pricing-yearly-bonus.show { display: block; } + .pricing-plan-desc { + font-size: 12px; color: var(--text-muted); - margin: 6px 0 20px; + margin: 10px 0 14px; + line-height: 1.5; + } + .pricing-plan-quota { + font-size: 13px; + font-weight: 600; + color: var(--text); + padding: 8px 0; + border-top: 1px solid var(--border); + border-bottom: 1px solid var(--border); + margin-bottom: 14px; } .pricing-perks { list-style: none; text-align: left; - margin: 20px 0 28px; + margin: 14px 0 24px; } .pricing-perks li { display: flex; align-items: flex-start; - gap: 10px; - padding: 6px 0; - font-size: 14px; + gap: 8px; + padding: 4px 0; + font-size: 13px; color: var(--text); } .pricing-perks li svg { @@ -838,12 +891,79 @@ margin-top: 3px; color: var(--success); } - - .pricing-extra { - font-size: 12px; + .pricing-perks li.muted { color: var(--text-muted); - margin-top: 14px; - line-height: 1.6; + } + .pricing-perks li.muted svg { + color: var(--text-muted); + opacity: 0.4; + } + + /* ── Billing toggle ─────────────────────────────── */ + .pricing-billing-toggle { + display: flex; + align-items: center; + justify-content: center; + gap: 14px; + margin-bottom: 36px; + } + .billing-label { + font-size: 14px; + font-weight: 500; + color: var(--text-muted); + transition: color 0.2s; + } + .billing-label.active { color: var(--text); } + .toggle-switch { + position: relative; + width: 48px; + height: 26px; + cursor: pointer; + } + .toggle-switch input { + opacity: 0; + width: 0; + height: 0; + } + .toggle-slider { + position: absolute; + inset: 0; + background: var(--border); + border-radius: 26px; + transition: background 0.2s; + } + .toggle-slider::before { + content: ""; + position: absolute; + left: 3px; + top: 3px; + width: 20px; + height: 20px; + border-radius: 50%; + background: var(--text); + transition: transform 0.2s; + } + .toggle-switch input:checked + .toggle-slider { + background: var(--accent); + } + .toggle-switch input:checked + .toggle-slider::before { + transform: translateX(22px); + background: #fff; + } + .billing-save-badge { + font-size: 11px; + font-weight: 700; + color: var(--success); + background: rgba(63, 201, 126, 0.12); + padding: 2px 10px; + border-radius: 20px; + display: none; + } + .billing-save-badge.show { display: inline; } + + @media (max-width: 900px) { + .pricing-grid { grid-template-columns: 1fr; max-width: 420px; } + .pricing-card.featured { transform: none; } } /* ══════════════════════════════════════════════════════════ @@ -937,62 +1057,45 @@ gap: 20px; } - /* ── Pricing discount (strikethrough + badge) ─────────── */ - .pricing-original { - font-size: 1.2rem; - text-decoration: line-through; - color: var(--text-muted); - font-weight: 500; - margin-right: 6px; - opacity: 0.6; - } - .pricing-discounted { - font-size: inherit; - color: var(--success); - } - .pricing-discount-badge { - display: inline-flex; + /* ── Signup plan badges ──────────────────────────── */ + .signup-pricing-plans { + display: flex; align-items: center; - gap: 5px; - padding: 4px 12px; - background: rgba(63, 201, 126, 0.12); - border: 1px solid rgba(63, 201, 126, 0.3); - border-radius: 20px; + justify-content: center; + gap: 12px; + flex-wrap: wrap; + margin-bottom: 8px; + } + .signup-plan { + display: flex; + flex-direction: column; + align-items: center; + background: var(--bg-inner); + border: 1px solid var(--border); + border-radius: 12px; + padding: 10px 18px; + min-width: 90px; + transition: border-color 0.2s; + } + .signup-plan.featured { + border-color: var(--accent); + background: linear-gradient(180deg, rgba(79, 142, 247, 0.06) 0%, var(--bg-inner) 100%); + } + .signup-plan-name { + font-size: 11px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--accent); + } + .signup-plan-price { + font-size: 20px; + font-weight: 800; + color: var(--text); + } + .signup-pricing-badge .signup-pricing-term { font-size: 12px; - font-weight: 600; - color: var(--success); - margin: 6px 0 8px; - } - .pricing-amount { - display: flex; - align-items: baseline; - justify-content: center; - gap: 2px; - flex-wrap: wrap; - } - .pricing-amount .pricing-original { - font-size: 1.5rem; - } - .pricing-amount .pricing-discounted { - font-size: 3rem; - font-weight: 800; - } - .signup-pricing-amount { - display: flex; - align-items: baseline; - justify-content: center; - gap: 2px; - flex-wrap: wrap; - } - .signup-pricing-amount .pricing-original { - font-size: 1.1rem; - } - .signup-pricing-amount .pricing-discounted { - font-size: 24px; - font-weight: 800; - } - .signup-pricing-badge .pricing-discount-badge { - margin: 2px 0 6px; + color: var(--text-muted); } /* ══════════════════════════════════════════════════════════ @@ -1747,56 +1850,118 @@ Cancel anytime with monthly termination.

-
-
- $9.50 - $7.50 USD / month + +
+ Monthly + + Yearly + Save 1 month +
+ + +
+ + +
+
Trainee
+
+ $4.99 +
+
/ month
+
✨ +$4.99 OpenRouter credits
+

For getting started with your first agent.

+
1GB RAM · 10GB HDD
+
    +
  • + + Your Agent's Office (root access) +
    • +
  • + + Management dashboard +
    • +
  • + + Daily automatic backups +
    • +
  • + + OpenRouter key included +
    • +
  • + + Prompt Builder & Skills +
    • +
  • + + Support chat with human escalation +
    • +
+ Choose Trainee
-
- - Startup Discount −$2.00 + + +
+ Popular +
Junior
+
+ $9.50 +
+
/ month
+
✨ +$9.50 OpenRouter credits
+

The sweet spot for most users.

+
2GB RAM · 20GB HDD
+
    +
  • + + Everything in Trainee +
    • +
  • + + SSH access to your container +
    • +
  • + + On-demand backups +
    • +
  • + + Higher API key credit allocation +
    • +
+ Choose Junior
-

Per agent instance · Monthly termination · Limited time

-
    -
  • - - Your Agent's Office — container with root access -
    • -
  • - - Hermes or OpenClaw agent, bootstrapped & ready -
    • -
  • - - Daily auto backups + on-demand copies -
    • -
  • - - Management dashboard for all your agents -
    • -
  • - - OpenRouter key included (or bring your own) -
    • -
  • - - Support chat with human escalation -
    • -
  • - - Refer-a-friend: $5 credit per signup -
    • -
+ +
+
Senior
+
+ $17.50 +
+
/ month
+
✨ +$17.50 OpenRouter credits
+

For power users and teams.

+
4GB RAM · 40GB HDD
+
    +
  • + + Everything in Junior +
    • +
  • + + Email access for your agent +
    • +
  • + + Highest API key credit allocation +
    • +
+ Choose Senior +
- - Create Your Agent Now - - -

- Coupon codes available for $5 OpenRouter credits.
- Hosted in 🇫🇷 France. -

@@ -1835,7 +2000,7 @@
- Each agent instance is $9.50 USD per month with a $2.00 startup discount (you pay $7.50/mo). Monthly termination. Cancel anytime. Coupon codes are available for $5 OpenRouter credits to help you get started. + Three plans to fit your needs. Trainee at $4.99/mo (1GB RAM, 10GB HDD) for getting started. Junior at $9.50/mo (2GB RAM, 20GB HDD) with SSH access and on-demand backups — the sweet spot. Senior at $17.50/mo (4GB RAM, 40GB HDD) with email access. Go yearly and get one month's worth of OpenRouter credits on top. Cancel anytime with monthly termination.
@@ -1919,21 +2084,27 @@

Create Your AI Agent Now

- Sign up, pick your agent, and get your own container with full access — bootstrapped and ready. Billed monthly. + Sign up, pick your plan, and get your agent bootstrapped and ready in minutes.