Live social-proof counter on the landing page, tied to the E2E
narrative. Formatted as understated mono footer, not hero brag.
Backend — new GET /api/public/stats (unauthed, 60s in-memory cache):
{
messagesRouted: SELECT COUNT(*) FROM mesh.message_queue,
meshesCreated: SELECT COUNT(*) FROM mesh.mesh WHERE archivedAt IS NULL,
peersActive: SELECT COUNT(*) FROM mesh.presence WHERE disconnectedAt IS NULL,
lastUpdated: ISO timestamp,
}
Aggregate counts only — no ids, no names, no ciphertext, no routing
metadata. Safe for public consumption. cache-control header sets
public/s-maxage=60 for edge caching. `x-cache: HIT|MISS` for debug.
Frontend — new MeshStats Server Component at
modules/marketing/home/mesh-stats.tsx. Reads the endpoint server-side
via the ~/lib/api/server client, renders monospace footer:
ciphertext routed → 4,217 messages · 12 meshes · 8 peers online
broker sees none of it
Graceful zero state: when messagesRouted === 0 shows
"ciphertext → ready to route" instead of embarrassing zeros. Tabular-
nums for the numeric spans so they don't jitter across renders.
Mounted between <CallToAction /> and <LatestNewsToaster />. Page-level
`export const revalidate = 60` so Next.js ISR refreshes the counter
every minute without a DB hit on every request (combined with the
API cache = two-layer 60s TTL, DB sees ~1 query/minute).
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
44 lines
1.5 KiB
TypeScript
44 lines
1.5 KiB
TypeScript
import { Hero } from "~/modules/marketing/home/hero";
|
|
import { Surfaces } from "~/modules/marketing/home/surfaces";
|
|
import { Pricing } from "~/modules/marketing/home/pricing";
|
|
import { LaptopToLaptop } from "~/modules/marketing/home/laptop-to-laptop";
|
|
import { Features } from "~/modules/marketing/home/features";
|
|
import { MeetsYou } from "~/modules/marketing/home/meets-you";
|
|
import { BeyondTerminal } from "~/modules/marketing/home/beyond-terminal";
|
|
import { DemoDashboard } from "~/modules/marketing/home/demo-dashboard";
|
|
import { WhatIsClaudemesh } from "~/modules/marketing/home/what-is-claudemesh";
|
|
import { FAQ } from "~/modules/marketing/home/faq";
|
|
import { CallToAction } from "~/modules/marketing/home/cta";
|
|
import { MeshStats } from "~/modules/marketing/home/mesh-stats";
|
|
import { LatestNewsToaster } from "~/modules/marketing/home/toaster";
|
|
|
|
// Revalidate the page every 60s so the mesh-stats counter stays fresh
|
|
// without hammering the DB. The /api/public/stats endpoint has its own
|
|
// 60s in-memory cache too.
|
|
export const revalidate = 60;
|
|
|
|
const HomePage = () => {
|
|
return (
|
|
<div
|
|
className="bg-[var(--cm-bg)] text-[var(--cm-fg)] antialiased"
|
|
style={{ fontFamily: "var(--cm-font-sans)" }}
|
|
>
|
|
<Hero />
|
|
<Surfaces />
|
|
<Pricing />
|
|
<LaptopToLaptop />
|
|
<Features />
|
|
<MeetsYou />
|
|
<WhatIsClaudemesh />
|
|
<DemoDashboard />
|
|
<BeyondTerminal />
|
|
<FAQ />
|
|
<CallToAction />
|
|
<MeshStats />
|
|
<LatestNewsToaster />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default HomePage;
|