hero.html

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Chow — You make parts. We handle the office.</title><meta name="description" content="Upload a STEP, get an instant quote. Browser, sandbox, desktop — one key."><meta property="og:title" content="Chow — You make parts. We handle the office."><meta property="og:description" content="Upload a STEP, get an instant quote. Browser, sandbox, desktop — one key."><meta property="og:image" content="og-image.png"><meta name="theme-color" content="#ffffff"><link rel="icon" href="favicon.ico" sizes="48x48"><link rel="icon" href="favicon-32.png" sizes="32x32" type="image/png"><script type="importmap">{"imports":{"motion":"https://cdn.jsdelivr.net/npm/motion@12.23.24/+esm"}}</script><style>:root{--bg:#ffffff;--line:rgba(0,0,0,.06);--text:#0a0a0b;--muted:#6b6f76;--signal:#0e8ea0;--signal-om:#20b8cd;--max:740px;--mono:ui-monospace,Menlo,monospace;--sans:Inter,system-ui,sans-serif}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}a{color:var(--signal);text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:3px}.topbar{position:fixed;top:0;left:0;right:0;height:52px;z-index:20;display:flex;align-items:center;gap:20px;padding:0 22px;background:rgba(255,255,255,.78);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}.glyph{width:28px;height:28px;display:grid;place-items:center;border-radius:7px;font-family:Impact,Arial Black,sans-serif;font-weight:900;font-size:13px;color:#20b8cd;overflow:hidden;background:#08090b}.glyph img{width:28px;height:28px;object-fit:cover;border-radius:7px;display:block}.wordmark{line-height:1}.wordmark b{font-family:"DIN Condensed","Avenir Next Condensed",Impact,sans-serif;font-weight:800;letter-spacing:.14em;font-size:11px;display:block;color:var(--text)}.wordmark b span{color:var(--signal)}.wordmark i{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--muted);display:block;margin-top:3px}.topbar nav{margin-left:auto;display:flex;gap:18px;align-items:center}.nav-link{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-decoration:none}.nav-link:hover{color:var(--text)}.cta-mini{font-family:"DIN Condensed","Avenir Next Condensed",Impact,sans-serif;font-weight:800;letter-spacing:.08em;font-size:11px;padding:9px 16px;border-radius:999px;background:#0a0a0b;color:#fff;text-decoration:none}.wrap{width:min(var(--max),calc(100% - 40px));margin:0 auto;padding:88px 0 56px}.kicker{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}h1{margin:0 0 12px;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(48px,5.2vw,56px);line-height:.88;letter-spacing:-.04em;font-weight:900;color:var(--text);text-wrap:balance;max-width:740px}.sub{max-width:42ch;color:var(--muted);font-size:17px;line-height:1.6;margin:0}.broll{position:relative;width:100vw;margin:32px calc(50% - 50vw) 0;height:48vw;max-height:460px;min-height:260px;overflow:hidden;background:#08090b}.broll video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:.55;display:block}.broll::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.42) 0%,rgba(0,0,0,.14) 44%,rgba(0,0,0,.32) 100%);pointer-events:none}.broll-inner{position:relative;z-index:1;width:min(var(--max),calc(100% - 40px));margin:0 auto;height:100%;display:flex;flex-direction:column;justify-content:center;padding:28px 0}.broll h2{margin:0;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(28px,3.6vw,38px);line-height:.92;letter-spacing:-.02em;font-weight:900;color:#fff;text-wrap:balance}.broll p{max-width:36ch;color:rgba(255,255,255,.72);font-size:13px;line-height:1.6;margin:8px 0 0}@media(max-width:640px){.broll{height:72vw;min-height:300px}}.intro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:16px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fafafa}.intro-grid>div{padding:12px}.intro-grid>div + div{border-left:1px solid var(--line)}@media(max-width:640px){.intro-grid{grid-template-columns:1fr}.intro-grid>div + div{border-left:0;border-top:1px solid var(--line)}}.video{margin:20px 0 0;overflow:hidden;background:transparent}.video video{width:100%;display:block;background:#0a0a0b;aspect-ratio:16/9;object-fit:cover;border-radius:10px}.video figcaption{padding:10px 2px 0;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted);line-height:1.6;border-top:1px solid var(--line);margin-top:12px}.video-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line);pointer-events:none;border-radius:999px;overflow:hidden}.video-progress i{display:block;height:100%;width:var(--p,0%);background:var(--signal);transition:width .12s linear}.actions{margin:20px 0 0;display:flex;flex-wrap:wrap;gap:10px}.btn{appearance:none;border-radius:999px;padding:12px 20px;font-family:"DIN Condensed","Avenir Next Condensed",Impact,sans-serif;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:12px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;line-height:1;border:1px solid transparent}.btn-primary{background:#0a0a0b;color:#fff}.btn-primary:hover{background:#1a1c1e}.btn-secondary{background:#fff;color:#0a0a0b;border-color:var(--line)}.btn-secondary:hover{background:#fafafa}.section{margin:40px 0 0;padding-top:20px;border-top:1px solid var(--line)}.section h2{margin:0 0 6px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-family:"DIN Condensed","Avenir Next Condensed",Impact,sans-serif;color:var(--muted)}.section p.lede{margin:0;color:var(--muted);font-size:13px;line-height:1.6}.steps{margin:18px 0 0;display:grid;gap:0}.step{display:grid;grid-template-columns:28px 1fr;gap:14px;padding:16px 0}.step + .step{border-top:1px solid var(--line)}.n{font-family:var(--mono);font-size:11px;color:var(--muted);padding-top:2px}.step h3{margin:0;font-size:15px;font-weight:600;color:var(--text)}.step p{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.65}.funnels{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:18px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:transparent}@media(max-width:640px){.funnels{grid-template-columns:1fr}}.funnel{padding:14px;background:transparent}.funnels>.funnel + .funnel{border-left:1px solid var(--line)}@media(max-width:640px){.funnels>.funnel + .funnel{border-left:0;border-top:1px solid var(--line)}}.funnel h3{margin:0;font-size:14px;font-weight:600;color:var(--text)}.funnel p{margin:8px 0 14px;color:var(--muted);font-size:13px;line-height:1.6}.funnel a{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--text);display:inline-flex;gap:6px}.funnel a:hover{color:var(--signal);text-decoration:none}.foot{margin-top:36px;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);font-family:var(--mono);font-size:10px;letter-spacing:.08em;line-height:1.6}.reveal{opacity:0;transform:translateY(8px)}.mono-links a{color:var(--muted);text-decoration:none}.mono-links a:hover{color:var(--text);text-decoration:none}@media(prefers-reduced-motion:reduce){.reveal{opacity:1 !important;transform:none !important}}</style></head><body id="top"><header class="topbar"><a class="brand" href="#top"><span class="glyph"><img src="om-app-icon.png" alt="OM" width="28" height="28" onerror="this.style.display='none';this.parentElement.textContent='OM'"></span><span class="wordmark"><b>OPTIMIZED <span>MANUFACTURING</span></b><i>SHOP OS ON SOLARI</i></span></a><nav><a class="nav-link" href="#how">How it works</a><a class="nav-link" href="#start">Start</a><a class="cta cta-mini" href="../onboarding.html?funnel=bring" data-funnel="bring">Start here</a></nav></header><main class="wrap"><div class="kicker reveal">Watch 60 seconds — then try it</div><h1 class="reveal">You make parts.<br>We handle the office.</h1><p class="sub reveal">Same flow whether you have machines or not. 3 steps — 2 minutes.</p><div class="reveal intro-grid"><div><div style="font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted)">01</div><div style="margin-top:6px;font-weight:600;font-size:13px">Name your shop</div><div style="margin-top:4px;color:var(--muted);font-size:12px;line-height:1.5">Type “Acme Precision” → <span style="font-family:var(--mono)">acme-precision.getsolari.app</span></div></div><div><div style="font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted)">02</div><div style="margin-top:6px;font-weight:600;font-size:13px">Paste your Solari key</div><div style="margin-top:4px;color:var(--muted);font-size:12px;line-height:1.5">From <a href="https://console.getsolari.com" target="_blank">console.getsolari.com → API Keys → Create</a> → <span style="font-family:var(--mono)">slr_live_...</span></div></div><div><div style="font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted)">03</div><div style="margin-top:6px;font-weight:600;font-size:13px">Launch</div><div style="margin-top:4px;color:var(--muted);font-size:12px;line-height:1.5">One tap → site live, inbox ready</div></div></div><section class="broll reveal" aria-label="Shop parts in 3D"><video autoplay muted loop playsinline poster="poster.jpg" preload="metadata" aria-hidden="true"><source src="slewing-cine-10s.mp4" type="video/mp4"></video><div class="broll-inner"><h2>Checked against real geometry.</h2><p>If it can't be made, we tell you plainly.</p></div></section><figure class="video reveal" style="position:relative"><video id="heroVideo" controls playsinline poster="poster.jpg" preload="metadata"><source src="demo-60s.mp4" type="video/mp4"><track kind="captions" srclang="en" label="English" src="captions.vtt" default></video><div class="video-progress" aria-hidden="true"><i id="heroProgress"></i></div><figcaption>60 seconds — how it works</figcaption></figure><div class="actions reveal" style="flex-direction:column;align-items:flex-start"><a class="btn btn-primary cta" href="../onboarding.html?funnel=bring" data-funnel="bring" style="font-size:13px;padding:14px 22px">Start here — set up your shop →</a><a class="btn btn-secondary" href="manufacturing.html" style="font-size:13px;padding:14px 22px">Design a part — DFM + quote + CAD →</a><div class="mono-links" style="margin-top:8px;font:10px var(--mono);color:var(--muted)"><a href="setup.html?funnel=bring" data-funnel="bring">setup · bring</a> · <a href="../onboarding.html?funnel=bring" data-funnel="bring">onboarding · bring</a> · <a href="../onboarding.html?funnel=start" data-funnel="start">onboarding · start</a></div></div><section class="section" id="how"><details open><summary style="list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:12px"><span><h2 style="margin:0">How it works</h2><p class="lede">Four steps. Plain words.</p></span><span style="font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted)">tap to hide</span></summary><div class="steps"><div class="step"><div class="n">01</div><div><h3>Claim</h3><p>Type your shop name — see your address.</p></div></div><div class="step"><div class="n">02</div><div><h3>Website</h3><p>Open your shop — your site is live.</p></div></div><div class="step"><div class="n">03</div><div><h3>Quote</h3><p>Upload a part — <a href="manufacturing.html">get a price in minutes →</a></p></div></div><div class="step"><div class="n">04</div><div><h3>Honest answer</h3><p>Get a clear no if it can't be made.</p></div></div></div></details></section><section class="section" id="start"><h2>Choose your path</h2><p class="lede">Same setup. Two starting points.</p><div class="funnels"><div class="funnel"><h3>Bring your shop</h3><p>You have machines — we set up your site and quote inbox.</p><a class="cta" href="../onboarding.html?funnel=bring" data-funnel="bring">Open Bring →</a></div><div class="funnel"><h3>Start your shop</h3><p>No machines yet — pick a part and see if it pays.</p><a class="cta" href="../onboarding.html?funnel=start" data-funnel="start">Open Start →</a></div></div></section><footer class="foot">Shop OS on Solari — one key runs browser, sandbox, desktop.</footer></main><script type="module">const prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; function showAll(){ document.querySelectorAll(".reveal").forEach(el=>{ el.style.opacity="1"; el.style.transform="none"; }); } if (!prefersReduced) { import("motion").then(({animate})=>{ animate(".reveal", { opacity: [0, 1], transform: ["translateY(10px)", "translateY(0px)"] }, { type: "spring", stiffness: 420, damping: 28, mass: 0.9, delay: (i) => i * 0.07 }); }).catch(showAll); setTimeout(()=>{ const anyHidden=[...document.querySelectorAll(".reveal")].some(el=>getComputedStyle(el).opacity==="0"); if(anyHidden) showAll(); }, 900); } else { showAll(); } const heroVideo = document.getElementById("heroVideo"); const bar = document.getElementById("heroProgress"); if (heroVideo && bar) heroVideo.addEventListener("timeupdate", () => { const p = heroVideo.duration ? (heroVideo.currentTime / heroVideo.duration) * 100 : 0; bar.style.setProperty("--p", p.toFixed(2) + "%"); });</script><script>try{ (()=>{try{const q=new URLSearchParams(location.search).get("funnel");if(q==="bring"||q==="start"){document.body.dataset.funnel=q;try{localStorage.setItem("solari-chow.funnel",q)}catch{}}else{try{const s=localStorage.getItem("solari-chow.funnel");if(s)document.body.dataset.funnel=s}catch{}}}catch{}})(); const p=new URLSearchParams(location.search); const q=p.get('funnel')||document.body.dataset.funnel||(()=>{try{return localStorage.getItem("solari-chow.funnel")}catch{return null}})(); document.querySelectorAll('a.cta, a.btn').forEach(a=>{ try{ const href=a.getAttribute('href')||""; const u=new URL(href, location.href); if(u.protocol==='file:' || href==='#' || href==='' ){ const f=a.dataset.funnel||q||'bring'; u.href=new URL('setup.html', location.href).href; u.searchParams.set('funnel', f); a.href=u.toString(); } else if(!u.searchParams.get('funnel')){ const f=a.dataset.funnel||q||(u.pathname.includes('onboarding')?(u.href.includes('start')?'start':'bring'):null); if(f) { u.searchParams.set('funnel', f); a.href=u.toString(); } else if(q){ u.searchParams.set('funnel', q); a.href=u.toString(); } else { const df=a.dataset.funnel; if(df){u.searchParams.set('funnel',df); a.href=u.toString();} } } if(a.dataset.funnel) try{localStorage.setItem("solari-chow.funnel", a.dataset.funnel)}catch{} }catch(e){} }); if(q){ try{localStorage.setItem("solari-chow.funnel", q)}catch{} document.body.dataset.funnel=q; document.querySelectorAll('a.cta').forEach(a=>{ try{const u=new URL(a.href, location.href); if(!u.searchParams.get('funnel')){u.searchParams.set('funnel',q); a.href=u.toString();}}catch{} }); } }catch(e){}</script></body></html>