pricing page updates (#1643)

* init

* more updates

* typo

* updates with credits

* update

* yearly

* just pro

* just pro

* update

* updates

* fix custom

* hide yearly

* preview btn change

* .png -> .webp

* Update pricing calculator with new credit calculation logic and UI improvements

---------

Co-authored-by: Ahmad Hakim <[email protected]>
Co-authored-by: Alek Petuskey <[email protected]>

Author: 3 people

assets/landing/video/video_demo.webp

@@ -7,7 +7,7 @@ def discord() -> rx.Component:
     return rx.link(
         get_icon(icon="discord_navbar", class_name="shrink-0 !text-slate-9"),
         custom_attrs={"aria-label": "Discord link"},
-        class_name="hover:bg-slate-3 size-8 text-slate-9 flex justify-center items-center rounded-[10px] border border-solid border-slate-5 bg-slate-1 transition-bg cursor-pointer shadow-large py-0.5 px-3 hover:!text-slate-9",
+        class_name="hover:bg-slate-3 size-8 text-slate-9 flex justify-center items-center rounded-[10px] border border-solid border-slate-5 bg-slate-1 transition-bg cursor-pointer py-0.5 px-3 hover:!text-slate-9",
         underline="none",
         href=DISCORD_URL,
     )

pcweb/components/docpage/navbar/buttons/discord.py

@@ -12,7 +12,7 @@ def github() -> rx.Component:
                 GithubStarState.stars_short,
                 class_name="font-small",
             ),
-            class_name="text-slate-9 flex-row gap-2 hover:bg-slate-3 flex justify-center rounded-[10px] border border-slate-5 bg-slate-1 transition-bg cursor-pointer shadow-large py-0.5 px-3 items-center h-8",
+            class_name="text-slate-9 flex-row gap-2 hover:bg-slate-3 flex justify-center rounded-[10px] border border-slate-5 bg-slate-1 transition-bg cursor-pointer py-0.5 px-3 items-center h-8",
         ),
         href=GITHUB_URL,
         underline="none",

pcweb/components/docpage/navbar/buttons/github.py

