Team Ai
Apppublic

VibeCodingStudio/deepsite-project-ioalg

sourceHugging Faceupdated 7mo agoView on Hugging Face
0likes
checkout.html629 linesDownload Raw Back to root
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>