fix mobile view pricing page (#1251)

carlosabadia · web-flow · commit b44be184b467 · 2025-04-01T10:28:10.000-07:00
diff --git a/pcweb/pages/pricing/calculator.py b/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",
     )
diff --git a/pcweb/pages/pricing/faq.py b/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]",
     )
diff --git a/pcweb/pages/pricing/header.py b/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]"),
     )
diff --git a/pcweb/pages/pricing/plan_cards.py b/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

Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ def header() -> rx.Component:`
`23`	`23`	`"Check FAQ",`
`24`	`24`	`class_name="text-slate-9 text-3xl font-semibold",`
`25`	`25`	`),`
`26`		`- class_name="flex items-center justify-between text-slate-11 flex-col pt-[5rem] pb-82xl:border-x border-slate-4",`
	`26`	`+ class_name="flex items-center justify-between text-slate-11 flex-col pt-[5rem] xl:border-x border-slate-4",`
`27`	`27`	`)`
`28`	`28`
`29`	`29`
`@@ -130,5 +130,5 @@ def faq() -> rx.Component:`
`130`	`130`	`class_name="max-w-[40rem] flex justify-center items-center flex-col mx-auto w-full gap-2",`
`131`	`131`	`),`
`132`	`132`	`sales_button(),`
`133`		`- 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",`
	`133`	`+ class_name="flex flex-col gap-8 w-full max-w-[64.19rem] 2xl:border-x border-slate-4 2xl:border-b pb-[6rem]",`
`134`	`134`	`)`