wehub-resource-sync
070959e133
landing-page-staging / Deploy landing page to staging (push) Has been skipped
landing-page-ci / Validate landing page (push) Failing after 4s
visual-baseline / Capture visual baselines (push) Has been cancelled
bake-plugin-previews / Bake plugin previews (push) Has been cancelled
264 lines
15 KiB
HTML
264 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Pitch a Team Rollout like a Strategic Account Executive - B2B sales</title>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..600;1,9..144,400..600&family=Outfit:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
|
||
|
||
/* ============ tokens: warm editorial launch keynote ============ */
|
||
/* one accent (burnt orange), warm off-white paper, warm off-black ink */
|
||
:root{
|
||
--paper:#f7f3ec;
|
||
--paper-2:#efe9df;
|
||
--ink:#191511;
|
||
--ink-2:#544c44;
|
||
--ink-3:#6e6459;
|
||
--line:rgba(25,21,17,.13);
|
||
--line-strong:rgba(25,21,17,.32);
|
||
--accent:#a63e0c;
|
||
--accent-bright:#d9651f;
|
||
--font-display:'Fraunces',Georgia,serif;
|
||
--font-body:'Outfit',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
|
||
--font-mono:'JetBrains Mono',SFMono-Regular,Menlo,monospace;
|
||
--ease:cubic-bezier(.16,1,.3,1);
|
||
}
|
||
*,*::before,*::after{box-sizing:border-box}
|
||
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);
|
||
font-family:var(--font-body);font-weight:400;line-height:1.55;
|
||
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
|
||
a{color:inherit;text-decoration:none}
|
||
.mono{font-family:var(--font-mono)}
|
||
|
||
/* ============ deck (static preview: slides stacked) ============ */
|
||
.deck{width:100vw}
|
||
.slide{position:relative;width:100vw;height:100vh;overflow:hidden;
|
||
display:flex;flex-direction:column;justify-content:center;
|
||
padding:88px 104px;border-bottom:1px solid var(--line);page-break-after:always}
|
||
|
||
/* shared footer baseline row */
|
||
.base{position:absolute;left:104px;right:104px;bottom:42px;
|
||
display:flex;justify-content:space-between;align-items:baseline;
|
||
font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink-3)}
|
||
|
||
/* ============ type scale ============ */
|
||
.h1{font-family:var(--font-display);font-weight:560;font-variation-settings:'opsz' 110;
|
||
letter-spacing:-.018em;line-height:1.02;font-size:clamp(64px,7.6vw,104px);margin:0}
|
||
.h2{font-family:var(--font-display);font-weight:540;font-variation-settings:'opsz' 90;
|
||
letter-spacing:-.014em;line-height:1.06;font-size:clamp(42px,4.8vw,62px);margin:0 0 10px}
|
||
h4{font-family:var(--font-body);font-weight:600;font-size:20px;line-height:1.3;
|
||
letter-spacing:-.01em;margin:0 0 8px}
|
||
.lede{font-size:20px;line-height:1.55;color:var(--ink-2);font-weight:300;max-width:56ch;margin:0}
|
||
.dim{color:var(--ink-2);font-size:15.5px;line-height:1.6;margin:0;max-width:44ch}
|
||
.kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:.15em;text-transform:uppercase;
|
||
color:var(--accent);font-weight:500;margin:0 0 26px}
|
||
em.ac{font-style:italic;color:var(--accent);font-weight:500}
|
||
.brand{position:absolute;top:50px;left:104px;font-family:var(--font-mono);font-size:13px;
|
||
letter-spacing:.03em;color:var(--ink)}
|
||
|
||
/* ============ entrance motion: transform+opacity only, ease-out, staggered ============ */
|
||
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
|
||
.in{animation:rise .7s var(--ease) both}
|
||
.in:nth-child(2){animation-delay:.06s}
|
||
.in:nth-child(3){animation-delay:.12s}
|
||
.in:nth-child(4){animation-delay:.18s}
|
||
.in:nth-child(5){animation-delay:.24s}
|
||
@media (prefers-reduced-motion:reduce){.in{animation:none}}
|
||
|
||
/* ============ S1 cover ============ */
|
||
.cover{justify-content:flex-end;padding-bottom:148px}
|
||
.cover .kicker{margin-bottom:30px}
|
||
.cover .lede{margin-top:34px}
|
||
.cover .rule{width:72px;height:3px;background:var(--accent);margin:0 0 38px}
|
||
|
||
/* ============ S2 introducing: centered nameplate ============ */
|
||
.intro{align-items:center;text-align:center}
|
||
.intro .h1{font-size:clamp(110px,12.5vw,168px);line-height:1}
|
||
.intro .frame{border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);
|
||
padding:54px 64px 62px}
|
||
.intro .lede{margin:28px auto 0}
|
||
|
||
/* ============ hairline column grids (pillars / community / intelligence) ============ */
|
||
.cols{display:grid;border-top:1px solid var(--line-strong);margin-top:46px}
|
||
.cols.c3{grid-template-columns:repeat(3,1fr)}
|
||
.cols.c2{grid-template-columns:repeat(2,1fr);max-width:980px}
|
||
.col{padding:36px 40px 12px 0}
|
||
.col+.col{border-left:1px solid var(--line);padding-left:40px}
|
||
.col .glyph{display:block;color:var(--accent);font-size:26px;line-height:1;margin-bottom:22px}
|
||
.col .stat{font-family:var(--font-display);font-weight:540;font-variation-settings:'opsz' 80;
|
||
letter-spacing:-.02em;font-size:clamp(40px,3.8vw,54px);line-height:1;margin:0 0 16px}
|
||
|
||
/* ============ S6 how it works: indexed ledger rows ============ */
|
||
.steps{border-top:1px solid var(--line-strong);margin-top:44px;max-width:900px}
|
||
.step{display:grid;grid-template-columns:96px 1fr;gap:36px;padding:28px 0;
|
||
border-bottom:1px solid var(--line);align-items:start}
|
||
.step .n{font-family:var(--font-display);font-style:italic;font-weight:500;
|
||
font-variation-settings:'opsz' 60;font-size:38px;line-height:1;color:var(--accent)}
|
||
|
||
/* ============ S7 pricing: ledger compare ============ */
|
||
.ledger{display:grid;grid-template-columns:1fr 1.15fr 1fr;border-top:1px solid var(--line-strong);
|
||
margin-top:44px;align-items:start}
|
||
.plan{padding:34px 40px 8px 0}
|
||
.plan+.plan{border-left:1px solid var(--line);padding-left:40px}
|
||
.plan .who{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
|
||
color:var(--ink-3);margin:0}
|
||
.plan .amount{font-family:var(--font-display);font-weight:560;font-variation-settings:'opsz' 90;
|
||
letter-spacing:-.025em;line-height:1;font-size:clamp(54px,5.4vw,76px);margin:18px 0 12px}
|
||
.plan ul{list-style:none;padding:0;margin:22px 0 0}
|
||
.plan li{padding:9px 0;font-size:14.5px;color:var(--ink-2);border-top:1px solid var(--line)}
|
||
.plan.od .who,.plan.od .amount{color:var(--accent)}
|
||
.plan.od{position:relative}
|
||
.plan.od::before{content:"";position:absolute;top:-1px;left:0;right:0;height:3px;background:var(--accent)}
|
||
.plan.od li{color:var(--ink)}
|
||
|
||
/* ============ S8 ship: the single inverted slide ============ */
|
||
.ship{background:var(--ink);color:var(--paper);border-bottom:none}
|
||
.ship .kicker{color:var(--accent-bright)}
|
||
.ship .row{display:flex;gap:96px;align-items:center}
|
||
.ship .q{font-family:var(--font-display);font-style:italic;font-weight:480;
|
||
font-variation-settings:'opsz' 80;letter-spacing:-.01em;line-height:1.22;
|
||
font-size:clamp(30px,3.3vw,42px);max-width:26ch;margin:0}
|
||
.ship .attr{margin-top:30px;font-size:15px;color:rgba(247,243,236,.62)}
|
||
.ship .tag{font-family:var(--font-mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;
|
||
color:rgba(247,243,236,.55);margin:0 0 18px}
|
||
.ship .big{font-family:var(--font-display);font-weight:560;font-variation-settings:'opsz' 110;
|
||
letter-spacing:-.025em;line-height:1;font-size:clamp(80px,8vw,118px);color:var(--accent-bright)}
|
||
.ship .cta{display:inline-block;margin-top:40px;background:var(--accent);color:#fff;
|
||
font-family:var(--font-body);font-weight:600;font-size:17px;letter-spacing:-.005em;
|
||
padding:18px 36px;border-radius:4px;transition:transform .25s var(--ease)}
|
||
.ship .cta:hover{transform:translateY(-2px)}
|
||
.ship .fine{font-size:12.5px;color:rgba(247,243,236,.66);margin-top:22px;font-family:var(--font-mono)}
|
||
.ship .base{color:rgba(247,243,236,.52)}
|
||
|
||
@media print{
|
||
.slide{page-break-after:always}
|
||
}
|
||
@media (max-width:768px){
|
||
.slide{padding:56px 28px;height:auto;min-height:100vh}
|
||
.base{left:28px;right:28px}
|
||
.brand{left:28px}
|
||
.cols.c3,.cols.c2,.ledger{grid-template-columns:1fr}
|
||
.col+.col,.plan+.plan{border-left:none;padding-left:0}
|
||
.ship .row{flex-direction:column;gap:48px;align-items:flex-start}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="deck">
|
||
|
||
<!-- 1. Cover / hero -->
|
||
<section class="slide cover" data-title="Cover">
|
||
<div class="brand">◎ Open Design</div>
|
||
<p class="kicker in">Team Rollout Proposal · Northwind Design</p>
|
||
<div class="rule in"></div>
|
||
<h1 class="h1 in">Bring the design team<br>onto open infrastructure.<br><em class="ac">One quarter, one bill.</em></h1>
|
||
<p class="lede in" style="max-width:42ch">A rollout plan for moving Northwind's 14-seat design team off a closed cloud suite onto Open Design — local-first, BYOK, Apache-2.0.</p>
|
||
<div class="base"><span>Prepared for Priya Shah (Design) & Marcus Webb (IT)</span><span>1 / 8</span></div>
|
||
</section>
|
||
|
||
<!-- 2. Introducing -->
|
||
<section class="slide intro" data-title="Introducing">
|
||
<div class="frame in">
|
||
<p class="kicker">The pain</p>
|
||
<h1 class="h1">Locked in.<br>Paying full freight.</h1>
|
||
<p class="lede" style="max-width:56ch">Northwind's design team runs on a closed-cloud AI design suite: one vendor, one model, no self-hosting — and IT still can't sign off because design files never touch our own infrastructure.</p>
|
||
</div>
|
||
<div class="base"><span>Open Design</span><span>2 / 8</span></div>
|
||
</section>
|
||
|
||
<!-- 3. Feature 1 -->
|
||
<section class="slide" data-title="Pillars">
|
||
<p class="kicker in">01 · The current cost</p>
|
||
<h2 class="h2 in">$84,000 a year<br>for a locked platform.</h2>
|
||
<div class="cols c3 in">
|
||
<div class="col"><span class="glyph">▣</span><h4>The seat tax</h4><p class="dim">$500 per seat, per month, across 14 seats — $84,000/yr whether the team ships five prototypes or fifty.</p></div>
|
||
<div class="col"><span class="glyph">◈</span><h4>Vendor lock-in</h4><p class="dim">Locked to one model, one vendor. No agent choice, no negotiating leverage at renewal.</p></div>
|
||
<div class="col"><span class="glyph">◐</span><h4>IT can't approve it</h4><p class="dim">Design files live entirely in the vendor's cloud. Security review has stalled expansion past 14 seats twice this year.</p></div>
|
||
</div>
|
||
<div class="base"><span>Open Design</span><span>3 / 8</span></div>
|
||
</section>
|
||
|
||
<!-- 4. Feature 2 -->
|
||
<section class="slide" data-title="Community">
|
||
<p class="kicker in">02 · The proposed change</p>
|
||
<h2 class="h2 in">Local-first, BYOK,<br>owned outright.</h2>
|
||
<div class="cols c3 in">
|
||
<div class="col"><h4 class="stat">Self-hosted</h4><p class="dim">Runs on each designer's machine. Files stay on Northwind's network, not a vendor's cloud.</p></div>
|
||
<div class="col"><h4 class="stat">Bring your own model</h4><p class="dim">Anthropic, OpenAI, Azure, or Google — Northwind controls spend and vendor risk directly.</p></div>
|
||
<div class="col"><h4 class="stat">Apache-2.0</h4><p class="dim">Fully open source. IT can audit, fork, and self-host — no seat-based contract to renegotiate.</p></div>
|
||
</div>
|
||
<div class="base"><span>Open Design</span><span>4 / 8</span></div>
|
||
</section>
|
||
|
||
<!-- 5. Feature 3 -->
|
||
<section class="slide" data-title="Intelligence">
|
||
<p class="kicker in">03 · The proof</p>
|
||
<h2 class="h2 in">Already trusted<br>at scale.</h2>
|
||
<div class="cols c2 in">
|
||
<div class="col"><span class="glyph">✦</span><h4>60K+ GitHub stars</h4><p class="dim">One of the fastest-growing open-source design platforms, with 300+ contributors shipping in public under Apache-2.0.</p></div>
|
||
<div class="col"><span class="glyph">✧</span><h4>200+ plugins, 129 design systems</h4><p class="dim">A live ecosystem of prototypes, decks, and dashboards — evidence teams actually adopt it, not just install it.</p></div>
|
||
</div>
|
||
<div class="base"><span>Open Design</span><span>5 / 8</span></div>
|
||
</section>
|
||
|
||
<!-- 6. How it works -->
|
||
<section class="slide" data-title="How it works">
|
||
<p class="kicker in">Rollout plan</p>
|
||
<h2 class="h2 in">Four weeks to full adoption.</h2>
|
||
<div class="steps in">
|
||
<div class="step"><div class="n">1</div><div><h4>Week 1 — Pilot with 3 designers</h4><p class="dim" style="max-width:58ch">IT installs locally, connects the existing Anthropic key, and imports Northwind's current brand kit as a design system.</p></div></div>
|
||
<div class="step"><div class="n">2</div><div><h4>Weeks 2–3 — Team onboarding</h4><p class="dim" style="max-width:58ch">The remaining 11 seats onboard. Prior brand assets and design memory carry over; IT reviews local audit logs.</p></div></div>
|
||
<div class="step"><div class="n">3</div><div><h4>Week 4 — Cut over</h4><p class="dim" style="max-width:58ch">Legacy seats are cancelled at the renewal boundary. Northwind owns the toolchain outright, no vendor dependency.</p></div></div>
|
||
</div>
|
||
<div class="base"><span>Open Design</span><span>6 / 8</span></div>
|
||
</section>
|
||
|
||
<!-- 7. Pricing -->
|
||
<section class="slide" data-title="Pricing">
|
||
<p class="kicker in">Commercial ask</p>
|
||
<h2 class="h2 in">Approve the switch<br>at renewal.</h2>
|
||
<div class="ledger in">
|
||
<div class="plan">
|
||
<p class="who">Closed Cloud Suite · today</p>
|
||
<div class="amount">$7,000<span class="mono" style="font-size:16px">/mo</span></div>
|
||
<p class="dim">14 seats × $500. Locked to one model, cloud-only.</p>
|
||
<ul><li>Locked to one vendor</li><li>No self-hosting, no BYOK</li><li>Renews automatically next quarter</li></ul>
|
||
</div>
|
||
<div class="plan od">
|
||
<p class="who">Open Design · BYOK · proposed</p>
|
||
<div class="amount">~$1,020<span class="mono" style="font-size:16px">/mo</span></div>
|
||
<p class="dim">14 seats at ~$73 in model costs — 85% less than today.</p>
|
||
<ul><li>21 coding agents, any model</li><li>Full-stack BYOK, IT-approved</li><li>Runs locally, files stay on our network</li><li>Design memory compounds over time</li></ul>
|
||
</div>
|
||
<div class="plan">
|
||
<p class="who">Self-hosted, forever</p>
|
||
<div class="amount">$0</div>
|
||
<p class="dim">Apache-2.0. The platform itself is free, forever.</p>
|
||
<ul><li>Fork and self-host</li><li>Commercial use allowed</li><li>300+ contributors maintaining it</li></ul>
|
||
</div>
|
||
</div>
|
||
<div class="base"><span>Open Design</span><span>7 / 8</span></div>
|
||
</section>
|
||
|
||
<!-- 8. Testimonial + CTA -->
|
||
<section class="slide ship" data-title="Ship">
|
||
<p class="kicker in">Next step</p>
|
||
<div class="row in">
|
||
<div style="flex:1">
|
||
<p class="q">"We cut our design tooling bill by 83% and finally got IT's yes — because the files never leave our network."</p>
|
||
<p class="attr">— Design Ops Lead, mid-market retail · early adopter</p>
|
||
</div>
|
||
<div style="flex:0 0 auto">
|
||
<p class="tag">Open · Local · Agent-native</p>
|
||
<div class="big">85%</div>
|
||
<a class="cta" href="https://open-design.ai/" target="_blank" rel="noreferrer noopener">Approve the Northwind rollout →</a>
|
||
<p class="fine">Savings vs. today's suite · Pilot starts within 5 business days · github.com/nexu-io/open-design</p>
|
||
</div>
|
||
</div>
|
||
<div class="base"><span>Open Design</span><span>8 / 8</span></div>
|
||
</section>
|
||
|
||
</div>
|
||
|
||
</body></html>
|