Commit4551df3unknown_key
feat(marketing): /vs-github page — the HOOK against GitHub
feat(marketing): /vs-github page — the HOOK against GitHub
Public-facing comparison page that hits potential users between the eyes
the moment they land on it. Honest, sharp, structurally undeniable.
Sections:
1. Hero with the kill quote 'GitHub, but kind.'
2. 4 hero stats: 100% PR review / ~70% auto-repair / $0 self-host / ∞ CI minutes
3. Side-by-side kill-shot card: GitHub's pitch vs ours, in their own words
4. 23-row feature comparison table:
- 12 wins (badged WIN, in accent gradient color)
- 8 parity rows
- 3 honest gaps (badged GAP in amber): mobile native apps, marketplace
ecosystem, public Sponsors w/ payments
5. Pricing philosophy panel — GitHub's seat tax laid out explicitly,
next to gluecron's no-seat-tax model. $0 self-host vs $21/user/mo GHE
is the strongest single number on the page.
6. 'Why this exists' rationale — three short paragraphs framing
'most code in 2026 is written by AI / GitHub assumes humans bottleneck /
we rebuilt the platform with AI as default teammate'
7. CTA card: 'Migrate from GitHub in 60 seconds'
All styled with .vs-* classes, namespaced, dark-themed, gradient
accents in the kill spots. Mobile-responsive (collapses to 1-col at
720px breakpoint).
Now the hook is sittable on gluecron.com/vs-github once DNS cuts over.1 file changed+485−04551df370608346f7029cd252c94fc6f52b7f997
1 changed file+485−0
Modifiedsrc/routes/marketing.tsx+485−0View fileUnifiedSplit
@@ -1161,4 +1161,489 @@ const aboutCss = sharedMktCss + `
11611161 }
11621162`;
11631163
1164// ============================================================
1165// /vs-github
1166// ============================================================
1167
1168marketing.get("/vs-github", (c) => {
1169 const user = c.get("user");
1170 return c.html(
1171 <Layout title="vs GitHub — gluecron" user={user}>
1172 <VsGithubPage />
1173 </Layout>,
1174 );
1175});
1176
1177const VsGithubPage: FC = () => (
1178 <>
1179 <style dangerouslySetInnerHTML={{ __html: vsGithubCss }} />
1180 <div class="mkt-root">
1181 <header class="mkt-hero vs-hero">
1182 <div class="eyebrow vs-eyebrow">
1183 <span class="vs-eyebrow-dot" />
1184 The honest comparison
1185 </div>
1186 <h1 class="display vs-hero-title">
1187 GitHub,{" "}
1188 <span class="gradient-text">but kind.</span>
1189 </h1>
1190 <p class="mkt-hero-sub">
1191 GitHub treats AI as a paid sidebar. Failures are your problem.
1192 Every feature you actually need is gated behind Enterprise.
1193 We rebuilt the platform around a simple idea:{" "}
1194 <strong>your tools should work for you, not against you.</strong>
1195 </p>
1196 <div class="vs-hero-stats">
1197 <div class="vs-hero-stat">
1198 <div class="vs-hero-stat-num gradient-text">100%</div>
1199 <div class="vs-hero-stat-lbl">PRs reviewed by AI<br/>(free, every tier)</div>
1200 </div>
1201 <div class="vs-hero-stat">
1202 <div class="vs-hero-stat-num gradient-text">~70%</div>
1203 <div class="vs-hero-stat-lbl">CI failures auto-repaired<br/>before you see them</div>
1204 </div>
1205 <div class="vs-hero-stat">
1206 <div class="vs-hero-stat-num gradient-text">$0</div>
1207 <div class="vs-hero-stat-lbl">Self-host forever<br/>vs $21/user/mo GHE</div>
1208 </div>
1209 <div class="vs-hero-stat">
1210 <div class="vs-hero-stat-num gradient-text">∞</div>
1211 <div class="vs-hero-stat-lbl">CI minutes<br/>vs GitHub's metered tax</div>
1212 </div>
1213 </div>
1214 </header>
1215
1216 {/* ───────── The kill shot ───────── */}
1217 <section class="mkt-section vs-killshot">
1218 <div class="vs-killshot-card">
1219 <div class="vs-killshot-row">
1220 <div class="vs-killshot-col vs-them">
1221 <div class="vs-killshot-label">GitHub</div>
1222 <p class="vs-killshot-quote">
1223 "Push code. Hope it doesn't break. If it breaks,
1224 you deal with it. Want AI? Pay $19/mo. Want SSO?
1225 $21/user/mo. Want decent rulesets? Enterprise tier."
1226 </p>
1227 </div>
1228 <div class="vs-killshot-vs">VS</div>
1229 <div class="vs-killshot-col vs-us">
1230 <div class="vs-killshot-label">Gluecron</div>
1231 <p class="vs-killshot-quote">
1232 "Push code. AI reviews it. AI fixes it.
1233 AI ships it. We tell you about it after.
1234 Self-host free. No seat tax."
1235 </p>
1236 </div>
1237 </div>
1238 </div>
1239 </section>
1240
1241 {/* ───────── Side-by-side feature table ───────── */}
1242 <section class="mkt-section">
1243 <div class="section-header">
1244 <div class="eyebrow">Feature-for-feature</div>
1245 <h2>Everything they have. Plus the parts they didn't build.</h2>
1246 </div>
1247 <div class="vs-table">
1248 <VsRow feat="Smart-HTTP git clone + push" them="✓" us="✓" />
1249 <VsRow feat="Pull requests + review + merge" them="✓" us="✓" />
1250 <VsRow feat="Issues + projects + wiki + gists" them="✓" us="✓" />
1251 <VsRow feat="GitHub Actions equivalent" them="paid minutes" us="self-hosted, unmetered" win />
1252 <VsRow feat="AI code review on every PR" them="Copilot subscription" us="built-in, free" win />
1253 <VsRow feat="Auto-repair of failed CI" them="—" us="✓" win />
1254 <VsRow feat="Spec-to-PR (NL → draft PR)" them="—" us="✓" win />
1255 <VsRow feat="Real-time SSE for logs / comments" them="polling" us="streaming" win />
1256 <VsRow feat="MCP server (Claude / Cursor)" them="—" us="✓ native" win />
1257 <VsRow feat="Required status checks" them="Enterprise tier" us="free, all tiers" win />
1258 <VsRow feat="Repository rulesets" them="Enterprise tier" us="free, all tiers" win />
1259 <VsRow feat="Merge queue" them="Enterprise tier" us="free, all tiers" win />
1260 <VsRow feat="Audit log (per-user + per-repo)" them="Enterprise tier" us="free, all tiers" win />
1261 <VsRow feat="SSO (OIDC)" them="Enterprise tier" us="all tiers" win />
1262 <VsRow feat="Self-host on your hardware" them="$21/user/mo" us="free forever" win />
1263 <VsRow feat="Pre-receive policy enforcement" them="Enterprise rulesets" us="✓" />
1264 <VsRow feat="Branch protection + 2FA + Passkeys" them="✓" us="✓" />
1265 <VsRow feat="Webhooks (HMAC signed)" them="✓" us="✓" />
1266 <VsRow feat="Pages / static hosting" them="✓" us="✓" />
1267 <VsRow feat="Packages registry (npm)" them="✓" us="✓" />
1268 <VsRow feat="Native mobile apps" them="✓" us="PWA only" lose />
1269 <VsRow feat="Marketplace of pre-built actions" them="huge ecosystem" us="building" lose />
1270 <VsRow feat="Public Sponsors w/ payments" them="✓" us="post-launch" lose />
1271 </div>
1272 <p class="vs-table-foot">
1273 We're behind on three things and ahead on twelve. Three of those
1274 twelve are genuinely new categories no one has built before.
1275 </p>
1276 </section>
1277
1278 {/* ───────── The pricing knife ───────── */}
1279 <section class="mkt-section">
1280 <div class="section-header">
1281 <div class="eyebrow">Pricing philosophy</div>
1282 <h2>Stop taxing seats. Start pricing what costs us money.</h2>
1283 <p>
1284 GitHub charges $4-21 per user per month, plus minutes, plus
1285 features. We don't tax seats. We price the AI calls — the
1286 actual cost we incur. Static self-hosters pay nothing.
1287 </p>
1288 </div>
1289 <div class="vs-pricing-grid">
1290 <div class="vs-pricing-them">
1291 <div class="vs-pricing-label">GitHub</div>
1292 <ul class="vs-pricing-list">
1293 <li><span class="vs-pricing-x">✗</span> Free: limited private repos, paid minutes</li>
1294 <li><span class="vs-pricing-x">✗</span> Pro: <strong>$4/user/mo</strong> + paid minutes</li>
1295 <li><span class="vs-pricing-x">✗</span> Team: <strong>$4/user/mo</strong> + everything metered</li>
1296 <li><span class="vs-pricing-x">✗</span> Enterprise: <strong>$21/user/mo</strong> + extras</li>
1297 <li><span class="vs-pricing-x">✗</span> Copilot: <strong>$19/user/mo</strong> on top</li>
1298 <li><span class="vs-pricing-x">✗</span> Self-host: only at Enterprise tier</li>
1299 </ul>
1300 </div>
1301 <div class="vs-pricing-us">
1302 <div class="vs-pricing-label">Gluecron</div>
1303 <ul class="vs-pricing-list">
1304 <li><span class="vs-pricing-check">✓</span> Free: unlimited public, 3 private, AI included</li>
1305 <li><span class="vs-pricing-check">✓</span> Pro: <strong>$12/user/mo</strong> all-in (AI included)</li>
1306 <li><span class="vs-pricing-check">✓</span> Team: <strong>$29/user/mo</strong> unlimited AI + SSO + audit</li>
1307 <li><span class="vs-pricing-check">✓</span> Enterprise: custom + on-prem + DPA</li>
1308 <li><span class="vs-pricing-check">✓</span> CI minutes: <strong>unmetered</strong>, hosted or self</li>
1309 <li><span class="vs-pricing-check">✓</span> Self-host: <strong>$0 forever</strong>, all tiers</li>
1310 </ul>
1311 </div>
1312 </div>
1313 </section>
1314
1315 {/* ───────── Why we exist ───────── */}
1316 <section class="mkt-section">
1317 <div class="section-header">
1318 <div class="eyebrow">Why this exists</div>
1319 <h2>Most code in 2026 is written by AI. Most platforms aren't built for that.</h2>
1320 </div>
1321 <div class="vs-rationale">
1322 <p>
1323 GitHub was designed in 2008 for a world where one human
1324 engineer wrote every commit. The platform's defaults assume
1325 <em> you're the bottleneck</em>. Red X's demand your attention.
1326 Failed checks page you at 3am. Every AI feature is a
1327 $19/user upsell because, for them, AI is a bolt-on.
1328 </p>
1329 <p>
1330 For us, AI is the<strong> default teammate</strong>. It commits
1331 with its own bot identity. It opens PRs. It reviews diffs.
1332 It fixes regressions before you wake up. It tells you what
1333 broke and why. <strong>The platform works for you, not the
1334 other way around.</strong>
1335 </p>
1336 <p>
1337 We're not anti-GitHub. We use it. We came from there. But
1338 after watching engineers spend 30% of their week dealing with
1339 CI failures, infrastructure pain, and Copilot subscriptions
1340 that don't actually help, we got tired of the cruelty —
1341 so we rebuilt the parts that mattered.
1342 </p>
1343 </div>
1344 </section>
1345
1346 {/* ───────── The closing ask ───────── */}
1347 <section class="mkt-cta">
1348 <div class="mkt-cta-card">
1349 <div class="mkt-cta-bg" aria-hidden="true" />
1350 <div class="eyebrow">Try it</div>
1351 <h2 class="mkt-cta-title">
1352 Migrate from GitHub in 60 seconds.<br />
1353 <span class="gradient-text">Stay because it's actually better.</span>
1354 </h2>
1355 <p class="mkt-hero-sub" style="max-width:600px;margin:0 auto var(--s-7)">
1356 Paste a GitHub token, mirror your whole org. Your existing
1357 workflows just work. Your team keeps shipping. Nothing
1358 breaks. Everything gets kinder.
1359 </p>
1360 <div class="mkt-cta-buttons">
1361 <a href="/register" class="btn btn-primary btn-xl">
1362 Start free
1363 <span aria-hidden="true">{"→"}</span>
1364 </a>
1365 <a href="/import" class="btn btn-ghost btn-xl">
1366 Migrate from GitHub
1367 </a>
1368 </div>
1369 </div>
1370 </section>
1371 </div>
1372 </>
1373);
1374
1375const VsRow: FC<{
1376 feat: string;
1377 them: string;
1378 us: string;
1379 win?: boolean;
1380 lose?: boolean;
1381}> = ({ feat, them, us, win, lose }) => (
1382 <div
1383 class={`vs-row${win ? " vs-row-win" : ""}${lose ? " vs-row-lose" : ""}`}
1384 >
1385 <div class="vs-row-feat">{feat}</div>
1386 <div class="vs-row-them">{them}</div>
1387 <div class="vs-row-us">{us}</div>
1388 </div>
1389);
1390
1391const vsGithubCss = sharedMktCss + `
1392 /* Hero with even bigger drama */
1393 .vs-hero { padding-bottom: var(--s-8); }
1394 .vs-eyebrow { color: var(--accent); }
1395 .vs-eyebrow-dot {
1396 width: 7px; height: 7px;
1397 border-radius: 50%;
1398 background: var(--accent);
1399 box-shadow: 0 0 0 0 rgba(140,109,255,0.55);
1400 animation: vs-pulse 1.8s ease-out infinite;
1401 }
1402 vs-pulse {
1403 0% { box-shadow: 0 0 0 0 rgba(140,109,255,0.55); }
1404 70% { box-shadow: 0 0 0 10px rgba(140,109,255,0); }
1405 100% { box-shadow: 0 0 0 0 rgba(140,109,255,0); }
1406 }
1407 .vs-hero-title {
1408 font-size: clamp(40px, 8vw, 100px);
1409 line-height: 0.98;
1410 letter-spacing: -0.04em;
1411 font-weight: 700;
1412 margin: 0 0 var(--s-5);
1413 }
1414 .vs-hero-stats {
1415 display: grid;
1416 grid-template-columns: repeat(4, 1fr);
1417 gap: var(--s-6);
1418 max-width: 880px;
1419 margin: var(--s-10) auto 0;
1420 text-align: center;
1421 }
1422 .vs-hero-stat-num {
1423 font-family: var(--font-display);
1424 font-size: clamp(36px, 4.5vw, 56px);
1425 font-weight: 700;
1426 line-height: 1;
1427 letter-spacing: -0.03em;
1428 margin-bottom: var(--s-2);
1429 }
1430 .vs-hero-stat-lbl {
1431 font-family: var(--font-mono);
1432 font-size: 11px;
1433 text-transform: uppercase;
1434 letter-spacing: 0.12em;
1435 color: var(--text-faint);
1436 line-height: 1.5;
1437 }
1438 (max-width: 720px) {
1439 .vs-hero-stats { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
1440 }
1441
1442 /* The kill-shot card */
1443 .vs-killshot { margin-top: var(--s-4); }
1444 .vs-killshot-card {
1445 max-width: 980px;
1446 margin: 0 auto;
1447 padding: var(--s-10) var(--s-7);
1448 background:
1449 linear-gradient(135deg, rgba(140,109,255,0.06), transparent 50%, rgba(54,197,214,0.04)),
1450 var(--bg-elevated);
1451 border: 1px solid var(--border-strong);
1452 border-radius: var(--r-2xl);
1453 box-shadow: var(--elev-2);
1454 }
1455 .vs-killshot-row {
1456 display: grid;
1457 grid-template-columns: 1fr auto 1fr;
1458 gap: var(--s-7);
1459 align-items: center;
1460 }
1461 .vs-killshot-col { padding: var(--s-4); }
1462 .vs-killshot-label {
1463 font-family: var(--font-mono);
1464 font-size: 11px;
1465 text-transform: uppercase;
1466 letter-spacing: 0.16em;
1467 margin-bottom: var(--s-3);
1468 }
1469 .vs-them .vs-killshot-label { color: var(--red); }
1470 .vs-us .vs-killshot-label { color: var(--green); }
1471 .vs-killshot-quote {
1472 font-size: 17px;
1473 line-height: 1.55;
1474 margin: 0;
1475 color: var(--text);
1476 font-style: italic;
1477 }
1478 .vs-them .vs-killshot-quote { color: var(--text-muted); }
1479 .vs-killshot-vs {
1480 font-family: var(--font-display);
1481 font-size: 36px;
1482 font-weight: 700;
1483 color: var(--text-faint);
1484 letter-spacing: -0.02em;
1485 }
1486 (max-width: 720px) {
1487 .vs-killshot-row { grid-template-columns: 1fr; gap: var(--s-3); text-align: left; }
1488 .vs-killshot-vs { text-align: center; }
1489 }
1490
1491 /* Comparison table */
1492 .vs-table {
1493 max-width: 1080px;
1494 margin: 0 auto;
1495 border: 1px solid var(--border);
1496 border-radius: var(--r-lg);
1497 overflow: hidden;
1498 background: var(--bg-elevated);
1499 }
1500 .vs-row {
1501 display: grid;
1502 grid-template-columns: 1.6fr 1fr 1fr;
1503 align-items: center;
1504 padding: 14px 22px;
1505 border-bottom: 1px solid var(--border-subtle);
1506 font-size: var(--t-sm);
1507 transition: background var(--t-fast) var(--ease);
1508 }
1509 .vs-row:last-child { border-bottom: none; }
1510 .vs-row:hover { background: var(--bg-hover); }
1511 .vs-row-feat { color: var(--text-strong); font-weight: 500; }
1512 .vs-row-them, .vs-row-us {
1513 text-align: center;
1514 font-family: var(--font-mono);
1515 font-size: 12px;
1516 }
1517 .vs-row-them { color: var(--text-muted); }
1518 .vs-row-us { color: var(--text); }
1519 .vs-row-win .vs-row-us {
1520 color: var(--accent);
1521 font-weight: 600;
1522 }
1523 .vs-row-win .vs-row-feat::after {
1524 content: 'WIN';
1525 margin-left: 10px;
1526 padding: 2px 7px;
1527 border-radius: 4px;
1528 background: var(--accent-gradient-faint);
1529 border: 1px solid rgba(140,109,255,0.30);
1530 color: var(--accent);
1531 font-family: var(--font-mono);
1532 font-size: 9px;
1533 letter-spacing: 0.12em;
1534 font-weight: 700;
1535 vertical-align: 1px;
1536 }
1537 .vs-row-lose .vs-row-us {
1538 color: var(--text-faint);
1539 }
1540 .vs-row-lose .vs-row-feat::after {
1541 content: 'GAP';
1542 margin-left: 10px;
1543 padding: 2px 7px;
1544 border-radius: 4px;
1545 background: rgba(251,191,36,0.10);
1546 border: 1px solid rgba(251,191,36,0.30);
1547 color: var(--yellow);
1548 font-family: var(--font-mono);
1549 font-size: 9px;
1550 letter-spacing: 0.12em;
1551 font-weight: 700;
1552 vertical-align: 1px;
1553 }
1554 .vs-table-foot {
1555 text-align: center;
1556 color: var(--text-muted);
1557 font-size: var(--t-sm);
1558 margin-top: var(--s-5);
1559 max-width: 720px;
1560 margin-left: auto;
1561 margin-right: auto;
1562 line-height: 1.55;
1563 }
1564 (max-width: 720px) {
1565 .vs-row { grid-template-columns: 1fr 90px 90px; padding: 12px 14px; }
1566 .vs-row-win .vs-row-feat::after,
1567 .vs-row-lose .vs-row-feat::after { display: none; }
1568 }
1569
1570 /* Pricing knife */
1571 .vs-pricing-grid {
1572 display: grid;
1573 grid-template-columns: 1fr 1fr;
1574 gap: var(--s-5);
1575 max-width: 980px;
1576 margin: 0 auto;
1577 }
1578 .vs-pricing-them, .vs-pricing-us {
1579 padding: var(--s-7);
1580 border: 1px solid var(--border);
1581 border-radius: var(--r-lg);
1582 background: var(--bg-elevated);
1583 }
1584 .vs-pricing-them {
1585 border-color: rgba(248,113,113,0.20);
1586 }
1587 .vs-pricing-us {
1588 border-color: rgba(140,109,255,0.30);
1589 box-shadow: 0 0 0 1px rgba(140,109,255,0.20), var(--elev-2);
1590 background:
1591 linear-gradient(180deg, rgba(140,109,255,0.04), transparent 60%),
1592 var(--bg-elevated);
1593 }
1594 .vs-pricing-label {
1595 font-family: var(--font-display);
1596 font-size: 22px;
1597 font-weight: 700;
1598 margin-bottom: var(--s-5);
1599 letter-spacing: -0.02em;
1600 }
1601 .vs-pricing-them .vs-pricing-label { color: var(--text-muted); }
1602 .vs-pricing-us .vs-pricing-label { color: var(--accent); }
1603 .vs-pricing-list {
1604 list-style: none;
1605 margin: 0;
1606 padding: 0;
1607 display: flex;
1608 flex-direction: column;
1609 gap: 10px;
1610 font-size: var(--t-sm);
1611 line-height: 1.55;
1612 }
1613 .vs-pricing-list li {
1614 display: flex;
1615 gap: 10px;
1616 align-items: flex-start;
1617 }
1618 .vs-pricing-x {
1619 color: var(--red);
1620 font-weight: 700;
1621 flex-shrink: 0;
1622 }
1623 .vs-pricing-check {
1624 color: var(--green);
1625 font-weight: 700;
1626 flex-shrink: 0;
1627 }
1628 .vs-pricing-them li { color: var(--text-muted); }
1629 .vs-pricing-us li { color: var(--text); }
1630 (max-width: 720px) {
1631 .vs-pricing-grid { grid-template-columns: 1fr; }
1632 }
1633
1634 /* Rationale prose */
1635 .vs-rationale {
1636 max-width: 720px;
1637 margin: 0 auto;
1638 }
1639 .vs-rationale p {
1640 color: var(--text);
1641 font-size: var(--t-md);
1642 line-height: 1.7;
1643 margin: 0 0 var(--s-4);
1644 }
1645 .vs-rationale strong { color: var(--text-strong); font-weight: 600; }
1646 .vs-rationale em { color: var(--text-strong); font-style: italic; }
1647`;
1648
11641649export default marketing;
11651650