ENG-8666: ENG-8667: Update intro docs

assets/tailwind-theme.css

@@ -1696,7 +1696,7 @@
         /* max-height: 350px !important; */
         border-radius: 0.75rem !important;
         border: 1px solid var(--c-slate-4);
-        background: var(--c-slate-2) !important;
+        background: var(--c-slate-2);
         color: var(--c-slate-12) !important;
         resize: none !important;
         outline: none !important;

docs/getting_started/installation.md

@@ -20,7 +20,8 @@ Reflex requires Python 3.10+.
 
 We **highly recommend** creating a virtual environment for your project.
 
-[venv]({constants.VENV_URL}) is the standard option. [conda]({constants.CONDA_URL}) and [poetry]({constants.POETRY_URL}) are some alternatives.
+[uv]({constants.UV_URL}) is the recommended modern option. [venv]({constants.VENV_URL}), [conda]({constants.CONDA_URL}) and [poetry]({constants.POETRY_URL}) are some alternatives.
+
 
 # Install Reflex on your system
 
@@ -29,11 +30,22 @@ We **highly recommend** creating a virtual environment for your project.
 --tab macOS/Linux
 ## Install on macOS/Linux
 
-We will go with [venv]({constants.VENV_URL}) here.
+We will go with [uv]({constants.UV_URL}) here.
 
 
 ### Prerequisites
