From 11a19c30778e94a079ad3a2e338584d0953b06cd Mon Sep 17 00:00:00 2001
From: Shourya Sinha <144530842+Shouryasinha64@users.noreply.github.com>
Date: Sat, 16 Aug 2025 20:13:43 +0530
Subject: [PATCH 1/2] Update billing cycle toggle.tsx

Updated the billing cycle toggle with smoother animations, customized the teams tiers features based on the real product, and linked the button logic with user authentication so that free plan users cannot directly upgrade.
---
 src/app/pricing/page.tsx | 105 ++++++++++++++++++++++++++++++++++-----
 1 file changed, 93 insertions(+), 12 deletions(-)

diff --git a/src/app/pricing/page.tsx b/src/app/pricing/page.tsx
index 29499f8..f422499 100644
--- a/src/app/pricing/page.tsx
+++ b/src/app/pricing/page.tsx
@@ -6,7 +6,8 @@ import { useState } from 'react'
 
 interface PricingTier {
   name: string
-  price: string
+  monthlyPrice: number     
+  annualPrice: number 
   tokens: string
   description: string
   features: string[]
@@ -15,10 +16,11 @@ interface PricingTier {
   perMember?: boolean
 }
 
-const individualMonthlyTiers: PricingTier[] = [
+const individualTiers: PricingTier[] = [
   {
     name: 'Free',
-    price: '0',
+    monthlyPrice: 0,
+    annualPrice: 0,
     tokens: '240K tokens',
     description: 'Start with a free account to speed up your workflow on public projects',
     features: [
@@ -31,7 +33,8 @@ const individualMonthlyTiers: PricingTier[] = [
   },
   {
     name: 'Pro',
-    price: '20',
+    monthlyPrice: 20,
+    annualPrice: 200,,
     tokens: '10M tokens',
     description: 'Ideal for hobbyists and casual users for light, exploratory use',
     features: [
@@ -44,7 +47,8 @@ const individualMonthlyTiers: PricingTier[] = [
   },
   {
     name: 'Pro 50',
-    price: '50',
+    monthlyPrice: 50,
+    annualPrice: 500,
     tokens: '26M tokens',
     description: 'Designed for professionals who need to use Bolt a few times per week',
     features: [
@@ -57,7 +61,8 @@ const individualMonthlyTiers: PricingTier[] = [
   },
   {
     name: 'Pro 100',
-    price: '100',
+    monthlyPrice: 100,
+    annualPrice: 1000,
     tokens: '55M tokens',
     description: 'Perfect for heavy users looking to enhance daily workflows',
     features: [
@@ -70,10 +75,49 @@ const individualMonthlyTiers: PricingTier[] = [
   }
 ]
 
+const teamTiers: PricingTier[] = [
+  {
+    name: 'Team Starter',
+    monthlyPrice: 150,
+    annualPrice: 1500,
+    tokens: '200M tokens',
+    description: 'For small teams looking to collaborate',
+    features: [
+      'Up to 10 members',
+      'Shared environments',
+      'Team analytics',
+      'Standard support'
+    ],
+    bg: 'from-yellow-600 to-orange-500',
+    button: 'Upgrade Team',
+    perMember: true
+  },
+  {
+    name: 'Team Pro',
+    monthlyPrice: 400,
+    annualPrice: 4000,
+    tokens: '1B tokens',
+    description: 'For larger teams with advanced needs',
+    features: [
+      'Unlimited members',
+      'Advanced analytics',
+      'SSO Integration',
+      'Priority support'
+    ],
+    bg: 'from-red-600 to-pink-600',
+    button: 'Upgrade Team Pro',
+    perMember: true
+  }
+]
+
 export default function Pricing() {
   const router = useRouter()
   const [showTeams, setShowTeams] = useState(false)
-  const [billingCycle, setBillingCycle] = useState('annual')
+  const isAuthenticated = false
+  const currentPlan = 'Free'
+
+  const tiers = showTeams ? teamTiers : individualTiers
+
 
   return (
     <div className="min-h-screen bg-black py-20 px-4">
@@ -95,8 +139,42 @@ export default function Pricing() {
           Start with a free account to speed up your workflow on public projects or boost your entire team with instantly-opening production environments.
         </motion.p>
 
-        <div className="grid gap-6 mb-20 md:grid-cols-2 lg:grid-cols-4">
-          {individualMonthlyTiers.map((tier, index) => (
+        {/* Billing Cycle Toggle */}
+        <div className="flex justify-center items-center gap-4 mb-10">
+          <span className={`text-lg ${billingCycle === 'monthly' ? 'text-white' : 'text-gray-500'}`}>Monthly</span>
+          <motion.div 
+            className="relative w-14 h-7 bg-gray-700 rounded-full cursor-pointer"
+            onClick={() => setBillingCycle(billingCycle === 'monthly' ? 'annual' : 'monthly')}
+            initial={false}
+            animate={{ backgroundColor: billingCycle === 'annual' ? '#4ade80' : '#374151' }}
+          >
+            <motion.div 
+              className="absolute top-0.5 w-6 h-6 bg-white rounded-full shadow-md"
+              animate={{ x: billingCycle === 'annual' ? 28 : 2 }}
+              transition={{ type: 'spring', stiffness: 300 }}
+            />
+          </motion.div>
+          <span className={`text-lg ${billingCycle === 'annual' ? 'text-white' : 'text-gray-500'}`}>Annual</span>
+        </div>
+
+        {/* Toggle between Individual and Teams */}
+        <div className="flex justify-center gap-6 mb-12">
+          <button 
+            className={`px-4 py-2 rounded-lg ${!showTeams ? 'bg-cyan-600 text-white' : 'bg-gray-800 text-gray-300'}`}
+            onClick={() => setShowTeams(false)}
+          >
+            Individual
+          </button>
+          <button 
+            className={`px-4 py-2 rounded-lg ${showTeams ? 'bg-cyan-600 text-white' : 'bg-gray-800 text-gray-300'}`}
+            onClick={() => setShowTeams(true)}
+          >
+            Teams
+          </button>
+        </div>    
+        
+        <div className="grid gap-6 mb-20 md:grid-cols-2 lg:grid-cols-3">
+          {tiers.map((tier, index) => (
             <motion.div
               key={`${tier.name}-${index}`}
               className={`bg-gradient-to-br ${tier.bg} p-0.5 rounded-2xl shadow-xl`}
@@ -110,7 +188,8 @@ export default function Pricing() {
                 
                 <div className="mb-6">
                   <div className="text-4xl font-bold text-white">
-                    ${tier.price}<span className="text-lg">/month</span>
+                    ${billingCycle === 'monthly' ? tier.monthlyPrice : tier.annualPrice}
+                    <span className="text-lg">/{billingCycle}</span>
                   </div>
                   <div className="text-gray-300">{tier.tokens}</div>
                 </div>
@@ -128,7 +207,9 @@ export default function Pricing() {
 
                 <button
                   onClick={() => {
-                    if (tier.name !== 'Free') {
+                    if (!isAuthenticated) {
+                      router.push('/login')
+                    }else if (currentPlan === 'Free' && tier.name !== 'Free') {
                       router.push('/checkout')
                     }
                   }}
@@ -147,4 +228,4 @@ export default function Pricing() {
       </div>
     </div>
   )
-}
\ No newline at end of file
+}

From 3d0368f311d5b474f41a6180fe6e9822665b2a3d Mon Sep 17 00:00:00 2001
From: Shourya Sinha <144530842+Shouryasinha64@users.noreply.github.com>
Date: Sun, 17 Aug 2025 21:01:05 +0530
Subject: [PATCH 2/2] Update page.tsx