From a44d103484d6c894117222207e05073829713f70 Mon Sep 17 00:00:00 2001
From: Kushagra Gour <chinchang457@gmail.com>
Date: Fri, 3 May 2024 14:06:10 +0530
Subject: [PATCH] copy: add annual lifetime pricing hint

---
 src/components/Pro.jsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/Pro.jsx b/src/components/Pro.jsx
index 0f956cd..ded798e 100644
--- a/src/components/Pro.jsx
+++ b/src/components/Pro.jsx
@@ -53,6 +53,7 @@ export function Pro({ user, onLoginClick }) {
 			<Stack gap={2} align="stretch">
 				<Card
 					price="Free"
+					subTitle="&nbsp;"
 					name="Starter"
 					features={[
 						'Unlimited private creations',
@@ -63,6 +64,7 @@ export function Pro({ user, onLoginClick }) {
 				<Card
 					bg="#674dad"
 					price={'Starting $6/mo'}
+					subTitle="Annual & One-time pricing available"
 					name="Pro"
 					action={
 						window.user ? (
@@ -105,7 +107,7 @@ export function Pro({ user, onLoginClick }) {
 	);
 }
 
-const Card = ({ bg, name, price, action, features }) => {
+const Card = ({ bg, name, price, subTitle, action, features }) => {
 	return (
 		<div class="plan-card" style={{ background: bg }}>
 			<VStack gap={2} align="stretch" justify="flex-start">
@@ -114,9 +116,11 @@ const Card = ({ bg, name, price, action, features }) => {
 						{name}
 					</Text>
 					<Text size="5" weight="800" appearance="primary">
-						{' '}
 						{price}
 					</Text>
+					<Text size="1" weight="400">
+						{subTitle}
+					</Text>
 				</VStack>
 				{action}
 				{!action && (