Merge branch 'main' into alek/stats

Author: Alek99

docs/events/background_events.md

@@ -104,6 +104,34 @@ def background_task_example():
     )
 ```
 
+## Terminating Background Tasks on Page Close or Navigation
+
+Sometimes, background tasks may continue running even after the user navigates away from the page or closes the browser tab. To handle such cases, you can check if the websocket associated with the state is disconnected and terminate the background task when necessary.
+
+The solution involves checking if the client_token is still valid in the app.event_namespace.token_to_sid mapping. If the session is lost (e.g., the user navigates away or closes the page), the background task will stop.
+
+```python
+import asyncio
+import reflex as rx
+
+class State(rx.State):
+    @rx.event(background=True)
+    async def loop_function(self):
+        while True:
+            if self.router.session.client_token not in app.event_namespace.token_to_sid:
+                print("WebSocket connection closed or user navigated away. Stopping background task.")
+                break 
+            
+            print("Running background task...")
+            await asyncio.sleep(2)  
+
+
+@rx.page(on_load=State.loop_function)
+def index():
+    return rx.text("Hello, this page will manage background tasks and stop them when the page is closed or navigated away.")
+
+```
+
 ## Task Lifecycle
 
 When a background task is triggered, it starts immediately, saving a reference to
@@ -118,6 +146,9 @@ the circumstances that are undesirable. In the example above, the `_n_tasks`
 backend var is used to control whether `my_task` will enter the increment loop,
 or exit early.
 
+
+
+
 ## Background Task Limitations
 
 Background tasks mostly work like normal `EventHandler` methods, with certain exceptions:

pcweb/pages/pricing/calculator.py

@@ -106,20 +106,17 @@ def compute_table() -> rx.Component:
     return rx.box(
         tabs.root(
             rx.box(
-                rx.vstack(
+                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",
+                        class_name="text-slate-9 text-lg font-semibold text-center lg:text-start text-balance",
                     ),
-                    align_items="left",
-                    justify_content="center`",
-                    class_name="flex flex-col gap-1",
+                    class_name="flex flex-col gap-1 justify-center items-center lg:items-start lg:justify-start",
                 ),
-                rx.spacer(),
                 tabs.list(
                     tabs.tab(
                         "Per min",
@@ -131,7 +128,7 @@ def compute_table() -> rx.Component:
                     ),
                     tabs.indicator(),
                 ),
-                class_name="flex flex-row gap-2 items-center justify-end p-6 border-b border-slate-4",
+                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),
@@ -190,5 +187,5 @@ 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-b pb-[6rem] justify-center items-center",
+        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",
     )

pcweb/pages/pricing/faq.py

@@ -23,7 +23,7 @@ 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] pb-82xl:border-x border-slate-4",
+        class_name="flex items-center justify-between text-slate-11 flex-col pt-[5rem] xl:border-x border-slate-4",
     )
 
 
@@ -130,5 +130,5 @@ def faq() -> rx.Component:
             class_name="max-w-[40rem] flex justify-center items-center flex-col mx-auto w-full gap-2",
         ),
         sales_button(),
-        class_name="flex flex-col gap-8 w-full max-w-[64.19rem] 2xl:border-x border-slate-4 2xl:border-b pb-[6rem] py-32",
+        class_name="flex flex-col gap-8 w-full max-w-[64.19rem] 2xl:border-x border-slate-4 2xl:border-b pb-[6rem]",
     )

pcweb/pages/pricing/header.py

