Merge branch 'main' into ahmad/upload-docs

Author: LineIndent

docs/ai_builder/overview/what_is_reflex_build.md

@@ -1,5 +1,18 @@
 # What Is Reflex Build
 
+<div class="p-1 my-4 rounded-lg bg-slate-5">
+  <iframe
+    width="100%"
+    height="400"
+    src="https://www.youtube.com/embed/s-kr8v7827g "
+    title="Reflex Build"
+    frameborder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    allowfullscreen>
+  </iframe>
+</div>
+
+
 Reflex Build is an AI-powered platform that empowers users of all skill levels to create full-stack web applications
 without writing any code—just by describing their ideas in plain English. Instead of hiring developers, users can
 instantly generate web apps or websites, turning ideas into functional apps as quickly as possible.

pcweb/components/docpage/navbar/navbar.py

@@ -74,6 +74,13 @@ def link_item(name: str, url: str, active_str: str = ""):
     elif active_str == "pricing":
         active = router_path.contains("pricing")
 
+    elif active_str == "framework":
+        # Check if path contains "docs" but excludes ai-builder, cloud, and hosting
+        is_docs = router_path.contains("docs")
+        not_cloud = ~(router_path.contains("cloud") | router_path.contains("hosting"))
+        not_ai_builder = ~router_path.contains("ai-builder")
+        active = is_docs & not_cloud & not_ai_builder
+
     elif active_str == "docs":
         active = rx.cond(
             router_path.contains("library"), False, router_path.contains("docs")
@@ -371,12 +378,12 @@ def new_menu_trigger(title: str, url: str = None, active_str: str = "") -> rx.Co
 
 def logo() -> rx.Component:
     return rx.link(
-        rx.color_mode_cond(
+        rx.fragment(
             rx.image(
-                src="/logos/light/reflex.svg", alt="Reflex Logo", class_name="shrink-0"
+                src="/logos/light/reflex.svg", alt="Reflex Logo", class_name="shrink-0 block dark:hidden"
             ),
             rx.image(
-                src="/logos/dark/reflex.svg", alt="Reflex Logo", class_name="shrink-0"
+                src="/logos/dark/reflex.svg", alt="Reflex Logo", class_name="shrink-0 hidden dark:block"
             ),
         ),
         class_name="flex shrink-0 mr-3",
@@ -438,7 +445,7 @@ def new_component_section() -> rx.Component:
                 rx.el.div(
                     nav_menu.item(
                         link_item(
-                            "AI Builder", ai_builder_pages.overview.path, "builder"
+                            "AI Builder", ai_builder_pages.overview.what_is_reflex_build.path, "builder"
                         ),
                     ),
                     nav_menu.item(

pcweb/components/docpage/sidebar/sidebar.py

@@ -453,7 +453,6 @@ def sidebar_comp(
                     create_sidebar_section(
                         "Overview",
                         ai_builder_pages.overview.what_is_reflex_build.path,
-                        # ai_builder_pages.overview.path,
                         ai_builder_overview_items,
                         ai_builder_overview_index,
                         url,

pcweb/components/logo.py

@@ -3,16 +3,16 @@
 
 def logo(class_name: str = "") -> rx.Component:
     return rx.link(
-        rx.color_mode_cond(
+        rx.fragment(
             rx.image(
                 src="/logos/light/reflex.svg",
                 alt="Reflex Logo",
-                class_name="shrink-0" + class_name,
+                class_name="shrink-0 block dark:hidden" + class_name,
             ),
             rx.image(
                 src="/logos/dark/reflex.svg",
                 alt="Reflex Logo",
-                class_name="shrink-0" + class_name,
+                class_name="shrink-0 hidden dark:block" + class_name,
             ),
         ),
         class_name="flex items-start shrink-0",

pcweb/pages/pricing/plan_cards.py

@@ -271,6 +271,7 @@ def plan_cards() -> rx.Component:
             "Hobby",
             "Everything you need to get started.",
             [
+                ("frame", "Open Source Framework"),
                 ("brain", "AI App Builder (Limited Access)"),
                 (
                     "app-window",
@@ -279,7 +280,7 @@ def plan_cards() -> rx.Component:
                 ),
                 ("code", "Reflex Open Source"),
                 ("heart-handshake", "Discord/Github Support"),
-                ("building", rx.link("Reflex Enterprise", href="https://reflex.dev/docs/enterprise/overview/", class_name="!text-slate-11"), "Free-tier users can access Reflex Enterprise features, with a required 'Built with Reflex' badge displayed on their apps.")
+                ("building", rx.link("Reflex Enterprise", href="https://reflex.dev/docs/enterprise/overview/", class_name="!text-slate-11"), "Free-tier users can access Reflex Enterprise features, with a required 'Built with Reflex' badge displayed on their apps."),
             ],
             "Start building for free",
             price="Free",

pcweb/pages/pricing/table.py

@@ -38,14 +38,6 @@
     ("Team Size", "1", "1", "< 25", "Unlimited"),
 ]
 
-FRAMEWORK_SECTION = [
-    ("Open Source Framework", True, True, True, True),
-    ("Enterprise Components (AG Grid) *", True, True, True, True),
-    ("One Click Auth", False, False, True, True),
-    ("Single Port Deploy", False, False, True, True),
-    ("HTTP Fallback for Websockets", False, False, True, True),
-    ("Custom NPM Registry", False, False, True, True),
-]
 
 AI_TEXT_SECTION = [
     (
@@ -58,61 +50,90 @@
 ]
 
 AI_BOOLEAN_SECTION = [
-    ("Purchase Extra AI Credits", False, True, True, True),
+    ("Image to App", True, True, True, True),
+    ("Web IDE", True, True, True, True),
+    ("Custom User Rules", True, True, True, True),
     ("One Click Cloud Deploy", True, True, True, True),
     ("Github Integration", True, True, True, True),
     ("Database Integration", True, True, True, True),
     ("Secrets Integration", True, True, True, True),
-    ("Web IDE", True, True, True, True),
+    ("Purchase Extra AI Credits", False, True, True, True),
     ("Private Apps", False, True, True, True),
-    ("Connect AI Builder to your Data Sources", False, False, True, True),
     ("Bring your own API Keys", False, False, False, True),
 ]
 
+ASTERIX_SECTION_ENTERPRISE = [
+    (
+        "* Enterprise components included for Hobby (with `Built with Reflex` badge) and Pro (if self-hosted).",
+        "",
+        "",
+        "",
+        "",
+    ),
+    ("", "", "", "", ""),
+]
+
+
+REFLEX_ENTERPRISE_BOOLEAN_SECTION = [
+    ("AG Grid *",True, True, True, True),
+    ("AG Charts *",True, True, True, True),
+    ("Map Component *",True, True, True, True),
+    ("Drag and Drop Component *",True, True, True, True),
+    ("Single Port Deploy *",True, True, True, True),
+    ("HTTP Fallback for Websockets",False, False, False, True),
+    ("Custom NPM Registry",False, False, False, True),
+    ("One Click Auth",False, False, True, True),
+]
 
 HOSTING_TEXT_SECTION = [
     (
         "Compute",
         "20 hours/month",
-        "$10 compute credits/month",
+        "$10 credits/month",
         "$20 compute credits/user/month",
         "Custom",
     ),
-    ("Regions", "Single", "Multiple", "Multiple", "Multiple"),
     ("Build Logs", "1 day", "30 days", "90 days", "Custom"),
     ("Runtime Logs", "1 hour", "1 day", "1 week", "Custom"),
 ]
 
 HOSTING_BOOLEAN_SECTION = [
+    ("Multiple Regions", False, True, True, True),
     ("CPU / Memory Metrics", True, True, True, True),
-    ("CLI Deployments", True, True, True, True),
-    ("CI/CD Deploy Tokens", True, True, True, True),
-    ("Set Billing Limits", True, True, True, True),
-    ("Custom Domains", False, True, True, True),
-    ("Secret Manager", False, True, True, True),
     ("User Analytics", False, False, True, True),
+    ("On Premise Deployments", False, False, False, True),
+    ("Custom Domains", False, True, True, True),
+
+    # ... the following were not in the notion docs
+    # ("CLI Deployments", True, True, True, True),
+    # ("CI/CD Deploy Tokens", True, True, True, True),
+    # ("Set Billing Limits", True, True, True, True),
+]
+
+FEATURES_SECTION = [
+    ("Secrets", True, True, True, True),
     ("Custom Alerts", False, False, True, True),
     ("Rollbacks", False, False, True, True),
     ("Audit Log", False, False, True, True),
-    ("On Prem Deployments", False, False, False, True),
 ]
 
 SECURITY_SECTION = [
     ("Web App Firewall", True, True, True, True),
     ("HTTP/SSL", True, True, True, True),
-    ("DDos Protection", True, True, True, True),
+    # ("DDos Protection", True, True, True, True),
     ("Automatic CI/CD", False, True, True, True),
     ("Security Audit Reports", False, False, True, True),
     ("SSO", False, False, False, True),
 ]
 
 SUPPORT_TEXT_SECTION = [
-    ("Support", "Community", "Community", "Email Support", "Dedicated Support")
+    ("Support", "Community Support", "Community Support", "Email Support", "Dedicated Support")
 ]
 
 SUPPORT_BOOLEAN_SECTION = [
     ("White Glove Onboarding", False, False, False, True),
-    ("SLAs Available", False, False, False, True),
+    # ... not in the notion docs
+    # ("SLAs Available", False, False, False, True),
     ("", "", "", "", ""),
 ]
 
@@ -255,7 +276,7 @@ def table_body_oss() -> rx.Component:
             *[create_table_row(row) for row in PRICE_SECTION],
         ),
         rx.table.header(
-            create_table_row_header("AI"),
+            create_table_row_header("Reflex Build"),
             class_name="relative",
         ),
         create_table_body(
@@ -265,18 +286,19 @@ def table_body_oss() -> rx.Component:
                 for feature, *checks in AI_BOOLEAN_SECTION
             ],
         ),
+        #
         rx.table.header(
-            create_table_row_header("FRAMEWORK"),
+            create_table_row_header("Reflex Enterprise"),
             class_name="relative",
         ),
         create_table_body(
-            *[
-                create_checkmark_row(feature, checks)
-                for feature, *checks in FRAMEWORK_SECTION
-            ],
+        *[
+            create_checkmark_row(feature, checks)
+            for feature, *checks in REFLEX_ENTERPRISE_BOOLEAN_SECTION
+        ],
         ),
         create_table_body(
-            *[create_table_row(row) for row in ASTERIX_SECTION],
+            *[create_table_row(row) for row in ASTERIX_SECTION_ENTERPRISE],
         ),
         class_name="w-full overflow-x-auto max-w-[69.125rem] -mt-[2rem]",
     )
@@ -300,7 +322,7 @@ def table_body_hosting() -> rx.Component:
     return rx.table.root(
         rx.el.style(TABLE_STYLE),
         rx.table.header(
-            create_table_row_header("Hosting"),
+            create_table_row_header("Reflex Cloud"),
             glow(),
             class_name="relative",
         ),
@@ -311,6 +333,16 @@ def table_body_hosting() -> rx.Component:
                 for feature, *checks in HOSTING_BOOLEAN_SECTION
             ],
         ),
+        rx.table.header(
+            create_table_row_header("Features"),
+            class_name="relative",
+        ),
+        create_table_body(
+            *[
+                create_checkmark_row(feature, checks)
+                for feature, *checks in FEATURES_SECTION
+            ],
+        ),
         rx.table.header(
             create_table_row_header("Security"),
             class_name="relative",

pcweb/templates/docpage/docpage.py

@@ -613,14 +613,17 @@ def wrapper(*args, **kwargs) -> rx.Component:
 
             show_right_sidebar = right_sidebar and len(toc) >= 2
 
-            main_content_width = " lg:w-[90%]" if show_right_sidebar else " lg:w-full"
+            grid_cols_classes = "grid-cols-1"
+            if show_right_sidebar:
+                grid_cols_classes += " 2xl:grid-cols-[300px_1fr_16%]"
+            grid_cols_classes += " lg:grid-cols-[300px_1fr]"
 
             return rx.box(
                 navbar(),
                 rx.el.main(
                     rx.box(
                         sidebar,
-                        class_name="h-full shrink-0 desktop-only lg:w-[24%]"
+                        class_name="h-full shrink-0 desktop-only lg:block hidden"
                         + rx.cond(
                             HostingBannerState.show_banner,
                             " mt-[146px]",
@@ -630,7 +633,7 @@ def wrapper(*args, **kwargs) -> rx.Component:
                     rx.box(
                         rx.box(
                             breadcrumb(path=path, nav_sidebar=nav_sidebar),
-                            class_name="px-0 lg:px-20 pt-0",
+                            class_name="px-0 xl:px-20 pt-0",
                         ),
                         rx.box(
                             rx.el.article(comp),
@@ -639,9 +642,10 @@ def wrapper(*args, **kwargs) -> rx.Component:
                                 class_name="flex flex-row gap-2 mt-8 lg:mt-10 mb-6 lg:mb-12",
                             ),
                             docpage_footer(path=path.rstrip("/")),
-                            class_name="lg:mt-0 mt-6 px-4 lg:px-20",
+                            class_name="lg:mt-0 mt-6 px-4 xl:px-20",
                         ),
-                        class_name="h-full w-full" + main_content_width,
+                        class_name="h-full mx-auto max-w-2xl lg:col-start-2 lg:col-end-3 2xl:col-start-2 2xl:col-end-3 "
+                        + (" xl:max-w-[60rem]" if show_right_sidebar else "xl:max-w-full"),
                     ),
                     (
                         # right-hand sidebar
@@ -700,7 +704,7 @@ def wrapper(*args, **kwargs) -> rx.Component:
                                 class_name="fixed flex flex-col justify-start gap-4 p-[0.875rem_0.5rem_0px_0.5rem] max-h-[80vh] overflow-y-auto",
                                 style={"width": "inherit"},
                             ),
-                            class_name="shrink-0 w-[16%]"
+                            class_name="shrink-0 2xl:col-start-3 2xl:col-end-4"
                             + rx.cond(
                                 HostingBannerState.show_banner,
                                 " mt-[146px]",
@@ -716,9 +720,10 @@ def wrapper(*args, **kwargs) -> rx.Component:
                         if not pseudo_right_bar or show_right_sidebar
                         else rx.el.div(class_name="hidden")
                     ),
-                    class_name="justify-center flex flex-row mx-auto mt-0 max-w-[94.5em] h-full min-h-screen w-full",
+                    class_name="grid justify-center mx-auto mt-0 max-w-[94.5em] h-full min-h-screen w-full "
+                    + grid_cols_classes,
                 ),
-                class_name="flex flex-col justify-center bg-slate-1 w-full",
+                class_name="flex flex-col justify-center bg-slate-1 w-full mx-auto",
                 on_mount=rx.call_script(right_sidebar_item_highlight()),
             )