ENG-6355: template for highlight pages (#1440)

* template for highlight pages

* update navbar too

* re-structure page decorator for use-cases & databricks

* remove use cases from sidebar

Author: LineIndent

pcweb/components/docpage/navbar/navbar.py

@@ -10,6 +10,7 @@
 from pcweb.pages.blog.paths import blog_data
 from pcweb.pages.docs import ai_builder, getting_started
 from pcweb.pages.faq import faq
+from pcweb.pages.use_cases.use_cases import use_cases_page
 from pcweb.pages.framework.framework import framework
 from pcweb.pages.hosting.hosting import hosting_landing
 
@@ -274,11 +275,7 @@ def new_resource_section():
         },
         {"label": "Blog", "url": "/blog", "icon": "library-big"},
         {"label": "Affiliates", "url": "/affiliates", "icon": "network"},
-        {
-            "label": "Use Cases",
-            "url": "/use-cases",
-            "icon": "list-checks",
-        },
+        {"label": "Use Cases", "url": use_cases_page.path, "icon": "list-checks"},
     ]
 
     _open_source_items = [

pcweb/pages/__init__.py

@@ -1,7 +1,7 @@
 from pcweb.route import Route
 from .affiliates import affiliates as affiliates
-from .databricks import databricks as databricks
-from .use_case import use_cases as use_cases
+from .databricks.databricks import databricks_page as databricks_page
+from .use_cases.use_cases import use_cases_page as use_cases_page
 from .blog import blog_routes
 from .customers.data.customers import customers_routes
 from .customers.landing import customers as customers

pcweb/pages/customers/views/footer.py

@@ -3,6 +3,14 @@
 import reflex as rx
 
 from pcweb.components.button import button
+from pcweb.pages.gallery import gallery
+from pcweb.pages.docs import getting_started, hosting
+from pcweb.pages.docs.library import library
+from pcweb.pages.blog import blogs
+from pcweb.pages.use_cases.use_cases import use_cases_page
+from pcweb.pages.faq import faq
+from pcweb.pages.errors import errors
+from pcweb.signup import IndexState
 from pcweb.components.icons import get_icon
 from pcweb.constants import (
     DISCORD_URL,
@@ -20,6 +28,7 @@
 from pcweb.pages.gallery import gallery
 from pcweb.signup import IndexState
 
+from pcweb.pages.framework.views.footer_index import dark_mode_toggle
 
 def footer_link(text: str, href: str) -> rx.Component:
     return rx.link(
@@ -152,7 +161,9 @@ def footer_customer() -> rx.Component:
                     footer_link("Common Errors", errors.path),
                     footer_link("Roadmap", ROADMAP_URL),
                     footer_link("Forum", FORUM_URL),
-                    footer_link("Use Cases", "/use-cases"),
+                    footer_link("Use Cases", use_cases_page.path),
+                    rx.box(class_name="grow"),
+                    dark_mode_toggle(),
                 ],
                 class_name="!row-span-3 !border-t-0",
             ),

pcweb/pages/databricks/databricks.py

@@ -1,35 +1,14 @@
-
-import reflex as rx
-
 import flexdown
+import reflex as rx
 from pcweb.flexdown import xd2 as xd
-from pcweb.components.docpage.navbar import navbar
-from pcweb.pages.customers.views.footer import footer_customer
-from pcweb.views.bottom_section.bottom_section import bottom_section
-from pcweb.pages.framework.index_colors import index_colors
 
+from pcweb.templates.highlightpage import highlight_page
 
 document = flexdown.parse_file("pcweb/pages/databricks/databricks.md")
 
-def databricks_content():
+def databricks_content() -> rx.Component:
     return rx.box(xd.render(document, document.filename))
 
-
-@rx.page(route="/databricks", title="Databricks - Reflex")
-def databricks():
-    return rx.box(
-        rx.box(
-            index_colors(),
-            navbar(),
-            rx.el.main(
-                databricks_content(),
-                rx.box(class_name="flex-grow"),
-                class_name="w-full z-[1] relative flex flex-col justify-center mx-auto max-w-[640px] lg:px-0 px-4 pb-20",
-            ),
-            rx.box(class_name="h-[1px] bg-slate-3 w-full"),
-            bottom_section(),
-            footer_customer(),
-            class_name="relative flex flex-col justify-start items-center w-full h-full min-h-screen font-instrument-sans gap-4 mx-auto max-w-[64.19rem] lg:border-x border-slate-3 pt-24 lg:pt-48",
-        ),
-        class_name="relative overflow-hidden",
-    )
+@highlight_page(path="/databricks", title="Databricks - Reflex")
+def databricks_page():
+    return databricks_content()

pcweb/pages/use_cases/use_cases.md

@@ -0,0 +1,124 @@
+## Use Cases by Industry
+
+Organizations across industries use **Reflex** to build internal tools, dashboards, and AI-driven applications—all in pure Python. From finance to healthcare, Reflex helps teams move faster by simplifying full-stack development.
+
+### 1. Financial Services
+
+```python exec
+import reflex as rx
+from reflex_image_zoom import image_zoom
+```
+
+```python eval
+    rx.el.div(
+        image_zoom(rx.image(src="/case_studies/bayesline_app.png", border_radius="10px", alt="Bayesline App")),
+        class_name="py-4"
+    )
+```
+
+From buyside analytics desks to compliance back offices, finance teams choose **Reflex** because a single Python codebase can stream market data, crunch GPU-heavy models, and satisfy audit trails—without juggling separate front-end frameworks or ETL schedulers. With AG Grid built into the product, analysts iterate and hand a production-grade web app to traders or risk officers the same day.
+
+
+**Examples of apps you can build in Reflex:**
+
+- **Factor-Risk Analytics Dashboard** – GPU-powered analytics dashboard that delivers custom equity-factor risk models in minutes instead of weeks
+- **End-of-Day Trade Blotter** – automatically pulls executions from every venue, flags outliers, and emails a compliance-ready PDF to traders each night.
+- **Asset-Allocation Simulator** – visualizes portfolio mixes and projected returns over time; users drag weight sliders and instantly see downside and drawdown scenarios.
+- **Treasury & Liquidity Monitor** – streams balances, pending settlements, and cash forecasts into a single real-time dashboard with threshold alerts.
+- **Loan-Underwriting Workflow** – scores new credit applications against live KYC/AML data, routes edge cases for manual review, and retrains the model on a weekly schedule.
+
+<br>
+<br>
+
+### 2. E-commerce & Advertising
+
+```python eval
+    rx.el.div(
+        image_zoom(rx.image(src="/case_studies/sellerx_app.png", border_radius="10px", alt="Sellerx App")),
+        class_name="py-4"
+    )
+```
+
+Modern merchants and growth marketers juggle stock feeds, ad platforms, and customer-service queues that rarely live in the same tool. **Reflex** lets teams wire those APIs together—from Amazon listings to TikTok ads—then ship production dashboards or scheduled automations with nothing but Python. The result: faster decisions on pricing, spend, and fulfillment, plus fewer hops between spreadsheets and BI tools.
+
+**Examples of apps you can stand up in Reflex:**
+
+- **Inventory & Pricing Command Center** – unifies marketplace sales (e.g. Amazon), real-time stock alerts, and supplier lead times in a single view.
+- **Campaign Control Plane** – tracks multi-channel ad spend and ROI, enforces budget caps, and auto-generates performance reports.
+- **AI-Powered Creative Analyzer** – runs frame-level video ad scoring to predict ROAS before campaigns go live.
+- **Refund & Returns Console** – pulls tickets from the help-desk, payment events from Stripe, and warehouse data to approve refunds in seconds.
+- **Multichannel Attribution Dashboard** – blends ad-platform metrics, web analytics, and order revenue to surface true customer-acquisition cost in real time.
+
+<br>
+<br>
+
+### 3. Engineering & DevOps
+
+```python eval
+    rx.el.div(
+        image_zoom(rx.image(src="/case_studies/devops_app.png", border_radius="10px", alt="DevOps App")),
+        class_name="py-4"
+    )
+```
+
+Site-reliability, platform, and security teams use **Reflex** to surface real-time telemetry, automate routine infra tasks, and replace shell scripts with role-based web UIs—all in pure Python.
+
+**Examples of apps you can stand up in Reflex:**
+
+- **Deployment & Health Dashboard** – combines service metrics, rollout status, and incident timelines in one screen for on-call engineers.
+- **VM Lifecycle Manager** – grants ops staff a secure web panel to start, stop, snapshot, or tag virtual machines—no CLI access required.
+- **Factory & Machine-Monitoring Portal** – streams sensor data from multiple plants, flags anomalies, and predicts downtime with live charts.
+- **Supply-Chain Automation Viewer** – visualizes robot and conveyor status in distribution centres; integrates with third-party control APIs for fast triage.
+- **Security-Ops Command Center** – unifies BigQuery logs, ticket data, cloud storage, Firestore, Salesforce CRM records, and PagerDuty alerts so analysts can hunt threats and track user activity in a single interface.
+
+<br>
+<br>
+
+### 4. Database Admin & CRUD
+
+```python eval
+    rx.el.div(
+        image_zoom(rx.image(src="/case_studies/admin_app.png", border_radius="10px", alt="Admin App")),
+        class_name="py-4"
+    )
+```
+
+Database admins can spin up Python-native panels that let teams **read, write, and update** their data through polished tables, forms, and charts. With **Reflex**, full-featured database dashboards and CRUD apps come together in minutes—no separate front-end stack, no raw CLI sessions.
+
+**Examples of CRUD-first apps you can stand up in Reflex:**
+
+- **Role-Based Postgres Admin Panel** – browse, edit, or bulk-import customer rows while keeping finance-only fields hidden behind granular permissions.
+- **Inventory Catalog Manager** – one screen to adjust stock levels, pricing rules, and supplier SKUs that sync instantly to every sales channel.
+- **Content & Data-Exchange Portal** – upload new CAD drawings, attach metadata, and version files for manufacturing projects, all stored in a single database.
+- **Team Management Console** – create, disable, or time-limit user accounts and access tokens for internal SaaS tooling, complete with audit logs.
+- **Supply-Chain Config Editor** – operations staff tweak warehouse routing rules and robotics parameters through validated forms that write directly to production tables.
+
+<br>
+<br>
+
+### 5. Data Science & Analytics
+
+Data scientists and analysts can convert their notebooks into production-grade apps that expose models, metrics, and datasets through live tables, charts, and custom Python components.
+
+**Examples of analytics apps you can stand up in Reflex:**
+
+- **ML-Service Admin Console** – register experiment runs, visualize attention maps or confusion matrices, and promote the best model to production with one click.
+- **Behavioural Cohort Explorer** – drag-and-drop filters to segment users by events, demographics, and funnels, then export cohorts or schedule recurring reports.
+- **Fleet Metrics Self-Serve Dashboard** – slice and visualize vehicle telemetry (mileage, battery health, utilisation) so operations teams answer questions in seconds—no SQL required.
+- **Delivery Operations Dashboard** – monitors driver efficiency and delivery performance in real time, highlighting bottlenecks and automatically flagging late orders.
+- **Dataset Versioning & Quality Monitor** – upload new snapshots, run validation tests, and graph distribution shifts or missing-value spikes over time.
+
+<br>
+<br>
+
+### 6. AI & Document Workflows
+
+When files, forms, recordings, and chat threads produce more raw information than teams can manually review, **Reflex** converts that unstructured content into structured, actionable insight. OCR, speech-to-text, and large-language-model pipelines plug directly into Python UIs, then push validated results to dashboards, search endpoints, or downstream APIs—no additional middleware or bespoke glue code.
+
+**Examples of AI-driven document apps you can stand up in Reflex:**
+
+- **Training-Session Hub** – records live video classes, transcribes speech in real time, and lets coaches search by keyword to jump to any moment.
+- **Smart Document Viewer** – highlights key fields (prices, SKUs, dates) as users scroll and writes the extracted values to a structured database with one click.
+- **Image-to-GPS Calibration Tool** – accepts bulk image uploads, matches them to GNSS logs, and visualizes camera extrinsics for quick QA.
+- **Enterprise Knowledge Chat** – an LLM interface that answers staff questions using contracts, wikis, and ticket history—kept secure behind SSO.
+- **Support & Deal-Flow Console** – shows live agent SLAs while a background workflow ingests tens of thousands of new company profiles each month; vector search and natural-language filters surface the best leads in seconds.

pcweb/pages/use_cases/use_cases.py

@@ -0,0 +1,14 @@
+import flexdown
+import reflex as rx
+from pcweb.flexdown import xd2 as xd
+
+from pcweb.templates.highlightpage import highlight_page
+
+document = flexdown.parse_file("pcweb/pages/use_cases/use_cases.md")
+
+def use_cases_content() -> rx.Component:
+    return rx.box(xd.render(document, document.filename))
+
+@highlight_page(path="/use-cases", title="Use Cases - Reflex")
+def use_cases_page():
+    return use_cases_content()

pcweb/templates/highlightpage.py

@@ -0,0 +1,86 @@
+import functools
+from typing import Callable
+import reflex as rx
+from pcweb.route import Route
+
+
+def highlight_page(
+    path: str,
+    title: str = "",
+    description: str = None,
+    image: str = None,
+    meta: list[dict[str, str]] = None,
+    props=None,
+    add_as_page=True,
+) -> Callable:
+    """A template that most pages on the reflex.dev site should use.
+
+    This template wraps the webpage with the navbar and footer.
+
+    Args:
+        path: The path of the page.
+        title: The title of the page.
+        props: Props to apply to the template.
+        add_as_page: whether to add the route to the app pages.
+
+    Returns:
+        A wrapper function that returns the full webpage.
+    """
+    props = props or {}
+
+    def webpage(contents: Callable[[], Route]) -> Route:
+        """Wrapper to create a templated route.
+
+        Args:
+            contents: The function to create the page route.
+
+        Returns:
+            The templated route.
+        """
+
+        @functools.wraps(contents)
+        def wrapper(*children, **props) -> rx.Component:
+            """The template component.
+
+            Args:
+                children: The children components.
+                props: The props to apply to the component.
+
+            Returns:
+                The component with the template applied.
+            """
+            # Import here to avoid circular imports.
+            from pcweb.components.docpage.navbar import navbar
+            from pcweb.pages.customers.views.footer import footer_customer
+            from pcweb.views.bottom_section.bottom_section import bottom_section
+            from pcweb.pages.framework.index_colors import index_colors
+
+            # Wrap the component in the template.
+            return rx.box(
+                rx.box(
+                    index_colors(),
+                    navbar(),
+                    rx.el.main(
+                        contents(*children, **props),
+                        rx.box(class_name="flex-grow"),
+                        class_name="w-full z-[1] relative flex flex-col justify-center mx-auto max-w-[640px] lg:px-0 px-4 pb-20",
+                    ),
+                    rx.box(class_name="h-[1px] bg-slate-3 w-full"),
+                    bottom_section(),
+                    footer_customer(),
+                    class_name="relative flex flex-col justify-start items-center w-full h-full min-h-screen font-instrument-sans gap-4 mx-auto max-w-[64.19rem] lg:border-x border-slate-3 pt-24 lg:pt-48",
+                ),
+                class_name="relative overflow-hidden",
+            )
+
+        return Route(
+            path=path,
+            title=title,
+            description=description,
+            image=image,
+            meta=meta,
+            component=wrapper,
+            add_as_page=add_as_page,
+        )
+
+    return webpage

pcweb/views/footer.py

@@ -16,6 +16,7 @@
 from pcweb.pages.docs.library import library
 from pcweb.pages.errors import errors
 from pcweb.pages.faq import faq
+from pcweb.pages.use_cases.use_cases import use_cases_page
 from pcweb.pages.gallery import gallery
 from pcweb.signup import IndexState
 
@@ -176,7 +177,7 @@ def footer() -> rx.Component:
                     footer_link("Roadmap", ROADMAP_URL),
                     footer_link("Forum", FORUM_URL),
                     footer_link("Affiliates", "/affiliates"),
-                    footer_link("Use Cases", "/use-cases"),
+                    footer_link("Use Cases", use_cases_page.path),
                     rx.box(class_name="grow"),
                     dark_mode_toggle(),
                 ],