pcbjam/site/src/sections/MigrationStrip.astro
Viktor Vaczi 7f9dbdd068 feat(site): 🛬 PCBJam landing page — waitlist, sections, Tailwind
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>
2026-06-07 14:59:13 +02:00

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>