返回 html-ppt-skill
index.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
5 <title>Lumen · Pitch Deck</title>
6 <link rel="stylesheet" href="../../../assets/fonts.css">
7 <link rel="stylesheet" href="../../../assets/base.css">
8 <link rel="stylesheet" href="../../../assets/animations/animations.css">
9 <link rel="stylesheet" href="style.css">
10 </head>
11 <body class="tpl-pitch-deck">
12 <div class="deck">
13
14 <!-- 1. Cover -->
15 <section class="slide" data-title="Cover">
16 <div class="cover-bg"></div>
17 <div class="cover-blob"></div>
18 <div style="position:absolute;top:56px;left:112px"><span class="brand-dot"></span><span class="brand">Lumen</span></div>
19 <p class="kicker">Seed round · 2026</p>
20 <h1 class="h1 anim-fade-up" data-anim="fade-up">The operating system<br>for <span class="gradient-text">solo founders</span>.</h1>
21 <p class="lede mt-m">One workspace for billing, CRM, contracts and taxes — built for the 70M people running a business of one.</p>
22 <div class="deck-footer"><span>Maya Chen · CEO</span><span class="slide-number" data-current="1" data-total="10"></span></div>
23 </section>
24
25 <!-- 2. Problem -->
26 <section class="slide" data-title="Problem">
27 <span class="section-num">01</span>
28 <p class="num-tag">PROBLEM</p>
29 <h2 class="h2 mt-s">Solo founders duct-tape<br>7+ tools to stay alive.</h2>
30 <div class="grid g3 mt-l">
31 <div class="card"><h4>Fragmentation</h4><p class="dim">Stripe, QuickBooks, HubSpot, DocuSign, Notion, Gusto, a spreadsheet. Nothing talks.</p></div>
32 <div class="card"><h4>$480/mo wasted</h4><p class="dim">Average solo founder pays for 9 SaaS seats they only half-use.</p></div>
33 <div class="card"><h4>14 hrs / week lost</h4><p class="dim">Copy-pasting between tools instead of selling.</p></div>
34 </div>
35 </section>
36
37 <!-- 3. Solution -->
38 <section class="slide" data-title="Solution">
39 <span class="section-num">02</span>
40 <p class="num-tag">SOLUTION</p>
41 <h2 class="h2 mt-s">Lumen is <span class="gradient-text">one spine</span><br>for the business of one.</h2>
42 <p class="lede mt-m">Invoice a client → the payment lands → the tax is reserved → the contract is filed → your dashboard updates. In one app. Without plumbing.</p>
43 <div class="row mt-l">
44 <span class="pill pill-accent">Billing</span>
45 <span class="pill pill-accent">CRM</span>
46 <span class="pill pill-accent">Contracts</span>
47 <span class="pill pill-accent">Taxes</span>
48 <span class="pill pill-accent">Banking</span>
49 </div>
50 </section>
51
52 <!-- 4. Product -->
53 <section class="slide" data-title="Product">
54 <span class="section-num">03</span>
55 <p class="num-tag">PRODUCT</p>
56 <h2 class="h2 mt-s">Built around "jobs to be done".</h2>
57 <div class="grid g2 mt-l">
58 <div class="card card-hover"><h4>Get paid</h4><p class="dim">Invoices, subscriptions and Stripe/Wise payouts with a single click. ACH, card, wire, crypto.</p></div>
59 <div class="card card-hover"><h4>Stay legal</h4><p class="dim">E-sign contracts from templates. Auto-file 1099s and quarterly estimates.</p></div>
60 <div class="card card-hover"><h4>Sell smarter</h4><p class="dim">Lead inbox, pipeline, email sequences. No separate CRM.</p></div>
61 <div class="card card-hover"><h4>See the business</h4><p class="dim">Live P&amp;L, runway, top customers, churn. One dashboard, zero spreadsheets.</p></div>
62 </div>
63 </section>
64
65 <!-- 5. Market -->
66 <section class="slide" data-title="Market">
67 <span class="section-num">04</span>
68 <p class="num-tag">MARKET</p>
69 <h2 class="h2 mt-s">A very big small business.</h2>
70 <div class="grid g3 mt-l">
71 <div class="metric"><div class="n">73M</div><div class="l">solo businesses in the US + EU</div></div>
72 <div class="metric"><div class="n">$186B</div><div class="l">TAM · horizontal SaaS spend</div></div>
73 <div class="metric"><div class="n">9.4%</div><div class="l">CAGR through 2030</div></div>
74 </div>
75 <p class="lede mt-l">Creators, consultants, indie devs, coaches, freelancers — the fastest-growing segment of the workforce, and the most under-served by tooling.</p>
76 </section>
77
78 <!-- 6. Business model -->
79 <section class="slide" data-title="Business Model">
80 <span class="section-num">05</span>
81 <p class="num-tag">BUSINESS MODEL</p>
82 <h2 class="h2 mt-s">Flat SaaS + payment rake.</h2>
83 <div class="grid g3 mt-l">
84 <div class="card"><h4>Starter</h4><div class="metric mt-s"><div class="n" style="font-size:56px">$29</div><div class="l">/ month · core billing + CRM</div></div></div>
85 <div class="card card-accent"><h4>Pro</h4><div class="metric mt-s"><div class="n" style="font-size:56px">$79</div><div class="l">/ month · contracts, taxes, banking</div></div></div>
86 <div class="card"><h4>+ Payments</h4><div class="metric mt-s"><div class="n" style="font-size:56px">0.4%</div><div class="l">interchange rake on processed volume</div></div></div>
87 </div>
88 <p class="dim mt-l">Blended LTV $1,920 · CAC payback 5 months at current funnel.</p>
89 </section>
90
91 <!-- 7. Traction -->
92 <section class="slide" data-title="Traction">
93 <span class="section-num">06</span>
94 <p class="num-tag">TRACTION</p>
95 <h2 class="h2 mt-s">6 months, growing 38% MoM.</h2>
96 <div class="traction-bar mt-l">
97 <div class="bar" style="height:18%"><em>$6k</em><span>Oct</span></div>
98 <div class="bar" style="height:30%"><em>$11k</em><span>Nov</span></div>
99 <div class="bar" style="height:44%"><em>$17k</em><span>Dec</span></div>
100 <div class="bar" style="height:62%"><em>$26k</em><span>Jan</span></div>
101 <div class="bar" style="height:82%"><em>$38k</em><span>Feb</span></div>
102 <div class="bar" style="height:100%"><em>$54k</em><span>Mar</span></div>
103 </div>
104 <p class="dim mt-l" style="margin-top:48px">2,140 paying customers · NPS 72 · Net retention 118%</p>
105 </section>
106
107 <!-- 8. Team -->
108 <section class="slide" data-title="Team">
109 <span class="section-num">07</span>
110 <p class="num-tag">TEAM</p>
111 <h2 class="h2 mt-s">Shipped at scale before.</h2>
112 <div class="grid g3 mt-l">
113 <div class="card team-card"><div class="avatar">MC</div><h4>Maya Chen</h4><p class="dim">CEO · ex-Stripe billing lead. 8 yrs in payments.</p></div>
114 <div class="card team-card"><div class="avatar">RP</div><h4>Raj Patel</h4><p class="dim">CTO · ex-Linear. Built multiplayer sync at 10M users.</p></div>
115 <div class="card team-card"><div class="avatar">EK</div><h4>Elena Kim</h4><p class="dim">Head of Design · ex-Notion. Shipped the mobile relaunch.</p></div>
116 </div>
117 </section>
118
119 <!-- 9. Ask -->
120 <section class="slide" data-title="The Ask">
121 <p class="num-tag">THE ASK</p>
122 <div class="ask-box mt-m">
123 <h2 class="h2">Raising $4.5M seed.</h2>
124 <p class="lede" style="color:rgba(255,255,255,.9);max-width:60ch">18 months of runway to reach $3M ARR. 40% engineering, 35% growth, 15% compliance/banking licenses, 10% runway buffer.</p>
125 <div class="row mt-l" style="gap:40px">
126 <div><div style="font-size:44px;font-weight:900">$4.5M</div><div class="dim">SAFE · post-money cap $28M</div></div>
127 <div><div style="font-size:44px;font-weight:900">18 mo</div><div class="dim">runway to Series A</div></div>
128 <div><div style="font-size:44px;font-weight:900">$3M</div><div class="dim">ARR target by close</div></div>
129 </div>
130 </div>
131 </section>
132
133 <!-- 10. Thanks -->
134 <section class="slide center tc" data-title="Thanks">
135 <div class="cover-bg"></div>
136 <div>
137 <div class="mega">Thanks.</div>
138 <p class="mega-sub">maya@lumen.app · lumen.app/investors</p>
139 <div class="row mt-l" style="justify-content:center;gap:24px">
140 <span class="pill pill-accent">Let's talk</span>
141 <span class="pill">Deck v4.2 · Apr 2026</span>
142 </div>
143 </div>
144 </section>
145
146 </div>
147 <script src="../../../assets/runtime.js"></script>
148 </body></html>
149
149 lines HTML