🐳 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

checkout.html

@@ -165,54 +165,108 @@
                     <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">
-                        <!-- Starter Plan -->
-                        <div class="plan-card bg-white rounded-2xl p-6 cursor-pointer border-2 border-slate-200" onclick="selectPlan('starter')" id="plan-starter">
+                        <!-- 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-slate-300 mt-1 flex items-center justify-center" id="radio-starter">
+                                    <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">Starter</h3>
-                                        <p class="text-slate-600 text-sm">For individuals and small projects</p>
+                                        <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> 3 workflows</li>
-                                            <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> 100 tasks/month</li>
-                                            <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> Basic integrations</li>
+                                            <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">Free</div>
-                                    <div class="text-sm text-slate-500">forever</div>
+                                    <div class="text-2xl font-bold">$100</div>
+                                    <div class="text-sm text-slate-500">/month</div>
                                 </div>
                             </div>
                         </div>
 
-                        <!-- 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>
+                        <!-- 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-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 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">Pro</h3>
-                                        <p class="text-slate-600 text-sm">For growing teams and businesses</p>
+                                        <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> 10,000 tasks/month</li>
-                                            <li class="flex items-center"><i data-lucide="check" class="w-4 h-4 feature-check mr-2"></i> AI-powered 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> 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">/month</div>
+                                    <div class="text-sm text-slate-500">/seat/month</div>
                                 </div>
                             </div>
                         </div>
@@ -228,16 +282,17 @@
                                         <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> Everything in Pro</li>
+                                            <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> Dedicated account manager</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">Custom</div>
-                                    <div class="text-sm text-slate-500">contact sales</div>
+                                    <div class="text-2xl font-bold">$250</div>
+                                    <div class="text-sm text-slate-500">/month</div>
                                 </div>
                             </div>
                         </div>
@@ -446,7 +501,7 @@
         const planParam = urlParams.get('plan');
         const providerParam = urlParams.get('provider');
         
-        if (planParam && ['starter', 'pro', 'enterprise'].includes(planParam)) {
+        if (planParam && ['pro', 'max', 'vibe-expert', 'team', 'enterprise'].includes(planParam)) {
             selectPlan(planParam);
         }
 
@@ -474,38 +529,40 @@
             
             // Update summary
             const planNames = {
-                'starter': 'Starter',
                 'pro': 'Pro',
+                'max': 'Max',
+                'vibe-expert': 'Vibe Expert',
+                'team': 'Team',
                 'enterprise': 'Enterprise'
             };
             
             const planPrices = {
-                'starter': '$0.00',
-                'pro': '$29.00',
-                'enterprise': 'Custom'
+                '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 === 'starter') {
+            if (plan === 'team') {
                 document.getElementById('summary-total').textContent = '$0.00';
-                document.querySelector('.text-emerald-600').style.display = 'none';
-            } else if (plan === 'enterprise') {
-                document.getElementById('summary-total').textContent = 'Contact sales';
-                document.querySelector('.text-emerald-600').style.display = 'none';
+                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
-            if (step === 2 && selectedPlan === 'enterprise') {
-                alert('Our sales team will contact you shortly about Enterprise pricing!');
-                return;
-            }
+            // Validate step 1 - all plans now have direct checkout
             
             // Hide all steps
             document.getElementById('step1').classList.add('hidden');