pcbjam/features/lp/pcbjam-landing-page-copy-and-visuals.md
Viktor Vaczi 735d8a48ee feat(site): 🫙 PCBJam landing revisions — branding, accuracy, positioning graphic
Founder review pass on the landing page, plus commit the landing-page
research/spec docs under features/lp.

Branding & assets:
- New PCBJam mark: convert the jam-jar image to favicon.svg (trimmed, rounded
  tile) and use it in the browser tab, header, and footer.
- Footer "Built by": flower mark + "Emergence Engineering" in white Oswald (the
  blog's title font, self-hosted via @fontsource) so it's legible on dark.
- Produce the positioning quadrant graphic (public/graphics) and drop the placeholder.

Copy / accuracy:
- Remove header GitHub link; point "Built by EE" + footer "About" to
  emergence-engineering.com; Built-by CTA -> mailto:contact@emergence-engineering.com.
- Replace the wrong testimonial with Greg Detre's real quote from EE's site.
- Drop blog icons from Multiplayer/Pillars/How-it-works; add "Coming soon" to
  live-cursors & pin-comment; drop the hard-coded Yjs mention.
- Rework monetization to free+local / paid cloud-sync; remove "no metered AI",
  "no per-seat toll", and the Flux price claim; soften the AI section.
- Reframe waitlist copy (incl. confirmation email) to newsletter + early access.

Fixes:
- Offset only #waitlist for the sticky header (scroll-margin-top); section
  anchors keep their original behavior.

Docs:
- Commit features/lp (copy spec, brand guide, competitive research) via force-add
  over the /features/ gitignore.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-07 17:14:19 +02:00

736 lines
42 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# PCBJam — Landing Page Copy & Visuals Spec
> **What this is.** A build-ready, section-by-section outline of *copy* (verbatim-ready) and
> *visuals* (with real asset paths) for the **PCBJam** marketing site and its supporting pages.
> It synthesizes the competitive research in this folder (`competitor-landing-pages.md`,
> `competitive-analysis-synthesis.md`, `brand-guide.md`, `marketing-site-playbook.md`,
> `landing-page-best-practices.md`) with **Emergence Engineering's** existing brand, voice, and
> asset library (the `blog/` repo one level above this project root).
>
> Generated 2026-06-07. Treat copy as a strong first draft to edit, not gospel. Re-verify any
> external claim/number before publishing (see the point-in-time caveats in the research files).
---
## 0. Locked decisions (the brief)
These four choices were confirmed by the founder and drive everything below:
| Decision | Choice | Consequence for the page |
|---|---|---|
| **Product name** | **PCBJam** | Standalone brand that sits *on top of* KiCad. We borrow KiCad's trust by attribution ("built on KiCad"), not by putting "KiCad" in our product name — which keeps us clear of KiCad's trademark (see `brand-guide.md` §10). The "jam" metaphor (a session you invite people into) is the spine of the collaboration story. |
| **Launch status** | **Waitlist / early access** | The hero's job is **email capture**, not "start designing." There is no live in-browser editor on the page yet, so the **centerpiece is a looping demo video/GIF** of real multiplayer editing, not an embedded app. Every major CTA funnels to the waitlist. |
| **Product vs. consulting** | **Product-first, EE credit** | The page is ~100% about PCBJam. **Emergence Engineering appears as (a)** a quiet "Built by" credit in the header/footer, **(b)** one dedicated lower-page section that doubles as the consulting hook, and **(c)** a supporting `/built-by-emergence` page. Consulting never competes with the waitlist CTA above the fold. |
| **Open / pricing** | **Open + free to start, pricing later** | Lean hard into the **open-format / self-host / no-lock-in** pillar (our biggest wedge vs. Flux/Altium). Show **"Free to start"** but **no price table** yet — a short "How we'll make money (and what stays free)" block instead, to pre-empt the "is this going to get rug-pulled?" worry. |
> **Email note.** The company's real contact address in code is **`contact@emergence-engineering.com`**
> (hyphenated — the brief said `emergenceengineering.com` without the hyphen, which doesn't match the
> codebase or `viktor.vaczi@emergence-engineering.com`). This spec uses the **hyphenated** address
> everywhere. Confirm before publishing. PCBJam itself should get its own inbox too — suggest
> **`hello@pcbjam.com`** / **`waitlist@pcbjam.com`** so product mail and consulting mail don't mix.
---
## 1. The one-sentence positioning (north star)
> **PCBJam is the open-source PCB design tool that runs in your browser and lets your whole team
> edit the same board together, live — no install, no lock-in, free to start.**
**The wedge (the single sentence we win on):** PCBJam is the only PCB tool that is *browser-native*,
*truly real-time multiplayer*, **and** *open* — Flux's convenience without the lock-in or the
$112158/editor bill, KiCad's power without the install, and live co-editing that **no EDA tool,
desktop or cloud, actually delivers today**.
Supporting wedge points, in priority order (use these as the feature-pillar order too):
1. **True multiplayer** — your whole team, the same board, the same second. The only one.
2. **Open & yours** — real KiCad format, self-hostable, no lock-in. (vs. Flux/EasyEDA/Altium cloud traps)
3. **Zero install, any device** — a browser tab. Mac, Linux, Chromebook, iPad. (vs. all Windows-only desktop pros)
4. **Real KiCad, not a toy** — the actual engine compiled to WebAssembly. (answers "browser EDA = toy")
5. **AI when you want it, never a paywall** — contrarian, opt-in, calm. (vs. the AI-first crowd)
---
## 2. Voice & tone for PCBJam
A deliberate fusion (see `competitor-landing-pages.md` §4 "Tonal opening"):
- **OSS-honest credibility** (the LibrePCB/KiCad register) + **startup energy** (the Flux register),
warmed by **Emergence Engineering's own playful streak** ("Katy and Matt editing the same page? Not
a problem." / "Let's press the launch button. Shall we? :D").
- **Plain and precise.** Say what it does. *"Open a `.kicad_pcb` from a link. Two people edit it at
once."* — not *"Unleash your design potential."*
- **Confident, not hype.** Verbs and real file names over adjectives. The audience reads monospace
fluently — `board.kicad_pcb`, `X 152.4 Y 96.0`, `R` to route are on-brand.
- **Respect the heritage.** "Built on KiCad," never "we are KiCad." Attribute, don't appropriate.
- **The jam metaphor, used lightly.** "Start a jam," "who's in the jam," "jam on a board together."
Don't overdo it — one or two touches per page, the engineering stays serious.
**Words to adopt / invert from competitors:** "browser-native, no install," "Google-Docs-style
multiplayer." Flagship inversion of Altium's tagline *"Design on your desktop. Collaborate in the
cloud."* → **"Design *and* collaborate, right in the browser."**
---
## 3. Brand & design tokens (from `brand-guide.md`)
The existing Astro site (`site/`) is **dark-first**, zero-JS, zero-web-font. Keep that.
```
PALETTE
Primary (Circuit Blue) brand 500 #4f7cff · button 600 #2f57f5 · favicon 700 #1d4ed8
Signal (Green / live) text 400 #32d583 · fill 600 #039855 ← "online", presence, success
Ink (neutrals) bg 950 #0b1020 · surface 900 #11182e · border 800 #233052
text 100 #e7ecf5 · muted 400 #9aa6c0
Presence (peers) #818cf8 #38bdf8 #2dd4bf #4ade80 #fbbf24 #fb923c #fb7185 #c084fc
TYPE sans = system-ui stack · mono = ui-monospace (file names / coords / stats / shortcuts)
RADIUS 6 / 10 / 16 / full · MAX-W content 64rem
MOTION 120 / 200 / 360ms · ease cubic-bezier(0.2,0.8,0.2,1) · honor prefers-reduced-motion
MOTIFS faint blueprint dot-grid bg · 45°/right-angle copper traces as accents · real screenshots
with MULTIPLE CURSORS > illustrations · mono code/file chips as first-class UI
```
**Note for EE consulting blocks:** Emergence Engineering's own brand uses an **orange** accent
("FROM **IDEA** TO **APP** TO **MARKET**" with the keywords in orange). To keep PCBJam's identity
clean, render the EE credit/section in PCBJam's palette but you may let the **EE logo keep its
original colors** as a "guest brand" — that visual shift actually *helps* signal "this is the makers,
not the product."
---
## 4. Asset inventory — what already exists vs. what to produce
### 4a. Reusable SVGs from the `blog/` repo (real, on disk today)
Source root: `/Users/V/IdeaProjects/blog/public/`. Copy the ones you use into
`site/public/` (suggest `site/public/ee/` for EE-brand assets, `site/public/icons/` for generic).
**Emergence Engineering brand (for the credit + consulting section + EE page):**
| Asset | Path | Use |
|---|---|---|
| EE wordmark (611×111) | `public/ee-logo.svg` | Footer "Built by" lockup, EE consulting section header |
| EE icon/mark (compact) | `public/lp/ee_logo.svg` | Header credit chip, favicon-adjacent, small lockups |
| Stripe Verified Partner | `public/lp/stripe.svg` / `public/stripe.svg` | EE trust badge in consulting section |
**EE service & process icons (for the consulting section + `/built-by-emergence`):**
`public/lp/software.svg` (full-stack), `lp/ai.svg` (AI/LLM), `lp/fintech.svg` (payments),
`lp/rich_text.svg` (editors), `lp/collab.svg` (YJS collaboration — **also reusable for PCBJam's
multiplayer pillar**), `lp/ppc.svg` (marketing). Process journey: `lp/idea.svg`, `lp/plan.svg`,
`lp/prototype.svg`, `lp/validate.svg`, `lp/product.svg`. Plus `public/consulting.svg`,
`public/coaching.svg`, `public/training.svg`, `public/construction.svg`.
**EE client logos (social proof on the consulting section / EE page):**
`public/lp/`: `axdraft.svg`, `filtered.svg`, `memrise.svg`, `swaralink.svg`, `skiff.svg`,
`lex.svg`, `chapterly.svg`. (These map to real testimonials — see §13 and `referenceData.ts`.)
**Generic / dual-use (good for PCBJam itself):**
| Asset | Path | Use on PCBJam page |
|---|---|---|
| Collaboration illustration | `lp/collab.svg` | Multiplayer pillar / "Together" sections |
| Yjs logo | `lp/yjs.svg` (or `public/yjs.svg`) | "Under the hood: CRDT sync powered by Yjs" |
| GitHub mark | `lp/github.svg`, `public/github-mark.svg` | OSS links, star count, footer |
| Mail / message | `lp/mail.svg`, `lp/message.svg` | Waitlist + contact affordances |
| Arrows | `lp/arrow_outward.svg`, `lp/right_arrow.svg`, `public/arrow-next.svg` | CTA/link affordances |
| "You are here" map | `lp/you_are_here.svg`, `lp/you_are_here_mobile.svg` | **positioning-map visual** (see §9) — repurpose to plot PCBJam vs. desktop/cloud/OSS quadrants |
| Section divider dot | `lp/divider_dot.svg` | section rhythm |
| Play button | `public/play_circle_filled-24px.svg` | demo-video poster overlay |
| Tech logos (EE toolbox) | `node.svg`/`Node.js_logo.svg`, `react.svg`, `aws.svg`, `firebase.svg`, `supabase.svg`, `openAi.svg`, `stripe.svg`, `prosemirror.svg`, `graphql.svg`, `postgres.svg`, `docker.svg`, `pytorch.svg`, `tensorflow-2.svg`, `python-logo-notext.svg`, `golang-official.svg` | EE "technology toolbox" strip on consulting section/page |
**Existing PCBJam/site assets:** `site/public/favicon.svg` (blue rounded-square "K" — treat as
placeholder; replace with a PCBJam mark, keep rounded-square + blue + simple glyph per brand guide).
### 4b. NEW visuals to produce (do not exist yet — this is the production checklist)
> ⚠️ The single most important asset on the entire site is **the multiplayer demo**. Budget for it
> first. No competitor can show real simultaneous PCB co-editing — so our showing it *is* the moat.
1. **PCBJam logo / wordmark** — new brand mark + wordmark. Rounded-square glyph, Circuit Blue.
Consider a glyph that fuses a PCB pad/trace with a "play/jam" cue. Deliver SVG (light + dark).
2. **★ Multiplayer demo (centerpiece)** — looping, muted, autoplay-on-scroll MP4/WebM **+ a static
poster** (and a lightweight GIF fallback). Shows: one real board, **23 colored live cursors**
(use the presence palette), each editing/routing simultaneously, a pinned comment, presence
avatars top-right. 815s loop. This is the "Figma moment." Caption it with real mechanics.
3. **Hero board still** — a clean, dense-but-legible board render (dark canvas, copper traces,
pads, silkscreen) with 2 presence cursors composited in, as the hero's right-column/under-fold image.
4. **Product screenshots (real, annotated):** (a) PCB layout editor, (b) schematic capture (Eeschema),
(c) 3D board view, (d) DRC/ERC results panel, (e) BOM / Gerber export. Used in the "Real KiCad,
not a toy" capability proof.
5. **Positioning quadrant graphic** — Browser×Open×Multiplayer; can be hand-built on top of the
`you_are_here.svg` motif. (See §9.)
6. **"How a jam works" 3-step diagram** — Open a board → Invite your team → Design & export together.
7. **External logos to source (with care for usage rights):** KiCad logo (for "Built on KiCad"
attribution — follow KiCad trademark guidelines), migration-source logos (EAGLE, Altium, CADSTAR,
OrCAD), fab-partner logos (JLCPCB, PCBWay, OSHPark, AISLER). Use grayscale/monochrome treatment.
8. **OG/social share images** per page (1200×630) and an updated favicon.
9. **(Optional) "real board shipped" photo** — a physical PCB designed entirely in PCBJam, when one exists.
---
## 5. Global elements
### Header / nav (sticky, minimal)
- **Left:** PCBJam logo (`§4b.1`). Optional tiny mono chip beside it: `built on KiCad`.
- **Center/right links:** `How it works` · `Open & yours` · `Roadmap` · `Blog` · **`Built by Emergence Engineering`** (text link) · `GitHub ★` (`lp/github.svg` + live star count when available).
- **Right CTA button:** **`Join the waitlist`** (primary, `primary-600`) → scrolls to / opens the email capture.
- Mobile: hamburger (`blog/public/lp/menu.svg` exists if you want it); CTA stays visible.
### Persistent waitlist mechanism
- One reusable component: email input + button. Placeholder `you@company.com`, button
**`Join the waitlist`**. Microcopy under it: *"Early access invites go out in waves. No spam — just
a heads-up when your seat is ready."* On submit → inline success state (see `/thanks`, §16).
- Appears in: hero (§7), mid-page reinforcement (§14 final CTA), and the footer.
### Footer
- **Col 1 — PCBJam:** logo + one-liner ("KiCad, in your browser. Now multiplayer.") + GitHub, blog, roadmap links.
- **Col 2 — Product:** How it works · Open & yours · Roadmap · Waitlist.
- **Col 3 — Built by:** **EE wordmark** (`public/ee-logo.svg`) + *"PCBJam is a project by Emergence
Engineering, a full-stack software studio. Need something hard built? `contact@emergence-engineering.com`."*
+ links to `/built-by-emergence` and emergence-engineering.com.
- **Col 4 — Legal:** Privacy · Terms · Cookies (pages already exist in `site/src/pages/`).
- **Bottom bar:** `© 2026 Emergence Engineering` · *"Built on the open-source **KiCad** EDA suite.
Not affiliated with or endorsed by the KiCad project."* (attribution + trademark safety) · link to kicad.org.
---
## 6. Page map
| Page | Path | Purpose | Status |
|---|---|---|---|
| **Landing** | `/` | The waitlist conversion page (§7§15) | replace placeholder `index.astro` |
| How it works / Demo | `/how-it-works` | Long-form demo + the multiplayer story + capability proof | new |
| Open & yours | `/open` | Data-sovereignty / self-host / open-format deep dive (our wedge) | new |
| Roadmap & status | `/roadmap` | Honest "what works today / what's next" — credibility for a waitlist product | new |
| Built by Emergence Engineering | `/built-by-emergence` | The **consulting** page: who built PCBJam, what else EE builds, case studies, hire-us CTA | new |
| Blog | `/blog`, `/blog/[slug]` | Already scaffolded; engineering posts (WASM, CRDT, KiCad internals) for GEO/SEO | exists |
| Thanks | `/thanks` (or inline) | Post-waitlist confirmation + share + EE soft-pitch | new |
| Privacy / Terms / Cookies | existing | Legal | exist |
---
# PART A — The landing page (`/`), section by section
Each section below gives **Goal**, **Copy** (verbatim-ready; pick among options where offered),
**Visual** (real asset path or `PRODUCE:`), and **Pattern** (what competitor convention it
borrows/beats, from the research).
---
## 7. Section 1 — Hero
**Goal.** In one screen: say what PCBJam is, land the multiplayer wedge, and capture an email.
This is a waitlist page — the hero's primary conversion is the email field, *not* "open the app."
**Copy.**
- **Eyebrow (mono, muted):** `PCBJam · built on KiCad`
- **H1 (primary):** **KiCad, in your browser — now multiplayer.**
- *Alt A:* **Design PCBs together, live, in your browser.**
- *Alt B:* **The PCB tool that opens in a tab and edits with your team.**
- **Subhead (`text-lead`):** The PCB design tool millions trust — now zero-install and
collaborative. Open a board in a tab, invite your team, and edit the same schematic and layout
together in real time. Open format. No install. Free to start.
- **Primary CTA:** email input (`you@company.com`) + **`Join the waitlist`**
- **Microcopy under CTA:** *Early access is rolling out in waves. We'll email you when your seat opens — no spam.*
- **Secondary CTA (text link w/ play icon):** **`Watch the 90-second demo →`** (scrolls to §8 / opens video)
- **Trust whisper (tiny, under CTAs):** `Open source` · `Your files stay in KiCad format` · `Runs on Mac, Linux, Chromebook, iPad`
**Visual.**
- `PRODUCE:` the **multiplayer demo loop** (§4b.2) as the hero centerpiece — autoplay, muted, looping,
with the play-button poster (`public/play_circle_filled-24px.svg`) for reduced-motion/poster state.
If the full loop isn't ready, use the **hero board still with 2 presence cursors** (§4b.3).
- Background: faint **blueprint dot-grid** + a couple of **copper-trace** accents (brand-guide §7).
**Pattern.** *Borrows* the verb-first, zero-friction hero of Flux/CircuitLab. *Beats* them by leading
with **KiCad trust + multiplayer** instead of AI (Flux leads "Design PCBs with AI"; we deliberately
don't). The hero *is* the product demo — steals KiCanvas's "show the real thing instantly" instinct,
adapted to a video because the live editor isn't public yet.
---
## 8. Section 2 — Trust / scale stat bar
**Goal.** Immediately answer "is this real?" with numbers we can actually stand behind (ours are
real and verifiable, unlike vendor-asserted user counts).
**Copy (4 stats, mono numerals).** Fill the real figures; placeholders shown:
- **Millions** of KiCad users worldwide
- **The largest** open component & footprint library in EDA
- **`N,000`** GitHub stars on KiCad *(or PCBJam's own once it has them)*
- **`100%`** open file format — your `.kicad_pcb` / `.kicad_sch`, never a proprietary cloud blob
> Only claim counts you can defend. If PCBJam's own GitHub/stars are tiny pre-launch, lean on
> **KiCad's** inherited scale and the open-format fact, and add a PCBJam-native number ("boards
> opened in beta") once it exists.
**Visual.** Thin full-width band, `bg-soft`. Optional small GitHub mark (`lp/github.svg`) by the
star stat. Keep it text-forward.
**Pattern.** *Borrows* EasyEDA/Flux/Tinkercad's user-count bar; *beats* them because our numbers are
real, open, and inherited from KiCad — a credibility base every proprietary rival lacks.
---
## 9. Section 3 — The multiplayer centerpiece ("Figma for PCB")
**Goal.** The emotional + rational core of the page. Show, don't tell: two people editing one board,
live. This single visual does more than any paragraph.
**Copy.**
- **Eyebrow:** `Real-time, not "real-time-ish"`
- **H2:** **Your whole team. One board. The same second.**
- **Body:** Everyone else who says "real-time collaboration" means comments, check-out locks, or a
read-only viewer. PCBJam means **live co-editing**: shared cursors, presence, and conflict-free
edits on the *same* schematic and layout — the way you already work in Google Docs and Figma.
Route a trace while a teammate places parts on the other side of the board. No emailing files. No
"who has it checked out?"
- **Sub-points (3 short, icon'd):**
- **Live cursors & presence** — see who's here and where they're working.
- **Conflict-free editing** — CRDT sync (Yjs) merges everyone's edits, no overwrite wars.
- **Pin a comment to a pad** — review and resolve right on the canvas.
- **Caption under the demo (mono):** `2 editors · live cursors · one board.kicad_pcb · no merge step`
**Visual.**
- `PRODUCE:` the big **multiplayer demo** (§4b.2), running large here if it was a still in the hero.
- Supporting: `lp/collab.svg` and/or `lp/yjs.svg` for the "powered by Yjs CRDT" line.
**Pattern.** *Borrows* Flux/Figma framing; *beats every EDA tool alive* — none can show real
simultaneous PCB editing (Flux = comments/permissions, EasyEDA = lock/checkout, OrCAD = 2-user cap,
Altium = desktop commit, AllSpice/tscircuit = async git). This is the sharpest wedge in the research
(§7.1). **Be honest about what "live" means** to avoid the same "they're bluffing" critique we level
at others (research §10.6).
---
## 10. Section 4 — Three core value pillars
**Goal.** Three sharp claims, not eight diffuse ones. Each pillar = one wedge point.
**Copy (3 cards).**
1. **Runs in a browser tab.** Zero install, zero toolchain. Mac, Linux, Windows, Chromebook, iPad —
if it has a modern browser, it designs PCBs. *Visual:* `PRODUCE:` small device-array glyph, or reuse `blog/public/icons/responsive.svg`.
2. **Truly multiplayer.** Live cursors, presence, and conflict-free co-editing on the same board.
Plus pin-to-canvas comments for review. *Visual:* `lp/collab.svg`.
3. **Open & yours.** Real KiCad format in, real KiCad format out. Self-host it, run it offline as a
PWA, or use our cloud — your files are never held hostage. *Visual:* `PRODUCE:` open-lock / format glyph; `lp/github.svg` accent.
**Visual.** 3-card grid (existing `.card` style in `global.css`). Line-style icons, `currentColor`, Circuit Blue.
**Pattern.** *Borrows* the universal 48-card feature grid (Flux/Altium 365/OrCAD); we keep it to
**three** and make each a differentiator, not a checkbox.
---
## 11. Section 5 — How a jam works (3 steps)
**Goal.** Make the workflow concrete and show collaboration is present at *every* step (not bolted on).
**Copy.**
- **H2:** **From link to layout in three moves.**
- **Step 1 — Open a board.** Paste a link, drag in a `.kicad_pcb`, or pull from GitHub. It opens in
seconds — no install, no account wall to *look*.
- **Step 2 — Start a jam.** Share the URL. Teammates join with live cursors and presence. Everyone
sees the same board update in real time.
- **Step 3 — Design, route & export — together.** Schematic capture, PCB layout, DRC/ERC, 3D, BOM,
and Gerbers — the full flow, then hand off to any fab. Your call.
**Visual.** `PRODUCE:` 3-step horizontal diagram (§4b.6). Arrows: `lp/right_arrow.svg` /
`public/arrow-next.svg`. Step icons can be lightly adapted from `lp/idea.svg`/`lp/prototype.svg`/`lp/product.svg`.
**Pattern.** *Borrows* Flux's "Plan→Schematic→Layout→Manufacture" and CELUS's 3-step; ours emphasizes
**collaboration at every step**, not AI autonomy.
---
## 12. Section 6 — "Real KiCad, not a toy" (capability proof)
**Goal.** Defuse the #1 attack — *"browser EDA = toy / can't do real complexity."* (research §10.1)
**Copy.**
- **Eyebrow:** `The actual engine, compiled to WebAssembly`
- **H2:** **This is real KiCad — the whole thing.**
- **Body:** PCBJam isn't a web re-implementation with a fraction of the features. It's the genuine
KiCad engine compiled to WebAssembly, running in your tab. Schematic capture. Multi-layer PCB
layout. Design rule checks. 3D view. BOM and Gerber export. The same `.kicad_pcb` you'd open on the
desktop — because it *is* the same tool.
- **Capability checklist (2-col, ✓):** Schematic capture (Eeschema) · PCB layout (Pcbnew) ·
DRC / ERC · Interactive router · 3D board view · BOM export · Gerber / drill export · Footprint &
symbol libraries · Net classes & constraints · Push-and-shove routing.
**Visual.** `PRODUCE:` 24 **real annotated screenshots** (§4b.4): layout editor, schematic, 3D,
DRC panel. Real copper, real pads, real coordinates in mono callouts. Screenshots > illustrations
(brand-guide §7).
**Pattern.** *Directly answers* the toy risk; *beats* CircuitLab/Tinkercad (sim-only) and KiCanvas
(view-only) by showing the complete stack. Don't ever let the page imply "simplified."
---
## 13. Section 7 — Open & yours (data-sovereignty wedge)
**Goal.** Own the anti-lock-in lane — empty at the intersection of cloud convenience (research §7.3).
This is what no cloud rival can copy and what answers the OSS skeptics' privacy fears.
**Copy.**
- **Eyebrow:** `No lock-in. No data hostage.`
- **H2:** **Design *and* collaborate in the browser — without surrendering your files.**
*(deliberate inversion of Altium's "Design on your desktop. Collaborate in the cloud.")*
- **Body:** Cloud EDA tools trap your designs in proprietary formats and clouds you can't leave.
Desktop open-source tools keep you free but strand you offline and solo. PCBJam refuses the
trade-off: **real KiCad format** in and out, **self-host** it on your own server, run it **offline
as a PWA**, and it's **open source**. Collaborate in our cloud when it's convenient — and walk away
with every byte whenever you want.
- **Four chips:** `Open .kicad_pcb / .kicad_sch` · `Self-hostable` · `Offline PWA` · `Open source (GPL)`
- **Reassurance line (pre-empts rug-pull fear):** PCBJam rides KiCad — a project backed for decades
by CERN, the KiCad Services Corp, and a global community. This isn't a VC bet that vanishes when the
runway ends.
**Visual.** `lp/github.svg`, a self-host/server glyph (`PRODUCE:` or `blog/public/icons/cloud-computing.svg`),
open-format file chips in mono.
**Pattern.** *Beats* Flux/EasyEDA/Altium cloud lock-in head-on; *borrows* the freedom narrative from
LibrePCB/Horizon but pairs it with the cloud + collaboration they lack. Converts a risk
(cloud-privacy fear, research §10.3) into a strength.
---
## 14. Section 8 — Migration strip ("Coming from…")
**Goal.** Seize the live refugee moment — Autodesk **sunset EAGLE (EOL today, 2026-06-07)** and Zuken
is sunsetting CADSTAR. KiCad's native format is *the* migration target; we're the zero-install landing pad.
**Copy.**
- **H3:** **Coming from EAGLE, Altium, CADSTAR, or OrCAD?**
- **Body:** KiCad is where designs are migrating — and PCBJam opens them in a browser tab, free,
with nothing to install. *Bring your board. Invite your team. Pick up where you left off.*
- **CTA:** `Join the waitlist →`
**Visual.** Grayscale/monochrome logo strip of migration sources (EAGLE, Altium, CADSTAR, OrCAD) →
arrow (`lp/arrow_outward.svg`) → PCBJam mark. `SOURCE:` external logos (§4b.7), monochrome treatment.
**Pattern.** *Borrows* DipTrace/Fusion's compatibility-logo strip; *seizes* the EAGLE-EOL/CADSTAR
moment (research §7.5), which is *timely as of the generation date*.
---
## 15. Section 9 — Positioning map (optional but high-impact)
**Goal.** Make the whitespace visceral — show, in one graphic, that PCBJam alone occupies
Browser × Open × Multiplayer.
**Copy.**
- **H3:** **Everyone picks two. We do all three.**
- **Caption:** Browser-native. Open & yours. Truly multiplayer. Flux is browser + collab but closed.
KiCanvas is browser + open but read-only. LibrePCB is open + full but desktop-only. **PCBJam is the
only one in the middle.**
**Visual.** `PRODUCE:` quadrant/Venn graphic, built on the **`lp/you_are_here.svg`** /
`you_are_here_mobile.svg` motif ("you are here" pin placed in the empty intersection). Plot Flux,
Altium 365, OrCAD X, KiCanvas, LibrePCB, EasyEDA around the edges.
**Pattern.** Visualizes the "empty quadrant" finding (research §7.2). A memorable, screenshot-able,
shareable asset — good for social/launch.
---
## 16. Section 10 — Built by Emergence Engineering (the credit + consulting hook)
**Goal.** The product-first consulting placement. Establish *who* built this (credibility for the
waitlist) **and** plant the consulting seed — without ever outshouting the product. This is the
section that wins EE consulting clients off PCBJam's traffic.
**Copy.**
- **Eyebrow:** `Who's behind PCBJam`
- **H2:** **We're Emergence Engineering. We build hard things in the browser.**
- **Body:** PCBJam exists because we got obsessed with a genuinely hard problem: running a full,
native C++ EDA suite — and real-time multiplayer — entirely in a browser, on WebAssembly. That's
the kind of work we do for a living. Emergence Engineering is a full-stack software studio (🇪🇺,
remote-first) that builds WASM ports, real-time collaborative editors, AI features, and the
payments and infrastructure behind them — for startups and scale-ups who need the hard parts done right.
- **Mini-proof row (mono/short):** `WebAssembly` · `Real-time collaboration (Yjs/CRDT)` ·
`Rich-text & ProseMirror editors` · `AI / LLM features` · `Fintech & Stripe`
- **Social proof:** *"Trusted by teams at…"* + EE client logos (`lp/skiff.svg`, `lp/memrise.svg`,
`lp/axdraft.svg`, `lp/lex.svg`, `lp/filtered.svg`, `lp/swaralink.svg`). One short testimonial,
e.g. **Ben Whately:** *"For any new product, they're my go-to dev house. They work fast and to
super high quality."*
- **CTA (secondary style, not competing with waitlist):** **`Need something hard built? → Talk to
the team`** → `/built-by-emergence` (and `contact@emergence-engineering.com`).
**Visual.** EE wordmark `public/ee-logo.svg`; client logos row; optional `lp/collab.svg` or a small
"PCBJam is one of our projects" lockup. Keep it visually distinct (a `bg-soft` band) so it reads as
"the makers," not another product feature.
**Pattern.** *Borrows* the founder/maker-credibility halo (and EE's real testimonials/logos). Placed
**below** the core product story so it supports, never competes with, the waitlist. This is the
agreed "product-first, EE credit" weighting.
---
## 17. Section 11 — How we'll make money (trust block, replaces pricing)
**Goal.** No price table yet — but a waitlist audience *will* wonder "what's free, and will you
rug-pull me?" Answer it calmly and convert the answer into a trust signal.
**Copy.**
- **H3:** **Free to start — and the core stays open.**
- **Body:** The full editor and real-time collaboration are **free to start**, and the file format is
open, forever. Later, we'll charge teams for the things teams actually need — private org
workspaces, SSO and compliance, hosted storage, and optional AI assistance. The individual,
open-source core isn't the thing we paywall. **No per-editor toll. No metered AI. No surprises.**
- **Contrast chip (optional, cheeky-but-true):** *Flux charges $112158 per editor, per month. We
don't.* *(verify current Flux pricing before publishing — point-in-time, see research §C)*
- **CTA:** `Join the waitlist →`
**Visual.** Simple three-icon row: `Free core` · `Open format` · `Paid only for team/enterprise
scale`. No table.
**Pattern.** *Borrows* the validated "free reviewers / paid authors, monetize team scale" model
(Altium 365 / AllSpice). *Beats* Flux's $112158/editor and the sales-gated "request a quote" wall
(Cadence/Zuken) by being transparent about intent even pre-pricing. Pre-empts the OSS-sustainability
worry (research §10.5).
---
## 18. Section 12 — AI (deliberately small, opt-in)
**Goal.** Answer the AI table-stakes without making it our identity — the contrarian stance (research §7.4).
**Copy.**
- **H3:** **AI when you want it. Never a paywall, never a black box.**
- **Body:** Everyone else leads with an "AI hardware engineer." We lead with *you* and an open tool
you control. AI assistance is on the roadmap as an **opt-in** helper — never metered by the token,
never the thing standing between you and your own board.
**Visual.** Small, single line. `lp/ai.svg` if an icon is wanted — kept visually minor on purpose.
**Pattern.** *Contrarian placement* — low and calm, where every funded rival shouts AI at the top.
Differentiated precisely because the field is homogeneous on AI.
---
## 19. Section 13 — Final CTA
**Goal.** Last, dominant conversion. One job: get the email.
**Copy.**
- **H2:** **Be there when the first jam opens.**
- *Alt:* **Open a board. Invite your team. Be early.**
- **Subhead:** Early access rolls out in waves. Join the waitlist and we'll save you a seat.
- **CTA:** email input + **`Join the waitlist`**
- **Reassurance:** *No spam. One email when your seat is ready. Unsubscribe anytime.*
- **Under it (tiny):** `Open source` · `Built on KiCad` · `Built by Emergence Engineering`
**Visual.** Full-width band, blueprint-grid bg, a couple of copper-trace accents. Big single button.
No demo gate, no second competing CTA.
**Pattern.** *Borrows* Flux's "If you can type, you can build / Get Started for Free" energy, retuned
to a waitlist ask.
---
# PART B — Supporting pages
---
## 20. `/how-it-works` (demo + deep story)
**Goal.** The long-form home for the demo and the full capability/collaboration story — where
"watch the 90-second demo" and curious skeptics land.
**Sections & copy:**
1. **Hero:** **"See PCBJam jam."** Subhead: *The whole flow — open, invite, design, export —
in your browser, together.* Big embedded demo video (§4b.2, full length here). CTA: `Join the waitlist`.
2. **The collaboration deep-dive** — expand §9's three sub-points into short explainer blocks, each
with a focused clip/GIF: live cursors & presence; conflict-free CRDT editing (Yjs); pin-to-canvas comments.
3. **The full toolchain** — the §12 capability checklist, each with a real screenshot (§4b.4).
4. **"Is the browser fast enough?"** — honest performance note (answers research §10.2). One short,
confident paragraph + a clip of a heavy board staying responsive. Link to a technical blog post.
5. **FAQ** — "Is this really KiCad?" "Where do my files live?" "Can I self-host?" "Does it work
offline?" "What does it cost?" "Is my IP safe?" (each answer reinforces a wedge).
6. **CTA band** — `Join the waitlist`.
**Visuals:** the demo video, focused clips, real screenshots, `lp/yjs.svg`, `lp/collab.svg`.
---
## 21. `/open` (data-sovereignty / self-host deep dive)
**Goal.** The full version of §13 for the privacy/IP-sensitive and OSS-skeptic segments (and good SEO
for "self-hosted PCB design," "open source browser EDA").
**Sections & copy:**
1. **Hero:** **"Your designs. Your format. Your servers if you want them."**
2. **Open format** — `.kicad_sch` / `.kicad_pcb` in and out; round-trips with desktop KiCad; export anytime.
3. **Self-host** — run PCBJam on your own infrastructure / air-gapped; what's required; who it's for
(defense, aerospace, IP-sensitive teams — the segment Altium 365 CMMC/FedRAMP and JITX air-gap court).
4. **Offline PWA** — install it, design without a connection, sync when you're back.
5. **Open source** — license, GitHub, how to contribute; the durability/sustainability story (KiCad
+ KiCad Services Corp + CERN + community).
6. **CTA** — `Join the waitlist` + GitHub link.
**Visuals:** `lp/github.svg`, server/cloud glyphs (`blog/public/icons/cloud-computing.svg`),
open-format mono file chips, license badge.
---
## 22. `/roadmap` (honest status — credibility for a pre-launch product)
**Goal.** A waitlist product lives or dies on trust. A transparent "what works today / what's next"
is itself a conversion asset — it signals this is real and progressing.
**Sections & copy:**
- **Intro:** **"Where PCBJam is, honestly."** *We'd rather show you the seams than overpromise.*
- **✅ Works today** — (fill from the project's real state: PCB rendering, schematic, multiplayer
editing demos, etc. — pull from the repo's WHATWORKS/test docs).
- **🚧 In progress** — current focus areas.
- **🗓️ Next** — upcoming.
- **CTA:** `Join the waitlist — we email at each milestone.`
**Visuals:** simple status chips (`signal-400` done, `warning` in-progress, `ink-400` planned);
`lp/divider_dot.svg` rhythm. Optionally pull live status from the repo.
> Source the actual capability list from this repo's `tests/WHATWORKS*`/feature docs so the page is
> truthful — don't invent feature claims.
---
## 23. `/built-by-emergence` (the consulting page)
**Goal.** The full consulting pitch for visitors who clicked the §16 hook. This is where PCBJam's
audience converts into **EE consulting leads**. Mirror Emergence Engineering's existing site voice
(the agent extracted it verbatim from `blog/`).
**Sections & copy (reuse EE's real copy):**
1. **Hero:** **"FROM IDEA TO APP TO MARKET."** (EE's own hero — keywords in orange.) Subhead: *We're
a full-stack development team building scalable, high-performance software products and webapps.*
Sub-line tying it back: *PCBJam is one of the hard things we built for ourselves.* CTA: **`Get a quote`** → `contact@emergence-engineering.com`.
2. **What we do (services grid)** — EE's six cards verbatim, with their icons:
- **Full-Stack Web Development** (`lp/software.svg`)
- **Rich Text Editors** (`lp/rich_text.svg`)
- **YJS Collaborative UIs** (`lp/collab.svg`)
- **AI Development** (`lp/ai.svg`)
- **Fintech & Payments** (`lp/fintech.svg`)
- **PPC & Marketing** (`lp/ppc.svg`)
3. **PCBJam as proof** — short case-study block: the problem (native EDA + multiplayer in a browser),
the hard parts (WASM, asyncify, CRDT sync, performance), the result. Links back to `/how-it-works`.
4. **Technology toolbox** — logo strip: `node.svg`, `react.svg`, `prosemirror.svg`, `firebase.svg`,
`supabase.svg`, `openAi.svg`, `aws.svg`, `yjs.svg`, `stripe.svg` (+ `docker.svg`, `postgres.svg`,
`graphql.svg`, `pytorch.svg` as depth).
5. **References / testimonials** — EE's real client logos + quotes (Greg Detre, Marc Zao-Sanders,
Ben Whately, Andrew Milich/Skiff, Oleg Zaremba/Axdraft). Logos: `lp/skiff.svg`, `lp/memrise.svg`,
`lp/axdraft.svg`, `lp/lex.svg`, `lp/filtered.svg`, `lp/swaralink.svg`, `lp/chapterly.svg`.
6. **Trust badge:** Stripe Verified Partner (`lp/stripe.svg`).
7. **The journey (optional)** — EE's idea→plan→prototype→validate→product strip
(`lp/idea.svg` / `lp/plan.svg` / `lp/prototype.svg` / `lp/validate.svg` / `lp/product.svg`).
8. **Contact CTA:** **"Let's build great apps together."** → `contact@emergence-engineering.com`
+ Calendly link. EE wordmark `public/ee-logo.svg`.
**Visuals:** EE wordmark, all EE service/client/tech SVGs above. This page may use EE's orange accent
since it *is* the EE brand surface.
---
## 24. `/blog` (exists) — editorial / SEO-GEO engine
**Goal.** Engineering credibility + organic discovery. Already scaffolded (`site/src/pages/blog/`).
**Suggested launch posts (match EE's proven "we solved a hard thing" register):**
- "How we ran KiCad in a browser with WebAssembly" (the asyncify/perf story)
- "Real-time multiplayer for a native C++ app: Yjs/CRDT over a WASM EDA"
- "Browser EDA isn't a toy: what actually runs in PCBJam"
- "Coming from EAGLE? Open your board in a browser tab" (migration, captures EOL search traffic)
- "Self-hosting PCBJam: your designs, your servers"
**Visuals:** per-post OG images; reuse `yjs.svg`, `prosemirror.svg`, tech logos.
---
## 25. `/thanks` (post-waitlist confirmation)
**Goal.** Confirm, reduce buyer's remorse, drive a share, and soft-pitch EE.
**Copy.**
- **H1:** **You're on the list. 🎉**
- **Body:** We'll email you the moment your early-access seat opens. In the meantime: star us on
GitHub, read how we built it, or follow along on the roadmap.
- **Buttons:** `Star on GitHub` (`lp/github.svg`) · `How it works` · `Roadmap`
- **Share line:** *Know someone wrestling with desktop EDA? Send them pcbjam.com.*
- **EE soft-pitch (tiny footer line):** *PCBJam is built by Emergence Engineering — we build hard
software for other teams too. `contact@emergence-engineering.com`.*
**Visuals:** celebratory but restrained; PCBJam mark; GitHub mark.
---
## 26. Legal pages (exist)
`/privacy`, `/terms`, `/cookies` already exist in `site/src/pages/`. Update entity name (Emergence
Engineering), the data handled by the waitlist (email), and any analytics/cookie disclosures. Keep
the dark, minimal layout.
---
# PART C — Execution notes
## 27. SEO / meta per page
| Page | `<title>` | Meta description (draft) |
|---|---|---|
| `/` | **PCBJam — KiCad in your browser, now multiplayer** | Open-source PCB design in your browser with real-time collaboration. Built on KiCad. No install, open format, free to start. Join the waitlist. |
| `/how-it-works` | How PCBJam works — collaborative PCB design in the browser | Watch real-time multiplayer KiCad in action: live cursors, conflict-free editing, full schematic + PCB layout, in a browser tab. |
| `/open` | Open & self-hostable PCB design — PCBJam | Your designs in open KiCad format. Self-host, work offline as a PWA, open source. Collaborate in the cloud without lock-in. |
| `/roadmap` | PCBJam roadmap & status | What works today and what's next for browser-based collaborative KiCad. Honest status, no overpromises. |
| `/built-by-emergence` | Built by Emergence Engineering — software studio | The team behind PCBJam. We build WebAssembly ports, real-time collaborative editors, AI features, and fintech. Hire us. |
Add per-page OG images (1200×630), canonical URLs, and JSON-LD (`SoftwareApplication` for `/`,
`Organization` for `/built-by-emergence`).
## 28. Performance (non-negotiable — the WASM context)
The marketing site must stay **fast and light** (current `site/` ships zero JS, no web fonts — keep
that for the marketing pages). The heavy WASM app is a *separate* surface; never let it bloat the
landing page. The demo video must be **lazy-loaded, compressed, poster-first**, and `preload="none"`.
Honor `prefers-reduced-motion` (poster instead of autoplay). Don't let "we run a huge WASM app"
become "our landing page is slow" — that would undercut the core performance pitch.
## 29. Conversion & analytics
- One dominant action sitewide: **waitlist email capture.** Secondary: GitHub star, demo view,
consulting contact. Never put a competing primary CTA above the fold.
- Instrument: waitlist submits (by section), demo plays/completion, consulting CTA clicks, GitHub
clicks. A/B the **hero headline** (the three options in §7) once there's traffic.
- Disclose analytics in `/cookies`.
## 30. Build mapping (Astro)
- Replace the placeholder `site/src/pages/index.astro` with §7§19.
- New pages → `site/src/pages/how-it-works.astro`, `open.astro`, `roadmap.astro`,
`built-by-emergence.astro`, `thanks.astro`.
- Copy chosen SVGs into `site/public/` (suggest `site/public/ee/` for EE-brand,
`site/public/icons/` for generic, `site/public/logos/` for client/partner). Source paths are all
under `/Users/V/IdeaProjects/blog/public/` (see §4a).
- Reusable Astro components: `WaitlistForm.astro`, `StatBar.astro`, `Pillar.astro`, `Step.astro`,
`SectionBand.astro`, `EECredit.astro`.
- Apply the brand-guide tokens (§3) into `site/src/styles/global.css` (it already matches the dark
palette; extend with the full scales + presence colors).
## 31. Open production checklist (what's blocking, ranked)
1. **★ Multiplayer demo video/GIF** (§4b.2) — the page cannot ship persuasively without it.
2. **PCBJam logo / wordmark / favicon** (§4b.1).
3. **Real product screenshots** ×4 (§4b.4).
4. **Hero board still w/ presence cursors** (§4b.3).
5. **Waitlist backend** — email capture endpoint + storage + confirmation (decide: HubSpot/ConvertKit/
own). Wire `WaitlistForm`.
6. **Real numbers** for the stat bar (§8) and roadmap (§22) — pull from the repo's WHATWORKS/test docs; don't invent.
7. **External logos** with usage rights (§4b.7): KiCad (attribution per trademark policy), migration
sources, fab partners.
8. **Positioning quadrant graphic** (§15) and **3-step diagram** (§11).
9. **Confirm contact email** (hyphenated `contact@emergence-engineering.com`) and set up PCBJam's own inbox.
10. **Verify any competitor number** (Flux pricing in §17) before publishing — point-in-time.
---
### Provenance
Synthesized from `features/lp/` (competitor teardown, verified synthesis, brand guide,
best-practices, playbook) + a full extraction of Emergence Engineering's live site source
(`blog/`, voice/services/case-studies/assets) + a direct inventory of the on-disk SVG library.
Founder decisions (name=PCBJam, waitlist, product-first+EE-credit, open+free-to-start) are locked in §0.
Point-in-time; re-verify external claims and prices before launch.