@@ -246,8 +246,8 @@ def keyboard_shortcut_script() -> rx.Component:
 def search_trigger() -> rx.Component:
     """Render the search trigger button."""
     return rx.box(
-        rx.icon(
-            "search",
+        ui.icon(
+            "Search01Icon",
             class_name="md:absolute md:left-2 md:top-1/2 md:transform md:-translate-y-1/2 text-md w-4 h-4 flex-shrink-0 !text-slate-9",
         ),
         rx.text(
@@ -257,7 +257,7 @@ def search_trigger() -> rx.Component:
         rx.el.input(
             placeholder="Search",
             read_only=True,
-            class_name="bg-transparent border-none outline-none focus:outline-none pl-4 cursor-pointer hidden md:block",
+            class_name="bg-transparent border-none outline-none focus:outline-none pl-4 cursor-pointer hidden md:block font-medium",
         ),
         class_name="py-[6px] md:px-[12px] w-8 md:w-full hover:bg-slate-3 cursor-pointer flex items-center justify-center h-8 border border-slate-5 rounded-[10px] bg-slate-1 transition-bg relative",
     )

pcweb/components/docpage/navbar/typesense.py

@@ -0,0 +1,54 @@
+import reflex as rx
+
+
+class NumberFlow(rx.Component):
+    library = "@number-flow/react"
+
+    tag = "NumberFlow"
+
+    is_default = True
+
+    # The numeric value to display and animate
+    # NumberFlow will automatically transition when this prop changes
+    value: rx.Var[int | str | float]
+
+    # The locale(s) for number formatting (e.g., "en-US", "de-DE")
+    # Accepts Intl.LocalesArgument format
+    # Default: "en-US"
+    locales: rx.Var[str] = rx.Var.create("en-US")
+
+    # Custom prefix string to display before the number
+    # Example: "$" for currency display
+    prefix: rx.Var[str]
+
+    # Custom suffix string to display after the number
+    # Example: "/mo" for monthly pricing, "%" for percentages
+    suffix: rx.Var[str]
+
+    # If true, NumberFlow's transitions are isolated from other layout changes
+    # that may occur in the same update. Has no effect when inside NumberFlowGroup.
+    # Default: false
+    isolate: rx.Var[bool]
+
+    # Controls whether animations are enabled
+    # Can be set to false to disable all animations and finish current ones
+    # Useful for scenarios like input fields where you want instant updates
+    # Default: true
+    animated: rx.Var[bool]
+
+    # If true, applies CSS will-change properties to relevant elements
+    # Useful if your number changes frequently or you experience unwanted repositioning
+    # Note: Excessive use can result in excessive memory usage
+    # Default: false
+    will_change: rx.Var[bool]
+
+    # Controls the direction of digit animations
+    # "+1": digits always go up
+    # "0": each digit goes up if increasing, down if decreasing (no overall trend)
+    # "-1": digits always go down
+    # Can also be a function: (oldValue: number, value: number) => number
+    # Default: "+1" (which corresponds to Math.sign(value - oldValue))
+    trend: rx.Var[str] = rx.Var.create("+1")
+
+
+number_flow = NumberFlow.create

pcweb/components/number_flow.py

@@ -99,3 +99,13 @@
 POSTHOG_API_KEY = os.getenv("POSTHOG_API_KEY")
 
 SLACK_DEMO_WEBHOOK_URL: str = os.environ.get("SLACK_DEMO_WEBHOOK_URL")
+
+# Pricing
+PRO_TIERS_TABLE = {
+    "Pro 50": {"price": 50, "credits": 1000},
+    "Pro 100": {"price": 100, "credits": 2000},
+    "Pro 250": {"price": 250, "credits": 5000},
+    "Pro 500": {"price": 500, "credits": 10000},
+    "Pro 750": {"price": 750, "credits": 15000},
+    "Pro 1000": {"price": 1000, "credits": 20000},
+}

pcweb/constants.py

@@ -1,15 +1,21 @@
 import reflex as rx
-
+from reflex.experimental.client_state import ClientStateVar
 from pcweb.components.tabs import tabs
+import reflex_ui as ui
+
+collapsed_calculator_cs = ClientStateVar.create("collapsed_calculator", default=True)
+
+CREDITS_PER_HOUR_CPU = 0.2
+CREDITS_PER_HOUR_GB = 0.5
 
 COMPUTE_TABLE = {
-    "c1m.5": {"vcpu": 1, "ram": 0.5, "pph": 0.046},
-    "c1m1": {"vcpu": 1, "ram": 1, "pph": 0.083},
-    "c1m2": {"vcpu": 1, "ram": 2, "pph": 0.157},
-    "c2m2": {"vcpu": 2, "ram": 2, "pph": 0.166},
-    "c2m4": {"vcpu": 2, "ram": 4, "pph": 0.312},
-    "c4m4": {"vcpu": 4, "ram": 4, "pph": 0.332},
-    "c4m8": {"vcpu": 4, "ram": 8, "pph": 0.625},
+    "c1m.5": {"vcpu": 1, "ram": 0.5},
+    "c1m1": {"vcpu": 1, "ram": 1},
+    "c1m2": {"vcpu": 1, "ram": 2},
+    "c2m2": {"vcpu": 2, "ram": 2},
+    "c2m4": {"vcpu": 2, "ram": 4},
+    "c4m4": {"vcpu": 4, "ram": 4},
+    "c4m8": {"vcpu": 4, "ram": 8},
 }
 
 
@@ -18,20 +24,30 @@ def table_header(cost_text: str) -> rx.Component:
         rx.text("Machine", class_name="text-sm font-semibold text-slate-12"),
         rx.text("vCPU", class_name="text-sm font-semibold text-slate-12"),
         rx.text("GB RAM", class_name="text-sm font-semibold text-slate-12"),
-        rx.text(cost_text, class_name="text-sm font-semibold text-slate-12 text-end"),
+        rx.el.div(
+            ui.icon("StarCircleIcon", class_name="text-slate-9 size-4"),
+            rx.text(
+                cost_text, class_name="text-sm font-semibold text-slate-12 text-end"
+            ),
+            class_name="flex flex-row gap-1 items-center justify-end",
+        ),
         class_name="grid grid-cols-4 gap-4 px-6 py-3 border-b border-slate-4",
     )
 
 
-def table_row(name: str, cpu: str, ram: str, cost: str) -> rx.Component:
+def table_row(name: str, cpu: str, ram: str, cost: str | rx.Component) -> rx.Component:
     return rx.box(
         rx.box(
             name,
             class_name="px-2 w-fit text-slate-12 border-slate-6 h-5 rounded-md border justify-start items-center gap-0.5 inline-flex bg-slate-1 text-sm font-medium shrink-0",
         ),
         rx.text(cpu, class_name="font-medium text-sm text-slate-9"),
         rx.text(ram, class_name="font-medium text-sm text-slate-9"),
-        rx.text(cost, class_name="font-medium text-sm text-slate-9 text-end"),
+        (
+            rx.text(cost, class_name="font-medium text-sm text-slate-9 text-end")
+            if isinstance(cost, str)
+            else cost
+        ),
         class_name="grid grid-cols-4 gap-4 px-6 py-2 border-b border-slate-4 hover:bg-slate-2",
     )
 
@@ -48,7 +64,6 @@ def learn_more():
             " only when your app is being used.",
             class_name="text-sm font-medium text-slate-9",
         ),
