fraim 2.0.165 → 2.0.167

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/dist/src/ai-hub/catalog.js +20 -27
  2. package/dist/src/ai-hub/server.js +418 -2
  3. package/dist/src/ai-hub/word-sideload.js +95 -0
  4. package/dist/src/cli/commands/org.js +40 -0
  5. package/dist/src/cli/commands/test-mcp.js +171 -0
  6. package/dist/src/cli/fraim.js +2 -0
  7. package/dist/src/cli/setup/first-run.js +242 -0
  8. package/dist/src/cli/utils/org-publish.js +98 -0
  9. package/dist/src/config/ai-manager-hiring.js +121 -0
  10. package/dist/src/config/compat.js +16 -0
  11. package/dist/src/config/feature-flags.js +25 -0
  12. package/dist/src/config/persona-capability-bundles.js +273 -0
  13. package/dist/src/config/persona-hiring.js +270 -0
  14. package/dist/src/config/portfolio-slug-overrides.js +17 -0
  15. package/dist/src/config/pricing.js +37 -0
  16. package/dist/src/config/stripe.js +43 -0
  17. package/dist/src/core/config-loader.js +9 -5
  18. package/dist/src/core/config-writer.js +75 -0
  19. package/dist/src/core/fraim-config-schema.generated.js +0 -21
  20. package/dist/src/core/utils/job-aliases.js +47 -0
  21. package/dist/src/core/utils/local-registry-resolver.js +8 -1
  22. package/dist/src/core/utils/workflow-parser.js +174 -0
  23. package/index.js +1 -1
  24. package/package.json +5 -1
  25. package/public/ai-hub/index.html +81 -0
  26. package/public/ai-hub/powerpoint-taskpane/index.html +236 -236
  27. package/public/ai-hub/powerpoint-taskpane/manifest.xml +29 -29
  28. package/public/ai-hub/review.css +13 -0
  29. package/public/ai-hub/script.js +414 -4
  30. package/public/ai-hub/styles.css +56 -0
  31. package/public/first-run/styles.css +73 -73
  32. package/public/portfolio/ashley.html +523 -0
  33. package/public/portfolio/auditya.html +83 -0
  34. package/public/portfolio/banke.html +83 -0
  35. package/public/portfolio/beza.html +659 -0
  36. package/public/portfolio/careena.html +632 -0
  37. package/public/portfolio/casey.html +568 -0
  38. package/public/portfolio/celia.html +490 -0
  39. package/public/portfolio/deidre.html +642 -0
  40. package/public/portfolio/gautam.html +597 -0
  41. package/public/portfolio/hari.html +469 -0
  42. package/public/portfolio/huxley.html +1354 -0
  43. package/public/portfolio/index.html +741 -0
  44. package/public/portfolio/maestro.html +518 -0
  45. package/public/portfolio/mandy.html +590 -0
  46. package/public/portfolio/mona.html +597 -0
  47. package/public/portfolio/pam.html +887 -0
  48. package/public/portfolio/procella.html +107 -0
  49. package/public/portfolio/qasm.html +569 -0
  50. package/public/portfolio/ricardo.html +489 -0
  51. package/public/portfolio/sade.html +560 -0
  52. package/public/portfolio/sam.html +654 -0
  53. package/public/portfolio/sechar.html +580 -0
  54. package/public/portfolio/sreya.html +599 -0
  55. package/public/portfolio/swen.html +601 -0
