@mevdragon/vidfarm-devcli 0.16.0 → 0.18.0

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 (38) hide show
  1. package/.agents/skills/farmville-saas-ux/SKILL.md +156 -0
  2. package/.agents/skills/farmville-saas-ux/assets/starter.html +294 -0
  3. package/.agents/skills/farmville-saas-ux/references/components.md +340 -0
  4. package/.agents/skills/farmville-saas-ux/references/porting-guide.md +121 -0
  5. package/.agents/skills/farmville-saas-ux/references/tokens.md +271 -0
  6. package/.agents/skills/vidfarm-media/SKILL.md +4 -3
  7. package/.agents/skills/vidfarm-media/references/tts.md +20 -1
  8. package/SKILL.director.md +20 -20
  9. package/SKILL.platform.md +4 -4
  10. package/dist/src/account-pages-legacy.js +2 -2
  11. package/dist/src/app.js +721 -101
  12. package/dist/src/cli.js +11 -10
  13. package/dist/src/devcli/clips.js +64 -64
  14. package/dist/src/editor-chat.js +2 -2
  15. package/dist/src/frontend/homepage-client.js +162 -2
  16. package/dist/src/frontend/homepage-store.js +30 -1
  17. package/dist/src/frontend/homepage-view.js +111 -4
  18. package/dist/src/homepage.js +184 -1
  19. package/dist/src/landing-page.js +367 -0
  20. package/dist/src/primitive-registry.js +278 -2
  21. package/dist/src/reskin/agency-page.js +299 -0
  22. package/dist/src/reskin/calendar-page.js +567 -0
  23. package/dist/src/reskin/chat-page.js +607 -0
  24. package/dist/src/reskin/discover-page.js +1096 -0
  25. package/dist/src/reskin/document.js +663 -0
  26. package/dist/src/reskin/help-page.js +356 -0
  27. package/dist/src/reskin/index-page.js +62 -0
  28. package/dist/src/reskin/inpaint-page.js +541 -0
  29. package/dist/src/reskin/job-runs-page.js +477 -0
  30. package/dist/src/reskin/library-page.js +688 -0
  31. package/dist/src/reskin/login-page.js +262 -0
  32. package/dist/src/reskin/pricing-page.js +388 -0
  33. package/dist/src/reskin/settings-page.js +687 -0
  34. package/dist/src/reskin/theme.js +362 -0
  35. package/dist/src/services/serverless-records.js +54 -0
  36. package/dist/src/services/swipe-customize.js +434 -0
  37. package/package.json +1 -1
  38. package/public/assets/homepage-client-app.js +22 -22
