added on local at 2026-07-01 13:48:12
| 1 | <!-- ===================================================================== | |
| 2 | Studio Welcome | |
| 3 | First page every creator lands on. Sections: | |
| 4 | 1. Personalized hero with plan chip + member-since | |
| 5 | 2. Four stat tiles (models, visitors, sales, days active) | |
| 6 | 3. Getting-Started checklist with live done/todo state + progress | |
| 7 | 4. "Your plan" tile listing every included feature | |
| 8 | 5. "Unlock more" grid of features locked behind higher tiers | |
| 9 | 6. Closing strip with tagline + dashboard CTA | |
| 10 | ====================================================================== --> | |
| 11 | ||
| 12 | <!-- ----- Page header ----- --> | |
| 13 | <div class="page-head"> | |
| 14 | <div> | |
| 15 | <span class="page-eyebrow"><span class="dot"></span> Studio · Getting started</span> | |
| 16 | <h1 class="page-title">Welcome, $first_name.</h1> | |
| 17 | <p class="page-subtitle"> | |
| 18 | This is your studio — the workspace behind your storefront, your marketplace pushes, your audience, | |
| 19 | and every number you watch. Tick the steps below to get fully set up; everything flows together once you do. | |
| 20 | </p> | |
| 21 | </div> | |
| 22 | <div class="page-actions"> | |
| 23 | <span style="display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:linear-gradient(135deg,rgba(124,58,237,0.18),rgba(37,99,235,0.18));border:1px solid rgba(124,58,237,0.45);color:#c4b5fd;font-weight:600;font-size:13px;letter-spacing:0.02em"> | |
| 24 | <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M12 2 15 8.5 22 9.5 17 14.5 18.5 22 12 18 5.5 22 7 14.5 2 9.5 9 8.5z"/></svg> | |
| 25 | $plan_name plan | |
| 26 | </span> | |
| 27 | <a href="/billing.cgi" class="btn btn-secondary"> | |
| 28 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg> | |
| 29 | Manage plan | |
| 30 | </a> | |
| 31 | <a href="/sales_reports.cgi" class="btn btn-primary"> | |
| 32 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="9" rx="1"/><rect x="14" y="3" width="7" height="5" rx="1"/><rect x="14" y="12" width="7" height="9" rx="1"/><rect x="3" y="16" width="7" height="5" rx="1"/></svg> | |
| 33 | Open sales reports | |
| 34 | </a> | |
| 35 | </div> | |
| 36 | </div> | |
| 37 | ||
| 38 | <!-- ----- Quick stat tiles ----- --> | |
| 39 | <div class="stat-row"> | |
| 40 | <div class="stat"> | |
| 41 | <div class="stat-label"> | |
| 42 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2 3 7v10l9 5 9-5V7l-9-5Z"/><path d="m3 7 9 5 9-5"/><path d="M12 22V12"/></svg> | |
| 43 | Models in catalog | |
| 44 | </div> | |
| 45 | <div class="stat-value">$models_count</div> | |
| 46 | <div class="stat-meta"><span class="stat-meta-label">Live + drafts</span></div> | |
| 47 | </div> | |
| 48 | <div class="stat"> | |
| 49 | <div class="stat-label"> | |
| 50 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7Z"/><circle cx="12" cy="12" r="3"/></svg> | |
| 51 | Visitors this week | |
| 52 | </div> | |
| 53 | <div class="stat-value">$visitors_week</div> | |
| 54 | <div class="stat-meta"><span class="stat-meta-label">Unique sessions, rolling 7 days</span></div> | |
| 55 | </div> | |
| 56 | <div class="stat"> | |
| 57 | <div class="stat-label"> | |
| 58 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg> | |
| 59 | Paid orders | |
| 60 | </div> | |
| 61 | <div class="stat-value">$orders_count</div> | |
| 62 | <div class="stat-meta"><span class="stat-meta-label">All-time on your storefront</span></div> | |
| 63 | </div> | |
| 64 | <div class="stat"> | |
| 65 | <div class="stat-label"> | |
| 66 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg> | |
| 67 | Member | |
| 68 | </div> | |
| 69 | <div class="stat-value">$member_days</div> | |
| 70 | <div class="stat-meta"><span class="stat-meta-label">$member_days_label</span></div> | |
| 71 | </div> | |
| 72 | </div> | |
| 73 | ||
| 74 | <!-- ----- Two-column: checklist (left) + your plan (right) ----- --> | |
| 75 | <div style="display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:20px;margin-top:24px;align-items:start"> | |
| 76 | ||
| 77 | <!-- ----- LEFT: Getting Started checklist ----- --> | |
| 78 | <div class="card" style="padding:0;overflow:hidden"> | |
| 79 | <!-- Card head + progress bar --> | |
| 80 | <div style="padding:22px 24px 18px;border-bottom:1px solid var(--col-border);display:flex;justify-content:space-between;align-items:flex-end;gap:16px"> | |
| 81 | <div> | |
| 82 | <div style="font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--col-text-dim);font-weight:600">Get fully set up</div> | |
| 83 | <h2 style="margin:6px 0 0;font-size:22px;line-height:1.2">Getting Started</h2> | |
| 84 | <p style="margin:6px 0 0;color:var(--col-text-dim);font-size:13.5px">Five steps from new account to running studio. We tick them off as you do them.</p> | |
| 85 | </div> | |
| 86 | <div style="text-align:right;min-width:140px"> | |
| 87 | <div style="font-family:var(--font-display,inherit);font-size:34px;font-weight:700;line-height:1;color:#c4b5fd">$checklist_done<span style="font-size:18px;color:var(--col-text-dim);font-weight:500"> / $checklist_total</span></div> | |
| 88 | <div style="font-size:11px;color:var(--col-text-dim);margin-top:4px;letter-spacing:0.06em;text-transform:uppercase">Complete</div> | |
| 89 | </div> | |
| 90 | </div> | |
| 91 | ||
| 92 | <!-- Progress bar --> | |
| 93 | <div style="height:6px;background:rgba(148,163,184,0.12);position:relative"> | |
| 94 | <div style="position:absolute;left:0;top:0;bottom:0;width:$checklist_pct%;background:linear-gradient(90deg,#7c3aed,#2563eb,#06b6d4);border-radius:0 3px 3px 0;transition:width 0.4s ease"></div> | |
| 95 | </div> | |
| 96 | ||
| 97 | <!-- Checklist rows --> | |
| 98 | [if:$checklist_complete] | |
| 99 | <div style="padding:30px 24px;text-align:center;background:linear-gradient(135deg,rgba(34,197,94,0.10),rgba(6,182,212,0.10))"> | |
| 100 | <div style="font-size:36px;line-height:1">🎉</div> | |
| 101 | <h3 style="margin:10px 0 4px;font-size:20px">You are fully set up.</h3> | |
| 102 | <p style="margin:0;color:var(--col-text-dim);font-size:14px">Every starter step done. Keep iterating from Sales Reports.</p> | |
| 103 | </div> | |
| 104 | [/if] | |
| 105 | [loop:@checklist] | |
| 106 | <div style="display:flex;align-items:center;gap:16px;padding:18px 24px;border-bottom:1px solid var(--col-border)"> | |
| 107 | <!-- Check column --> | |
| 108 | <div style="flex:0 0 32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;[if:$loop1.done]background:rgba(34,197,94,0.15);color:#22c55e;border:1px solid rgba(34,197,94,0.45)[/if][if:!$loop1.done]background:rgba(148,163,184,0.10);color:var(--col-text-dim);border:1px solid var(--col-border)[/if]"> | |
| 109 | [if:$loop1.done]<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>[/if] | |
| 110 | [if:!$loop1.done]<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2"><circle cx="12" cy="12" r="9"/></svg>[/if] | |
| 111 | </div> | |
| 112 | <!-- Step body --> | |
| 113 | <div style="flex:1;min-width:0"> | |
| 114 | <div style="font-size:15px;font-weight:600;[if:$loop1.done]color:var(--col-text-dim);text-decoration:line-through;text-decoration-color:rgba(148,163,184,0.4)[/if]">$loop1.title</div> | |
| 115 | <div style="font-size:13px;color:var(--col-text-dim);margin-top:3px;line-height:1.5">$loop1.why</div> | |
| 116 | </div> | |
| 117 | <!-- CTA --> | |
| 118 | <a href="$loop1.cta_href" class="btn [if:$loop1.done]btn-secondary[/if][if:!$loop1.done]btn-primary[/if] btn-sm" style="flex:0 0 auto">$loop1.cta_label</a> | |
| 119 | </div> | |
| 120 | [/loop] | |
| 121 | </div> | |
| 122 | ||
| 123 | <!-- ----- RIGHT: Your Plan tile ----- --> | |
| 124 | <div class="card" style="padding:0;overflow:hidden"> | |
| 125 | <div style="padding:22px 24px;background:linear-gradient(135deg,rgba(124,58,237,0.18),rgba(37,99,235,0.10));border-bottom:1px solid var(--col-border)"> | |
| 126 | <div style="font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:#c4b5fd;font-weight:600">Your plan</div> | |
| 127 | <h2 style="margin:6px 0 0;font-size:22px;line-height:1.2">$plan_name</h2> | |
| 128 | [if:$has_paid_plan] | |
| 129 | <div style="margin-top:8px;color:var(--col-text-dim);font-size:14px"> | |
| 130 | $plan_price <span style="opacity:0.7">· $plan_cadence</span> | |
| 131 | </div> | |
| 132 | [/if] | |
| 133 | [if:$is_free_plan] | |
| 134 | <div style="margin-top:8px;color:var(--col-text-dim);font-size:14px">Forever free. Upgrade any time to unlock more.</div> | |
| 135 | [/if] | |
| 136 | </div> | |
| 137 | ||
| 138 | [if:$has_features_have] | |
| 139 | <div style="padding:14px 8px 8px"> | |
| 140 | <div style="font-size:11px;letter-spacing:0.10em;text-transform:uppercase;color:var(--col-text-dim);font-weight:600;padding:6px 16px 10px">What is included</div> | |
| 141 | [loop:@features_have] | |
| 142 | <div style="display:flex;align-items:flex-start;gap:12px;padding:10px 16px;border-radius:8px"> | |
| 143 | <div style="flex:0 0 22px;height:22px;border-radius:50%;background:rgba(34,197,94,0.15);color:#22c55e;display:flex;align-items:center;justify-content:center;margin-top:1px"> | |
| 144 | <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> | |
| 145 | </div> | |
| 146 | <div style="flex:1;min-width:0"> | |
| 147 | <div style="font-size:14px;font-weight:600">$loop1.name</div> | |
| 148 | <div style="font-size:12px;color:var(--col-text-dim);line-height:1.45;margin-top:2px">$loop1.blurb</div> | |
| 149 | </div> | |
| 150 | </div> | |
| 151 | [/loop] | |
| 152 | </div> | |
| 153 | [/if] | |
| 154 | [if:!$has_features_have] | |
| 155 | <div style="padding:24px 22px;text-align:center;color:var(--col-text-dim);font-size:14px"> | |
| 156 | Your plan does not include any add-on modules yet. <a href="/billing.cgi" class="text-brand fw-700">Pick a plan</a> to start. | |
| 157 | </div> | |
| 158 | [/if] | |
| 159 | ||
| 160 | <div style="padding:14px 22px;border-top:1px solid var(--col-border);display:flex;gap:8px"> | |
| 161 | <a href="/billing.cgi" class="btn btn-secondary btn-sm" style="flex:1;justify-content:center">[if:$is_free_plan]Compare plans[/if][if:$has_paid_plan]Manage plan[/if]</a> | |
| 162 | </div> | |
| 163 | </div> | |
| 164 | ||
| 165 | </div> | |
| 166 | ||
| 167 | <!-- ----- Unlock more (locked features) ----- --> | |
| 168 | [if:$has_features_locked] | |
| 169 | <div style="margin-top:28px"> | |
| 170 | <div style="display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:14px;gap:16px"> | |
| 171 | <div> | |
| 172 | <div style="font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--col-text-dim);font-weight:600">Unlock more</div> | |
| 173 | <h2 style="margin:6px 0 0;font-size:22px;line-height:1.2">Features waiting for you on a higher plan</h2> | |
| 174 | <p style="margin:6px 0 0;color:var(--col-text-dim);font-size:13.5px">These modules sit behind upgraded tiers. Each one is a self-contained system — you can pick what fits.</p> | |
| 175 | </div> | |
| 176 | <a href="/billing.cgi" class="btn btn-primary"> | |
| 177 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10"/></svg> | |
| 178 | Compare plans | |
| 179 | </a> | |
| 180 | </div> | |
| 181 | ||
| 182 | <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px"> | |
| 183 | [loop:@features_locked] | |
| 184 | <div class="card" style="padding:18px 18px 16px;position:relative;overflow:hidden"> | |
| 185 | <!-- Lock chip top-right --> | |
| 186 | <div style="position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;background:rgba(245,158,11,0.12);border:1px solid rgba(245,158,11,0.4);color:#f59e0b;font-size:10px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase"> | |
| 187 | <svg viewBox="0 0 24 24" width="10" height="10" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg> | |
| 188 | Locked | |
| 189 | </div> | |
| 190 | <div style="font-size:16px;font-weight:700;padding-right:80px">$loop1.name</div> | |
| 191 | <div style="font-size:13px;color:var(--col-text-dim);line-height:1.55;margin-top:6px;min-height:54px">$loop1.blurb</div> | |
| 192 | <a href="/billing.cgi" class="btn btn-secondary btn-sm" style="margin-top:12px;width:100%;justify-content:center"> | |
| 193 | Unlock with upgrade | |
| 194 | </a> | |
| 195 | </div> | |
| 196 | [/loop] | |
| 197 | </div> | |
| 198 | </div> | |
| 199 | [/if] | |
| 200 | ||
| 201 | <!-- ----- Closing tagline strip ----- --> | |
| 202 | <div style="margin-top:32px;padding:22px 26px;border-radius:14px;background:linear-gradient(135deg,rgba(124,58,237,0.14),rgba(37,99,235,0.10),rgba(6,182,212,0.10));border:1px solid rgba(124,58,237,0.30);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap"> | |
| 203 | <div style="min-width:0;flex:1"> | |
| 204 | <div style="font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:#c4b5fd;font-weight:600">Run your studio</div> | |
| 205 | <h3 style="margin:6px 0 4px;font-size:20px;line-height:1.2">One console for every marketplace, every customer, every number.</h3> | |
| 206 | <p style="margin:0;color:var(--col-text-dim);font-size:13.5px">Cross-platform publishing, your own storefront, A/B tests, audience tools, sales analytics — all stitched together.</p> | |
| 207 | </div> | |
| 208 | <div style="display:flex;gap:8px;flex-shrink:0"> | |
| 209 | <a href="/upload_model.cgi" class="btn btn-secondary"> | |
| 210 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg> | |
| 211 | Upload a model | |
| 212 | </a> | |
| 213 | <a href="/sales_reports.cgi" class="btn btn-primary"> | |
| 214 | Open sales reports | |
| 215 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg> | |
| 216 | </a> | |
| 217 | </div> | |
| 218 | </div> |