docs: refactor product badges

[DOCS-518]: https://hasurahq.atlassian.net/browse/DOCS-518?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/8724
GitOrigin-RevId: 88935fde9cf6235a7e4bfbe9fb4bb6020de64cca

docs/docs/actions/open-api.mdx

@@ -12,11 +12,12 @@ sidebar_class_name: cloud-and-enterprise-icon
 ---
 
 import Thumbnail from '@site/src/components/Thumbnail';
+import ProductBadge from '@site/src/components/ProductBadge';
 import Player from '@site/src/components/Player';
 
 # Import Action from OpenAPI Spec
 
-<div className="badge badge--primary heading-badge">Available on: Cloud Enterprise, Self-hosted Enterprise</div>
+<ProductBadge ee self />
 
 ## Overview
 

docs/docs/api-reference/cloud-api-reference.mdx

@@ -12,13 +12,12 @@ sidebar_class_name: cloud-icon
 ---
 
 import TOCInline from '@theme/TOCInline';
+import ProductBadge from '@site/src/components/ProductBadge';
 import Thumbnail from '@site/src/components/Thumbnail';
 
 # Hasura Cloud API Reference
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge free standard pro ee />
-  Available on: Cloud Free, Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Introduction
 

docs/docs/api-reference/metadata-api/api-limits.mdx

@@ -15,11 +15,11 @@ keywords:
   - ee
 ---
 
+import ProductBadge from '@site/src/components/ProductBadge';
+
 # Metadata API Reference: API Limits
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge free standard pro ee self />
-  Available on: Cloud Free, Cloud Standard, Cloud Professional, Cloud Enterprise, Self-hosted Enterprise
-</div>
 
 ## Introduction
 

docs/docs/api-reference/metadata-api/event-triggers.mdx

@@ -10,6 +10,8 @@ keywords:
   - event trigger
 ---
 
+import ProductBadge from '@site/src/components/ProductBadge';
+
 # Metadata API Reference: Event Triggers
 
 ## Introduction
@@ -79,7 +81,7 @@ X-Hasura-Role: admin
 ### Args syntax {#metadata-pg-create-event-trigger-syntax}
 
 | Key                    | Required | Schema                                                                                                                                 | Description                                                                                                            |
