adding PostHog billable template page (#11674)

contents/docs/_snippets/posthog-billable-usage-template.mdx

@@ -0,0 +1,12 @@
+## Create a billable usage dashboard
+
+Want to know exactly what’s driving your bill? Create a dashboard with the [PostHog billable usage template](/templates/posthog-billable-usage) to break down and analyze your usage across different events, SDK libraries, and products.
+
+<ProductScreenshot
+    imageLight="https://res.cloudinary.com/dmukukwp6/image/upload/posthog_billable_usage_b2b494d4bb.png"
+    imageDark="https://res.cloudinary.com/dmukukwp6/image/upload/posthog_billable_usage_b2b494d4bb.png"
+    alt="PostHog billable usage dashboard"
+    classes="max-w-md mx-auto rounded"
+/>
+
+This dashboard turns your billing usage into a live, interactive report — so you can create insights, spot spikes, and optimize how you're spending.

contents/docs/billing/estimating-usage-costs.mdx

@@ -4,6 +4,8 @@ featuredImage: >-
   https://res.cloudinary.com/dmukukwp6/image/upload/posthog.com/contents/docs/billing/images/docs-groups.png
 ---
 
+import PostHogBillableUsageTemplate from "../_snippets/posthog-billable-usage-template.mdx"
+
 It can be daunting to figure out how much a usage-based platform like PostHog will cost, but there are simple ways to estimate your usage and costs.
 
 This guide explains why we price based on usage, how to estimate your usage, and tips on how to reduce your costs.
@@ -156,3 +158,5 @@ Each product can be tuned to use only the resources you need.
 - For feature flags, read [how to make fewer flag requests](/docs/feature-flags/common-questions#how-can-i-reduce-the-cost-of-feature-flags)
 
 You can also optionally set [billing limits](/docs/billing/limits-alerts) for every product. When you hit your billing limit, we'll stop ingesting your data and you won't be charged over the set amount. 
+
+<PostHogBillableUsageTemplate />

contents/docs/feature-flags/cutting-costs.mdx

@@ -3,9 +3,12 @@ title: Cutting feature flag costs
 sidebar: Docs
 showTitle: true
 ---
+import PostHogBillableUsageTemplate from "../_snippets/posthog-billable-usage-template.mdx"
 
 We aim to be significantly cheaper than our competitors. In addition to our [pay-as-you-go pricing](/pricing), below are tips to reduce your feature flag costs:
 
+<PostHogBillableUsageTemplate />
+
 ## Reduce client-side feature flag requests
 
 In our [JavaScript Web](/docs/libraries/js) and [React Native](/docs/libraries/react-native) SDKs, you can reduce the cost of feature flags by reducing the number of requests your client makes to fetch feature flag values for your users.

contents/docs/product-analytics/cutting-costs.mdx

@@ -3,9 +3,12 @@ title: Cutting product analytics costs
 sidebar: Docs
 showTitle: true
 ---
+import PostHogBillableUsageTemplate from "../_snippets/posthog-billable-usage-template.mdx"
 
 We aim to be significantly cheaper than our competitors. In addition to our [pay-as-you-go pricing](/pricing), below are tips to reduce your product analytics costs:
 
+<PostHogBillableUsageTemplate />
+
 ## Use anonymous events
 
 PostHog captures two types of events: [**anonymous** and **identified**](/docs/data/anonymous-vs-identified-events). Under our current [pricing](/pricing), anonymous events can be up to 4x cheaper than identified ones (due to the cost of processing them), so it's recommended you only capture identified events when needed.

contents/templates/posthog-billable-usage/index.mdx

@@ -0,0 +1,52 @@
+---
+title: PostHog billable usage
+subtitle: See why you're 10x-ing (and what you're actually paying for)
+thumbnail: https://res.cloudinary.com/dmukukwp6/image/upload/hog_screens_965070a722.png
+featuredImage: https://res.cloudinary.com/dmukukwp6/image/upload/posthog_billable_usage_b2b494d4bb.png
+showTitle: true
+filters:
+  type:
+    - dashboard
+  maintainer: official
+---
+
+<Section
+    divider={false}
+    cols={2}
+>
+    <div>
+      <h5>Your billing page visualized 💸</h5>
+      <p>This dashboard turns your <a href="https://app.posthog.com/organization/billing">billing page</a> into a live, interactive report. Create insights, spot spikes, and optimize how you're spending.</p>
+    </div>
+    <div>
+      <h5>Break usage down by category 📊</h5>
+      <p>Wondering what's actually driving your bill? Analyze product usage across event types, libraries, and multiple products like surveys and feature flags.</p>
+    </div>
+</Section>
+
+<section class="my-12 px-5">
+  <div class="max-w-screen-2xl mx-auto">
+    <h3 class="text-2xl lg:text-3xl m-0 text-center mb-6 sm:mb-12">What's on this dashboard?</h3>
+    <div class="flex justify-center">
+      <ul class="m-0 p-0 list-none inline-grid sm:grid-cols-2 justify-evenly relative  after:absolute after:w-full after:left-0 after:top-1/2 after:-translateY-1/2 before:absolute before:h-full before:top-0 before:left-1/2 after:-translateX-1/2  sm:after:block after:hidden sm:before:block before:hidden">
+        <li class="relative md:max-w-md py-4 md:py-8 pl-4 pr-2 md:px-12 ">
+          <h5 class="text-xl font-extrabold m-0 pb-1 pr-4">📊 Billable usage by event name</h5>
+          <p class="m-0 text-[15px]">See which events are driving the most usage in your product.</p>
+        </li>
+        <li class="relative md:max-w-md py-4 md:py-8 pl-4 pr-2 md:px-12 ">
+          <h5 class="text-xl font-extrabold m-0 pb-1 pr-4">📚 Billable usage by library</h5>
+          <p class="m-0 text-[15px]">Break down events by SDK – JavaScript, Python, Node, Rust, and more.</p>
+        </li>
+        <li class="relative md:max-w-md py-4 md:py-8 pl-4 pr-2 md:px-12 ">
+          <h5 class="text-xl font-extrabold m-0 pb-1 pr-4">🚩 Feature flag calls</h5>
+          <p class="m-0 text-[15px]">Track how often feature flags are triggered over a billing period.</p>
+        </li>
+        <li class="relative md:max-w-md py-4 md:py-8 pl-4 pr-2 md:px-12 ">
+          <h5 class="text-xl font-extrabold m-0 pb-1 pr-4">📮 Surveys sent</h5>
+          <p class="m-0 text-[15px]">See how many surveys were shown and responses received over a billing period.</p>
+        </li>
+      </ul>
+    </div>
+  </div>
+</section>
+