@@ -6,29 +6,12 @@ def header() -> rx.Component:
     return rx.box(
         rx.el.h1(
             "Pricing that scales with you",
-            class_name="gradient-heading font-semibold text-4xl xl:text-5xl text-center",
+            class_name="gradient-heading font-semibold text-3xl lg:text-5xl text-center",
         ),
-        rx.hstack(
-            rx.el.a(
-                rx.badge(
-                    "Build with AI",
-                    class_name="text-lg text-center text-wrap rounded-md bg-[--violet-9] flex items-center justify-center text-[#FCFCFD]",
-                ),
-                href="https://reflex.build",
-            ),
-            rx.el.a(
-                rx.badge(
-                    "Deploy with Cloud",
-                    class_name="text-lg text-center text-wrap rounded-md bg-[--violet-9] flex items-center justify-center text-[#FCFCFD]",
-                ),
-                href="https://cloud.reflex.dev",
-            ),
-            rx.badge(
-                "Scale with Enterprise",
-                class_name="text-lg text-center text-wrap rounded-md bg-[--violet-9] flex items-center justify-center text-[#FCFCFD]",
-            ),
-            gap="2rem",
+        rx.el.p(
+            "Build with AI. Deploy with Cloud. Scale with Enterprise",
+            class_name="text-slate-9 text-lg lg:text-2xl font-semibold text-center",
         ),
-        class_name="flex flex-col gap-4 justify-center items-center max-w-[64.19rem] 2xl:border-x border-slate-4 w-full pb-16 "
-        + rx.cond(HostingBannerState.show_banner, "pt-[13rem]", "pt-[10rem]"),
+        class_name="flex flex-col gap-2 justify-center items-center max-w-[64.19rem] 2xl:border-x border-slate-4 w-full pb-16 "
+        + rx.cond(HostingBannerState.show_banner, "pt-[11rem]", "pt-[8rem]"),
     )

pcweb/pages/pricing/plan_cards.py

@@ -148,8 +148,17 @@ def card(
     return rx.box(
         rx.el.div(
             rx.el.h3(title, class_name="font-semibold text-slate-12 text-2xl"),
-            rx.badge(price, color_scheme="gray", size="3") if price else rx.fragment(),
-            class_name="flex items-center mb-2 gap-2",
+            (
+                rx.badge(
+                    price,
+                    color_scheme="gray",
+                    size="3",
+                    class_name="font-medium text-lg",
+                )
+                if price
+                else rx.fragment()
+            ),
+            class_name="flex items-center mb-2 gap-4",
         ),
         rx.el.p(
             description, class_name="text-sm font-medium text-slate-9 mb-8 text-pretty"
@@ -159,12 +168,14 @@ def card(
                 rx.el.li(
                     rx.icon(feature[0], class_name="!text-slate-9", size=16),
                     feature[1],
-                    rx.tooltip(
-                        rx.icon("info", class_name="!text-slate-9", size=12),
-                        content=feature[2],
-                    )
-                    if len(feature) == 3
-                    else "",
+                    (
+                        rx.tooltip(
+                            rx.icon("info", class_name="!text-slate-9", size=12),
+                            content=feature[2],
+                        )
+                        if len(feature) == 3
+                        else ""
+                    ),
                     class_name="text-sm font-medium text-slate-11 flex items-center gap-3",
                 )
                 for feature in features
@@ -204,23 +215,32 @@ def popular_card(
             grid(),
             rx.hstack(
                 rx.el.h3(title, class_name="font-semibold text-slate-12 text-2xl"),
-                rx.badge(price, color_scheme="violet", size="3")
-                if price
-                else rx.fragment(),
-                class_name="flex items-center mb-2 gap-2",
+                (
+                    rx.badge(
+                        price,
+                        color_scheme="violet",
+                        size="3",
+                        class_name="font-medium text-lg",
+                    )
+                    if price
+                    else rx.fragment()
+                ),
+                class_name="flex items-center mb-2 gap-4",
             ),
             rx.el.p(description, class_name="text-sm font-medium text-slate-9 mb-8"),
             rx.el.ul(
                 *[
                     rx.el.li(
                         rx.icon(feature[0], class_name="!text-violet-9", size=16),
                         feature[1],
-                        rx.tooltip(
-                            rx.icon("info", class_name="!text-slate-9", size=12),
-                            content=feature[2],
-                        )
-                        if len(feature) == 3
-                        else "",
+                        (
+                            rx.tooltip(
+                                rx.icon("info", class_name="!text-slate-9", size=12),
+                                content=feature[2],
+                            )
+                            if len(feature) == 3
+                            else ""
+                        ),
                         class_name="text-sm font-medium text-slate-11 flex items-center gap-3",
                     )
                     for feature in features