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>
This commit is contained in:
Viktor Vaczi
parent
7f9dbdd068
commit
735d8a48ee
31 changed files with 8149 additions and 135 deletions
44
features/lp/README.md
Normal file
44
features/lp/README.md
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
# Landing-Page Research & Strategy — `features/lp/`
|
||||
|
||||
Competitive research and landing-page strategy for **KiCad in a web browser, with real-time collaboration**.
|
||||
|
||||
Generated **2026-06-07** by two automated, multi-agent web-research passes:
|
||||
|
||||
1. **Per-competitor teardown** — one researcher agent per competitor fetched the live homepage + pricing/feature pages and extracted structured positioning. Output rendered deterministically so no competitor is dropped. → `competitor-landing-pages.md`
|
||||
2. **Adversarially-verified synthesis** — a second pass fanned out search angles, fetched ~21 primary sources, extracted ~95 claims, and put the top 25 through 3-vote adversarial verification (a claim needs 2/3 skeptic votes to be killed). → `competitive-analysis-synthesis.md` + the two angle files.
|
||||
|
||||
> ⚠️ **Point-in-time.** Landing pages, hero copy, and especially pricing change fast. Re-verify any price or headline before using it in a launch. Where an automated fetch hit HTTP 403 (e.g. Cadence, Fritzing), claims were corroborated via vendor sub-pages and independent sources rather than the canonical URL.
|
||||
|
||||
---
|
||||
|
||||
## Files (recommended reading order)
|
||||
|
||||
### Competitor research (the core ask)
|
||||
| File | Size | What it is |
|
||||
|---|---|---|
|
||||
| **`competitor-landing-pages.md`** | ~330 KB | **PRIMARY deliverable.** Exhaustive teardown of **26 competitors** (the 21 named + Wokwi, CircuitLab, tscircuit, KiCanvas). Part I = strategic synthesis (positioning map, comparison table, gaps, recommended positioning + 3 hero headlines, 13-section LP outline, risks). Part II = verbatim per-competitor profiles (hero copy, sections, pricing, CTAs, social proof, differentiators, tone, collaboration/browser angle). 19/26 high-confidence. |
|
||||
| `competitive-analysis-synthesis.md` | ~16 KB | The **verified "spine."** Only the claims that survived 3-vote adversarial verification, with citations. Tighter and higher-confidence than Part I, narrower coverage (Flux, Altium 365, OrCAD X, LibrePCB, Horizon, Fritzing, Quilter). Start here if you want the defensible core. |
|
||||
| `incumbent-desktop-eda-cloud-marketing.md` | ~15 KB | Angle detail: incumbent desktop suites + their cloud add-ons (Altium, Cadence OrCAD X, Zuken, Fusion/EAGLE, DipTrace, CircuitMaker) and how they frame cloud/collaboration. |
|
||||
| `competitors-ai-automation-parts.md` | ~13 KB | Angle detail: AI/automation, "Git-for-hardware," parts, and requirements players (Quilter, JITX, CELUS, AllSpice, SnapMagic, Valispace, AISLER). |
|
||||
|
||||
### Landing-page execution (bonus — beyond the competitor ask, but tailored to this product)
|
||||
| File | Size | What it is |
|
||||
|---|---|---|
|
||||
| **`pcbjam-landing-page-copy-and-visuals.md`** | — | **The deliverable.** Build-ready, section-by-section copy + visuals spec for the **PCBJam** marketing site (landing + supporting pages), grounded in this folder's research, Emergence Engineering's brand/voice (`../../../blog/`), and a real on-disk SVG inventory. Locked decisions: name=**PCBJam**, **waitlist** launch, **product-first + EE consulting credit**, **open + free-to-start (no price table yet)**. Includes asset map, per-section copy, SEO, and a production checklist. |
|
||||
| `brand-guide.md` | ~21 KB | Brand & design tokens for the marketing site. Grounded in the real `site/` Astro project (`site/src/styles/global.css`): color scales, typography, voice/tone, collaboration palette. |
|
||||
| `landing-page-best-practices.md` | ~51 KB | General, data-backed landing-page/CRO reference (structure, copy, CTAs, forms, trust, performance, SEO, A/B testing), with claims graded verified vs. established-practice. |
|
||||
| `marketing-site-playbook.md` | ~82 KB | The full marketing-surface playbook: homepage, feature/use-case/comparison/integration pages, pricing, demo, SEO/GEO/CRO, performance (the WASM problem), launch GTM, implementation checklists. (Formerly `README.md`.) |
|
||||
| `astro-templates-and-component-libraries.md` | ~25 KB | **Build-tooling survey.** Exhaustive, adversarially-verified rundown of Astro landing-page templates (AstroWind, Astroship, Cruip…), Astro-native + Tailwind component libraries (daisyUI, Preline, Accessible Astro, Starwind), Tailwind Plus (paid), React-island libs (shadcn/Magic UI/Aceternity) + tradeoffs, animation, icons/fonts/code-blocks, and SEO/perf tooling — all weighed against the real `site/` Astro project. **Decision: use Tailwind** (`npx astro add tailwind` + daisyUI). Free pick: AstroWind blocks; paid pick: Tailwind Plus ($299). |
|
||||
|
||||
---
|
||||
|
||||
## The one-paragraph takeaway
|
||||
|
||||
Across 26 competitors, **no one occupies the intersection of browser-native full editing + true real-time multiplayer + open-source.** Flux.ai is the only head-on rival (browser + collaboration) but it is proprietary, metered per editor ($112–158/editor for Pro/Teams), and has pivoted its headline to AI ("the world's first AI hardware engineer"). Incumbents (Altium 365, OrCAD X) are desktop-authoring + browser-*review-only* ("Design on your desktop. Collaborate in the cloud."). OSS peers (LibrePCB, Horizon, Fritzing) are desktop-only with no collaboration. KiCanvas proves browser-native KiCad rendering has demand — and stops at read-only, exactly where we begin. The open lane: **"KiCad, in your browser — now multiplayer"** — real co-editing (not just viewing), on the open toolchain people already trust, no install, no lock-in.
|
||||
|
||||
---
|
||||
|
||||
## Provenance & caveats
|
||||
- Fully machine-generated from live web sources on 2026-06-07; treat as a strong first draft, not ground truth. Spot-check any number you quote externally.
|
||||
- The per-competitor pass (`competitor-landing-pages.md`) is broader but lower-bar; the verified synthesis is narrower but adversarially checked. They agree on every major conclusion.
|
||||
- One claim was refuted 0-3 and excluded: that OrCAD X's *core* positioning is cloud-first. It is desktop-first with a cloud review layer.
|
||||
367
features/lp/astro-templates-and-component-libraries.md
Normal file
367
features/lp/astro-templates-and-component-libraries.md
Normal file
|
|
@ -0,0 +1,367 @@
|
|||
# Astro templates & component libraries — tooling survey for the kicad-wasm site
|
||||
|
||||
**Scope:** Modern, popular **Astro** landing-page templates and component/UI libraries that are
|
||||
simple to set up and give a beautiful design skeleton out of the box — free *and* paid — chosen for
|
||||
the **kicad-wasm** marketing site (a WebAssembly browser port of KiCad; a technical EDA / dev-tool).
|
||||
|
||||
**Date:** 2026-06-07 · **Companion to:** `brand-guide.md`, `marketing-site-playbook.md`,
|
||||
`landing-page-best-practices.md` (this file is the *implementation-tooling* layer — what to build the
|
||||
skeleton **with**; the others cover brand, content/CRO, and competitive positioning).
|
||||
|
||||
> ### ⚠️ Read this first — the site already exists
|
||||
> `site/` is **already an Astro `^6.4.4` project**: `output: 'static'`, `@astrojs/vercel` adapter,
|
||||
> `prefetch` on, with a **hand-rolled CSS design system** (`src/styles/global.css` — CSS custom
|
||||
> properties, dark theme: `--bg:#0b1020`, `--accent:#4f7cff`, `--radius:10px`). It has
|
||||
> `BaseLayout`, `Header`, `Footer`, `index`, a `blog/` collection, and legal pages.
|
||||
> **Tailwind is NOT installed.** So this is *not* a greenfield "pick a template" decision — most of
|
||||
> the libraries below are Tailwind-based, which makes **§7 Decision 0 (adopt Tailwind, or stay
|
||||
> CSS-only?)** the real fork in the road. Don't scaffold a fresh template *over* the working site;
|
||||
> the templates below are best used as **block-harvest references**, not a foundation to overwrite.
|
||||
|
||||
**Methodology:** deep-research harness — 5 search angles → 22 sources fetched → 101 candidate claims
|
||||
→ top 25 adversarially fact-checked (3 skeptics each, 2/3 to kill). 24 confirmed, 1 refuted. Stars /
|
||||
versions / prices are point-in-time (June 2026) and will drift — re-verify before buying/pinning.
|
||||
|
||||
**Confidence legend:**
|
||||
|
||||
| Marker | Meaning |
|
||||
|---|---|
|
||||
| ✅ | Verified 3-0 against primary sources this run |
|
||||
| ⚠️ | Verified with a caveat (2-1 vote, or a soft/vendor-reported sub-claim) |
|
||||
| 📋 | Established ecosystem fact, included for breadth; not independently re-verified this run |
|
||||
| ❌ | Tested and **refuted** — do not rely on it |
|
||||
|
||||
---
|
||||
|
||||
## TL;DR for kicad-wasm
|
||||
|
||||
1. **You already have an Astro site, not a blank slate.** The highest-leverage move is
|
||||
**`npx astro add tailwind`** on the existing `site/`, then layer a component library on top —
|
||||
*not* replacing `global.css` with a whole new template.
|
||||
2. **Best free component layer once Tailwind is in: [daisyUI](https://daisyui.com)** ✅ — 65
|
||||
components, 35 themes, config-free v5 install, semantic classes that coexist with your CSS-var
|
||||
tokens. Its `mockup-window` / `mockup-code` / `mockup-browser` components are perfect for framing
|
||||
the live WASM demo and CLI snippets.
|
||||
3. **Best paid: [Tailwind Plus](https://tailwindcss.com/plus)** ✅ ($299 one-time) — 500+ components
|
||||
in **vanilla HTML**; paste Marketing blocks (hero, pricing, features, FAQ) straight into `.astro`
|
||||
and recolor to your tokens. Best ROI of any paid option here.
|
||||
4. **Best template to mine for blocks (free): [AstroWind](https://github.com/arthelokyo/astrowind)**
|
||||
✅ — most-starred Astro theme (~5.7k★), MIT, **Astro v6 + Tailwind v4 (matches your Astro 6.4)**.
|
||||
Copy individual widget components (Hero, Features, Pricing, FAQ) rather than adopting wholesale.
|
||||
5. **Code blocks:** add **[Expressive Code](https://expressive-code.com)** ✅ for install/usage
|
||||
snippets (copy button, titles, highlighting) — table-stakes for a dev tool.
|
||||
6. **Stay light:** the page will host a heavy WASM demo. **Prefer zero-JS Astro/Tailwind + CSS/GSAP
|
||||
over React islands.** React component libs (shadcn/Magic UI/Aceternity) are optional flair only.
|
||||
|
||||
---
|
||||
|
||||
## 1. Landing-page templates / themes
|
||||
|
||||
A *template/theme* is a whole-page skeleton (hero, features, pricing, footer, config). Fastest path
|
||||
to "beautiful out of the box" — **but** since `site/` already exists, treat these as **reference /
|
||||
block sources** (MIT lets you copy individual components) unless you decide to restart from one.
|
||||
|
||||
### Free / open-source
|
||||
|
||||
| Template | Stars / forks | Stack | License | Maintenance | Notes |
|
||||
|---|---|---|---|---|---|
|
||||
| **[AstroWind](https://github.com/arthelokyo/astrowind)** ✅ | ~5.7k ★ / ~1.6k forks — **most-starred Astro theme** | Astro ^6.4 + Tailwind ^4.3 | MIT | **Active** — beta.60 (May 11 2026), Astro v6 + TW v4 migration done, v2.0 planned, Node ≥22.12 | Astro version **matches your `site/`**. Ships hero/feature/pricing/FAQ/footer widgets + SEO/RSS/sitemap/OG wired. Best mined for individual `~/components/widgets/*`. Org renamed `onwidget`→`arthelokyo` (old URLs redirect; npm still `@onwidget/astrowind`). |
|
||||
| **[Astroship](https://github.com/surjithctly/astroship)** 📋 | popular | Astro + Tailwind | MIT | Maintained (Web3Templates) | Clean SaaS/startup marketing skeleton. Has a paid **Astroship Pro** with more pages/blocks. |
|
||||
| **[mhyfritz/astro-landing-page](https://github.com/mhyfritz/astro-landing-page)** ✅ | 675 ★ / 224 forks | Astro + Tailwind | MIT | ⚠️ **Stale** — last push 2024-11-24 (~18 mo), not archived | Simpler single-page template; dark mode, responsive, a11y, SEO, OG, CSS-var theming. Deps likely need manual upgrade. |
|
||||
| **[RicoUI SaaS Template](https://github.com/ricocc/ricoui-saas-template)** ✅ | OSS | Astro 6 + Tailwind v4 | OSS (MIT-style) | Current | Free SaaS landing in the official directory; demo `ricofast.pages.dev`. |
|
||||
| **ProCleaning** ✅ | — | Astro + Tailwind | free in directory | — | Example free responsive landing listed in the Astro directory. |
|
||||
| **[Astro Paper](https://github.com/satnaing/astro-paper)** 📋 | ~4.7k ★ | Astro + Tailwind | MIT | Active | Blog-first (#2 most-starred Astro theme). Relevant for the `blog/` you already have. |
|
||||
| **[Astroplate](https://github.com/zeon-studio/astroplate)** 📋 | ~1.1k ★ | Astro + Tailwind | MIT | Active | Starter with blog + pages. |
|
||||
|
||||
> ✅ AstroWind is independently confirmed **#1 by stars** on the `astro-themes` topic (5.7k, ahead of
|
||||
> Astro Paper 4.7k, Astroplate 1.1k), and its SEO claims are verified **at the source-code level**:
|
||||
> `package.json` really lists `@astrojs/sitemap`, `@astrojs/rss`, `astro-seo`, and `astro.config.ts`
|
||||
> calls `sitemap()`.
|
||||
|
||||
### Paid / premium
|
||||
|
||||
| Vendor / product | Price | Stack | Notes |
|
||||
|---|---|---|---|
|
||||
| **[Tailwind Plus](https://tailwindcss.com/plus)** ✅ (ex–Tailwind UI) | **$299** personal / **$979** team (≤25), **one-time, lifetime, no subscription**, 30-day refund | Tailwind — vanilla HTML + React + Vue | Not one theme — a 500+ component library incl. Marketing blocks + full Landing-Page examples. **The recommended paid pick** (see §3). |
|
||||
| **[Cruip](https://cruip.com)** 📋 | free + premium | Tailwind (HTML/React); Astro ports exist | Very polished startup/SaaS landing templates; some free, flagship paid. Classic "looks-expensive" pick. |
|
||||
| **[Lexington Themes](https://lexingtonthemes.com)** ⚠️ | per-theme + **Full Access** | Astro + Tailwind | Large Astro marketing/SaaS catalog. Confirmed as paid/all-access in the directory; exact bundle price not verified this run. |
|
||||
| **[Cosmic Themes](https://cosmicthemes.com)** ⚠️ | per-theme + **All Access** | Astro + Tailwind | Astro-specialist studio; SaaS/landing themes, i18n, blog. Paid confirmed; price not verified this run. |
|
||||
| **AstroVault / Zarex / Fortify Astro** ⚠️ | paid / all-access | Astro + Tailwind | Additional premium Astro vendors in the directory. Existence-as-paid confirmed; pricing/license **not** individually verified. |
|
||||
| **ThemeForest / Lemon Squeezy / Gumroad** 📋 | one-off (~$15–$60 typical) | mostly Astro + Tailwind | Many Astro landing themes; quality/maintenance vary — check last-updated + reviews. |
|
||||
|
||||
### Official Astro themes directory — the browsing entry point ✅
|
||||
|
||||
**<https://astro.build/themes/?categories[]=landing-page>** — canonical first-party catalog.
|
||||
- Dedicated **"Landing pages"** category: *"Showcase your product or service with a stylish landing
|
||||
page template."*
|
||||
- **23 pages** of landing-page-tagged themes (~20/page), with a **Free vs Paid pricing filter**. ✅
|
||||
- Caveat: size proves quantity, not curation quality — vet each theme's maintenance.
|
||||
|
||||
---
|
||||
|
||||
## 2. Astro-native / Astro-first component & UI libraries
|
||||
|
||||
Building blocks as **native `.astro` components or plain Tailwind** — **no React island**, zero added
|
||||
client JS by default. Best fit for a page that also carries a heavy WASM demo.
|
||||
|
||||
| Library | What it is | Status | Astro fit | License |
|
||||
|---|---|---|---|---|
|
||||
| **[Accessible Astro Components](https://github.com/incluud/accessible-astro-components)** ✅ | 35+ native `.astro` components: Accordion, Breadcrumbs, Card, Pagination, Tabs, Modal, Notification, DarkMode toggle, form fields | npm v5.3.1, active | `import { Modal } from 'accessible-astro-components'` — **zero framework integration**, works with or without Tailwind | MIT |
|
||||
| **[Starwind UI](https://github.com/starwind-ui/starwind-ui)** 📋 | shadcn-style copy-in components **built for Astro** (Tailwind v4), accessible, themeable | Active | Native Astro; CLI adds components to your tree. The shadcn workflow **without React** | open-source |
|
||||
| **[Preline UI](https://preline.co/docs/frameworks-astro.html)** ✅ | Large Tailwind component lib with an **official Astro install guide** + interactive overlays/dropdowns/tabs via its JS plugin | ~6.3k ★, v4.2.0 (2026-05-10), active | First-class Astro; **requires Tailwind first** (architectural dependency) | free, OSS (Apache-2.0) |
|
||||
| **[Flowbite](https://flowbite.com)** 📋 | Tailwind components + marketing blocks; Astro usage docs | ~8k★+, active | Works in Astro via its JS for interactive bits | MIT core; some blocks paid |
|
||||
| **Accessible Astro Starter / Dashboard** 📋 | Full starter projects from the `incluud` team | Active | Complete bases pairing with the components above | MIT |
|
||||
|
||||
> ⚠️ **Refuted — don't repeat:** the stronger claim that Accessible Astro Components are
|
||||
> *"WCAG-compliant with comprehensive accessibility audits"* did **not** survive verification (1-2).
|
||||
> They're *accessible-by-design* (good ARIA/markup), but make no formal-audit/certification claim.
|
||||
|
||||
---
|
||||
|
||||
## 3. Tailwind-based component libraries usable in Astro (framework-agnostic HTML)
|
||||
|
||||
Astro renders plain HTML natively, so any **copy-paste Tailwind HTML** library works with **zero
|
||||
integration** (once Tailwind is installed — see §7 Decision 0). The sweet spot for a fast, light
|
||||
dev-tool page.
|
||||
|
||||
| Library | Price | What you get | Astro install | Verified |
|
||||
|---|---|---|---|---|
|
||||
| **[Tailwind Plus](https://tailwindcss.com/plus)** | $299 / $979 one-time | **500+ components**; Marketing: Hero (12), CTA (11), Pricing (12), Stats (8), Testimonials (8), Team (9), FAQs (7), Footers (7), Flyout Menus (7), 404 (5), Landing Pages (4 full), About (3). In **vanilla HTML** + React + Vue | Paste HTML into `.astro`. `@tailwindplus/elements` (CDN `<script type=module>`) adds headless interactive Dialog/Dropdown/Select/Tabs/Popover **with no JS framework** | ✅ pricing, counts, vanilla-HTML, Elements all 3-0 |
|
||||
| **[daisyUI](https://daisyui.com)** | Free (MIT) | **65 components** (Actions 6, Data Display 17, Navigation 8, Feedback 7, Data Input 14, Layout 8, Mockup 4); **35 themes** + generator; `data-theme` dark switching; ~19M npm installs | `npm i tailwindcss @tailwindcss/vite daisyui` + `@import "tailwindcss"; @plugin "daisyui";` — **config-free in v5** (also add `tailwindcss()` to Vite plugins + import CSS) | ✅ components/themes/install all 3-0 |
|
||||
| **[Preline UI](https://preline.co)** | Free | 800+ components/examples, marketing blocks | Official Astro guide (§2) | ✅ |
|
||||
| **[HyperUI](https://www.hyperui.dev)** 📋 | Free (MIT) | Open-source copy-paste Tailwind components incl. **marketing** + app + e-commerce | Paste HTML; no JS for most | 📋 |
|
||||
| **[Flowbite Blocks](https://flowbite.com/blocks/)** 📋 | free + paid | Marketing/section blocks | Paste HTML | 📋 |
|
||||
| **[Meraki UI](https://merakiui.com)** 📋 | Free | Beautiful Tailwind components, RTL | Paste HTML | 📋 |
|
||||
| **[Float UI](https://floatui.com)** 📋 | free + paid | Modern landing-page sections | Paste HTML | 📋 |
|
||||
| **[Tailblocks](https://tailblocks.cc)** 📋 | Free (MIT) | Ready-to-use blocks (hero, feature, pricing, CTA) | Paste HTML | 📋 |
|
||||
| **[Cruip Tailwind components](https://cruip.com)** 📋 | free + paid | Polished landing sections | Paste HTML | 📋 |
|
||||
| **Kometa / Kutty / Sailboat UI / TailGrids** 📋 | mixed | More Tailwind block collections worth a look | Paste HTML | 📋 |
|
||||
|
||||
**Tradeoff:** copy-paste HTML costs nothing at runtime but you own the markup (no upstream updates).
|
||||
Component *packages* (daisyUI, Preline) update via npm but add a dependency + their JS for interactivity.
|
||||
|
||||
---
|
||||
|
||||
## 4. React-island component libraries (visual flair) — and the tradeoffs
|
||||
|
||||
These are **React** libraries. In Astro they require the React integration + explicit hydration,
|
||||
shipping a React runtime + component JS to the browser. Use **deliberately and sparingly** here.
|
||||
|
||||
| Library | Stars / size | For | Astro requirement | Verified |
|
||||
|---|---|---|---|---|
|
||||
| **[shadcn/ui](https://ui.shadcn.com/docs/installation/astro)** | de-facto standard | Radix + Tailwind + CVA primitives; **copy-paste into your tree** (`shadcn add card` → `@/components/ui/`), you own the code (not an npm dep) | `npx astro add react tailwind`; hydrate `client:load/visible/idle` | ✅ both claims 3-0 |
|
||||
| **[Magic UI](https://magicui.design)** | ~21.2k ★, MIT | **150+ animated** components/effects (React + TS + Tailwind + Motion); companion to shadcn/ui | `npx astro add react` + `shadcn init` | ✅ 3-0 (150+ vendor-reported) |
|
||||
| **[Aceternity UI](https://ui.aceternity.com)** | popular | **200+** copy-paste components/blocks/templates, Framer Motion; *"ship landing pages at lightning speed"* — Hero (21+), Feature (18+), Testimonials (7+), Pricing (6+), CTA (6+), animated Backgrounds (11+) | React island + Framer Motion | ✅ 3-0 (200+ vendor-reported) |
|
||||
| **[Tremor](https://tremor.so)** 📋 | popular | React **dashboard/chart** components — not landing-oriented, but useful for live metrics | React island | 📋 |
|
||||
| **[React Bits](https://reactbits.dev) / [Cult UI](https://cult-ui.com) / [Origin UI](https://originui.com)** 📋 | growing | More shadcn-style animated React collections | React island | 📋 |
|
||||
|
||||
### The Astro React-island tradeoff (acute for kicad-wasm) ✅
|
||||
- **Cost:** each hydrated React component ships React + its JS and runs client-side. On a page that
|
||||
*also* instantiates a multi-MB WASM KiCad module, that competes for parse/compile/main-thread time
|
||||
and can hurt Lighthouse/PageSpeed.
|
||||
- **Mitigations:** prefer `client:visible`/`client:idle` over `client:load`; isolate React flair to a
|
||||
small below-the-fold section; keep hero + above-the-fold zero-JS.
|
||||
- **Open question (unbenchmarked):** the *measured* impact of React islands + Framer Motion alongside
|
||||
the WASM payload was **not** profiled in this research — measure before committing.
|
||||
- **Verdict:** treat Aceternity/Magic UI as optional spice, not the foundation. Get similar "wow"
|
||||
from CSS/GSAP/Motion One (§5) without a React runtime.
|
||||
|
||||
---
|
||||
|
||||
## 5. Animation / motion options that work in Astro
|
||||
|
||||
| Option | Type | Astro fit | Use for |
|
||||
|---|---|---|---|
|
||||
| **CSS** (transitions, keyframes, scroll-driven animations) | Zero-JS | Native, free | Default — hover/reveals/gradients, no bundle cost. Pairs with your existing CSS-var system. |
|
||||
| **Astro View Transitions** (`<ClientRouter />`) 📋 | Built-in | Native | Smooth page-to-page transitions, near-zero code. (You already have `prefetch` on — natural fit.) |
|
||||
| **[GSAP](https://gsap.com)** 📋 | Vanilla JS | `<script>` in `.astro` | Complex timelines / scroll-triggered hero — **no React**. Now fully free incl. all plugins. |
|
||||
| **[Motion (Motion One)](https://motion.dev)** 📋 | Vanilla JS (also React) | `<script>` in `.astro` | Tiny (~few KB) Web Animations API wrapper; vanilla alternative to Framer Motion. |
|
||||
| **[AOS](https://michalsnik.github.io/aos/)** 📋 | Vanilla JS | npm + init | Quick scroll-reveal via data attributes; lowest effort. |
|
||||
| **Framer Motion / Motion for React** 📋 | React | React island | Only if already committed to React (Magic UI / Aceternity depend on it). |
|
||||
| **[Lottie](https://lottiefiles.com) (`lottie-web`)** 📋 | Vanilla JS | `<script>` / web component | Designer JSON animations (animated logo, "routing traces" motif). |
|
||||
|
||||
> **For kicad-wasm:** CSS + GSAP/Motion One deliver premium motion with no React runtime — keeping
|
||||
> the page light next to the WASM editor.
|
||||
|
||||
---
|
||||
|
||||
## 6. Icons, fonts, code blocks & SEO/perf tooling
|
||||
|
||||
### Icons
|
||||
- **[astro-icon](https://github.com/natemoo-re/astro-icon)** 📋 — Astro icon component using
|
||||
**[Iconify](https://iconify.design)** sets (200k+ icons: `lucide`, `tabler`, `mdi`,
|
||||
`simple-icons` for brand logos). SVGs inlined at build → zero runtime JS.
|
||||
- **[Lucide](https://lucide.dev)** 📋 — clean popular open-source set (also via Iconify).
|
||||
|
||||
### Fonts
|
||||
- **[Fontsource](https://fontsource.org)** 📋 — self-host open fonts via npm; no external request,
|
||||
better privacy/perf/CLS. (Your `global.css` currently uses `system-ui` stack — fine, but a self-
|
||||
hosted display face would lift the brand.)
|
||||
- **[Astro Fonts API](https://docs.astro.build/en/reference/experimental-flags/fonts/)** 📋 —
|
||||
built-in font optimization (`experimental.fonts`) for self-hosting + preloading.
|
||||
|
||||
### Code blocks (matters for a dev tool — install/usage snippets)
|
||||
- **[Expressive Code](https://expressive-code.com)** ✅ — Astro/Starlight-grade code blocks: Shiki
|
||||
highlighting, line numbers/highlighting, titles/frames, copy button, diff markers. Installs as an
|
||||
Astro integration. Ideal for `npm`/CLI install + KiCad script examples. **Recommended.**
|
||||
- **[Shiki](https://shiki.style)** 📋 — Astro's default Markdown/MDX highlighter.
|
||||
|
||||
### SEO / performance
|
||||
- **[@astrojs/sitemap](https://docs.astro.build/en/guides/integrations-guide/sitemap/)** ✅ —
|
||||
official; auto-generates `sitemap-index.xml` + `sitemap-0.xml` at build by crawling static routes
|
||||
(incl. dynamic `getStaticPaths()` routes). *(You're `output: 'static'` — perfect fit; bundled in
|
||||
AstroWind.)*
|
||||
- **[@astrojs/rss](https://docs.astro.build/en/recipes/rss/)** ✅ — official RSS builder. *(You
|
||||
already have a `blog/` collection — wire this up.)*
|
||||
- **[astro-seo](https://github.com/jonasmerlin/astro-seo)** ✅ — `<meta>`, Open Graph, Twitter cards.
|
||||
- **Built-in Astro perf:** static HTML, partial hydration (islands), `<Image />` optimization, asset
|
||||
bundling — Astro's zero-JS-by-default model is the biggest perf lever for a content site.
|
||||
- **`@astrojs/partytown`** 📋 — offload third-party scripts (analytics) to a web worker so they
|
||||
don't block the main thread — relevant when the main thread is busy with WASM.
|
||||
|
||||
---
|
||||
|
||||
## 7. Concrete recommendation for the kicad-wasm landing page
|
||||
|
||||
### Decision 0 — RESOLVED: use Tailwind ✅
|
||||
|
||||
> **Decided (2026-06-07): the project will use Tailwind.** `site/` currently uses **hand-rolled CSS**
|
||||
> (custom properties, dark theme) with **no Tailwind**, so the concrete next step is to **add Tailwind
|
||||
> to the existing site** rather than re-scaffold. The CSS-only path below is kept only for reference.
|
||||
|
||||
**Step 1 — add Tailwind to the existing `site/`** (Astro 6 + Tailwind v4 via the Vite plugin):
|
||||
|
||||
```bash
|
||||
cd site
|
||||
npx astro add tailwind # wires @tailwindcss/vite into astro.config.mjs
|
||||
```
|
||||
|
||||
Then in `src/styles/global.css` add Tailwind on top of your existing tokens:
|
||||
|
||||
```css
|
||||
@import "tailwindcss";
|
||||
/* your existing :root { --bg; --accent; ... } stays — it's the source of truth */
|
||||
@plugin "daisyui"; /* once daisyUI is installed (step 2) */
|
||||
```
|
||||
|
||||
**Step 2 — map your existing tokens to a daisyUI theme** so hand-written + library components share
|
||||
one palette. Define a custom daisyUI theme whose `--p`/`--b1`/etc. resolve to your `--accent:#4f7cff`,
|
||||
`--bg:#0b1020`, `--radius:10px`. Keep `global.css` `:root` as the single source of truth.
|
||||
|
||||
> Net effect: Tailwind v4 **coexists with** your current CSS rather than replacing it, and unlocks
|
||||
> daisyUI + Tailwind Plus + AstroWind block-harvesting with minimal churn.
|
||||
|
||||
<details><summary>Reference only — the rejected CSS-only path</summary>
|
||||
|
||||
Keep `global.css`; hand-build sections (optionally copying HTML structure from HyperUI / Tailblocks /
|
||||
AstroWind and converting utility classes to your CSS). Use **Accessible Astro Components** (works
|
||||
without Tailwind) for interactive bits. Rejected because it costs medium effort per section (manual
|
||||
restyling) and forgoes the daisyUI / Tailwind Plus ecosystem.
|
||||
|
||||
</details>
|
||||
|
||||
### Recommended stack (Tailwind path)
|
||||
|
||||
- **Foundation:** keep the **existing `site/` Astro project** (Astro 6.4, static, Vercel). Do **not**
|
||||
re-scaffold from a template — instead **mine AstroWind** ✅ (same Astro v6 + Tailwind v4) for
|
||||
individual Hero/Features/Pricing/FAQ widget markup and adapt to your tokens.
|
||||
- **Component layer (free):** **daisyUI** ✅ — themeable buttons/cards/badges/navbar, and crucially
|
||||
`mockup-window` / `mockup-code` / `mockup-browser` to frame the **live WASM demo** and CLI
|
||||
snippets. Add **Accessible Astro Components** ✅ / **Preline** ✅ for accessible modal/tabs/accordion
|
||||
without React.
|
||||
- **Component layer (paid, optional):** **Tailwind Plus** ✅ ($299 one-time) if you want pro-grade
|
||||
Marketing sections fast — paste vanilla-HTML hero/pricing/feature blocks and recolor. Best paid ROI.
|
||||
- **Code blocks:** **Expressive Code** ✅ — install/usage snippets with copy button + highlighting.
|
||||
- **Animation:** **CSS + GSAP or Motion One** (vanilla). *Avoid* React-island animation libs as the
|
||||
base; optionally one Aceternity/Magic UI section `client:visible` for a marquee effect.
|
||||
- **Icons/fonts:** **astro-icon** + Iconify (`lucide`, `simple-icons` for GitHub/Discord);
|
||||
self-host a display font via **Fontsource** / Astro Fonts API to lift the brand above `system-ui`.
|
||||
- **SEO/perf:** **@astrojs/sitemap** ✅ + **astro-seo** ✅ + **@astrojs/rss** ✅ (you already have a
|
||||
blog); **partytown** for analytics so it doesn't fight the WASM main thread.
|
||||
|
||||
### Best paid option, and when it's worth it
|
||||
- **Tailwind Plus ($299 one-time)** ✅ — buy if you want top-tier section designs fast and will reuse
|
||||
them site-wide; composes *with* your existing site rather than replacing it.
|
||||
- **A premium Astro theme** (Cosmic / Lexington "All Access") ⚠️ — only if you'd rather *restart* from
|
||||
a complete polished SaaS theme than layer onto `site/`. Verify per-bundle price/license first.
|
||||
|
||||
### Decision shortcuts
|
||||
- *Ship this week, $0:* add Tailwind + **daisyUI** + **Expressive Code** to `site/`, harvest AstroWind
|
||||
blocks. ← **default**
|
||||
- *Bespoke look, small budget:* same + **Tailwind Plus** Marketing blocks.
|
||||
- *Turnkey premium SaaS look, willing to restart:* a **Cosmic/Lexington** Astro theme (verify price).
|
||||
- *Flashy animated hero:* one Aceternity/Magic UI React island (`client:visible`), or **GSAP** to
|
||||
avoid React.
|
||||
|
||||
### kicad-wasm-specific build notes
|
||||
- **Hero = live demo, not just a screenshot.** Reserve a slot to embed the interactive WASM editor
|
||||
(iframe/canvas). Lazy-init it (`client:visible` / IntersectionObserver) so it doesn't block first
|
||||
paint. *(Which template gives the cleanest hero slot for this was flagged as an open question — see
|
||||
below.)*
|
||||
- **Dark mode is expected by devs** — your `global.css` is already dark-first; daisyUI's `dark`
|
||||
theme or a `data-theme` toggle slots in cleanly.
|
||||
- **Keep the marketing page's JS budget tiny** because the demo's WASM payload is the heavy part.
|
||||
|
||||
---
|
||||
|
||||
## 8. Caveats & open questions
|
||||
|
||||
**Caveats**
|
||||
- **Time-sensitive (June 2026):** AstroWind ~5.7k★/Astro v6/TW v4, Preline v4.2.0, Magic UI ~21.2k★,
|
||||
daisyUI 5, Tailwind Plus $299/$979. Re-verify before buying/pinning.
|
||||
- **Vendor-reported counts:** "150+" (Magic UI), "200+" (Aceternity), "professionally designed"
|
||||
(Tailwind Plus) are vendors' own figures; qualitative facts (free/OSS, stack, copy-paste) verified,
|
||||
exact counts not independently re-counted.
|
||||
- **Perf is content-dependent:** AstroWind's "production-ready PageSpeed" depends on *your* images
|
||||
and — here — the WASM payload. Not guaranteed; measure.
|
||||
- **Stale template:** `mhyfritz/astro-landing-page` — no commits since 2024-11-24; expect manual dep
|
||||
upgrades.
|
||||
- **MIT ≠ no obligations:** AstroWind, mhyfritz, Magic UI, RicoUI still require retaining the
|
||||
copyright/license notice (trivial, but it exists).
|
||||
- **Premium Astro bundles** (Lexington, Cosmic, AstroVault, Zarex, Fortify) confirmed only to *exist
|
||||
as paid/all-access* — exact prices and license terms (single-site vs unlimited, commercial) **not**
|
||||
individually verified.
|
||||
- **❌ Refuted:** Accessible Astro Components are accessible-by-design but **not** formally WCAG-
|
||||
audited/certified — don't claim otherwise.
|
||||
|
||||
**Open questions worth resolving before committing**
|
||||
1. Exact prices/license terms of premium Astro bundles (Lexington / Cosmic / AstroVault / Zarex /
|
||||
Fortify) and which ship a real dev-tool/SaaS landing template.
|
||||
2. Measured impact of React islands + Framer Motion **combined with** the heavy WASM demo on
|
||||
load/PageSpeed — needs a real benchmark on this project.
|
||||
3. Non-React animation bundle sizes (GSAP vs Motion One vs AOS vs CSS) vs the Aceternity/Magic UI
|
||||
React-island route.
|
||||
4. Which approach gives the cleanest **hero slot to embed the interactive WASM demo** (iframe/canvas)
|
||||
vs only a static screenshot, and the effort to wire lazy init.
|
||||
|
||||
---
|
||||
|
||||
## 9. Sources
|
||||
|
||||
Primary (fetched & verified this run):
|
||||
- AstroWind — <https://github.com/arthelokyo/astrowind> · <https://github.com/onwidget/astrowind>
|
||||
- Astro themes topic ranking — <https://github.com/topics/astro-themes>
|
||||
- Astro official themes directory — <https://astro.build/themes/?categories[]=landing-page>
|
||||
- mhyfritz/astro-landing-page — <https://github.com/mhyfritz/astro-landing-page> (+ GitHub API)
|
||||
- RicoUI SaaS Template — <https://github.com/ricocc/ricoui-saas-template>
|
||||
- Astroship — <https://github.com/surjithctly/astroship>
|
||||
- Tailwind Plus — <https://tailwindcss.com/plus> · marketing blocks <https://tailwindcss.com/plus/ui-blocks/marketing> · vanilla-JS blog <https://tailwindcss.com/blog/vanilla-js-support-for-tailwind-plus>
|
||||
- daisyUI — <https://daisyui.com> · Astro install <https://daisyui.com/docs/install/astro/> · components <https://daisyui.com/components> · themes <https://daisyui.com/docs/themes/> · repo <https://github.com/saadeghi/daisyui>
|
||||
- Preline UI — Astro guide <https://preline.co/docs/frameworks-astro.html> · repo <https://github.com/htmlstreamofficial/preline>
|
||||
- Accessible Astro Components — <https://github.com/incluud/accessible-astro-components> · <https://accessible-astro.incluud.dev>
|
||||
- Starwind UI — <https://github.com/starwind-ui/starwind-ui>
|
||||
- shadcn/ui (Astro) — <https://ui.shadcn.com/docs/installation/astro> · <https://ui.shadcn.com/docs>
|
||||
- Magic UI — <https://magicui.design> · Astro install <https://v3.magicui.design/docs/installation/astro> · repo <https://github.com/magicuidesign/magicui>
|
||||
- Aceternity UI — <https://ui.aceternity.com> · components <https://ui.aceternity.com/components>
|
||||
- @astrojs/sitemap — <https://docs.astro.build/en/guides/integrations-guide/sitemap/>
|
||||
- Expressive Code — <https://expressive-code.com/installation/>
|
||||
- Tailwind Plus pricing corroboration — <https://landinggo.com/blog/tailwind-ui-pricing>
|
||||
|
||||
Secondary / blog (context): pkgpulse Aceternity-vs-Magic-vs-shadcn comparison; dev.to shadcn-like
|
||||
collections; adminlte.io premium Astro templates; npmtrends/daisyui.
|
||||
|
||||
---
|
||||
|
||||
*Generated by the deep-research harness: 5 angles · 22 sources fetched · 101 claims extracted · 25
|
||||
adversarially verified (24 confirmed, 1 refuted) · 104 agents. Tailored against the real `site/`
|
||||
Astro project state. Re-run before purchasing to refresh prices/versions/stars.*
|
||||
541
features/lp/brand-guide.md
Normal file
541
features/lp/brand-guide.md
Normal file
|
|
@ -0,0 +1,541 @@
|
|||
# Brand & Design Guide — KiCad in the Browser
|
||||
|
||||
> Technical brand guide for the marketing/landing site (`/site`, Astro 6) and any
|
||||
> future product UI surfaces. This is the single source of truth for color,
|
||||
> typography, spacing, and component tokens.
|
||||
>
|
||||
> **Product in one line:** *Real KiCad — the PCB/schematic EDA tool — running in
|
||||
> your browser via WebAssembly, with real‑time collaboration.*
|
||||
|
||||
---
|
||||
|
||||
## 1. Positioning & voice
|
||||
|
||||
| | |
|
||||
|---|---|
|
||||
| **What it is** | KiCad PCBnew/Eeschema compiled to WebAssembly, runnable in any modern browser, with multiplayer (presence, shared cursors, live editing). |
|
||||
| **Who it's for** | Hardware engineers, EE students, open‑hardware teams, hobbyists who don't want to install a desktop toolchain. |
|
||||
| **Feeling** | Precise, technical, trustworthy, fast. "An instrument, not a toy." Engineering‑grade, but approachable because it's *just a URL*. |
|
||||
| **What it is not** | Not a watered‑down web clone. It is *the actual KiCad engine*. Lean into that authenticity. |
|
||||
|
||||
### Voice & tone
|
||||
|
||||
- **Plain and precise.** Engineers smell marketing fluff. 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.** Numbers and verbs over adjectives.
|
||||
- **Respect the heritage.** KiCad is a beloved open‑source project. We extend it;
|
||||
we don't claim it. Be clear about the relationship (see §10, Logo & attribution).
|
||||
- **Builder‑to‑builder.** Code snippets, real file names, real keyboard shortcuts
|
||||
are on‑brand. The audience reads monospace fluently.
|
||||
|
||||
### Three pillars (use as feature headings / section themes)
|
||||
|
||||
1. **No install** — it's a browser tab. Zero toolchain, zero setup.
|
||||
2. **Real KiCad** — the genuine engine, not a re‑implementation.
|
||||
3. **Together** — real‑time collaboration: presence, shared cursors, live edits.
|
||||
|
||||
---
|
||||
|
||||
## 2. Color system
|
||||
|
||||
The site today is **dark‑first** (`--bg: #0b1020`, accent `#4f7cff`, blue "K"
|
||||
favicon `#1d4ed8`). This guide formalizes those existing values into full scales
|
||||
and adds the missing semantic + collaboration palettes. **Everything here is
|
||||
backward‑compatible with the current `site/src/styles/global.css`.**
|
||||
|
||||
### 2.1 Brand primary — "Circuit Blue"
|
||||
|
||||
The core identity color. Anchored on the existing accent `#4f7cff` (= `500`) and
|
||||
the favicon blue `#1d4ed8` (= `700`).
|
||||
|
||||
| Token | Hex | Use |
|
||||
|---|---|---|
|
||||
| `primary-50` | `#eef3ff` | tint backgrounds, hover wash on light |
|
||||
| `primary-100` | `#dbe4ff` | subtle fills |
|
||||
| `primary-200` | `#bccdff` | borders on light, disabled text |
|
||||
| `primary-300` | `#93acff` | secondary links on dark |
|
||||
| `primary-400` | `#6b8eff` | hover state of links on dark |
|
||||
| `primary-500` | `#4f7cff` | **brand accent** (links, focus rings, highlights) |
|
||||
| `primary-600` | `#2f57f5` | **primary button bg** (best white‑text contrast) |
|
||||
| `primary-700` | `#1d4ed8` | button hover/active, favicon |
|
||||
| `primary-800` | `#1e40af` | pressed |
|
||||
| `primary-900` | `#1b357f` | deep accents |
|
||||
| `primary-950` | `#131f54` | accent on near‑black |
|
||||
|
||||
> ⚠️ **Contrast note:** white text on `primary-500` (`#4f7cff`) is ~3.4:1 — fine
|
||||
> for large/bold text but **fails AA for body text**. For text‑bearing buttons use
|
||||
> **`primary-600`** (`#2f57f5`, ~4.6:1) or darker. Use `500` for links/accents on
|
||||
> the dark background, where it sits at ~6:1 against `#0b1020`.
|
||||
|
||||
### 2.2 Secondary — "Signal Green" (live / connected)
|
||||
|
||||
Green is the language of "on", "connected", "valid" — and nods to PCB soldermask
|
||||
and DRC‑clean. Use it for **collaboration presence ("online"), success, and
|
||||
connection state**, *not* as a second brand color competing with blue.
|
||||
|
||||
| Token | Hex | Use |
|
||||
|---|---|---|
|
||||
| `signal-50` | `#ecfdf3` | |
|
||||
| `signal-100` | `#d1fadf` | |
|
||||
| `signal-200` | `#a6f4c5` | |
|
||||
| `signal-300` | `#6ce9a6` | "online" dot on dark |
|
||||
| `signal-400` | `#32d583` | live indicators, success text on dark |
|
||||
| `signal-500` | `#12b76a` | success fills |
|
||||
| `signal-600` | `#039855` | success button |
|
||||
| `signal-700` | `#027a48` | |
|
||||
| `signal-800` | `#05603a` | |
|
||||
| `signal-900` | `#054f31` | |
|
||||
| `signal-950` | `#032b1c` | |
|
||||
|
||||
### 2.3 Neutrals — "Ink" (navy‑tinted)
|
||||
|
||||
A cool, slightly navy‑tinted gray ramp so neutrals harmonize with Circuit Blue
|
||||
instead of looking muddy. Anchored on the existing `--bg`/`--bg-soft`/`--border`/
|
||||
`--fg`/`--fg-muted`.
|
||||
|
||||
| Token | Hex | Maps to existing | Use |
|
||||
|---|---|---|---|
|
||||
| `ink-50` | `#f5f7fb` | — | text on light surfaces |
|
||||
| `ink-100` | `#e7ecf5` | `--fg` | **primary text on dark** |
|
||||
| `ink-200` | `#cdd6e7` | — | headings secondary |
|
||||
| `ink-300` | `#b6c0d8` | — | |
|
||||
| `ink-400` | `#9aa6c0` | `--fg-muted` | **muted/secondary text** |
|
||||
| `ink-500` | `#6b769a` | — | placeholder, disabled |
|
||||
| `ink-600` | `#4a5578` | — | hairlines on dark |
|
||||
| `ink-700` | `#334066` | — | strong borders |
|
||||
| `ink-800` | `#233052` | `--border` | **default border** |
|
||||
| `ink-900` | `#11182e` | `--bg-soft` | **elevated surface / cards** |
|
||||
| `ink-950` | `#0b1020` | `--bg` | **page background** |
|
||||
|
||||
### 2.4 Semantic colors
|
||||
|
||||
| Role | Token | Hex (on dark) | Notes |
|
||||
|---|---|---|---|
|
||||
| Info | `info` | `#4f7cff` | = `primary-500` |
|
||||
| Success | `success` | `#32d583` | = `signal-400` (text) / `signal-600` (fill) |
|
||||
| Warning | `warning` | `#fdb022` | amber‑400 |
|
||||
| Danger | `danger` | `#f97066` | red‑400 for text on dark / `#d92d20` for fills |
|
||||
|
||||
Warning ramp (`amber`): `#fffaeb · #fef0c7 · #fedf89 · #fec84b · #fdb022 · #f79009 · #dc6803 · #b54708 · #93370d · #7a2e0e`
|
||||
Danger ramp (`red`): `#fef3f2 · #fee4e2 · #fecdca · #fda29b · #f97066 · #f04438 · #d92d20 · #b42318 · #912018 · #7a271a`
|
||||
|
||||
### 2.5 Collaboration / presence palette
|
||||
|
||||
Multiplayer needs a set of **visually distinct, equally‑weighted** hues for
|
||||
remote cursors, selection outlines, and avatar rings. These are *peers* (no
|
||||
hierarchy) and must stay legible against the dark canvas. Assign deterministically
|
||||
(e.g. `hash(userId) % 8`).
|
||||
|
||||
| # | Name | Hex |
|
||||
|---|---|---|
|
||||
| 1 | Indigo | `#818cf8` |
|
||||
| 2 | Sky | `#38bdf8` |
|
||||
| 3 | Teal | `#2dd4bf` |
|
||||
| 4 | Green | `#4ade80` |
|
||||
| 5 | Amber | `#fbbf24` |
|
||||
| 6 | Orange | `#fb923c` |
|
||||
| 7 | Rose | `#fb7185` |
|
||||
| 8 | Violet | `#c084fc` |
|
||||
|
||||
Rules:
|
||||
- These are the **400‑weight** of their hue — bright enough to pop on `#0b1020`,
|
||||
not so saturated they vibrate.
|
||||
- Cursor label chips: presence hex at full opacity, **black** (`#0b1020`) text
|
||||
for AA on these light hues.
|
||||
- Selection halos: presence hex at `~30%` alpha for fills, full alpha for the 2px
|
||||
outline.
|
||||
- Never use Circuit Blue (`primary-500`) as a presence color — it reads as "the
|
||||
app/you", not "a peer".
|
||||
|
||||
---
|
||||
|
||||
## 3. Typography
|
||||
|
||||
The site deliberately ships **zero client JS and no web fonts** (HTML + CSS only —
|
||||
see `site/README.md`). Honor that: **default to the system UI stack** and only add
|
||||
a web font if a measured branding win justifies the kilobytes.
|
||||
|
||||
### Families
|
||||
|
||||
```css
|
||||
--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
|
||||
sans-serif; /* body + headings (current) */
|
||||
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code",
|
||||
"Cascadia Code", Menlo, Consolas, monospace; /* code, file names, coords */
|
||||
```
|
||||
|
||||
- **Sans** carries everything by default — matches the current site and stays
|
||||
asset‑free.
|
||||
- **Mono** is a brand asset here, not just for code. Use it for file names
|
||||
(`board.kicad_pcb`), coordinates (`X 152.4 Y 96.0`), shortcuts, version strings,
|
||||
and stat numbers. It signals "engineering tool".
|
||||
- *Optional upgrade:* if a display font is ever wanted, **Inter** (variable) for
|
||||
headings is the safe pick — but self‑host, subset, and `font-display: swap`.
|
||||
|
||||
### Type scale (`clamp()` for fluid headings, matches current hero)
|
||||
|
||||
| Token | Size | Line‑height | Use |
|
||||
|---|---|---|---|
|
||||
| `text-display` | `clamp(2.5rem, 6vw, 4rem)` | 1.05 | landing hero |
|
||||
| `text-h1` | `clamp(2rem, 5vw, 3rem)` | 1.1 | page titles (current hero h1) |
|
||||
| `text-h2` | `1.875rem` | 1.2 | section headings |
|
||||
| `text-h3` | `1.375rem` | 1.25 | card titles |
|
||||
| `text-lead` | `1.2rem` | 1.6 | hero subcopy (current `.lead`) |
|
||||
| `text-base` | `1rem` | 1.6 | body (current default) |
|
||||
| `text-sm` | `0.9rem` | 1.5 | footer, captions |
|
||||
| `text-xs` | `0.8rem` | 1.4 | timestamps, labels |
|
||||
|
||||
Weights: `400` body · `600` emphasis/buttons/brand‑secondary · `700` brand/headings.
|
||||
Body line‑height stays `1.6`; headings `1.1–1.25`. Cap measure at ~`44rem`
|
||||
(`.prose`) / `42rem` (`.lead`) for readability.
|
||||
|
||||
---
|
||||
|
||||
## 4. Spacing, radius, elevation, motion
|
||||
|
||||
### Spacing
|
||||
4px base scale (Tailwind default): `0.5/1/1.5/2/3/4/6/8/12/16/24 → 2px…96px`.
|
||||
Section rhythm currently in use: `main { padding-block: 3rem }`, grid gap `1rem`,
|
||||
card padding `1.25rem`. Keep these.
|
||||
|
||||
### Radius
|
||||
```css
|
||||
--radius-sm: 6px; /* favicon square, chips, inputs */
|
||||
--radius: 10px; /* default — cards, buttons (current --radius) */
|
||||
--radius-lg: 16px; /* hero panels, modals */
|
||||
--radius-full: 9999px;/* avatars, presence dots, pills */
|
||||
```
|
||||
|
||||
### Borders
|
||||
`1px solid var(--ink-800)` is the workhorse (current `--border`). Hairlines on
|
||||
darker surfaces: `--ink-700`. Avoid pure‑black borders.
|
||||
|
||||
### Elevation (shadows — keep subtle; dark UI leans on borders + bg shifts)
|
||||
```css
|
||||
--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
|
||||
--shadow-md: 0 4px 12px rgb(0 0 0 / 0.45);
|
||||
--shadow-lg: 0 12px 32px rgb(0 0 0 / 0.5);
|
||||
--shadow-glow: 0 0 0 3px rgb(79 124 255 / 0.35); /* focus ring, primary-500 */
|
||||
```
|
||||
|
||||
### Motion
|
||||
- Durations: `--dur-fast: 120ms`, `--dur: 200ms`, `--dur-slow: 360ms`.
|
||||
- Easing: `--ease: cubic-bezier(0.2, 0.8, 0.2, 1)` (standard), `--ease-out:
|
||||
cubic-bezier(0, 0, 0.2, 1)`.
|
||||
- Hover affordance in use: `filter: brightness(1.08)` on the CTA — keep it.
|
||||
- **Always** wrap non‑essential motion in `@media (prefers-reduced-motion: reduce)`.
|
||||
|
||||
### Breakpoints (Tailwind defaults)
|
||||
`sm 640 · md 768 · lg 1024 · xl 1280 · 2xl 1536`. Content max‑width `64rem`
|
||||
(`--max-width`, current).
|
||||
|
||||
### Z‑index ladder
|
||||
`base 0 · dropdown 1000 · sticky-header 1020 · overlay 1030 · modal 1040 ·
|
||||
presence-cursors 1050 · toast 1060 · tooltip 1070`.
|
||||
|
||||
---
|
||||
|
||||
## 5. Tailwind setup
|
||||
|
||||
The current site uses **plain CSS** (no Tailwind yet). When/if Tailwind is added,
|
||||
use **Tailwind v4** (CSS‑first `@theme`, no JS config needed) since the site is
|
||||
already on Astro 6 + Vite. A v3‑style `tailwind.config.js` is included below for
|
||||
reference / if a JS config is preferred.
|
||||
|
||||
### 5.1 Tailwind v4 (recommended) — `@theme` in CSS
|
||||
|
||||
Install: `npm i tailwindcss @tailwindcss/vite` then add `@tailwindcss/vite` to
|
||||
`astro.config.mjs` Vite plugins. Then in `src/styles/global.css`:
|
||||
|
||||
```css
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
/* ---- Brand: Circuit Blue ---- */
|
||||
--color-primary-50: #eef3ff;
|
||||
--color-primary-100: #dbe4ff;
|
||||
--color-primary-200: #bccdff;
|
||||
--color-primary-300: #93acff;
|
||||
--color-primary-400: #6b8eff;
|
||||
--color-primary-500: #4f7cff;
|
||||
--color-primary-600: #2f57f5;
|
||||
--color-primary-700: #1d4ed8;
|
||||
--color-primary-800: #1e40af;
|
||||
--color-primary-900: #1b357f;
|
||||
--color-primary-950: #131f54;
|
||||
|
||||
/* ---- Signal Green (live / success) ---- */
|
||||
--color-signal-50: #ecfdf3;
|
||||
--color-signal-100: #d1fadf;
|
||||
--color-signal-200: #a6f4c5;
|
||||
--color-signal-300: #6ce9a6;
|
||||
--color-signal-400: #32d583;
|
||||
--color-signal-500: #12b76a;
|
||||
--color-signal-600: #039855;
|
||||
--color-signal-700: #027a48;
|
||||
--color-signal-800: #05603a;
|
||||
--color-signal-900: #054f31;
|
||||
--color-signal-950: #032b1c;
|
||||
|
||||
/* ---- Ink (navy-tinted neutrals) ---- */
|
||||
--color-ink-50: #f5f7fb;
|
||||
--color-ink-100: #e7ecf5;
|
||||
--color-ink-200: #cdd6e7;
|
||||
--color-ink-300: #b6c0d8;
|
||||
--color-ink-400: #9aa6c0;
|
||||
--color-ink-500: #6b769a;
|
||||
--color-ink-600: #4a5578;
|
||||
--color-ink-700: #334066;
|
||||
--color-ink-800: #233052;
|
||||
--color-ink-900: #11182e;
|
||||
--color-ink-950: #0b1020;
|
||||
|
||||
/* ---- Semantic aliases ---- */
|
||||
--color-bg: var(--color-ink-950);
|
||||
--color-bg-soft: var(--color-ink-900);
|
||||
--color-border: var(--color-ink-800);
|
||||
--color-fg: var(--color-ink-100);
|
||||
--color-fg-muted: var(--color-ink-400);
|
||||
--color-accent: var(--color-primary-500);
|
||||
--color-success: var(--color-signal-400);
|
||||
--color-warning: #fdb022;
|
||||
--color-danger: #f97066;
|
||||
|
||||
/* ---- Presence (collaboration) ---- */
|
||||
--color-presence-1: #818cf8;
|
||||
--color-presence-2: #38bdf8;
|
||||
--color-presence-3: #2dd4bf;
|
||||
--color-presence-4: #4ade80;
|
||||
--color-presence-5: #fbbf24;
|
||||
--color-presence-6: #fb923c;
|
||||
--color-presence-7: #fb7185;
|
||||
--color-presence-8: #c084fc;
|
||||
|
||||
/* ---- Type ---- */
|
||||
--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
|
||||
|
||||
/* ---- Radius ---- */
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 10px;
|
||||
--radius-lg: 16px;
|
||||
}
|
||||
```
|
||||
|
||||
Usage in markup then reads naturally: `class="bg-bg text-fg border border-border"`,
|
||||
`class="text-accent"`, `class="bg-primary-600 hover:bg-primary-700"`,
|
||||
`class="text-presence-3"`.
|
||||
|
||||
### 5.2 Tailwind v3 (alternative) — `tailwind.config.js`
|
||||
|
||||
```js
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ["./src/**/*.{astro,html,js,ts,md,mdx}"],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: {
|
||||
50:"#eef3ff",100:"#dbe4ff",200:"#bccdff",300:"#93acff",400:"#6b8eff",
|
||||
500:"#4f7cff",600:"#2f57f5",700:"#1d4ed8",800:"#1e40af",900:"#1b357f",950:"#131f54",
|
||||
},
|
||||
signal: {
|
||||
50:"#ecfdf3",100:"#d1fadf",200:"#a6f4c5",300:"#6ce9a6",400:"#32d583",
|
||||
500:"#12b76a",600:"#039855",700:"#027a48",800:"#05603a",900:"#054f31",950:"#032b1c",
|
||||
},
|
||||
ink: {
|
||||
50:"#f5f7fb",100:"#e7ecf5",200:"#cdd6e7",300:"#b6c0d8",400:"#9aa6c0",
|
||||
500:"#6b769a",600:"#4a5578",700:"#334066",800:"#233052",900:"#11182e",950:"#0b1020",
|
||||
},
|
||||
presence: {
|
||||
1:"#818cf8",2:"#38bdf8",3:"#2dd4bf",4:"#4ade80",
|
||||
5:"#fbbf24",6:"#fb923c",7:"#fb7185",8:"#c084fc",
|
||||
},
|
||||
// semantic
|
||||
bg: "#0b1020", "bg-soft": "#11182e", border: "#233052",
|
||||
fg: "#e7ecf5", "fg-muted": "#9aa6c0", accent: "#4f7cff",
|
||||
success: "#32d583", warning: "#fdb022", danger: "#f97066",
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ["system-ui","-apple-system","Segoe UI","Roboto","Helvetica","Arial","sans-serif"],
|
||||
mono: ["ui-monospace","SF Mono","JetBrains Mono","Fira Code","Menlo","Consolas","monospace"],
|
||||
},
|
||||
borderRadius: { sm: "6px", DEFAULT: "10px", lg: "16px" },
|
||||
maxWidth: { content: "64rem", prose: "44rem" },
|
||||
boxShadow: {
|
||||
sm: "0 1px 2px rgb(0 0 0 / 0.4)",
|
||||
md: "0 4px 12px rgb(0 0 0 / 0.45)",
|
||||
lg: "0 12px 32px rgb(0 0 0 / 0.5)",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
```
|
||||
|
||||
### 5.3 Raw CSS variables (no Tailwind) — extends current `global.css`
|
||||
|
||||
If staying on hand‑written CSS, this is the drop‑in superset of the existing
|
||||
`:root` block (existing names preserved; new ones added):
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* existing — unchanged */
|
||||
--bg: #0b1020;
|
||||
--bg-soft: #11182e;
|
||||
--fg: #e7ecf5;
|
||||
--fg-muted: #9aa6c0;
|
||||
--accent: #4f7cff;
|
||||
--border: #233052;
|
||||
--max-width: 64rem;
|
||||
--radius: 10px;
|
||||
|
||||
/* added — full scales available as --primary-600 etc. (see §5.1) */
|
||||
--primary-600: #2f57f5;
|
||||
--primary-700: #1d4ed8;
|
||||
--success: #32d583;
|
||||
--warning: #fdb022;
|
||||
--danger: #f97066;
|
||||
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
|
||||
--radius-sm: 6px;
|
||||
--radius-lg: 16px;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. Components (tokens & rules)
|
||||
|
||||
Built from the current `global.css` patterns; tightened for AA contrast.
|
||||
|
||||
### Buttons
|
||||
| Variant | bg | text | hover |
|
||||
|---|---|---|---|
|
||||
| **Primary** | `primary-600` (`#2f57f5`) | `#fff` | `primary-700` |
|
||||
| **Secondary** | transparent, `1px` `ink-700` border | `fg` | bg `ink-900` |
|
||||
| **Ghost** | transparent | `fg-muted` → `fg` | underline / bg wash |
|
||||
| **Success** | `signal-600` | `#fff` | `signal-700` |
|
||||
|
||||
Shared: `padding: 0.7rem 1.25rem` · `border-radius: var(--radius)` ·
|
||||
`font-weight: 600` · focus → `--shadow-glow`. *(Note: current `.cta` uses
|
||||
`--accent` `#4f7cff`; bump to `primary-600` for AA on white text.)*
|
||||
|
||||
### Cards (current `.card`)
|
||||
`background: bg-soft` · `1px ink-800 border` · `radius 10px` · `padding 1.25rem`.
|
||||
Hover (if interactive): border → `ink-700`, subtle `--shadow-md`.
|
||||
|
||||
### Links
|
||||
Default `accent` (`primary-500`), underline on hover. In dense UI/nav, use
|
||||
`fg-muted` → `fg` on hover with no underline (current `.nav` pattern).
|
||||
|
||||
### Inputs
|
||||
bg `bg`/`ink-950`, border `ink-700`, text `fg`, placeholder `ink-500`,
|
||||
focus border `primary-500` + `--shadow-glow`, radius `--radius-sm`.
|
||||
|
||||
### Presence avatars / cursors
|
||||
- Avatar: `radius-full`, 2px ring in the user's presence color, initials in mono.
|
||||
- Stack overflow: "+N" chip in `ink-800` / `fg-muted`.
|
||||
- Live cursor: SVG arrow in presence color + name chip (presence bg, `#0b1020`
|
||||
text). Smooth‑interpolate motion; respect reduced‑motion (snap instead).
|
||||
- "Online" dot: `signal-400` filled circle, optional soft pulse.
|
||||
|
||||
### Badges / pills
|
||||
`radius-full`, `text-xs`, `font-weight 600`. Status mapping: live=`signal`,
|
||||
beta/new=`primary`, warning=`amber`, deprecated/error=`red`. Tinted style: text in
|
||||
hue‑400, bg in hue‑hue at ~12% alpha.
|
||||
|
||||
---
|
||||
|
||||
## 7. Imagery, motifs & iconography
|
||||
|
||||
- **Blueprint grid.** A faint dot/line grid (`ink-800` at low alpha over `bg`) as
|
||||
a section or hero background reads instantly as "schematic/PCB canvas". Keep it
|
||||
subtle — it's texture, not content.
|
||||
```css
|
||||
background-image: radial-gradient(var(--ink-800) 1px, transparent 1px);
|
||||
background-size: 24px 24px;
|
||||
```
|
||||
- **Traces.** Decorative right‑angle / 45° routed lines in `primary-500` (low
|
||||
alpha) evoke copper routing. Use sparingly as accents, never behind text.
|
||||
- **Real screenshots > illustrations.** Show the actual board editor with real
|
||||
copper, pads, and (especially) **multiple cursors** — that single image
|
||||
communicates "real KiCad + collaboration" better than any copy.
|
||||
- **Icons:** line/stroke style (Lucide‑like), `1.5–2px` stroke, `currentColor`,
|
||||
rounded joins. Consistent 24px grid.
|
||||
- **Code/file chips** in mono are a first‑class visual element (see §3).
|
||||
|
||||
---
|
||||
|
||||
## 8. Accessibility
|
||||
|
||||
- **Target WCAG AA.** Body text ≥ 4.5:1, large text/UI ≥ 3:1.
|
||||
- ✅ `fg` on `bg`, `fg-muted` on `bg`, `accent` on `bg`.
|
||||
- ⚠️ white on `primary-500` fails for body — use `primary-600`+ (see §2.1).
|
||||
- **Focus visible always.** Use `--shadow-glow` ring; never remove outlines
|
||||
without a replacement.
|
||||
- **Don't encode meaning in color alone.** Presence colors pair with names/initials;
|
||||
status badges pair with text; DRC/errors pair with an icon.
|
||||
- **Reduced motion.** Honor `prefers-reduced-motion` for cursor smoothing, pulses,
|
||||
and any hero animation.
|
||||
- **Hit targets** ≥ 44×44px for touch.
|
||||
|
||||
---
|
||||
|
||||
## 9. Light mode (optional, future)
|
||||
|
||||
The brand is dark‑first (matches both the marketing site and the EDA canvas).
|
||||
If a light theme is added later, flip neutrals and keep brand hues:
|
||||
|
||||
```css
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--bg: #ffffff; --bg-soft: #f5f7fb; --border: #cdd6e7;
|
||||
--fg: #11182e; --fg-muted: #4a5578;
|
||||
--accent: #2f57f5; /* use 600 for AA on white */
|
||||
}
|
||||
}
|
||||
```
|
||||
Defer until there's demand; don't split design effort prematurely.
|
||||
|
||||
---
|
||||
|
||||
## 10. Logo & attribution
|
||||
|
||||
- **Current mark:** rounded‑square (`radius 6px`) in `#1d4ed8` (`primary-700`)
|
||||
with a white "K" monogram — see `site/public/favicon.svg`. Treat as a
|
||||
placeholder app icon; safe to evolve, but keep: rounded square + blue + simple
|
||||
glyph.
|
||||
- **Clear space:** ≥ 25% of the mark's width on all sides.
|
||||
- **Minimum size:** 16px (favicon) / 24px (UI). Below that, drop detail.
|
||||
- **On color:** mark on `bg`/`bg-soft` only, or white mark on `primary-700`. Don't
|
||||
place the blue mark on busy/low‑contrast backgrounds.
|
||||
- **KiCad attribution (important):** This product builds on the open‑source KiCad
|
||||
project. Do **not** use the official KiCad logo as *our* logo or imply
|
||||
endorsement. State the relationship plainly ("Powered by KiCad" / "Built on the
|
||||
open‑source KiCad EDA suite") and respect KiCad's trademark/branding guidelines.
|
||||
When in doubt, attribute and link to kicad.org.
|
||||
|
||||
---
|
||||
|
||||
## 11. Quick reference (copy/paste)
|
||||
|
||||
```
|
||||
PALETTE
|
||||
Primary (Circuit Blue) brand 500 #4f7cff · button 600 #2f57f5 · favicon 700 #1d4ed8
|
||||
Signal (Green/live) text 400 #32d583 · fill 600 #039855
|
||||
Ink (neutrals) bg 950 #0b1020 · surface 900 #11182e · border 800 #233052
|
||||
text 100 #e7ecf5 · muted 400 #9aa6c0
|
||||
Status warning #fdb022 · danger #f97066
|
||||
Presence #818cf8 #38bdf8 #2dd4bf #4ade80 #fbbf24 #fb923c #fb7185 #c084fc
|
||||
|
||||
TYPE sans = system-ui stack · mono = ui-monospace stack (file names/coords/stats)
|
||||
RADIUS 6 / 10 / 16 / full MAX-W content 64rem · prose 44rem
|
||||
MOTION 120 / 200 / 360ms · ease cubic-bezier(0.2,0.8,0.2,1)
|
||||
|
||||
RULES
|
||||
• White button text → primary-600+, not 500 (AA).
|
||||
• Green = connected/success/live. Blue = brand/you/app. Presence hues = peers.
|
||||
• Dark-first. Zero web fonts by default (HTML+CSS only — keep the site light).
|
||||
• "Powered by KiCad" — attribute, don't appropriate.
|
||||
```
|
||||
235
features/lp/competitive-analysis-synthesis.md
Normal file
235
features/lp/competitive-analysis-synthesis.md
Normal file
|
|
@ -0,0 +1,235 @@
|
|||
# Competitive Analysis — Verified Synthesis (Browser-Based Collaborative KiCad/EDA)
|
||||
|
||||
Scope: synthesis of the **adversarially verified** subset of competitor positioning claims for a
|
||||
browser-based, real-time-collaborative KiCad/EDA/PCB-design product. Every finding below survived a
|
||||
3-vote verification pass against primary vendor sources (and, where noted, independent corroboration).
|
||||
This file is the high-confidence "spine" of the analysis; the broader, lower-bar landscape detail
|
||||
lives in the sibling files:
|
||||
|
||||
- `competitors-ai-automation-parts.md` — AI/automation/parts & adjacent players (Quilter, JITX, CELUS, SnapMagic, Allspice, etc.)
|
||||
- `incumbent-desktop-eda-cloud-marketing.md` — incumbent desktop suites & their cloud add-ons (Altium, Cadence, Zuken, Fusion/Eagle, etc.)
|
||||
- `brand-guide.md` — positioning/voice takeaways for our own landing page
|
||||
|
||||
Researched: June 2026. Currency caveats are listed at the end.
|
||||
|
||||
---
|
||||
|
||||
## Executive summary
|
||||
|
||||
The competitive field splits cleanly into three camps relative to our "KiCad in a browser, with
|
||||
real-time collaboration" thesis. (1) **Flux.ai is the only verified head-on competitor** — it is
|
||||
fully browser-based, requires no install, lists "Real-time collaboration" as a first-class platform
|
||||
feature, and prices the collaborative tiers per editor — but it has pivoted its *headline* to
|
||||
AI ("the world's first AI hardware engineer"), leaving the pure browser-native + multiplayer space
|
||||
strategically under-claimed. (2) The **incumbents (Altium 365, Cadence OrCAD X)** explicitly position
|
||||
as **desktop design + cloud collaboration**: their browser layer is view/review/markup only (2D
|
||||
viewers, comments, version control), with actual PCB authoring locked to the Windows desktop — Altium's
|
||||
own pricing tagline is literally "Design on your desktop. Collaborate in the cloud." (3) The
|
||||
**open-source desktop tools (LibrePCB, Horizon EDA, Fritzing)** position *against* cloud, marketing
|
||||
offline-first, no-account, no-real-time-collaboration workflows. A fourth adjacent camp (**Quilter**)
|
||||
is an AI placement/routing automation layer that *complements* rather than replaces ECAD tools.
|
||||
Net: a genuinely browser-native, real-time co-editing KiCad has exactly one direct rival (Flux), and
|
||||
that rival is currently spending its marketing oxygen on AI — leaving "real browser-native multiplayer
|
||||
EDA, on the toolchain people already trust" as an open positioning lane.
|
||||
|
||||
---
|
||||
|
||||
## Findings
|
||||
|
||||
### Finding A — Flux.ai is the single direct, head-on competitor: fully browser-based, no-install, real-time collaboration. **(Confidence: high)**
|
||||
|
||||
Flux is the only verified player that matches all three of our core attributes simultaneously
|
||||
(browser-native, no install, real-time multi-user collaboration).
|
||||
|
||||
- **Browser-based + no install + real-time collaboration are all explicitly listed platform features.**
|
||||
flux.ai/p lists "Browser-based", "Real-time collaboration", and "No install" as core features, and
|
||||
states: "Browser-native design means no downloads, instant sharing, and access from any device" and
|
||||
"large, multi-layer designs run smoothly in a modern browser, with real-time collaboration built in."
|
||||
Independently corroborated (Electronics-Lab review "An AI Powered, Browser-Based PCB Design Tool";
|
||||
AllAboutCircuits framing it as "a Google Doc-style Collaboration Tool for Hardware Design").
|
||||
*(merges claims [0], [2], [4])*
|
||||
- **Collaboration is real "multiplayer," concentrated in the paid tiers.** Pro and Teams are priced
|
||||
*per editor*; Pro explicitly allows "Up to 20 editors per project," and Teams adds "Shared team
|
||||
workspace" + "Centralized billing." Marketed as Google-Docs-style live multi-editing (live cursors,
|
||||
up to 20 simultaneous editors). *(merges claim [5])*
|
||||
- **Strategic read:** Flux owns the browser-native + multiplayer combination today, but see Finding B —
|
||||
its *headline* no longer leads with it.
|
||||
|
||||
Sources: https://www.flux.ai/p · https://www.flux.ai/p/nb/pcb-design-software · https://www.flux.ai/p/pricing
|
||||
(+ Electronics-Lab, AllAboutCircuits, GlobeNewswire corroboration).
|
||||
|
||||
### Finding B — Flux has pivoted its headline positioning to AI ("the world's first AI hardware engineer"), de-emphasizing the pure browser/collaboration story. **(Confidence: high)**
|
||||
|
||||
- Hero is "Design PCBs with AI" / "The world's first AI hardware engineer" / "If you can type, you can
|
||||
build." "Give Flux a job and it plans, explains, and executes workflows inside a full browser-based
|
||||
eCAD you can edit anytime." Self-described as "full ECAD rebuilt for the AI era: browser-based,
|
||||
collaborative... and guided by explainable AI."
|
||||
- Corroborated by press: GlobeNewswire "'AI hardware engineer' Flux turns text prompts into circuit
|
||||
board designs" (Oct 2025) and "Flux, the AI hardware engineer, announces $37M in new investment"
|
||||
(Feb 2026). Founder interviews describe "the AI-Native Hardware Design Platform."
|
||||
- **Strategic read:** browser + collaboration are now *supporting pillars* under an AI headline. This
|
||||
is the wedge — the "real browser-native multiplayer EDA" message is currently under-marketed by the
|
||||
only company that can actually claim it. *(merges claims [1], [2])*
|
||||
|
||||
Sources: https://www.flux.ai/p (+ GlobeNewswire, Yahoo Finance, pulse2.com interview).
|
||||
|
||||
### Finding C — Flux pricing: four tiers, per-editor on the collaborative tiers, 14-day trial. **(Confidence: high)**
|
||||
|
||||
Verified verbatim against the live pricing page (June 2026):
|
||||
|
||||
| Tier | Monthly | Annual | Notes |
|
||||
|---|---|---|---|
|
||||
| Starter | $20/mo | $16/mo | single-seat (NOT per-editor); 14-day trial |
|
||||
| Pro | $142/mo/editor | $112/mo/editor | "BEST VALUE"; up to 20 editors/project; 14-day trial |
|
||||
| Teams | $158/mo/editor | $120/mo/editor | all Pro features + shared workspace + centralized billing |
|
||||
| Enterprise | custom | custom | contact sales |
|
||||
|
||||
CTA on the pricing page: "Launch Flux in the browser right now." The per-editor model is the key
|
||||
pricing signal — collaboration is monetized per simultaneous editor, not per named seat.
|
||||
*(merges claims [3], [4], [5])*
|
||||
|
||||
Source: https://www.flux.ai/p/pricing.
|
||||
|
||||
### Finding D — Incumbents (Altium 365, Cadence OrCAD X) position as "desktop design + cloud collaboration"; the browser layer is view/review/markup only, NOT authoring. **(Confidence: high)**
|
||||
|
||||
This is the most important structural finding for our wedge: every incumbent keeps PCB *authoring* on
|
||||
the desktop and exposes only *review* in the browser.
|
||||
|
||||
**Altium 365 / Altium Designer (rebranding toward "Altium Develop"):**
|
||||
- Positioning: "The Electronic Product Development & Collaboration Platform"; vision "The Future of
|
||||
Electronics Development is Co-creation"; tagline "the secure cloud platform connecting electronics
|
||||
design, supply chain, and manufacturing teammates to simplify collaboration and speed delivery."
|
||||
Collaboration/co-creation is the *central* differentiator. *(merges claims [6], [8], [9])*
|
||||
- **But design is desktop-only.** The pricing-page hero is literally "**Design on your desktop.
|
||||
Collaborate in the cloud.**" The cloud layer is a shared workspace for review/commenting/version
|
||||
control; the browser Web Viewer is view/search/select/cross-probe/inspect — *not* edit. Altium
|
||||
Designer is a Windows desktop app (Win 10/11, ~2–2.5 GB install, DirectX 11 GPU). *(merges claims [7], [12], [13])*
|
||||
- Social proof model: "Over 10,000 organizations" + security certs (count + trust, not logos).
|
||||
|
||||
**Cadence OrCAD X:**
|
||||
- A hybrid desktop + cloud platform: "OrCAD X introduces powerful web viewers for PCB and schematic
|
||||
designs, allowing you to open projects from a shared workspace." Browser viewers are **2D, view-only**
|
||||
(3D on roadmap), no install and **no license required** to view. *(merges claim [10])*
|
||||
- Markets real-time collaboration between desktop users and web participants: "Desktop users and web
|
||||
participants can collaborate effortlessly"; "annotate designs and provide feedback in real time."
|
||||
Page title: "Real-Time Design Review & Collaboration." *(merges claim [11])*
|
||||
- **Caveat:** this is review/markup collaboration, not concurrent in-browser co-authoring.
|
||||
|
||||
**Wedge:** both incumbents validate the *demand* for cloud collaboration and "review in any browser,"
|
||||
but neither offers in-browser design authoring — leaving real browser-native co-*editing* open.
|
||||
|
||||
Sources: https://www.altium.com/altium-365 · https://www.altium365.com/pricing ·
|
||||
https://www.cadence.com/en_US/home/tools/pcb-design-and-analysis/orcad.html
|
||||
(+ Altium Web Viewer docs; Cadence resources.pcb.cadence.com FAQ & 25.1 release pages; Hackster.io, Electronics-Lab).
|
||||
|
||||
### Finding E — Open-source desktop EDA tools (LibrePCB, Horizon EDA, Fritzing) position explicitly AGAINST cloud/browser/real-time collaboration. **(Confidence: high)**
|
||||
|
||||
These are the anti-cloud camp; their marketing is a mirror image of ours.
|
||||
|
||||
**LibrePCB:**
|
||||
- "Free, cross-platform, easy-to-use EDA suite"; tagline "No costs. No restrictions. **No online
|
||||
account.** No unnecessary complexity." GPLv3, Windows/Linux/macOS, "can also be used fully offline."
|
||||
- Cloud is framed as optional: section header "**Connected – if you like.**" (integrated library
|
||||
manager + PCB fab service) "But of course LibrePCB can also be used fully offline." Offline is the
|
||||
default; cloud is convenience. *(merges claims [14], [15])*
|
||||
|
||||
**Horizon EDA:**
|
||||
- Cross-platform desktop (Linux + Windows only; no macOS, no browser/cloud build). Native C++/Gtkmm3
|
||||
app. *(merges claim [19])*
|
||||
- Value prop = shared/maintainable **parts pool** + streamlined schematic capture + PCB layout with
|
||||
3D preview + manufacturing export. NO real-time collaboration anywhere on the site or docs.
|
||||
*(merges claim [20])*
|
||||
- Its only "collaboration" is **git/file-based part-pool sharing** (JSON files, clone + merge request)
|
||||
plus community channels (GitHub Discussions, Matrix) — not in-app multi-user editing. *(merges claim [21])*
|
||||
|
||||
**Fritzing:**
|
||||
- "Open-source hardware initiative that makes electronics accessible as a creative material for anyone...
|
||||
in the spirit of Processing and Arduino." Target: makers, education, hobbyists — explicitly *not* a
|
||||
professional cloud EDA tool. *(merges claim [16])*
|
||||
- Downloadable desktop app (Windows/macOS/Linux), versioned releases (latest 1.0.7, April 15, 2026).
|
||||
Not browser-based; a WebAssembly port is only an open *request* (issue #3936), not shipped.
|
||||
*(merges claim [17])*
|
||||
- Collaboration model is **asynchronous community/gallery sharing** ("document... share them with
|
||||
others, teach electronics in a classroom"); no real-time, cloud-editing, or co-editing angle.
|
||||
*(merges claim [18])*
|
||||
|
||||
**Wedge:** these tools concede the entire cloud/real-time/browser space. They compete on
|
||||
free/offline/privacy/ownership — which is also a *counter-narrative we must answer* (privacy,
|
||||
no-account, offline) for users who distrust cloud.
|
||||
|
||||
Sources: https://librepcb.org/ · https://horizon-eda.org/ (+ docs.horizon-eda.org, GitHub) ·
|
||||
https://fritzing.org/ (+ blog.fritzing.org, GitHub, Wikipedia).
|
||||
|
||||
### Finding F — Quilter is an adjacent AI placement/routing automation layer that complements (does not replace) ECAD — including KiCad — rather than competing on the browser/collaboration axis. **(Confidence: high)**
|
||||
|
||||
- Positioning: "Quilter is physics-driven AI that automates PCB placement and routing" / "PCB Layout
|
||||
in Hours, Not Months." It is **not** a full EDA environment and not an AI schematic generator.
|
||||
*(merges claim [22])*
|
||||
- Operates as a complement: "Upload Altium, Cadence, Siemens, or KiCAD projects directly," and
|
||||
"returns files in the same format as you submitted" — explicitly "a layout acceleration layer, not a
|
||||
replacement for your ECAD environment." Users keep their CAD tools for schematic capture, final DRC,
|
||||
docs, and fab outputs. *(merges claim [23])*
|
||||
- **Strategic read:** Quilter is a *potential partner/integration*, not a competitor. It also models
|
||||
the modern outcome-based pricing narrative (pay per approved design, scale by pin count not seats)
|
||||
that the field is adopting. Notably KiCad is already a first-class supported format — a hook for us.
|
||||
|
||||
Source: https://www.quilter.ai/ (+ docs.quilter.ai, workflow page).
|
||||
|
||||
---
|
||||
|
||||
## Cross-cutting positioning takeaways (for our own landing page)
|
||||
|
||||
1. **"Real browser-native co-editing" is the open lane.** Flux can claim it but leads with AI;
|
||||
incumbents only do browser *review*; OSS tools opt out entirely. The crisp message
|
||||
"edit (not just view) PCBs together, live, in the browser" is currently unclaimed at the headline level.
|
||||
2. **"On KiCad" is a differentiator no rival has.** Flux/Altium/Cadence are proprietary formats;
|
||||
our angle is the open KiCad toolchain people already trust + collaboration on top — no lock-in, no
|
||||
re-learning, no data hostage.
|
||||
3. **Per-editor / per-seat pricing is the collaboration-monetization norm** (Flux Pro/Teams per editor).
|
||||
The market is also experimenting with outcome-based pricing (Quilter pay-per-result). Pick a lane
|
||||
deliberately and contrast it.
|
||||
4. **Answer the OSS counter-narrative.** LibrePCB/Horizon/Fritzing market no-account + offline + privacy.
|
||||
A cloud product must proactively address data ownership/export/privacy to win their skeptical users.
|
||||
5. **Vocabulary to adopt or counter:** "browser-native, no install," "Google-Docs-style multiplayer,"
|
||||
"review in any browser," "co-creation," "design on your desktop / collaborate in the cloud"
|
||||
(a tagline we can directly invert: "design *and* collaborate in the browser").
|
||||
|
||||
---
|
||||
|
||||
## Caveats & time-sensitivity
|
||||
|
||||
- **Researched June 2026; vendor marketing changes fast.** Flux in particular has repositioned at least
|
||||
twice (browser-native Figma-for-hardware → AI-native) and raised $37M in Feb 2026; its headline could
|
||||
shift again. Altium is mid-rebrand (Altium 365 → "Altium Develop"/"Altium Agile"/"Octopart
|
||||
Discover"/"Altium Designer"); tier names and page copy are in flux.
|
||||
- **OrCAD X browser viewers are recent (Q2 2025 launch).** 3D browser view was on the roadmap, not
|
||||
shipped, at time of research — re-check if positioning OrCAD as desktop-only.
|
||||
- **Pricing figures are point-in-time** (Flux verified verbatim June 2026). Treat all dollar amounts as
|
||||
current-as-of-research, not durable.
|
||||
- **Some primary landing pages returned HTTP 403 to automated fetch** (cadence.com/.../orcad.html,
|
||||
fritzing.org/) — those findings were confirmed via the relevant vendor sub-pages, search index of the
|
||||
exact page, and independent corroboration rather than a direct fetch of the canonical URL.
|
||||
- **A refuted claim is excluded:** the assertion that "OrCAD X OnCloud's *core* positioning is
|
||||
cloud-workspaces-from-anywhere as the *primary* differentiator" failed verification (0-3). OrCAD X's
|
||||
primary identity remains a desktop tool with a cloud/web *review* layer, not a cloud-first product.
|
||||
- **Coverage gap:** this verified synthesis confirms Flux, Altium 365, OrCAD X, LibrePCB, Horizon EDA,
|
||||
Fritzing, and Quilter. The other named competitors (CircuitMaker, EasyEDA, Fusion/Eagle, Upverter,
|
||||
Allspice, Zuken, DipTrace, Tinkercad Circuits, SnapMagic/SnapEDA, CELUS, Valispace, Aisler, JITX) are
|
||||
covered in the sibling files at lower verification bar but did not have claims that cleared the 3-vote
|
||||
adversarial pass in this batch.
|
||||
|
||||
---
|
||||
|
||||
## Open questions
|
||||
|
||||
1. **Does Flux support real-time co-editing on the free/Starter tier, or only on per-editor Pro/Teams?**
|
||||
Verified data shows multiplayer concentrated in paid tiers, but the exact free-tier collaboration
|
||||
limit (e.g., single-editor projects vs. read-only sharing) is unconfirmed.
|
||||
2. **Will OrCAD X (or Altium) ship in-browser *authoring* (not just review)?** Both have browser viewers
|
||||
and roadmap items (e.g., OrCAD 3D view); if either moves to in-browser editing, our wedge narrows.
|
||||
3. **What is the verified positioning of the second-tier browser/cloud players (EasyEDA, CircuitMaker,
|
||||
Upverter, Allspice)?** None cleared the 3-vote bar here; EasyEDA in particular (browser-based, free,
|
||||
JLCPCB-backed) could be a closer direct competitor than the incumbents and warrants a dedicated pass.
|
||||
4. **How are rivals pricing collaboration specifically (per-editor vs. per-seat vs. outcome-based)?**
|
||||
Flux (per-editor) and Quilter (per-result/pin-count) are verified; the broader market's
|
||||
collaboration-pricing norm is not yet established from verified sources.
|
||||
3528
features/lp/competitor-landing-pages.md
Normal file
3528
features/lp/competitor-landing-pages.md
Normal file
File diff suppressed because it is too large
Load diff
116
features/lp/competitors-ai-automation-parts.md
Normal file
116
features/lp/competitors-ai-automation-parts.md
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
# Competitive Analysis — AI / Automation / Parts & Adjacent EDA Tooling
|
||||
|
||||
Angle: AI-driven automation, version-control / Git-for-hardware, component-data, and manufacturing-adjacent players. These are the distinct-differentiator competitors (AI auto-layout, design-as-code, parts libraries, requirements) rather than the direct "EDA canvas in a browser" incumbents.
|
||||
|
||||
Relevance to our project ("KiCad in a web browser, with real-time collaboration"): these vendors define the marketing vocabulary for the modern, cloud/AI/collaboration framing — "weeks to hours," "Git for hardware," "pay per result, not per seat," "free parts library," "browser, no install." We can adopt or counter each of these framings.
|
||||
|
||||
---
|
||||
|
||||
## Quilter (quilter.ai) — Physics-driven AI auto-layout
|
||||
|
||||
- Hero headline: "PCB Layout in Hours, Not Months"
|
||||
- Subheadline: "Quilter is physics-driven AI that automates PCB placement and routing."
|
||||
- Value prop / positioning: Reinforcement-learning AI that explores thousands of candidate layouts and validates each against physics (signal integrity, impedance, differential pairs) before delivery. Frames itself as turning weeks of manual layout into hours. Tony Fadell quote: "turn weeks into days... a complete paradigm shift."
|
||||
- Target audience: PCB designers, EEs, R&D managers in aerospace & defense, semiconductors, consumer electronics, robotics; mission-critical boards with tight timelines.
|
||||
- Page sections: Product/Technology (Overview, Technology, Workflow); Solutions (by Design Type, Industry, Role); Resources (Blog, Workbench, Docs, Changelog); Pricing; Company; hero value prop; workflow integration; industry showcase; honest capabilities/limitations table; newsletter; footer.
|
||||
- Feature claims: multiple candidates in hours; physics-aware validation per trace; "Upload Altium, Cadence, Siemens, or KiCAD projects directly"; parallel iteration across stack-ups/manufacturers/form-factors; handoff in original CAD format; "4-6 weeks off board bring-up."
|
||||
- Social proof: AWS, NVIDIA, Siemens logos; Tony Fadell (iPod/iPhone/Nest) testimonial; $25M Series B (Oct 2025).
|
||||
- Pricing: Free tier ("pay only for approved designs"); Enterprise scales by PIN COUNT, not seats — explicit anti-seat-licensing stance. Candidates within the first hour, bring-up-ready in a single workday.
|
||||
- CTAs: "Talk to an Engineer" (primary), "Get Started," "Log in," "Check Product Updates."
|
||||
- Differentiators: physics-first validation; RL candidate search; non-destructive (returns original format); transparent capabilities-vs-limitations table (honestly lists blind/buried vias, length matching, RF as in-development).
|
||||
- Tone: confident-but-transparent, engineering-fluent, outcomes-oriented, "augment not replace" human-centered.
|
||||
- Collaboration/browser/cloud angle: cloud-generated, tool-agnostic (imports/exports the major ECAD formats incl. KiCad). NOT a collaboration tool — it is an automation engine that plugs into existing seats. Our collab angle is orthogonal/complementary.
|
||||
|
||||
## JITX (jitx.com) — Design-as-code / software-defined electronics
|
||||
|
||||
- Positioning: "Software-defined electronics" — write code to GENERATE hardware (schematic + layout) instead of manually drafting. Parametric/programmatic design-as-code.
|
||||
- Value prop: design boards faster with fewer errors by treating circuits as code; automated schematic generation, real-time DRC, 3D visualization, reuse via code.
|
||||
- Target audience: software-leaning hardware engineers, teams wanting reproducible/parameterized designs and reuse.
|
||||
- Feature claims: automated schematic generation, real-time design-rule checking, 3D circuit visualization, team collaboration, integrations with popular CAD.
|
||||
- Pricing: ~$49/month subscription tier referenced.
|
||||
- Differentiator vs us: code-first (text/Git-native by nature) rather than visual canvas. Strong fit for version control because designs are source code.
|
||||
- Tone: developer/engineer-centric, automation-and-reuse framing.
|
||||
|
||||
## CELUS (celus.io) — AI design automation, drag-and-drop building blocks
|
||||
|
||||
- Positioning (German company): reduce electronics-design complexity via an easy drag-and-drop tool — pick required "building blocks," software auto-builds the rest of the design (the "CELUS Design Platform" / superhero-themed branding).
|
||||
- Value prop: from idea/requirements to a buildable design automatically; component-aware automation.
|
||||
- Target audience: hardware teams and component vendors wanting faster concept-to-design.
|
||||
- Pricing: not publicly listed (enterprise/contact-sales).
|
||||
- Angle vs us: AI concept-to-schematic automation, component-data driven; not a browser collaboration canvas.
|
||||
|
||||
## AllSpice.io (allspice.io) — "Git for Hardware" / version control + AI reviews
|
||||
|
||||
- Hero / positioning: "AI-powered design reviews for schematics"; the "Git for Hardware" platform — Git-based revision control, central collaboration hub, workflow automation, design analytics, compliance-ready audit trails.
|
||||
- Value prop: connect native ECAD tools (Altium, etc.), get automated PCB/schematic/BOM redlines (visual diffs between revisions), design reviews, and releases in a web interface. "Software principles, optimized for hardware."
|
||||
- Target audience: hardware/electrical/PCB engineers and enterprises needing revision control, reviews, compliance, audit trails.
|
||||
- Page sections: home, Product, Features, Pricing, ebooks/resources ("Git for Hardware Guide"), blog (heavy SEO around "git for hardware / git for Altium").
|
||||
- Feature claims: native ECAD support; automated PCB/schematic/BOM redlines; role-based permissions; audit trails; AI design insights; real-time collaboration. Uses Claude Sonnet 4.0 via AWS Bedrock for Cloud/Enterprise.
|
||||
- Social proof: $24.8M raised (incl. $10M round), founded 2019, Boston; G2/SourceForge reviews; Greentown Labs member.
|
||||
- Pricing model: per-seat by role — "Committer" (push/pull, edits) is paid; "Collaborator" (review/comment/view) is FREE and unlimited. Tiers scale Cloud → Enterprise.
|
||||
- CTAs: book demo / get started.
|
||||
- Differentiators: diff/redline engine for ECAD; sits ON TOP of existing tools (Altium etc.) rather than replacing the editor; compliance/audit focus.
|
||||
- Tone: professional, enterprise, software-engineering-discipline-for-hardware.
|
||||
- Angle vs us: closest "collaboration" competitor but it is a layer over existing desktop tools (revision control + review), NOT an in-browser editor. Our differentiator = the actual editing happens collaboratively in the browser, not just diffs of files committed from desktop seats. Note the free-reviewer / paid-editor pricing split is a model worth considering.
|
||||
|
||||
## SnapMagic Search (snapeda.com / snapmagic.com) — Free parts library (formerly SnapEDA)
|
||||
|
||||
- Hero / positioning: "Free PCB Footprints and Schematic Symbols" — online CAD library of symbols, footprints, 3D models, pinouts, datasheets for millions of components, with broad EDA interoperability and quality transparency.
|
||||
- Value prop: "download millions of free symbols & footprints instantly to design better products faster"; "a million engineers each year build their products with SnapMagic."
|
||||
- Target audience: every EE/PCB designer needing part models; also component manufacturers (syndication/SnapInsights as a B2B funnel).
|
||||
- Feature claims: exports to Cadence OrCAD/Allegro, Altium, Mentor PADS, Eagle, KiCad, PCB123, Pulsonix; plugins for Eagle/Altium; DFM checker (silkscreen clearance, mask/paste, orientation, naming); mix of automated + manual creation.
|
||||
- Social proof: "a million engineers" usage claim; broad manufacturer syndication.
|
||||
- Pricing: basic individually-downloadable symbols/footprints "will always be free"; InstaPart on-demand part within 1 business day for $29 (<100 pins), +$20 for a 3D model; premium/enterprise + manufacturer-side products.
|
||||
- CTAs: search/download; request a part (InstaPart).
|
||||
- Differentiators: breadth of free parts + tool-agnostic export incl. KiCad; manufacturer-funded model (free to engineers).
|
||||
- Angle vs us: adjacent/complementary, not a competitor — a parts source we could integrate (KiCad export already exists). Defines the "free parts library" expectation.
|
||||
|
||||
## Aisler (aisler.net) — EU PCB/PCBA manufacturing with CAD-integrated workflow
|
||||
|
||||
- Positioning: "Quick and affordable manufacturing for your Electronic Project" — agile, digital workflow from first prototype to large-scale PCBA; native CAD project management centralized; instant feedback/quotes.
|
||||
- Value prop: simple, transparent pricing — "no hidden fees, just one fixed Job Fee and one variable fee"; EU manufacturing/delivery.
|
||||
- Target audience: makers, startups, agile hardware teams (EU-centric).
|
||||
- Feature claims: 1-business-day PCB fab (from ~$14.21 / €12 budget tier); assembled PCBA in ~6 business days; instant price calculator; native CAD project handling. Explicit partner integration with LibrePCB ("Your LibrePCB project manufactured").
|
||||
- Pricing: Job Fee + variable fee; instant quote calculator.
|
||||
- Angle vs us: manufacturing-adjacent. Notable that it advertises a LibrePCB (open-source EDA) integration — a template for an open-tool → fab pipeline our browser product could plug into.
|
||||
|
||||
## Valispace (valispace.com) — Requirements / systems engineering (now Altium)
|
||||
|
||||
- Positioning: "Where the world builds hardware" — capture requirements and link them to designs, systems, verifications and test cases for full traceability and agile iteration; "Requirements-as-data" / engineering budgets.
|
||||
- Value prop: live, connected requirements + engineering budgets vs. static documents; faster, traceable iteration for complex hardware.
|
||||
- Target audience: systems/requirements engineers, aerospace/space/complex-hardware teams (used in satellite projects).
|
||||
- Feature claims: requirements engineering, traceability, engineering budgets, verification/test linkage, collaboration.
|
||||
- Pricing: historically ~$995/yr flat; $1,000/yr education (unlimited students/professors). Acquired by Altium — relaunched as "Requirements Portal," now bundled in "Altium Develop" with unlimited collaborators.
|
||||
- Angle vs us: adjacent (requirements layer, not schematic/PCB editing). Signals Altium's consolidation of the cloud-hardware stack (Altium 365 + Valispace/Requirements Portal + Upverter).
|
||||
|
||||
## Upverter (upverter.com, Altium) — Browser-native EDA (most direct cloud-collab analog)
|
||||
|
||||
- Positioning: full PCB workflow entirely in the browser — schematic capture, PCB layout, DRC, manufacturing output; no install; runs on any OS incl. Linux/macOS/Windows/ChromeOS.
|
||||
- Value prop / "superpower": real-time multi-user collaboration "in a very Google Docs kind of way" — multiple users on the same schematic/layout simultaneously; fine-grained multilevel permissions; secure share without download/install.
|
||||
- History: founded 2010, acquired by Altium 2017; now an Altium browser-based offering.
|
||||
- Target audience: hobbyists, students, startups, distributed teams (power users still pushed to Altium Designer/KiCad for high complexity).
|
||||
- Pricing: Starter $49/mo, Professional $199/mo, Enterprise; higher tiers add unlimited layers, enhanced collaboration, priority support.
|
||||
- Angle vs us: the closest existing "browser EDA + real-time collaboration" competitor and the clearest direct comparison. Quilter even publishes a head-to-head "Quilter vs Altium 365 vs Upverter" cloud-tool guide. Our edge: KiCad-native (open-source familiarity, no proprietary lock-in, free) vs Upverter's proprietary/limited-complexity positioning.
|
||||
|
||||
---
|
||||
|
||||
## Cross-cutting takeaways for our positioning
|
||||
|
||||
1. The dominant AI framing is time-compression: "weeks/months to hours" (Quilter, JITX, CELUS). If we add AI assist, mirror this.
|
||||
2. Two pricing innovations to consider: Quilter's "pay per approved result, not per seat" and AllSpice's "free unlimited reviewers, paid editors." Both undercut traditional seat licensing — relevant since our collab story implies many viewers/reviewers.
|
||||
3. "Git for Hardware" (AllSpice) and "design-as-code" (JITX) own the version-control narrative. A browser KiCad with real-time collab can claim live co-editing as a step beyond async Git diffs — Upverter's "Google Docs for schematics" is the framing to beat.
|
||||
4. Adjacents (SnapMagic parts, Aisler/LibrePCB fab) are integration opportunities, not threats — an open-source-friendly ecosystem story.
|
||||
5. Upverter is the single most direct competitor; differentiate on KiCad-native + open-source + free + no-install + real-time collaboration.
|
||||
|
||||
## Sources
|
||||
- https://www.quilter.ai/
|
||||
- https://www.jitx.com/
|
||||
- https://www.businesswire.com/news/home/20251007165399/en/Quilter-Secures-$25M-Series-B-to-Eliminate-Manual-PCB-Design-with-Physics-Driven-AI
|
||||
- https://www.allspice.io/
|
||||
- https://allspice.io/pricing
|
||||
- https://www.snapeda.com/
|
||||
- https://aisler.net/en-US
|
||||
- https://www.valispace.com/
|
||||
- https://www.valispace.com/pricing/
|
||||
- https://en.wikipedia.org/wiki/Upverter
|
||||
- https://www.quilter.ai/blog/the-2026-guide-to-cloud-based-pcb-layout-tools-quilter-vs-altium-365-vs-upverter
|
||||
197
features/lp/incumbent-desktop-eda-cloud-marketing.md
Normal file
197
features/lp/incumbent-desktop-eda-cloud-marketing.md
Normal file
|
|
@ -0,0 +1,197 @@
|
|||
# Competitive Analysis: Incumbent Desktop EDA Suites & Their Cloud/Marketing Angle
|
||||
|
||||
Angle: established professional desktop EDA suites and their cloud add-ons. How legacy vendors
|
||||
position collaboration, browser access, and the cloud; their pricing, tiers, and target audiences.
|
||||
Relevant for a "KiCad in a web browser with real-time collaboration" product because these are the
|
||||
incumbents whose collaboration/cloud narrative we are competing against (and, importantly, most of
|
||||
them are still desktop-first with cloud bolted on — a wedge for a truly browser-native product).
|
||||
|
||||
Researched: June 2026.
|
||||
|
||||
---
|
||||
|
||||
## 1. Altium 365 / Altium Designer (the primary incumbent to beat)
|
||||
|
||||
The most directly comparable competitor on the collaboration/cloud axis. Altium Designer is the
|
||||
desktop authoring tool; Altium 365 is the cloud collaboration layer on top. Note Altium is
|
||||
re-branding the cloud entry tier as **"Altium Develop"** and reshuffling the lineup
|
||||
(Altium Develop / Altium Agile / Octopart Discover / Altium Designer).
|
||||
|
||||
- **Hero / headline:** "The Electronic Product Development & Collaboration Platform" with the
|
||||
sub-tagline **"The Future of Electronics Development is Co-creation."**
|
||||
- **Value proposition:** "The secure cloud platform connecting electronics design, supply chain,
|
||||
and manufacturing teammates to simplify collaboration and speed delivery."
|
||||
- **Target audience:** Professional hardware teams — design engineers, engineering managers, supply
|
||||
chain/procurement, manufacturing, and distributed/remote orgs. Mid-market to enterprise.
|
||||
- **Page sections:** (1) How Electronic Product Development Teams Fall Behind, (2) The Future of
|
||||
Electronics Development is Co-creation, (3) Altium 365 is the Cloud Platform for Electronics
|
||||
Co-Creation, (4) Engineering Management, (5) Requirements & Systems, (6) Design, (7) Supply Chain,
|
||||
(8) Manufacturing, (9) Data Management, (10) Secure and Control Your Hardware Development Workflow.
|
||||
- **Problem framing (pain-before-solution):** Security Risk ("Emails, spreadsheets, and ZIP files
|
||||
do not provide needed security"), Lost Productivity ("Designs and documentation scattered across
|
||||
systems"), Development Delays ("Siloed design data and isolated workflows prevent effective
|
||||
collaboration").
|
||||
- **Feature claims:** Git-based version control "built specifically for electronics", real-time
|
||||
3D modeling/routing/rigid-flex, requirements traceability linked to schematics/PCB, continuously
|
||||
updated part data (pricing/availability/lifecycle via Octopart), version-controlled release
|
||||
packages, built-in simulation/harness/PCB collaboration.
|
||||
- **Social proof:** "Over 10,000 organizations trust us with their most sensitive intellectual
|
||||
property." (No customer logos or named testimonials on the main hub page — social proof is by
|
||||
count + security certs, not logos.)
|
||||
- **Pricing/tiers:** Altium does NOT publish clean price lists; pricing depends on tier, add-ons,
|
||||
seat count. Reported figures: Standard ~$355/mo or ~$4,235/yr; Pro ~$460/mo or ~$5,495/yr.
|
||||
Standalone Altium 365 ~$2,500–$5,000/user/yr; +$1,000–$2,500/seat when bundled with Designer.
|
||||
Altium Designer desktop perpetual ~$6,000–$9,000/seat + 15–22% annual maintenance; subscription
|
||||
~$3,500–$7,500/seat/yr. **Altium Develop** is the new entry point: workspace subscription +
|
||||
concurrent author seats + **unlimited free collaborators**.
|
||||
- **CTAs:** "Experience It" (repeated), "Download Security Whitepaper", "Sign In".
|
||||
- **Differentiators:** Heavy security/compliance posture — SOC 2 Type 2, CMMC Level 1, GDPR,
|
||||
FedRAMP (coming), zero-trust architecture, AES-256 at rest / TLS 1.2 in transit, IP whitelisting,
|
||||
audit logs, role permissioning, SSO/MFA. Claims of saving "159 hours of designer time/year" and
|
||||
"$373,800 over three years."
|
||||
- **Browser/cloud angle:** Explicitly a "secure cloud platform"; "Review files in any browser";
|
||||
free web tools (Online PCB Viewer, Gerber Compare). BUT — authoring is still **desktop Altium
|
||||
Designer**; the cloud is collaboration/review/data-management, not in-browser design. This is the
|
||||
key gap a browser-native tool exploits.
|
||||
- **Tone/voice:** Professional, problem-then-solution, enterprise-trust language ("co-creation",
|
||||
"shared context", "When everyone can see the design, the team works as one"). Not technical-spec
|
||||
heavy on the hub; sells workflow modernization + security.
|
||||
|
||||
## 2. CircuitMaker (Altium's free community tool)
|
||||
|
||||
Altium's free PCB tool, positioned as the on-ramp below Altium Designer. "Probably still better for
|
||||
new designers and small, simple boards." Community-oriented, with public projects and a sandbox
|
||||
collaboration model — Altium's existing "free + community + cloud projects" answer to KiCad and
|
||||
EasyEDA. Important to note: CircuitMaker is **already** a community/cloud-projects tool, so Altium
|
||||
has a free collaborative SKU, though it is desktop-installed (Windows) rather than browser-native.
|
||||
|
||||
## 3. Cadence OrCAD X / Allegro X (cloud-enabled, hybrid desktop+browser)
|
||||
|
||||
The most aggressive incumbent on the "cloud + real-time collaboration + AI" narrative, and the one
|
||||
whose messaging overlaps most with a browser-collaborative pitch.
|
||||
|
||||
- **Positioning:** "Comprehensive and AI-enabled PCB design software built for the fast-paced,
|
||||
quick-turn needs of small to medium-sized businesses." Hybrid: works "fluidly across OrCAD X
|
||||
desktop and cloud environments." Tagline used in datasheets: "Unified PCB Design Without
|
||||
Compromise."
|
||||
- **Target audience:** SMBs and quick-turn teams (a deliberate down-market push from Cadence's
|
||||
traditional enterprise Allegro base). Allegro X remains the enterprise/system-level tier.
|
||||
- **Browser/cloud angle (strong):** "A unified web-based schematic and PCB design viewer instantly
|
||||
through your browser — no installations, IT overhead, or hardware dependencies required." Web
|
||||
viewers let you open shared-workspace projects, review properties, toggle layer visibility, and
|
||||
measure spacing in-browser. **OrCAD X OnCloud** = centralized secure workspace for collaboration
|
||||
+ data management (eliminates version-control headaches).
|
||||
- **Real-time collaboration (this is the headline threat):** **Symphony** enables "real-time,
|
||||
concurrent PCB layout design where multiple users connect to and work on the exact same board
|
||||
design database simultaneously" — eliminating partitioning/manual merge. This is the closest
|
||||
incumbent equivalent to true real-time multiplayer editing (vs. Altium's version-control model).
|
||||
- **Differentiators / claims:** "Up to 5X reduction in design turnaround time", AI-driven,
|
||||
Cadence OnCloud, real-time design review & collaboration. Cadence + Dassault partnership for
|
||||
cloud-enabled electromechanical collaboration.
|
||||
- **Note for our positioning:** OrCAD X's *viewer* is browser-based, but the concurrent-edit
|
||||
(Symphony) experience is still tied to the OrCAD X application/database, not a pure browser app.
|
||||
Their browser story is "view in browser, edit in app."
|
||||
|
||||
## 4. Zuken (CR-8000 / E3.series / eCADSTAR — enterprise, desktop-first, minimal cloud)
|
||||
|
||||
- **Hero:** "Digital Engineering for PCB and Electrical Systems."
|
||||
- **Value prop:** "Partner for success" — "only model-based design process spanning model creation
|
||||
to detailed design"; "industry's first MBSE to detailed design connector for a wire harness";
|
||||
single-database synchronized team collaboration.
|
||||
- **Target audience:** Global enterprise + mid-size — automotive, aerospace, machinery, consumer,
|
||||
mining. Cross-functional mechanical/electrical/electronic teams. CR-8000 = advanced power user
|
||||
(multi-board, IC packaging); eCADSTAR = feature-rich + ease of use; E3.series = cable/cabinet.
|
||||
- **Sections:** What Zuken Offers; Digital Engineering for E/E Design; Wire Harness and Cabinet
|
||||
Design; Advanced PCB Design; Real Results, Real Stories; Partner Ecosystem; Zuken's Community;
|
||||
Services; Customer Support.
|
||||
- **Social proof:** Named success stories — ATK, Stone Aerospace, Renishaw, Toshiba, Hydro-Québec,
|
||||
with quantified results ("reduce cabling design time by 12 weeks"). Strong logo/story proof
|
||||
(contrast with Altium's count-only approach).
|
||||
- **Pricing:** Custom/quote-only (enterprise sales motion). No public pricing.
|
||||
- **CTAs:** "Take a Test Drive", "Request a Free Demo", "Learn More", "Contact us today",
|
||||
"Join Our Community".
|
||||
- **Tone:** Professional, consultative, partnership-focused, measured results over hyperbole.
|
||||
- **Cloud/collaboration angle (WEAK):** Minimal explicit cloud/SaaS messaging. "Collaboration" =
|
||||
shared single database + MCAD integration, not browser/SaaS delivery. Added MBSE via Vitech
|
||||
acquisition. **This is a clear vulnerability vs. a browser-native collaborative product.**
|
||||
|
||||
## 5. Autodesk Fusion Electronics (formerly EAGLE — note: EAGLE EOL June 7, 2026)
|
||||
|
||||
- **Positioning:** EAGLE has been folded into **Autodesk Fusion** as the "Electronics" workspace.
|
||||
"Unified product development solution that integrates design, simulation, electronics,
|
||||
manufacturing, collaboration, and more." Standalone EAGLE access ends **June 7, 2026** (today's
|
||||
date) — meaning EAGLE-as-a-product is effectively dead; the pitch is now Fusion.
|
||||
- **Value prop / differentiator:** Best-in-class **ECAD↔MCAD** integration — "ECAD and MCAD
|
||||
designers work independently and natively on the same project within the same design management
|
||||
platform... in a single, unified environment." This MCAD bridge is Autodesk's unique angle.
|
||||
- **Cloud angle:** "Integrated, cloud-based product development platform" combining CAD/CAM/CAE/
|
||||
electronics/data-management/collaboration. Cloud is for data management + cross-discipline collab;
|
||||
electronics authoring is the desktop Fusion app, not a browser PCB editor.
|
||||
- **Target audience:** Hobbyists, startups, small teams, and product-dev teams already in the
|
||||
Autodesk/Fusion ecosystem (mechanical-led). Historically the cheap pro option vs. Altium.
|
||||
- **Pricing:** EAGLE no longer sold standalone — only via Fusion subscription. Fusion Electronics
|
||||
workspace touts "999 schematics, 16 signal layers, unlimited board area" as an "affordable
|
||||
end-to-end solution." Fusion subscription pricing is per-seat annual (Autodesk model).
|
||||
- **Relevance:** The EAGLE EOL creates a large pool of displaced hobbyist/small-team users actively
|
||||
looking for an alternative *right now* — a direct acquisition opportunity for a free/cheap
|
||||
browser-based KiCad. Many are migrating to KiCad already.
|
||||
|
||||
## 6. DipTrace (independent desktop incumbent, hobbyist→pro)
|
||||
|
||||
- **Hero:** "DipTrace — Schematic and PCB design Software."
|
||||
- **Value prop:** "Quality Schematic Capture and PCB design software... everything to create simple
|
||||
or complex multi-layer boards from schematic to manufacturing files." Sells ease-of-use + gentle
|
||||
learning curve.
|
||||
- **Target audience:** Beginners, hobbyists, and small/mid pros wanting a friendlier UI than EAGLE
|
||||
and cheaper than Altium. Non-profit hobbyists get a free "Lite" upgrade.
|
||||
- **Feature claims:** Multi-sheet/hierarchical schematics, ERC, built-in analog+digital SPICE,
|
||||
real-time 3D PCB preview, 11,000+ ready 3D package models.
|
||||
- **Pricing/tiers (transparent, perpetual — a contrast to cloud subscriptions):** Starter $75,
|
||||
Lite $145, Standard $395, Extended $695, Full $995. 30-day full trial + 300-pin freeware.
|
||||
- **Cloud/collaboration angle:** Essentially none — pure single-user desktop, perpetual license.
|
||||
Another incumbent with zero collaboration/browser story.
|
||||
|
||||
---
|
||||
|
||||
## Cross-Cutting Takeaways for a Browser-Native Collaborative KiCad
|
||||
|
||||
- **Almost all incumbents are desktop-first.** Cloud = collaboration/review/data-management bolted
|
||||
onto a desktop authoring app. None offer true in-browser *authoring* of full PCB designs as the
|
||||
primary experience. The browser story is consistently "view/review in browser, edit in the app."
|
||||
- **Real-time multiplayer is rare.** Only **Cadence OrCAD X (Symphony)** advertises concurrent
|
||||
same-database editing. Altium 365 leans on **Git-style version control**, not live multiplayer.
|
||||
Zuken/DipTrace/EAGLE have no live-collab story. Real-time browser multiplayer on KiCad is a
|
||||
genuine differentiator vs. the field.
|
||||
- **Pricing is opaque and high at the top.** Altium and Zuken are quote-driven and expensive;
|
||||
Cadence and DipTrace publish numbers. A free/open KiCad base + cloud collaboration undercuts all
|
||||
of them, especially the displaced EAGLE base.
|
||||
- **Security/compliance is table stakes for enterprise.** Altium's whole differentiation is
|
||||
SOC 2 / CMMC / zero-trust / encryption. A serious browser-collab product must answer "is my IP
|
||||
safe in the browser?" — Altium has made that the central enterprise objection.
|
||||
- **Timing wedge:** EAGLE standalone EOL is today (2026-06-07), pushing hobbyist/small-team users
|
||||
to migrate — many to KiCad. Capture-the-migrant messaging is timely.
|
||||
- **Tone benchmark:** Incumbents use professional, problem-then-solution, trust-and-results copy
|
||||
("co-creation", "without compromise", "partner for success"), heavy on workflow pain and security,
|
||||
light on hype. Logos vs. counts vary (Zuken uses named stories; Altium uses "10,000 orgs").
|
||||
|
||||
---
|
||||
|
||||
## Sources
|
||||
|
||||
- Altium 365 platform hub — https://www.altium.com/altium-365/
|
||||
- Altium 365 pricing — https://www.altium365.com/pricing
|
||||
- Altium Develop pricing — https://www.altium.com/altium-365/pricing
|
||||
- Altium / OrCAD comparison — https://www.altium.com/altium-designer/compare/cadence-orcad
|
||||
- Altium pricing (Vendr) — https://www.vendr.com/marketplace/altium
|
||||
- Altium 365 pricing analysis (PCBSync) — https://pcbsync.com/altium-365-pricing/
|
||||
- Cadence OrCAD X — https://www.cadence.com/en_US/home/tools/pcb-design-and-analysis/orcad.html
|
||||
- OrCAD X OnCloud — https://resources.pcb.cadence.com/blog/2024-orcad-x-oncloud-cloud-based-cad-programs-and-features
|
||||
- Cadence AI-driven OrCAD X press release (5X) — https://www.cadence.com/en_US/home/company/newsroom/press-releases/pr/2023/cadence-unveils-next-generation-ai-driven-orcad-x-delivering-up.html
|
||||
- Cadence + Dassault cloud collaboration — https://www.3ds.com/newsroom/press-releases/cadence-and-dassault-systemes-unveil-first-cloud-enabled-collaborative-experience-transform-development-electromechanical-systems
|
||||
- Zuken Americas — https://www.zuken.com/us/
|
||||
- Zuken CR-8000 — https://www.zuken.com/en/product/cr-8000/
|
||||
- Autodesk EAGLE / Fusion overview — https://www.autodesk.com/products/eagle/overview
|
||||
- Autodesk Fusion ECAD+MCAD — https://www.autodesk.com/solutions/ecad-and-mcad-software
|
||||
- EAGLE-to-Fusion transition — https://www.autodesk.com/products/fusion-360/blog/eagle-to-autodesk-fusion-transition/
|
||||
- DipTrace — https://diptrace.com/
|
||||
- DipTrace software/pricing — https://diptrace.com/diptrace-software/
|
||||
987
features/lp/landing-page-best-practices.md
Normal file
987
features/lp/landing-page-best-practices.md
Normal file
|
|
@ -0,0 +1,987 @@
|
|||
# Landing Page Best Practices — An Exhaustive Reference
|
||||
|
||||
> A practical, data-backed guide to designing high-converting landing pages for
|
||||
> marketing, product, and SaaS sites. Covers conversion optimization, page
|
||||
> structure, copy, CTAs, forms, trust, visual design, typography, performance,
|
||||
> mobile, accessibility, SEO, experimentation, personalization, and anti-patterns.
|
||||
|
||||
## How to read this document
|
||||
|
||||
Claims in this doc come in two tiers. Treat them differently:
|
||||
|
||||
- **🟢 Verified** — backed by a primary or strongly-corroborated source, and
|
||||
adversarially fact-checked (see [Sources](#sources--evidence-grade) and
|
||||
[Caveats](#caveats-source-quality--things-that-got-refuted)). Statistics are
|
||||
cited inline like `[U24]`.
|
||||
- **⚪ Established practice** — broad professional consensus from UX/CRO
|
||||
literature (NN/g, Baymard, CXL, Smashing Magazine) but not individually
|
||||
fact-checked with a hard statistic here. Reliable as guidance; verify the
|
||||
exact number before quoting it externally.
|
||||
|
||||
When a figure is a **vendor benchmark** or **dated**, the doc says so. Two
|
||||
widely-repeated stats were checked and **failed verification** — they are listed
|
||||
in [Caveats](#caveats-source-quality--things-that-got-refuted) so you don't repeat
|
||||
them.
|
||||
|
||||
> The single most important meta-principle: **none of these are laws.** They are
|
||||
> strong priors. The only authority on *your* page is *your* A/B test with *your*
|
||||
> traffic. Use this doc to generate better hypotheses, not to skip testing.
|
||||
|
||||
---
|
||||
|
||||
## Table of contents
|
||||
|
||||
1. [Executive summary & checklist](#1-executive-summary--checklist)
|
||||
2. [Conversion rate optimization: principles & benchmarks](#2-conversion-rate-optimization-principles--benchmarks)
|
||||
3. [Page structure & the canonical sections](#3-page-structure--the-canonical-sections)
|
||||
4. [Copywriting & messaging frameworks](#4-copywriting--messaging-frameworks)
|
||||
5. [Call-to-action (CTA) design](#5-call-to-action-cta-design)
|
||||
6. [Forms & lead capture](#6-forms--lead-capture)
|
||||
7. [Trust signals & credibility](#7-trust-signals--credibility)
|
||||
8. [Visual design: layout, hierarchy, color, imagery, video](#8-visual-design-layout-hierarchy-color-imagery-video)
|
||||
9. [Typography](#9-typography)
|
||||
10. [Performance & Core Web Vitals](#10-performance--core-web-vitals)
|
||||
11. [Mobile-first & responsive design](#11-mobile-first--responsive-design)
|
||||
12. [Accessibility (WCAG)](#12-accessibility-wcag)
|
||||
13. [SEO for landing pages](#13-seo-for-landing-pages)
|
||||
14. [A/B testing, experimentation & analytics](#14-ab-testing-experimentation--analytics)
|
||||
15. [Personalization & message-to-ad match](#15-personalization--message-to-ad-match)
|
||||
16. [Common mistakes & anti-patterns](#16-common-mistakes--anti-patterns)
|
||||
17. [Pre-launch QA checklist](#17-pre-launch-qa-checklist)
|
||||
18. [Sources & evidence grade](#sources--evidence-grade)
|
||||
19. [Caveats, source quality & refuted claims](#caveats-source-quality--things-that-got-refuted)
|
||||
|
||||
---
|
||||
|
||||
## 1. Executive summary & checklist
|
||||
|
||||
A high-converting landing page does five things well, in priority order:
|
||||
|
||||
1. **Communicates one clear value proposition** matched to the visitor's intent,
|
||||
above the fold, in scannable language.
|
||||
2. **Reduces friction** — one primary goal, one (or few) CTA, minimal form fields,
|
||||
fast load.
|
||||
3. **Builds trust** — social proof, specifics, credible design, guarantees.
|
||||
4. **Loads fast and works everywhere** — Core Web Vitals in the green, mobile-first,
|
||||
accessible.
|
||||
5. **Gets measured and iterated** — instrumented analytics, disciplined A/B tests.
|
||||
|
||||
### The one-screen checklist
|
||||
|
||||
- [ ] **One page, one goal.** Single conversion action; minimize or remove site nav.
|
||||
- [ ] **Headline states the value prop** and matches the ad/email that sent the visitor (message match).
|
||||
- [ ] **Above-the-fold answers**: What is this? What's in it for me? What do I do next?
|
||||
- [ ] **Primary CTA** is visually dominant, specific ("Start my free trial," not "Submit"), repeated down the page.
|
||||
- [ ] **Copy is scannable** — short paragraphs, subheads and bullets that lead with information-carrying words, ~5th–7th grade reading level. 🟢`[U24]`
|
||||
- [ ] **Social proof near the CTA** — testimonials, logos, counts, ratings, named sources.
|
||||
- [ ] **Form asks only for what you need** now; consider multi-step for longer forms.
|
||||
- [ ] **Benefits before features**; show, don't just tell (screenshots, demo, video).
|
||||
- [ ] **LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1** at the 75th percentile. 🟢`[WV]`
|
||||
- [ ] **Hero/LCP image is eagerly loaded** (never `loading="lazy"`); everything below the fold lazy-loaded. 🟢`[WV]`
|
||||
- [ ] **Mobile-first**: tap targets ≥ ~44px, readable without zoom, no horizontal scroll.
|
||||
- [ ] **Contrast**: ≥ 4.5:1 body text, ≥ 3:1 large text & UI component borders (WCAG 2.1 AA). 🟢`[W3C]`
|
||||
- [ ] **Analytics + a single primary metric** defined before launch; experiments sized and not "peeked." 🟢`[GB]`
|
||||
|
||||
---
|
||||
|
||||
## 2. Conversion rate optimization: principles & benchmarks
|
||||
|
||||
### 2.1 What counts as a "good" conversion rate
|
||||
|
||||
> ⚠️ **Source caveat for this whole subsection.** All numbers below come from
|
||||
> Unbounce's **2024 Conversion Benchmark Report** `[U24]` — 41,000 landing pages,
|
||||
> 57M+ conversions, 464M pageviews. It is the most-cited public dataset, but it
|
||||
> measures **pages built on Unbounce's own platform** using **median** methodology.
|
||||
> Treat these as **directional benchmarks, not universal population statistics.**
|
||||
|
||||
- 🟢 **Median landing-page conversion rate across all industries: 6.6%.** `[U24]`
|
||||
- 🟢 **A "good" rate (75th percentile) starts around 11.4%** and ranges up to
|
||||
**40.8%** depending on industry. `[U24]` Don't conflate this with the median —
|
||||
most pages sit far below it.
|
||||
- 🟢 **Industry medians range from 3.8% (SaaS, the lowest) to 12.3%
|
||||
(entertainment/events, the highest).** `[U24]` **SaaS is ~42% below the 6.6%
|
||||
baseline** — a SaaS page converting at 4% is roughly average, not broken.
|
||||
|
||||
**Takeaway:** Benchmark against *your industry and traffic source*, and against
|
||||
*your own past performance*, not against a global average. The most useful number
|
||||
is your trend line, not the percentile table.
|
||||
|
||||
### 2.2 Traffic source dominates the result
|
||||
|
||||
🟢 Conversion varies enormously by **audience intent**, not just page quality `[U24]`:
|
||||
|
||||
| Channel | Avg. conversion | Notes |
|
||||
|---------------|-----------------|-------|
|
||||
| **Email** | **19.3%** | Highest — warm, opted-in, pre-qualified audience |
|
||||
| Paid social | ~12% | |
|
||||
| Paid search | ~10.9% | |
|
||||
| Display | ~4.1% | Coldest, lowest-intent traffic |
|
||||
|
||||
Email converts ~60% better than paid social, ~77% better than paid search, and
|
||||
~370% better than display. `[U24]`
|
||||
|
||||
> **Critical interpretation:** This is an **audience-temperature artifact**, not
|
||||
> proof that one channel is "better." Email visitors already know you. **Never
|
||||
> benchmark a cold paid-traffic landing page against an email landing page** — judge
|
||||
> each page against the typical conversion rate *for its own channel.*
|
||||
|
||||
### 2.3 Simpler copy correlates with higher conversion
|
||||
|
||||
🟢 There is a **strong correlation between reading ease and conversion** `[U24]`:
|
||||
|
||||
| Reading level | Conversion rate |
|
||||
|-----------------------|-----------------|
|
||||
| 5th–7th grade | **11.1%** |
|
||||
| 8th–9th grade | 7.1% (~56% lower) |
|
||||
| Professional/college | 5.3% (~2× lower) |
|
||||
|
||||
**Caveats:** This is **correlation, not causation**, on a single-vendor dataset,
|
||||
and there is at least one documented industry exception (entertainment, where
|
||||
higher-grade copy converts better). Still, "write simpler" is one of the
|
||||
safest, highest-leverage moves in CRO.
|
||||
|
||||
> ⛔ Do **not** cite the related "514% better / 12.9% vs 2.1% for SaaS" figure — it
|
||||
> **failed verification.** See [Caveats](#caveats-source-quality--things-that-got-refuted).
|
||||
|
||||
### 2.4 Core CRO mental models (⚪ established practice)
|
||||
|
||||
- **Conversion = Motivation − Friction − Anxiety (+ Incentive).** Increase
|
||||
motivation (value, relevance), strip friction (steps, fields, load time, choices),
|
||||
and reduce anxiety (risk, trust). This is the operational heart of CRO.
|
||||
- **One page, one goal.** Every element either advances the single conversion
|
||||
goal or is a candidate for deletion. Competing CTAs dilute results.
|
||||
- **Attention/decision ratio.** A focused landing page ideally has a 1:1 ratio of
|
||||
links to conversion goals — remove site nav, footers full of links, and
|
||||
secondary offers that leak attention.
|
||||
- **Friction audit beats feature addition.** Most conversion gains come from
|
||||
*removing* obstacles (a field, a step, a second of load) rather than adding
|
||||
persuasion.
|
||||
- **The page is a continuation of the click.** The visitor arrived with an
|
||||
expectation set by the ad/email/search result. Honor it (see
|
||||
[Message match](#15-personalization--message-to-ad-match)).
|
||||
|
||||
---
|
||||
|
||||
## 3. Page structure & the canonical sections
|
||||
|
||||
Landing pages follow a well-worn vertical narrative. Not every page needs every
|
||||
section, but this is the canonical order and purpose. (⚪ established practice
|
||||
throughout, with the scanning/hierarchy points 🟢 verified.)
|
||||
|
||||
### 3.1 The above-the-fold / hero
|
||||
|
||||
The first screen must answer three questions in **~5 seconds**:
|
||||
|
||||
1. **What is this?** (Headline — the value proposition)
|
||||
2. **What's in it for me?** (Subhead — the benefit / how it helps)
|
||||
3. **What do I do next?** (Primary CTA)
|
||||
|
||||
Components:
|
||||
- **Headline** — clear over clever. State the outcome the visitor wants. Match the
|
||||
source ad/email wording.
|
||||
- **Subheadline** — one or two lines expanding the promise or naming the mechanism.
|
||||
- **Primary CTA** — visually dominant button (see §5).
|
||||
- **Hero visual** — product screenshot, short demo, or a human/contextual image
|
||||
that reinforces (not decorates) the message. This is usually your **LCP element**
|
||||
— load it eagerly (§10).
|
||||
- **Optional**: a one-line trust strip (logo bar, rating, "trusted by N teams").
|
||||
|
||||
🟢 **Why the fold still matters:** users **scan, they don't read**, in an
|
||||
**F-shaped pattern** — a horizontal sweep across the top, a shorter sweep lower,
|
||||
then a vertical scan down the left edge. **Exhaustive word-by-word reading is
|
||||
rare**, so the **most important information must be in the first two paragraphs**,
|
||||
and the page must front-load meaning. `[NNf]`
|
||||
|
||||
### 3.2 Value proposition / problem framing
|
||||
|
||||
Immediately below the hero, expand on *why this matters*: the problem you solve and
|
||||
the transformation you offer. Frameworks like PAS and AIDA (see §4) live here.
|
||||
|
||||
### 3.3 Social proof
|
||||
|
||||
Place social proof **early and again near each CTA**. Forms include:
|
||||
- Customer **logos** ("trusted by")
|
||||
- **Testimonials** with name, role, company, and photo (specificity = credibility)
|
||||
- **Ratings/reviews** (stars, G2/Capterra/Trustpilot badges)
|
||||
- **Quantified outcomes** ("cut onboarding time 40%")
|
||||
- **Usage counts** ("Join 50,000+ teams")
|
||||
|
||||
(See §7 for what makes proof actually credible.)
|
||||
|
||||
### 3.4 Features vs. benefits
|
||||
|
||||
Lead with **benefits** (what the user gains), support with **features** (how it's
|
||||
delivered). The reliable pattern is **benefit headline → feature detail → proof**.
|
||||
Pair each with a visual that *shows* it working. **Show, don't just tell.**
|
||||
|
||||
### 3.5 How it works
|
||||
|
||||
For products with any complexity, a **3-step "how it works"** removes uncertainty
|
||||
and reduces anxiety. Keep it to 3–4 steps, each one verb-led and visual.
|
||||
|
||||
### 3.6 Pricing (when present)
|
||||
|
||||
⚪ Established practice:
|
||||
- Show pricing if you can; hiding it adds friction and distrust for many buyers.
|
||||
- **3-tier "good/better/best"** layouts work; visually highlight the recommended
|
||||
plan (anchoring).
|
||||
- State billing terms plainly; show annual savings if offered.
|
||||
- Put a risk-reducer next to price (free trial, money-back guarantee, "no credit
|
||||
card required").
|
||||
- Reduce choice overload — too many tiers/toggles increase decision friction.
|
||||
|
||||
### 3.7 FAQ / objection handling
|
||||
|
||||
An FAQ is **objection handling in disguise.** List the real reasons people *don't*
|
||||
convert (price, security, switching cost, contract terms, integrations) and answer
|
||||
them. Use an accessible accordion (keyboard-operable, proper ARIA) — but ensure the
|
||||
content is also crawlable for SEO.
|
||||
|
||||
### 3.8 Final CTA / closing section
|
||||
|
||||
End with a restated value proposition and a **repeated primary CTA**. A visitor who
|
||||
scrolled to the bottom is engaged — don't make them scroll back up to convert.
|
||||
|
||||
### 3.9 Footer
|
||||
|
||||
For a focused landing page, keep the footer **minimal**: legal links, privacy,
|
||||
contact, essential trust marks. Avoid a sprawling sitemap footer that re-introduces
|
||||
the navigation you deliberately removed.
|
||||
|
||||
### 3.10 Navigation: usually remove it
|
||||
|
||||
⚪ A dedicated campaign landing page typically **removes or minimizes top
|
||||
navigation** to keep the attention ratio focused on the single goal. (A page that
|
||||
also serves SEO/organic discovery may keep light nav — judge by purpose. Test it.)
|
||||
|
||||
---
|
||||
|
||||
## 4. Copywriting & messaging frameworks
|
||||
|
||||
Copy is the highest-leverage, lowest-cost lever on most landing pages. (⚪
|
||||
established practice; the **clarity/readability** and **scanning** points are 🟢.)
|
||||
|
||||
### 4.1 Write for scanners
|
||||
|
||||
🟢 Because users scan in an F-pattern and rarely read word-by-word `[NNf]`:
|
||||
- **Front-load** every subhead, paragraph, and bullet with **information-carrying
|
||||
words** — the meaning must survive a left-edge vertical scan.
|
||||
- Put the **most important information in the first two paragraphs.**
|
||||
- Short paragraphs (1–3 lines), generous subheads, bulleted lists.
|
||||
- One idea per sentence; cut filler, hedges, and throat-clearing intros.
|
||||
|
||||
🟢 **Keep it simple** — aim for a ~**5th–7th grade reading level**; simpler copy
|
||||
correlates with materially higher conversion. `[U24]`
|
||||
|
||||
### 4.2 Messaging frameworks (⚪)
|
||||
|
||||
- **PAS — Problem · Agitate · Solution.** Name the pain, deepen it, then present
|
||||
your product as the resolution. Excellent for the section just below the hero.
|
||||
- **AIDA — Attention · Interest · Desire · Action.** A whole-page arc: hook →
|
||||
build relevance → create want → ask for the action.
|
||||
- **FAB — Features · Advantages · Benefits.** Translate every feature into a
|
||||
concrete user benefit. ("256-bit encryption" → "your data stays private.")
|
||||
- **The 4 U's for headlines** — Useful, Urgent, Unique, Ultra-specific.
|
||||
- **Jobs-to-be-done framing.** Speak to the outcome the user "hires" the product
|
||||
for, not the product's internals.
|
||||
|
||||
### 4.3 Message match (🟢 principle, see §15)
|
||||
|
||||
The headline and hero copy must **echo the ad, email, or search query** that drove
|
||||
the click. Mismatch between the promise and the page is a top cause of bounce and a
|
||||
direct waste of ad spend. CXL's "maintaining scent" guidance: keep the visual and
|
||||
verbal "scent" continuous from ad → page → conversion. `[CXLs]`
|
||||
|
||||
### 4.4 Copy craft checklist
|
||||
|
||||
- **Specificity beats adjectives.** "Setup in 4 minutes" > "incredibly fast setup."
|
||||
- **Second person.** "You/your," not "users/customers."
|
||||
- **Quantify** wherever honest (numbers, %, time saved, $ saved).
|
||||
- **One value proposition**, restated — don't make readers assemble it.
|
||||
- **Active voice, concrete verbs.**
|
||||
- **Cut jargon** unless your audience genuinely speaks it.
|
||||
- **Microcopy matters** — button labels, form helper text, error messages, and the
|
||||
reassurance line under the CTA ("No credit card required") all move conversion.
|
||||
|
||||
---
|
||||
|
||||
## 5. Call-to-action (CTA) design
|
||||
|
||||
### 5.1 CTA copy: be specific, set accurate expectations
|
||||
|
||||
🟢 **Generic CTAs like "Get Started" are ambiguous and can mislead.** NN/g's
|
||||
usability study found "Get Started" "can apply to almost any goal"; information-
|
||||
seekers who clicked it "expected details about the company, but instead were forced
|
||||
into surveys, onboarding flows, and sales funnels," became "lost, uninformed, and
|
||||
frustrated," and left for competitors. NN/g's guidance: **increase information
|
||||
scent by stating precisely what the user should expect.** `[NNg]`
|
||||
|
||||
- ✅ "Take the 2-minute style quiz," "Start my free 14-day trial," "Get the pricing
|
||||
PDF," "Book a demo."
|
||||
- ⚠️ "Get Started," "Submit," "Continue," "Learn more" — vague; the user can't tell
|
||||
what happens next.
|
||||
|
||||
> **Nuance:** Some CRO tests show "Get Started" *winning on raw click rate.* Clicks
|
||||
> aren't conversions. A vague CTA can buy a click and lose the trust — optimize for
|
||||
> the *qualified* action, and write CTAs that set honest expectations. `[NNg]`
|
||||
|
||||
- Phrase as **first-person value** when testing ("Start **my** free trial").
|
||||
- Lead with a **verb**; name the **outcome**, not the mechanics ("Submit").
|
||||
- Reduce anxiety with **adjacent microcopy** ("Free forever," "Cancel anytime,"
|
||||
"No credit card required").
|
||||
|
||||
### 5.2 CTA visual design (⚪)
|
||||
|
||||
- **Make it the most visually dominant element** in its section — 🟢 hierarchy is
|
||||
driven primarily by **color/contrast and size** `[NNv]`. Use a high-contrast,
|
||||
unused accent color (the classic "make the button a color nothing else on the
|
||||
page uses").
|
||||
- **Button affordance** — it should look clickable (solid fill, padding, sometimes
|
||||
subtle depth). 🟢 Its boundary must meet **3:1 contrast** for accessibility
|
||||
`[W3C]`.
|
||||
- **Size & tap target** — comfortably large; ≥ ~44×44px on touch.
|
||||
- **Whitespace** around the button isolates and emphasizes it.
|
||||
|
||||
### 5.3 Placement & quantity (⚪)
|
||||
|
||||
- **One primary action.** You may have a secondary, visually subordinate option
|
||||
(e.g., "Book a demo" ghost button next to "Start free trial"), but never two
|
||||
equal CTAs competing.
|
||||
- **Repeat the same primary CTA** down the page (hero, after key sections, final
|
||||
close) so the visitor can act whenever convinced — but keep the *action* singular.
|
||||
- **Above the fold** for low-consideration offers; for complex/expensive products,
|
||||
it's fine (and often better) for the *decision* to come after the page has made
|
||||
its case — just keep a persistent or repeated CTA available.
|
||||
|
||||
---
|
||||
|
||||
## 6. Forms & lead capture
|
||||
|
||||
Forms are where intent turns into conversion — and where friction kills it. (⚪
|
||||
established practice; treat specific field-count numbers as directional.)
|
||||
|
||||
### 6.1 Ask for less
|
||||
|
||||
- **Every field costs conversions.** Request only what you genuinely need *at this
|
||||
step.* Defer the rest to later in the funnel or progressive profiling.
|
||||
- **Typical guidance:** lead-gen forms convert best in the **~3–5 field** range;
|
||||
each extra field adds friction. (Exact optimal count is offer- and audience-
|
||||
dependent — test it.)
|
||||
- **Drop optional fields** or mark them clearly. Phone number, company size, and
|
||||
"how did you hear about us" are common conversion-killers — collect them later.
|
||||
|
||||
### 6.2 Reduce friction in the fields you keep (⚪, drawn from Baymard-style UX research)
|
||||
|
||||
- **Single-column layout.** Multi-column forms cause misreads and skips.
|
||||
- **Top-aligned labels** for fastest completion; keep labels visible (don't rely on
|
||||
disappearing placeholders as labels — an accessibility and usability failure).
|
||||
- **Right input types & autocomplete** — `type="email"`, `inputmode`, `autocomplete`
|
||||
tokens trigger correct mobile keyboards and autofill.
|
||||
- **Inline, specific validation** — validate on blur, explain *how to fix* the error,
|
||||
show errors adjacent to the field, and never wipe the form on submit failure.
|
||||
- **Don't split fields unnecessarily** (e.g., one full-name field beats first/last;
|
||||
one phone field beats three).
|
||||
- **Smart defaults & formatting** — auto-format phone/card numbers; default the
|
||||
obvious choice.
|
||||
- **Make the submit button descriptive** (§5.1), not "Submit."
|
||||
|
||||
### 6.3 Multi-step forms
|
||||
|
||||
- **Break long forms into steps** to lower perceived effort; show a **progress
|
||||
indicator.** Each step feels small, and partial-completion creates commitment
|
||||
(sunk-cost / consistency).
|
||||
- **Ask the easy/low-risk questions first** (the foot-in-the-door), sensitive ones
|
||||
(payment, phone) last.
|
||||
- **Front-load momentum**: a first step that's a simple choice (radio buttons) often
|
||||
outperforms one that opens with an email field.
|
||||
|
||||
### 6.4 Anxiety reducers around the form
|
||||
|
||||
- Reassurance microcopy ("We'll never share your email," "30-second signup").
|
||||
- Security/privacy cues near sensitive fields (§7).
|
||||
- Clear statement of what happens after submit (and *when*).
|
||||
|
||||
---
|
||||
|
||||
## 7. Trust signals & credibility
|
||||
|
||||
Trust closes the gap between "interested" and "converted." Anxiety is a primary
|
||||
conversion blocker; credible signals remove it. (⚪ established practice.)
|
||||
|
||||
### 7.1 Types of trust signals
|
||||
|
||||
- **Social proof** — testimonials (with real name, role, company, **photo**), case
|
||||
studies, customer logos, star ratings, third-party review badges (G2, Trustpilot,
|
||||
Capterra), and usage counts ("50,000+ teams").
|
||||
- **Authority** — press mentions ("as seen in"), awards, certifications, notable
|
||||
customers, expert endorsements.
|
||||
- **Security & privacy** — SSL/HTTPS (table stakes), trust seals (Norton/McAfee-style),
|
||||
PCI/SOC 2/ISO badges, GDPR/privacy statements, payment-method logos near checkout.
|
||||
- **Risk reversal** — money-back guarantee, free trial, "no credit card required,"
|
||||
free cancellation, free returns. These directly attack purchase anxiety.
|
||||
- **Transparency** — real company info, a physical address, named team, working
|
||||
contact methods, clear pricing.
|
||||
|
||||
### 7.2 What makes proof *credible* (not just present)
|
||||
|
||||
- **Specific beats generic.** "Reduced support tickets 38% in 60 days — Maria K.,
|
||||
Head of CX at Acme" outperforms "Great product! — A customer."
|
||||
- **Faces and names** raise believability; anonymous quotes read as fabricated.
|
||||
- **Relevance/recognizability** — logos and testimonials from companies *like the
|
||||
visitor's* matter more than famous-but-irrelevant ones.
|
||||
- **Proximity to the decision** — put proof and risk-reversers **right next to the
|
||||
CTA/form**, where doubt peaks.
|
||||
- **Don't over-badge.** A wall of generic seals can *reduce* trust (looks spammy);
|
||||
a few relevant, credible marks beat many weak ones.
|
||||
|
||||
---
|
||||
|
||||
## 8. Visual design: layout, hierarchy, color, imagery, video
|
||||
|
||||
### 8.1 Visual hierarchy
|
||||
|
||||
🟢 **Visual hierarchy guides the eye to the most important elements**, and
|
||||
importance is communicated **primarily through color (and contrast) and size/scale**,
|
||||
while **proximity and grouping (common regions)** show which elements belong
|
||||
together. `[NNv]`
|
||||
|
||||
> *Calibration note:* this was the one finding in the research with a non-unanimous
|
||||
> verification (2–1); NN/g's broader writing lists scale, value, color, spacing,
|
||||
> placement "and a variety of other signals." Color and size are the two **most-
|
||||
> emphasized** cues, but they aren't the *only* ones. `[NNv]`
|
||||
|
||||
Apply it:
|
||||
- The **primary CTA** should be the highest-contrast, attention-grabbing element in
|
||||
its viewport.
|
||||
- A clear **type scale** (§9) makes headline > subhead > body obvious at a glance.
|
||||
- **Group related items** (label with its field, benefit with its icon) via
|
||||
proximity; separate unrelated ones with whitespace.
|
||||
|
||||
### 8.2 Layout & scanning patterns
|
||||
|
||||
🟢 Design for **F-pattern scanning** on text-heavy pages: front-load meaning,
|
||||
left-align key content, use subheads as scan anchors. `[NNf]`
|
||||
|
||||
⚪ The **Z-pattern** suits sparse, hero-style layouts (logo top-left → CTA
|
||||
top-right → diagonal → bottom CTA). Use Z for minimal hero sections, F for
|
||||
content-dense pages.
|
||||
|
||||
⚪ **Whitespace** (negative space) is an active design tool: it increases
|
||||
comprehension, reduces cognitive load, isolates the CTA, and signals quality.
|
||||
Don't fear emptiness around the key action.
|
||||
|
||||
⚪ **Directional cues** — arrows, a person's gaze, lines, motion — can guide
|
||||
attention toward the CTA/form. (Eye-tracking shows people tend to look where a
|
||||
pictured face looks.)
|
||||
|
||||
### 8.3 Color & contrast
|
||||
|
||||
- ⚪ Use a **restrained palette**: a neutral base, one brand color, and a single
|
||||
**high-contrast accent reserved for CTAs.** Color's job here is hierarchy, not
|
||||
decoration — don't dilute the accent by using it everywhere.
|
||||
- 🟢 **Meet contrast minimums**: ≥ **4.5:1** for body text, ≥ **3:1** for large text
|
||||
and **UI component borders** (WCAG 2.1 AA — §12). `[W3C]`
|
||||
- ⚪ Don't rely on **color alone** to convey meaning (errors, required fields,
|
||||
states) — pair with text/icons for colorblind users.
|
||||
- ⚪ "Which button color converts best" is **context-dependent** — the winning color
|
||||
is whatever **contrasts most** with its surroundings and the rest of the palette,
|
||||
not a universally magic hue. Test it.
|
||||
|
||||
### 8.4 Imagery vs. illustration
|
||||
|
||||
- ⚪ **Show the actual product** (real screenshots, UI, the thing in use) — it
|
||||
outperforms generic stock imagery and decorative abstractions for most products.
|
||||
- ⚪ **Avoid clichéd stock photos** (handshakes, faceless "business people"); they
|
||||
read as filler and can lower trust.
|
||||
- ⚪ **Images must reinforce the message**, not just fill space — a "hero image" that
|
||||
says nothing about the offer is wasted real estate (and often the LCP cost).
|
||||
- ⚪ **Human faces** can increase warmth and direct attention, but choose authentic,
|
||||
relevant imagery over staged stock.
|
||||
- **Performance:** the hero image is usually the **LCP element** — optimize and
|
||||
**eagerly load** it (§10).
|
||||
|
||||
### 8.5 Video
|
||||
|
||||
- ⚪ A short **explainer/demo video** can lift conversion for products that benefit
|
||||
from showing motion or workflow — but it adds weight and can distract.
|
||||
- **Never autoplay with sound.** Make controls obvious. Provide **captions**
|
||||
(accessibility + sound-off viewing).
|
||||
- **Don't let video block the LCP/critical render** — use a lightweight poster
|
||||
image, lazy-load the player, and avoid heavy embeds above the fold.
|
||||
- **Provide a text/visual fallback** — many users won't press play; the page must
|
||||
still convert without the video.
|
||||
|
||||
---
|
||||
|
||||
## 9. Typography
|
||||
|
||||
Type is most of what a landing page *is* — it carries the message and a large share
|
||||
of perceived quality. (⚪ established practice; web-font performance ties to the 🟢
|
||||
Core Web Vitals section.)
|
||||
|
||||
### 9.1 Readability fundamentals
|
||||
|
||||
- **Body size:** ~16px minimum on the web; larger (18–20px) is increasingly common
|
||||
and improves readability. Never ship sub-14px body copy.
|
||||
- **Line length (measure):** aim for **~50–75 characters per line** (~45–75). Too
|
||||
long tires the eye; too short breaks rhythm.
|
||||
- **Line height (leading):** roughly **1.4–1.6×** the font size for body text.
|
||||
- **Sufficient contrast** (§8.3 / §12) — light-gray-on-white body text is a common,
|
||||
avoidable readability and accessibility failure.
|
||||
- **Left-aligned body text** for LTR languages; avoid justified text on the web
|
||||
(uneven spacing/rivers). Don't center long paragraphs.
|
||||
|
||||
### 9.2 Type scale & hierarchy
|
||||
|
||||
- Use a **modular scale** (e.g., 1.2–1.333 ratio) so headline, subhead, body, and
|
||||
caption sizes relate harmoniously and the hierarchy reads instantly.
|
||||
- Establish **2–3 clear levels** of heading plus body and small/caption. Differ by
|
||||
**size and weight**, not many different fonts.
|
||||
- Hierarchy via **weight and size**, sparingly via color — ties back to 🟢 visual
|
||||
hierarchy being driven by size and color `[NNv]`.
|
||||
|
||||
### 9.3 Font pairing (⚪, Smashing Magazine)
|
||||
|
||||
- **Limit to two typefaces** (often one display/heading + one body), occasionally
|
||||
three. More than that looks chaotic and hurts performance.
|
||||
- **Pair by contrast, not similarity** — combine fonts that are clearly different
|
||||
(e.g., a characterful serif heading with a clean sans body) so each has a job;
|
||||
near-identical fonts create awkward tension. `[SMt]`
|
||||
- **A single well-chosen superfamily** (with multiple weights/styles) can do the
|
||||
whole job and guarantees harmony. `[SMt]`
|
||||
- Match **mood and x-height**; ensure both fonts have the weights you need.
|
||||
|
||||
### 9.4 System fonts vs. custom web fonts (performance trade-off)
|
||||
|
||||
- **System font stacks** (e.g., `-apple-system, Segoe UI, Roboto, …`) have **zero
|
||||
network cost, no FOIT/FOUT, and instant render** — the fastest possible choice and
|
||||
great for LCP/CLS. The trade-off is less brand distinctiveness.
|
||||
- **Custom web fonts** strengthen brand but add bytes and a render dependency that
|
||||
can hurt **LCP** (text paint) and cause **CLS** (layout shift on swap). If you use
|
||||
them:
|
||||
- **Subset** to the characters/weights you actually use.
|
||||
- Use **`woff2`** (smallest modern format).
|
||||
- **`font-display: swap`** (or `optional`) to avoid invisible text (FOIT); `swap`
|
||||
favors content visibility, `optional` favors stability.
|
||||
- **`<link rel="preload">`** the critical (above-the-fold) font files.
|
||||
- **Self-host** where feasible (avoids a third-party connection; third-party font
|
||||
CDNs add a connection and are no longer cache-shared across sites).
|
||||
- **Set `size-adjust`/`@font-face` metric overrides or a matched fallback** to
|
||||
minimize the layout shift when the web font swaps in (protects **CLS**).
|
||||
- **Pragmatic default:** system fonts (or one preloaded, subset display font for
|
||||
headings + a system body) gives most of the brand benefit at a fraction of the
|
||||
performance cost.
|
||||
|
||||
---
|
||||
|
||||
## 10. Performance & Core Web Vitals
|
||||
|
||||
Speed is a conversion feature, an SEO factor, and a UX baseline. (🟢 thresholds and
|
||||
lazy-loading are primary-sourced from Google.)
|
||||
|
||||
### 10.1 The Core Web Vitals thresholds
|
||||
|
||||
🟢 Google's Core Web Vitals define the bar for a good experience, measured at the
|
||||
**75th percentile** of page loads `[WV]`:
|
||||
|
||||
| Metric | Measures | Good | Needs improvement | Poor |
|
||||
|--------|----------|------|-------------------|------|
|
||||
| **LCP** (Largest Contentful Paint) | Loading | **≤ 2.5s** | 2.5–4s | > 4s |
|
||||
| **INP** (Interaction to Next Paint) | Interactivity | **≤ 200ms** | 200–500ms | > 500ms |
|
||||
| **CLS** (Cumulative Layout Shift) | Visual stability | **≤ 0.1** | 0.1–0.25 | > 0.25 |
|
||||
|
||||
🟢 **INP replaced First Input Delay (FID)** as a stable Core Web Vital in **March
|
||||
2024.** `[WV]`
|
||||
|
||||
### 10.2 Optimizing each metric (⚪ tactics, 🟢 the lazy-load rule)
|
||||
|
||||
**LCP (loading)** — usually the hero image or headline text:
|
||||
- 🟢 **Never lazy-load the LCP/above-the-fold image.** Lazy-loading it opts it out of
|
||||
the preload scanner and de-prioritizes it, hurting LCP. **Eagerly load in-viewport
|
||||
images; lazy-load everything below the fold** — fewer bytes *and* better CWV. In
|
||||
Google's A/B tests, disabling lazy-load on the hero improved LCP ~13% desktop /
|
||||
~15% mobile. Best result pairs eager loading with **`fetchpriority="high"`.** `[WV]`
|
||||
- Serve responsive, modern-format images (AVIF/WebP), correctly sized; compress.
|
||||
- **Preload** the LCP image/font; inline critical CSS; minimize render-blocking JS/CSS.
|
||||
- Use a CDN; enable caching; reduce server response time (TTFB).
|
||||
|
||||
**INP (interactivity):**
|
||||
- Ship **less JavaScript**; code-split and defer non-critical scripts.
|
||||
- Break up **long tasks**; avoid heavy work on the main thread during interactions.
|
||||
- Audit third-party scripts (tag managers, chat widgets, A/B-test tools) — they're a
|
||||
top INP and weight offender.
|
||||
|
||||
**CLS (visual stability):**
|
||||
- **Always set explicit `width`/`height` (or `aspect-ratio`)** on images, videos,
|
||||
iframes, and ad slots so space is reserved.
|
||||
- **Reserve space** for late-loading content (banners, embeds, cookie bars).
|
||||
- Avoid inserting content **above** existing content after load.
|
||||
- Prevent **font-swap shift** (see §9.4 — `size-adjust`/metric overrides).
|
||||
|
||||
### 10.3 Speed and conversion
|
||||
|
||||
🟢 **Mobile speed is conversion-critical** `[GMS]`:
|
||||
- **53% of mobile visits are abandoned if a site takes longer than 3 seconds to
|
||||
load.**
|
||||
- **Bounce rate climbs steeply with load time** — ~**13%** for pages under 3s, rising
|
||||
to nearly **60%** by 9s.
|
||||
|
||||
> ⚠️ **Caveats:** these figures are from Google research dated **~2016–2017** (≈9–10
|
||||
> years old) and describe **correlation**, not proven causation. They are still
|
||||
> widely cited and directionally sound — faster is better — but don't present them as
|
||||
> fresh or causal. ⛔ The related "**1 second faster → up to 27% more conversions**"
|
||||
> claim **failed verification** — do not cite it (see
|
||||
> [Caveats](#caveats-source-quality--things-that-got-refuted)).
|
||||
|
||||
### 10.4 Performance checklist
|
||||
|
||||
- [ ] Measure with **field data** (CrUX / real-user monitoring), not just lab tools.
|
||||
- [ ] LCP element identified, optimized, **eagerly loaded + preloaded.** 🟢
|
||||
- [ ] Images: responsive, modern format, compressed, dimensioned.
|
||||
- [ ] Below-fold media `loading="lazy"`. 🟢
|
||||
- [ ] Fonts subset, `woff2`, preloaded, `font-display: swap`. (§9.4)
|
||||
- [ ] JS minimized, deferred, third-parties audited.
|
||||
- [ ] CLS guarded with reserved space everywhere.
|
||||
- [ ] Tested on a **real mid-tier phone on throttled network**, not just desktop.
|
||||
|
||||
---
|
||||
|
||||
## 11. Mobile-first & responsive design
|
||||
|
||||
The majority of landing-page traffic is mobile; design for the small screen first,
|
||||
then enhance. (⚪ established practice; speed and accessibility points are 🟢.)
|
||||
|
||||
- **Design mobile-first.** Decide what matters on a 360–390px-wide screen, then add
|
||||
for larger viewports. Don't shrink a desktop page as an afterthought.
|
||||
- **Single-column, thumb-friendly layouts.** Stack content; keep the primary CTA
|
||||
reachable and prominent (consider a persistent/sticky CTA on long pages).
|
||||
- **Tap targets ≥ ~44×44px** with adequate spacing so users don't mis-tap.
|
||||
- **Readable without zoom** — ≥16px body, sufficient contrast, no horizontal scroll.
|
||||
- **Compress the above-the-fold** — mobile folds are short; get value prop + CTA into
|
||||
the first screen.
|
||||
- **Right input types & autofill** on forms (§6.2) — mobile typing is costly.
|
||||
- **Mind fat-finger zones** and avoid hover-dependent interactions (no hover on
|
||||
touch).
|
||||
- 🟢 **Mobile performance is non-negotiable** — see the 53%/bounce-curve data (§10.3)
|
||||
`[GMS]`. Mobile users are on worse networks and devices; budget accordingly.
|
||||
- **Responsive ≠ accessible automatically**, but they overlap: fluid layouts,
|
||||
scalable text (respect user zoom up to 200%), and reflow without loss of content
|
||||
serve both. `[LA]`
|
||||
- **Test on real devices** across iOS/Android and a range of widths, not just the
|
||||
browser emulator.
|
||||
|
||||
---
|
||||
|
||||
## 12. Accessibility (WCAG)
|
||||
|
||||
Accessibility widens your audience, reduces legal risk, and overlaps heavily with
|
||||
good UX and SEO. Target **WCAG 2.1 (or 2.2) Level AA.** (🟢 contrast is primary-
|
||||
sourced from W3C; the rest is established WCAG guidance.)
|
||||
|
||||
### 12.1 Contrast (🟢 verified)
|
||||
|
||||
WCAG 2.1 AA minimums `[W3C]`:
|
||||
- **Body/normal text & images of text: ≥ 4.5:1** (SC 1.4.3).
|
||||
- **Large text** (≥18pt, or ≥14pt bold): **≥ 3:1.**
|
||||
- **Non-text UI components & graphics** — button boundaries, form-field borders,
|
||||
icons that convey meaning, focus indicators: **≥ 3:1** (SC 1.4.11 Non-text
|
||||
Contrast).
|
||||
|
||||
(The stricter 7:1 / 4.5:1 thresholds are **AAA**, optional.)
|
||||
|
||||
### 12.2 Other essentials (⚪ WCAG AA)
|
||||
|
||||
- **Semantic structure** — real `<h1>…<h6>` order, landmarks (`header/main/nav/
|
||||
footer`), lists, and a single descriptive `<h1>` (also helps SEO).
|
||||
- **Keyboard operable** — every interactive element reachable and usable by keyboard,
|
||||
in a logical order, with a **visible focus indicator.**
|
||||
- **Alt text** — meaningful images get descriptive `alt`; decorative images get
|
||||
empty `alt=""`.
|
||||
- **Labels** — every form field has a programmatically associated, persistent
|
||||
`<label>`; errors are announced and described in text (not color alone).
|
||||
- **Don't convey meaning by color alone** (§8.3).
|
||||
- **Respect `prefers-reduced-motion`**; avoid content that flashes > 3×/sec.
|
||||
- **Captions/transcripts** for video/audio.
|
||||
- **Resizable text / zoom** to 200% without loss of content or function.
|
||||
- **Accessible accordions/modals/tabs** (FAQ, menus) — correct ARIA, focus
|
||||
management, escape handling.
|
||||
- **Test** with automated tools (axe, Lighthouse, WAVE) *and* manual keyboard +
|
||||
screen-reader passes; automation catches only a fraction of issues.
|
||||
|
||||
---
|
||||
|
||||
## 13. SEO for landing pages
|
||||
|
||||
Even paid/campaign pages benefit from SEO hygiene; organic landing pages depend on
|
||||
it. (⚪ established practice; overlaps with 🟢 performance & accessibility.)
|
||||
|
||||
- **Search intent match** — the page must satisfy the query it targets; align
|
||||
headline and content to intent.
|
||||
- **One primary keyword/topic per page**, in the **`<title>`**, `<h1>`, an early
|
||||
paragraph, and naturally throughout — no stuffing.
|
||||
- **Unique, compelling `<title>` (~50–60 chars)** and **meta description (~150–160
|
||||
chars)** — they drive click-through from the SERP.
|
||||
- **One `<h1>`**, logical heading hierarchy (also accessibility, §12).
|
||||
- **Descriptive, readable URL** with the keyword; avoid parameter soup.
|
||||
- **Crawlable content** — important copy in HTML text, not baked into images;
|
||||
FAQ/accordion content present in the DOM.
|
||||
- **Internal links & canonical tag** — set `rel="canonical"`, especially when paid
|
||||
variants risk duplicate-content issues.
|
||||
- **Structured data** (FAQ, Product, Review, Breadcrumb schema) for rich results
|
||||
where appropriate.
|
||||
- **Core Web Vitals** are a ranking signal — §10 does double duty. 🟢`[WV]`
|
||||
- **Mobile-friendliness** (mobile-first indexing) — §11.
|
||||
- **Image SEO** — descriptive filenames + alt text; compressed (also CWV).
|
||||
- **Avoid thin/duplicate content** across many near-identical paid landing pages; if
|
||||
they shouldn't rank, consider `noindex` and rely on canonical/intent for the rest.
|
||||
|
||||
---
|
||||
|
||||
## 14. A/B testing, experimentation & analytics
|
||||
|
||||
Optimization without measurement is decoration. But naïve testing produces
|
||||
confident, wrong answers — rigor matters. (🟢 statistical pitfalls are primary-
|
||||
sourced.)
|
||||
|
||||
### 14.1 Instrument before you optimize (⚪)
|
||||
|
||||
- Define **one primary conversion metric** (the macro-conversion) **before launch**;
|
||||
track micro-conversions (scroll depth, CTA clicks, form starts/abandons) as
|
||||
diagnostics.
|
||||
- Use analytics + **session recordings / heatmaps** to *find* problems, then **A/B
|
||||
testing** to *validate* fixes. Qualitative tools generate hypotheses; experiments
|
||||
confirm them.
|
||||
- Watch the **whole funnel**, not just the landing page — a page "win" that lowers
|
||||
downstream quality is a loss.
|
||||
|
||||
### 14.2 Run experiments that don't lie to you (🟢)
|
||||
|
||||
- 🟢 **The multiple-comparisons problem.** Testing one hypothesis at the 5%
|
||||
significance level across **20 metrics gives ~64% probability of at least one false
|
||||
positive by chance alone** (1 − 0.95²⁰ = 0.6415). Pick a **primary metric**; apply
|
||||
a **correction** (e.g., Bonferroni) when you must judge many. `[GB]`
|
||||
- 🟢 **Don't "peek."** Repeatedly checking results and stopping when you see
|
||||
significance **inflates the false-positive rate — the more you peek, the worse it
|
||||
gets.** Evan Miller's canonical example: a nominal 1% test can hit ~5%+ actual
|
||||
false-positive rate after ten peeks; worst-case ~26% vs a nominal 5%. Use a
|
||||
**fixed sample size set in advance**, or a proper **sequential testing** method
|
||||
designed for continuous monitoring. `[GB][EM]`
|
||||
|
||||
### 14.3 Methodology checklist (⚪ + 🟢)
|
||||
|
||||
- [ ] **Form a hypothesis** ("Changing X will improve Y because Z"), not a random
|
||||
tweak.
|
||||
- [ ] **Calculate sample size & duration up front** from baseline rate, minimum
|
||||
detectable effect, and power (usually 80%). 🟢 (avoids peeking)
|
||||
- [ ] **Run full business cycles** (≥1–2 weeks; cover weekday/weekend) to avoid
|
||||
day-of-week and novelty effects.
|
||||
- [ ] **One primary metric**; secondary metrics are directional only. 🟢
|
||||
- [ ] **Don't stop early** on a "significant" result; respect the predetermined
|
||||
endpoint. 🟢
|
||||
- [ ] **Ensure adequate traffic** — low-traffic pages can't power reliable tests;
|
||||
prioritize bigger changes or longer runs.
|
||||
- [ ] **Test meaningful changes** (value prop, offer, layout) over trivial ones
|
||||
(button shade) when traffic is scarce — bigger effects need less traffic.
|
||||
- [ ] **Segment** results (device, source, new vs returning) — an aggregate tie can
|
||||
hide a strong segment win/loss.
|
||||
- [ ] **Account for guardrail metrics** (revenue quality, churn, support load), not
|
||||
just the click.
|
||||
|
||||
### 14.4 "Best practices" are hypotheses, not guarantees (⚪)
|
||||
|
||||
Every recommendation in this document is a **prior**, not a verdict. CXL's point
|
||||
stands: copied "best practices" frequently fail because they ignore *your* context,
|
||||
audience, and traffic. `[CXLf]` Use this doc to *generate* tests; let *your* data
|
||||
decide.
|
||||
|
||||
---
|
||||
|
||||
## 15. Personalization & message-to-ad match
|
||||
|
||||
Relevance is conversion fuel — the more the page feels made for *this* visitor and
|
||||
*this* click, the better it converts. (🟢 the scent principle is primary-sourced to
|
||||
NN/g's broader work via CXL; treat specifics as established practice.)
|
||||
|
||||
- **Message match / "maintaining scent."** Keep the **verbal and visual "scent"
|
||||
continuous** from ad → landing page → conversion. The headline should echo the
|
||||
ad's promise and keywords; the imagery and offer should match. Breaking scent
|
||||
(different wording, different offer, generic homepage) spikes bounce and **wastes
|
||||
ad spend.** `[CXLs]`
|
||||
- **Dedicated page per campaign/segment.** Don't send paid traffic to a generic
|
||||
homepage; build a focused page per offer/audience. One ad promise → one matching
|
||||
page.
|
||||
- **Dynamic Text Replacement (DTR).** Swap headline/keywords to mirror the exact
|
||||
search term or ad variant, so every visitor sees their own query reflected back.
|
||||
- **Audience/segment personalization.** Tailor copy, social proof, and imagery by
|
||||
industry, role, geography, device, or funnel stage when you have the data —
|
||||
relevant proof (logos/testimonials *like the visitor*) converts harder.
|
||||
- **Honor intent and temperature.** Cold paid traffic needs more education and trust
|
||||
before the ask; warm email traffic can convert faster (recall the channel data,
|
||||
§2.2 — but it's an intent artifact, not page magic). `[U24]`
|
||||
- **Personalize responsibly.** Respect privacy/consent; don't be creepy. Test that
|
||||
personalization actually lifts conversion — it isn't free of complexity or risk.
|
||||
|
||||
---
|
||||
|
||||
## 16. Common mistakes & anti-patterns
|
||||
|
||||
A consolidated "what kills conversion" list. (⚪ established; ⛔ marks the two
|
||||
specific stats that **failed verification** — don't repeat them.)
|
||||
|
||||
**Strategy & focus**
|
||||
- ❌ **Multiple competing goals / CTAs** — diluted attention, lower conversion.
|
||||
- ❌ **Sending paid traffic to the homepage** instead of a dedicated, message-matched
|
||||
page.
|
||||
- ❌ **Full site navigation** that leaks attention off the conversion path.
|
||||
- ❌ **Treating best practices as laws** and skipping testing. `[CXLf]`
|
||||
|
||||
**Message & copy**
|
||||
- ❌ **Vague or clever-over-clear headline** that doesn't state the value.
|
||||
- ❌ **Message mismatch** between ad and page (broken scent). `[CXLs]`
|
||||
- ❌ **Feature-dumping** with no benefit/translation; "we" language instead of "you."
|
||||
- ❌ **Copy too complex** — higher reading level correlates with lower conversion.
|
||||
🟢`[U24]`
|
||||
- ❌ **Generic CTA copy** ("Get Started"/"Submit") that misleads or under-motivates.
|
||||
🟢`[NNg]`
|
||||
- ❌ **Walls of text** that ignore F-pattern scanning. 🟢`[NNf]`
|
||||
|
||||
**Forms & friction**
|
||||
- ❌ **Too many form fields** / asking for data you don't need yet.
|
||||
- ❌ **Placeholder-as-label**, multi-column forms, vague error messages, form-wipe on
|
||||
error.
|
||||
|
||||
**Trust**
|
||||
- ❌ **No social proof**, or **generic/anonymous** testimonials.
|
||||
- ❌ **Badge spam** that reads as spammy and *lowers* trust.
|
||||
- ❌ **Hidden pricing / unclear terms / no risk reversal.**
|
||||
|
||||
**Visual & type**
|
||||
- ❌ **Weak visual hierarchy** — CTA not dominant; everything shouts equally. 🟢`[NNv]`
|
||||
- ❌ **Low-contrast text**, cramped line length, tiny body type. 🟢`[W3C]`
|
||||
- ❌ **Clichéd stock photos** and decorative images that carry no message.
|
||||
- ❌ **Too many typefaces.**
|
||||
|
||||
**Performance**
|
||||
- ❌ **Lazy-loading the hero/LCP image** — directly harms LCP. 🟢`[WV]`
|
||||
- ❌ **Unoptimized images, heavy third-party scripts, layout shift** from
|
||||
un-dimensioned media/fonts.
|
||||
- ❌ **Ignoring mobile speed** — see the 53%/bounce data. 🟢`[GMS]`
|
||||
|
||||
**Mobile & accessibility**
|
||||
- ❌ **Desktop-first** pages crammed onto phones; tiny tap targets; horizontal scroll.
|
||||
- ❌ **Failing contrast / no keyboard access / missing labels & alt text.** 🟢`[W3C]`
|
||||
|
||||
**Measurement**
|
||||
- ❌ **Peeking and stopping early**; ❌ **judging many metrics with no correction**.
|
||||
🟢`[GB][EM]`
|
||||
- ❌ **Calling tests on tiny samples / partial cycles**; ❌ **no analytics at all.**
|
||||
|
||||
**⛔ Do NOT cite these (failed verification):**
|
||||
- ⛔ "Simpler SaaS copy converts **514% better** (12.9% vs 2.1%)." — refuted.
|
||||
- ⛔ "**1 second faster load → up to 27% more conversions.**" — refuted.
|
||||
|
||||
---
|
||||
|
||||
## 17. Pre-launch QA checklist
|
||||
|
||||
**Message & structure**
|
||||
- [ ] One clear value proposition, above the fold, matching the source ad/email.
|
||||
- [ ] Hero answers What / Why-me / What-next within ~5 seconds.
|
||||
- [ ] Benefits lead; features support; product is *shown*, not just described.
|
||||
- [ ] Social proof present and specific, near each CTA.
|
||||
- [ ] FAQ answers the real objections; risk-reversal stated.
|
||||
- [ ] Copy scannable, ~5th–7th grade reading level. 🟢
|
||||
|
||||
**CTA & forms**
|
||||
- [ ] Primary CTA is specific, visually dominant, repeated; only one primary action.
|
||||
- [ ] Form asks the minimum; single-column; persistent labels; good input types;
|
||||
inline validation; descriptive submit button.
|
||||
|
||||
**Visual & type**
|
||||
- [ ] Clear hierarchy (size/color); restrained palette; CTA accent reserved.
|
||||
- [ ] ≤2–3 typefaces; readable size, line length (~50–75 chars), and line height.
|
||||
|
||||
**Performance** 🟢
|
||||
- [ ] LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1 in **field** data.
|
||||
- [ ] Hero/LCP image eager + preloaded; below-fold lazy-loaded.
|
||||
- [ ] Images responsive/modern/compressed/dimensioned; fonts subset+preloaded;
|
||||
third-parties audited.
|
||||
|
||||
**Mobile & accessibility** 🟢
|
||||
- [ ] Mobile-first layout; tap targets ≥44px; no horizontal scroll; readable without
|
||||
zoom; tested on real device + throttled network.
|
||||
- [ ] WCAG 2.1 AA: contrast ≥4.5:1 / 3:1; keyboard operable; visible focus; labels &
|
||||
alt text; not color-alone; zoom to 200%.
|
||||
|
||||
**SEO**
|
||||
- [ ] Title/meta/H1/URL optimized to intent; content crawlable; canonical set;
|
||||
structured data where relevant.
|
||||
|
||||
**Measurement** 🟢
|
||||
- [ ] Analytics + primary metric live; conversion tracked end-to-end.
|
||||
- [ ] First experiment: hypothesis written, sample size/duration pre-computed, no
|
||||
plan to peek.
|
||||
|
||||
---
|
||||
|
||||
## Sources & evidence grade
|
||||
|
||||
Citation keys used inline. **P** = primary source; **B** = blog/secondary
|
||||
(corroborating). Verified findings were adversarially fact-checked (3-vote
|
||||
majority) in the research pass that produced this doc.
|
||||
|
||||
| Key | Source | Grade | Used for |
|
||||
|-----|--------|-------|----------|
|
||||
| `[U24]` | Unbounce — **2024 Conversion Benchmark Report** (41k pages, 57M+ conversions) — `unbounce.com/conversion-benchmark-report/` (+ `/saas-conversion-rate/`, `/landing-pages/whats-a-good-conversion-rate/`) | P (vendor) | Conversion benchmarks, channel rates, readability |
|
||||
| `[NNg]` | Nielsen Norman Group — *"Get Started" Stops Users* — `nngroup.com/articles/get-started/` | P | CTA copy / information scent |
|
||||
| `[NNf]` | Nielsen Norman Group — *F-Shaped Pattern of Reading* (2006 + 2017 follow-up) — `nngroup.com/articles/f-shaped-pattern-reading-web-content-discovered/` | P | Scanning, front-loading copy |
|
||||
| `[NNv]` | Nielsen Norman Group — *Visual Hierarchy* (video + article) — `nngroup.com/videos/visual-hierarchy/` | P | Hierarchy via color & size |
|
||||
| `[WV]` | Google web.dev — **Core Web Vitals / LCP / INP / CLS** & *LCP & lazy-loading* — `web.dev/articles/vitals`, `/lcp`, `/inp`, `/cls`, `/lcp-lazy-loading` | P | CWV thresholds, eager-load LCP |
|
||||
| `[GMS]` | Google / Think with Google — **Mobile Site Speed Playbook** (data ~2016–17) | P (dated) | 53% abandonment, bounce-vs-load curve |
|
||||
| `[W3C]` | W3C — **WCAG 2.1** (SC 1.4.3, 1.4.11) + WebAIM contrast guide | P | Contrast minimums, AA |
|
||||
| `[GB]` | GrowthBook — *Experimentation Problems* docs | P | Multiple comparisons, peeking |
|
||||
| `[EM]` | Evan Miller — *How Not To Run an A/B Test* | P | Peeking / sequential testing |
|
||||
| `[CXLs]` | CXL — *Maintaining scent for advertising ROI* | B | Message match / scent |
|
||||
| `[CXLf]` | CXL — *Why conversion optimization best practices fail* | B | Best-practices-as-hypotheses |
|
||||
| `[SMt]` | Smashing Magazine — *Best Practices of Combining Typefaces* & typography references | B | Font pairing |
|
||||
| `[LA]` | Level Access — *Responsive design & accessibility* | B | Responsive/accessible overlap |
|
||||
|
||||
Additional corroborating sources reviewed in the research pass: foundrycro,
|
||||
genesysgrowth, seosherpa, landingi, marketingcharts (benchmarks); MDN, DebugBear,
|
||||
GTmetrix, 2025 Web Almanac (LCP/lazy-load); Wikipedia (family-wise error rate),
|
||||
Spotify Engineering, Statsig, analytics-toolkit (experimentation).
|
||||
|
||||
---
|
||||
|
||||
## Caveats, source quality & things that got refuted
|
||||
|
||||
Read this before quoting any number externally.
|
||||
|
||||
1. **Conversion benchmarks are single-vendor (Unbounce) and median-based.** The
|
||||
6.6% median, 3.8% SaaS, 11.4–40.8% "good," 19.3% email channel, and readability
|
||||
figures all come from one platform's own pages. They carry **selection bias** —
|
||||
use them as **directional benchmarks, not universal truth.** `[U24]`
|
||||
2. **Median ≠ "good."** The true cross-industry **median is only 6.6%**; the "good"
|
||||
11.4%+ is the **75th-percentile** threshold. Don't conflate them.
|
||||
3. **Channel ranking is an intent artifact.** Email's 19.3% reflects a **warm,
|
||||
opted-in audience**, not channel superiority. Never benchmark a cold paid page
|
||||
against an email page.
|
||||
4. **Mobile-speed stats are ~9–10 years old (2016–17) and correlational.** The 53%
|
||||
abandonment and 13%→60% bounce curve are still widely cited and directionally
|
||||
right, but are **not fresh and not proven causal.** `[GMS]`
|
||||
5. **Visual hierarchy "primarily color & size" was the one non-unanimous finding
|
||||
(2–1).** Color and size are the *most-emphasized* importance cues, but NN/g's
|
||||
broader framing lists more signals. `[NNv]`
|
||||
6. **Strongest, fully-current claims:** Core Web Vitals thresholds `[WV]` and WCAG
|
||||
contrast minimums `[W3C]` — primary specs from Google and W3C.
|
||||
7. **⛔ Refuted in verification — do not cite:**
|
||||
- "Simpler SaaS copy converts **514% better** (12.9% vs 2.1%)." (1–2 refuted)
|
||||
- "Reducing load time by **1 second increases conversions up to 27%**." (1–2 refuted)
|
||||
8. **Areas marked ⚪ (forms field-counts, trust-signal effect sizes, typography
|
||||
line-length/pairing specifics, framework conversion impact) are established
|
||||
professional practice, not individually fact-checked statistics here.** They are
|
||||
reliable as guidance; verify exact numbers (e.g., via Baymard, CXL, or your own
|
||||
tests) before quoting figures.
|
||||
|
||||
> **Final reminder:** these are strong priors to *generate hypotheses.* The only
|
||||
> authority on your page is a well-run experiment on your own traffic (§14).
|
||||
1163
features/lp/marketing-site-playbook.md
Normal file
1163
features/lp/marketing-site-playbook.md
Normal file
File diff suppressed because it is too large
Load diff
736
features/lp/pcbjam-landing-page-copy-and-visuals.md
Normal file
736
features/lp/pcbjam-landing-page-copy-and-visuals.md
Normal file
|
|
@ -0,0 +1,736 @@
|
|||
# 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.
|
||||
BIN
site/brand/pcbjam-mark-source.png
Normal file
BIN
site/brand/pcbjam-mark-source.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
10
site/package-lock.json
generated
10
site/package-lock.json
generated
|
|
@ -9,6 +9,7 @@
|
|||
"version": "0.0.1",
|
||||
"dependencies": {
|
||||
"@astrojs/vercel": "^10.0.8",
|
||||
"@fontsource/oswald": "^5.2.8",
|
||||
"astro": "^6.4.4",
|
||||
"resend": "^6.12.4"
|
||||
},
|
||||
|
|
@ -638,6 +639,15 @@
|
|||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@fontsource/oswald": {
|
||||
"version": "5.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@fontsource/oswald/-/oswald-5.2.8.tgz",
|
||||
"integrity": "sha512-DFoPK1BqsFIQhVjs2xgO/oL9veF9oUJgFojEWIU+nazUrfqsBDtAMI4n9L9CZFX3kQNDLcCyzKx1xoEDvQT4WQ==",
|
||||
"license": "OFL-1.1",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ayuhito"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/colour": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz",
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@astrojs/vercel": "^10.0.8",
|
||||
"@fontsource/oswald": "^5.2.8",
|
||||
"astro": "^6.4.4",
|
||||
"resend": "^6.12.4"
|
||||
},
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 221 B After Width: | Height: | Size: 32 KiB |
60
site/public/graphics/positioning-quadrant.svg
Normal file
60
site/public/graphics/positioning-quadrant.svg
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 820 600" width="820" height="600" role="img" aria-labelledby="pq-title pq-desc" font-family="system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif">
|
||||
<title id="pq-title">PCB tool positioning map</title>
|
||||
<desc id="pq-desc">A quadrant chart. The horizontal axis runs from desktop-install on the left to browser-native on the right; the vertical axis from proprietary at the bottom to open at the top. LibrePCB and KiCad sit top-left (open but desktop). KiCanvas sits top-right but is viewer-only. Flux and EasyEDA sit bottom-right (browser but proprietary). Altium 365 and OrCAD X sit bottom-left (desktop and proprietary). PCBJam sits alone in the top-right as the only browser-native, open, real-time-multiplayer tool.</desc>
|
||||
|
||||
<!-- panel -->
|
||||
<rect x="8" y="8" width="804" height="584" rx="16" fill="#11182e" stroke="#233052" stroke-width="1"/>
|
||||
|
||||
<!-- top-right "whitespace" tint -->
|
||||
<rect x="410" y="64" width="338" height="232" fill="#4f7cff" fill-opacity="0.09"/>
|
||||
|
||||
<!-- axes -->
|
||||
<g stroke="#34436b" stroke-width="2" fill="#34436b">
|
||||
<line x1="80" y1="296" x2="748" y2="296"/>
|
||||
<line x1="410" y1="64" x2="410" y2="528"/>
|
||||
<polygon points="748,296 734,289 734,303" stroke="none"/>
|
||||
<polygon points="80,296 94,289 94,303" stroke="none"/>
|
||||
<polygon points="410,64 403,78 417,78" stroke="none"/>
|
||||
<polygon points="410,528 403,514 417,514" stroke="none"/>
|
||||
</g>
|
||||
|
||||
<!-- axis labels -->
|
||||
<g fill="#9aa6c0" font-size="14" font-weight="600">
|
||||
<text x="410" y="50" text-anchor="middle">Open & yours</text>
|
||||
<text x="410" y="554" text-anchor="middle">Proprietary, locked-in</text>
|
||||
<text x="92" y="316" text-anchor="start">Desktop install</text>
|
||||
<text x="736" y="316" text-anchor="end">Browser-native</text>
|
||||
</g>
|
||||
|
||||
<!-- competitors -->
|
||||
<g fill="#8794ad">
|
||||
<circle cx="210" cy="150" r="5"/>
|
||||
<circle cx="250" cy="205" r="5"/>
|
||||
<circle cx="540" cy="200" r="5"/>
|
||||
<circle cx="540" cy="372" r="5"/>
|
||||
<circle cx="596" cy="440" r="5"/>
|
||||
<circle cx="210" cy="388" r="5"/>
|
||||
<circle cx="250" cy="448" r="5"/>
|
||||
</g>
|
||||
<g fill="#b4bfd6" font-size="15">
|
||||
<text x="224" y="155">LibrePCB</text>
|
||||
<text x="264" y="210">KiCad</text>
|
||||
<text x="554" y="205">KiCanvas</text>
|
||||
<text x="554" y="377">Flux</text>
|
||||
<text x="610" y="445">EasyEDA</text>
|
||||
<text x="224" y="393">Altium 365</text>
|
||||
<text x="264" y="453">OrCAD X</text>
|
||||
</g>
|
||||
<text x="554" y="222" font-size="11" fill="#6b7796">viewer only</text>
|
||||
|
||||
<!-- PCBJam marker (the only "all three") -->
|
||||
<circle cx="590" cy="120" r="30" fill="#4f7cff" fill-opacity="0.12"/>
|
||||
<text x="590" y="130" text-anchor="middle" font-size="30" fill="#32d583">★</text>
|
||||
<text x="614" y="128" text-anchor="start" font-size="19" font-weight="700" fill="#e7ecf5">PCBJam</text>
|
||||
<rect x="560" y="140" width="170" height="24" rx="12" fill="#32d583" fill-opacity="0.15" stroke="#32d583" stroke-opacity="0.6"/>
|
||||
<text x="645" y="156" text-anchor="middle" font-size="12" fill="#32d583" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace">real-time multiplayer</text>
|
||||
|
||||
<!-- legend -->
|
||||
<text x="34" y="580" font-size="14" fill="#32d583">★</text>
|
||||
<text x="50" y="580" font-size="12" fill="#9aa6c0">= true real-time multiplayer (PCBJam only)</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
|
|
@ -1,11 +1,14 @@
|
|||
---
|
||||
/**
|
||||
* EECredit — the "Built by Emergence Engineering" lockup. The EE wordmark keeps
|
||||
* its own (guest-brand) colors via Icon mode="img".
|
||||
* - variant="footer": wordmark + studio blurb + contact (footer column 3).
|
||||
* - variant="inline": compact wordmark + "Built by" label.
|
||||
* EECredit — the "Built by Emergence Engineering" lockup.
|
||||
* Uses the EE flower mark (keeps its orange) + the "Emergence Engineering"
|
||||
* wordmark set in Oswald (the blog's brand/title font) in a light color, so it
|
||||
* stays visible on the dark footer (the original wordmark SVG's text is near-black).
|
||||
* - variant="footer": lockup + studio blurb + contact (footer column 3).
|
||||
* - variant="inline": compact "Built by" lockup.
|
||||
*/
|
||||
import Icon from './Icon.astro';
|
||||
import '@fontsource/oswald/500.css';
|
||||
|
||||
interface Props {
|
||||
variant?: 'footer' | 'inline';
|
||||
|
|
@ -16,19 +19,33 @@ const { variant = 'footer', class: cls = '' } = Astro.props;
|
|||
|
||||
{
|
||||
variant === 'inline' ? (
|
||||
<a class={`ee-inline ${cls}`} href="/built-by-emergence">
|
||||
<a
|
||||
class={`ee-inline ${cls}`}
|
||||
href="https://emergence-engineering.com"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
<span class="ee-by">Built by</span>
|
||||
<Icon name="ee/ee-logo.svg" mode="img" size="1rem" alt="Emergence Engineering" />
|
||||
<Icon name="ee/ee-mark.svg" mode="img" size="1rem" alt="" />
|
||||
<span class="ee-wordmark">Emergence Engineering</span>
|
||||
</a>
|
||||
) : (
|
||||
<div class={`ee-footer ${cls}`}>
|
||||
<Icon name="ee/ee-logo.svg" mode="img" size="1.5rem" alt="Emergence Engineering" />
|
||||
<span class="ee-lockup">
|
||||
<Icon name="ee/ee-mark.svg" mode="img" size="1.6rem" alt="" />
|
||||
<span class="ee-wordmark">Emergence Engineering</span>
|
||||
</span>
|
||||
<p class="ee-blurb muted">
|
||||
PCBJam is a project by Emergence Engineering, a full-stack software studio. Need
|
||||
something hard built?{' '}
|
||||
<a href="mailto:contact@emergence-engineering.com">contact@emergence-engineering.com</a>
|
||||
</p>
|
||||
<a class="ee-link" href="/built-by-emergence">
|
||||
<a
|
||||
class="ee-link"
|
||||
href="https://emergence-engineering.com"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
About Emergence Engineering →
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -36,10 +53,17 @@ const { variant = 'footer', class: cls = '' } = Astro.props;
|
|||
}
|
||||
|
||||
<style>
|
||||
.ee-wordmark {
|
||||
font-family: 'Oswald', system-ui, sans-serif;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--fg);
|
||||
}
|
||||
.ee-inline {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
gap: 0.4rem;
|
||||
color: var(--fg-muted);
|
||||
}
|
||||
.ee-inline:hover {
|
||||
|
|
@ -55,6 +79,14 @@ const { variant = 'footer', class: cls = '' } = Astro.props;
|
|||
gap: 0.6rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.ee-lockup {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.ee-lockup .ee-wordmark {
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
.ee-blurb {
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ const GITHUB_URL = 'https://github.com/emergence-engineering';
|
|||
<div class="container cols">
|
||||
<div class="col col-brand">
|
||||
<a class="brand" href="/">
|
||||
<img src="/favicon.svg" alt="" width="22" height="22" />
|
||||
<img src="/favicon.svg" alt="" width="18" height="25" />
|
||||
<span>PCBJam</span>
|
||||
</a>
|
||||
<p class="tagline muted">KiCad, in your browser. Now multiplayer.</p>
|
||||
|
|
@ -85,6 +85,10 @@ const GITHUB_URL = 'https://github.com/emergence-engineering';
|
|||
font-weight: 700;
|
||||
color: var(--fg);
|
||||
}
|
||||
.brand img {
|
||||
height: 1.6rem;
|
||||
width: auto;
|
||||
}
|
||||
.tagline {
|
||||
margin: 0.6rem 0 0.9rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,28 +1,27 @@
|
|||
---
|
||||
import Icon from './Icon.astro';
|
||||
|
||||
// TODO(assets): replace favicon "K" + text wordmark with the real PCBJam logo (§4b.1).
|
||||
// TODO(links): add "Roadmap" → /roadmap and repoint How-it-works/Open to their own
|
||||
// pages once the supporting pages ship; for now they anchor to landing sections.
|
||||
// TODO(config): point at the public PCBJam repo when it exists.
|
||||
const GITHUB_URL = 'https://github.com/emergence-engineering';
|
||||
|
||||
const links = [
|
||||
{ href: '/#how-it-works', label: 'How it works' },
|
||||
{ href: '/#open', label: 'Open & yours' },
|
||||
{ href: '/blog', label: 'Blog' },
|
||||
{ href: '/#built-by', label: 'Built by Emergence Engineering' },
|
||||
{
|
||||
href: 'https://emergence-engineering.com',
|
||||
label: 'Built by Emergence Engineering',
|
||||
external: true,
|
||||
},
|
||||
];
|
||||
|
||||
const path = Astro.url.pathname;
|
||||
const isActive = (href: string) =>
|
||||
href.startsWith('/#') ? false : href === '/' ? path === '/' : path.startsWith(href);
|
||||
const isActive = (href: string, external?: boolean) =>
|
||||
external || href.startsWith('/#') ? false : href === '/' ? path === '/' : path.startsWith(href);
|
||||
---
|
||||
|
||||
<header class="site-header" transition:persist>
|
||||
<div class="container bar">
|
||||
<a class="brand" href="/">
|
||||
<img src="/favicon.svg" alt="" width="24" height="24" />
|
||||
<img src="/favicon.svg" alt="" width="20" height="28" />
|
||||
<span class="brand-name">PCBJam</span>
|
||||
<span class="brand-chip">built on KiCad</span>
|
||||
</a>
|
||||
|
|
@ -35,14 +34,16 @@ const isActive = (href: string) =>
|
|||
<nav class="nav" aria-label="Primary">
|
||||
{
|
||||
links.map((l) => (
|
||||
<a href={l.href} aria-current={isActive(l.href) ? 'page' : undefined}>
|
||||
<a
|
||||
href={l.href}
|
||||
aria-current={isActive(l.href, l.external) ? 'page' : undefined}
|
||||
rel={l.external ? 'noopener' : undefined}
|
||||
target={l.external ? '_blank' : undefined}
|
||||
>
|
||||
{l.label}
|
||||
</a>
|
||||
))
|
||||
}
|
||||
<a class="gh" href={GITHUB_URL} rel="noopener" target="_blank">
|
||||
<Icon name="icons/github.svg" size="1rem" alt="GitHub" /> <span>★</span>
|
||||
</a>
|
||||
<a class="btn btn-primary cta-join" href="/#waitlist">Join the waitlist</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
|
@ -72,8 +73,8 @@ const isActive = (href: string) =>
|
|||
gap: 0.5rem;
|
||||
}
|
||||
.brand img {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
height: 1.85rem;
|
||||
width: auto;
|
||||
}
|
||||
.brand-chip {
|
||||
font-family: var(--font-mono);
|
||||
|
|
@ -99,11 +100,6 @@ const isActive = (href: string) =>
|
|||
.nav > a[aria-current='page'] {
|
||||
color: var(--fg);
|
||||
}
|
||||
.gh {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
.cta-join {
|
||||
padding-block: 0.5rem;
|
||||
font-size: 0.95rem;
|
||||
|
|
@ -147,8 +143,7 @@ const isActive = (href: string) =>
|
|||
.nav-toggle:checked ~ .nav {
|
||||
display: flex;
|
||||
}
|
||||
.nav > a,
|
||||
.gh {
|
||||
.nav > a {
|
||||
padding-block: 0.6rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ const {
|
|||
source,
|
||||
id,
|
||||
layout = 'row',
|
||||
microcopy = "Early access rolls out in waves. We'll email you when your seat opens — no spam.",
|
||||
microcopy = 'Get early-access invites and the occasional product update — no spam, unsubscribe anytime.',
|
||||
class: cls = '',
|
||||
} = Astro.props;
|
||||
|
||||
|
|
@ -60,7 +60,7 @@ const hpId = `wl-hp-${source}`;
|
|||
|
||||
<div class="wl-success" hidden data-wl-success>
|
||||
<strong>You're on the list. 🎉</strong>
|
||||
<span class="muted">We'll email you when your early-access seat opens — no spam.</span>
|
||||
<span class="muted">We'll be in touch with product updates and your early-access invite.</span>
|
||||
</div>
|
||||
|
||||
{microcopy && <p class="wl-micro muted">{microcopy}</p>}
|
||||
|
|
|
|||
|
|
@ -79,10 +79,8 @@ export const POST: APIRoute = async ({ request }) => {
|
|||
text: [
|
||||
"You're on the list. 🎉",
|
||||
'',
|
||||
"We'll email you the moment your early-access seat opens. Early access rolls",
|
||||
'out in waves — no spam, just a heads-up when your seat is ready.',
|
||||
'',
|
||||
'In the meantime: star us on GitHub and follow along.',
|
||||
"We'll keep you posted with product updates, and send your early-access invite",
|
||||
'as seats open in waves. No spam — unsubscribe anytime.',
|
||||
'',
|
||||
'— The PCBJam team, built by Emergence Engineering',
|
||||
].join('\n'),
|
||||
|
|
|
|||
|
|
@ -7,11 +7,11 @@ import Icon from '../components/Icon.astro';
|
|||
<div class="ai">
|
||||
<Icon name="icons/ai.svg" mode="img" size="2.5rem" alt="" class="ai-icon" />
|
||||
<div>
|
||||
<h3 id="ai-h3">AI when you want it. Never a paywall, never a black box.</h3>
|
||||
<h3 id="ai-h3">AI when you want it — opt-in, never a black box.</h3>
|
||||
<p class="muted">
|
||||
Everyone else leads with an “AI hardware engineer.” We lead with <em>you</em> and an open
|
||||
tool you control. AI assistance is on the roadmap as an <strong>opt-in</strong> helper —
|
||||
never metered by the token, never the thing standing between you and your own board.
|
||||
never the thing standing between you and your own board.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -44,11 +44,12 @@ const clients = [
|
|||
</div>
|
||||
|
||||
<blockquote class="quote">
|
||||
“For any new product, they’re my go-to dev house. They work fast and to super high quality.”
|
||||
<cite>— Ben Whately</cite>
|
||||
“They are incredibly smart, you can trust them, and they’re great to work with. I cannot
|
||||
recommend them highly enough.”
|
||||
<cite>— Greg Detre, Chief Data Scientist & CTO</cite>
|
||||
</blockquote>
|
||||
|
||||
<a class="btn btn-ghost" href="/built-by-emergence">
|
||||
<a class="btn btn-ghost" href="mailto:contact@emergence-engineering.com">
|
||||
Need something hard built? → Talk to the team
|
||||
</a>
|
||||
</SectionBand>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import WaitlistForm from '../components/WaitlistForm.astro';
|
|||
<WaitlistForm
|
||||
source="final"
|
||||
class="final-form"
|
||||
microcopy="No spam. One email when your seat is ready. Unsubscribe anytime."
|
||||
microcopy="Get early-access invites and product updates. No spam, unsubscribe anytime."
|
||||
/>
|
||||
|
||||
<ul class="final-trust">
|
||||
|
|
|
|||
|
|
@ -8,15 +8,15 @@ import Step from '../components/Step.astro';
|
|||
<h2 id="hiw-h2">From link to layout in three moves.</h2>
|
||||
</div>
|
||||
<div class="steps">
|
||||
<Step n={1} title="Open a board." icon="icons/idea.svg">
|
||||
<Step n={1} title="Open a board.">
|
||||
Paste a link, drag in a <code>.kicad_pcb</code>, or pull from GitHub. It opens in seconds —
|
||||
no install, no account wall to <em>look</em>.
|
||||
</Step>
|
||||
<Step n={2} title="Start a jam." icon="icons/prototype.svg">
|
||||
<Step n={2} title="Start a jam.">
|
||||
Share the URL. Teammates join with live cursors and presence. Everyone sees the same
|
||||
board update in real time.
|
||||
</Step>
|
||||
<Step n={3} title="Design, route & export — together." icon="icons/product.svg">
|
||||
<Step n={3} title="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.
|
||||
</Step>
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
import SectionBand from '../components/SectionBand.astro';
|
||||
|
||||
const row = [
|
||||
{ title: 'Free core', body: 'The full editor and real-time collaboration, free to start.' },
|
||||
{ title: 'Free & local', body: 'The full editor, free. Your files live right in your browser.' },
|
||||
{ title: 'Open format', body: 'Your .kicad_pcb / .kicad_sch, open forever.' },
|
||||
{
|
||||
title: 'Paid for team scale',
|
||||
body: 'Private org workspaces, SSO, compliance, hosted storage.',
|
||||
title: 'Paid: cloud & sync',
|
||||
body: 'Hosted storage, cross-device sync, and shared team workspaces.',
|
||||
},
|
||||
];
|
||||
---
|
||||
|
|
@ -15,16 +15,11 @@ const row = [
|
|||
<div class="section-head">
|
||||
<h3 id="money-h3">Free to start — and the core stays open.</h3>
|
||||
<p class="lead">
|
||||
The full editor and real-time collaboration are <strong>free to start</strong>, 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.
|
||||
<strong>No per-editor toll. No metered AI. No surprises.</strong>
|
||||
</p>
|
||||
{/* TODO(verify): point-in-time competitor pricing — Flux was ~$112–158/editor/mo.
|
||||
Re-verify before stating a hard number publicly (§17, §31.10). */}
|
||||
<p class="contrast muted">
|
||||
Some browser EDA tools charge over $100 per editor, per month. We won’t.
|
||||
The editor and the open file format are <strong>free</strong> — design entirely in your
|
||||
browser, with your files stored locally on your own machine. When you want PCBJam’s
|
||||
<strong>cloud</strong> — hosted storage, sync across your devices, and shared workspaces for
|
||||
your team — that’s the paid part. The open core stays free, and your local files are always
|
||||
yours.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -41,10 +36,6 @@ const row = [
|
|||
</SectionBand>
|
||||
|
||||
<style>
|
||||
.contrast {
|
||||
margin-top: 1rem;
|
||||
font-style: italic;
|
||||
}
|
||||
.money-card p {
|
||||
margin: 0.35rem 0 0;
|
||||
font-size: 0.95rem;
|
||||
|
|
|
|||
|
|
@ -1,23 +1,22 @@
|
|||
---
|
||||
import SectionBand from '../components/SectionBand.astro';
|
||||
import DemoVideo from '../components/DemoVideo.astro';
|
||||
import Icon from '../components/Icon.astro';
|
||||
|
||||
const subpoints = [
|
||||
{
|
||||
icon: 'icons/collab.svg',
|
||||
title: 'Live cursors & presence',
|
||||
body: 'See who’s here and where they’re working.',
|
||||
comingSoon: true,
|
||||
},
|
||||
{
|
||||
icon: 'icons/yjs.svg',
|
||||
title: 'Conflict-free editing',
|
||||
body: 'CRDT sync (Yjs) merges everyone’s edits — no overwrite wars.',
|
||||
body: 'CRDT sync merges everyone’s edits — no overwrite wars.',
|
||||
comingSoon: false,
|
||||
},
|
||||
{
|
||||
icon: 'icons/message.svg',
|
||||
title: 'Pin a comment to a pad',
|
||||
body: 'Review and resolve right on the canvas.',
|
||||
comingSoon: true,
|
||||
},
|
||||
];
|
||||
---
|
||||
|
|
@ -44,11 +43,11 @@ const subpoints = [
|
|||
{
|
||||
subpoints.map((s) => (
|
||||
<li class="subpoint">
|
||||
<Icon name={s.icon} mode="img" size="1.6rem" alt="" />
|
||||
<div>
|
||||
<strong>{s.title}</strong>
|
||||
<p class="muted">{s.body}</p>
|
||||
</div>
|
||||
<strong class="subpoint-title">
|
||||
{s.title}
|
||||
{s.comingSoon && <span class="badge">Coming soon</span>}
|
||||
</strong>
|
||||
<p class="muted">{s.body}</p>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
|
|
@ -68,14 +67,30 @@ const subpoints = [
|
|||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
.subpoint {
|
||||
padding-top: 0.85rem;
|
||||
border-top: 2px solid var(--accent);
|
||||
}
|
||||
.subpoint-title {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.subpoint p {
|
||||
margin: 0.2rem 0 0;
|
||||
margin: 0.3rem 0 0;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.badge {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--signal-400);
|
||||
border: 1px solid color-mix(in srgb, var(--signal-400) 50%, transparent);
|
||||
border-radius: var(--radius-full, 9999px);
|
||||
padding: 0.1rem 0.5rem;
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.subpoints {
|
||||
grid-template-columns: 1fr;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
---
|
||||
import SectionBand from '../components/SectionBand.astro';
|
||||
import Chip from '../components/Chip.astro';
|
||||
import Icon from '../components/Icon.astro';
|
||||
|
||||
const chips = [
|
||||
'Open .kicad_pcb / .kicad_sch',
|
||||
|
|
@ -12,40 +11,28 @@ const chips = [
|
|||
---
|
||||
|
||||
<SectionBand id="open" labelledby="open-h2">
|
||||
<div class="open-grid">
|
||||
<div class="section-head open-copy">
|
||||
<span class="eyebrow">No lock-in. No data hostage.</span>
|
||||
<h2 id="open-h2">Design <em>and</em> collaborate in the browser — without surrendering your files.</h2>
|
||||
<p class="lead">
|
||||
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: <strong>real KiCad format</strong> in and out, <strong>self-host</strong>
|
||||
it on your own server, run it <strong>offline as a PWA</strong>, and it’s
|
||||
<strong>open source</strong>. Collaborate in our cloud when it’s convenient — and walk
|
||||
away with every byte whenever you want.
|
||||
</p>
|
||||
<div class="cluster">
|
||||
{chips.map((c) => <Chip label={c} />)}
|
||||
</div>
|
||||
<p class="reassure muted">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
<div class="open-art" aria-hidden="true">
|
||||
<Icon name="icons/cloud.svg" mode="img" size="5rem" />
|
||||
<Icon name="icons/github.svg" mode="mask" size="3rem" class="open-gh" />
|
||||
<div class="section-head open-copy">
|
||||
<span class="eyebrow">No lock-in. No data hostage.</span>
|
||||
<h2 id="open-h2">Design <em>and</em> collaborate in the browser — without surrendering your files.</h2>
|
||||
<p class="lead">
|
||||
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: <strong>real KiCad format</strong> in and out, <strong>self-host</strong>
|
||||
it on your own server, run it <strong>offline as a PWA</strong>, and it’s
|
||||
<strong>open source</strong>. Collaborate in our cloud when it’s convenient — and walk
|
||||
away with every byte whenever you want.
|
||||
</p>
|
||||
<div class="cluster">
|
||||
{chips.map((c) => <Chip label={c} />)}
|
||||
</div>
|
||||
<p class="reassure muted">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
</SectionBand>
|
||||
|
||||
<style>
|
||||
.open-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.4fr 0.6fr;
|
||||
gap: 2rem;
|
||||
align-items: center;
|
||||
}
|
||||
.open-copy {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
@ -57,19 +44,4 @@ const chips = [
|
|||
font-size: 0.9rem;
|
||||
max-width: 40rem;
|
||||
}
|
||||
.open-art {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
color: var(--accent);
|
||||
}
|
||||
@media (max-width: 820px) {
|
||||
.open-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.open-art {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,15 +8,15 @@ import Pillar from '../components/Pillar.astro';
|
|||
<h2 id="pillars-h2">Three things that set PCBJam apart.</h2>
|
||||
</div>
|
||||
<div class="cards-3">
|
||||
<Pillar title="Runs in a browser tab." icon="icons/responsive.svg" iconMode="img">
|
||||
<Pillar title="Runs in a browser tab.">
|
||||
Zero install, zero toolchain. Mac, Linux, Windows, Chromebook, iPad — if it has a
|
||||
modern browser, it designs PCBs.
|
||||
</Pillar>
|
||||
<Pillar title="Truly multiplayer." icon="icons/collab.svg" iconMode="img">
|
||||
<Pillar title="Truly multiplayer.">
|
||||
Live cursors, presence, and conflict-free co-editing on the same board. Plus
|
||||
pin-to-canvas comments for review.
|
||||
</Pillar>
|
||||
<Pillar title="Open & yours." icon="icons/github.svg" iconMode="mask">
|
||||
<Pillar title="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.
|
||||
</Pillar>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
---
|
||||
import SectionBand from '../components/SectionBand.astro';
|
||||
import Placeholder from '../components/Placeholder.astro';
|
||||
---
|
||||
|
||||
<SectionBand labelledby="pos-h3">
|
||||
|
|
@ -12,10 +11,25 @@ import Placeholder from '../components/Placeholder.astro';
|
|||
<strong>PCBJam is the only one in the middle.</strong>
|
||||
</p>
|
||||
</div>
|
||||
{/* TODO(assets): build the quadrant/Venn graphic on the you-are-here motif (§4b.5). */}
|
||||
<Placeholder
|
||||
label="PRODUCE: positioning quadrant — Browser × Open × Multiplayer (§15)"
|
||||
kind="image"
|
||||
ratio="2 / 1"
|
||||
<img
|
||||
class="pos-map"
|
||||
src="/graphics/positioning-quadrant.svg"
|
||||
width="820"
|
||||
height="600"
|
||||
alt="Positioning map: PCBJam is the only PCB tool that is browser-native, open, and truly real-time multiplayer. Flux and EasyEDA are browser-based but proprietary; KiCanvas is browser and open but viewer-only; LibrePCB and KiCad are open but desktop-only; Altium 365 and OrCAD X are desktop and proprietary."
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
</SectionBand>
|
||||
|
||||
<style>
|
||||
.pos-map {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 46rem;
|
||||
height: auto;
|
||||
margin-inline: auto;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const stats = [
|
|||
{ value: 'Millions', label: 'KiCad users worldwide' },
|
||||
{ value: 'Largest', label: 'open component & footprint library in EDA' },
|
||||
{ value: '100%', label: 'open file format — your .kicad_pcb / .kicad_sch' },
|
||||
{ value: 'Free', label: 'to start — no card, no per-seat toll' },
|
||||
{ value: 'Free', label: 'to start — no credit card' },
|
||||
];
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -225,6 +225,13 @@ main.wide {
|
|||
padding-block: 0;
|
||||
}
|
||||
|
||||
/* Only the hero waitlist form needs an anchor offset for the sticky header —
|
||||
the section anchors (#how-it-works, #open) already clear it via their own
|
||||
top padding, so we don't touch global scroll behavior. */
|
||||
#waitlist {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
/* Visually-hidden but accessible (labels, honeypot). */
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
|
|
|
|||
Loading…
Reference in a new issue