replace pricing calculator with compute table

.gitignore

@@ -1,3 +1,4 @@
+.states
 **/*.db
 **/*.pyc
 **/*.swp

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 continously recieving 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/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.app_management.path}).
 ```
 
 ```md alert info

docs/hosting/deploy-with-github-actions.md

@@ -37,7 +37,7 @@ github_actions_configs = [
 ]
 ```
 
-# Reflex Deploy with Github Actions
+# Deploy with Github Actions
 
 This GitHub Action simplifies the deployment of Reflex applications to Reflex Cloud. It handles setting up the environment, installing the Reflex CLI, and deploying your app with minimal configuration.