ENG-7371: bring back pricing & change demo url (includes ENG-7392) (#1585)

* bring back pricing & change demo url

* remove duplicate

* update pricing cards

* change credits -> msgs

* rebase on main

* Update link

* refresh lemcal on mount

* clean whitelist

* Update to use lemcal component from reflex-ui

- Replace pcweb.components.lemcal imports with reflex_ui.blocks.lemcal
- Update pcweb.py to use get_lemcal_script() instead of hardcoded script tag
- Update navbar.py to use lemcal_calendar from reflex-ui
- Remove old pcweb/components/lemcal.py file
- Maintain same functionality while using reusable component

Co-Authored-By: Alek <[email protected]>

* use reflex ui lemcal component

* bump

* bump reflex ui

* add border to pricing cards

* replace dialog with lemcal link

* free tier update

---------

Co-authored-by: Alek Petuskey <[email protected]>
Co-authored-by: Khaleel Al-Adhami <[email protected]>
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Alek <[email protected]>
Co-authored-by: carlosabadia <[email protected]>
Co-authored-by: Carlos <[email protected]>

Author: 5 people

pcweb/components/docpage/navbar/navbar.py

@@ -13,7 +13,8 @@
 from pcweb.pages.framework.framework import framework
 from pcweb.pages.hosting.hosting import hosting_landing
 from pcweb.pages.use_cases.use_cases import use_cases_page
-
+from reflex_ui.blocks.lemcal import lemcal_dialog, LEMCAL_DEMO_URL
+import reflex_ui as ui
 from ...link_button import resources_button
 from ..sidebar import SidebarState
 from .buttons.discord import discord
@@ -443,7 +444,7 @@ def new_component_section() -> rx.Component:
                                 "hidden lg:flex",
                                 "hidden",
                             )
-                        )
+                        ),
                     ),
                     class_name="flex flex-row gap-x-0 items-center",
                 ),
