f9696ac503
Now that demo.pcbjam.com is live, the landing page leads with it instead
of "coming soon":
- Hero: "Open the live demo" is the primary CTA; the coming-soon panel is
replaced by a DemoLaunchCard (screenshot + play overlay, new tab — the
editor needs COOP/COEP so it can never be iframed here); waitlist demoted
to a ghost button under a "Want early access to multiplayer?" lead-in.
- Removed the Gerber demo and positioning-map sections, then restored the
positioning map per review — recolored for light theme and without the
multiplayer badge/legend ("Everyone picks one. We do both.").
- Light theme: flipped the :root ink tokens, darkened accent/signal for
contrast on white; fixed two dark-assumption bugs it exposed (header CTA
text losing to .nav>a specificity, DemoVideo play scrim derived from --bg).
- Copy: positioned around what's live (real KiCad in a tab) with
multiplayer explicitly "coming — join the waitlist"; cut untrue claims
(GitHub import, self-host, offline PWA -> roadmap); cut the jam metaphor
outside the product name; TrustBar fake-stat grid -> plain claims strip;
footer tagline + fallback meta description aligned.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01REwWZGkAz1AZUJw8yqxkCN
140 lines
3.7 KiB
Text
140 lines
3.7 KiB
Text
---
|
|
import WaitlistForm from '../components/WaitlistForm.astro';
|
|
import DemoLaunchCard from '../components/DemoLaunchCard.astro';
|
|
import pcbnew from '../assets/screens/pcbnew.png';
|
|
---
|
|
|
|
<section class="hero bp-grid">
|
|
<div class="container hero-grid">
|
|
<div class="hero-copy">
|
|
<span class="eyebrow">PCBJam · built on KiCad</span>
|
|
<h1>Real KiCad. In your browser. No install.</h1>
|
|
<p class="lead">
|
|
The full KiCad suite, compiled to WebAssembly and running in a tab. Open your own
|
|
board, route, run DRC, spin it in 3D, export Gerbers — the real engine, not a
|
|
re-implementation. Multiplayer co-editing is coming: join the waitlist for early
|
|
access.
|
|
</p>
|
|
|
|
<p class="hero-cta">
|
|
<a
|
|
class="btn btn-primary btn-demo"
|
|
href="https://demo.pcbjam.com"
|
|
target="_blank"
|
|
rel="noopener"
|
|
>
|
|
▶ Open the live demo
|
|
</a>
|
|
<span class="hero-cta-sub">Free · no install, no account</span>
|
|
</p>
|
|
|
|
<p class="hero-wl-lead">Want early access to multiplayer?</p>
|
|
<WaitlistForm
|
|
source="hero"
|
|
id="waitlist"
|
|
class="hero-form"
|
|
microcopy="Collab rolls out in waves — get your invite."
|
|
/>
|
|
|
|
<ul class="hero-trust">
|
|
<li>Open source</li>
|
|
<li>Your files stay in KiCad format</li>
|
|
<li>Runs on Mac, Linux, Chromebook, iPad</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="hero-visual">
|
|
{/* TODO(assets): swap the poster for a hero board still w/ presence cursors
|
|
(§4b.3) or the multiplayer demo loop (§4b.2) once produced. */}
|
|
<DemoLaunchCard
|
|
href="https://demo.pcbjam.com"
|
|
image={pcbnew}
|
|
alt="KiCad Pcbnew editing the pic_programmer demo board in a browser tab — open the live demo"
|
|
sub="Real KiCad in your browser · opens in a new tab"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.hero {
|
|
padding-block: clamp(2.5rem, 6vw, 4.5rem);
|
|
}
|
|
.hero-grid {
|
|
display: grid;
|
|
grid-template-columns: 1.1fr 1fr;
|
|
gap: 2.5rem;
|
|
align-items: center;
|
|
}
|
|
.hero-copy h1 {
|
|
font-size: clamp(2rem, 5vw, 3.25rem);
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
.hero-cta {
|
|
margin: 1.5rem 0 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 0.5rem 1rem;
|
|
}
|
|
.btn-demo {
|
|
padding: 0.85rem 1.6rem;
|
|
font-size: 1.05rem;
|
|
}
|
|
.hero-cta-sub {
|
|
font-size: 0.85rem;
|
|
color: var(--fg-muted);
|
|
}
|
|
.hero-wl-lead {
|
|
margin: 1.75rem 0 0.5rem;
|
|
font-weight: 600;
|
|
font-size: 0.95rem;
|
|
}
|
|
.hero-form {
|
|
max-width: 30rem;
|
|
}
|
|
/* One primary action per hero: the demo button. Demote the waitlist submit
|
|
to ghost weight (it stays full-primary in the final CTA and footer).
|
|
.hero-copy anchors the scope — .hero-form itself sits on the WaitlistForm
|
|
root, which doesn't carry this component's scope attribute. */
|
|
.hero-copy :global(.hero-form .btn-primary) {
|
|
background: transparent;
|
|
border-color: var(--border);
|
|
color: var(--fg);
|
|
}
|
|
.hero-copy :global(.hero-form .btn-primary:hover) {
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
filter: none;
|
|
}
|
|
.hero-trust {
|
|
list-style: none;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem 1.25rem;
|
|
padding: 0;
|
|
margin: 1.5rem 0 0;
|
|
font-size: 0.85rem;
|
|
color: var(--fg-muted);
|
|
}
|
|
.hero-trust li {
|
|
position: relative;
|
|
padding-left: 1rem;
|
|
}
|
|
.hero-trust li::before {
|
|
content: '●';
|
|
position: absolute;
|
|
left: 0;
|
|
color: var(--signal-400);
|
|
font-size: 0.6rem;
|
|
top: 0.25rem;
|
|
}
|
|
@media (max-width: 880px) {
|
|
.hero-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.hero-visual {
|
|
order: -1;
|
|
}
|
|
}
|
|
</style>
|