replace pricing calculator with compute table (#1198)

* replace pricing calculator with compute table

* Pricing + Billing Update

* Quickstart

* Fix comments

* Fix spelling

---------

Co-authored-by: Alek Petuskey <[email protected]>
Co-authored-by: Alek Petuskey <[email protected]>

docs/hosting/app-management.md

@@ -0,0 +1,57 @@
+```python exec
+import reflex as rx
+from reflex_image_zoom import image_zoom
+from pcweb.pages.docs import hosting 
+from pcweb.pages import docs
+from pcweb.styles.styles import get_code_style, cell_style
+```
+
+# App
+
+In Reflex Cloud an "app" (or "application" or "website") refers to a web application built using the Reflex framework, which can be deployed and managed within the Cloud platform. 
+
+You can deploy an app using the `reflex deploy` command.
+
+There are many actions you can take in the Cloud UI to manage your app. Below are some of the most common actions you may want to take.
+
+
+## Stopping an App
+
+To stop an app follow the arrow in the image below and press on the `Stop app` button. Pausing an app will stop it from running and will not be accessible to users until you resume it. In addition, this will stop you being billed for your app.
+
+```python eval
+image_zoom(rx.image(src="/stopping_app.webp", padding_bottom="20px"))
+```
+
+```md alert info
+# CLI Command to stop an app
+`reflex cloud apps stop [OPTIONS] [APP_ID]`
+```
+
+## Deleting an App
+
+To delete an app click on the `Settings` tab in the Cloud UI on the app page.
+
+```python eval
+image_zoom(rx.image(src="/environment_variables.webp"))
+```
+
+Then click on the `Danger` tab as shown below.
+
+```python eval
+image_zoom(rx.image(src="/deleting_app.webp"))
+```
+
+Here there is a `Delete app` button. Pressing this button will delete the app and all of its data. This action is irreversible.
+
+```md alert info
+# CLI Command to delete an app
+`reflex cloud apps delete [OPTIONS] [APP_ID]`
+```
+
+
+## Other app settings
+
+Clicking on the `Settings` tab in the Cloud UI on the app page also allows a user to change the `app name`, change the `app description` and check the `app id`.
+
+The other app settings also allows users to edit and add secrets (environment variables) to the app. For more information on secrets, see the [Secrets (Environment Variables)]({hosting.secrets_environment_vars.path}) page.

docs/hosting/billing.md

@@ -0,0 +1,32 @@
+```python exec
+import reflex as rx
+from reflex_image_zoom import image_zoom
+from pcweb.pages.pricing.calculator import compute_table_base
+from pcweb.pages.docs import hosting 
+```
+
+## Overview 
+
+Billing for Reflex Cloud is monthly per project. Project owners and admins are able to view and manage the billing page. 
+
+The billing for a project is comprised of two parts - number of `seats` and `compute`. 
+
+## Seats
+
+Projects on a paid plan can invite collaborators to join their project. 
+
+Each additional collaborator is considered a `seat` and is charged on a flat monthly rate. Project owners and admins can manage permissions and roles for each seat in the settings tab on the project page. 
+
+## Compute
+
+Reflex Cloud is billed on a per second basis so you only pay for when your app is being used by your end users. When your app is idle, you are not charged. 
+
+For more information on compute pricing, please see the [compute]({hosting.compute.path}) page.
+
+## Manage Billing
+
+To manage your billing, you can go to the `Billing` tab in the Cloud UI on the project page.
+
+## Setting Billing Limits
+
+If you want to set a billing limit for your project, you can do so by going to the `Billing` tab in the Cloud UI on the project page.

docs/hosting/compute.md

@@ -0,0 +1,35 @@
+```python exec
+import reflex as rx
+from reflex_image_zoom import image_zoom
+from pcweb.pages.pricing.calculator import compute_table_base
+```
+
+## Compute Usage
+
+Reflex Cloud is billed on a per second basis so you only pay for when your app is being used by your end users. When your app is idle, you are not charged. 
+
+This allows you to deploy your app on larger sizes and multiple regions without worrying about paying for idle compute. We bill on a per second basis so you only pay for the compute you use.
+
+By default your app stays alive for 5 minutes after the no users are connected. After this time your app will be considered idle and you will not be charged. Start up times usually take less than 1 second for you apps to come back online.
+
+#### Warm vs Cold Start
+- Apps below `c2m2` are considered warm starts and are usually less than 1 second.
+- If your app is larger than `c2m2` it will be a cold start which takes around 15 seconds. If you want to avoid this you can reserve a machine.
+
+## Compute Pricing Table
+
+```python eval
+compute_table_base()
+```
+
+## Reserved Machines (Coming Soon)
+
+If you expect your apps to be continuously receiving users, you may want to reserve a machine instead of having us manage your compute. 
+
+This will be a flat monthly rate for the machine.
+
+## Monitoring Usage
+
+To monitor your projects usage, you can go to the billing tab in the Reflex Cloud UI on the project page.
+
+Here you can see the current billing and usage for your project.

docs/hosting/config_file.md

@@ -0,0 +1,32 @@
+```python exec
+import reflex as rx
+from reflex_image_zoom import image_zoom
+from pcweb.pages.docs import hosting 
+from pcweb.pages import docs
+from pcweb.styles.styles import get_code_style, cell_style
+
+```
+## Config File
+
+To create a `config.yml` file for your app run the command below:
+
+```bash
+reflex cloud config
+```
+
+This will create a yaml file similar to the one below where you can edit the app configuration:
+
+```yaml
+name: medo
+description: ''
+regions:
+  sjc: 1
+  lhr: 2
+vmtype: c1m1
+hostname: null
+envfile: .env
+project: null
+packages:
+- procps
+```
+

docs/hosting/deploy-quick-start.md

@@ -72,7 +72,7 @@ If you go back to the Cloud UI you should be able to see your deployed app and o
 
 ```md alert info
 # Setup a Cloud Config File
-To create a `config.yml` file for your app to set your app configuration check out the [Cloud Config Docs]({docs.hosting.app.path}#config-file).
+To create a `config.yml` file for your app to set your app configuration check out the [Cloud Config Docs]({docs.hosting.config_file.path}).
 ```
 
 ```md alert info