-        class_name="px-6 py-4 border-b border-slate-4 hover:bg-slate-2",
     )
 
 
@@ -60,11 +75,16 @@ def min_table(cost_text: str, description: bool = False) -> rx.Component:
                 name,
                 str(specs["vcpu"]),
                 str(specs["ram"]),
-                f"${specs['pph'] / 60:.6f}",
+                rx.el.span(
+                    rx.el.span(
+                        f"{(specs['vcpu'] * CREDITS_PER_HOUR_CPU + specs['ram'] * CREDITS_PER_HOUR_GB) / 60:.3f}",
+                        class_name="font-medium text-sm text-slate-9",
+                    ),
+                    class_name="flex flex-row gap-1 items-center justify-end",
+                ),
             )
             for name, specs in COMPUTE_TABLE.items()
         ],
-        learn_more() if description else rx.fragment(),
         class_name="w-full",
     )
 
@@ -77,11 +97,16 @@ def hour_table(cost_text: str, description: bool = False) -> rx.Component:
                 name,
                 str(specs["vcpu"]),
                 str(specs["ram"]),
-                f"${specs['pph']:.3f}",
+                rx.el.span(
+                    rx.el.span(
+                        f"{specs['vcpu'] * CREDITS_PER_HOUR_CPU + specs['ram'] * CREDITS_PER_HOUR_GB:.3f}",
+                        class_name="font-medium text-sm text-slate-9",
+                    ),
+                    class_name="flex flex-row gap-1 items-center justify-end",
+                ),
             )
             for name, specs in COMPUTE_TABLE.items()
         ],
-        learn_more() if description else rx.fragment(),
         class_name="w-full",
     )
 
@@ -94,7 +119,13 @@ def month_table(cost_text: str) -> rx.Component:
                 name,
                 str(specs["vcpu"]),
                 str(specs["ram"]),
-                f"${specs['price_per_min'] * 60 * 24 * 30:.2f}",
+                rx.el.span(
+                    rx.el.span(
+                        f"{specs['vcpu'] * CREDITS_PER_HOUR_CPU + specs['ram'] * CREDITS_PER_HOUR_GB:.3f}",
+                        class_name="font-medium text-sm text-slate-9",
+                    ),
+                    class_name="flex flex-row gap-1 items-center justify-end",
+                ),
             )
             for name, specs in COMPUTE_TABLE.items()
         ],
