fix: monthly pricing

Author: izadoesdev

apps/dashboard/components/autumn/pricing-table.tsx

@@ -372,11 +372,29 @@ export const PricingCard = ({
 						<div className="mb-2">
 							<h3 className="mb-4 flex h-16 items-center border-y bg-secondary/40 px-6 font-semibold">
 								<div className="line-clamp-2">
-									{mainPriceDisplay?.primary_text}{' '}
-									{mainPriceDisplay?.secondary_text && (
-										<span className="mt-1 font-normal text-muted-foreground">
-											{mainPriceDisplay?.secondary_text}
-										</span>
+									{product.id === 'hobby' ? (
+										<div className="flex flex-col gap-1">
+											<div className="flex items-center gap-2">
+												<span className="text-muted-foreground text-xs line-through">
+													$10.00
+												</span>
+												<span className="font-medium text-green-600">
+													$2.00
+												</span>
+											</div>
+											<span className="font-medium text-green-600 text-xs">
+												Limited time!
+											</span>
+										</div>
+									) : (
+										<>
+											{mainPriceDisplay?.primary_text}{' '}
+											{mainPriceDisplay?.secondary_text && (
+												<span className="mt-1 font-normal text-muted-foreground">
+													{mainPriceDisplay?.secondary_text}
+												</span>
+											)}
+										</>
 									)}
 								</div>
 							</h3>

apps/docs/app/(home)/pricing/_pricing/table.tsx

@@ -42,9 +42,25 @@ export function PlansComparisonTable({ plans }: Props) {
 									className={`px-4 py-3 text-center text-foreground sm:px-5 lg:px-6 ${p.id === 'pro' ? 'border-border border-x bg-primary/10' : ''}`}
 									key={`price-${p.id}`}
 								>
-									{p.priceMonthly === 0
-										? 'Free'
-										: `$${p.priceMonthly.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`}
+									{p.priceMonthly === 0 ? (
+										'Free'
+									) : p.id === 'hobby' ? (
+										<div className="flex flex-col items-center gap-1">
+											<div className="flex items-center gap-2">
+												<span className="text-muted-foreground text-xs line-through">
+													$10.00
+												</span>
+												<span className="font-medium text-green-600">
+													$2.00
+												</span>
+											</div>
+											<span className="font-medium text-green-600 text-xs">
+												Limited time!
+											</span>
+										</div>
+									) : (
+										`$${p.priceMonthly.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
+									)}
 								</td>
 							))}
 						</tr>

apps/docs/app/(home)/pricing/data.ts

@@ -91,7 +91,7 @@ export const RAW_PLANS: RawPlan[] = [
 			{
 				type: 'price',
 				interval: 'month',
-				price: 1.99,
+				price: 9.99,
 				feature_id: null,
 				feature: null,
 			},