Commit13ac035unknown_key
polish(pricing): bundle-math vs GitHub positioning + 'Better deal' card (session 1.2)
polish(pricing): bundle-math vs GitHub positioning + 'Better deal' card (session 1.2)
Phase 1.2 — pricing page polish to land the 'we offer more than GitHub'
positioning the user asked for.
Changes to src/routes/pricing.tsx:
1. Hero rewritten. Old:
'Free for the AI-curious. Pay only when you're ready to scale.'
New:
'One subscription. Replaces three on GitHub.'
Sub-copy now lands the actual math: 'AI code review, autonomous
PRs, code completion, and the git host itself — bundled. What
costs $89/user on GitHub + Copilot + Advanced Security starts
at $0 here.'
The 'Bundle math vs GitHub' anchor jumps visitors straight to
the comparison block — the most persuasive content on the page.
2. NEW '#compare' section between plan cards and free tier:
Side-by-side cost comparison.
GitHub stack Gluecron Team
───────────────── ─────────────
$89/user/mo $29/user/mo
$21 Enterprise ✓ Unlimited private repos
$19 Copilot Business ✓ AI code review (Sonnet)
$49 Advanced Security ✓ AI auto-merge
(3 items) ✓ AI incident responder
— No AI auto-merge ✓ AI spec-to-PR
— No AI incident resp. ✓ AI completion + commits + tests
— No AI spec-to-PR ✓ MCP-native (Claude Desktop)
— No MCP ✓ SSO + audit + branch protection
Footer: 'For a 10-person team, $10,680/year on GitHub vs
$3,480/year on Gluecron.'
The Gluecron column has a 'Better deal' tag, accent gradient
border, and subtle glow shadow. The GitHub column is muted.
Side-by-side at >720px, stacked on mobile.
3. New CSS: .pl-compare, .pl-compare-grid, .pl-compare-col,
.pl-compare-us (the highlighted side), .pl-compare-name,
.pl-compare-price (56px display font, dropping to 44px mobile),
.pl-compare-feats, .pl-compare-bullet, .pl-compare-check,
.pl-compare-missing, .pl-compare-footer. All theme-aware via
existing --bg-elevated / --border / --accent tokens.
4. Test updated: src/__tests__/pricing-page.test.ts now asserts
the new hero copy + the comparison block renders. Comment
explains the rewrite so future grep-debugging is fast.
Tests: 2003/2003 pass. tsc clean.
What the user sees: a pricing page that doesn't ask 'do you want
git hosting?' — it asks 'do you want to keep paying $89/user/mo
for things you could get for $29 and still get more?'2 files changed+194−813ac035918bbbbaf0df7a608e64134f538711776
2 changed files+194−8
Modifiedsrc/__tests__/pricing-page.test.ts+11−3View fileUnifiedSplit
@@ -87,10 +87,18 @@ describe("L8 — /pricing public page", () => {
8787 expect(res.status).not.toBe(401);
8888 });
8989
90 it("hero copy contains the L8 tagline", async () => {
90 it("hero copy reflects the 2026 polish — bundle-math positioning", async () => {
91 // 2026-05-16 polish — pricing hero copy rewritten to emphasise the
92 // "GitHub bundle math" positioning instead of the original
93 // "Free for the AI-curious" line. The new hero leads with "One
94 // subscription. Replaces three on GitHub." and the sub-copy lands
95 // the $89/user/mo GitHub-stack comparison.
9196 const res = await app.request("/pricing");
9297 const body = await res.text();
93 expect(body).toContain("Free for the AI-curious.");
94 expect(body).toContain("Pay only when you're ready to scale.");
98 expect(body).toContain("One subscription.");
99 expect(body).toContain("Replaces three on GitHub.");
100 // The "vs GitHub bundle math" comparison block must render.
101 expect(body).toContain("Bundle math vs GitHub");
102 expect(body).toContain("$89");
95103 });
96104});
Modifiedsrc/routes/pricing.tsx+183−5View fileUnifiedSplit
@@ -85,15 +85,19 @@ const PricingPage: FC<{ plans: Plan[]; loggedIn: boolean }> = ({
8585 <header class="pl-hero">
8686 <div class="eyebrow">Pricing</div>
8787 <h1 class="display pl-hero-title">
88 Free for the AI-curious.{" "}
89 <span class="gradient-text">Pay only when you're ready to scale.</span>
88 One subscription.{" "}
89 <span class="gradient-text">
90 Replaces three on GitHub.
91 </span>
9092 </h1>
9193 <p class="pl-hero-sub">
92 Self-host on your own server and pay zero per-seat fees. Or use
93 Gluecron Cloud for managed convenience.
94 AI code review, autonomous PRs, code completion, and the git host
95 itself — bundled. What costs $89/user on GitHub + Copilot + Advanced
96 Security starts at $0 here.
9497 </p>
9598 <div class="pl-hero-jumps">
96 <a href="#free" class="pl-jump">What's free →</a>
99 <a href="#compare" class="pl-jump">Bundle math vs GitHub →</a>
100 <a href="#free" class="pl-jump">What's free</a>
97101 <a href="#self-host" class="pl-jump">Self-host vs Cloud</a>
98102 <a href="#faq" class="pl-jump">FAQ</a>
99103 </div>
@@ -106,6 +110,56 @@ const PricingPage: FC<{ plans: Plan[]; loggedIn: boolean }> = ({
106110 ))}
107111 </section>
108112
113 {/* ------------------- Bundle math vs GitHub ------------------- */}
114 <section id="compare" class="pl-section pl-compare">
115 <div class="section-header">
116 <div class="eyebrow">Bundle math</div>
117 <h2>
118 What you'd actually pay on GitHub
119 <span class="gradient-text"> for the same features.</span>
120 </h2>
121 <p>
122 GitHub charges separately for Copilot, Advanced Security, and the
123 base plan. Gluecron bundles everything. Here's the receipt.
124 </p>
125 </div>
126 <div class="pl-compare-grid">
127 <div class="pl-compare-col">
128 <div class="pl-compare-name">GitHub stack</div>
129 <div class="pl-compare-price">$89<span class="pl-compare-per">/user/mo</span></div>
130 <ul class="pl-compare-feats">
131 <li><span class="pl-compare-bullet">$21</span> GitHub Enterprise (per-user)</li>
132 <li><span class="pl-compare-bullet">$19</span> GitHub Copilot Business</li>
133 <li><span class="pl-compare-bullet">$49</span> GitHub Advanced Security add-on</li>
134 <li class="pl-compare-missing">— No AI auto-merge</li>
135 <li class="pl-compare-missing">— No AI incident responder</li>
136 <li class="pl-compare-missing">— No AI spec-to-PR</li>
137 <li class="pl-compare-missing">— No MCP-native integration</li>
138 </ul>
139 </div>
140 <div class="pl-compare-col pl-compare-us">
141 <div class="pl-compare-name">Gluecron Team</div>
142 <div class="pl-compare-price">$29<span class="pl-compare-per">/user/mo</span></div>
143 <ul class="pl-compare-feats">
144 <li><span class="pl-compare-check">✓</span> Unlimited private repos + git host</li>
145 <li><span class="pl-compare-check">✓</span> AI code review on every PR (Claude Sonnet)</li>
146 <li><span class="pl-compare-check">✓</span> AI auto-merge when gates pass</li>
147 <li><span class="pl-compare-check">✓</span> AI incident responder on deploy failure</li>
148 <li><span class="pl-compare-check">✓</span> AI spec-to-PR (label an issue, get a PR)</li>
149 <li><span class="pl-compare-check">✓</span> AI completion + commit messages + tests</li>
150 <li><span class="pl-compare-check">✓</span> MCP server — drive it from Claude Desktop</li>
151 <li><span class="pl-compare-check">✓</span> SSO, audit log, branch protection, rulesets</li>
152 </ul>
153 </div>
154 </div>
155 <p class="pl-compare-footer">
156 For a 10-person team, the math is{" "}
157 <strong>$10,680/year on GitHub vs $3,480/year on Gluecron</strong>
158 {" — "}
159 and you get the AI features that don't exist on GitHub at any price.
160 </p>
161 </section>
162
109163 {/* ------------------- What's on the free tier ------------------- */}
110164 <section id="free" class="pl-section pl-free">
111165 <div class="section-header">
@@ -547,6 +601,130 @@ const pricingCss = `
547601 }
548602 .pl-host-cta { margin-top: auto; }
549603
604 /* ------------------- Bundle-math comparison (vs GitHub) ------------------- */
605 /* 2026 polish — side-by-side cost comparison that makes the AI-bundled
606 value proposition unmissable. Same visual rhythm as .pl-host-grid; the
607 "us" side wins via accent border + subtle gradient glow. */
608 .pl-compare {
609 margin-top: var(--space-7);
610 }
611 .pl-compare-grid {
612 display: grid;
613 grid-template-columns: 1fr 1fr;
614 gap: var(--space-5);
615 max-width: 1040px;
616 margin: 0 auto;
617 }
618 .pl-compare-col {
619 background: var(--bg-elevated);
620 border: 1px solid var(--border);
621 border-radius: 16px;
622 padding: var(--space-5) var(--space-5) var(--space-6);
623 display: flex;
624 flex-direction: column;
625 transition: transform var(--t-base, 180ms) var(--ease, ease),
626 box-shadow var(--t-base, 180ms) var(--ease, ease);
627 }
628 .pl-compare-col:hover { transform: translateY(-2px); }
629 .pl-compare-us {
630 position: relative;
631 border: 1px solid transparent;
632 background-image:
633 linear-gradient(var(--bg-elevated), var(--bg-elevated)),
634 linear-gradient(135deg, #8c6dff 0%, #36c5d6 100%);
635 background-origin: border-box;
636 background-clip: padding-box, border-box;
637 box-shadow: 0 16px 56px -12px rgba(140, 109, 255, 0.20);
638 }
639 .pl-compare-us::before {
640 content: 'Better deal';
641 position: absolute;
642 top: -12px;
643 left: 50%;
644 transform: translateX(-50%);
645 padding: 4px 12px;
646 border-radius: 999px;
647 background: linear-gradient(135deg, #8c6dff 0%, #36c5d6 100%);
648 color: #fff;
649 font-size: 11px;
650 font-weight: 600;
651 letter-spacing: 0.04em;
652 text-transform: uppercase;
653 white-space: nowrap;
654 }
655 .pl-compare-name {
656 font-size: 14px;
657 font-weight: 600;
658 color: var(--text-muted);
659 text-transform: uppercase;
660 letter-spacing: 0.08em;
661 margin-bottom: var(--space-2);
662 }
663 .pl-compare-us .pl-compare-name {
664 color: var(--accent);
665 }
666 .pl-compare-price {
667 font-family: var(--font-display);
668 font-size: 56px;
669 font-weight: 800;
670 letter-spacing: -0.03em;
671 line-height: 1;
672 color: var(--text-strong);
673 margin-bottom: var(--space-5);
674 }
675 .pl-compare-per {
676 font-size: 16px;
677 font-weight: 500;
678 color: var(--text-muted);
679 margin-left: 4px;
680 letter-spacing: 0;
681 }
682 .pl-compare-feats {
683 list-style: none;
684 padding: 0;
685 margin: 0;
686 display: flex;
687 flex-direction: column;
688 gap: 10px;
689 font-size: 14.5px;
690 line-height: 1.5;
691 color: var(--text);
692 }
693 .pl-compare-bullet {
694 display: inline-block;
695 min-width: 44px;
696 font-family: var(--font-mono);
697 font-weight: 600;
698 color: var(--text-muted);
699 margin-right: 8px;
700 }
701 .pl-compare-check {
702 display: inline-block;
703 min-width: 22px;
704 color: var(--accent);
705 font-weight: 700;
706 }
707 .pl-compare-missing {
708 color: var(--text-muted);
709 font-style: italic;
710 }
711 .pl-compare-footer {
712 max-width: 720px;
713 margin: var(--space-6) auto 0;
714 text-align: center;
715 font-size: 16px;
716 line-height: 1.55;
717 color: var(--text);
718 }
719 .pl-compare-footer strong {
720 color: var(--text-strong);
721 background-image: linear-gradient(transparent 62%, rgba(140, 109, 255, 0.18) 62%);
722 }
723 @media (max-width: 720px) {
724 .pl-compare-grid { grid-template-columns: 1fr; }
725 .pl-compare-price { font-size: 44px; }
726 }
727
550728 /* FAQ */
551729 .pl-faq {
552730 max-width: 760px;
553731