@@ -106,17 +137,7 @@ def compute_table() -> rx.Component:
     return rx.box(
         tabs.root(
             rx.box(
-                rx.box(
-                    rx.el.h3(
-                        "Compute Pricing",
-                        class_name="text-slate-12 text-3xl font-semibold",
-                    ),
-                    rx.el.p(
-                        "Only pay when your app is being used, nothing more.",
-                        class_name="text-slate-9 text-lg font-semibold text-center lg:text-start text-balance",
-                    ),
-                    class_name="flex flex-col gap-1 justify-center items-center lg:items-start lg:justify-start",
-                ),
+                learn_more(),
                 tabs.list(
                     tabs.tab(
                         "Per min",
@@ -131,16 +152,17 @@ def compute_table() -> rx.Component:
                 class_name="flex flex-col lg:flex-row gap-4 items-center justify-center lg:justify-between p-6 border-b border-slate-4",
             ),
             tabs.panel(
-                min_table("Cost / min", description=True),
+                min_table("Credits / min", description=True),
                 value="min",
             ),
             tabs.panel(
-                hour_table("Cost / hour", description=True),
+                hour_table("Credits / hour", description=True),
                 value="hour",
             ),
             default_value="min",
         ),
-        class_name="flex flex-col w-full mt-5 py-24",
+        class_name="flex flex-col w-full relative data-[collapsed=true]:max-h-[11.5rem] data-[collapsed=true]:overflow-hidden transition-all",
+        data_collapsed=collapsed_calculator_cs.value,
     )
 
 
@@ -171,11 +193,11 @@ def compute_table_base() -> rx.Component:
                 class_name="flex flex-row gap-2 items-center justify-end pb-6 border-b border-slate-4",
             ),
             tabs.panel(
-                min_table("Cost / min"),
+                min_table("Credits / min"),
                 value="min",
             ),
             tabs.panel(
-                hour_table("Cost / hour"),
+                hour_table("Credits / hour"),
                 value="hour",
             ),
             default_value="min",
@@ -187,5 +209,35 @@ def compute_table_base() -> rx.Component:
 def calculator_section() -> rx.Component:
     return rx.el.section(
         compute_table(),
-        class_name="flex flex-col w-full max-w-[64.19rem] 2xl:border-x border-slate-4 2xl:border-t 2xl:border-b pb-[6rem] justify-center items-center",
+        rx.el.div(
+            rx.cond(
+                collapsed_calculator_cs.value,
+                rx.el.div(
+                    class_name="from-slate-1 to-transparent absolute z-10 transition-opacity pointer-events-none opacity-100 bg-linear-to-t -top-27 left-0 w-full h-29",
+                ),
+            ),
+            ui.button(
+                ui.icon(
+                    "ArrowDown01Icon",
+                    size=16,
+                    class_name=(
+                        "transition-all",
+                        rx.cond(collapsed_calculator_cs.value, "", "rotate-180"),
+                    ),
+                ),
+                rx.cond(
+                    collapsed_calculator_cs.value,
+                    "Expand Compute Pricing",
+                    "Collapse Compute Pricing",
+                ),
+                on_click=collapsed_calculator_cs.set_value(
+                    ~collapsed_calculator_cs.value
+                ),
+                size="sm",
+                variant="outline",
+                class_name="w-full",
+            ),
+            class_name="w-full p-2 relative",
+        ),
+        class_name="flex flex-col w-full max-w-[64.19rem] 2xl:border-x border-slate-4 2xl:border-b pb-[6rem] justify-center items-center",
     )

pcweb/pages/pricing/calculator.py

@@ -20,18 +20,20 @@ def header() -> rx.Component:
             "Check FAQ",
             class_name="text-slate-9 text-3xl font-semibold",
         ),
-        class_name="flex items-center justify-between text-slate-11 flex-col pt-[5rem] xl:border-x border-slate-4",
+        class_name="flex items-center justify-between text-slate-11 flex-col pt-[5rem]",
     )
 
 
 def sales_button() -> rx.Component:
-    return lemcal_dialog(
-        rx.fragment(
-            glow(),
-            button(
-                "Need more help? Contact sales",
-                variant="secondary",
-                class_name="!text-slate-11 !font-semibold !text-sm",
+    return rx.el.div(
+        lemcal_dialog(
+            rx.el.div(
+                glow(),
+                button(
+                    "Need more help? Contact sales",
+                    variant="secondary",
+                    class_name="!text-slate-11 !font-semibold !text-sm w-fit",
+                ),
             ),
         ),
         class_name="self-center relative",
@@ -97,6 +99,10 @@ def accordion_text(text: str) -> rx.Component:
         "What happens when I upgrade?",
         "When you upgrade your plan, you'll immediately get access to the new features and increased resource limits. Your app will continue running without interruption.",
     ),
+    (
+        "What are credits?",
+        "Credits can be used for both hosting and building. In hosting, credits are used for compute resources. In building, credits are consumed per message sent.",
+    ),
     (
         "What happens if I cancel the plan?",
         "If you cancel, you'll maintain access until the end of your current billing period. After that, your app will be downgraded to the free tier limits.",