VibeCodingStudio/deepsite-project-ioalg
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Start Free Trial - VibeCodingLabs</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/lucide@latest"></script>9 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">10 11 <style>12 body {13 font-family: 'Inter', sans-serif;14 background: linear-gradient(135deg, #f0f9ff 0%, #faf5ff 100%);15 min-height: 100vh;16 }17 18 .glass-card {19 background: rgba(255, 255, 255, 0.9);20 backdrop-filter: blur(20px);21 border: 1px solid rgba(255, 255, 255, 0.5);22 box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);23 }24 25 .btn-gradient {26 background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);27 transition: all 0.3s ease;28 }29 30 .btn-gradient:hover {31 transform: translateY(-2px);32 box-shadow: 0 10px 30px rgba(14, 165, 233, 0.3);33 }34 35 .step-indicator {36 transition: all 0.3s ease;37 }38 39 .step-indicator.active {40 background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);41 color: white;42 border-color: transparent;43 }44 45 .step-indicator.completed {46 background: #10b981;47 color: white;48 border-color: transparent;49 }50 51 .input-field {52 transition: all 0.3s ease;53 border: 2px solid #e2e8f0;54 }55 56 .input-field:focus {57 border-color: #0ea5e9;58 box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1);59 }60 61 .plan-card {62 transition: all 0.3s ease;63 border: 2px solid transparent;64 }65 66 .plan-card.selected {67 border-color: #0ea5e9;68 background: rgba(14, 165, 233, 0.05);69 }70 71 .plan-card:hover {72 transform: translateY(-4px);73 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);74 }75 76 .feature-check {77 color: #10b981;78 }79 80 .loading-spinner {81 border: 3px solid #f3f4f6;82 border-top: 3px solid #0ea5e9;83 border-radius: 50%;84 width: 24px;85 height: 24px;86 animation: spin 1s linear infinite;87 }88 89 @keyframes spin {90 0% { transform: rotate(0deg); }91 100% { transform: rotate(360deg); }92 }93 94 .success-animation {95 animation: scaleIn 0.5s ease;96 }97 98 @keyframes scaleIn {99 0% { transform: scale(0); opacity: 0; }100 50% { transform: scale(1.2); }101 100% { transform: scale(1); opacity: 1; }102 }103 104 .progress-bar {105 height: 4px;106 background: #e2e8f0;107 border-radius: 2px;108 overflow: hidden;109 }110 111 .progress-fill {112 height: 100%;113 background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);114 transition: width 0.5s ease;115 }116 </style>117</head>118<body class="p-4">119 120 <!-- Navigation -->121 <nav class="fixed w-full z-50 glass-card border-b border-slate-200/50 top-0 left-0 right-0">122 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">123 <div class="flex justify-between items-center h-16">124 <a href="index.html" class="flex items-center space-x-2">125 <div class="w-8 h-8 btn-gradient rounded-lg flex items-center justify-center">126 <i data-lucide="zap" class="w-5 h-5 text-white"></i>127 </div>128 <span class="text-xl font-bold bg-gradient-to-r from-sky-500 to-violet-500 bg-clip-text text-transparent">VibeCodingLabs</span>129 </a>130 <div class="flex items-center space-x-4">131 <span class="text-sm text-slate-600 hidden sm:block">Questions?</span>132 <a href="#" class="text-sm font-medium text-sky-600 hover:text-sky-700">Contact Support</a>133 </div>134 </div>135 </div>136 </nav>137 138 <div class="max-w-6xl mx-auto pt-24 pb-12">139 <!-- Progress Steps -->140 <div class="mb-12">141 <div class="flex items-center justify-center space-x-4 mb-4">142 <div id="step1-indicator" class="step-indicator active w-10 h-10 rounded-full border-2 border-slate-300 flex items-center justify-center font-semibold text-sm">1</div>143 <div class="w-16 h-0.5 bg-slate-200">144 <div id="progress1" class="progress-fill w-0"></div>145 </div>146 <div id="step2-indicator" class="step-indicator w-10 h-10 rounded-full border-2 border-slate-300 flex items-center justify-center font-semibold text-sm text-slate-500">2</div>147 <div class="w-16 h-0.5 bg-slate-200">148 <div id="progress2" class="progress-fill w-0"></div>149 </div>150 <div id="step3-indicator" class="step-indicator w-10 h-10 rounded-full border-2 border-slate-300 flex items-center justify-center font-semibold text-sm text-slate-500">3</div>151 </div>152 <div class="flex items-center justify-center space-x-12 text-sm">153 <span id="step1-text" class="font-medium text-sky-600">Select Plan</span>154 <span id="step2-text" class="text-slate-500">Account Setup</span>155 <span id="step3-text" class="text-slate-500">Confirmation</span>156 </div>157 </div>158 159 <div class="grid lg:grid-cols-5 gap-8">160 <!-- Main Content -->161 <div class="lg:col-span-3">162 <!-- Step 1: Select Plan -->163 <div id="step1" class="glass-card rounded-3xl p-8">164 <h2 class="text-2xl font-bold mb-2">Choose your plan</h2>165 <p class="text-slate-600 mb-6">Start with a 14-day free trial. No credit card required.</p>166 167 <div class="space-y-4 mb-6">168 <!-- Pro Plan -->169 <div class="plan-card bg-white rounded-2xl p-6 cursor-pointer border-2 border-sky-500 selected relative" onclick="selectPlan('pro')" id="plan-pro">170 <div class="absolute -top-3 right-6">171 <span class="bg-sky-500 text-white px-3 py-1 rounded-full text-xs font-semibold">Recommended</span>172 </div>173 <div class="flex items-start justify-between">174 <div class="flex items-start space-x-4">175 <div class="w-5 h-5 rounded-full border-2 border-sky-500 mt-1 flex items-center justify-center" id="radio-pro">176 <div class="w-2.5 h-2.5 rounded-full bg-sky-500"></div>177 </div>178 <div>179 <h3 class="font-semibold text-lg">Pro</h3>180 <p class="text-slate-600 text-sm">For individuals and small teams</p>181 <ul class="mt-3 space-y-1 text-sm text-slate-600">182 <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> 10 workflows</li>183 <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> 5,000 tasks/month</li>184 <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> Basic AI features</li>185 <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> Email support</li>186 </ul>187 </div>188 </div>189 <div class="text-right">190 <div class="text-2xl font-bold">$20</div>191 <div class="text-sm text-slate-500">/month</div>192 </div>193 </div>194 </div>195 196 <!-- Max Plan -->197 <div class="plan-card bg-white rounded-2xl p-6 cursor-pointer border-2 border-slate-200" onclick="selectPlan('max')" id="plan-max">198 <div class="flex items-start justify-between">199 <div class="flex items-start space-x-4">200 <div class="w-5 h-5 rounded-full border-2 border-slate-300 mt-1 flex items-center justify-center" id="radio-max">201 <div class="w-2.5 h-2.5 rounded-full bg-sky-500 hidden"></div>202 </div>203 <div>204 <h3 class="font-semibold text-lg">Max</h3>205 <p class="text-slate-600 text-sm">For growing businesses</p>206 <ul class="mt-3 space-y-1 text-sm text-slate-600">207 <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> 50 workflows</li>208 <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> 25,000 tasks/month</li>209 <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> Advanced AI features</li>210 <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> Priority support</li>211 <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> Custom integrations</li>212 </ul>213 </div>214 </div>215 <div class="text-right">216 <div class="text-2xl font-bold">$100</div>217 <div class="text-sm text-slate-500">/month</div>218 </div>219 </div>220 </div>221 222 <!-- Vibe Expert Plan -->223 <div class="plan-card bg-white rounded-2xl p-6 cursor-pointer border-2 border-slate-200" onclick="selectPlan('vibe-expert')" id="plan-vibe-expert">224 <div class="flex items-start justify-between">225 <div class="flex items-start space-x-4">226 <div class="w-5 h-5 rounded-full border-2 border-slate-300 mt-1 flex items-center justify-center" id="radio-vibe-expert">227 <div class="w-2.5 h-2.5 rounded-full bg-sky-500 hidden"></div>228 </div>229 <div>230 <h3 class="font-semibold text-lg">Vibe Expert</h3>231 <p class="text-slate-600 text-sm">For power users and agencies</p>232 <ul class="mt-3 space-y-1 text-sm text-slate-600">233 <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> Unlimited workflows</li>234 <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> 100,000 tasks/month</li>235 <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> Full AI suite</li>236 <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> White-label options</li>237 <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> Dedicated account manager</li>238 </ul>239 </div>240 </div>241 <div class="text-right">242 <div class="text-2xl font-bold">$200</div>243 <div class="text-sm text-slate-500">/month</div>244 </div>245 </div>246 </div>247 248 <!-- Team Plan -->249 <div class="plan-card bg-white rounded-2xl p-6 cursor-pointer border-2 border-slate-200" onclick="selectPlan('team')" id="plan-team">250 <div class="flex items-start justify-between">251 <div class="flex items-start space-x-4">252 <div class="w-5 h-5 rounded-full border-2 border-slate-300 mt-1 flex items-center justify-center" id="radio-team">253 <div class="w-2.5 h-2.5 rounded-full bg-sky-500 hidden"></div>254 </div>255 <div>256 <h3 class="font-semibold text-lg">Team</h3>257 <p class="text-slate-600 text-sm">Per-seat pricing for teams</p>258 <ul class="mt-3 space-y-1 text-sm text-slate-600">259 <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> Unlimited workflows</li>260 <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> 50,000 tasks/month pooled</li>261 <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> Team collaboration</li>262 <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> Shared workspaces</li>263 <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> Admin controls</li>264 </ul>265 </div>266 </div>267 <div class="text-right">268 <div class="text-2xl font-bold">$29</div>269 <div class="text-sm text-slate-500">/seat/month</div>270 </div>271 </div>272 </div>273 274 <!-- Enterprise Plan -->275 <div class="plan-card bg-white rounded-2xl p-6 cursor-pointer border-2 border-slate-200" onclick="selectPlan('enterprise')" id="plan-enterprise">276 <div class="flex items-start justify-between">277 <div class="flex items-start space-x-4">278 <div class="w-5 h-5 rounded-full border-2 border-slate-300 mt-1 flex items-center justify-center" id="radio-enterprise">279 <div class="w-2.5 h-2.5 rounded-full bg-sky-500 hidden"></div>280 </div>281 <div>282 <h3 class="font-semibold text-lg">Enterprise</h3>283 <p class="text-slate-600 text-sm">For large organizations</p>284 <ul class="mt-3 space-y-1 text-sm text-slate-600">285 <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> Unlimited everything</li>286 <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> Unlimited tasks</li>287 <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> SSO & Advanced security</li>288 <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> Custom SLA</li>289 <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> 24/7 phone support</li>290 </ul>291 </div>292 </div>293 <div class="text-right">294 <div class="text-2xl font-bold">$250</div>295 <div class="text-sm text-slate-500">/month</div>296 </div>297 </div>298 </div>299 </div>300 301 <button onclick="goToStep(2)" class="btn-gradient w-full py-4 rounded-xl text-white font-semibold text-lg shadow-lg shadow-sky-500/25">302 Continue with Selected Plan303 </button>304 </div>305 306 <!-- Step 2: Account Setup -->307 <div id="step2" class="glass-card rounded-3xl p-8 hidden">308 <button onclick="goToStep(1)" class="text-slate-500 hover:text-slate-700 flex items-center space-x-2 mb-4 text-sm">309 <i data-lucide="arrow-left" class="w-4 h-4"></i>310 <span>Back to plans</span>311 </button>312 313 <h2 class="text-2xl font-bold mb-2">Set up your account</h2>314 <p class="text-slate-600 mb-6">Complete your profile to start your free trial.</p>315 316 <form onsubmit="completeSignup(event)" class="space-y-4">317 <div class="grid grid-cols-2 gap-4">318 <div>319 <label class="block text-sm font-medium text-slate-700 mb-1">First Name</label>320 <input type="text" required class="input-field w-full px-4 py-3 rounded-xl focus:outline-none" placeholder="John">321 </div>322 <div>323 <label class="block text-sm font-medium text-slate-700 mb-1">Last Name</label>324 <input type="text" required class="input-field w-full px-4 py-3 rounded-xl focus:outline-none" placeholder="Doe">325 </div>326 </div>327 328 <div>329 <label class="block text-sm font-medium text-slate-700 mb-1">Work Email</label>330 <input type="email" required class="input-field w-full px-4 py-3 rounded-xl focus:outline-none" placeholder="you@company.com">331 </div>332 333 <div>334 <label class="block text-sm font-medium text-slate-700 mb-1">Company Name</label>335 <input type="text" required class="input-field w-full px-4 py-3 rounded-xl focus:outline-none" placeholder="Acme Inc">336 </div>337 338 <div>339 <label class="block text-sm font-medium text-slate-700 mb-1">Team Size</label>340 <select class="input-field w-full px-4 py-3 rounded-xl focus:outline-none bg-white">341 <option>1-10 employees</option>342 <option>11-50 employees</option>343 <option>51-200 employees</option>344 <option>201-500 employees</option>345 <option>500+ employees</option>346 </select>347 </div>348 349 <div>350 <label class="block text-sm font-medium text-slate-700 mb-1">How did you hear about us?</label>351 <select class="input-field w-full px-4 py-3 rounded-xl focus:outline-none bg-white">352 <option>Search engine (Google, Bing, etc.)</option>353 <option>Social media</option>354 <option>Friend or colleague</option>355 <option>Blog or article</option>356 <option>Other</option>357 </select>358 </div>359 360 <div class="pt-4">361 <label class="flex items-start space-x-3 cursor-pointer">362 <input type="checkbox" required class="mt-1 rounded border-slate-300 text-sky-600 focus:ring-sky-500">363 <span class="text-sm text-slate-600">I agree to the <a href="#" class="text-sky-600 hover:text-sky-700">Terms of Service</a> and <a href="#" class="text-sky-600 hover:text-sky-700">Privacy Policy</a>. I also agree to receive product updates and marketing emails.</span>364 </label>365 </div>366 367 <button type="submit" id="submit-btn" class="btn-gradient w-full py-4 rounded-xl text-white font-semibold text-lg shadow-lg shadow-sky-500/25 flex items-center justify-center space-x-2">368 <span>Start My Free Trial</span>369 <i data-lucide="arrow-right" class="w-5 h-5"></i>370 </button>371 </form>372 </div>373 374 <!-- Step 3: Confirmation -->375 <div id="step3" class="glass-card rounded-3xl p-8 hidden text-center">376 <div class="success-animation w-20 h-20 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-6">377 <i data-lucide="check" class="w-10 h-10 text-emerald-600"></i>378 </div>379 380 <h2 class="text-2xl font-bold mb-2">You're all set! ๐</h2>381 <p class="text-slate-600 mb-6">Your 14-day free trial has started. Welcome to VibeCodingLabs!</p>382 383 <div class="bg-sky-50 rounded-xl p-6 mb-6 text-left">384 <h3 class="font-semibold mb-3">What's next?</h3>385 <ul class="space-y-3 text-sm text-slate-600">386 <li class="flex items-start space-x-3">387 <div class="w-6 h-6 rounded-full bg-sky-100 flex items-center justify-center flex-shrink-0 mt-0.5">388 <span class="text-sky-600 font-semibold text-xs">1</span>389 </div>390 <span>Check your email for your account confirmation and getting started guide</span>391 </li>392 <li class="flex items-start space-x-3">393 <div class="w-6 h-6 rounded-full bg-sky-100 flex items-center justify-center flex-shrink-0 mt-0.5">394 <span class="text-sky-600 font-semibold text-xs">2</span>395 </div>396 <span>Connect your first integration (Slack, Gmail, Salesforce, etc.)</span>397 </li>398 <li class="flex items-start space-x-3">399 <div class="w-6 h-6 rounded-full bg-sky-100 flex items-center justify-center flex-shrink-0 mt-0.5">400 <span class="text-sky-600 font-semibold text-xs">3</span>401 </div>402 <span>Build your first automation workflow with our visual builder</span>403 </li>404 <li class="flex items-start space-x-3">405 <div class="w-6 h-6 rounded-full bg-sky-100 flex items-center justify-center flex-shrink-0 mt-0.5">406 <span class="text-sky-600 font-semibold text-xs">4</span>407 </div>408 <span>Invite your team members to collaborate</span>409 </li>410 </ul>411 </div>412 413 <div class="space-y-3">414 <button onclick="goToDashboard()" class="btn-gradient w-full py-4 rounded-xl text-white font-semibold text-lg shadow-lg shadow-sky-500/25">415 Go to My Dashboard416 </button>417 <button onclick="goToDocs()" class="w-full py-4 rounded-xl text-slate-700 font-semibold text-lg border-2 border-slate-200 hover:border-sky-500 hover:text-sky-600 transition-all">418 Read Documentation419 </button>420 </div>421 </div>422 </div>423 424 <!-- Sidebar Summary -->425 <div class="lg:col-span-2">426 <div class="glass-card rounded-3xl p-6 sticky top-24">427 <h3 class="font-semibold mb-4">Order Summary</h3>428 429 <div id="summary-content">430 <div class="flex items-center justify-between mb-3">431 <span class="text-slate-600">Plan</span>432 <span class="font-semibold" id="summary-plan">Pro</span>433 </div>434 <div class="flex items-center justify-between mb-3">435 <span class="text-slate-600">Billing</span>436 <span class="font-semibold">Monthly</span>437 </div>438 <div class="border-t border-slate-200 my-4"></div>439 <div class="flex items-center justify-between mb-3">440 <span class="text-slate-600">Subtotal</span>441 <span class="font-semibold" id="summary-price">$29.00</span>442 </div>443 <div class="flex items-center justify-between mb-3 text-emerald-600">444 <span>14-day free trial</span>445 <span class="font-semibold">-$29.00</span>446 </div>447 <div class="border-t border-slate-200 my-4"></div>448 <div class="flex items-center justify-between text-lg font-bold">449 <span>Due today</span>450 <span class="text-emerald-600" id="summary-total">$0.00</span>451 </div>452 <p class="text-xs text-slate-500 mt-2">You'll be charged $29.00/month starting 14 days from now. Cancel anytime.</p>453 </div>454 455 <div class="mt-6 p-4 bg-slate-50 rounded-xl">456 <div class="flex items-start space-x-3">457 <i data-lucide="shield-check" class="w-5 h-5 text-emerald-500 flex-shrink-0 mt-0.5"></i>458 <div>459 <p class="font-medium text-sm">Secure checkout</p>460 <p class="text-xs text-slate-500">Your data is protected with 256-bit SSL encryption</p>461 </div>462 </div>463 </div>464 465 <div class="mt-4 flex items-center justify-center space-x-4 text-slate-400">466 <i data-lucide="credit-card" class="w-6 h-6"></i>467 <i data-lucide="lock" class="w-5 h-5"></i>468 </div>469 </div>470 471 <!-- Testimonials -->472 <div class="mt-6 glass-card rounded-3xl p-6">473 <div class="flex items-center space-x-1 mb-3">474 <i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-current"></i>475 <i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-current"></i>476 <i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-current"></i>477 <i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-current"></i>478 <i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-current"></i>479 </div>480 <p class="text-sm text-slate-600 mb-3">"VibeCodingLabs transformed our operations. We automated 200+ hours of manual work in just 2 weeks."</p>481 <div class="flex items-center space-x-3">482 <div class="w-8 h-8 rounded-full bg-gradient-to-br from-sky-400 to-violet-400"></div>483 <div>484 <p class="font-semibold text-sm">Sarah Chen</p>485 <p class="text-xs text-slate-500">VP Operations, TechCorp</p>486 </div>487 </div>488 </div>489 </div>490 </div>491 </div>492 493 <script>494 lucide.createIcons();495 496 let selectedPlan = 'pro';497 let currentStep = 1;498 499 // Check URL params for pre-selected plan500 const urlParams = new URLSearchParams(window.location.search);501 const planParam = urlParams.get('plan');502 const providerParam = urlParams.get('provider');503 504 if (planParam && ['pro', 'max', 'vibe-expert', 'team', 'enterprise'].includes(planParam)) {505 selectPlan(planParam);506 }507 508 function selectPlan(plan) {509 selectedPlan = plan;510 511 // Update visual selection512 document.querySelectorAll('.plan-card').forEach(card => {513 card.classList.remove('selected', 'border-sky-500', 'border-2');514 card.classList.add('border-slate-200');515 });516 517 document.querySelectorAll('[id^="radio-"]').forEach(radio => {518 radio.classList.remove('border-sky-500');519 radio.classList.add('border-slate-300');520 radio.querySelector('div').classList.add('hidden');521 });522 523 // Select new plan524 document.getElementById(`plan-${plan}`).classList.add('selected', 'border-sky-500', 'border-2');525 document.getElementById(`plan-${plan}`).classList.remove('border-slate-200');526 document.getElementById(`radio-${plan}`).classList.remove('border-slate-300');527 document.getElementById(`radio-${plan}`).classList.add('border-sky-500');528 document.getElementById(`radio-${plan}`).querySelector('div').classList.remove('hidden');529 530 // Update summary531 const planNames = {532 'pro': 'Pro',533 'max': 'Max',534 'vibe-expert': 'Vibe Expert',535 'team': 'Team',536 'enterprise': 'Enterprise'537 };538 539 const planPrices = {540 'pro': '$20.00',541 'max': '$100.00',542 'vibe-expert': '$200.00',543 'team': '$29.00',544 'enterprise': '$250.00'545 };546 547 document.getElementById('summary-plan').textContent = planNames[plan];548 document.getElementById('summary-price').textContent = planPrices[plan];549 550 if (plan === 'team') {551 document.getElementById('summary-total').textContent = '$0.00';552 document.querySelector('.text-emerald-600 span:first-child').textContent = '14-day free trial (per seat)';553 document.querySelector('.text-emerald-600').style.display = 'flex';554 document.querySelector('#summary-content p:last-child').textContent = "You'll be charged $29.00 per seat/month starting 14 days from now. Cancel anytime.";555 } else {556 document.getElementById('summary-total').textContent = '$0.00';557 document.querySelector('.text-emerald-600 span:first-child').textContent = '14-day free trial';558 document.querySelector('.text-emerald-600').style.display = 'flex';559 const price = planPrices[plan];560 document.querySelector('#summary-content p:last-child').textContent = `You'll be charged ${price}/month starting 14 days from now. Cancel anytime.`;561 }562 }563 564 function goToStep(step) {565 // Validate step 1 - all plans now have direct checkout566 567 // Hide all steps568 document.getElementById('step1').classList.add('hidden');569 document.getElementById('step2').classList.add('hidden');570 document.getElementById('step3').classList.add('hidden');571 572 // Show target step573 document.getElementById(`step${step}`).classList.remove('hidden');574 575 // Update indicators576 document.querySelectorAll('.step-indicator').forEach((ind, i) => {577 ind.classList.remove('active', 'completed', 'border-sky-500', 'text-sky-600');578 ind.classList.add('border-slate-300', 'text-slate-500');579 580 if (i + 1 < step) {581 ind.classList.add('completed');582 ind.innerHTML = '<i data-lucide="check" class="w-5 h-5"></i>';583 } else if (i + 1 === step) {584 ind.classList.add('active');585 ind.textContent = step;586 } else {587 ind.textContent = i + 1;588 }589 });590 591 // Update progress bars592 document.getElementById('progress1').style.width = step > 1 ? '100%' : '0%';593 document.getElementById('progress2').style.width = step > 2 ? '100%' : '0%';594 595 // Update text596 document.getElementById('step1-text').className = step >= 1 ? 'font-medium text-sky-600' : 'text-slate-500';597 document.getElementById('step2-text').className = step >= 2 ? 'font-medium text-sky-600' : 'text-slate-500';598 document.getElementById('step3-text').className = step >= 3 ? 'font-medium text-sky-600' : 'text-slate-500';599 600 currentStep = step;601 lucide.createIcons();602 603 // Scroll to top604 window.scrollTo({ top: 0, behavior: 'smooth' });605 }606 607 function completeSignup(e) {608 e.preventDefault();609 610 const btn = document.getElementById('submit-btn');611 btn.innerHTML = '<div class="loading-spinner mr-2"></div><span>Creating your account...</span>';612 btn.disabled = true;613 614 // Simulate API call615 setTimeout(() => {616 goToStep(3);617 }, 2000);618 }619 620 function goToDashboard() {621 alert('Welcome to your VibeCodingLabs dashboard! (This would redirect to the app)');622 }623 624 function goToDocs() {625 window.location.href = 'docs.html';626 }627 </script>628</body>629</html>