-macOS (Apple Silicon) users should install [Rosetta 2](https://support.apple.com/en-us/HT211861). Run this command:
+
+#### Install uv
+
+```bash
+curl -LsSf https://astral.sh/uv/install.sh | sh
+```
+
+After installation, restart your terminal or run `source ~/.bashrc` (or `source ~/.zshrc` for zsh).
+
+Alternatively, install via [Homebrew, PyPI, or other methods](https://docs.astral.sh/uv/getting-started/installation/).
+
+**macOS (Apple Silicon) users:** Install [Rosetta 2](https://support.apple.com/en-us/HT211861). Run this command:
 
 `/usr/sbin/softwareupdate --install-rosetta --agree-to-license`
 
@@ -47,60 +59,48 @@ mkdir {app_name}
 cd {app_name}
 ```
 
-### Setup virtual environment
+### Initialize uv project
 
 ```bash
-python3 -m venv .venv
-source .venv/bin/activate
+uv init
 ```
 
-
-```md alert info
-# Getting `No module named venv`?
-
-While Python typically ships with `venv` it is not installed by default on some systems.
-If so, please install it manually. E.g. on Ubuntu Linux, run `sudo apt-get install python3-venv`.
-```
-
-### Install Reflex package
-
-Reflex is available as a [pip]({constants.PIP_URL}) package.
+### Add Reflex to the project
 
 ```bash
-pip install reflex
-```
-
-```md alert info
-# Getting `command not found: pip`?
-
-While Python typically ships with `pip` as the standard package management tool, it is not installed by default on some systems.
-You may need to install it manually. E.g. on Ubuntu Linux, run `apt-get install python3-pip`
+uv add reflex
 ```
 
-## Initialize the project
+### Initialize the Reflex project
 
 ```bash
-reflex init
+uv run reflex init
 ```
 
-```md alert warning
-# Error `command not found: reflex` Mac / Linux
-If you install Reflex with no virtual environment and get this error it means your `PATH` cannot find the reflex package. 
-A virtual environment should solve this problem, or you can try running `python3 -m` before the reflex command.
-```
 
 --
 --tab Windows
 ## Install on Windows
 
-### Prerequisites
 For Windows users, we recommend using [Windows Subsystem for Linux (WSL)](https://learn.microsoft.com/en-us/windows/wsl/about) for optimal performance.
 
-WSL users should refer to instructions for Linux above.
+**WSL users:** Refer to the macOS/Linux instructions above.
 
 For the rest of this section we will work with native Windows (non-WSL).
 
-We will go with [venv]({constants.VENV_URL}) here, for virtual environments.
+We will go with [uv]({constants.UV_URL}) here.
+
+### Prerequisites
+
+#### Install uv
+
+```powershell
+powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"
+```
+
+After installation, restart your terminal (PowerShell or Command Prompt).
+
+Alternatively, install via [WinGet, Scoop, or other methods](https://docs.astral.sh/uv/getting-started/installation/).
 
 ### Create the project directory 
 
@@ -111,76 +111,62 @@ mkdir {app_name}
 cd {app_name}
 ```
 
-### Setup virtual environment
+### Initialize uv project
 
 ```bash
-py -3 -m venv .venv
-.venv\\Scripts\\activate
+uv init
 ```
 
-### Install Reflex package
-
-Reflex is available as a [pip](constants.PIP_URL) package.
+### Add Reflex to the project
 
 ```bash
-pip install reflex
+uv add reflex
 ```
 
-## Initialize the project
+### Initialize the Reflex project
 
 ```bash
-reflex init
-```
-
-```md alert warning
-# Error `command not found: reflex` Windows
-
-The Reflex framework includes the `reflex` command line (CLI) tool. Using a virtual environment is highly recommended for a seamless experience.",
+uv run reflex init
 ```
 
 ```md alert warning
 # Error `Install Failed - You are missing a DLL required to run bun.exe` Windows
-Bun requires runtime components of Visual C++ libraries to run on windows. This issue is fixed by installing [Microsoft Visual C++ 2015 Redistributable](https://www.microsoft.com/en-us/download/details.aspx?id=53840).
+Bun requires runtime components of Visual C++ libraries to run on Windows. This issue is fixed by installing [Microsoft Visual C++ 2015 Redistributable](https://www.microsoft.com/en-us/download/details.aspx?id=53840).
 ```
 --
 
 ---
 
 
-The command will return several template options to choose from as shown below.
+Running `uv run reflex init` will return the option to start with a blank Reflex app, premade templates built by the Reflex team, or to try our [AI builder]({constants.REFLEX_BUILD_URL}).
 
 ```bash
 Initializing the web directory.
 
 Get started with a template:
-(0) blank (https://blank-template.reflex.run) - A minimal template
-(1) dashboard (https://dashboard-new.reflex.run/) - A dashboard with tables and graphs
-(2) sales (https://sales-new.reflex.run/) - An app to manage sales and customers
-(3) ai_image_gen (https://ai-image-gen.reflex.run/) - An app to generate images using AI
-(4) ci_template (https://cijob.reflex.run/) - A template for continuous integration
-(5) api_admin_panel (https://api-admin-panel.reflex.run/) - An admin panel for an api.
-(6) nba (https://nba-new.reflex.run/) - A data visualization app for NBA data.
-(7) customer_data_app (https://customer-data-app.reflex.run/) - An app to manage customer data.
+(0) A blank Reflex app.
+(1) Premade templates built by the Reflex team.
+(2) Try our AI builder.
 Which template would you like to use? (0): 
 ```
 
-From here select a template. 
+From here select an option. 
 
 
 ## Run the App
 
 Run it in development mode:
 
 ```bash
-reflex run
+uv run reflex run
 ```
 
 Your app runs at [http://localhost:3000](http://localhost:3000).
 
 Reflex prints logs to the terminal. To increase log verbosity to help with debugging, use the `--loglevel` flag:
 
 ```bash
-reflex run --loglevel debug
+uv run reflex run --loglevel debug
 ```
 
 Reflex will *hot reload* any code changes in real time when running in development mode. Your code edits will show up on [http://localhost:3000](http://localhost:3000) automatically.

docs/getting_started/introduction.md

@@ -7,8 +7,11 @@ from pcweb.pages.docs.library import library
 from pcweb.pages.docs import pages
 from pcweb.pages.docs import vars
 from pcweb.styles.colors import c_color
+from pcweb.pages.docs import styling
 from pcweb.styles.fonts import base
+from pcweb.pages.docs import hosting
 from pcweb.flexdown import markdown_with_shiki
+from pcweb.pages.docs import advanced_onboarding
 ```
 
 <!-- TODO how do we consistently rename page title? -->
@@ -47,19 +50,22 @@ Here, we go over a simple counter app that lets the user count up or down.
 class CounterExampleState(rx.State):
     count: int = 0
 
+    @rx.event
     def increment(self):
         self.count += 1
 
+    @rx.event
     def decrement(self):
         self.count -= 1
 
 class IntroTabsState(rx.State):
     """The app state."""
 
-    value = "tab1"
-    tab_selected = ""
+    value: str = "tab1"
+    tab_selected: str = ""
 
-    def change_value(self, val):
+    @rx.event
+    def change_value(self, val: str):
         self.tab_selected = f"{val} clicked!"
         self.value = val
 
@@ -151,9 +157,11 @@ rx.box(
         """class State(rx.State):
     count: int = 0
 
+    @rx.event
     def increment(self):
         self.count += 1
 
+    @rx.event
     def decrement(self):
         self.count -= 1""",
         background=rx.cond(
@@ -241,9 +249,11 @@ Here our state has a single var, `count`, which holds the current value of the c
 ### Event Handlers
 
 ```python
+@rx.event
 def increment(self):
     self.count += 1
 
+@rx.event
 def decrement(self):
     self.count -= 1
 ```
@@ -278,7 +288,7 @@ def index():
 
 This function defines the app's user interface.
 
-We use different components such as `rx.hstack`, `rx.button`, and `rx.heading` to build the frontend. Components can be nested to create complex layouts, and can be styled using the full power of CSS.
+We use different components such as `rx.hstack`, `rx.button`, and `rx.heading` to build the frontend. Components can be nested to create complex layouts, and can be styled using the full power of CSS or [Tailwind CSS]({styling.tailwind.path}).
 
 Reflex comes with [50+ built-in components]({library.path}) to help you get started.
 We are actively adding more components. Also, it's easy to [wrap your own React components]({wrapping_react.overview.path}).
@@ -327,9 +337,17 @@ app.add_page(index)
 
 We've created a simple, yet fully interactive web app in pure Python.
 
-By continuing with our documentation, you will learn how to build awesome apps with Reflex.
+By continuing with our documentation, you will learn how to build awesome apps with Reflex. Use the sidebar to navigate through the sections, or search (`Ctrl+K` or `Cmd+K`) to quickly find a page.
 
 For a glimpse of the possibilities, check out these resources:
 
 * For a more real-world example, check out either the [dashboard tutorial]({getting_started.dashboard_tutorial.path}) or the [chatapp tutorial]({getting_started.chatapp_tutorial.path}).
-* We have bots that can answer questions and generate Reflex code for you. Check them out in #ask-ai in our [Discord]({constants.DISCORD_URL})!
+* Check out our open-source [templates]({getting_started.open_source_templates.path})!
+* We have an AI Builder that can generate full Reflex apps or help with your existing app! Check it out at [Reflex Build]({constants.REFLEX_BUILD_URL})!
+* Deploy your app with a single command using [Reflex Cloud]({hosting.deploy_quick_start.path})!
+
+If you want to learn more about how Reflex works, check out the [How Reflex Works]({advanced_onboarding.how_reflex_works.path}) section.
+
+## Join our Community
+
+If you have questions about anything related to Reflex, you're always welcome to ask our community on [GitHub Discussions]({constants.GITHUB_DISCUSSIONS_URL}), [Discord]({constants.DISCORD_URL}), [Forum]({constants.FORUM_URL}), and [X]({constants.TWITTER_URL}).

pcweb/components/docpage/sidebar/sidebar.py

@@ -206,7 +206,10 @@ def sidebar_item_comp(
                     type="multiple",
                     collapsible=True,
                     default_value=index[:1].foreach(lambda x: "index" + x.to_string()),
-                    class_name="!my-2 flex flex-col items-start gap-4 !ml-[10px] list-none [box-shadow:inset_1.25px_0_0_0_var(--c-slate-4)_!important] !bg-transparent !rounded-none",
+                    style={
+                        "box-shadow": "inset 1.25px 0 0 0 var(--c-slate-4) !important"
+                    },
+                    class_name="!my-2 flex flex-col items-start gap-4 !ml-[10px] list-none !bg-transparent !rounded-none",
                 ),
                 class_name="!p-0 w-full !bg-transparent before:!h-0 after:!h-0",
             ),

pcweb/constants.py

@@ -53,6 +53,7 @@
 POETRY_URL = "https://python-poetry.org/"
 PIPENV_URL = "https://pipenv.pypa.io/en/latest/"
 PIP_URL = "https://pypi.org/project/pip/"
+UV_URL = "https://docs.astral.sh/uv/"
 VENV_URL = "https://docs.python.org/3/library/venv.html"
 VIRTUALENV_URL = "https://virtualenv.pypa.io/en/latest/"
 CONDA_URL = "https://conda.io/"