5e97d48cd5
- New hero section with a live animated mesh background: three equal Claude Code peers in a triangle layout + six desaturated background peers, all rendered pixel-perfect from pure React/CSS using the exact Unicode characters and colors from Claude Code's own source. - User prompts type into the bottom prompt-input box and "submit" to scrollback (matching real Claude Code behavior). Mesh sends fly as envelope icons with fading trails between peers; receivers pulse on arrival. Dynamic routing by peer displayName. - Radial vignette overlay keeps the hero title crisp while letting the corner peers pulse visibly around the edges. Top/bottom linear fades bleed into adjacent sections. - Responsive scaling via ResizeObserver: cover-fit in hero bg context, contain-fit for standalone use. - Features section: added Skills, MCPs, and Commands as the first three tabs — the mesh's real differentiators. Updated subtitle copy. - New "Where claudemesh fits" section positioned between Features and WhatIsClaudemesh: four-card comparison (vs MCP, vs subagents, vs OpenClaw, and the positive claim) framing claudemesh as a wire between Claude Code sessions, not a replacement for any of them. All work is additive: 10 new files in apps/web/src/modules/marketing/ home/fake-claude-code/ plus hero-mesh-animation.tsx, hero-with-mesh.tsx, and where-mesh-fits.tsx. Single edit each to features.tsx and (marketing)/page.tsx to swap in the new hero and mount the new section. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
import { HeroWithMesh } from "~/modules/marketing/home/hero-with-mesh";
|
|
import { Features } from "~/modules/marketing/home/features";
|
|
import { WhereMeshFits } from "~/modules/marketing/home/where-mesh-fits";
|
|
import { WhatIsClaudemesh } from "~/modules/marketing/home/what-is-claudemesh";
|
|
import { Timeline } from "~/modules/marketing/home/timeline";
|
|
import { Pricing } from "~/modules/marketing/home/pricing";
|
|
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";
|
|
|
|
export const revalidate = 60;
|
|
|
|
const HomePage = () => {
|
|
return (
|
|
<div
|
|
className="bg-[var(--cm-bg)] text-[var(--cm-fg)] antialiased"
|
|
style={{ fontFamily: "var(--cm-font-sans)" }}
|
|
>
|
|
<HeroWithMesh />
|
|
<Features />
|
|
<WhereMeshFits />
|
|
<WhatIsClaudemesh />
|
|
<Timeline />
|
|
<Pricing />
|
|
<FAQ />
|
|
<CallToAction />
|
|
<MeshStats />
|
|
<LatestNewsToaster />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default HomePage;
|