gator/autopcb-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add AutoPCB landing page

Browse source
This commit is contained in:
gator 2026-04-03 17:29:40 +00:00
parent c0cd23093d
commit 4e9191a95c
1 changed files with 634 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

634
index.html Normal file
View file

@ -0,0 +1,634 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AutoPCB — Sentence to Circuit Board</title>
<meta name="description" content="AI-powered PCB design and fabrication. Type what you want to build, get a finished circuit board. No schematic capture, no part libraries, no waiting.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #0A0910;
--bg-card: #12111A;
--bg-card-hover: #1A1926;
--border: #2A2A3A;
--border-active: #58a6ff;
--primary: #58a6ff;
--secondary: #a371f7;
--tertiary: #f0883e;
--success: #3fb950;
--error: #f85149;
--warning: #d29922;
--text: #e0e0e8;
--text-dim: #6e7681;
--text-muted: #484f58;
--copper: #c8a862;
--solder-mask: #1a7a40;
--silk: #e8e8e0;
--grad-start: #58a6ff;
--grad-mid: #a371f7;
--grad-end: #f0883e;
--font-heading: 'Playfair Display', Georgia, serif;
--font-body: 'Inter', -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
}
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
background: var(--bg);
color: var(--text);
line-height: 1.6;
overflow-x: hidden;
}
/* ── Nav ── */
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
padding: 1rem 2rem;
backdrop-filter: blur(20px);
background: rgba(10, 9, 16, 0.8);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-logo {
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 700;
background: linear-gradient(135deg, var(--grad-start), var(--grad-mid), var(--grad-end));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a {
color: var(--text-dim);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
transition: color 0.2s;
}
.nav-links a:hover { color: var(--text); }
/* ── Hero ── */
.hero {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 8rem 2rem 4rem;
position: relative;
}
.hero::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 600px;
border-radius: 50%;
background: radial-gradient(circle, rgba(88,166,255,0.12) 0%, rgba(163,113,247,0.06) 40%, transparent 70%);
filter: blur(60px);
pointer-events: none;
}
.hero h1 {
font-family: var(--font-heading);
font-size: clamp(3rem, 8vw, 6rem);
font-weight: 700;
background: linear-gradient(135deg, var(--grad-start), var(--grad-mid), var(--grad-end));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -2px;
margin-bottom: 1rem;
position: relative;
z-index: 1;
}
.hero .subtitle {
font-size: 1.25rem;
color: var(--text-dim);
letter-spacing: 4px;
text-transform: uppercase;
margin-bottom: 2rem;
position: relative;
z-index: 1;
}
.hero .tagline {
font-size: 1.1rem;
color: var(--text);
max-width: 560px;
margin-bottom: 3rem;
position: relative;
z-index: 1;
}
/* ── Terminal Demo ── */
.terminal {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
max-width: 600px;
width: 100%;
text-align: left;
overflow: hidden;
position: relative;
z-index: 1;
}
.terminal-header {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
}
.terminal-dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.terminal-dot.red { background: var(--error); }
.terminal-dot.yellow { background: var(--warning); }
.terminal-dot.green { background: var(--success); }
.terminal-body {
padding: 1.5rem;
font-family: var(--font-mono);
font-size: 0.9rem;
line-height: 1.8;
}
.terminal-prompt { color: var(--primary); }
.terminal-cmd { color: var(--text); }
.terminal-out { color: var(--text-dim); }
.terminal-success { color: var(--success); }
.terminal-cursor {
display: inline-block;
width: 8px;
height: 16px;
background: var(--primary);
animation: blink 1s step-end infinite;
vertical-align: text-bottom;
margin-left: 2px;
}
@keyframes blink { 50% { opacity: 0; } }
/* ── Sections ── */
section {
padding: 6rem 2rem;
max-width: 1100px;
margin: 0 auto;
}
.section-label {
font-family: var(--font-mono);
font-size: 0.8rem;
color: var(--secondary);
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 0.75rem;
}
.section-title {
font-family: var(--font-heading);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--text);
}
.section-desc {
font-size: 1.05rem;
color: var(--text-dim);
max-width: 640px;
margin-bottom: 3rem;
}
/* ── Pipeline ── */
.pipeline {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
.phase {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 2rem;
transition: border-color 0.3s, background 0.3s;
}
.phase:hover {
border-color: var(--border-active);
background: var(--bg-card-hover);
}
.phase-number {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--primary);
margin-bottom: 0.75rem;
}
.phase-title {
font-size: 1.15rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.phase-desc {
font-size: 0.9rem;
color: var(--text-dim);
line-height: 1.6;
}
/* ── Features grid ── */
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.25rem;
}
.feature {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 10px;
padding: 1.5rem;
transition: border-color 0.3s;
}
.feature:hover { border-color: var(--border-active); }
.feature-icon {
font-size: 1.5rem;
margin-bottom: 0.75rem;
display: block;
}
.feature-title {
font-weight: 600;
margin-bottom: 0.4rem;
}
.feature-desc {
font-size: 0.85rem;
color: var(--text-dim);
}
/* ── Stats ── */
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1.5rem;
margin-bottom: 3rem;
}
.stat {
text-align: center;
padding: 2rem 1rem;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
}
.stat-value {
font-family: var(--font-heading);
font-size: 2.5rem;
font-weight: 700;
background: linear-gradient(135deg, var(--grad-start), var(--grad-mid));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.stat-label {
font-size: 0.85rem;
color: var(--text-dim);
margin-top: 0.5rem;
}
/* ── Use Cases ── */
.use-cases {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.use-case {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 2rem;
}
.use-case-title {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.use-case-desc {
font-size: 0.9rem;
color: var(--text-dim);
}
/* ── CTA ── */
.cta {
text-align: center;
padding: 8rem 2rem;
}
.cta h2 {
font-family: var(--font-heading);
font-size: clamp(2rem, 4vw, 3rem);
margin-bottom: 1rem;
}
.cta p {
color: var(--text-dim);
margin-bottom: 2rem;
font-size: 1.05rem;
}
.btn {
display: inline-block;
padding: 0.8rem 2rem;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
transition: transform 0.2s, box-shadow 0.2s;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(88, 166, 255, 0.3);
}
.btn-primary {
background: linear-gradient(135deg, var(--grad-start), var(--grad-mid));
color: #fff;
}
.btn-secondary {
border: 1px solid var(--border);
color: var(--text);
margin-left: 1rem;
}
.btn-secondary:hover { border-color: var(--primary); }
/* ── Footer ── */
footer {
border-top: 1px solid var(--border);
padding: 2rem;
text-align: center;
color: var(--text-muted);
font-size: 0.85rem;
}
/* ── Circuit trace background decoration ── */
.traces {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
overflow: hidden;
z-index: 0;
}
.traces svg { width: 100%; height: 100%; opacity: 0.04; }
/* ── Responsive ── */
@media (max-width: 768px) {
nav { padding: 0.75rem 1rem; }
.nav-links { display: none; }
section { padding: 4rem 1.25rem; }
.pipeline, .features, .stats, .use-cases {
grid-template-columns: 1fr;
}
.btn-secondary { margin-left: 0; margin-top: 0.75rem; display: inline-block; }
}
</style>
</head>
<body>
<nav>
<div class="nav-logo">AutoPCB</div>
<ul class="nav-links">
<li><a href="#how">How It Works</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#fabrication">Fabrication</a></li>
<li><a href="#use-cases">Use Cases</a></li>
<li><a href="https://github.com/gatordevin/AutoPCB">GitHub</a></li>
</ul>
</nav>
<!-- ── Hero ── -->
<div class="hero">
<div class="traces">
<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="200" x2="1200" y2="200" stroke="#c8a862" stroke-width="2"/>
<line x1="0" y1="350" x2="1200" y2="350" stroke="#c8a862" stroke-width="2"/>
<line x1="0" y1="500" x2="1200" y2="500" stroke="#c8a862" stroke-width="2"/>
<line x1="0" y1="650" x2="1200" y2="650" stroke="#c8a862" stroke-width="2"/>
<circle cx="300" cy="200" r="6" fill="#c8a862"/>
<circle cx="600" cy="350" r="6" fill="#c8a862"/>
<circle cx="900" cy="500" r="6" fill="#c8a862"/>
<circle cx="450" cy="650" r="6" fill="#c8a862"/>
<line x1="300" y1="200" x2="300" y2="350" stroke="#c8a862" stroke-width="2"/>
<line x1="600" y1="350" x2="600" y2="500" stroke="#c8a862" stroke-width="2"/>
<line x1="900" y1="500" x2="900" y2="650" stroke="#c8a862" stroke-width="2"/>
</svg>
</div>
<h1>AutoPCB</h1>
<div class="subtitle">Sentence to Circuit Board</div>
<p class="tagline">
Type what you want to build. AI designs the circuit, selects real components, simulates, routes the board, and fabricates it locally. No schematic capture. No waiting.
</p>
<div class="terminal">
<div class="terminal-header">
<div class="terminal-dot red"></div>
<div class="terminal-dot yellow"></div>
<div class="terminal-dot green"></div>
</div>
<div class="terminal-body">
<div><span class="terminal-prompt">&gt;</span> <span class="terminal-cmd">48V MPPT solar charger with USB-C output</span><span class="terminal-cursor"></span></div>
<br>
<div class="terminal-out">Generating requirements...</div>
<div class="terminal-out">Searching 400,000+ parts from JLCPCB catalog</div>
<div class="terminal-out">Extracting datasheet pin data for 12 components</div>
<div class="terminal-out">Building netlist &mdash; 47 nets, 86 connections</div>
<div class="terminal-out">Simulating DC operating point... <span class="terminal-success">PASS</span></div>
<div class="terminal-out">Design review... <span class="terminal-success">PASS</span></div>
<div class="terminal-out">Placing components via simulated annealing</div>
<div class="terminal-out">Auto-routing 2-layer board... <span class="terminal-success">100% routed</span></div>
<div class="terminal-success">Board ready for fabrication.</div>
</div>
</div>
</div>
<!-- ── How It Works ── -->
<section id="how">
<div class="section-label">Pipeline</div>
<h2 class="section-title">Six Phases, Zero Manual Steps</h2>
<p class="section-desc">
Describe a circuit in plain English. AutoPCB handles requirements, part selection, datasheet extraction, simulation, validation, and layout automatically.
</p>
<div class="pipeline">
<div class="phase">
<div class="phase-number">Phase 1</div>
<div class="phase-title">Requirements Generation</div>
<div class="phase-desc">AI generates detailed functional requirements from your description: operating voltages, signal chains, simulation parameters. Everything an engineer would specify.</div>
</div>
<div class="phase">
<div class="phase-number">Phase 2</div>
<div class="phase-title">Component Selection</div>
<div class="phase-desc">Searches 400,000+ real parts from JLCPCB/LCSC. Checks local inventory first. Selects gating components with decision-tree logic.</div>
</div>
<div class="phase">
<div class="phase-number">Phase 3</div>
<div class="phase-title">Passive & Support</div>
<div class="phase-desc">Adds supporting passives: decoupling caps, biasing resistors, feedback dividers, pull-ups. Every required external component from the datasheet.</div>
</div>
<div class="phase">
<div class="phase-number">Phase 4</div>
<div class="phase-title">Datasheet Extraction</div>
<div class="phase-desc">Reads full datasheets via LLM. Extracts pin data, absolute max ratings, thermal limits, application circuits. Real data, not approximations.</div>
</div>
<div class="phase">
<div class="phase-number">Phase 5</div>
<div class="phase-title">Simulation & Validation</div>
<div class="phase-desc">DC circuit simulator with behavioral models. Structural checks, electrical parameters, polarity. Automatic repair loop, up to 3 iterations.</div>
</div>
<div class="phase">
<div class="phase-number">Phase 6</div>
<div class="phase-title">Layout & Routing</div>
<div class="phase-desc">Simulated annealing placement. Two-layer auto-routing with 45-degree chamfers. Copper pours. Design rule checking. Production-ready output.</div>
</div>
</div>
</section>
<!-- ── Features ── -->
<section id="features">
<div class="section-label">Capabilities</div>
<h2 class="section-title">Built for Real Hardware</h2>
<p class="section-desc">
Not a toy. AutoPCB uses real manufacturer data, real simulation, and real fabrication processes.
</p>
<div class="stats">
<div class="stat">
<div class="stat-value">400K+</div>
<div class="stat-label">Real parts in catalog</div>
</div>
<div class="stat">
<div class="stat-value">20+</div>
<div class="stat-label">Simulation models</div>
</div>
<div class="stat">
<div class="stat-value">2-layer</div>
<div class="stat-label">Auto-routed boards</div>
</div>
<div class="stat">
<div class="stat-value">100+</div>
<div class="stat-label">Designs completed</div>
</div>
</div>
<div class="features">
<div class="feature">
<span class="feature-icon" style="color:var(--primary)">&#9889;</span>
<div class="feature-title">DC Circuit Simulator</div>
<div class="feature-desc">Nodal analysis with behavioral models. MOSFETs, BJTs, op-amps, regulators, gate drivers, LEDs, MCUs with power modes.</div>
</div>
<div class="feature">
<span class="feature-icon" style="color:var(--secondary)">&#128270;</span>
<div class="feature-title">Datasheet Intelligence</div>
<div class="feature-desc">LLM reads full PDF datasheets. Extracts pin maps, absolute max, thermal data, application circuits, and required external components.</div>
</div>
<div class="feature">
<span class="feature-icon" style="color:var(--tertiary)">&#128295;</span>
<div class="feature-title">Auto-Repair Loop</div>
<div class="feature-desc">If simulation or review finds issues, the design is fixed automatically. Up to three repair iterations until everything passes.</div>
</div>
<div class="feature">
<span class="feature-icon" style="color:var(--success)">&#9878;</span>
<div class="feature-title">LLM Design Review</div>
<div class="feature-desc">After simulation passes, an LLM reviews the circuit against all datasheet constraints. Catches missing caps, wrong values, protocol issues.</div>
</div>
<div class="feature">
<span class="feature-icon" style="color:var(--copper)">&#9881;</span>
<div class="feature-title">Simulated Annealing Placement</div>
<div class="feature-desc">Optimal component placement on the board. Power-aware grouping. Minimizes trace lengths and thermal hotspots.</div>
</div>
<div class="feature">
<span class="feature-icon" style="color:var(--primary)">&#128268;</span>
<div class="feature-title">Advanced Auto-Router</div>
<div class="feature-desc">Dijkstra-based pathfinding, not simple grid routing. 45-degree chamfers, copper pours, power-aware trace widths, DRC.</div>
</div>
<div class="feature">
<span class="feature-icon" style="color:var(--warning)">&#128202;</span>
<div class="feature-title">Power Mode Sweeping</div>
<div class="feature-desc">Analyze MCU power budgets across run, sleep, and standby modes. PWM simulation with duty cycle modeling.</div>
</div>
<div class="feature">
<span class="feature-icon" style="color:var(--secondary)">&#128451;</span>
<div class="feature-title">Local Inventory</div>
<div class="feature-desc">Prioritizes parts you already have on hand. Flags what you need to order. No wasted stock.</div>
</div>
</div>
</section>
<!-- ── Fabrication ── -->
<section id="fabrication">
<div class="section-label">End to End</div>
<h2 class="section-title">Design Files to Finished Board</h2>
<p class="section-desc">
AutoPCB doesn't stop at design files. It owns the entire fabrication pipeline. No overseas orders, no two-week lead times, no minimum quantities.
</p>
<div class="pipeline">
<div class="phase">
<div class="phase-number">Step 1</div>
<div class="phase-title">CNC Isolation Routing</div>
<div class="phase-desc">Cuts the board from raw copper clad. Precision traces milled directly on your bench.</div>
</div>
<div class="phase">
<div class="phase-number">Step 2</div>
<div class="phase-title">Solder Paste Dispensing</div>
<div class="phase-desc">Precise paste deposition onto each pad. Automated from the design files.</div>
</div>
<div class="phase">
<div class="phase-number">Step 3</div>
<div class="phase-title">Pick and Place</div>
<div class="phase-desc">Component positioning from local reels. Every part placed exactly where the layout specifies.</div>
</div>
<div class="phase">
<div class="phase-number">Step 4</div>
<div class="phase-title">Reflow Assembly</div>
<div class="phase-desc">Oven locks everything down. One board or a hundred. On your bench. In minutes.</div>
</div>
</div>
</section>
<!-- ── Use Cases ── -->
<section id="use-cases">
<div class="section-label">Who It's For</div>
<h2 class="section-title">From Prototype to Production</h2>
<div class="use-cases">
<div class="use-case">
<div class="use-case-title">Hardware Startups</div>
<div class="use-case-desc">Iterate daily, not monthly. Go from idea to tested board before your next standup. No MOQs, no lead times blocking your sprint.</div>
</div>
<div class="use-case">
<div class="use-case-title">Research Labs</div>
<div class="use-case-desc">One-off experiments without the overhead. Custom sensor boards, test fixtures, instrumentation. Designed and built the same day.</div>
</div>
<div class="use-case">
<div class="use-case-title">Makers & Engineers</div>
<div class="use-case-desc">Skip the schematic capture learning curve. Describe what you need, get a real board. Professional quality, personal scale.</div>
</div>
</div>
</section>
<!-- ── CTA ── -->
<div class="cta">
<h2>From sentence to finished circuit board.</h2>
<p>Designed, fabricated, and assembled. All local. All automated.</p>
<a href="https://github.com/gatordevin/AutoPCB" class="btn btn-primary">View on GitHub</a>
</div>
<footer>
AutoPCB &copy; 2024&ndash;2026
</footer>
</body>
</html>