Update marketing navbar (#6805)

Author: carlosabadia

docs/app/reflex_docs/views/docs_navbar.py

@@ -83,14 +83,17 @@ def menu_item(text: str, href: str, active_str: str = "") -> rx.Component:
             "/docs/ai/"
         )
         is_hosting = router_path.contains("hosting")
-        active = ~is_overview & ~is_ai_builder & ~is_hosting
+        is_xy = router_path.startswith("/xy/") | router_path.startswith("/docs/xy/")
+        active = ~is_overview & ~is_ai_builder & ~is_hosting & ~is_xy
     elif active_str == "ai":
         active = router_path.startswith("/ai/") | router_path.startswith("/docs/ai/")
+    elif active_str == "xy":
+        active = router_path.startswith("/xy/") | router_path.startswith("/docs/xy/")
     else:
         active = router_path.contains(active_str)
 
     return ui.navigation_menu.item(
-        rx.el.a(
+        rx.el.elements.a(
             button(
                 text,
                 size="sm",
@@ -114,6 +117,7 @@ def navigation_menu() -> rx.Component:
             menu_item("Build with AI", ai_builder.overview.best_practices.path, "ai"),
             menu_item("Framework", getting_started.introduction.path, "framework"),
             menu_item("Cloud", hosting.deploy_quick_start.path, "hosting"),
+            menu_item("XY", "/docs/xy/", "xy"),
             class_name="flex flex-row items-center gap-2 m-0 h-full list-none",
             custom_attrs={"role": "menubar"},
         ),

packages/reflex-site-shared/src/reflex_site_shared/pages/page404.py

@@ -5,7 +5,12 @@
 from reflex_site_shared.templates.webpage import webpage
 
 
-@webpage(path="/404", title="Page Not Found · Reflex.dev", add_as_page=False)
+@webpage(
+    path="/404",
+    title="Page Not Found · Reflex.dev",
+    add_as_page=False,
+    show_banner=False,
+)
 def page404():
     """Page404.
 

packages/reflex-site-shared/src/reflex_site_shared/styles/assets/tailwind-theme.css

@@ -1152,6 +1152,9 @@
     --shadow-card-xs-no-left: var(--shadow-card-xs-no-left-adaptive);
     --shadow-card-small: var(--shadow-card-small-adaptive);
     --shadow-card-dark: 0 0 0 1px var(--secondary-4);
+    --spacing-gutter: clamp(1.5rem, 0.5rem + 5.2vw, 6rem);
+    --text-caption: 0.75rem;
+    --text-caption--line-height: 1rem;
     --text-xs: 0.8125rem;
     --text-xs--line-height: 1.25rem;
     --text-sm: 0.875rem;
@@ -1669,6 +1672,15 @@
 }
 
 @layer utilities {
+    .rule-dashed-b {
+        background-image: repeating-linear-gradient(to right,
+                var(--color-secondary-8) 0 1px,
+                transparent 1px 4px);
+        background-repeat: no-repeat;
+        background-size: 100% 1px;
+        background-position: left bottom;
+    }
+
     .font-instrument-sans {
         font-family: var(--font-instrument-sans);
     }

packages/reflex-site-shared/src/reflex_site_shared/templates/webpage.py

@@ -18,6 +18,7 @@ def webpage(
     meta: list[dict[str, str]] | None = None,
     props: dict | None = None,
     add_as_page: bool = True,
+    show_banner: bool = True,
 ) -> Callable:
     """A template that most pages on the reflex.dev site should use.
 
@@ -31,6 +32,7 @@ def webpage(
         meta: Additional meta tags to add to the page.
         props: Props to apply to the template.
         add_as_page: whether to add the route to the app pages.
+        show_banner: Whether to show the hosting banner above the navbar.
 
     Returns:
         A wrapper function that returns the full webpage.
@@ -67,7 +69,7 @@ def wrapper(*children, **props) -> rx.Component:
             # Wrap the component in the template.
             return rx.box(
                 *default_patterns(),
-                marketing_navbar(),
+                marketing_navbar(show_banner=show_banner),
                 rx.el.main(
                     contents(*children, **props),
                     rx.box(class_name="flex-grow"),