Replace the placeholder homepage with the PCBJam waitlist conversion page (13 sections from the copy spec), shared chrome, and a real email-capture backend, keeping the site zero-runtime-JS / zero-web-font. - Tailwind v4 via @tailwindcss/postcss (the Vite plugin breaks on Astro 6 rolldown-vite); Preflight skipped; brand tokens in :root + @theme inline. - Waitlist: /api/waitlist serverless route (prerender=false) + Resend, with dual JSON/303 responses; WaitlistForm progressive enhancement bound on astro:page-load (survives ClientRouter swaps); honeypot + validation. - New components (Icon, Placeholder, DemoVideo, SectionBand, Chip, EECredit, StatBar, Pillar, Step, CheckItem, WaitlistForm) + 13 section components. - Redesigned Header (sticky, mobile menu, CTA) + 4-col Footer (KiCad attribution); BaseLayout gains full-bleed mode + OG/canonical meta. - Assets scaffolded with marked placeholders; EE/generic/client SVGs copied. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
68 lines
1.8 KiB
Text
68 lines
1.8 KiB
Text
---
|
|
import SectionBand from '../components/SectionBand.astro';
|
|
import Chip from '../components/Chip.astro';
|
|
import Icon from '../components/Icon.astro';
|
|
|
|
// TODO(assets): replace name chips with grayscale source logos once usage rights
|
|
// are cleared (§4b.7). Kept text-only for now to avoid trademark/asset issues.
|
|
const sources = ['EAGLE', 'Altium', 'CADSTAR', 'OrCAD'];
|
|
---
|
|
|
|
<SectionBand tone="soft" labelledby="mig-h3">
|
|
<div class="mig">
|
|
<div class="mig-copy">
|
|
<h3 id="mig-h3">Coming from EAGLE, Altium, CADSTAR, or OrCAD?</h3>
|
|
<p class="muted">
|
|
KiCad is where designs are migrating — and PCBJam opens them in a browser tab, free,
|
|
with nothing to install. <em>Bring your board. Invite your team. Pick up where you left
|
|
off.</em>
|
|
</p>
|
|
<a class="btn btn-primary" href="#waitlist">Join the waitlist →</a>
|
|
</div>
|
|
<div class="mig-flow" aria-hidden="true">
|
|
<div class="cluster sources">
|
|
{sources.map((s) => <Chip label={s} />)}
|
|
</div>
|
|
<Icon name="icons/arrow-outward.svg" mode="mask" size="1.5rem" class="mig-arrow" />
|
|
<span class="mig-dest">PCBJam</span>
|
|
</div>
|
|
</div>
|
|
</SectionBand>
|
|
|
|
<style>
|
|
.mig {
|
|
display: grid;
|
|
grid-template-columns: 1.3fr 1fr;
|
|
gap: 2rem;
|
|
align-items: center;
|
|
}
|
|
.mig-copy h3 {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.mig-copy .btn {
|
|
margin-top: 1rem;
|
|
}
|
|
.mig-flow {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
justify-content: flex-end;
|
|
flex-wrap: wrap;
|
|
}
|
|
.mig-arrow {
|
|
color: var(--accent);
|
|
}
|
|
.mig-dest {
|
|
font-weight: 700;
|
|
color: var(--accent);
|
|
font-size: 1.1rem;
|
|
}
|
|
@media (max-width: 820px) {
|
|
.mig {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.mig-flow {
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
</style>
|