Added credits wording

Author: nang-dev

Diff for: components/pricing.tsx

@@ -116,7 +116,7 @@ const PricingTier: React.FC<ExtendedPricingTierProps> = ({
       return (
         <div className="flex items-center">
           <span>
-            Monthly refill of PearAI Credits for market-leading AI models
+            Monthly refill of credits for market-leading AI models
             <PearCreditsTooltip type="standard" />
           </span>
         </div>
@@ -140,6 +140,24 @@ const PricingTier: React.FC<ExtendedPricingTierProps> = ({
           </span>
         </div>
       );
+    } else if (feature?.startsWith("Pay-as-you-go")) {
+      return (
+        <div className="flex items-center">
+          <span>
+            Pay-as-you-go for additional credits
+            <PayAsYouGoTooltip />
+          </span>
+        </div>
+      );
+    } else if (feature?.startsWith("Full access to PearAI Router")) {
+      return (
+        <div className="flex items-center">
+          <span>
+            Full access to PearAI Router & Hosted Servers
+            <ServerAccessTooltip />
+          </span>
+        </div>
+      );
     }
     return feature;
   };
@@ -161,8 +179,8 @@ const PricingTier: React.FC<ExtendedPricingTierProps> = ({
           <CardTitle className="text-2xl leading-6 text-primary-700">
             {title}
             &nbsp;
-            {index === 1 && title === "Junior Engineer" && "(Monthly)"}
-            {index === 2 && title === "10x Engineer" && "(Yearly)"}
+            {index === 1 && title === "Maker" && "(Monthly)"}
+            {index === 2 && title === "10x Maker" && "(Yearly)"}
           </CardTitle>
           <p className="text-base font-normal text-gray-600 sm:text-base md:text-sm">
             {index === 0 && isFree && (
@@ -401,9 +419,9 @@ const PricingPage: React.FC<PricingPageProps> = ({ user }) => {
               id="pricing-heading"
               className="mt-8 text-4xl font-medium leading-tight sm:text-4xl md:text-4xl lg:text-4xl"
             >
-              Speed up your
+              Make your next
               <br />
-              development today.
+              project today.
             </h1>
           </header>
 
@@ -540,17 +558,6 @@ export default PricingPage;
 export const PearCreditsTooltip = ({ type }: { type: string }) => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const pearCreditsCount = useMemo(() => {
-    return (type: string) => {
-      if (type === "free") {
-        return "50";
-      } else if (type === "enterprise") {
-        return "1000";
-      }
-      return "700";
-    };
-  }, []);
-
   return (
     <TooltipProvider>
       <Tooltip open={isOpen} onOpenChange={setIsOpen} delayDuration={50}>
@@ -562,43 +569,73 @@ export const PearCreditsTooltip = ({ type }: { type: string }) => {
         </TooltipTrigger>
         <TooltipContent sideOffset={5}>
           <p className="max-w-[250px]">
-            Current built-in models for this plan include
+            Current built-in models for this plan include (but not limited to)
             <ul className="list-disc pl-4">
-              <li>Claude 3.5 Sonnet (new)</li>
+              <li>PearAI Model</li>
+              <li>Claude 3.5 Sonnet</li>
               <li>GPT4o</li>
-              <li>GPT o1-preview</li>
-              <li>GPT o1-mini</li>
+              <li>Deepseek R1</li>
+              <li>o1</li>
+              <li>o3-mini</li>
               <li>Gemini 1.5 Pro</li>
               <li>Claude 3.5 Haiku (unlimited)</li>
             </ul>
             <br />
-            Your PearAI Credits usage depend on your prompt input and output
-            sizes. On average, this equates to around {pearCreditsCount(
-              type,
-            )}{" "}
-            requests{type === "free" && " for our current free trial"}. For more
-            info on usage. see{" "}
+            Your PearAI Credits usage depends on the price of the underlying
+            LLM, and your prompt&apos;s input and output sizes.
+          </p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};
+
+export const PayAsYouGoTooltip = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (
+    <TooltipProvider>
+      <Tooltip open={isOpen} onOpenChange={setIsOpen} delayDuration={50}>
+        <TooltipTrigger asChild>
+          <Info
+            className="mb-0.5 ml-1 inline-flex h-4 w-4 flex-shrink-0 cursor-pointer"
+            onClick={() => setIsOpen((prev) => !prev)}
+          />
+        </TooltipTrigger>
+        <TooltipContent sideOffset={5}>
+          <p className="max-w-[250px]">
+            If you happen to run out of credits (which is unlikely), you can
+            switch to a{" "}
             <Link
+              href="/pay-as-you-go"
               className="text-primary-700 hover:text-primary-800"
-              href="/docs/models-and-usage"
             >
-              here
+              pay-as-you-go extra credit plan
             </Link>
-            .
-            {type !== "free" && (
-              <>
-                <br /> <br />
-                If you happen to run out of credits (which is unlikely), you can
-                switch to a{" "}
-                <Link
-                  href="/pay-as-you-go"
-                  className="text-primary-700 hover:text-primary-800"
-                >
-                  pay-as-you-go extra credit plan
-                </Link>
-                , or use our free model for unlimited requests.
-              </>
-            )}
+            , or use PearAI Mini free model for unlimited requests.
+          </p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};
+
+export const ServerAccessTooltip = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (
+    <TooltipProvider>
+      <Tooltip open={isOpen} onOpenChange={setIsOpen} delayDuration={50}>
+        <TooltipTrigger asChild>
+          <Info
+            className="mb-0.5 ml-1 inline-flex h-4 w-4 flex-shrink-0 cursor-pointer"
+            onClick={() => setIsOpen((prev) => !prev)}
+          />
+        </TooltipTrigger>
+        <TooltipContent sideOffset={5}>
+          <p className="max-w-[250px]">
+            No need to configure and manage different API&apos;s and tools,
+            PearAI will work out of the box.
           </p>
         </TooltipContent>
       </Tooltip>

Diff for: components/topup-modal.tsx

@@ -112,8 +112,9 @@ export default function TopUpModal() {
                       <Tooltip>
                         <TooltipContent className="-ml-9 max-w-[200px] border-gray-300 bg-white-50 text-center text-xs text-gray-700 dark:border-gray-200 dark:bg-secondary-main dark:text-gray-800">
                           <p>
-                            Your PearAI Credits usage depend on your prompt
-                            input and output sizes.
+                            Your PearAI Credits usage depends on the price of
+                            the underlying LLM, and your prompt&apos;s input and
+                            output sizes.
                           </p>
                         </TooltipContent>
                       </Tooltip>

Diff for: utils/constants.ts

@@ -20,7 +20,7 @@ const NEXT_PUBLIC_STRIPE_WAITLIST_PRICE_ID_TEST =
 const NEXT_PUBLIC_STRIPE_MONTHLY_PRICE_ID = "price_1PoZiZ08N4O93LU5kCrdrXvI";
 const NEXT_PUBLIC_STRIPE_MONTHLY_PRICE_ID_TEST =
   "price_1Ppa9408N4O93LU5irNxLp5p";
-const NEXT_PUBLIC_STRIPE_ANNUAL_PRICE_ID = "price_1PpZUO08N4O93LU5FYFUyh43";
+const NEXT_PUBLIC_STRIPE_ANNUAL_PRICE_ID = "price_1Qvnlr08N4O93LU5W6LgZcge";
 const NEXT_PUBLIC_STRIPE_ANNUAL_PRICE_ID_TEST =
   "price_1PZUSi08N4O93LU5UVdlkfp2";
 
@@ -81,29 +81,30 @@ export const PRICING_TIERS: {
       features: ["free", "Community Discord server"],
     },
     {
-      title: "Junior Engineer",
+      title: "Maker",
       price: "15",
       prevPrice: "18",
       description:
         "Get the monthly subscription, and we'll take care of you. 😎",
       features: [
+        "Full access to PearAI Router & Hosted Servers",
         "custom-standard",
         "Full privacy: zero data retention policy with Anthropic",
         "Direct customer support by the founders and contributors",
-        "Private Discord channel",
+        "Pay-as-you-go for additional credits",
       ],
       buttonText: "Get Started",
       priceId: STRIPE_PRICE_IDS.MONTHLY,
       index: 1,
     },
     {
-      title: "10x Engineer",
-      price: "10",
-      prevPrice: "14",
+      title: "10x Maker",
+      price: "12",
+      prevPrice: "15",
       description:
         "Pay one lump sum yearly, and you'll be treated like our VIP! 🤩",
       features: [
-        "Everything from monthly",
+        "Everything from monthly but lower price",
         "Priority for new feature requests",
         "Early access to new features",
       ],
@@ -124,7 +125,6 @@ export const PRICING_TIERS: {
         "Full privacy: zero data retention policy with Anthropic",
         "Centralized Billing and Dashboard",
         "Direct customer support by the founders and contributors",
-        "Private Discord Channel",
       ],
       buttonText: "Get Started",
       priceId: STRIPE_PRICE_IDS.MONTHLY,