@@ -534,14 +535,13 @@ def new_component_section() -> rx.Component:
                 class_name="desktop-only",
             ),
             nav_menu.item(
-                rx.link(
-                    button(
+                ui.link(
+                    render_=button(
                         "Book a Demo",
                         class_name="!h-8 !font-small-smbold !rounded-[0.625rem] whitespace-nowrap",
                     ),
-                    underline="none",
-                    is_external=True,
-                    href="/pricing",
+                    target="_blank",
+                    to=LEMCAL_DEMO_URL,
                 ),
                 class_name="xl:flex hidden",
             ),

pcweb/constants.py

@@ -5,6 +5,9 @@
 REFLEX_DEV_WEB_LANDING_FORM_SALES_CALL_WEBHOOK_URL: str = (
     "https://hooks.zapier.com/hooks/catch/20661176/2s1nxp9/"
 )
+REFLEX_DEV_WEB_LANDING_FORM_URL_GET_DEMO: str = (
+    "https://cal.com/forms/f87bd9b2-b339-4915-b4d4-0098e2db4394"
+)
 
 REFLEX_DEV_WEB_NEWSLETTER_FORM_WEBHOOK_URL: str = "https://hkdk.events/t0qopjbznnp2fr"
 REFLEX_DEV_WEB_GENERAL_FORM_FEEDBACK_WEBHOOK_URL: str = os.environ.get(
@@ -40,7 +43,7 @@
 SPLINE_URL = "https://github.com/splinetool/react-spline"
 ENTERPRISE_DOCS_URL = "https://enterprise.reflex.dev"
 DATABRICKS_NOTION_URL = "https://reflex-dev.notion.site/reflex-x-databricks"
-DEMO_VIDEO_URL = "https://www.youtube.com/watch?v=s-kr8v7827g"
+DEMO_VIDEO_URL = "https://www.youtube.com/watch?v=lO-N_IRaWhQ"
 
 # Install urls.
 BUN_URL = "https://bun.sh"

pcweb/pages/__init__.py

@@ -18,6 +18,7 @@
 from .page404 import page404 as page404
 from .pricing.pricing import pricing as pricing
 from .sales import sales as sales
+from .demo.book_demo import book_demo as book_demo
 from .booked import booked as booked
 from .to_be_booked import to_be_booked as to_be_booked
 

pcweb/pages/demo/book_demo.py

@@ -0,0 +1,21 @@
+import reflex as rx
+from pcweb.pages.framework.index_colors import index_colors
+from pcweb.pages.framework.views.footer_index import footer_index
+from pcweb.meta.meta import meta_tags
+from pcweb.pages.demo.header import header
+from pcweb.templates.mainpage import mainpage
+from pcweb.components.icons.patterns import default_patterns
+
+
+@mainpage(path="/demo", title="Reflex · Book Demo", meta=meta_tags)
+def book_demo() -> rx.Component:
+    """Get the Book Demo landing page."""
+
+    return rx.el.main(
+        rx.el.section(
+            *default_patterns(),
+            header(),
+            class_name="overflow-hidden w-full relative mx-auto flex flex-col justify-center items-center max-w-[64.19rem]",
+        ),
+        class_name="flex flex-col w-full max-w-[94.5rem] justify-center items-center mx-auto px-4 lg:px-5 relative overflow-hidden",
+    )

pcweb/pages/demo/header.py

@@ -0,0 +1,56 @@
+import reflex as rx
+import reflex_ui as ui
+from reflex_ui.blocks.lemcal import lemcal_dialog, LEMCAL_DEMO_URL
+from pcweb.components.hosting_banner import HostingBannerState
+from pcweb.pages.framework.views.companies import pricing_page_companies
+
+
+def custom_quote_form() -> rx.Component:
+    """Custom quote form component with clean, maintainable structure."""
+    return rx.box(
+        rx.box(
+            rx.el.h2(
+                "Book a Demo",
+                class_name="text-slate-12 text-4xl font-bold",
+            ),
+            rx.el.p(
+                "Enterprise-ready solutions designed for scale, compliance, and support. Contact us for a tailored quote based on your infrastructure and team size.",
+                class_name="text-slate-11 text-md leading-relaxed font-medium text-center max-w-xl mx-auto",
+            ),
+            ui.link(
+                render_=rx.el.div(
+                    ui.button(
+                        "Contact Sales",
+                        class_name="font-semibold",
+                        size="lg",
+                    ),
+                    class_name="p-3 border border-slate-3 rounded-[1.375rem] border-solid mt-2",
+                ),
+                target="_blank",
+                to=LEMCAL_DEMO_URL,
+            ),
+            rx.box(
+                rx.el.span(
+                    "Trusted by",
+                    class_name="text-slate-10 text-sm leading-relaxed font-medium text-center max-w-lg mx-auto mt-2",
+                ),
+                pricing_page_companies(),
+                class_name="flex flex-col items-center justify-center gap-4",
+            ),
+            class_name="flex flex-col items-center justify-center gap-6",
+        ),
+        id="demo-form",
+        class_name="pb-12 sm:pb-20 px-4 sm:px-8 scroll-m-20 text-center",
+    )
+
+
+def header() -> rx.Component:
+    return rx.box(
+        custom_quote_form(),
+        class_name="flex flex-col gap-2 justify-center items-center max-w-[64.19rem] xl:border-x border-slate-4 w-full -mb-10 pb-16 "
+        + rx.cond(
+            HostingBannerState.show_banner,
+            "pt-[8rem] lg:pt-[11rem]",
+            "pt-[8rem] lg:pt-[12rem]",
+        ),
+    )

pcweb/pages/gallery/apps.py

@@ -2,36 +2,39 @@
 import reflex as rx
 import re
 from pcweb.components.button import button, button_with_icon
+from reflex_ui.blocks.lemcal import lemcal_dialog, LEMCAL_DEMO_URL
 from pcweb.components.code_card import gallery_app_card
 from pcweb.components.icons import get_icon
 from pcweb.constants import SCREENSHOT_BUCKET
 from pcweb.flexdown import xd2 as xd
 from pcweb.pages.gallery import gallery
 from pcweb.templates.gallery_app_page import gallery_app_page
 import copy
+import reflex_ui as ui
 
 GALLERY_APP_SOURCES = [
     ("templates/", "docs/getting-started/open-source-templates/"),
     ("reflex_build_templates/", "templates/"),
 ]
 
+
 def load_all_gallery_apps():
     """Load markdown files from all supported paths and associate them with their base folder."""
     gallery_apps = {}
     for folder, _ in GALLERY_APP_SOURCES:
         paths = flexdown.utils.get_flexdown_files(folder)
         for path in reversed(sorted(paths)):
             document = flexdown.Document.from_file(path)  # This has metadata
-            document.metadata["title"] = document.metadata.get("title", "Untitled").replace("_", " ").title()
+            document.metadata["title"] = (
+                document.metadata.get("title", "Untitled").replace("_", " ").title()
+            )
             clean_path = str(path).replace(".md", "/")
             gallery_apps[(clean_path, folder)] = document
     return gallery_apps
 
 
 gallery_apps_data = load_all_gallery_apps()
-gallery_apps_data_copy = {
-    path: doc for (path, _), doc in gallery_apps_data.items()
-}
+gallery_apps_data_copy = {path: doc for (path, _), doc in gallery_apps_data.items()}
 gallery_apps_data_open_source = {
     (path, folder): doc
     for (path, folder), doc in load_all_gallery_apps().items()
@@ -55,7 +58,7 @@ def more_posts(current_post: dict) -> rx.Component:
     if current_index is None:
         selected_posts = app_items[-3:]
     else:
-        other_posts = app_items[:current_index] + app_items[current_index + 1:]
+        other_posts = app_items[:current_index] + app_items[current_index + 1 :]
         if len(other_posts) <= 3:
             selected_posts = other_posts
         elif current_index == 0:
@@ -64,9 +67,9 @@ def more_posts(current_post: dict) -> rx.Component:
             selected_posts = other_posts[-3:]
         else:
             if current_index < len(app_items) - 2:
-                selected_posts = other_posts[current_index - 1: current_index + 2]
+                selected_posts = other_posts[current_index - 1 : current_index + 2]
             else:
-                selected_posts = other_posts[current_index - 2: current_index + 1]
+                selected_posts = other_posts[current_index - 2 : current_index + 1]
 
     for path, document in selected_posts:
         posts.append(gallery_app_card(app=document.metadata))
@@ -76,7 +79,9 @@ def more_posts(current_post: dict) -> rx.Component:
             rx.el.h2("More Templates", class_name="font-large text-slate-12"),
             rx.link(
                 rx.box(
-                    rx.text("View All", class_name="font-small text-slate-9 text-nowrap"),
+                    rx.text(
+                        "View All", class_name="font-small text-slate-9 text-nowrap"
+                    ),
                     get_icon(icon="new_tab", class_name=""),
                     class_name="flex items-center gap-1.5 border-slate-5 bg-slate-1 hover:bg-slate-3 shadow-small px-1.5 py-0.5 border rounded-md w-auto max-w-full text-slate-9 transition-bg cursor-pointer overflow-hidden border-solid",
                 ),
@@ -104,8 +109,8 @@ def page(document, is_reflex_template: bool) -> rx.Component:
             loading="lazy",
             class_name="w-full object-cover max-w-full aspect-[1500/938] border-y border-slate-3 border-solid",
         )
-        if not is_reflex_template else
-        rx.el.div(
+        if not is_reflex_template
+        else rx.el.div(
             rx.box(
                 rx.el.h1(
                     meta["title"].replace("_", " ").title(),
@@ -114,7 +119,7 @@ def page(document, is_reflex_template: bool) -> rx.Component:
                 class_name="w-full self-start pl-4",
             ),
             rx.el.iframe(
-                src=meta['video'],
+                src=meta["video"],
                 class_name="w-full h-full xl:rounded-md shadow-small",
                 id="iFrame",
                 title="Reflex Build",
@@ -124,7 +129,11 @@ def page(document, is_reflex_template: bool) -> rx.Component:
         )
     )
 
-    back_route_origin = "/docs/getting-started/open-source-templates/" if not is_reflex_template else "/templates/"
+    back_route_origin = (
+        "/docs/getting-started/open-source-templates/"
+        if not is_reflex_template
+        else "/templates/"
+    )
 
     return rx.el.section(
         rx.el.article(
@@ -141,52 +150,61 @@ def page(document, is_reflex_template: bool) -> rx.Component:
                         class_name="flex w-fit",
                         href=back_route_origin,
                     ),
-                    rx.el.h1(meta["title"], class_name="font-x-large text-slate-12") if not is_reflex_template else rx.fragment(),
+                    (
+                        rx.el.h1(meta["title"], class_name="font-x-large text-slate-12")
+                        if not is_reflex_template
+                        else rx.fragment()
+                    ),
                     rx.el.h2(meta["description"], class_name="font-md text-slate-11"),
                     class_name="flex flex-col gap-3 p-8",
                 ),
                 rx.box(
                     *(
-                        [rx.box(
-                                    rx.link(
-                                        button_with_icon(
-                                            "Book a Demo",
-                                            icon="new_tab",
-                                            class_name="flex-row-reverse gap-2 !w-full",
-                                        ),
-                                        is_external=True,
-                                        href="/pricing",
-                                        class_name="!w-full"
+                        [
+                            rx.box(
+                                ui.link(
+                                    render_=button_with_icon(
+                                        "Book a Demo",
+                                        icon="new_tab",
+                                        class_name="flex-row-reverse gap-2 !w-full",
                                     ),
-                                    class_name="flex justify-center items-center h-full !w-full",
-                                )] if is_reflex_template else
-                        (
-                            [rx.link(
-                                button_with_icon(
-                                    "View Demo",
-                                    icon="new_tab",
-                                    class_name="!w-full flex-row-reverse gap-2",
+                                    target="_blank",
+                                    to=LEMCAL_DEMO_URL,
                                 ),
-                                is_external=True,
-                                href=meta["demo"],
-                            )] if meta.get("demo") else []
+                                class_name="flex justify-center items-center h-full !w-full [&_button]:!w-full",
+                            )
+                        ]
+                    ),
+                    (
+                        rx.link(
+                            button("View Code", variant="muted", class_name="!w-full"),
+                            is_external=True,
+                            href=meta.get("source", "#"),
                         )
+                        if not is_reflex_template
+                        else rx.fragment()
+                    ),
+                    (
+                        rx.cond(
+                            "Reflex" in meta["author"],
+                            rx.box(
+                                rx.text(
+                                    "Created by", class_name="text-slate-9 font-base"
+                                ),
+                                get_icon(icon="badge_logo"),
+                                rx.text(
+                                    meta["author"], class_name="text-slate-9 font-base"
+                                ),
+                                class_name="flex flex-row items-center gap-1 self-end",
+                            ),
+                            rx.text(
+                                f"by {meta['author']}",
+                                class_name="text-slate-9 font-base",
+                            ),
+                        )
+                        if not is_reflex_template
+                        else rx.fragment()
                     ),
-                    rx.link(
-                        button("View Code", variant="muted", class_name="!w-full"),
-                        is_external=True,
-                        href=meta.get('source', "#"),
-                    ) if not is_reflex_template else rx.fragment(),
-                    rx.cond(
-                        "Reflex" in meta["author"],
-                        rx.box(
-                            rx.text("Created by", class_name="text-slate-9 font-base"),
-                            get_icon(icon="badge_logo"),
-                            rx.text(meta["author"], class_name="text-slate-9 font-base"),
-                            class_name="flex flex-row items-center gap-1 self-end",
-                        ),
-                        rx.text(f"by {meta['author']}", class_name="text-slate-9 font-base"),
-                    ) if not is_reflex_template else rx.fragment(),
                     class_name="p-8 flex flex-col gap-4",
                 ),
                 class_name="grid grid-cols-1 lg:grid-cols-2 divide-y lg:divide-y-0 lg:divide-x divide-slate-3 border-b border-slate-3",
@@ -204,7 +222,11 @@ def page(document, is_reflex_template: bool) -> rx.Component:
 gallery_apps_routes = []
 for (path, source_folder), document in gallery_apps_data.items():
     is_reflex_template = source_folder.startswith("reflex_build_templates")
-    base_url = "templates/" if is_reflex_template else "docs/getting-started/open-source-templates/"
+    base_url = (
+        "templates/"
+        if is_reflex_template
+        else "docs/getting-started/open-source-templates/"
+    )
     slug = re.sub(r"[\s_]+", "-", document.metadata["title"]).lower()
     route = f"/{base_url}{slug}"
 
@@ -221,6 +243,10 @@ def page(document, is_reflex_template: bool) -> rx.Component:
         image=document.metadata["image"],
         demo=document.metadata.get("demo"),
         meta=document.metadata.get("meta", []),
-    )(lambda doc=document, is_reflex_template=is_reflex_template: page(doc, is_reflex_template))
+    )(
+        lambda doc=document, is_reflex_template=is_reflex_template: page(
+            doc, is_reflex_template
+        )
+    )
 
     gallery_apps_routes.append(comp)

pcweb/pages/landing/views/outcomes_section.py

@@ -148,7 +148,7 @@ def outcomes_showcase() -> rx.Component:
                 ),
                 underline="none",
                 is_external=True,
-                href="/pricing",
+                href="/demo",
                 class_name="mt-6",
             ),
             class_name="flex flex-col justify-center items-center h-full",