pcbjam/features/lp/pcbjam-landing-page-copy-and-visuals.md

736 lines
42 KiB
Markdown
Raw Normal View History

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
# 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
$112–158/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, **2–3 colored live cursors**
(use the presence palette), each editing/routing simultaneously, a pinned comment, presence
avatars top-right. 8–15s 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 4–8-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:` 2–4 **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 $112–158 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 $112–158/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.