use reflex ui lemcal component

Author: carlosabadia

pcweb/components/docpage/navbar/navbar.py

@@ -2,7 +2,6 @@
 
 import reflex as rx
 
-from reflex_ui.blocks.lemcal import lemcal_calendar
 from pcweb.components.button import button
 from pcweb.components.docpage.navbar.navmenu.navmenu import nav_menu
 from pcweb.components.hosting_banner import hosting_banner
@@ -14,7 +13,7 @@
 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
 from ...link_button import resources_button
 from ..sidebar import SidebarState
 from .buttons.discord import discord
@@ -23,18 +22,6 @@
 from .search import search_bar
 
 
-class LemcalModalState(rx.State):
-    is_open: bool = False
-
-    @rx.event
-    def open(self):
-        self.is_open = True
-
-    @rx.event
-    def close(self):
-        self.is_open = False
-
-
 def resource_item(text: str, url: str, icon: str, index):
     return rx.el.li(
         rx.link(
@@ -546,10 +533,11 @@ def new_component_section() -> rx.Component:
                 class_name="desktop-only",
             ),
             nav_menu.item(
-                button(
-                    "Book a Demo",
-                    class_name="!h-8 !font-small-smbold !rounded-[0.625rem] whitespace-nowrap",
-                    on_click=LemcalModalState.open,
+                lemcal_dialog(
+                    button(
+                        "Book a Demo",
+                        class_name="!h-8 !font-small-smbold !rounded-[0.625rem] whitespace-nowrap",
+                    ),
                 ),
                 class_name="xl:flex hidden",
             ),
@@ -563,11 +551,6 @@ def new_component_section() -> rx.Component:
     )
 
 
-@rx.memo
-def lemcal_booking_calendar():
-    return lemcal_calendar()
-
-
 @rx.memo
 def navbar() -> rx.Component:
     return rx.box(
@@ -576,16 +559,5 @@ def navbar() -> rx.Component:
             new_component_section(),
             class_name="flex flex-row items-center gap-12 bg-slate-1 shadow-[inset_0_-1px_0_0_var(--c-slate-3)] px-4 lg:px-6 w-screen h-[48px] lg:h-[65px]",
         ),
-        rx.cond(
-            LemcalModalState.is_open,
-            rx.box(
-                rx.el.div(
-                    lemcal_booking_calendar(),
-                    class_name="fixed inset-0 bg-black/40 backdrop-blur-sm z-[9999]",
-                    on_click=LemcalModalState.close,
-                ),
-            ),
-            rx.fragment(),
-        ),
         class_name="flex flex-col w-full top-0 z-[9999] fixed text-slate-12",
     )

pcweb/constants.py

@@ -43,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/demo/book_demo.py

@@ -1,24 +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 hosting_meta_tags
+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
 
-@rx.page(route="/demo", title="Reflex · Book Demo", meta=hosting_meta_tags)
+
+@mainpage(path="/demo", title="Reflex · Book Demo", meta=meta_tags)
 def book_demo() -> rx.Component:
     """Get the Book Demo landing page."""
-    from pcweb.components.docpage.navbar import navbar
 
-    return rx.box(
-        index_colors(),
-        navbar(),
-        rx.el.main(
-            rx.box(
-                header(),
-                class_name="flex flex-col relative justify-center items-center w-full",
-            ),
-            class_name="flex flex-col w-full relative h-full justify-center items-center",
+    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]",
         ),
-        footer_index(),
         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

@@ -1,6 +1,6 @@
 import reflex as rx
-
-from reflex_ui.blocks.demo_form import demo_form
+import reflex_ui as ui
+from reflex_ui.blocks.lemcal import lemcal_dialog
 from pcweb.components.hosting_banner import HostingBannerState
 from pcweb.pages.framework.views.companies import pricing_page_companies
 
@@ -9,37 +9,43 @@ def custom_quote_form() -> rx.Component:
     """Custom quote form component with clean, maintainable structure."""
     return rx.box(
         rx.box(
-            # Left column - Content
-            rx.box(
-                rx.el.h2(
-                    "Book a Demo",
-                    class_name="text-slate-12 text-4xl font-bold mb-8",
-                ),
-                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 mb-12 max-w-lg",
-                ),
-                rx.box(
-                    pricing_page_companies(),
-                    class_name="flex flex-col",
+            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",
+            ),
+            lemcal_dialog(
+                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",
                 ),
-                class_name="mb-8 lg:mb-0 text-center sm:text-left",
             ),
-            # Right column - Form
-            demo_form(
-                class_name="relative bg-slate-1 p-6 sm:p-8 rounded-2xl border-2 border-violet-9 shadow-lg w-full max-w-md mx-auto lg:max-w-none lg:mx-0"
+            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="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16 max-w-7xl mx-auto items-start",
+            class_name="flex flex-col items-center justify-center gap-6",
         ),
         id="demo-form",
-        class_name="py-12 sm:py-20 px-4 sm:px-8 scroll-m-20",
+        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] 2xl:border-x border-slate-4 w-full -mb-10 pb-16 "
+        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]",