package/dist/src/landing-page.js ADDED
@@ -0,0 +1,367 @@
1
+ // Standalone marketing landing page for vidfarm.cc (the root "/").
2
+ //
3
+ // This is a deliberately SELF-CONTAINED test page: its own <style> block, its
4
+ // own copy-pasted design tokens, no shared page shell or React runtime. It
5
+ // exists to trial the "farmville-saas-ux" design system (warm, sunny, storybook
6
+ // SaaS distilled from Fillout.com) against the real Vidfarm product without
7
+ // touching /discover, /editor, or any of the app surfaces.
8
+ //
9
+ // If we like it, it graduates into the real homepage shell. Until then keep it
10
+ // isolated — do not import app state or components here.
11
+ // Real Vidfarm routes the CTAs point at:
12
+ // /discover → the template feed (the "studio" entry point)
13
+ // /library → the signed-in director's own projects
14
+ // /chat → the brainstorm / AI chat
15
+ // /clips → the clip library
16
+ // /login → sign in
17
+ const HREF = {
18
+ studio: "/discover",
19
+ library: "/library",
20
+ chat: "/chat",
21
+ clips: "/clips",
22
+ login: "/login"
23
+ };
24
+ export function renderLandingPage(input) {
25
+ const primaryCta = input.isLoggedIn
26
+ ? { label: "Open the studio", href: HREF.studio }
27
+ : { label: "Get started", href: HREF.studio };
28
+ const quietNav = input.isLoggedIn
29
+ ? `<a class="link-quiet" href="${HREF.library}">Library</a>`
30
+ : `<a class="link-quiet" href="${HREF.login}">Log in</a>`;
31
+ return `<!doctype html>
32
+ <html lang="en">
33
+ <head>
34
+ <meta charset="utf-8">
35
+ <meta name="viewport" content="width=device-width, initial-scale=1">
36
+ <title>Vidfarm — short-form video that makes itself</title>
37
+ <meta name="description" content="Fork a proven short-form template, remix it on the timeline, and render a share-ready MP4 — all in your browser. Vidfarm is the serverless video studio that scales to zero.">
38
+ <link rel="preconnect" href="https://fonts.googleapis.com">
39
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
40
+ <link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
41
+ <style>
42
+ :root{
43
+ --font-display:"Hanken Grotesk","blMelody",ui-sans-serif,system-ui,sans-serif;
44
+ --font-body:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
45
+ /* honey gold — the one joy accent */
46
+ --gold-500:#ffc738;--gold-600:#f6c744;--gold-700:#fcb900;--gold-tint:#fff5e4;--gold-tint2:#ffe9cc;
47
+ /* ink + neutral scale */
48
+ --ink:#171717;--n-800:#262626;--n-700:#404040;--n-600:#525252;--n-500:#737373;--n-400:#a3a3a3;
49
+ --n-300:#d4d4d4;--n-200:#ededed;--n-100:#f5f5f5;--n-50:#fbfbfb;--white:#fff;
50
+ /* support pastels */
51
+ --sky:#3f9fe0;--sky-tint:#e2effd;--violet:#9f5bde;--violet-tint:#e4ddfd;--green:#22c55e;--green-tint:#dcfce7;--coral:#f97316;--coral-tint:#ffe9cc;
52
+ /* semantic */
53
+ --bg:var(--n-50);--bg-section:var(--n-100);--surface:var(--white);--border:var(--n-200);--border-strong:var(--n-300);
54
+ --text:var(--n-700);--text-muted:var(--n-500);--text-faint:var(--n-400);
55
+ /* radius */
56
+ --r-md:6px;--r-lg:8px;--r-xl:12px;--r-2xl:16px;--r-3xl:24px;--r-full:9999px;
57
+ /* shadow */
58
+ --shadow-xs:0 1px 2px 0 #0000000d;--shadow-sm:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;
59
+ --shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;
60
+ --shadow-xl:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;
61
+ --shadow-card:0 1px 2px #0000000d,0 8px 24px -12px #00000014;--shadow-nav:0 4px 24px -8px #00000026,0 1px 2px #0000000d;
62
+ --ring-gold:0 0 0 3px var(--gold-600),0 0 14px rgba(246,199,68,.4);
63
+ /* type */
64
+ --text-sm:.875rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-4xl:2.25rem;--text-5xl:3rem;
65
+ --display:clamp(3rem,7vw,6rem);
66
+ /* space + motion */
67
+ --section-y:clamp(4rem,9vw,7rem);--container:75rem;--gutter:clamp(1rem,4vw,2rem);
68
+ --nav-h:103px; /* measured nav-wrap height — constant across breakpoints */
69
+ --glass-blur:16px;--ease:cubic-bezier(.22,1,.36,1);--dur:220ms;
70
+ }
71
+ *{box-sizing:border-box;margin:0;padding:0}
72
+ html{font-size:16px;scroll-behavior:smooth}
73
+ body{font-family:var(--font-body);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.5}
74
+ a{text-decoration:none;color:inherit}
75
+ h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;letter-spacing:-.025em;line-height:1.1;color:var(--ink)}
76
+ .container{width:min(var(--container),100%);margin:0 auto;padding:0 var(--gutter)}
77
+
78
+ /* nav — floating frosted-glass pill */
79
+ .nav-wrap{position:sticky;top:0;z-index:50;padding:16px var(--gutter);display:flex;justify-content:center}
80
+ .glass{background:rgba(255,255,255,.72);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--border);box-shadow:var(--shadow-nav)}
81
+ .nav{width:min(var(--container),100%);display:flex;align-items:center;gap:24px;padding:10px 12px 10px 22px;border-radius:var(--r-full)}
82
+ .brand{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--ink);letter-spacing:-.02em}
83
+ .brand-mark{width:28px;height:28px;border-radius:9px;background:var(--gold-500);display:grid;place-items:center;font-size:16px;box-shadow:var(--shadow-xs)}
84
+ .nav-links{display:flex;gap:2px;margin:0 auto;list-style:none}
85
+ .nav-links a{display:inline-flex;align-items:center;gap:4px;padding:8px 12px;border-radius:var(--r-lg);font-size:15px;font-weight:500;color:var(--n-700);transition:background var(--dur) var(--ease)}
86
+ .nav-links a:hover{background:#0000000a}
87
+ .nav-cta{display:flex;align-items:center;gap:8px}
88
+ .link-quiet{padding:8px 12px;font-size:15px;font-weight:500;color:var(--n-700);border-radius:var(--r-lg);transition:background var(--dur) var(--ease)}
89
+ .link-quiet:hover{background:#0000000a}
90
+ @media(max-width:820px){.nav-links{display:none}}
91
+
92
+ /* buttons */
93
+ .btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:var(--r-full);font-family:var(--font-body);font-size:15px;font-weight:600;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease)}
94
+ .btn .arrow{transition:transform var(--dur) var(--ease)}
95
+ .btn:hover .arrow{transform:translateX(3px)}
96
+ .btn-ink{background:var(--ink);color:#fff;box-shadow:var(--shadow-sm)}
97
+ .btn-ink:hover{background:#000;box-shadow:var(--shadow-md);transform:translateY(-1px)}
98
+ .btn-gold{background:var(--gold-500);color:var(--ink);font-weight:700;box-shadow:var(--shadow-sm)}
99
+ .btn-gold:hover{background:var(--gold-700);box-shadow:0 6px 18px -6px rgba(252,185,0,.6);transform:translateY(-1px)}
100
+ .btn-ghost{background:#fff;color:var(--ink);border-color:var(--border);box-shadow:var(--shadow-xs)}
101
+ .btn-ghost:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm)}
102
+ .btn-lg{padding:15px 26px;font-size:16px}
103
+
104
+ /* badges */
105
+ .badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--r-full);background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-xs);font-size:14px;font-weight:500;color:var(--n-700)}
106
+
107
+ /* hero band — the sunny sky sits behind BOTH the nav and the hero so the
108
+ frosted pill nav floats over the illustration (not on a white strip).
109
+ Pulled up by one nav-height so it slides under the (body-level, still
110
+ whole-page-sticky) nav; the hero's top padding adds that height back. */
111
+ .hero-band{position:relative;overflow:hidden;margin-top:calc(-1 * var(--nav-h))}
112
+ /* hero — Tier-2 pure-CSS sunny sky (no image asset needed) */
113
+ .hero{position:relative;z-index:1;text-align:center;padding:calc(var(--nav-h) + 40px) var(--gutter) 108px}
114
+ .hero-art{position:absolute;inset:0;z-index:0;background:
115
+ radial-gradient(58% 46% at 78% 20%,rgba(255,241,204,.9),transparent 60%),
116
+ linear-gradient(180deg,#3f9fe0 0%,#6cc0f5 55%,#a9dbfb 100%)}
117
+ .hero-art::after{content:"";position:absolute;right:9%;bottom:16%;width:340px;height:130px;
118
+ background:radial-gradient(ellipse 60% 60% at 30% 60%,#fff,transparent 70%),radial-gradient(ellipse 50% 70% at 66% 50%,#fff,transparent 70%);filter:blur(2px);opacity:.95}
119
+ .hero-art::before{content:"";position:absolute;left:6%;top:30%;width:220px;height:90px;
120
+ background:radial-gradient(ellipse 60% 60% at 40% 60%,#fff,transparent 72%);filter:blur(3px);opacity:.8}
121
+ .hero-inner{position:relative;z-index:1;max-width:860px;margin:0 auto;display:grid;gap:22px;justify-items:center}
122
+ .hero h1{font-size:var(--display);line-height:1;letter-spacing:-.03em;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.12)}
123
+ .hero h1 .soft{color:rgba(255,255,255,.55)}
124
+ .hero-sub{font-size:var(--text-xl);line-height:1.5;color:rgba(255,255,255,.94);max-width:600px}
125
+ .hero .badge{background:rgba(255,255,255,.9)}
126
+ .hero-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:4px}
127
+ .hero-note{font-size:var(--text-sm);color:rgba(255,255,255,.85);margin-top:2px}
128
+
129
+ /* floating pipeline mockup — fork → edit → render → publish nodes */
130
+ .hero-shot{position:relative;z-index:2;width:min(64rem,100%);margin:-64px auto 0;background:#fff;border:1px solid var(--border);border-radius:var(--r-3xl);box-shadow:var(--shadow-xl);padding:22px}
131
+ .shot-head{display:flex;align-items:center;gap:8px;padding:2px 4px 16px;border-bottom:1px solid var(--border);margin-bottom:18px}
132
+ .dot{width:11px;height:11px;border-radius:50%}.dot-r{background:#ff5f57}.dot-y{background:#febc2e}.dot-g{background:#28c840}
133
+ .shot-title{margin-left:8px;font-size:13px;color:var(--text-muted);font-weight:500}
134
+ .pipeline{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}
135
+ .node{display:inline-flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--border);border-radius:var(--r-2xl);padding:12px 16px;box-shadow:var(--shadow-sm)}
136
+ .node-title{font-weight:600;font-size:15px;color:var(--ink)}.node-sub{font-size:13px;color:var(--text-muted)}
137
+ .flow{color:var(--n-400);font-size:20px;flex:none}
138
+ @media(max-width:640px){.flow{transform:rotate(90deg)}}
139
+
140
+ /* icon tiles */
141
+ .tile{width:40px;height:40px;border-radius:var(--r-xl);display:grid;place-items:center;font-size:18px;flex:none}
142
+ .tile-violet{background:var(--violet-tint);color:var(--violet)}.tile-green{background:var(--green-tint);color:var(--green)}
143
+ .tile-gold{background:var(--gold-tint2);color:var(--gold-700)}.tile-sky{background:var(--sky-tint);color:var(--sky)}.tile-coral{background:var(--coral-tint);color:var(--coral)}
144
+
145
+ /* sections */
146
+ .section{padding:var(--section-y) 0}
147
+ .section-tint{background:var(--bg-section)}
148
+ .center-intro{text-align:center;display:grid;gap:16px;justify-items:center;margin-bottom:48px}
149
+ .section-title{font-size:var(--text-5xl);letter-spacing:-.025em}
150
+ .section-sub{font-size:var(--text-xl);color:var(--text-muted);max-width:560px}
151
+
152
+ /* feature cards */
153
+ .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
154
+ @media(max-width:820px){.grid-2{grid-template-columns:1fr}}
155
+ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-3xl);padding:32px;box-shadow:var(--shadow-card);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
156
+ .card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
157
+ .card .tile{margin-bottom:18px}
158
+ .card h3{font-size:var(--text-2xl);font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
159
+ .card p{color:var(--text-muted);font-size:var(--text-lg)}
160
+ .card-media{margin-top:24px;background:var(--n-50);border:1px solid var(--border);border-radius:var(--r-2xl);padding:20px;display:flex;gap:12px;flex-wrap:wrap}
161
+
162
+ /* stat / trust row */
163
+ .trust-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
164
+ @media(max-width:820px){.trust-wrap{grid-template-columns:1fr}}
165
+ .stat-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
166
+ .stat-card{display:grid;gap:10px}
167
+ .stat-head{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);font-size:15px}
168
+ .stat-num{font-family:var(--font-display);font-size:var(--text-5xl);font-weight:700;letter-spacing:-.02em;color:var(--ink)}
169
+ .stat-sub{font-size:var(--text-sm);color:var(--text-muted)}
170
+ .stars{color:var(--gold-500);font-size:18px;letter-spacing:2px}
171
+
172
+ /* how-it-works steps */
173
+ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:8px}
174
+ @media(max-width:820px){.steps{grid-template-columns:repeat(2,1fr)}}
175
+ @media(max-width:480px){.steps{grid-template-columns:1fr}}
176
+ .step{background:#fff;border:1px solid var(--border);border-radius:var(--r-2xl);padding:24px;box-shadow:var(--shadow-card)}
177
+ .step-n{width:32px;height:32px;border-radius:var(--r-full);background:var(--gold-tint2);color:var(--gold-700);font-family:var(--font-display);font-weight:800;display:grid;place-items:center;margin-bottom:14px;font-size:15px}
178
+ .step h4{font-size:var(--text-lg);font-weight:700;margin-bottom:6px;font-family:var(--font-display);color:var(--ink)}
179
+ .step p{color:var(--text-muted);font-size:15px}
180
+
181
+ /* final CTA */
182
+ .cta-final{text-align:center;display:grid;gap:16px;justify-items:center}
183
+
184
+ /* footer — warm-dark charcoal */
185
+ .footer{background:var(--ink);color:var(--n-400);padding:80px var(--gutter) 40px}
186
+ .footer-inner{width:min(var(--container),100%);margin:0 auto}
187
+ .footer-top{display:grid;grid-template-columns:1.4fr 3fr;gap:40px;margin-bottom:40px}
188
+ @media(max-width:820px){.footer-top{grid-template-columns:1fr}}
189
+ .footer-brand{font-family:var(--font-display);font-weight:800;font-size:28px;color:var(--gold-500);display:inline-flex;align-items:center;gap:8px}
190
+ .footer-tagline{color:var(--n-500);margin-top:10px;max-width:280px}
191
+ .footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
192
+ @media(max-width:560px){.footer-cols{grid-template-columns:repeat(2,1fr)}}
193
+ .footer-col h4{color:var(--n-400);font-size:14px;font-weight:600;margin-bottom:14px;font-family:var(--font-body)}
194
+ .footer-col a{display:block;color:var(--n-300);font-size:15px;padding:6px 0;transition:color var(--dur) var(--ease)}
195
+ .footer-col a:hover{color:#fff}
196
+ .trust-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;padding-top:32px;border-top:1px solid #ffffff1a}
197
+ .trust-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--r-full);background:#ffffff0d;color:var(--n-400);font-size:14px}
198
+
199
+ :where(a,button,input,textarea):focus-visible{outline:none;box-shadow:var(--ring-gold)}
200
+ </style>
201
+ </head>
202
+ <body>
203
+
204
+ <!-- NAV (body-level so it stays sticky across the whole page) -->
205
+ <header class="nav-wrap">
206
+ <nav class="nav glass">
207
+ <a class="brand" href="/"><span class="brand-mark">🎬</span>vidfarm</a>
208
+ <ul class="nav-links">
209
+ <li><a href="${HREF.studio}">Templates</a></li>
210
+ <li><a href="${HREF.clips}">Clips</a></li>
211
+ <li><a href="${HREF.chat}">Brainstorm</a></li>
212
+ <li><a href="#how">How it works</a></li>
213
+ </ul>
214
+ <div class="nav-cta">
215
+ ${quietNav}
216
+ <a class="btn btn-ink" href="${primaryCta.href}">${primaryCta.label} <span class="arrow">→</span></a>
217
+ </div>
218
+ </nav>
219
+ </header>
220
+
221
+ <!-- HERO BAND: pulled up under the nav so the sky sits behind it too -->
222
+ <div class="hero-band">
223
+ <div class="hero-art"></div>
224
+
225
+ <!-- HERO -->
226
+ <section class="hero">
227
+ <div class="hero-inner">
228
+ <span class="badge">🎬 The serverless video studio</span>
229
+ <h1><span class="soft">Short-form video</span><br>that makes itself</h1>
230
+ <p class="hero-sub">Fork a template that already works, remix it on the timeline, and render a share-ready MP4 — all in your browser.</p>
231
+ <div class="hero-cta">
232
+ <a class="btn btn-ink btn-lg" href="${primaryCta.href}">${primaryCta.label} <span class="arrow">→</span></a>
233
+ <a class="btn btn-ghost btn-lg" href="${HREF.clips}">Browse clips</a>
234
+ </div>
235
+ <p class="hero-note">No render farm to babysit. Scales to zero when you're done.</p>
236
+ </div>
237
+ </section>
238
+ </div><!-- /hero-band -->
239
+ <div class="hero-shot">
240
+ <div class="shot-head">
241
+ <span class="dot dot-r"></span><span class="dot dot-y"></span><span class="dot dot-g"></span>
242
+ <span class="shot-title">vidfarm · trackpad editor</span>
243
+ </div>
244
+ <div class="pipeline">
245
+ <div class="node"><span class="tile tile-sky">📼</span><div><div class="node-title">Fork template</div><div class="node-sub">Proven hook</div></div></div>
246
+ <span class="flow">→</span>
247
+ <div class="node"><span class="tile tile-violet">✦</span><div><div class="node-title">Remix on timeline</div><div class="node-sub">Swap · retime · recaption</div></div></div>
248
+ <span class="flow">→</span>
249
+ <div class="node"><span class="tile tile-gold">▶</span><div><div class="node-title">Render MP4</div><div class="node-sub">HyperFrames</div></div></div>
250
+ <span class="flow">→</span>
251
+ <div class="node"><span class="tile tile-green">✓</span><div><div class="node-title">Publish</div><div class="node-sub">Ready to post</div></div></div>
252
+ </div>
253
+ </div>
254
+
255
+ <!-- TRUST -->
256
+ <section class="section">
257
+ <div class="container">
258
+ <div class="trust-wrap">
259
+ <div>
260
+ <h2 style="font-size:var(--text-4xl)">Everything runs serverless, so it scales to zero</h2>
261
+ <p style="margin-top:16px;color:var(--text-muted);font-size:var(--text-lg)"><strong style="color:var(--ink)">No long-lived worker, no idle bill.</strong> Renders fan out across AWS Lambda in seconds — or run free, in-process, on your own box with <code style="font-family:var(--font-mono,monospace);background:var(--n-100);padding:2px 6px;border-radius:6px">vidfarm serve</code>.</p>
262
+ </div>
263
+ <div class="stat-row">
264
+ <div class="card stat-card"><div class="stat-head"><span class="tile tile-gold">⚡</span> Render time</div><div class="stat-num">~30s</div><div class="stat-sub">A finished cut, cloud-rendered</div></div>
265
+ <div class="card stat-card"><div class="stat-head"><span class="tile tile-green">$</span> Idle cost</div><div class="stat-num">$0</div><div class="stat-sub">Scales to zero at rest</div></div>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ </section>
270
+
271
+ <!-- FEATURES -->
272
+ <section class="section section-tint">
273
+ <div class="container center-intro">
274
+ <span class="badge">🔥 What you get</span>
275
+ <h2 class="section-title">A whole studio, one browser tab</h2>
276
+ <p class="section-sub">Everything to go from a blank idea to a posted video — no timeline degree required.</p>
277
+ </div>
278
+ <div class="container grid-2">
279
+ <div class="card">
280
+ <span class="tile tile-sky">📼</span>
281
+ <h3>Fork a proven template</h3>
282
+ <p>Start from short-form templates that already perform. One click forks it straight into your library, yours to remix.</p>
283
+ <div class="card-media">
284
+ <span class="tile tile-gold">Aa</span><span class="tile tile-sky">🎞</span><span class="tile tile-violet">✦</span><span class="tile tile-coral">🔊</span>
285
+ </div>
286
+ </div>
287
+ <div class="card">
288
+ <span class="tile tile-violet">✦</span>
289
+ <h3>Remix on the Trackpad</h3>
290
+ <p>Drag clips, retime layers, swap media, and recaption on a real timeline — with an AI copilot riding shotgun when you want it.</p>
291
+ <div class="card-media" style="flex-direction:column;align-items:flex-start;gap:10px">
292
+ <div class="node"><span class="tile tile-violet">✦</span><div><div class="node-title">AI edit</div><div class="node-sub">"Make the hook punchier"</div></div></div>
293
+ <div class="node"><span class="tile tile-green">✎</span><div><div class="node-title">Recaption</div><div class="node-sub">Word-by-word timing</div></div></div>
294
+ </div>
295
+ </div>
296
+ <div class="card">
297
+ <span class="tile tile-coral">✂️</span>
298
+ <h3>Mine clips from anything</h3>
299
+ <p>Turn a podcast, VOD, or YouTube URL into tagged, searchable short clips — then drop the best moments right into your edit.</p>
300
+ <div class="card-media">
301
+ <span class="tile tile-coral">🎙</span><span class="tile tile-sky">🔍</span><span class="tile tile-green">🏷</span>
302
+ </div>
303
+ </div>
304
+ <div class="card">
305
+ <span class="tile tile-gold">▶</span>
306
+ <h3>Render &amp; publish</h3>
307
+ <p>Approve a cut and the native HyperFrames renderer produces the MP4 — cloud or local — landing ready-to-post in your library.</p>
308
+ <div class="card-media" style="flex-direction:column;align-items:flex-start;gap:10px">
309
+ <div class="node"><span class="tile tile-gold">▶</span><div><div class="node-title">Render MP4</div><div class="node-sub">Lambda fan-out · or free locally</div></div></div>
310
+ <div class="node"><span class="tile tile-green">✓</span><div><div class="node-title">Ready to post</div><div class="node-sub">Straight to /library</div></div></div>
311
+ </div>
312
+ </div>
313
+ </div>
314
+ </section>
315
+
316
+ <!-- HOW IT WORKS -->
317
+ <section class="section" id="how">
318
+ <div class="container center-intro">
319
+ <span class="badge">🧭 How it works</span>
320
+ <h2 class="section-title">From idea to posted in four steps</h2>
321
+ </div>
322
+ <div class="container">
323
+ <div class="steps">
324
+ <div class="step"><div class="step-n">1</div><h4>Pick a template</h4><p>Browse the feed and fork a short-form format that fits your idea.</p></div>
325
+ <div class="step"><div class="step-n">2</div><h4>Make it yours</h4><p>Swap footage, retime beats, and rewrite captions on the timeline.</p></div>
326
+ <div class="step"><div class="step-n">3</div><h4>Render</h4><p>Hit render — HyperFrames fans out on Lambda, or runs free on your box.</p></div>
327
+ <div class="step"><div class="step-n">4</div><h4>Publish</h4><p>Approve the cut and it lands in your library, ready to post.</p></div>
328
+ </div>
329
+ </div>
330
+ </section>
331
+
332
+ <!-- FINAL CTA -->
333
+ <section class="section section-tint">
334
+ <div class="container cta-final">
335
+ <span class="badge">🌤️ It all starts with a fork</span>
336
+ <h2 class="section-title">Make your first video today</h2>
337
+ <p class="section-sub">Free to start. Nothing to install. Scales to zero when you're done.</p>
338
+ <a class="btn btn-gold btn-lg" href="${primaryCta.href}" style="margin-top:8px">${primaryCta.label} <span class="arrow">→</span></a>
339
+ </div>
340
+ </section>
341
+
342
+ <!-- FOOTER -->
343
+ <footer class="footer">
344
+ <div class="footer-inner">
345
+ <div class="footer-top">
346
+ <div>
347
+ <div class="footer-brand"><span class="brand-mark">🎬</span>vidfarm</div>
348
+ <div class="footer-tagline">The serverless studio for short-form video.</div>
349
+ </div>
350
+ <div class="footer-cols">
351
+ <div class="footer-col"><h4>Studio</h4><a href="${HREF.studio}">Templates</a><a href="${HREF.clips}">Clips</a><a href="${HREF.chat}">Brainstorm</a><a href="${HREF.library}">Library</a></div>
352
+ <div class="footer-col"><h4>Product</h4><a href="${HREF.studio}">Trackpad editor</a><a href="${HREF.studio}">HyperFrames render</a><a href="${HREF.clips}">Clip hunting</a><a href="${HREF.studio}">Publish &amp; schedule</a></div>
353
+ <div class="footer-col"><h4>Account</h4><a href="${HREF.login}">Log in</a><a href="${HREF.studio}">Get started</a><a href="${HREF.library}">Your projects</a></div>
354
+ </div>
355
+ </div>
356
+ <div class="trust-row">
357
+ <span class="trust-pill">☁️ Serverless on AWS</span>
358
+ <span class="trust-pill">💤 Scales to zero at idle</span>
359
+ <span class="trust-pill">🖥️ Render free with vidfarm serve</span>
360
+ </div>
361
+ </div>
362
+ </footer>
363
+
364
+ </body>
365
+ </html>`;
366
+ }
367
+ //# sourceMappingURL=landing-page.js.map