diff --git a/app/_landing_pages/metering-and-billing.yaml b/app/_landing_pages/metering-and-billing.yaml index 3e10ab00f6..8f46a3af33 100644 --- a/app/_landing_pages/metering-and-billing.yaml +++ b/app/_landing_pages/metering-and-billing.yaml @@ -11,4 +11,135 @@ rows: - header: type: h1 text: "Metering and Billing" - sub_text: Turn any events, logs, and metrics into revenue with usage-based metering and billing. + sub_text: Meter, bill, and monetize the entire AI connectivity data path. + columns: + - blocks: + - type: structured_text + config: + blocks: + - type: text + text: | + {{site.konnect_short_name}} Metering & Billing provides a full system for tracking real-time usage, pricing products, enforcing entitlements, and generating invoices. + It is designed for AI and API-first businesses that need accurate usage metering, flexible pricing models, and customer-level billing detail. + + You can meter {{site.base_gateway}} requests, LLM tokens, or any custom event. + You can create and publish pricing plans, manage subscriptions, and automate revenue collection with payment providers like Stripe and ERPs. + + - blocks: + - type: image + config: + url: /assets/images/konnect/metering.png + alt_text: Metering and Billing Overview + + + - header: + type: h2 + text: "Get started with Metering and Billing" + + columns: + - blocks: + - type: card + config: + title: Meter LLM traffic + description: | + Track prompt tokens, completion tokens, and model usage from {{site.base_gateway}} or any AI gateway backed by Konnect. + icon: /assets/icons/ai.svg + cta: + text: Learn how + url: /metering-and-billing/monitor-llm-traffic/ + - blocks: + - type: card + config: + title: Meter {{site.base_gateway}} API requests + description: | + Convert raw API request events into billable usage. Create meters, features, pricing, and subscriptions. + icon: /assets/icons/gateway.svg + cta: + text: Get started + url: /metering-and-billing/get-started/ + - blocks: + - type: card + config: + title: Understand customers + description: | + Learn how {{site.konnect_short_name}} models customers and usage mapping for billing systems. + icon: /assets/icons/team.svg + cta: + text: Learn more + url: /metering-and-billing/subjects/ + + - header: + type: h2 + text: "Integrations" + sub_text: "Connect Metering and Billing to external payment, CRM, and invoicing systems" + + column_count: 3 + columns: + - blocks: + - type: card + config: + title: Stripe + description: | + Send invoices, calculate tax, and collect payments. + icon: /assets/icons/third-party/stripe.svg + cta: + text: View integration + url: "https://cloud.konghq.com/us/metering-billing/apps/marketplace/stripe" + + - blocks: + - type: card + config: + title: Custom Invoicing + description: | + Implement custom billing flows using your own invoicing and payment systems. + icon: /assets/icons/third-party/custom.svg + cta: + text: View integration + url: "https://cloud.konghq.com/us/metering-billing/apps/marketplace/custom_invoicing" + + - blocks: + - type: card + config: + title: HubSpot + description: | + Sync customer data and analyze customer interactions through HubSpot CRM. + icon: /assets/icons/third-party/hubspot.svg + cta: + text: Contact Sales + url: "https://konghq.com/contact-sales" + + - blocks: + - type: card + config: + title: Salesforce + description: | + Integrate with Salesforce CRM to manage accounts, subscriptions, and customer insights. + icon: /assets/icons/third-party/salesforce.svg + cta: + text: Contact Sales + url: "https://konghq.com/contact-sales" + + - blocks: + - type: card + config: + title: PayPal + description: | + Accept customer payments using PayPal’s global payment platform. + icon: /assets/icons/third-party/paypal.svg + cta: + text: Contact Sales + url: "https://konghq.com/contact-sales" + + - blocks: + - type: card + config: + title: Adyen + description: | + Process global payments with Adyen’s payment infrastructure. + icon: /assets/icons/third-party/adyen.svg + cta: + text: Contact Sales + url: "https://konghq.com/contact-sales" + + + \ No newline at end of file diff --git a/app/assets/icons/third-party/adyen.svg b/app/assets/icons/third-party/adyen.svg new file mode 100644 index 0000000000..b6e1fb932a --- /dev/null +++ b/app/assets/icons/third-party/adyen.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/icons/third-party/custom.svg b/app/assets/icons/third-party/custom.svg new file mode 100644 index 0000000000..c533465dd5 --- /dev/null +++ b/app/assets/icons/third-party/custom.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/app/assets/icons/third-party/hubspot.svg b/app/assets/icons/third-party/hubspot.svg new file mode 100644 index 0000000000..4be6b49537 --- /dev/null +++ b/app/assets/icons/third-party/hubspot.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/icons/third-party/paypal.svg b/app/assets/icons/third-party/paypal.svg new file mode 100644 index 0000000000..f5fe1e8212 --- /dev/null +++ b/app/assets/icons/third-party/paypal.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/icons/third-party/salesforce.svg b/app/assets/icons/third-party/salesforce.svg new file mode 100644 index 0000000000..8a15f25559 --- /dev/null +++ b/app/assets/icons/third-party/salesforce.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/icons/third-party/stripe.svg b/app/assets/icons/third-party/stripe.svg new file mode 100644 index 0000000000..f421bbcfe7 --- /dev/null +++ b/app/assets/icons/third-party/stripe.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/app/assets/images/konnect/metering.png b/app/assets/images/konnect/metering.png new file mode 100644 index 0000000000..2ddcca6d3e Binary files /dev/null and b/app/assets/images/konnect/metering.png differ