💰 feat(subscription): update pricing and add discount announcement banner

Update plan prices to $9.99/$19.99/$49.99, show crossed-out original
prices for comparison, and add announcement banner below "Choose Your Plan".

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: bidah

apps/web/components/subscription-modal.tsx

@@ -24,6 +24,7 @@ interface SubscriptionModalProps {
 interface Plan {
   name: string
   price: number
+  originalPrice: number
   period: string
   features: string[]
   productId?: string
@@ -33,7 +34,8 @@ interface Plan {
 const plans: Plan[] = [
   {
     name: 'Start',
-    price: 20,
+    price: 9.99,
+    originalPrice: 20,
     period: 'mo',
     features: [
       '100 messages monthly',
@@ -46,7 +48,8 @@ const plans: Plan[] = [
   },
   {
     name: 'Pro',
-    price: 45,
+    price: 19.99,
+    originalPrice: 45,
     period: 'mo',
     features: [
       '250 messages monthly',
@@ -60,7 +63,8 @@ const plans: Plan[] = [
   },
   {
     name: 'Senior',
-    price: 90,
+    price: 49.99,
+    originalPrice: 90,
     period: 'mo',
     features: [
       '500 messages monthly',
@@ -274,9 +278,10 @@ export function SubscriptionModal({
             <DialogTitle className="text-2xl font-bold text-center">
               {isLoadingStatus ? 'Loading...' : 'Choose Your Plan'}
             </DialogTitle>
-            {/* <DialogDescription className="text-center mt-2">
-              {isLoadingStatus ? 'Checking subscription status...' : 'Select a plan'}
-            </DialogDescription> */}
+            <div className="text-center mt-2 bg-muted border border-border rounded-lg px-4 py-3 text-sm text-foreground">
+              <span className="font-semibold">Announcement: </span>
+              We have halved prices. React Native Vibe Code is now the most affordable vibe coding platform to create React Native apps.
+            </div>
             <Button
               variant="ghost"
               size="icon"
@@ -318,6 +323,9 @@ export function SubscriptionModal({
                         /{plan.period}
                       </span>
                     </div>
+                    <span className="text-sm text-muted-foreground line-through">
+                      ${plan.originalPrice}/{plan.period}
+                    </span>
                   </div>
 
                   <ul className="space-y-3">

packages/payments/src/components/subscription-modal.tsx

@@ -214,6 +214,10 @@ export function SubscriptionModal({
             <DialogTitle className="text-2xl font-bold text-center">
               {isLoadingStatus ? 'Loading...' : 'Choose Your Plan'}
             </DialogTitle>
+            <div className="text-center mt-2 bg-muted border border-border rounded-lg px-4 py-3 text-sm text-foreground">
+              <span className="font-semibold">Announcement: </span>
+              We have halved prices. React Native Vibe Code is now the most affordable vibe coding platform to create React Native apps.
+            </div>
             <Button
               variant="ghost"
               size="icon"
@@ -255,6 +259,9 @@ export function SubscriptionModal({
                         /{plan.period}
                       </span>
                     </div>
+                    <span className="text-sm text-muted-foreground line-through">
+                      ${plan.originalPrice}/{plan.period}
+                    </span>
                   </div>
 
                   <ul className="space-y-3">

packages/payments/src/lib/config.ts

@@ -61,7 +61,8 @@ export const PLANS: Plan[] = [
   {
     name: 'Start',
     slug: 'start',
-    price: 20,
+    price: 9.99,
+    originalPrice: 20,
     period: 'mo',
     messageLimit: 100,
     features: [
@@ -75,7 +76,8 @@ export const PLANS: Plan[] = [
   {
     name: 'Pro',
     slug: 'pro',
-    price: 45,
+    price: 19.99,
+    originalPrice: 45,
     period: 'mo',
     messageLimit: 250,
     features: [
@@ -90,7 +92,8 @@ export const PLANS: Plan[] = [
   {
     name: 'Senior',
     slug: 'senior',
-    price: 90,
+    price: 49.99,
+    originalPrice: 90,
     period: 'mo',
     messageLimit: 500,
     features: [

packages/payments/src/types/index.ts

@@ -15,6 +15,7 @@ export interface Plan {
   name: string
   slug: string
   price: number
+  originalPrice: number
   period: string
   features: string[]
   productId?: string