🐳 28/03 - 06:43 - Make the 3 price tiers :1. Pro $20/mo2. Max $100/mo3. Vibe Expert $200/moAlso add a Team $29/seat and Enterprise $250/mo
fc99507 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Start Free Trial - VibeCodingLabs</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: linear-gradient(135deg, #f0f9ff 0%, #faf5ff 100%); | |
| min-height: 100vh; | |
| } | |
| .glass-card { | |
| background: rgba(255, 255, 255, 0.9); | |
| backdrop-filter: blur(20px); | |
| border: 1px solid rgba(255, 255, 255, 0.5); | |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1); | |
| } | |
| .btn-gradient { | |
| background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%); | |
| transition: all 0.3s ease; | |
| } | |
| .btn-gradient:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 30px rgba(14, 165, 233, 0.3); | |
| } | |
| .step-indicator { | |
| transition: all 0.3s ease; | |
| } | |
| .step-indicator.active { | |
| background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%); | |
| color: white; | |
| border-color: transparent; | |
| } | |
| .step-indicator.completed { | |
| background: #10b981; | |
| color: white; | |
| border-color: transparent; | |
| } | |
| .input-field { | |
| transition: all 0.3s ease; | |
| border: 2px solid #e2e8f0; | |
| } | |
| .input-field:focus { | |
| border-color: #0ea5e9; | |
| box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1); | |
| } | |
| .plan-card { | |
| transition: all 0.3s ease; | |
| border: 2px solid transparent; | |
| } | |
| .plan-card.selected { | |
| border-color: #0ea5e9; | |
| background: rgba(14, 165, 233, 0.05); | |
| } | |
| .plan-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); | |
| } | |
| .feature-check { | |
| color: #10b981; | |
| } | |
| .loading-spinner { | |
| border: 3px solid #f3f4f6; | |
| border-top: 3px solid #0ea5e9; | |
| border-radius: 50%; | |
| width: 24px; | |
| height: 24px; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .success-animation { | |
| animation: scaleIn 0.5s ease; | |
| } | |
| @keyframes scaleIn { | |
| 0% { transform: scale(0); opacity: 0; } | |
| 50% { transform: scale(1.2); } | |
| 100% { transform: scale(1); opacity: 1; } | |
| } | |
| .progress-bar { | |
| height: 4px; | |
| background: #e2e8f0; | |
| border-radius: 2px; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%); | |
| transition: width 0.5s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="p-4"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full z-50 glass-card border-b border-slate-200/50 top-0 left-0 right-0"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center h-16"> | |
| <a href="index.html" class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 btn-gradient rounded-lg flex items-center justify-center"> | |
| <i data-lucide="zap" class="w-5 h-5 text-white"></i> | |
| </div> | |
| <span class="text-xl font-bold bg-gradient-to-r from-sky-500 to-violet-500 bg-clip-text text-transparent">VibeCodingLabs</span> | |
| </a> | |
| <div class="flex items-center space-x-4"> | |
| <span class="text-sm text-slate-600 hidden sm:block">Questions?</span> | |
| <a href="#" class="text-sm font-medium text-sky-600 hover:text-sky-700">Contact Support</a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="max-w-6xl mx-auto pt-24 pb-12"> | |
| <!-- Progress Steps --> | |
| <div class="mb-12"> | |
| <div class="flex items-center justify-center space-x-4 mb-4"> | |
| <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> | |
| <div class="w-16 h-0.5 bg-slate-200"> | |
| <div id="progress1" class="progress-fill w-0"></div> | |
| </div> | |
| <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> | |
| <div class="w-16 h-0.5 bg-slate-200"> | |
| <div id="progress2" class="progress-fill w-0"></div> | |
| </div> | |
| <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> | |
| </div> | |
| <div class="flex items-center justify-center space-x-12 text-sm"> | |
| <span id="step1-text" class="font-medium text-sky-600">Select Plan</span> | |
| <span id="step2-text" class="text-slate-500">Account Setup</span> | |
| <span id="step3-text" class="text-slate-500">Confirmation</span> | |
| </div> | |
| </div> | |
| <div class="grid lg:grid-cols-5 gap-8"> | |
| <!-- Main Content --> | |
| <div class="lg:col-span-3"> | |
| <!-- Step 1: Select Plan --> | |
| <div id="step1" class="glass-card rounded-3xl p-8"> | |
| <h2 class="text-2xl font-bold mb-2">Choose your plan</h2> | |
| <p class="text-slate-600 mb-6">Start with a 14-day free trial. No credit card required.</p> | |
| <div class="space-y-4 mb-6"> | |
| <!-- Pro Plan --> | |
| <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"> | |
| <div class="absolute -top-3 right-6"> | |
| <span class="bg-sky-500 text-white px-3 py-1 rounded-full text-xs font-semibold">Recommended</span> | |
| </div> | |
| <div class="flex items-start justify-between"> | |
| <div class="flex items-start space-x-4"> | |
| <div class="w-5 h-5 rounded-full border-2 border-sky-500 mt-1 flex items-center justify-center" id="radio-pro"> | |
| <div class="w-2.5 h-2.5 rounded-full bg-sky-500"></div> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-lg">Pro</h3> | |
| <p class="text-slate-600 text-sm">For individuals and small teams</p> | |
| <ul class="mt-3 space-y-1 text-sm text-slate-600"> | |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> 10 workflows</li> | |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> 5,000 tasks/month</li> | |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> Basic AI features</li> | |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> Email support</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-2xl font-bold">$20</div> | |
| <div class="text-sm text-slate-500">/month</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Max Plan --> | |
| <div class="plan-card bg-white rounded-2xl p-6 cursor-pointer border-2 border-slate-200" onclick="selectPlan('max')" id="plan-max"> | |
| <div class="flex items-start justify-between"> | |
| <div class="flex items-start space-x-4"> | |
| <div class="w-5 h-5 rounded-full border-2 border-slate-300 mt-1 flex items-center justify-center" id="radio-max"> | |
| <div class="w-2.5 h-2.5 rounded-full bg-sky-500 hidden"></div> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-lg">Max</h3> | |
| <p class="text-slate-600 text-sm">For growing businesses</p> | |
| <ul class="mt-3 space-y-1 text-sm text-slate-600"> | |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> 50 workflows</li> | |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> 25,000 tasks/month</li> | |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> Advanced AI features</li> | |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> Priority support</li> | |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> Custom integrations</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-2xl font-bold">$100</div> | |
| <div class="text-sm text-slate-500">/month</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Vibe Expert Plan --> | |
| <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"> | |
| <div class="flex items-start justify-between"> | |
| <div class="flex items-start space-x-4"> | |
| <div class="w-5 h-5 rounded-full border-2 border-slate-300 mt-1 flex items-center justify-center" id="radio-vibe-expert"> | |
| <div class="w-2.5 h-2.5 rounded-full bg-sky-500 hidden"></div> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-lg">Vibe Expert</h3> | |
| <p class="text-slate-600 text-sm">For power users and agencies</p> | |
| <ul class="mt-3 space-y-1 text-sm text-slate-600"> | |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> Unlimited workflows</li> | |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> 100,000 tasks/month</li> | |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> Full AI suite</li> | |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> White-label options</li> | |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> Dedicated account manager</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-2xl font-bold">$200</div> | |
| <div class="text-sm text-slate-500">/month</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Team Plan --> | |
| <div class="plan-card bg-white rounded-2xl p-6 cursor-pointer border-2 border-slate-200" onclick="selectPlan('team')" id="plan-team"> | |
| <div class="flex items-start justify-between"> | |
| <div class="flex items-start space-x-4"> | |
| <div class="w-5 h-5 rounded-full border-2 border-slate-300 mt-1 flex items-center justify-center" id="radio-team"> | |
| <div class="w-2.5 h-2.5 rounded-full bg-sky-500 hidden"></div> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-lg">Team</h3> | |
| <p class="text-slate-600 text-sm">Per-seat pricing for teams</p> | |
| <ul class="mt-3 space-y-1 text-sm text-slate-600"> | |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> Unlimited workflows</li> | |
| <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> | |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> Team collaboration</li> | |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> Shared workspaces</li> | |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> Admin controls</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-2xl font-bold">$29</div> | |
| <div class="text-sm text-slate-500">/seat/month</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Enterprise Plan --> | |
| <div class="plan-card bg-white rounded-2xl p-6 cursor-pointer border-2 border-slate-200" onclick="selectPlan('enterprise')" id="plan-enterprise"> | |
| <div class="flex items-start justify-between"> | |
| <div class="flex items-start space-x-4"> | |
| <div class="w-5 h-5 rounded-full border-2 border-slate-300 mt-1 flex items-center justify-center" id="radio-enterprise"> | |
| <div class="w-2.5 h-2.5 rounded-full bg-sky-500 hidden"></div> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-lg">Enterprise</h3> | |
| <p class="text-slate-600 text-sm">For large organizations</p> | |
| <ul class="mt-3 space-y-1 text-sm text-slate-600"> | |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> Unlimited everything</li> | |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> Unlimited tasks</li> | |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> SSO & Advanced security</li> | |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> Custom SLA</li> | |
| <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> 24/7 phone support</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-2xl font-bold">$250</div> | |
| <div class="text-sm text-slate-500">/month</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <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"> | |
| Continue with Selected Plan | |
| </button> | |
| </div> | |
| <!-- Step 2: Account Setup --> | |
| <div id="step2" class="glass-card rounded-3xl p-8 hidden"> | |
| <button onclick="goToStep(1)" class="text-slate-500 hover:text-slate-700 flex items-center space-x-2 mb-4 text-sm"> | |
| <i data-lucide="arrow-left" class="w-4 h-4"></i> | |
| <span>Back to plans</span> | |
| </button> | |
| <h2 class="text-2xl font-bold mb-2">Set up your account</h2> | |
| <p class="text-slate-600 mb-6">Complete your profile to start your free trial.</p> | |
| <form onsubmit="completeSignup(event)" class="space-y-4"> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-slate-700 mb-1">First Name</label> | |
| <input type="text" required class="input-field w-full px-4 py-3 rounded-xl focus:outline-none" placeholder="John"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-slate-700 mb-1">Last Name</label> | |
| <input type="text" required class="input-field w-full px-4 py-3 rounded-xl focus:outline-none" placeholder="Doe"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-slate-700 mb-1">Work Email</label> | |
| <input type="email" required class="input-field w-full px-4 py-3 rounded-xl focus:outline-none" placeholder="you@company.com"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-slate-700 mb-1">Company Name</label> | |
| <input type="text" required class="input-field w-full px-4 py-3 rounded-xl focus:outline-none" placeholder="Acme Inc"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-slate-700 mb-1">Team Size</label> | |
| <select class="input-field w-full px-4 py-3 rounded-xl focus:outline-none bg-white"> | |
| <option>1-10 employees</option> | |
| <option>11-50 employees</option> | |
| <option>51-200 employees</option> | |
| <option>201-500 employees</option> | |
| <option>500+ employees</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-slate-700 mb-1">How did you hear about us?</label> | |
| <select class="input-field w-full px-4 py-3 rounded-xl focus:outline-none bg-white"> | |
| <option>Search engine (Google, Bing, etc.)</option> | |
| <option>Social media</option> | |
| <option>Friend or colleague</option> | |
| <option>Blog or article</option> | |
| <option>Other</option> | |
| </select> | |
| </div> | |
| <div class="pt-4"> | |
| <label class="flex items-start space-x-3 cursor-pointer"> | |
| <input type="checkbox" required class="mt-1 rounded border-slate-300 text-sky-600 focus:ring-sky-500"> | |
| <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> | |
| </label> | |
| </div> | |
| <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"> | |
| <span>Start My Free Trial</span> | |
| <i data-lucide="arrow-right" class="w-5 h-5"></i> | |
| </button> | |
| </form> | |
| </div> | |
| <!-- Step 3: Confirmation --> | |
| <div id="step3" class="glass-card rounded-3xl p-8 hidden text-center"> | |
| <div class="success-animation w-20 h-20 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i data-lucide="check" class="w-10 h-10 text-emerald-600"></i> | |
| </div> | |
| <h2 class="text-2xl font-bold mb-2">You're all set! 🎉</h2> | |
| <p class="text-slate-600 mb-6">Your 14-day free trial has started. Welcome to VibeCodingLabs!</p> | |
| <div class="bg-sky-50 rounded-xl p-6 mb-6 text-left"> | |
| <h3 class="font-semibold mb-3">What's next?</h3> | |
| <ul class="space-y-3 text-sm text-slate-600"> | |
| <li class="flex items-start space-x-3"> | |
| <div class="w-6 h-6 rounded-full bg-sky-100 flex items-center justify-center flex-shrink-0 mt-0.5"> | |
| <span class="text-sky-600 font-semibold text-xs">1</span> | |
| </div> | |
| <span>Check your email for your account confirmation and getting started guide</span> | |
| </li> | |
| <li class="flex items-start space-x-3"> | |
| <div class="w-6 h-6 rounded-full bg-sky-100 flex items-center justify-center flex-shrink-0 mt-0.5"> | |
| <span class="text-sky-600 font-semibold text-xs">2</span> | |
| </div> | |
| <span>Connect your first integration (Slack, Gmail, Salesforce, etc.)</span> | |
| </li> | |
| <li class="flex items-start space-x-3"> | |
| <div class="w-6 h-6 rounded-full bg-sky-100 flex items-center justify-center flex-shrink-0 mt-0.5"> | |
| <span class="text-sky-600 font-semibold text-xs">3</span> | |
| </div> | |
| <span>Build your first automation workflow with our visual builder</span> | |
| </li> | |
| <li class="flex items-start space-x-3"> | |
| <div class="w-6 h-6 rounded-full bg-sky-100 flex items-center justify-center flex-shrink-0 mt-0.5"> | |
| <span class="text-sky-600 font-semibold text-xs">4</span> | |
| </div> | |
| <span>Invite your team members to collaborate</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="space-y-3"> | |
| <button onclick="goToDashboard()" class="btn-gradient w-full py-4 rounded-xl text-white font-semibold text-lg shadow-lg shadow-sky-500/25"> | |
| Go to My Dashboard | |
| </button> | |
| <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"> | |
| Read Documentation | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sidebar Summary --> | |
| <div class="lg:col-span-2"> | |
| <div class="glass-card rounded-3xl p-6 sticky top-24"> | |
| <h3 class="font-semibold mb-4">Order Summary</h3> | |
| <div id="summary-content"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="text-slate-600">Plan</span> | |
| <span class="font-semibold" id="summary-plan">Pro</span> | |
| </div> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="text-slate-600">Billing</span> | |
| <span class="font-semibold">Monthly</span> | |
| </div> | |
| <div class="border-t border-slate-200 my-4"></div> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="text-slate-600">Subtotal</span> | |
| <span class="font-semibold" id="summary-price">$29.00</span> | |
| </div> | |
| <div class="flex items-center justify-between mb-3 text-emerald-600"> | |
| <span>14-day free trial</span> | |
| <span class="font-semibold">-$29.00</span> | |
| </div> | |
| <div class="border-t border-slate-200 my-4"></div> | |
| <div class="flex items-center justify-between text-lg font-bold"> | |
| <span>Due today</span> | |
| <span class="text-emerald-600" id="summary-total">$0.00</span> | |
| </div> | |
| <p class="text-xs text-slate-500 mt-2">You'll be charged $29.00/month starting 14 days from now. Cancel anytime.</p> | |
| </div> | |
| <div class="mt-6 p-4 bg-slate-50 rounded-xl"> | |
| <div class="flex items-start space-x-3"> | |
| <i data-lucide="shield-check" class="w-5 h-5 text-emerald-500 flex-shrink-0 mt-0.5"></i> | |
| <div> | |
| <p class="font-medium text-sm">Secure checkout</p> | |
| <p class="text-xs text-slate-500">Your data is protected with 256-bit SSL encryption</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center justify-center space-x-4 text-slate-400"> | |
| <i data-lucide="credit-card" class="w-6 h-6"></i> | |
| <i data-lucide="lock" class="w-5 h-5"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonials --> | |
| <div class="mt-6 glass-card rounded-3xl p-6"> | |
| <div class="flex items-center space-x-1 mb-3"> | |
| <i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-lucide="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| </div> | |
| <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> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-br from-sky-400 to-violet-400"></div> | |
| <div> | |
| <p class="font-semibold text-sm">Sarah Chen</p> | |
| <p class="text-xs text-slate-500">VP Operations, TechCorp</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| lucide.createIcons(); | |
| let selectedPlan = 'pro'; | |
| let currentStep = 1; | |
| // Check URL params for pre-selected plan | |
| const urlParams = new URLSearchParams(window.location.search); | |
| const planParam = urlParams.get('plan'); | |
| const providerParam = urlParams.get('provider'); | |
| if (planParam && ['pro', 'max', 'vibe-expert', 'team', 'enterprise'].includes(planParam)) { | |
| selectPlan(planParam); | |
| } | |
| function selectPlan(plan) { | |
| selectedPlan = plan; | |
| // Update visual selection | |
| document.querySelectorAll('.plan-card').forEach(card => { | |
| card.classList.remove('selected', 'border-sky-500', 'border-2'); | |
| card.classList.add('border-slate-200'); | |
| }); | |
| document.querySelectorAll('[id^="radio-"]').forEach(radio => { | |
| radio.classList.remove('border-sky-500'); | |
| radio.classList.add('border-slate-300'); | |
| radio.querySelector('div').classList.add('hidden'); | |
| }); | |
| // Select new plan | |
| document.getElementById(`plan-${plan}`).classList.add('selected', 'border-sky-500', 'border-2'); | |
| document.getElementById(`plan-${plan}`).classList.remove('border-slate-200'); | |
| document.getElementById(`radio-${plan}`).classList.remove('border-slate-300'); | |
| document.getElementById(`radio-${plan}`).classList.add('border-sky-500'); | |
| document.getElementById(`radio-${plan}`).querySelector('div').classList.remove('hidden'); | |
| // Update summary | |
| const planNames = { | |
| 'pro': 'Pro', | |
| 'max': 'Max', | |
| 'vibe-expert': 'Vibe Expert', | |
| 'team': 'Team', | |
| 'enterprise': 'Enterprise' | |
| }; | |
| const planPrices = { | |
| 'pro': '$20.00', | |
| 'max': '$100.00', | |
| 'vibe-expert': '$200.00', | |
| 'team': '$29.00', | |
| 'enterprise': '$250.00' | |
| }; | |
| document.getElementById('summary-plan').textContent = planNames[plan]; | |
| document.getElementById('summary-price').textContent = planPrices[plan]; | |
| if (plan === 'team') { | |
| document.getElementById('summary-total').textContent = '$0.00'; | |
| document.querySelector('.text-emerald-600 span:first-child').textContent = '14-day free trial (per seat)'; | |
| document.querySelector('.text-emerald-600').style.display = 'flex'; | |
| document.querySelector('#summary-content p:last-child').textContent = "You'll be charged $29.00 per seat/month starting 14 days from now. Cancel anytime."; | |
| } else { | |
| document.getElementById('summary-total').textContent = '$0.00'; | |
| document.querySelector('.text-emerald-600 span:first-child').textContent = '14-day free trial'; | |
| document.querySelector('.text-emerald-600').style.display = 'flex'; | |
| const price = planPrices[plan]; | |
| document.querySelector('#summary-content p:last-child').textContent = `You'll be charged ${price}/month starting 14 days from now. Cancel anytime.`; | |
| } | |
| } | |
| function goToStep(step) { | |
| // Validate step 1 - all plans now have direct checkout | |
| // Hide all steps | |
| document.getElementById('step1').classList.add('hidden'); | |
| document.getElementById('step2').classList.add('hidden'); | |
| document.getElementById('step3').classList.add('hidden'); | |
| // Show target step | |
| document.getElementById(`step${step}`).classList.remove('hidden'); | |
| // Update indicators | |
| document.querySelectorAll('.step-indicator').forEach((ind, i) => { | |
| ind.classList.remove('active', 'completed', 'border-sky-500', 'text-sky-600'); | |
| ind.classList.add('border-slate-300', 'text-slate-500'); | |
| if (i + 1 < step) { | |
| ind.classList.add('completed'); | |
| ind.innerHTML = '<i data-lucide="check" class="w-5 h-5"></i>'; | |
| } else if (i + 1 === step) { | |
| ind.classList.add('active'); | |
| ind.textContent = step; | |
| } else { | |
| ind.textContent = i + 1; | |
| } | |
| }); | |
| // Update progress bars | |
| document.getElementById('progress1').style.width = step > 1 ? '100%' : '0%'; | |
| document.getElementById('progress2').style.width = step > 2 ? '100%' : '0%'; | |
| // Update text | |
| document.getElementById('step1-text').className = step >= 1 ? 'font-medium text-sky-600' : 'text-slate-500'; | |
| document.getElementById('step2-text').className = step >= 2 ? 'font-medium text-sky-600' : 'text-slate-500'; | |
| document.getElementById('step3-text').className = step >= 3 ? 'font-medium text-sky-600' : 'text-slate-500'; | |
| currentStep = step; | |
| lucide.createIcons(); | |
| // Scroll to top | |
| window.scrollTo({ top: 0, behavior: 'smooth' }); | |
| } | |
| function completeSignup(e) { | |
| e.preventDefault(); | |
| const btn = document.getElementById('submit-btn'); | |
| btn.innerHTML = '<div class="loading-spinner mr-2"></div><span>Creating your account...</span>'; | |
| btn.disabled = true; | |
| // Simulate API call | |
| setTimeout(() => { | |
| goToStep(3); | |
| }, 2000); | |
| } | |
| function goToDashboard() { | |
| alert('Welcome to your VibeCodingLabs dashboard! (This would redirect to the app)'); | |
| } | |
| function goToDocs() { | |
| window.location.href = 'docs.html'; | |
| } | |
| </script> | |
| </body> | |
| </html> |