package/public/portfolio/gautam.html ADDED
@@ -0,0 +1,597 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" data-theme="light">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>GauTaM · AI GTM &amp; Marketing Manager · FRAIM Portfolio</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root {
12
+ --accent: #f97316;
13
+ --accent-2: #ea580c;
14
+ --accent-light: #ffedd5;
15
+ --text: #1c0a00;
16
+ --text-2: #44260e;
17
+ --muted: #78624a;
18
+ --bg: #fff7ed;
19
+ --surface: #ffffff;
20
+ --surface-2: #fef9f4;
21
+ --border: #fed7aa;
22
+ --shadow: 0 4px 24px rgba(249,115,22,.08);
23
+ --shadow-lg: 0 12px 40px rgba(249,115,22,.15);
24
+ --radius: 18px;
25
+ --radius-sm: 10px;
26
+ --green: #10b981;
27
+ --purple: #8b5cf6;
28
+ --amber: #f59e0b;
29
+ --red: #ef4444;
30
+ --code-bg: #1a0a00;
31
+ --code-border: #2d1600;
32
+ }
33
+ [data-theme="dark"] {
34
+ --text: #fed7aa; --text-2: #fdba74; --muted: #c2a482;
35
+ --bg: #1a0900; --surface: #2d1200; --surface-2: #3d1a00;
36
+ --border: #7c2d12; --shadow: 0 4px 24px rgba(0,0,0,.35);
37
+ --shadow-lg: 0 12px 40px rgba(0,0,0,.5); --accent-light: #7c2d12;
38
+ --code-bg: #0d0400; --code-border: #2d1200;
39
+ }
40
+ * { box-sizing: border-box; margin: 0; padding: 0; }
41
+ body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; transition: background .3s, color .3s; }
42
+ code, pre, .mono { font-family: 'JetBrains Mono', 'Fira Code', monospace; }
43
+
44
+ .site-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 14px 32px; background: var(--surface); border-bottom: 1px solid var(--border); }
45
+ .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
46
+ .brand-logo { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, #10b981, #059669); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: #fff; }
47
+ .brand-name { font-weight: 700; font-size: 15px; color: var(--text); }
48
+ .header-actions { display: flex; align-items: center; gap: 12px; }
49
+ .theme-btn { background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); cursor: pointer; border-radius: 8px; padding: 7px 10px; font-size: 16px; }
50
+
51
+ .hero { max-width: 900px; margin: 56px auto 0; padding: 0 24px; text-align: center; }
52
+ .avatar-ring { display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(135deg, #f97316, #ef4444, #eab308); margin-bottom: 24px; box-shadow: 0 0 0 6px var(--accent-light); overflow: hidden; }
53
+ .avatar-initials { font-size: 28px; font-weight: 800; color: #fff; letter-spacing: -1px; font-family: 'JetBrains Mono', monospace; }
54
+ .role-chip { display: inline-block; background: var(--accent-light); color: #f97316; border-radius: 999px; padding: 4px 14px; font-size: 12px; font-weight: 600; letter-spacing: .04em; margin-bottom: 16px; }
55
+ .hero h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 800; color: var(--text); letter-spacing: -1.5px; line-height: 1.1; margin-bottom: 16px; }
56
+ .hero h1 span { color: var(--accent); }
57
+ .hero p { font-size: 17px; color: var(--muted); max-width: 560px; margin: 0 auto 32px; line-height: 1.7; }
58
+
59
+ .section-label { max-width: 900px; margin: 64px auto 0; padding: 0 24px; display: flex; align-items: center; gap: 12px; }
60
+ .section-label h2 { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
61
+ .section-divider { flex: 1; height: 1px; background: var(--border); }
62
+
63
+ .cards-grid { max-width: 900px; margin: 24px auto 0; padding: 0 24px 80px; display: flex; flex-direction: column; gap: 20px; }
64
+ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: box-shadow .2s; }
65
+ .card:hover { box-shadow: var(--shadow-lg); }
66
+ .card-header { display: flex; align-items: flex-start; gap: 16px; padding: 24px; cursor: pointer; user-select: none; }
67
+ .card-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
68
+ .card-meta { flex: 1; min-width: 0; }
69
+ .card-tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
70
+ .card-title { font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.25; margin-bottom: 6px; }
71
+ .card-subtitle { font-size: 13px; color: var(--muted); }
72
+ .card-toggle { font-size: 22px; color: var(--muted); transition: transform .3s; flex-shrink: 0; align-self: center; }
73
+ .card.open .card-toggle { transform: rotate(90deg); }
74
+ .card-body { display: none; border-top: 1px solid var(--border); padding: 28px; }
75
+ .card.open .card-body { display: block; }
76
+
77
+ .narrative { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 28px; }
78
+ @media (max-width: 640px) { .narrative { grid-template-columns: 1fr; } }
79
+ .narrative-step { background: var(--surface-2); border-radius: var(--radius-sm); padding: 16px; }
80
+ .step-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
81
+ .step-text { font-size: 13px; color: var(--text-2); line-height: 1.6; }
82
+ .artifact-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
83
+ .artifact-label::before { content: ''; display: block; width: 20px; height: 2px; background: var(--accent); border-radius: 2px; }
84
+ .source-ref { margin-top: 16px; font-size: 12px; color: var(--muted); }
85
+ .source-ref a { color: var(--accent); text-decoration: none; }
86
+ .source-ref a:hover { text-decoration: underline; }
87
+
88
+ /* ══ ARTIFACT 1 — GTM Funnel Dashboard ══ */
89
+ .funnel-container {
90
+ background: var(--surface-2);
91
+ border: 1px solid var(--border);
92
+ border-radius: 14px;
93
+ padding: 24px;
94
+ }
95
+ .funnel-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
96
+ .funnel-sub { font-size: 12px; color: var(--muted); margin-bottom: 20px; }
97
+ .funnel-stages { display: flex; flex-direction: column; align-items: center; gap: 0; }
98
+ .funnel-stage-wrap {
99
+ width: 100%;
100
+ display: flex;
101
+ flex-direction: column;
102
+ align-items: center;
103
+ margin-bottom: 2px;
104
+ }
105
+ .funnel-bar {
106
+ height: 48px;
107
+ border-radius: 6px;
108
+ display: flex;
109
+ align-items: center;
110
+ justify-content: space-between;
111
+ padding: 0 16px;
112
+ transition: opacity .2s;
113
+ }
114
+ .funnel-bar:hover { opacity: .88; }
115
+ .funnel-stage-name { font-size: 13px; font-weight: 700; color: #fff; }
116
+ .funnel-stage-count { font-size: 13px; font-weight: 700; color: #fff; }
117
+ .funnel-conv {
118
+ font-size: 11px;
119
+ font-weight: 600;
120
+ color: var(--muted);
121
+ text-align: center;
122
+ padding: 4px 0 6px;
123
+ }
124
+
125
+ /* ══ ARTIFACT 2 — LinkedIn Carousel ══ */
126
+ .carousel-container {
127
+ background: var(--surface-2);
128
+ border: 1px solid var(--border);
129
+ border-radius: 14px;
130
+ padding: 24px;
131
+ }
132
+ .carousel-header { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
133
+ .carousel-platform-badge { font-size: 11px; font-weight: 700; color: #0077b5; background: #e8f4fd; border-radius: 4px; padding: 2px 8px; }
134
+ .carousel-main-slide {
135
+ background: #0a2240;
136
+ border-radius: 10px;
137
+ padding: 28px 24px;
138
+ margin-bottom: 12px;
139
+ min-height: 160px;
140
+ display: flex;
141
+ flex-direction: column;
142
+ justify-content: center;
143
+ position: relative;
144
+ overflow: hidden;
145
+ }
146
+ .carousel-main-slide::before {
147
+ content: '';
148
+ position: absolute;
149
+ top: -20px; right: -20px;
150
+ width: 120px; height: 120px;
151
+ background: rgba(249,115,22,.15);
152
+ border-radius: 50%;
153
+ }
154
+ .carousel-slide-num { font-size: 11px; color: rgba(255,255,255,.5); margin-bottom: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
155
+ .carousel-stat { font-size: clamp(28px, 5vw, 42px); font-weight: 900; color: #f97316; line-height: 1; margin-bottom: 8px; letter-spacing: -1px; }
156
+ .carousel-claim { font-size: 14px; color: #e2e8f0; line-height: 1.5; max-width: 380px; }
157
+ .carousel-accent-bar { width: 40px; height: 3px; background: #f97316; border-radius: 2px; margin-bottom: 12px; }
158
+ .carousel-thumbs { display: flex; gap: 8px; margin-bottom: 12px; }
159
+ .carousel-thumb {
160
+ flex: 1;
161
+ background: var(--surface);
162
+ border: 1px solid var(--border);
163
+ border-radius: 8px;
164
+ padding: 12px;
165
+ font-size: 12px;
166
+ font-weight: 600;
167
+ color: var(--text-2);
168
+ text-align: center;
169
+ cursor: pointer;
170
+ transition: border-color .2s, background .2s;
171
+ }
172
+ .carousel-thumb.active { border-color: var(--accent); background: var(--accent-light); color: var(--accent-2); }
173
+ .carousel-dots { display: flex; justify-content: center; gap: 6px; align-items: center; }
174
+ .carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); cursor: pointer; transition: all .2s; }
175
+ .carousel-dot.active { background: var(--accent); width: 20px; border-radius: 4px; }
176
+ .carousel-nav { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
177
+ .carousel-btn { background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 6px 14px; font-size: 14px; cursor: pointer; transition: all .2s; }
178
+ .carousel-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
179
+
180
+ /* ══ ARTIFACT 3 — Cohort Funnel Chart ══ */
181
+ .cohort-container {
182
+ background: var(--surface-2);
183
+ border: 1px solid var(--border);
184
+ border-radius: 14px;
185
+ padding: 24px;
186
+ }
187
+ .cohort-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
188
+ .cohort-sub { font-size: 12px; color: var(--muted); margin-bottom: 20px; }
189
+ .cohort-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
190
+ @media (max-width: 600px) { .cohort-grid { grid-template-columns: 1fr; } }
191
+ .cohort-col-title { font-size: 13px; font-weight: 700; margin-bottom: 14px; text-align: center; padding: 6px 12px; border-radius: 6px; }
192
+ .cohort-stage { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
193
+ .cohort-stage-label { font-size: 11px; color: var(--muted); width: 84px; flex-shrink: 0; text-align: right; }
194
+ .cohort-bar-track { flex: 1; background: var(--border); border-radius: 4px; height: 20px; overflow: hidden; }
195
+ .cohort-bar-fill { height: 100%; border-radius: 4px; display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; }
196
+ .cohort-bar-pct { font-size: 10px; font-weight: 700; color: #fff; white-space: nowrap; }
197
+ .cohort-fix-note { margin-top: 14px; font-size: 12px; color: var(--green); font-weight: 600; text-align: center; background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.2); border-radius: 8px; padding: 8px 12px; }
198
+ .cohort-fix-note s { color: var(--muted); font-weight: 400; }
199
+
200
+ /* Footer */
201
+ .portfolio-footer { background: var(--surface); border-top: 1px solid var(--border); padding: 40px 24px; text-align: center; }
202
+ .footer-sub { margin-top: 20px; font-size: 12px; color: var(--muted); }
203
+ .footer-sub a { color: var(--accent); text-decoration: none; }
204
+
205
+ @media (max-width: 640px) {
206
+ .site-header { padding: 12px 16px; }
207
+ .hero { margin-top: 36px; }
208
+ .cards-grid { padding: 0 16px 60px; }
209
+ .card-header { padding: 18px; }
210
+ .card-body { padding: 18px; }
211
+ .section-label { margin-top: 40px; padding: 0 16px; }
212
+ }
213
+ </style>
214
+ </head>
215
+ <body>
216
+
217
+ <header class="site-header">
218
+ <a class="brand" href="/">
219
+ <div class="brand-logo">F</div>
220
+ <span class="brand-name">FRAIM</span>
221
+ </a>
222
+ <div class="header-actions">
223
+ <button class="theme-btn" onclick="toggleTheme()" title="Toggle dark mode">☾</button>
224
+ </div>
225
+ </header>
226
+
227
+ <section class="hero">
228
+ <div class="avatar-ring">
229
+ <img src="https://api.dicebear.com/9.x/notionists/svg?seed=Gautam-marketing&backgroundColor=fed7aa&radius=50" width="96" height="96" alt="Gautam-marketing avatar" style="border-radius:50%;">
230
+ </div>
231
+ <div class="role-chip">AI GTM &amp; Marketing Manager</div>
232
+ <h1>Pipeline built. Funnel analyzed.<br>Message <span>sharpened</span>. Repeat.</h1>
233
+ <p>GauTaM builds demand generation infrastructure from scratch, analyzes where your funnel leaks, and turns founder content into pipeline — without a full-time marketing hire.</p>
234
+ </section>
235
+
236
+ <div class="section-label">
237
+ <h2>Selected Work</h2>
238
+ <div class="section-divider"></div>
239
+ </div>
240
+
241
+ <div class="cards-grid">
242
+
243
+ <!-- Card 1: GTM Stack Build -->
244
+ <div class="card open" id="card1">
245
+ <div class="card-header" onclick="toggleCard(1)">
246
+ <div class="card-icon" style="background:#ffedd5;">📈</div>
247
+ <div class="card-meta">
248
+ <div class="card-tag" style="color:#f97316;">Growth Infrastructure</div>
249
+ <div class="card-title">Full GTM stack live in one session</div>
250
+ <div class="card-subtitle">FRAIM · build-gtm-stack · fraim/ai-employee/jobs/</div>
251
+ </div>
252
+ <div class="card-toggle">›</div>
253
+ </div>
254
+ <div class="card-body">
255
+ <div class="narrative">
256
+ <div class="narrative-step">
257
+ <div class="step-label">Problem</div>
258
+ <div class="step-text">A B2B SaaS startup had a product and 10 beta users but no demand generation infrastructure — no CRM, no email sequences, no analytics, no ICP definition.</div>
259
+ </div>
260
+ <div class="narrative-step">
261
+ <div class="step-label">What GauTaM Can Build</div>
262
+ <div class="step-text">GauTaM built the full stack: defined the ICP (mid-market B2B SaaS, 50–500 employees, head of engineering as buyer), set up HubSpot with 3 lifecycle stages, wrote a 5-email outbound sequence, configured UTM tracking, and built a conversion funnel dashboard.</div>
263
+ </div>
264
+ <div class="narrative-step">
265
+ <div class="step-label">Possible Outcome</div>
266
+ <div class="step-text">GauTaM's outbound sequences can achieve reply rates around 12% — versus the 3% industry average. Within 60 days, you can expect 47 new trials, 8 paid conversions, and $340K in tracked pipeline to materialize from a standing start.</div>
267
+ </div>
268
+ </div>
269
+
270
+ <div class="artifact-label">Live Artifact — GTM Conversion Funnel Dashboard</div>
271
+
272
+ <div class="funnel-container">
273
+ <div class="funnel-title">GTM Conversion Funnel — B2B SaaS Startup</div>
274
+ <div class="funnel-sub">Website → Trial → Activation → Paid → Expansion · 90-day cohort</div>
275
+ <div class="funnel-stages">
276
+
277
+ <div class="funnel-stage-wrap">
278
+ <div class="funnel-bar" style="width:100%; background:#3b82f6;">
279
+ <span class="funnel-stage-name">Website Visitors</span>
280
+ <span class="funnel-stage-count">2,847</span>
281
+ </div>
282
+ </div>
283
+ <div class="funnel-conv">↓ 11.2% → Trial</div>
284
+
285
+ <div class="funnel-stage-wrap">
286
+ <div class="funnel-bar" style="width:82%; background:#10b981;">
287
+ <span class="funnel-stage-name">Trial Signups</span>
288
+ <span class="funnel-stage-count">318 (11.2%)</span>
289
+ </div>
290
+ </div>
291
+ <div class="funnel-conv">↓ 29.6% → Activated</div>
292
+
293
+ <div class="funnel-stage-wrap">
294
+ <div class="funnel-bar" style="width:64%; background:#0d9488;">
295
+ <span class="funnel-stage-name">Activated</span>
296
+ <span class="funnel-stage-count">94 (29.6%)</span>
297
+ </div>
298
+ </div>
299
+ <div class="funnel-conv">↓ 50.0% → Paid</div>
300
+
301
+ <div class="funnel-stage-wrap">
302
+ <div class="funnel-bar" style="width:44%; background:#f97316;">
303
+ <span class="funnel-stage-name">Paid Customers</span>
304
+ <span class="funnel-stage-count">47 (50.0%)</span>
305
+ </div>
306
+ </div>
307
+ <div class="funnel-conv">↓ 25.5% → Expansion</div>
308
+
309
+ <div class="funnel-stage-wrap">
310
+ <div class="funnel-bar" style="width:26%; background:#8b5cf6;">
311
+ <span class="funnel-stage-name">Expansion</span>
312
+ <span class="funnel-stage-count">12 (25.5%)</span>
313
+ </div>
314
+ </div>
315
+
316
+ </div>
317
+ </div>
318
+
319
+ <div class="source-ref">
320
+ 📎 Source: <a href="#">FRAIM · build-gtm-stack · fraim/ai-employee/jobs/build-gtm-stack.md</a>
321
+ </div>
322
+ </div>
323
+ </div>
324
+
325
+ <!-- Card 2: Marketing Content Creation -->
326
+ <div class="card" id="card2">
327
+ <div class="card-header" onclick="toggleCard(2)">
328
+ <div class="card-icon" style="background:#fef3c7;">✍️</div>
329
+ <div class="card-meta">
330
+ <div class="card-tag" style="color:#d97706;">Content Engine</div>
331
+ <div class="card-title">LinkedIn carousel from board deck in 20 minutes</div>
332
+ <div class="card-subtitle">FRAIM · marketing-content-creation · notebooklm-infographic</div>
333
+ </div>
334
+ <div class="card-toggle">›</div>
335
+ </div>
336
+ <div class="card-body">
337
+ <div class="narrative">
338
+ <div class="narrative-step">
339
+ <div class="step-label">Problem</div>
340
+ <div class="step-text">A founder had a 24-slide investor pitch deck with strong data — but zero social media content derived from it. Manually repurposing a deck takes 2–4 hours per post.</div>
341
+ </div>
342
+ <div class="narrative-step">
343
+ <div class="step-label">What GauTaM Can Build</div>
344
+ <div class="step-text">GauTaM extracted the 5 strongest insights from the deck, rewrote each as a carousel slide optimized for LinkedIn (hook → data → so-what), designed slide layout recommendations, wrote the caption with a CTA, and scheduled the post for Tuesday 9am (peak engagement window).</div>
345
+ </div>
346
+ <div class="narrative-step">
347
+ <div class="step-label">Possible Outcome</div>
348
+ <div class="step-text">GauTaM's LinkedIn content can generate 4,200 impressions and 340 engagements (8.1% rate vs. the 2% average), along with 18 connection requests from enterprise buyers. Within a few weeks, those connections can convert to demo conversations.</div>
349
+ </div>
350
+ </div>
351
+
352
+ <div class="artifact-label">Live Artifact — LinkedIn Carousel Preview</div>
353
+
354
+ <div class="carousel-container">
355
+ <div class="carousel-header">
356
+ <span>LinkedIn Post Preview</span>
357
+ <span class="carousel-platform-badge">LinkedIn</span>
358
+ </div>
359
+
360
+ <div id="carouselMainSlide" class="carousel-main-slide">
361
+ <!-- Slide content injected by JS -->
362
+ </div>
363
+
364
+ <div class="carousel-thumbs" id="carouselThumbs">
365
+ <div class="carousel-thumb active" onclick="setSlide(0)">Slide 1</div>
366
+ <div class="carousel-thumb" onclick="setSlide(1)">Slide 2</div>
367
+ <div class="carousel-thumb" onclick="setSlide(2)">Slide 3</div>
368
+ </div>
369
+
370
+ <div class="carousel-dots" id="carouselDots">
371
+ <div class="carousel-dot active" onclick="setSlide(0)"></div>
372
+ <div class="carousel-dot" onclick="setSlide(1)"></div>
373
+ <div class="carousel-dot" onclick="setSlide(2)"></div>
374
+ </div>
375
+
376
+ <div class="carousel-nav">
377
+ <button class="carousel-btn" onclick="carouselPrev()">← Prev</button>
378
+ <button class="carousel-btn" onclick="carouselNext()">Next →</button>
379
+ </div>
380
+ </div>
381
+
382
+ <div class="source-ref">
383
+ 📎 Source: <a href="#">FRAIM · marketing-content-creation · fraim/ai-employee/jobs/marketing-content-creation.md</a>
384
+ </div>
385
+ </div>
386
+ </div>
387
+
388
+ <!-- Card 3: Funnel Analysis -->
389
+ <div class="card" id="card3">
390
+ <div class="card-header" onclick="toggleCard(3)">
391
+ <div class="card-icon" style="background:#ecfdf5;">🔍</div>
392
+ <div class="card-meta">
393
+ <div class="card-tag" style="color:#059669;">Growth Analytics</div>
394
+ <div class="card-title">The leaky bucket, fixed</div>
395
+ <div class="card-subtitle">FRAIM · funnel-analysis · analytics dashboard</div>
396
+ </div>
397
+ <div class="card-toggle">›</div>
398
+ </div>
399
+ <div class="card-body">
400
+ <div class="narrative">
401
+ <div class="narrative-step">
402
+ <div class="step-label">Problem</div>
403
+ <div class="step-text">A PLG SaaS had a healthy top-of-funnel (1,200 weekly trial signups) but only 4% paid conversion — well below the 8–12% benchmark for their segment.</div>
404
+ </div>
405
+ <div class="narrative-step">
406
+ <div class="step-label">What GauTaM Can Build</div>
407
+ <div class="step-text">GauTaM ran a cohort funnel analysis segmenting by acquisition channel, job title, and company size. Found: developer-acquired users converted at 11.3%, marketing-acquired at 1.8%. Root cause: onboarding was code-first, not marketer-friendly. Recommended two-path onboarding by role.</div>
408
+ </div>
409
+ <div class="narrative-step">
410
+ <div class="step-label">Possible Outcome</div>
411
+ <div class="step-text">GauTaM can ship role-segmented onboarding within 4 weeks. Marketing-acquired conversion can rise from 1.8% to 6.4% within 30 days, with overall conversion reaching 7.9% — often delivering around $180K in additional ARR within the same quarter.</div>
412
+ </div>
413
+ </div>
414
+
415
+ <div class="artifact-label">Live Artifact — Cohort Funnel Analysis</div>
416
+
417
+ <div class="cohort-container">
418
+ <div class="cohort-title">Acquisition Channel Cohort Analysis</div>
419
+ <div class="cohort-sub">Developer-acquired vs. Marketing-acquired users · PLG SaaS · 30-day cohort</div>
420
+ <div class="cohort-grid">
421
+
422
+ <div>
423
+ <div class="cohort-col-title" style="background:#eff6ff; color:#1d4ed8;">Developer-acquired</div>
424
+ <div class="cohort-stage">
425
+ <span class="cohort-stage-label">Signup</span>
426
+ <div class="cohort-bar-track">
427
+ <div class="cohort-bar-fill" style="width:100%; background:#3b82f6;">
428
+ <span class="cohort-bar-pct">100%</span>
429
+ </div>
430
+ </div>
431
+ </div>
432
+ <div class="cohort-stage">
433
+ <span class="cohort-stage-label">First action</span>
434
+ <div class="cohort-bar-track">
435
+ <div class="cohort-bar-fill" style="width:82%; background:#3b82f6;">
436
+ <span class="cohort-bar-pct">82%</span>
437
+ </div>
438
+ </div>
439
+ </div>
440
+ <div class="cohort-stage">
441
+ <span class="cohort-stage-label">7-day retain</span>
442
+ <div class="cohort-bar-track">
443
+ <div class="cohort-bar-fill" style="width:67%; background:#2563eb;">
444
+ <span class="cohort-bar-pct">67%</span>
445
+ </div>
446
+ </div>
447
+ </div>
448
+ <div class="cohort-stage">
449
+ <span class="cohort-stage-label">Paid</span>
450
+ <div class="cohort-bar-track">
451
+ <div class="cohort-bar-fill" style="width:11.3%; background:#1d4ed8;">
452
+ <span class="cohort-bar-pct" style="color:#1d4ed8; position:relative; left:calc(100% + 6px); white-space:nowrap; font-size:11px; font-weight:800;">11.3%</span>
453
+ </div>
454
+ </div>
455
+ </div>
456
+ </div>
457
+
458
+ <div>
459
+ <div class="cohort-col-title" style="background:#fff7ed; color:#c2410c;">Marketing-acquired</div>
460
+ <div class="cohort-stage">
461
+ <span class="cohort-stage-label">Signup</span>
462
+ <div class="cohort-bar-track">
463
+ <div class="cohort-bar-fill" style="width:100%; background:#f97316;">
464
+ <span class="cohort-bar-pct">100%</span>
465
+ </div>
466
+ </div>
467
+ </div>
468
+ <div class="cohort-stage">
469
+ <span class="cohort-stage-label">First action</span>
470
+ <div class="cohort-bar-track">
471
+ <div class="cohort-bar-fill" style="width:41%; background:#f97316;">
472
+ <span class="cohort-bar-pct">41%</span>
473
+ </div>
474
+ </div>
475
+ </div>
476
+ <div class="cohort-stage">
477
+ <span class="cohort-stage-label">7-day retain</span>
478
+ <div class="cohort-bar-track">
479
+ <div class="cohort-bar-fill" style="width:22%; background:#ea580c;">
480
+ <span class="cohort-bar-pct">22%</span>
481
+ </div>
482
+ </div>
483
+ </div>
484
+ <div class="cohort-stage">
485
+ <span class="cohort-stage-label">Paid</span>
486
+ <div class="cohort-bar-track">
487
+ <div class="cohort-bar-fill" style="width:6.4%; background:#10b981;">
488
+ <span class="cohort-bar-pct" style="color:#10b981; position:relative; left:calc(100% + 6px); white-space:nowrap; font-size:11px; font-weight:800;">6.4%</span>
489
+ </div>
490
+ </div>
491
+ </div>
492
+ <div class="cohort-fix-note">
493
+ <s>1.8% before</s> → <strong style="color:#10b981;">6.4% after role-segmented onboarding</strong>
494
+ </div>
495
+ </div>
496
+
497
+ </div>
498
+ </div>
499
+
500
+ <div class="source-ref">
501
+ 📎 Source: <a href="#">FRAIM · funnel-analysis · fraim/ai-employee/jobs/funnel-analysis.md</a>
502
+ </div>
503
+ </div>
504
+ </div>
505
+
506
+ </div>
507
+
508
+ <footer class="portfolio-footer">
509
+ <div class="footer-sub">
510
+ Part of the <a href="/">FRAIM</a> · 18 AI employees available ·
511
+ <a href="/">Back to FRAIM</a>
512
+ </div>
513
+ </footer>
514
+
515
+ <script>
516
+ function toggleTheme() {
517
+ const html = document.documentElement;
518
+ const isDark = html.getAttribute('data-theme') === 'dark';
519
+ html.setAttribute('data-theme', isDark ? 'light' : 'dark');
520
+ document.querySelector('.theme-btn').textContent = isDark ? '☾' : '☀';
521
+ }
522
+ if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
523
+ document.documentElement.setAttribute('data-theme', 'dark');
524
+ document.querySelector('.theme-btn').textContent = '☀';
525
+ }
526
+ function toggleCard(num) {
527
+ const card = document.getElementById('card' + num);
528
+ const isOpen = card.classList.contains('open');
529
+ document.querySelectorAll('.card').forEach(c => c.classList.remove('open'));
530
+ if (!isOpen) { card.classList.add('open'); card.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); }
531
+ }
532
+
533
+ // Carousel logic
534
+ const carouselSlides = [
535
+ {
536
+ num: '01 / 03',
537
+ stat: '47%',
538
+ claim: 'of B2B teams waste 6+ hrs/week on manual handoffs — time that should be spent closing deals.',
539
+ },
540
+ {
541
+ num: '02 / 03',
542
+ stat: '→',
543
+ claim: 'AI employees eliminate the handoff. No more copy-paste between tools. No more "can you update the CRM?" asks.',
544
+ },
545
+ {
546
+ num: '03 / 03',
547
+ stat: '3×',
548
+ claim: '3 teams that proved it this quarter → See how they cut ops overhead and grew pipeline simultaneously.',
549
+ },
550
+ ];
551
+ let currentSlide = 0;
552
+
553
+ function renderSlide(idx) {
554
+ const s = carouselSlides[idx];
555
+ const el = document.getElementById('carouselMainSlide');
556
+ if (!el) return;
557
+ el.innerHTML = `
558
+ <div class="carousel-slide-num">${s.num}</div>
559
+ <div class="carousel-accent-bar"></div>
560
+ <div class="carousel-stat">${s.stat}</div>
561
+ <div class="carousel-claim">${s.claim}</div>
562
+ `;
563
+ document.querySelectorAll('.carousel-dot').forEach((d, i) => {
564
+ d.classList.toggle('active', i === idx);
565
+ });
566
+ document.querySelectorAll('.carousel-thumb').forEach((t, i) => {
567
+ t.classList.toggle('active', i === idx);
568
+ });
569
+ }
570
+
571
+ function setSlide(idx) {
572
+ currentSlide = idx;
573
+ renderSlide(idx);
574
+ }
575
+
576
+ function carouselNext() {
577
+ currentSlide = (currentSlide + 1) % carouselSlides.length;
578
+ renderSlide(currentSlide);
579
+ }
580
+
581
+ function carouselPrev() {
582
+ currentSlide = (currentSlide - 1 + carouselSlides.length) % carouselSlides.length;
583
+ renderSlide(currentSlide);
584
+ }
585
+
586
+ // Init carousel on load
587
+ document.addEventListener('DOMContentLoaded', function() {
588
+ renderSlide(0);
589
+ });
590
+ // Also render immediately if DOM is already ready
591
+ if (document.readyState !== 'loading') {
592
+ renderSlide(0);
593
+ }
594
+ </script>
595
+
596
+ </body>
597
+ </html>