-|------------------------|----------|----------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------|
+| ---------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
 | name                   | true     | [TriggerName](/api-reference/syntax-defs.mdx#triggername)                                                                              | Name of the Event Trigger                                                                                              |
 | table                  | true     | [QualifiedTable](/api-reference/syntax-defs.mdx#qualifiedtable)                                                                        | Object with table name and schema                                                                                      |
 | source                 | false    | [SourceName](/api-reference/syntax-defs.mdx#sourcename)                                                                                | Name of the source database of the table (default: `default`)                                                          |
@@ -347,9 +349,7 @@ X-Hasura-Role: admin
 
 ## cleanup_event_trigger_logs {#metadata-cleanup-event-trigger-logs}
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge free standard pro ee self />
-  Available on: Cloud Free, Cloud Standard, Cloud Professional, Cloud Enterprise, Self-hosted Enterprise
-</div>
 
 `cleanup_event_trigger_logs` is used to manually delete the event logs for a given Event Trigger.
 
@@ -383,7 +383,7 @@ X-Hasura-Role: admin
 
 ## resume_event_trigger_cleanups {#metadata-resume-event-trigger-cleanups}
 
-<div className="badge badge--primary heading-badge">Available on: Cloud Enterprise, Self-hosted Enterprise</div>
+<ProductBadge ee self />
 
 `resume_event_trigger_cleanups` is used to resume the paused log cleaner for Event Triggers.
 
@@ -413,7 +413,7 @@ X-Hasura-Role: admin
 
 ## pause_event_trigger_cleanups {#metadata-pause-event-trigger-cleanups}
 
-<div className="badge badge--primary heading-badge">Available on: Cloud Enterprise, Self-hosted Enterprise</div>
+<ProductBadge ee self />
 
 - `pause_event_trigger_cleanups` is used to pause the log cleaner for event triggers which already have a cleaner
   installed.

docs/docs/api-reference/metadata-api/observability.mdx

@@ -18,12 +18,11 @@ keywords:
   - ee
 ---
 
+import ProductBadge from '@site/src/components/ProductBadge';
+
 # Metadata API Reference: Observability Options
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge ce free standard pro ee self />
-  Available on: Community Edition, Cloud Free, Cloud Standard, Cloud Professional, Cloud Enterprise, Self-hosted
-  Enterprise
-</div>
 
 ## Introduction
 
@@ -31,7 +30,7 @@ The API to manage `Observability` related metadata configurations.
 
 ## Logs and metrics configuration
 
-<div className="badge badge--primary heading-badge">Available on: Cloud Standard, Cloud Professional</div>
+<ProductBadge standard pro />
 
 These are the configurations that govern the metrics and logging output for debugging and analytics.
 
@@ -76,7 +75,7 @@ X-Hasura-Role: admin
 
 ## OpenTelemetry Configuration
 
-<div className="badge badge--primary heading-badge">Available on: Self-hosted Enterprise</div>
+<ProductBadge self />
 
 The OpenTelemetry configuration enables export of [distributed traces](/observability/tracing.mdx) to an
 [OpenTelemetry](https://opentelemetry.io/) compliant APM receiver.

docs/docs/api-reference/metadata-api/table-view.mdx

@@ -11,6 +11,8 @@ keywords:
   - view
 ---
 
+import ProductBadge from '@site/src/components/ProductBadge';
+
 # Metadata API Reference: Tables/Views
 
 ## Introduction
@@ -274,7 +276,7 @@ Setting `apollo_federation_config` to `null` will disable Apollo Federation supp
 
 ## pg_test_connection_template {#metadata-pg-test-connection-template}
 
-<div className="badge badge--primary heading-badge">Available on: Self-hosted Enterprise</div>
+<ProductBadge self />
 
 `pg_test_connection_template` allows you to test the connection template set for a source.
 
@@ -311,11 +313,11 @@ X-Hasura-Role: admin
 
 ### Args syntax {#metadata-pg-test-connection-template-syntax}
 
-| Key                 | Required  | Schema                                                                      | Description                                                             |
+| Key                 | Required | Schema                                                                      | Description                                                   |
-| ------------------- | --------- | --------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| ------------------- | -------- | --------------------------------------------------------------------------- | ------------------------------------------------------------- |
-| source_name         | false     | [SourceName](/api-reference/syntax-defs.mdx#sourcename)                     | Name of the source database of the table (default: `default`)           |
+| source_name         | false    | [SourceName](/api-reference/syntax-defs.mdx#sourcename)                     | Name of the source database of the table (default: `default`) |
-| request_context     | true      | [RequestContext](/api-reference/syntax-defs.mdx#requestcontext)             | Request context                                                         |
+| request_context     | true     | [RequestContext](/api-reference/syntax-defs.mdx#requestcontext)             | Request context                                               |
-| connection_template | false     | [PGConnectionTemplate](/api-reference/syntax-defs.mdx#pgconnectiontemplate) | DB connection template                                                  |
+| connection_template | false    | [PGConnectionTemplate](/api-reference/syntax-defs.mdx#pgconnectiontemplate) | DB connection template                                        |
 
 :::info Enterprise only
 

docs/docs/api-reference/source-health.mdx

@@ -12,11 +12,11 @@ sidebar_label: Source Health Check API
 sidebar_class_name: cloud-icon
 ---
 
+import ProductBadge from '@site/src/components/ProductBadge';
+
 # Source Health Check API Reference
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge free standard pro ee />
-  Available on: Cloud Free, Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Introduction
 

docs/docs/auth/authentication/webhook.mdx

@@ -11,19 +11,19 @@ sidebar_label: Webhook
 ---
 
 import Thumbnail from '@site/src/components/Thumbnail';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Authentication Using a Webhook
 
 You can configure the Hasura Engine to use webhook mode in order to authenticate incoming requests.
 
 This process of using webhook mode for authentication with Hasura requires specifying a URL - which Hasura calls with
-the original request headers - that then returns a body containing the user
+the original request headers - that then returns a body containing the user information in session variables.
-information in session variables.
 
-<Thumbnail src='/img/auth/auth-webhook-overview.png' alt='Authentication using webhooks' width='1000px' />
+<Thumbnail src="/img/auth/auth-webhook-overview.png" alt="Authentication using webhooks" width="1000px" />
 
-The webhook service will use your request headers to determine the auth status of the user and return the user
+The webhook service will use your request headers to determine the auth status of the user and return the user role and
-role and any other information as session variables in the response body.
+any other information as session variables in the response body.
 
 :::info Prerequisite
 
@@ -131,10 +131,10 @@ To allow the GraphQL request to go through, your webhook must return a `200` sta
 session variables beginning with `X-Hasura-*` in the body of your response. These will be available to your permission
 rules in Hasura Engine.
 
-You will, at least, need to set the `X-Hasura-Role` session variable to let the Hasura Engine know which role to use
+You will, at least, need to set the `X-Hasura-Role` session variable to let the Hasura Engine know which role to use for
-for this request. Unlike JWT auth mode, you do not have to pass `X-Hasura-Allowed-Roles` or
+this request. Unlike JWT auth mode, you do not have to pass `X-Hasura-Allowed-Roles` or `X-Hasura-Default-Role` session
-`X-Hasura-Default-Role` session variables. This is because the webhook is called for each request, allowing the auth
+variables. This is because the webhook is called for each request, allowing the auth service to easily switch the user
-service to easily switch the user role if needed.
+role if needed.
 
 ```http
 HTTP/1.1 200 OK
@@ -154,11 +154,10 @@ All values should be `String`. They will be converted to the right type automati
 
 :::
 
-
 :::info Set-Cookie headers
 
-If `Set-Cookie` HTTP headers are set by the auth webhook, they are forwarded by Hasura Engine as response headers
+If `Set-Cookie` HTTP headers are set by the auth webhook, they are forwarded by Hasura Engine as response headers for
-for both GET/POST request methods.
+both GET/POST request methods.
 
 :::
 
@@ -240,12 +239,10 @@ auth-webhook is made after the time specified in those fields and a new websocke
 
 ## Caching webhook session variables
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge standard pro ee self />
-  Available on: Cloud Standard, Cloud Professional, Cloud Enterprise, Self-hosted Enterprise
-</div>
 
-Webhook session variables can be cached in order to improve performance of the request. For caching, you need to
+Webhook session variables can be cached in order to improve performance of the request. For caching, you need to return
-return either:
+either:
 
 - a `Cache-Control` variable, modeled on the
   [Cache-Control HTTP Header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control), to specify a
@@ -282,12 +279,13 @@ Content-Type: application/json
 :::tip Tip
 
 The cache key is based on the following parameters:
+
 - Client headers
 - Graphql request
 
 This means that the cache key will change if the graphql request changes. If you want to cache auth token based on
-client headers only, you can [omit the auth-hook request
+client headers only, you can
-body](deployment/graphql-engine-flags/reference.mdx#send-request-body-to-auth-hook).
+[omit the auth-hook request body](deployment/graphql-engine-flags/reference.mdx#send-request-body-to-auth-hook).
 
 :::
 
@@ -321,4 +319,3 @@ Once deployed, you can use any of the following endpoints as your auth webhook i
 If you are using `Firebase`, you will need to set the associated environment variables.
 
 :::
-

docs/docs/caching/caching-config.mdx

@@ -8,11 +8,11 @@ keywords:
 sidebar_position: 3
 ---
 
+import ProductBadge from '@site/src/components/ProductBadge';
+
 # Caching Config
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge standard pro ee self />
-  Available on: Cloud Standard, Cloud Professional, Cloud Enterprise, Self-hosted Enterprise
-</div>
 
 ## Introduction
 

docs/docs/caching/overview.mdx

@@ -15,13 +15,13 @@ sidebar_class_name: cloud-and-enterprise-icon
 
 import HeadingIcon from '@site/src/components/HeadingIcon';
 import VersionedLink from '@site/src/components/VersionedLink';
+import ProductBadge from '@site/src/components/ProductBadge';
 import Caching from '@site/static/icons/features/caching.svg';
 
 # <Caching /> Hasura Caching
 
-<div className="badge badge--primary heading-badge" style={{ marginBottom: `1rem` }}>
+<ProductBadge standard pro ee self />
-  Available on: Cloud Standard, Cloud Professional, Cloud Enterprise, Self-hosted Enterprise
+
-</div>
 <div className="overview-header">
   <div className="overview-text">
     <p>

docs/docs/databases/database-config/cloud-connection-pooling.mdx

@@ -17,12 +17,11 @@ sidebar_class_name: cloud-icon
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import Thumbnail from '@site/src/components/Thumbnail';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Elastic Connection Pools
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge standard pro ee />
-  Available on: Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Introduction
 

docs/docs/databases/database-config/dynamic-db-connection.mdx

@@ -23,12 +23,11 @@ import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Dynamic Routing for Databases
 
-<div className="badge badge--primary heading-badge" style={{ marginBottom: `20px` }}>
+<ProductBadge pro ee self />
-  Available on: Cloud Professional, Cloud Enterprise, Self-hosted Enterprise
-</div>
 
 ## Introduction
 
@@ -65,8 +64,9 @@ specific node. You can achieve this in Hasura using a connection template.
 
 ## How it works
 
-When a request is executed, dynamic routing will use a connection template (in Kriti lang) to resolve a connection from a connection set.
+When a request is executed, dynamic routing will use a connection template (in Kriti lang) to resolve a connection from
-Note that only non-admin roles use the connection template. The admin role will always use the `primary` connection.
+a connection set. Note that only non-admin roles use the connection template. The admin role will always use the
+`primary` connection.
 
 There are two configurable parameters in the source configuration useful for dynamic routing:
 
@@ -448,4 +448,3 @@ connection. Mutations routed to the members of the connection set will not trigg
 ### Migrations
 
 Hasura [CLI Migrations](/migrations-metadata-seeds/manage-migrations.mdx) cannot be applied on a connection set member.
-

docs/docs/databases/database-config/read-replicas.mdx

@@ -18,12 +18,11 @@ import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Read Replicas
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge standard pro ee self />
-  Available on: Cloud Standard, Cloud Professional, Cloud Enterprise, Self-hosted Enterprise
-</div>
 
 ## Introduction
 

docs/docs/databases/mysql/cloud.mdx

@@ -11,11 +11,12 @@ keywords:
 ---
 
 import Thumbnail from '@site/src/components/Thumbnail';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Getting Started with MySQL in Hasura Cloud
 
 <div className="badge-container">
-  <div className="badge badge--primary heading-badge">Available on: Cloud</div>
+  <ProductBadge free standard pro ee />
   <div className="badge badge-gray heading-badge">Alpha</div>
 </div>
 
@@ -37,9 +38,9 @@ the easiest way to set up Hasura Engine and the MySQL GraphQL Data Connector.
 
 Hasura currently supports queries, mutations (INSERT, UPDATE, DELETE), table relationships, remote relationships and permissions on MySQL.
 
-Note that Hasura doesn't yet support the ability to modify the database schema for MySQL, so the database you
+Note that Hasura doesn't yet support the ability to modify the database schema for MySQL, so the database you connect to
-connect to should already contain tables and data. You should also ideally have access to it outside of Hasura to
+should already contain tables and data. You should also ideally have access to it outside of Hasura to modify the
-modify the schema.
+schema.
 
 :::
 

docs/docs/databases/mysql/docker.mdx

@@ -13,11 +13,12 @@ sidebar_position: 1
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import LatestRelease from '@site/src/components/LatestRelease';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Getting Started with Hasura and MySQL in Docker
 
 <div className="badge-container">
-  <div className="badge badge--primary heading-badge">Available on: Enterprise (Self-hosted)</div>
+  <ProductBadge self />
   <div className="badge badge-gray heading-badge">Alpha</div>
 </div>
 
@@ -40,9 +41,9 @@ MySQL GraphQL Data Connector.
 
 Hasura currently supports queries, mutations (INSERT, UPDATE, DELETE), table relationships, remote relationships and permissions on MySQL.
 
-Note that Hasura doesn't yet support the ability to modify the database schema for MySQL, so the database you
+Note that Hasura doesn't yet support the ability to modify the database schema for MySQL, so the database you connect to
-connect to should already contain tables and data. You should also ideally have access to it outside of Hasura to
+should already contain tables and data. You should also ideally have access to it outside of Hasura to modify the
-modify the schema.
+schema.
 
 :::
 
@@ -81,7 +82,6 @@ the Hasura Console are not publicly accessible.
 #### Edit the Docker Compose file to include the license key and admin secret environment variables
 
 ```yaml {5-6}
-
 ---
 graphql-engine:
   image: hasura/graphql-engine:v2.12.0
@@ -170,7 +170,6 @@ HASURA_GRAPHQL_METADATA_DATABASE_URL HASURA_GRAPHQL_REDIS_URL HASURA_GRAPHQL_RAT
 For example:
 
 ```yaml {5-7}
-
 ---
 graphql-engine:
   image: hasura/graphql-engine:v2.12.0

docs/docs/databases/mysql/index.mdx

@@ -8,10 +8,12 @@ keywords:
 slug: index
 ---
 
+import ProductBadge from '@site/src/components/ProductBadge';
+
 # MySQL
 
 <div className="badge-container">
-  <div className="badge badge--primary heading-badge">Available on: Hasura Cloud, Enterprise (Self-hosted)</div>
+  <ProductBadge free standard pro ee self />
   <div className="badge badge-gray heading-badge">Alpha</div>
 </div>
 
@@ -39,9 +41,9 @@ To get started with MySQL, check out our [Getting Started with Docker](/database
 
 Hasura currently supports queries, mutations (INSERT, UPDATE, DELETE), table relationships, remote relationships and permissions on MySQL.
 
-Note that Hasura doesn't yet support the ability to modify the database schema for MySQL, so the database you
+Note that Hasura doesn't yet support the ability to modify the database schema for MySQL, so the database you connect to
-connect to should already contain tables and data. You should also ideally have access to it outside of Hasura to
+should already contain tables and data. You should also ideally have access to it outside of Hasura to modify the
-modify the schema.
+schema.
 
 :::
 

docs/docs/databases/oracle/cloud.mdx

@@ -11,11 +11,12 @@ keywords:
 ---
 
 import Thumbnail from '@site/src/components/Thumbnail';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Getting Started with Oracle in Hasura Cloud
 
 <div className="badge-container">
-  <div className="badge badge--primary heading-badge">Available on: Hasura Cloud</div>
+  <ProductBadge free standard pro ee />
   <div className="badge badge-gray heading-badge">Alpha</div>
 </div>
 
@@ -35,9 +36,9 @@ This guide will help you get set up with [Hasura Cloud](/hasura-cloud/overview.m
 Hasura currently supports queries, mutations (INSERT, UPDATE, DELETE), table relationships, remote relationships and
 permissions on Oracle.
 
-Note that Hasura doesn't yet support the ability to modify the database schema for Oracle, so the database you
+Note that Hasura doesn't yet support the ability to modify the database schema for Oracle, so the database you connect
-connect to should already contain tables and data. You should also ideally have access to it outside of Hasura to
+to should already contain tables and data. You should also ideally have access to it outside of Hasura to modify the
-modify the schema.
+schema.
 
 :::
 
@@ -51,7 +52,11 @@ create a new Hasura Cloud account.
 
 Once you create a project on Hasura Cloud, hit the "Launch Console" button to open the Hasura Console for your project.
 
-<Thumbnail src='/img/databases/data-connector/create-project.png' alt='Connect new or existing database' width='1000px' />
+<Thumbnail
+  src="/img/databases/data-connector/create-project.png"
+  alt="Connect new or existing database"
+  width="1000px"
+/>
 
 ### Step 2: Connect to a Oracle database
 
@@ -59,8 +64,8 @@ From the Console, click the `Data` tab:
 
 <Thumbnail src="/img/getting-started/connect-db-console.png" alt="Connect database" width="1000px" />
 
-Select the Oracle (Alpha) data source driver. Enter a database display name and the JDBC Connection URL for your
+Select the Oracle (Alpha) data source driver. Enter a database display name and the JDBC Connection URL for your Oracle
-Oracle instance.
+instance.
 
 The JDBC connection URL should look like this:
 
@@ -69,6 +74,7 @@ jdbc:oracle:thin:<username>/<password>@<hostname>:<port>:<service-name>
 ```
 
 For example:
+
 ```yaml {4-6}
 jdbc:oracle:thin:myuser/mypassword@myhost.mycompany.com:oracletest  # assuming the default port 1521
 jdbc:oracle:thin:myuser/mypassword@myhost.mycompany.com:1234:oracletest  # assuming Oracle is running on port 1234
@@ -81,11 +87,9 @@ Click `Connect Database`.
 Now that you have successfully connected your Oracle database to Hasura, you can track tables and use Hasura to
 automatically build a GraphQL API on top of it.
 
-
 ## Keep up to date
 
-If you'd like to stay informed about the status of Oracle support, subscribe to our newsletter and join our
+If you'd like to stay informed about the status of Oracle support, subscribe to our newsletter and join our Discord!
-Discord!
 
 - [Join the newsletter list](https://hasura.io/newsletter/)
 - [Join the Hasura Discord](https://discord.com/invite/hasura)

docs/docs/databases/oracle/docker.mdx

@@ -1,7 +1,7 @@
 ---
 sidebar_label: Docker
 description: Getting Started with Docker for Hasura Enterprise Edition
-title: "Oracle: Getting Started with Docker"
+title: 'Oracle: Getting Started with Docker'
 keywords:
   - hasura
   - docs
@@ -11,13 +11,14 @@ keywords:
 sidebar_position: 1
 ---
 
-import Thumbnail from "@site/src/components/Thumbnail";
+import Thumbnail from '@site/src/components/Thumbnail';
-import LatestRelease from "@site/src/components/LatestRelease";
+import LatestRelease from '@site/src/components/LatestRelease';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Getting Started with Hasura and Oracle in Docker
 
 <div className="badge-container">
-  <div className="badge badge--primary heading-badge">Available on: Enterprise (Self-hosted)</div>
+  <ProductBadge self />
   <div className="badge badge-gray heading-badge">Alpha</div>
 </div>
 
@@ -38,9 +39,9 @@ Oracle GraphQL Data Connector.
 
 Hasura currently supports queries, mutations (INSERT, UPDATE, DELETE), table relationships, remote relationships and permissions on Oracle.
 
-Note that Hasura doesn't yet support the ability to modify the database schema for Oracle, so the database you
+Note that Hasura doesn't yet support the ability to modify the database schema for Oracle, so the database you connect
-connect to should already contain tables and data. You should also ideally have access to it outside of Hasura to
+to should already contain tables and data. You should also ideally have access to it outside of Hasura to modify the
-modify the schema.
+schema.
 
 :::
 
@@ -56,12 +57,11 @@ This tutorial assumes that the following prerequisites have been met:
   working on your machine.
 - You have access to a Oracle database for which you would like to create an API.
 
-
 ### Step 1: Get the Docker Compose file
 
 The [install manifests directory](https://github.com/hasura/graphql-engine/tree/master/install-manifests) contains all
-installation manifests required to deploy Hasura anywhere. The Docker Compose manifest also contains a Postgres
+installation manifests required to deploy Hasura anywhere. The Docker Compose manifest also contains a Postgres database
-database in order to store the Hasura metadata and a Redis instance for caching.
+in order to store the Hasura metadata and a Redis instance for caching.
 
 ```bash
 # in a new directory run
@@ -74,19 +74,19 @@ curl https://raw.githubusercontent.com/hasura/graphql-engine/master/install-mani
 
 Edit the downloaded `docker-compose.yaml` and set the license key and admin secret.
 
-An [admin secret key](/deployment/securing-graphql-endpoint.mdx) is required to make sure that your GraphQL endpoint
+An [admin secret key](/deployment/securing-graphql-endpoint.mdx) is required to make sure that your GraphQL endpoint and
-and the Hasura Console are not publicly accessible.
+the Hasura Console are not publicly accessible.
 
 #### Edit the Docker Compose file to include the license key and admin secret environment variables
 
 ```yaml {5-6}
-...
+
+---
 graphql-engine:
   image: hasura/graphql-engine:v2.12.0
   environment:
     HASURA_GRAPHQL_EE_LICENSE_KEY: <your_license_key>
     HASURA_GRAPHQL_ADMIN_SECRET: <your_secret_key>
-...
 ```
 
 :::caution Secure the admin secret
@@ -119,8 +119,8 @@ b0b1aac0508d postgres                           ... 1m ago  Up 1m  5432/tcp ...
 
 ### Step 5: Load the Hasura Console
 
-Open the Hasura Console by navigating to `http://localhost:8080/console`. You will need to input your admin secret
+Open the Hasura Console by navigating to `http://localhost:8080/console`. You will need to input your admin secret key
-key as set in your Docker Compose file to log in.
+as set in your Docker Compose file to log in.
 
 ### Step 6: Connect to a Oracle database
 
@@ -128,8 +128,8 @@ From the Console, click the `Data` tab:
 
 <Thumbnail src="/img/getting-started/connect-db-console.png" alt="Connect database" width="1000px" />
 
-Select the Oracle (Alpha) data source driver, enter in a display name for the database and set the JDBC Connection
+Select the Oracle (Alpha) data source driver, enter in a display name for the database and set the JDBC Connection URL
-URL for your Oracle instance.
+for your Oracle instance.
 
 The JDBC connection URL should look like this:
 
@@ -138,12 +138,12 @@ jdbc:oracle:thin:<username>/<password>@<hostname>:<port>:<service-name>
 ```
 
 For example:
+
 ```yaml {4-6}
 jdbc:oracle:thin:myuser/mypassword@myhost.mycompany.com:oracletest # assuming the default port 1521
 jdbc:oracle:thin:myuser/mypassword@myhost.mycompany.com:1234:oracletest # assuming Oracle is running on port 1234
 ```
 
-
 Click `Connect Database`.
 
 ### Step 7: Track tables and run GraphQL API queries
@@ -160,21 +160,20 @@ We highly recommend using managed PostgreSQL and Redis instances especially when
 To switch to using your PostgreSQL or Redis instances, set the following environment variables:
 
 ```yaml {4-6}
-HASURA_GRAPHQL_METADATA_DATABASE_URL
+HASURA_GRAPHQL_METADATA_DATABASE_URL HASURA_GRAPHQL_REDIS_URL HASURA_GRAPHQL_RATE_LIMIT_REDIS_URL
-HASURA_GRAPHQL_REDIS_URL
-HASURA_GRAPHQL_RATE_LIMIT_REDIS_URL
 ```
+
 For example:
 
 ```yaml {5-7}
-...
+
+---
 graphql-engine:
   image: hasura/graphql-engine:v2.12.0
   environment:
     HASURA_GRAPHQL_METADATA_DATABASE_URL: postgres://postgres:postgrespassword@postgres:5432/postgres
-    HASURA_GRAPHQL_REDIS_URL: "redis://redis:6379"
+    HASURA_GRAPHQL_REDIS_URL: 'redis://redis:6379'
-    HASURA_GRAPHQL_RATE_LIMIT_REDIS_URL: "redis://redis:6379"
+    HASURA_GRAPHQL_RATE_LIMIT_REDIS_URL: 'redis://redis:6379'
-...
 ```
 
 ### Resources

docs/docs/databases/oracle/index.mdx

@@ -8,23 +8,25 @@ keywords:
 slug: index
 ---
 
+import ProductBadge from '@site/src/components/ProductBadge';
+
 # Oracle
 
 <div className="badge-container">
-  <div className="badge badge--primary heading-badge">Available on: Hasura Cloud, Enterprise (Self-hosted)</div>
+  <ProductBadge free standard pro ee self />
   <div className="badge badge-gray heading-badge">Alpha</div>
 </div>
 
 ## Introduction
 
-Hasura enables you to connect to Oracle databases to automatically build a GraphQL API based on your database
+Hasura enables you to connect to Oracle databases to automatically build a GraphQL API based on your database schema.
-schema.
 
-At present, our Oracle integration is available in Hasura Cloud and Docker environments, where you can run
+At present, our Oracle integration is available in Hasura Cloud and Docker environments, where you can run Hasura
-Hasura GraphQL Engine and connect the Oracle GraphQL Data Connector to it. For more information on GraphQL Data
+GraphQL Engine and connect the Oracle GraphQL Data Connector to it. For more information on GraphQL Data Connectors
-Connectors check out [our blog post on the topic](https://hasura.io/blog/hasura-graphql-data-connectors/).
+check out [our blog post on the topic](https://hasura.io/blog/hasura-graphql-data-connectors/).
 
 To get started with Oracle:
+
 - In Hasura Cloud, check out our [Getting Started with Oracle in Hasura Cloud](/databases/oracle/cloud.mdx) guide
 - In a Docker environment, check out our [Getting Started with Docker](/databases/oracle/docker.mdx) guide
 
@@ -40,9 +42,9 @@ To get started with Oracle:
 Hasura currently supports queries, mutations (INSERT, UPDATE, DELETE), table relationships, remote relationships and
 permissions on Oracle.
 
-Note that Hasura doesn't yet support the ability to modify the database schema for Oracle, so the database you
+Note that Hasura doesn't yet support the ability to modify the database schema for Oracle, so the database you connect
-connect to should already contain tables and data. You should also ideally have access to it outside of Hasura to
+to should already contain tables and data. You should also ideally have access to it outside of Hasura to modify the
-modify the schema.
+schema.
 
 :::
 

docs/docs/deployment/health-checks/source-health-check.mdx

@@ -15,12 +15,11 @@ sidebar_class_name: cloud-icon
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Source Health Check
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge free standard ee self />
-  Available on: Cloud Free, Cloud Standard, Cloud Enterprise, Self-hosted Enterprise
-</div>
 
 ## Overview
 

docs/docs/enterprise/caching.mdx

@@ -13,12 +13,11 @@ keywords:
 ---
 
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Enable GraphQL Caching
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge standard pro ee self />
-  Available on: Cloud Standard, Cloud Professional, Cloud Enterprise, Self-hosted Enterprise
-</div>
 
 ## Introduction
 

docs/docs/enterprise/dependencies.mdx

@@ -14,13 +14,15 @@ keywords:
   - licenses
 ---
 
+import ProductBadge from '@site/src/components/ProductBadge';
+
 # Licenses and Dependencies
 
-<div className="badge badge--primary heading-badge">Available on: Enterprise Edition</div>
+<ProductBadge ee self />
 
-The Hasura product relies on some third-party libraries in order to provide its services and functions, which may
+The Hasura product relies on some third-party libraries in order to provide its services and functions, which may have
-have their own dependencies which the Hasura product inherits. Your systems and
+their own dependencies which the Hasura product inherits. Your systems and use may be impacted or informed by these
-use may be impacted or informed by these dependencies, so we provide snapshots of the information here.
+dependencies, so we provide snapshots of the information here.
 
 ## Licenses
 
@@ -39,22 +41,22 @@ Our systems leverage dependencies with licenses such as MIT, ISC, Apache, and BS
 | `ansi-wl-pprint`            | [`0.6.9`](http://hackage.haskell.org/package/ansi-wl-pprint-0.6.9)                | `BSD-3-Clause` |
 | `async`                     | [`2.2.4`](http://hackage.haskell.org/package/async-2.2.4)                         | `BSD-3-Clause` |
 | `atomic-primops`            | [`0.8.4`](http://hackage.haskell.org/package/atomic-primops-0.8.4)                | `BSD-3-Clause` |
-| `base`              | [`4.16.4.0`](http://hackage.haskell.org/package/base-4.16.4.0)                    | `BSD-3-Clause` |
+| `base`                      | [`4.16.4.0`](http://hackage.haskell.org/package/base-4.16.4.0)                    | `BSD-3-Clause` |
 | `base16-bytestring`         | [`1.0.2.0`](http://hackage.haskell.org/package/base16-bytestring-1.0.2.0)         | `BSD-3-Clause` |
 | `base64-bytestring`         | [`1.2.1.0`](http://hackage.haskell.org/package/base64-bytestring-1.2.1.0)         | `BSD-3-Clause` |
-| `bytestring`        | [`0.11.3.1`](http://hackage.haskell.org/package/bytestring-0.11.3.1)              | `BSD-3-Clause` |
+| `bytestring`                | [`0.11.3.1`](http://hackage.haskell.org/package/bytestring-0.11.3.1)              | `BSD-3-Clause` |
 | `case-insensitive`          | [`1.2.1.0`](http://hackage.haskell.org/package/case-insensitive-1.2.1.0)          | `BSD-3-Clause` |
 | `cereal`                    | [`0.5.8.3`](http://hackage.haskell.org/package/cereal-0.5.8.3)                    | `BSD-3-Clause` |
-| `containers`        | [`0.6.5.1`](http://hackage.haskell.org/package/containers-0.6.5.1)                | `BSD-3-Clause` |
+| `containers`                | [`0.6.5.1`](http://hackage.haskell.org/package/containers-0.6.5.1)                | `BSD-3-Clause` |
 | `cryptonite`                | [`0.30`](http://hackage.haskell.org/package/cryptonite-0.30)                      | `BSD-3-Clause` |
 | `data-default`              | [`0.7.1.1`](http://hackage.haskell.org/package/data-default-0.7.1.1)              | `BSD-3-Clause` |
 | `data-has`                  | [`0.4.0.0`](http://hackage.haskell.org/package/data-has-0.4.0.0)                  | `BSD-3-Clause` |
-| `deepseq`           | [`1.4.6.1`](http://hackage.haskell.org/package/deepseq-1.4.6.1)                   | `BSD-3-Clause` |
+| `deepseq`                   | [`1.4.6.1`](http://hackage.haskell.org/package/deepseq-1.4.6.1)                   | `BSD-3-Clause` |
-| `directory`         | [`1.3.6.2`](http://hackage.haskell.org/package/directory-1.3.6.2)                 | `BSD-3-Clause` |
+| `directory`                 | [`1.3.6.2`](http://hackage.haskell.org/package/directory-1.3.6.2)                 | `BSD-3-Clause` |
 | `ekg-core`                  | [`0.1.1.7`](http://hackage.haskell.org/package/ekg-core-0.1.1.7)                  | `BSD-3-Clause` |
 | `ekg-json`                  | [`0.1.0.7`](http://hackage.haskell.org/package/ekg-json-0.1.0.7)                  |                |
 | `ekg-prometheus`            | [`0.2.0.0`](http://hackage.haskell.org/package/ekg-prometheus-0.2.0.0)            |                |
-| `exceptions`        | [`0.10.4`](http://hackage.haskell.org/package/exceptions-0.10.4)                  | `BSD-3-Clause` |
+| `exceptions`                | [`0.10.4`](http://hackage.haskell.org/package/exceptions-0.10.4)                  | `BSD-3-Clause` |
 | `fast-logger`               | [`3.1.1`](http://hackage.haskell.org/package/fast-logger-3.1.1)                   | `BSD-3-Clause` |
 | `file-embed`                | [`0.0.15.0`](http://hackage.haskell.org/package/file-embed-0.0.15.0)              | `BSD-2-Clause` |
 | `flush-queue`               | [`1.0.0`](http://hackage.haskell.org/package/flush-queue-1.0.0)                   | `BSD-3-Clause` |
@@ -92,20 +94,20 @@ Our systems leverage dependencies with licenses such as MIT, ISC, Apache, and BS
 | `retry`                     | [`0.9.3.0`](http://hackage.haskell.org/package/retry-0.9.3.0)                     | `BSD-3-Clause` |
 | `semialign`                 | [`1.2.0.1`](http://hackage.haskell.org/package/semialign-1.2.0.1)                 | `BSD-3-Clause` |
 | `semigroupoids`             | [`5.3.7`](http://hackage.haskell.org/package/semigroupoids-5.3.7)                 | `BSD-2-Clause` |
-| `stm`               | [`2.5.0.2`](http://hackage.haskell.org/package/stm-2.5.0.2)                       | `BSD-3-Clause` |
+| `stm`                       | [`2.5.0.2`](http://hackage.haskell.org/package/stm-2.5.0.2)                       | `BSD-3-Clause` |
 | `streaming-commons`         | [`0.2.2.5`](http://hackage.haskell.org/package/streaming-commons-0.2.2.5)         | `MIT`          |
 | `tagged`                    | [`0.8.6.1`](http://hackage.haskell.org/package/tagged-0.8.6.1)                    | `BSD-3-Clause` |
-| `template-haskell`  | [`2.18.0.0`](http://hackage.haskell.org/package/template-haskell-2.18.0.0)        | `BSD-3-Clause` |
+| `template-haskell`          | [`2.18.0.0`](http://hackage.haskell.org/package/template-haskell-2.18.0.0)        | `BSD-3-Clause` |
 | `text`                      | [`1.2.5.0`](http://hackage.haskell.org/package/text-1.2.5.0)                      | `BSD-2-Clause` |
 | `text-builder`              | [`0.6.7`](http://hackage.haskell.org/package/text-builder-0.6.7)                  | `MIT`          |
 | `text-conversions`          | [`0.3.1.1`](http://hackage.haskell.org/package/text-conversions-0.3.1.1)          | `ISC`          |
 | `these`                     | [`1.1.1.1`](http://hackage.haskell.org/package/these-1.1.1.1)                     | `BSD-3-Clause` |
-| `time`              | [`1.11.1.1`](http://hackage.haskell.org/package/time-1.11.1.1)                    | `BSD-3-Clause` |
+| `time`                      | [`1.11.1.1`](http://hackage.haskell.org/package/time-1.11.1.1)                    | `BSD-3-Clause` |
 | `tls`                       | [`1.6.0`](http://hackage.haskell.org/package/tls-1.6.0)                           | `BSD-3-Clause` |
-| `transformers`      | [`0.5.6.2`](http://hackage.haskell.org/package/transformers-0.5.6.2)              | `BSD-3-Clause` |
+| `transformers`              | [`0.5.6.2`](http://hackage.haskell.org/package/transformers-0.5.6.2)              | `BSD-3-Clause` |
 | `transformers-base`         | [`0.4.6`](http://hackage.haskell.org/package/transformers-base-0.4.6)             | `BSD-3-Clause` |
 | `unagi-chan`                | [`0.4.1.4`](http://hackage.haskell.org/package/unagi-chan-0.4.1.4)                | `BSD-3-Clause` |
-| `unix`              | [`2.7.2.2`](http://hackage.haskell.org/package/unix-2.7.2.2)                      | `BSD-3-Clause` |
+| `unix`                      | [`2.7.2.2`](http://hackage.haskell.org/package/unix-2.7.2.2)                      | `BSD-3-Clause` |
 | `unordered-containers`      | [`0.2.19.1`](http://hackage.haskell.org/package/unordered-containers-0.2.19.1)    | `BSD-3-Clause` |
 | `utf8-string`               | [`1.0.2`](http://hackage.haskell.org/package/utf8-string-1.0.2)                   | `BSD-3-Clause` |
 | `uuid`                      | [`1.3.15`](http://hackage.haskell.org/package/uuid-1.3.15)                        | `BSD-3-Clause` |
@@ -135,7 +137,7 @@ Our systems leverage dependencies with licenses such as MIT, ISC, Apache, and BS
 | `aeson-pretty`                      | [`0.8.9`](http://hackage.haskell.org/package/aeson-pretty-0.8.9)                      | `BSD-3-Clause`            |
 | `ansi-terminal`                     | [`0.11.3`](http://hackage.haskell.org/package/ansi-terminal-0.11.3)                   | `BSD-3-Clause`            |
 | `appar`                             | [`0.1.8`](http://hackage.haskell.org/package/appar-0.1.8)                             | `BSD-3-Clause`            |
-| `array`                     | [`0.5.4.0`](http://hackage.haskell.org/package/array-0.5.4.0)                         | `BSD-3-Clause`            |
+| `array`                             | [`0.5.4.0`](http://hackage.haskell.org/package/array-0.5.4.0)                         | `BSD-3-Clause`            |
 | `asn1-encoding`                     | [`0.9.6`](http://hackage.haskell.org/package/asn1-encoding-0.9.6)                     | `BSD-3-Clause`            |
 | `asn1-parse`                        | [`0.9.5`](http://hackage.haskell.org/package/asn1-parse-0.9.5)                        | `BSD-3-Clause`            |
 | `asn1-types`                        | [`0.3.4`](http://hackage.haskell.org/package/asn1-types-0.3.4)                        | `BSD-3-Clause`            |
@@ -153,7 +155,7 @@ Our systems leverage dependencies with licenses such as MIT, ISC, Apache, and BS
 | `base-orphans`                      | [`0.8.7`](http://hackage.haskell.org/package/base-orphans-0.8.7)                      | `MIT`                     |
 | `basement`                          | [`0.0.15`](http://hackage.haskell.org/package/basement-0.0.15)                        | `BSD-3-Clause`            |
 | `bifunctors`                        | [`5.5.13`](http://hackage.haskell.org/package/bifunctors-5.5.13)                      | `BSD-3-Clause`            |
-| `binary`                    | [`0.8.9.0`](http://hackage.haskell.org/package/binary-0.8.9.0)                        | `BSD-3-Clause`            |
+| `binary`                            | [`0.8.9.0`](http://hackage.haskell.org/package/binary-0.8.9.0)                        | `BSD-3-Clause`            |
 | `binary-parser`                     | [`0.5.7.2`](http://hackage.haskell.org/package/binary-parser-0.5.7.2)                 | `MIT`                     |
 | `bitvec`                            | [`1.1.3.0`](http://hackage.haskell.org/package/bitvec-1.1.3.0)                        | `BSD-3-Clause`            |
 | `blaze-builder`                     | [`0.4.2.2`](http://hackage.haskell.org/package/blaze-builder-0.4.2.2)                 | `BSD-3-Clause`            |
@@ -199,7 +201,7 @@ Our systems leverage dependencies with licenses such as MIT, ISC, Apache, and BS
 | `dc-api`                            | [`1.0.0`](http://hackage.haskell.org/package/dc-api-1.0.0)                            |                           |
 | `dec`                               | [`0.0.5`](http://hackage.haskell.org/package/dec-0.0.5)                               | `BSD-3-Clause`            |
 | `deferred-folds`                    | [`0.9.18.2`](http://hackage.haskell.org/package/deferred-folds-0.9.18.2)              | `MIT`                     |
-| `dependent-map`                     | [`0.4.0.0`](https://hackage.haskell.org/package/dependent-map)                                                                           | `LicenseRef-OtherLicense` |
+| `dependent-map`                     | [`0.4.0.0`](https://hackage.haskell.org/package/dependent-map)                        | `LicenseRef-OtherLicense` |
 | `dependent-sum`                     | [`0.7.1.0`](http://hackage.haskell.org/package/dependent-sum-0.7.1.0)                 | `LicenseRef-PublicDomain` |
 | `dependent-sum-template`            | [`0.1.1.1`](http://hackage.haskell.org/package/dependent-sum-template-0.1.1.1)        | `LicenseRef-PublicDomain` |
 | `distributive`                      | [`0.6.2.1`](http://hackage.haskell.org/package/distributive-0.6.2.1)                  | `BSD-3-Clause`            |
@@ -212,28 +214,28 @@ Our systems leverage dependencies with licenses such as MIT, ISC, Apache, and BS
 | `errors`                            | [`2.3.0`](http://hackage.haskell.org/package/errors-2.3.0)                            | `BSD-3-Clause`            |
 | `extra`                             | [`1.7.12`](http://hackage.haskell.org/package/extra-1.7.12)                           | `BSD-3-Clause`            |
 | `fail`                              | [`4.9.0.0`](http://hackage.haskell.org/package/fail-4.9.0.0)                          | `BSD-3-Clause`            |
-| `filepath`                  | [`1.4.2.2`](http://hackage.haskell.org/package/filepath-1.4.2.2)                      | `BSD-3-Clause`            |
+| `filepath`                          | [`1.4.2.2`](http://hackage.haskell.org/package/filepath-1.4.2.2)                      | `BSD-3-Clause`            |
 | `focus`                             | [`1.0.3`](http://hackage.haskell.org/package/focus-1.0.3)                             | `MIT`                     |
 | `foldl`                             | [`1.4.12`](http://hackage.haskell.org/package/foldl-1.4.12)                           | `BSD-3-Clause`            |
 | `formatting`                        | [`7.1.3`](http://hackage.haskell.org/package/formatting-7.1.3)                        | `BSD-3-Clause`            |
 | `free`                              | [`5.1.9`](http://hackage.haskell.org/package/free-5.1.9)                              | `BSD-3-Clause`            |
 | `generically`                       | [`0.1`](http://hackage.haskell.org/package/generically-0.1)                           | `BSD-3-Clause`            |
 | `generics-sop`                      | [`0.5.1.2`](http://hackage.haskell.org/package/generics-sop-0.5.1.2)                  | `BSD-3-Clause`            |
-| `ghc`                       | [`9.2.5`](http://hackage.haskell.org/package/ghc-9.2.5)                               | `BSD-3-Clause`            |
+| `ghc`                               | [`9.2.5`](http://hackage.haskell.org/package/ghc-9.2.5)                               | `BSD-3-Clause`            |
-| `ghc-bignum`                | [`1.2`](http://hackage.haskell.org/package/ghc-bignum-1.2)                            | `BSD-3-Clause`            |
+| `ghc-bignum`                        | [`1.2`](http://hackage.haskell.org/package/ghc-bignum-1.2)                            | `BSD-3-Clause`            |
-| `ghc-boot`                  | [`9.2.5`](http://hackage.haskell.org/package/ghc-boot-9.2.5)                          |                           |
+| `ghc-boot`                          | [`9.2.5`](http://hackage.haskell.org/package/ghc-boot-9.2.5)                          |                           |
-| `ghc-boot-th`               | [`9.2.5`](http://hackage.haskell.org/package/ghc-boot-th-9.2.5)                       |                           |
+| `ghc-boot-th`                       | [`9.2.5`](http://hackage.haskell.org/package/ghc-boot-th-9.2.5)                       |                           |
-| `ghc-heap`                  | [`9.2.5`](http://hackage.haskell.org/package/ghc-heap-9.2.5)                          |                           |
+| `ghc-heap`                          | [`9.2.5`](http://hackage.haskell.org/package/ghc-heap-9.2.5)                          |                           |
 | `ghc-heap-view`                     | [`0.6.3`](http://hackage.haskell.org/package/ghc-heap-view-0.6.3)                     | `BSD-3-Clause`            |
-| `ghc-prim`                  | [`0.8.0`](http://hackage.haskell.org/package/ghc-prim-0.8.0)                          | `BSD-3-Clause`            |
+| `ghc-prim`                          | [`0.8.0`](http://hackage.haskell.org/package/ghc-prim-0.8.0)                          | `BSD-3-Clause`            |
-| `ghci`                      | [`9.2.5`](http://hackage.haskell.org/package/ghci-9.2.5)                              |                           |
+| `ghci`                              | [`9.2.5`](http://hackage.haskell.org/package/ghci-9.2.5)                              |                           |
 | `hashtables`                        | [`1.3.1`](http://hackage.haskell.org/package/hashtables-1.3.1)                        | `BSD-3-Clause`            |
 | `haskell-lexer`                     | [`1.1`](http://hackage.haskell.org/package/haskell-lexer-1.1)                         | `BSD-3-Clause`            |
 | `hasura-error-message`              | [`1.0.0`](http://hackage.haskell.org/package/hasura-error-message-1.0.0)              |                           |
 | `hasura-schema-parsers`             | [`1.0.0`](http://hackage.haskell.org/package/hasura-schema-parsers-1.0.0)             |                           |
 | `hedgehog`                          | [`1.2`](http://hackage.haskell.org/package/hedgehog-1.2)                              | `BSD-3-Clause`            |
 | `hourglass`                         | [`0.2.12`](http://hackage.haskell.org/package/hourglass-0.2.12)                       | `BSD-3-Clause`            |
-| `hpc`                       | [`0.6.1.0`](http://hackage.haskell.org/package/hpc-0.6.1.0)                           | `BSD-3-Clause`            |
+| `hpc`                               | [`0.6.1.0`](http://hackage.haskell.org/package/hpc-0.6.1.0)                           | `BSD-3-Clause`            |
 | `hspec`                             | [`2.10.6`](http://hackage.haskell.org/package/hspec-2.10.6)                           | `MIT`                     |
 | `hspec-core`                        | [`2.10.6`](http://hackage.haskell.org/package/hspec-core-2.10.6)                      | `MIT`                     |
 | `hspec-discover`                    | [`2.10.6`](http://hackage.haskell.org/package/hspec-discover-2.10.6)                  | `MIT`                     |
@@ -248,13 +250,13 @@ Our systems leverage dependencies with licenses such as MIT, ISC, Apache, and BS
 | `indexed-traversable`               | [`0.1.2`](http://hackage.haskell.org/package/indexed-traversable-0.1.2)               | `BSD-2-Clause`            |
 | `indexed-traversable-instances`     | [`0.1.1.1`](http://hackage.haskell.org/package/indexed-traversable-instances-0.1.1.1) | `BSD-2-Clause`            |
 | `inspection-testing`                | [`0.4.6.1`](http://hackage.haskell.org/package/inspection-testing-0.4.6.1)            | `MIT`                     |
-| `integer-gmp`               | [`1.1`](http://hackage.haskell.org/package/integer-gmp-1.1)                           | `BSD-3-Clause`            |
+| `integer-gmp`                       | [`1.1`](http://hackage.haskell.org/package/integer-gmp-1.1)                           | `BSD-3-Clause`            |
 | `integer-logarithms`                | [`1.0.3.1`](http://hackage.haskell.org/package/integer-logarithms-1.0.3.1)            | `MIT`                     |
 | `invariant`                         | [`0.6`](http://hackage.haskell.org/package/invariant-0.6)                             | `BSD-2-Clause`            |
 | `iproute`                           | [`1.7.12`](http://hackage.haskell.org/package/iproute-1.7.12)                         | `BSD-3-Clause`            |
 | `isomorphism-class`                 | [`0.1.0.7`](http://hackage.haskell.org/package/isomorphism-class-0.1.0.7)             | `MIT`                     |
 | `keys`                              | [`3.12.3`](http://hackage.haskell.org/package/keys-3.12.3)                            | `BSD-3-Clause`            |
-| `kriti-lang`                        | [`0.3.3`](http://hackage.haskell.org/package/kriti-lang-0.3.3)                        |   
+| `kriti-lang`                        | [`0.3.3`](http://hackage.haskell.org/package/kriti-lang-0.3.3)                        |
 | `lens-family`                       | [`2.1.2`](http://hackage.haskell.org/package/lens-family-2.1.2)                       | `BSD-3-Clause`            |
 | `lens-family-core`                  | [`2.1.2`](http://hackage.haskell.org/package/lens-family-core-2.1.2)                  | `BSD-3-Clause`            |
 | `libyaml`                           | [`0.1.2`](http://hackage.haskell.org/package/libyaml-0.1.2)                           | `BSD-3-Clause`            |
@@ -266,7 +268,7 @@ Our systems leverage dependencies with licenses such as MIT, ISC, Apache, and BS
 | `monad-time`                        | [`0.4.0.0`](http://hackage.haskell.org/package/monad-time-0.4.0.0)                    | `BSD-3-Clause`            |
 | `monad-validate`                    | [`1.2.0.1`](http://hackage.haskell.org/package/monad-validate-1.2.0.1)                | `ISC`                     |
 | `mono-traversable`                  | [`1.0.15.3`](http://hackage.haskell.org/package/mono-traversable-1.0.15.3)            | `MIT`                     |
-| `mtl`                       | [`2.2.2`](http://hackage.haskell.org/package/mtl-2.2.2)                               | `BSD-3-Clause`            |
+| `mtl`                               | [`2.2.2`](http://hackage.haskell.org/package/mtl-2.2.2)                               | `BSD-3-Clause`            |
 | `mtl-compat`                        | [`0.2.2`](http://hackage.haskell.org/package/mtl-compat-0.2.2)                        | `BSD-3-Clause`            |
 | `mysql`                             | [`0.2.1`](http://hackage.haskell.org/package/mysql-0.2.1)                             | `BSD-3-Clause`            |
 | `mysql-simple`                      | [`0.4.9`](http://hackage.haskell.org/package/mysql-simple-0.4.9)                      | `BSD-3-Clause`            |
@@ -290,7 +292,7 @@ Our systems leverage dependencies with licenses such as MIT, ISC, Apache, and BS
 | `pem`                               | [`0.2.4`](http://hackage.haskell.org/package/pem-0.2.4)                               | `BSD-3-Clause`            |
 | `pointed`                           | [`5.0.4`](http://hackage.haskell.org/package/pointed-5.0.4)                           | `BSD-3-Clause`            |
 | `postgresql-binary`                 | [`0.12.5`](http://hackage.haskell.org/package/postgresql-binary-0.12.5)               | `MIT`                     |
-| `pretty`                    | [`1.1.3.6`](http://hackage.haskell.org/package/pretty-1.1.3.6)                        | `BSD-3-Clause`            |
+| `pretty`                            | [`1.1.3.6`](http://hackage.haskell.org/package/pretty-1.1.3.6)                        | `BSD-3-Clause`            |
 | `pretty-show`                       | [`1.10`](http://hackage.haskell.org/package/pretty-show-1.10)                         | `MIT`                     |
 | `pretty-simple`                     | [`4.1.2.0`](http://hackage.haskell.org/package/pretty-simple-4.1.2.0)                 | `BSD-3-Clause`            |
 | `prettyprinter`                     | [`1.7.1`](http://hackage.haskell.org/package/prettyprinter-1.7.1)                     | `BSD-2-Clause`            |
@@ -298,7 +300,7 @@ Our systems leverage dependencies with licenses such as MIT, ISC, Apache, and BS
 | `primitive`                         | [`0.7.4.0`](http://hackage.haskell.org/package/primitive-0.7.4.0)                     | `BSD-3-Clause`            |
 | `primitive-extras`                  | [`0.10.1.5`](http://hackage.haskell.org/package/primitive-extras-0.10.1.5)            | `MIT`                     |
 | `primitive-unlifted`                | [`0.1.3.1`](http://hackage.haskell.org/package/primitive-unlifted-0.1.3.1)            | `BSD-3-Clause`            |
-| `process`                   | [`1.6.16.0`](http://hackage.haskell.org/package/process-1.6.16.0)                     | `BSD-3-Clause`            |
+| `process`                           | [`1.6.16.0`](http://hackage.haskell.org/package/process-1.6.16.0)                     | `BSD-3-Clause`            |
 | `profunctors`                       | [`5.6.2`](http://hackage.haskell.org/package/profunctors-5.6.2)                       | `BSD-3-Clause`            |
 | `proto-lens-runtime`                | [`0.7.0.3`](http://hackage.haskell.org/package/proto-lens-runtime-0.7.0.3)            | `BSD-3-Clause`            |
 | `psqueues`                          | [`0.2.7.3`](http://hackage.haskell.org/package/psqueues-0.2.7.3)                      | `BSD-3-Clause`            |
@@ -338,7 +340,7 @@ Our systems leverage dependencies with licenses such as MIT, ISC, Apache, and BS
 | `syb`                               | [`0.7.2.2`](http://hackage.haskell.org/package/syb-0.7.2.2)                           | `BSD-3-Clause`            |
 | `system-filepath`                   | [`0.4.14`](http://hackage.haskell.org/package/system-filepath-0.4.14)                 | `MIT`                     |
 | `terminal-size`                     | [`0.3.3`](http://hackage.haskell.org/package/terminal-size-0.3.3)                     | `BSD-3-Clause`            |
-| `terminfo`                  | [`0.4.1.5`](http://hackage.haskell.org/package/terminfo-0.4.1.5)                      | `BSD-3-Clause`            |
+| `terminfo`                          | [`0.4.1.5`](http://hackage.haskell.org/package/terminfo-0.4.1.5)                      | `BSD-3-Clause`            |
 | `text-builder-dev`                  | [`0.3.3`](http://hackage.haskell.org/package/text-builder-dev-0.3.3)                  | `MIT`                     |
 | `text-latin1`                       | [`0.3.1`](http://hackage.haskell.org/package/text-latin1-0.3.1)                       | `BSD-3-Clause`            |
 | `text-printer`                      | [`0.5.0.2`](http://hackage.haskell.org/package/text-printer-0.5.0.2)                  | `BSD-3-Clause`            |

docs/docs/enterprise/getting-started/index.mdx

@@ -9,9 +9,11 @@ keywords:
 slug: index
 ---
 
+import ProductBadge from '@site/src/components/ProductBadge';
+
 # Get Started
 
-<div className="badge badge--primary heading-badge">Available on: Self-hosted Enterprise</div>
+<ProductBadge self />
 
 ## Prerequisites
 
@@ -43,3 +45,5 @@ enable Enterprise Edition features right away.
 If you already have an Enterprise Edition license key provided by Hasura Sales, please follow
 [these steps](/enterprise/upgrade-ce-to-ee.mdx) to apply the license to your Hasura container.
 
+If you already have an EE license key provided by Hasura Sales, please follow
+[these steps](/enterprise/upgrade-ce-to-ee.mdx) to apply the license to your Hasura container.

docs/docs/enterprise/getting-started/quickstart-aws-ecs.mdx

@@ -10,10 +10,11 @@ sidebar_position: 2
 ---
 
 import LatestRelease from '@site/src/components/LatestRelease';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Quickstart with AWS ECS
 
-<div className="badge badge--primary heading-badge">Available on: Self-hosted Enterprise</div>
+<ProductBadge self />
 
 ## Introduction
 

docs/docs/enterprise/getting-started/quickstart-docker.mdx

@@ -11,10 +11,11 @@ sidebar_position: 1
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import LatestRelease from '@site/src/components/LatestRelease';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Quickstart with Docker
 
-<div className="badge badge--primary heading-badge">Available on: Self-hosted Enterprise</div>
+<ProductBadge self />
 
 ## Introduction
 

docs/docs/enterprise/getting-started/quickstart-google-cloud-run.mdx

@@ -10,10 +10,11 @@ sidebar_position: 4
 ---
 
 import LatestRelease from '@site/src/components/LatestRelease';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Quickstart with Google Cloud Run
 
-<div className="badge badge--primary heading-badge">Available on: Self-hosted Enterprise</div>
+<ProductBadge self />
 
 ## Introduction
 

docs/docs/enterprise/getting-started/quickstart-kubernetes.mdx

@@ -10,10 +10,11 @@ sidebar_position: 3
 ---
 
 import LatestRelease from '@site/src/components/LatestRelease';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Quickstart with Kubernetes
 
-<div className="badge badge--primary heading-badge">Available on: Self-hosted Enterprise</div>
+<ProductBadge self />
 
 ## Introduction
 

docs/docs/enterprise/getting-started/start-using-hasura-ee.mdx

@@ -9,9 +9,11 @@ keywords:
 sidebar_position: 5
 ---
 
+import ProductBadge from '@site/src/components/ProductBadge';
+
 # Start Using Hasura EE
 
-<div className="badge badge--primary heading-badge">Available on: Self-hosted Enterprise</div>
+<ProductBadge self />
 
 ## Instructions
 

docs/docs/enterprise/metrics.mdx

@@ -9,9 +9,11 @@ keywords:
 sidebar_position: 4
 ---
 
+import ProductBadge from '@site/src/components/ProductBadge';
+
 # Metrics via Prometheus
 
-<div className="badge badge--primary heading-badge">Available on: Self-hosted Enterprise</div>
+<ProductBadge self />
 
 ## Enable metrics endpoint
 

docs/docs/enterprise/opentelemetry.mdx

@@ -16,11 +16,12 @@ sidebar_position: 4
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import Thumbnail from '@site/src/components/Thumbnail';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Export Traces to OpenTelemetry Compliant Receiver
 
 <div className="badge-container">
-  <div className="badge badge--primary heading-badge">Available on: Self-hosted Enterprise</div>
+  <ProductBadge self />
   <div className="badge badge-gray heading-badge">Beta</div>
 </div>
 

docs/docs/enterprise/overview.mdx

@@ -12,13 +12,12 @@ sidebar_label: Overview
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import VersionedLink from '@site/src/components/VersionedLink';
+import ProductBadge from '@site/src/components/ProductBadge';
 import Enterprise from '@site/static/icons/features/enterprise.svg';
 
 # <Enterprise /> Hasura Enterprise
 
-<div className="badge badge--primary heading-badge" style={{ marginBottom: `1rem` }}>
+<ProductBadge self />
-  Available on: Self-hosted Enterprise
-</div>
 
 <div className="overview-header">
   <div className="overview-text">

docs/docs/enterprise/release-notes.mdx

@@ -13,9 +13,11 @@ keywords:
   - release notes
 ---
 
+import ProductBadge from '@site/src/components/ProductBadge';
+
 # Release Notes
 
-<div className="badge badge--primary heading-badge">Available on: Self-hosted Enterprise</div>
+<ProductBadge self />
 <br />
 <br />
 

docs/docs/enterprise/try-hasura-enterprise-edition.mdx

@@ -13,10 +13,11 @@ toc_max_heading_level: 2
 ---
 
 import Thumbnail from '@site/src/components/Thumbnail';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Try Hasura Enterprise Edition
 
-<div className="badge badge--primary heading-badge">Available on: Self-hosted Enterprise</div>
+<ProductBadge self />
 
 ## Overview
 

docs/docs/enterprise/upgrade-ce-to-ee.mdx

@@ -9,9 +9,11 @@ keywords:
 sidebar_position: 9
 ---
 
+import ProductBadge from '@site/src/components/ProductBadge';
+
 # Upgrading from Hasura CE to Hasura Enterprise
 
-<div className="badge badge--primary heading-badge">Available on: Self-hosted Enterprise</div>
+<ProductBadge self />
 
 ## Overview
 

docs/docs/event-triggers/clean-up/auto-cleanup.mdx

@@ -17,10 +17,11 @@ sidebar_class_name: cloud-and-enterprise-icon
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import Thumbnail from '@site/src/components/Thumbnail';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Auto Cleanup of Event Trigger Logs
 
-<div className="badge badge--primary heading-badge">Available on: Cloud Enterprise, Self-hosted Enterprise</div>
+<ProductBadge ee self />
 
 :::note Supported from
 

docs/docs/getting-started/getting-started-cloud.mdx

@@ -13,12 +13,11 @@ sidebar_class_name: cloud-icon
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Quickstart with Hasura Cloud
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge free standard pro ee />
-  Available on: Cloud Free, Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Introduction
 
@@ -36,13 +35,17 @@ On creating a new account, Hasura Cloud automatically creates an initial project
 
 Click `Launch Console` to open the Hasura Console in your browser.
 
-<Thumbnail src="/img/getting-started/cloud-initial-project-launch-console.png" alt="Connect new or existing database" width="556px" />
+<Thumbnail
+  src="/img/getting-started/cloud-initial-project-launch-console.png"
+  alt="Connect new or existing database"
+  width="556px"
+/>
 
 If you already have an account, you can create a new project by clicking the `New Project` link on the
 [Projects](https://cloud.hasura.io/projects) page.
 
-Regardless of tier, you have the choice of either Amazon Web Services (AWS) or
+Regardless of tier, you have the choice of either Amazon Web Services (AWS) or Google Cloud Platform (GCP) as hosting
-Google Cloud Platform (GCP) as hosting providers.
+providers.
 
 <Thumbnail
   src="/img/getting-started/getting-started-cloud-aws-and-gcp-emphasis.png"
@@ -73,10 +76,10 @@ Click on `Connect Neon Database` to create and connect a new Postgres database t
 
 <Thumbnail src="/img/cloud-dbs/neon/connect_neon_database.png" alt="Connect Neon database" width="700px" />
 
-
 ### Option 3.2: Connect an existing database
 
 If you chose `Connect existing database`:
+
 - Give the database a name, say `default`
 - Choose the database type from the list of [supported databases](/databases/overview.mdx#supported-databases)
 - Enter your database connection details
@@ -84,8 +87,8 @@ If you chose `Connect existing database`:
 
 <Thumbnail src="/img/getting-started/connect-db-cloud.png" alt="Enter URL for existing database" width="700px" />
 
-Check out [this section](databases/quickstart.mdx#cloud-projects-create-allow-nat-ip) for other steps
+Check out [this section](databases/quickstart.mdx#cloud-projects-create-allow-nat-ip) for other steps required to ensure
-required to ensure connectivity to your database from Hasura Cloud if needed.
+connectivity to your database from Hasura Cloud if needed.
 
 ## Step 4: Try out Hasura
 

docs/docs/graphql-api-explorer.mdx

@@ -18,14 +18,12 @@ slug: graphql-api-explorer/index
 ---
 
 import Thumbnail from '@site/src/components/Thumbnail';
+import ProductBadge from '@site/src/components/ProductBadge';
 import Explorer from '@site/static/icons/features/graphql_api_explorer_2.svg';
 
 # <Explorer /> Hasura GraphQL API Explorer
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge ce free standard pro ee self />
-  Available on: Community Edition, Cloud Free, Cloud Standard, Cloud Professional, Cloud Enterprise, Self-hosted
-  Enterprise
-</div>
 
 ## TL;DR
 

docs/docs/hasura-cloud/account-management/billing/billing-owner.mdx

@@ -14,12 +14,11 @@ sidebar_position: 1
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Billing Owner
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge standard pro ee />
-  Available on: Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Introduction
 

docs/docs/hasura-cloud/account-management/billing/credits.mdx

@@ -13,12 +13,11 @@ sidebar_label: Hasura Cloud credits
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Coupons and Credits
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge standard pro ee />
-  Available on: Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Introduction
 

docs/docs/hasura-cloud/account-management/billing/index.mdx

@@ -14,12 +14,11 @@ slug: index
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Billing
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge standard pro ee />
-  Available on: Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Introduction
 

docs/docs/hasura-cloud/account-management/billing/payment-methods.mdx

@@ -16,10 +16,11 @@ sidebar_position: 2
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Manage Payment Methods
 
-<div className="badge badge--primary heading-badge">Available on: Cloud Standard, Cloud Professional</div>
+<ProductBadge standard pro />
 
 ## Introduction
 

docs/docs/hasura-cloud/account-management/billing/receipts.mdx

@@ -13,10 +13,11 @@ sidebar_position: 4
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Receipts
 
-<div className="badge badge--primary heading-badge">Available on: Cloud Standard, Cloud Professional</div>
+<ProductBadge standard pro />
 
 ## Introduction
 

docs/docs/hasura-cloud/account-management/email-change.mdx

@@ -12,12 +12,11 @@ sidebar_position: 10
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Change Email Address
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge free standard pro ee />
-  Available on: Cloud Free, Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Introduction
 

docs/docs/hasura-cloud/account-management/index.mdx

@@ -13,12 +13,11 @@ sidebar_label: Account management
 
 import HeadingIcon from '@site/src/components/HeadingIcon';
 import AccountManagement from '@site/static/icons/features/account_management.svg';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # <AccountManagement /> Account Management
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge free standard pro ee />
-  Available on: Cloud Free, Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Introduction
 

docs/docs/hasura-cloud/account-management/marketplaces.mdx

@@ -13,9 +13,11 @@ keywords:
 sidebar_label: Marketplaces
 ---
 
+import ProductBadge from '@site/src/components/ProductBadge';
+
 # Marketplaces
 
-<div className="badge badge--primary heading-badge">Available on: Cloud Enterprise</div>
+<ProductBadge ee />
 
 ## Overview
 

docs/docs/hasura-cloud/ci-cd/github-integration.mdx

@@ -14,12 +14,11 @@ sidebar_position: 20
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # GitHub Deployment
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge free standard pro ee />
-  Available on: Cloud Free, Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Introduction
 

docs/docs/hasura-cloud/ci-cd/index.mdx

@@ -10,12 +10,11 @@ slug: index
 ---
 
 import Thumbnail from '@site/src/components/Thumbnail';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Continuous Integration and Continuous Deployment with Hasura Cloud
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge free standard pro ee />
-  Available on: Cloud Free, Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Introduction
 

docs/docs/hasura-cloud/ci-cd/preview-apps.mdx

@@ -15,12 +15,11 @@ sidebar_position: 10
 ---
 
 import Thumbnail from '@site/src/components/Thumbnail';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Preview Apps
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge free standard pro ee />
-  Available on: Cloud Free, Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## TL;DR
 

docs/docs/hasura-cloud/dedicated-vpc.mdx

@@ -13,10 +13,11 @@ sidebar_position: 50
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Dedicated VPC
 
-<div className="badge badge--primary heading-badge">Available on: Cloud Enterprise</div>
+<ProductBadge ee />
 
 ## Introduction
 

docs/docs/hasura-cloud/disaster-recovery.mdx

@@ -9,9 +9,11 @@ sidebar_label: Disaster recovery
 sidebar_position: 70
 ---
 
+import ProductBadge from '@site/src/components/ProductBadge';
+
 # Disaster Recovery and Passive Standby Config for Hasura Cloud
 
-<div className="badge badge--primary heading-badge">Available on: Cloud Enterprise</div>
+<ProductBadge ee />
 
 ## Overview
 

docs/docs/hasura-cloud/high-availability.mdx

@@ -8,11 +8,11 @@ sidebar_label: High-availability configuration
 sidebar_position: 60
 ---
 
+import ProductBadge from '@site/src/components/ProductBadge';
+
 # High-Availability Configuration
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge standard pro ee />
-  Available on: Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Overview
 

docs/docs/hasura-cloud/one-click-deploy/create-one-click-to-deploy-apps.mdx

@@ -14,12 +14,13 @@ sidebar_label: Create a One Click Deploy App
 sidebar_position: 10
 ---
 
-import Thumbnail from "@site/src/components/Thumbnail";
+import Thumbnail from '@site/src/components/Thumbnail';
-import CloudDeployURLGenerationForm from "@site/src/components/CloudDeployURLGenerationForm";
+import CloudDeployURLGenerationForm from '@site/src/components/CloudDeployURLGenerationForm';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Create a One Click Deploy to Hasura Cloud App
 
-<div className="badge badge--primary heading-badge">Available on: Cloud</div>
+<ProductBadge free standard pro ee />
 
 ## Introduction
 
@@ -83,22 +84,22 @@ The `hasura-cloud-deploy-config.yaml` accepts the following fields:
 **Example**: `hasura-cloud-deploy-config.yaml` file
 
 ```yaml
-name: "hasura-ecommerce-sample-app"
+name: 'hasura-ecommerce-sample-app'
 
 static-env:
   HASURA_GRAPHQL_UNAUTHORIZED_ROLE: anonymous
 
 user-env:
   PG_DATABASE_URL:
-    description: "Postgres database URL"
+    description: 'Postgres database URL'
     mandatory: true
   NEXTJS_SERVER_URL:
-    default: "http://localhost:3000"
+    default: 'http://localhost:3000'
-    description: "Next.js Server URL for authentication and custom business logic"
+    description: 'Next.js Server URL for authentication and custom business logic'
     mandatory: true
   HASURA_GRAPHQL_JWT_SECRET:
     default: '{"key": "this-is-the-hasura-nextjs-secret-key-replace-it-with-something-secure","type": "HS256"}'
-    description: "JWT Secret key"
+    description: 'JWT Secret key'
     mandatory: true
 ```
 
@@ -117,8 +118,7 @@ Adding a `hasura-cloud-deploy-config.yaml` is optional if the app doesn't need a
 Hasura Cloud automatically detects environment variables used for database connection strings from the app metadata and
 prompts users to set them even if a `hasura-cloud-deploy-config.yaml` file is not added.
 
-Hasura Cloud also automatically sets the `HASURA_GRAPHQL_ADMIN_SECRET` environment variable to secure the project.
+Hasura Cloud also automatically sets the `HASURA_GRAPHQL_ADMIN_SECRET` environment variable to secure the project. :::
-:::
 
 ## Step 3: Add a sample-requests.graphql file (optional)
 
@@ -137,7 +137,7 @@ The file structure of the project directory with the `sample-requests.graphql` s
 └─ 📄 sample-requests.graphql
 ```
 
-**Example**: ``sample-requests.graphql`` file
+**Example**: `sample-requests.graphql` file
 
 ```graphql
 query users {
@@ -161,12 +161,7 @@ query usersWithOrders {
 
 This will render the Console as follows on deployment completion:
 
-<Thumbnail
+<Thumbnail src="/img/deployment/one-click-to-deploy/project_console.png" alt="Project console" width="1200px" />
-  src="/img/deployment/one-click-to-deploy/project_console.png"
-  alt="Project console"
-  width="1200px"
-/>
-
 
 ## Step 4: Generate the Deployment URL and button
 
@@ -174,7 +169,9 @@ The following is the structure of the One Click Deploy URL which can also be lin
 button:
 
 ```html
-https://cloud.hasura.io/deploy?github_repo=<LINK-TO-GIT-REPO>&hasura_dir=<PATH-TO-HASURA-DIRECTORY-IN-REPO>&branch=<BRANCH-NAME>
+https://cloud.hasura.io/deploy?github_repo=<LINK-TO-GIT-REPO
+  >&hasura_dir=<PATH-TO-HASURA-DIRECTORY-IN-REPO>&branch=<BRANCH-NAME></BRANCH-NAME></PATH-TO-HASURA-DIRECTORY-IN-REPO
+></LINK-TO-GIT-REPO>
 ```
 
 ### One Click Deploy URL
@@ -197,19 +194,26 @@ for your app using the URL generated above.
 
 ### Snippets to Embed Button
 
-You can use the following snippets to add this button to a markdown file, such as your GitHub repository `README.md` or your dashboards for users to deploy:
+You can use the following snippets to add this button to a markdown file, such as your GitHub repository `README.md` or
+your dashboards for users to deploy:
 
 #### Markdown
+
 ```md
 [![Deploy to Hasura Cloud](https://hasura.io/deploy-button.svg)](https://cloud.hasura.io/deploy?github_repo=<LINK-TO-GIT-REPO>&hasura_dir=<PATH-TO-HASURA-DIRECTORY-IN-REPO>&branch=<BRANCH-NAME>)
 ```
 
 #### HTML
+
 ```html
-<a href="https://cloud.hasura.io/deploy?github_repo=<LINK-TO-GIT-REPO>&hasura_dir=<PATH-TO-HASURA-DIRECTORY-IN-REPO>&branch=<BRANCH-NAME>"><img src="https://hasura.io/deploy-button.svg" alt="Deploy to Hasura Cloud"/></a>
+<a
+  href="https://cloud.hasura.io/deploy?github_repo=<LINK-TO-GIT-REPO>&hasura_dir=<PATH-TO-HASURA-DIRECTORY-IN-REPO>&branch=<BRANCH-NAME>"
+  ><img src="https://hasura.io/deploy-button.svg" alt="Deploy to Hasura Cloud"
+/></a>
 ```
 
 #### URL
+
 ```bash
 https://cloud.hasura.io/deploy?github_repo=<LINK-TO-GIT-REPO>&hasura_dir=<PATH-TO-HASURA-DIRECTORY-IN-REPO>&branch=<BRANCH-NAME>
 ```

docs/docs/hasura-cloud/one-click-deploy/index.mdx

@@ -9,10 +9,11 @@ slug: index
 ---
 
 import Thumbnail from '@site/src/components/Thumbnail';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # One Click Deploy to Hasura Cloud
 
-<div className="badge badge--primary heading-badge">Available on: Cloud</div>
+<ProductBadge free standard pro ee />
 
 ## Introduction
 

docs/docs/hasura-cloud/overview.mdx

@@ -78,3 +78,252 @@ import Cloud from '@site/static/icons/features/cloud.svg';
     </div>
   </a>
 </div>
+
+<div>
+  <h2>Features</h2>
+  <p>
+    Below, you can find a list of features that are available on Hasura Cloud's different plans. For more details on the
+    entitlements under each plan, check out our <VersionedLink to="/hasura-cloud/plans">pricing page</VersionedLink>.
+  </p>
+  <h3 id="cloud-free">Cloud Free</h3>
+  <ul>
+    <li>
+      <VersionedLink to="/schema/overview/">Instant GraphQL APIs for CRUD operations</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/databases/overview/">Connected databases per project (up to 2)</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/hasura-cloud/projects/index/">Projects per account (up to 3)</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/hasura-cloud/plans/">Data passthrough (up to 100 MB / month)</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/hasura-cloud/plans/">
+        API request count (including websockets) (up to 3 million / month)
+      </VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/hasura-cloud/plans/">API request duration (up to 60 seconds)</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/observability/websockets/">Concurrent websocket connections (up to 10)</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/api-reference/restified/">RESTified endpoints</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/subscriptions/overview/">GraphQL subscriptions</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/remote-schemas/overview/">Remote Schemas</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/data-federation/data-federation-types/">Remote joins</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/actions/overview/">Actions</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/event-triggers/overview/">Event Triggers and Scheduled Triggers</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/graphql-api-explorer/index/">GraphiQL query and mutation designer</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/hasura-cli/overview/">CLI</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/api-reference/metadata-api/index/">Metadata APIs</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/migrations-metadata-seeds/overview/">Schema Migrations</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/data-federation/apollo-federation/">Apollo Federation v1 support</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/actions/open-api/">Import Action from OpenAPI Specification (OAS)</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/auth/authorization/index/">Role-based authorization</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/hasura-cloud/projects/index/">Collaborator management</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/hasura-cloud/regions/">Cloud providers: AWS, Google Cloud</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/hasura-cloud/ci-cd/github-integration/">GitHub integration</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/hasura-cloud/ci-cd/preview-apps/">Preview apps</VersionedLink>
+    </li>
+    <li>
+      <a href="https://hasura.io/help/">Community support</a>
+    </li>
+    <li>
+      <li>
+        <a href="https://hasura.io/help/">Email/ticketed support</a>
+      </li>
+    </li>
+  </ul>
+  <h3 id="cloud-professional">Cloud Professional</h3>
+  <ul>
+    <li>
+      <b>Everything in Cloud Free, plus:</b>
+    </li>
+    <li>
+      <VersionedLink to="/databases/overview/">Connected databases per project (no limit)</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/hasura-cloud/projects/index/">Projects per account (no limit)</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/hasura-cloud/plans/">Data passthrough (Unlimited at $0.13/GB)</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/hasura-cloud/plans/">
+        API request count (including websockets) (up to 6 million / month)
+      </VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/hasura-cloud/plans/">API request duration (up to 120 seconds)</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/observability/websockets/">Concurrent websocket connections (up to 100)</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/caching/overview/">Query caching (up to 100 MB)</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/databases/database-config/read-replicas/">Read replicas (max of 3)</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/databases/database-config/dynamic-db-connection/">
+        Dynamic database connection routing (max of 1)
+      </VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/security/allow-list/">GraphQL operations allow list</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/deployment/tls-allow-list/">TLS allow list</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/security/api-limits/#depth-limits">Role-based API depth limit</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/security/api-limits/#node-limits">Role-based API node limit</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/security/api-limits/#rate-limits">Role-based API rate limit</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/security/api-limits/#time-limits">Role-based API timeout</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/security/disable-graphql-introspection/">Disable GraphQL introspection</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/security/multiple-jwt-secrets/">Multiple JWT secrets</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/security/multiple-admin-secrets/">Multiple admin keys</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/observability/overview/">Metrics, logs, and traces</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/observability/integrations/index/">Observability integration</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/api-reference/metadata-api/observability/#logs-and-metrics-configuration">
+        Metrics API access
+      </VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/hasura-cloud/projects/domains/#adding-a-custom-domain">
+        Custom domain (DNS CNAME)
+      </VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/databases/database-config/cloud-connection-pooling/">
+        Elastic connection pooling
+      </VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/policies/sla/">Uptime SLA</VersionedLink>
+    </li>
+    <li>
+      <a href="https://cloud.hasura.io/support/create-ticket">Expert Hasura technical support</a>
+    </li>
+  </ul>
+  <h3 id="cloud-enterprise">Cloud Enterprise</h3>
+  <ul>
+    <li>
+      <b>Everything in Cloud Free and Cloud Professional, plus:</b>
+    </li>
+    <li>
+      <VersionedLink to="/databases/overview/">Connected databases per project (no limit)</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/hasura-cloud/projects/index/">Projects per account (no limit)</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/hasura-cloud/plans/">Data passthrough (Unlimited at $0.13/GB)</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/hasura-cloud/plans/">API request count (including websockets) (no limit)</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/hasura-cloud/plans/">API request duration (no limit)</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/observability/websockets/">Concurrent websocket connections (no limit)</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/caching/overview/">Query caching (no limit)</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/databases/database-config/read-replicas/">Read replicas (no limit)</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/databases/database-config/dynamic-db-connection/">
+        Dynamic database connection routing (no limit)
+      </VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/event-triggers/clean-up/auto-cleanup/">Auto cleanup of Event Triggers</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/hasura-cloud/sso/">SSO (SAML)</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/hasura-cloud/high-availability/">Failover for high availability</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/hasura-cloud/dedicated-vpc/#vpc-peering">VPC peering</VersionedLink>
+    </li>
+    {/* <li>
+      <VersionedLink to="/schema/overview/">Data Processing Agreement (GDPR)</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/schema/overview/">Business Associate Agreement (BAA)</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/schema/overview/">HIPAA compliance</VersionedLink>
+    </li> */}
+    <li>
+      <VersionedLink to="/policies/sla/">Priority response SLAs</VersionedLink>
+    </li>
+    {/* <li>
+      <VersionedLink to="/schema/overview/">Onboarding program</VersionedLink>
+    </li>
+    <li>
+      <VersionedLink to="/schema/overview/">Named customer success manager</VersionedLink>
+    </li> */}
+  </ul>
+</div>

docs/docs/hasura-cloud/plans.mdx

@@ -10,12 +10,11 @@ sidebar_position: 10
 ---
 
 import VersionedLink from '@site/src/components/VersionedLink';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Plans and Pricing
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge free standard pro ee />
-  Available on: Cloud Free, Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Overview
 

docs/docs/hasura-cloud/projects/collaborators.mdx

@@ -13,12 +13,11 @@ sidebar_position: 3
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Project Collaborators
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge free standard pro ee />
-  Available on: Cloud Free, Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Introduction
 
@@ -40,7 +39,8 @@ Collaborators can have different levels of access in the Hasura Console.
 - **User** has limited privileges:
   - The `Execute GraphQL` permission allows running queries, mutations and subscriptions from the `GraphiQL` tab of the
     Console.
-  - The `View Metrics` permission allows inspecting operation data and metrics from the `PRO` tab of the Console. This access is not available on the Hasura Cloud Free plan.
+  - The `View Metrics` permission allows inspecting operation data and metrics from the `PRO` tab of the Console. This
+    access is not available on the Hasura Cloud Free plan.
   - Collaborators can also be invited to take billing responsibility for a project; see the
     [billing owner](/hasura-cloud/account-management/billing/billing-owner.mdx) page for more information.
 

docs/docs/hasura-cloud/projects/create.mdx

@@ -11,12 +11,11 @@ sidebar_label: Create Projects
 ---
 
 import Thumbnail from '@site/src/components/Thumbnail';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Create Projects
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge free standard pro ee />
-  Available on: Cloud Free, Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Introduction
 
@@ -31,11 +30,7 @@ This opens a form on the right where you can create your new project.
 
 Choose a pricing plan and select a region for your project.
 
-<Thumbnail
+<Thumbnail src="/img/projects/create-project.png" alt="Create new project in Hasura Console" width="900px" />
-  src="/img/projects/create-project.png"
-  alt="Create new project in Hasura Console"
-  width="900px"
-/>
 
 Once you have completed the project setup, click `Create Project`.
 

docs/docs/hasura-cloud/projects/delete.mdx

@@ -11,12 +11,11 @@ sidebar_position: 15
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Delete Projects
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge free standard pro ee />
-  Available on: Cloud Free, Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Overview
 

docs/docs/hasura-cloud/projects/details.mdx

@@ -15,12 +15,11 @@ sidebar_position: 2
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Project Details
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge free standard pro ee />
-  Available on: Cloud Free, Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Introduction
 

docs/docs/hasura-cloud/projects/domains.mdx

@@ -12,12 +12,11 @@ sidebar_label: Manage domains
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Project Domains
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge standard pro ee />
-  Available on: Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Introduction
 

docs/docs/hasura-cloud/projects/env-vars.mdx

@@ -13,12 +13,11 @@ sidebar_position: 6
 import TOCInline from '@theme/TOCInline';
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Project Env Vars
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge free standard pro ee />
-  Available on: Cloud Free, Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Introduction
 

docs/docs/hasura-cloud/projects/environments.mdx

@@ -15,12 +15,11 @@ sidebar_position: 11
 ---
 
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Manage Development Environments
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge free standard pro ee />
-  Available on: Cloud Free, Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Introduction
 

docs/docs/hasura-cloud/projects/heroku-url-sync.mdx

@@ -15,12 +15,11 @@ sidebar_label: Heroku URL sync
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Heroku Database Integration
 
-<div className="badge badge--primary heading-badge" style={{ marginBottom: `20px` }}>
+<ProductBadge free standard pro ee />
-  Available on: Cloud Free, Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 :::info Note
 

docs/docs/hasura-cloud/projects/hibernation.mdx

@@ -14,12 +14,11 @@ sidebar_position: 14.5
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Project Hibernation and Reactivation
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge free standard pro ee />
-  Available on: Cloud Free, Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Introduction
 

docs/docs/hasura-cloud/projects/index.mdx

@@ -12,11 +12,11 @@ slug: index
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
 import Collaborators from '@site/static/icons/features/collaborators.svg';
-
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # <Collaborators /> Projects & Collaborators
 
-<div className="badge badge--primary heading-badge">Available on: Cloud</div>
+<ProductBadge free standard pro ee />
 
 ## Introduction
 

docs/docs/hasura-cloud/projects/maintenance-mode.mdx

@@ -13,12 +13,11 @@ sidebar_label: Maintenance mode
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Maintenance Mode
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge free standard pro ee />
-  Available on: Cloud Free, Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Introduction
 

docs/docs/hasura-cloud/projects/move-project-manual.mdx

@@ -14,12 +14,11 @@ sidebar_label: Move a Project
 ---
 
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Transfer Existing Hasura Cloud Project to a New Project
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge free standard pro ee />
-  Available on: Cloud Free, Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Introduction
 

docs/docs/hasura-cloud/projects/move-project-v2-manual.mdx

@@ -13,12 +13,11 @@ sidebar_label: Move Project to v2
 ---
 
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Manually Move Hasura Cloud v1.3 Projects to Hasura v2.0
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge free standard pro ee />
-  Available on: Cloud Free, Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Introduction
 

docs/docs/hasura-cloud/projects/move-project-v2.mdx

@@ -15,12 +15,11 @@ sidebar_position: 16
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Updating Hasura Cloud v1.3 Projects to Hasura v2.0
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge free standard pro ee />
-  Available on: Cloud Free, Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Introduction
 

docs/docs/hasura-cloud/projects/ownership.mdx

@@ -13,12 +13,11 @@ sidebar_position: 4
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Transfer Project Ownership
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge free standard pro ee />
-  Available on: Cloud Free, Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Introduction
 

docs/docs/hasura-cloud/projects/pricing.mdx

@@ -12,13 +12,11 @@ sidebar_label: Switch pricing plans
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Switch Pricing Plans
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge free standard pro ee />
-  Available on: Cloud Free, Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
-
 ## Introduction
 
 Hasura has different pricing plans that you can choose from based on your requirements. This page explains how to switch

docs/docs/hasura-cloud/projects/recover.mdx

@@ -13,12 +13,11 @@ sidebar_position: 5
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Recover Project
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge free standard pro ee />
-  Available on: Cloud Free, Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Introduction
 
@@ -35,8 +34,8 @@ transfer ownership through there.
 
 ## Option 2: Contact the former owner
 
-If the former employee didn't use a work email to create the Project, or if it's impossible to access their work email, contact the
+If the former employee didn't use a work email to create the Project, or if it's impossible to access their work email,
-former employee and ask them to transfer the Project to you.
+contact the former employee and ask them to transfer the Project to you.
 
 ## Option 3: Create a new Project
 

docs/docs/hasura-cloud/projects/regions.mdx

@@ -13,12 +13,11 @@ sidebar_label: Deployment regions
 ---
 
 import Thumbnail from '@site/src/components/Thumbnail';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Deployment Regions
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge free standard pro ee />
-  Available on: Cloud Free, Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Introduction
 

docs/docs/hasura-cloud/projects/secure.mdx

@@ -11,12 +11,11 @@ sidebar_label: Secure Projects
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Secure Projects
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge free standard pro ee />
-  Available on: Cloud Free, Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Introduction
 

docs/docs/hasura-cloud/projects/vercel-integration.mdx

@@ -13,12 +13,11 @@ sidebar_label: Vercel integration
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Vercel Integration
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge free standard pro ee />
-  Available on: Cloud Free, Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Introduction
 

docs/docs/hasura-cloud/regions.mdx

@@ -9,12 +9,11 @@ sidebar_position: 7
 ---
 
 import Thumbnail from '@site/src/components/Thumbnail';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Regions
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge free standard pro ee />
-  Available on: Cloud Free, Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Introduction
 

docs/docs/hasura-cloud/regression-tests.mdx

@@ -12,12 +12,11 @@ sidebar_position: 50
 ---
 
 import Thumbnail from '@site/src/components/Thumbnail';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Regression Tests
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge free standard pro ee self />
-  Available on: Cloud Free, Cloud Standard, Cloud Professional, Cloud Enterprise, Self-hosted Enterprise
-</div>
 
 ## Introduction
 

docs/docs/hasura-cloud/sso.mdx

@@ -14,10 +14,11 @@ sidebar_position: 80
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # SSO Through SAML
 
-<div className="badge badge--primary heading-badge">Available on: Cloud Enterprise</div>
+<ProductBadge ee />
 
 ## Introduction
 

docs/docs/observability/errors.mdx

@@ -13,12 +13,11 @@ keywords:
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Errors
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge free standard pro ee />
-  Available on: Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Overview
 

docs/docs/observability/integrations/azure-monitor.mdx

@@ -15,12 +15,11 @@ sidebar_label: Azure Monitor
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Azure Monitor Integration
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge standard pro ee />
-  Available on: Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Introduction
 

docs/docs/observability/integrations/datadog.mdx

@@ -15,12 +15,11 @@ keywords:
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Datadog Integration
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge standard pro ee />
-  Available on: Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Introduction
 

docs/docs/observability/integrations/index.mdx

@@ -16,12 +16,11 @@ keywords:
 ---
 
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Integrations with External Services
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge standard pro ee />
-  Available on: Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Overview
 

docs/docs/observability/integrations/newrelic.mdx

@@ -16,12 +16,11 @@ sidebar_label: New Relic
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # New Relic Integration
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge standard pro ee />
-  Available on: Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Introduction
 

docs/docs/observability/integrations/opentelemetry.mdx

@@ -16,12 +16,11 @@ keywords:
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # OpenTelemetry Integration
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge standard pro ee />
-  Available on: Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Introduction
 

docs/docs/observability/integrations/prometheus.mdx

@@ -16,12 +16,11 @@ keywords:
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Prometheus Integration
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge standard pro ee />
-  Available on: Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Introduction
 

docs/docs/observability/operations.mdx

@@ -12,12 +12,11 @@ keywords:
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Operations
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge standard pro ee />
-  Available on: Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Introduction
 

docs/docs/observability/overview.mdx

@@ -11,13 +11,12 @@ sidebar_position: 1
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import VersionedLink from '@site/src/components/VersionedLink';
+import ProductBadge from '@site/src/components/ProductBadge';
 import Observability from '@site/static/icons/features/observability.svg';
 
 # <Observability /> Observability
 
-<div className="badge badge--primary heading-badge" style={{ marginBottom: `1rem` }}>
+<ProductBadge free standard pro ee self />
-  Available on: Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 <div className="overview-header">
   <div className="overview-text">

docs/docs/observability/query-tags.mdx

@@ -12,12 +12,11 @@ sidebar_position: 9
 ---
 
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Query Tags
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge standard pro ee self />
-  Available on: Cloud Standard, Cloud Professional, Cloud Enterprise, Self-hosted Enterprise
-</div>
 
 ## Introduction
 

docs/docs/observability/subscription-workers.mdx

@@ -12,12 +12,11 @@ keywords:
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Subscription Workers
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge standard pro ee />
-  Available on: Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Overview
 

docs/docs/observability/tracing.mdx

@@ -12,12 +12,11 @@ sidebar_position: 8
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Distributed Tracing
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge standard pro ee />
-  Available on: Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Introduction
 

docs/docs/observability/usage.mdx

@@ -13,12 +13,11 @@ keywords:
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Usage Summaries
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge standard pro ee />
-  Available on: Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Overview
 

docs/docs/observability/websockets.mdx

@@ -12,12 +12,11 @@ keywords:
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Websockets
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge standard pro ee self />
-  Available on: Cloud Standard, Cloud Professional, Cloud Enterprise, Self-hosted Enterprise
-</div>
 
 ## Overview
 

docs/docs/policies/sla.mdx

@@ -10,11 +10,11 @@ keywords:
 sidebar_class_name: cloud-and-enterprise-icon
 ---
 
+import ProductBadge from '@site/src/components/ProductBadge';
+
 # Hasura Cloud Service Level Agreement (SLA)
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge standard pro ee />
-  Available on: Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ## Overview
 

docs/docs/security/allow-list.mdx

@@ -13,6 +13,7 @@ import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Allow List of Operations
 
@@ -147,9 +148,7 @@ query ($id: Int!) {
 
 ## Role-based Allow List
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge standard pro ee self />
-  Available on: Cloud Standard, Cloud Professional, Cloud Enterprise, Self-hosted Enterprise
-</div>
 
 A role-based Allow List is useful when you would like a query collection(s) to be accessible to only certain roles.
 
@@ -222,9 +221,7 @@ Metadata API.
 
 ## Quick-create allowed operations
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge free standard pro ee />
-  Available on: Cloud Free, Cloud Standard, Cloud Professional, Cloud Enterprise
-</div>
 
 ### Hasura Cloud
 

docs/docs/security/api-limits.mdx

@@ -15,12 +15,11 @@ title: 'Cloud & Enterprise Edition: API Limits'
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # API Limits
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge standard pro ee self />
-  Available on: Cloud Standard, Cloud Professional, Cloud Enterprise, Self-hosted Enterprise
-</div>
 
 ## Introduction
 

docs/docs/security/container-images.mdx

@@ -13,11 +13,11 @@ sidebar_label: Proactive vulnerability scanning
 sidebar_class_name: cloud-and-enterprise-icon
 ---
 
+import ProductBadge from '@site/src/components/ProductBadge';
+
 # Proactive Vulnerability Scanning of Container Images
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge free standard pro ee self />
-  Available on: Cloud Free, Cloud Standard, Cloud Professional, Cloud Enterprise, Self-hosted Enterprise
-</div>
 
 ## Overview
 

docs/docs/security/disable-graphql-introspection.mdx

@@ -17,12 +17,11 @@ sidebar_class_name: cloud-and-enterprise-icon
 
 import Thumbnail from '@site/src/components/Thumbnail';
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Disable GraphQL Introspection
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge free standard pro ee self />
-  Available on: Cloud Free, Cloud Standard, Cloud Professional, Cloud Enterprise, Self-hosted Enterprise
-</div>
 
 ## Introduction
 

docs/docs/security/multiple-admin-secrets.mdx

@@ -18,12 +18,11 @@ sidebar_class_name: cloud-and-enterprise-icon
 ---
 
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Multiple Admin Secrets
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge standard pro ee self />
-  Available on: Cloud Standard, Cloud Professional, Cloud Enterprise, Self-hosted Enterprise
-</div>
 
 ## Introduction
 

docs/docs/security/multiple-jwt-secrets.mdx

@@ -17,12 +17,11 @@ sidebar_class_name: cloud-and-enterprise-icon
 ---
 
 import HeadingIcon from '@site/src/components/HeadingIcon';
+import ProductBadge from '@site/src/components/ProductBadge';
 
 # Multiple JWT Secrets
 
-<div className="badge badge--primary heading-badge">
+<ProductBadge standard pro ee self />
-  Available on: Cloud Standard, Cloud Professional, Cloud Enterprise, Self-hosted Enterprise
-</div>
 
 ## Introduction
 

docs/docusaurus.config.js

@@ -19,7 +19,7 @@ const config = {
   projectName: 'graphql-engine',
   staticDirectories: ['static', 'public'],
   webpack: {
-    jsLoader: (isServer) => ({
+    jsLoader: isServer => ({
       loader: require.resolve('swc-loader'),
       options: {
         jsc: {
@@ -110,8 +110,8 @@ const config = {
       docs: {
         sidebar: {
           hideable: true,
-          autoCollapseCategories: true
+          autoCollapseCategories: true,
-        }
+        },
       },
       colorMode: {
         defaultMode: 'light',
@@ -178,6 +178,18 @@ const config = {
             label: "What's New",
             position: 'left',
           },
+          {
+            to: '/latest/hasura-cloud/overview',
+            label: 'Hasura Cloud',
+            className: 'header-hasura-cloud-link',
+            position: 'left',
+          },
+          {
+            to: '/latest/enterprise/overview',
+            label: 'Hasura Enterprise',
+            className: 'header-hasura-ee-link',
+            position: 'left',
+          },
           {
             type: 'docsVersionDropdown',
             position: 'right',