Added pricing calculator to the plans page

apps/webapp/app/routes/_app.orgs.$organizationSlug.billing.plans/route.tsx

@@ -1,6 +1,9 @@
+import { PricingCalculator } from "~/components/billing/PricingCalculator";
 import { PricingTiers, TierEnterprise, TierFree, TierPro } from "~/components/billing/PricingTiers";
+import { RunsVolumeDiscountTable } from "~/components/billing/RunsVolumeDiscountTable";
 import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
 import { Callout } from "~/components/primitives/Callout";
+import { Header2 } from "~/components/primitives/Headers";
 import { Handle } from "~/utils/handle";
 
 export const handle: Handle = {
@@ -9,8 +12,8 @@ export const handle: Handle = {
 
 export default function Page() {
   return (
-    <div>
-      <Callout variant={"pricing"} className="mb-4">
+    <div className="flex flex-col gap-4">
+      <Callout variant={"pricing"}>
         Some of your Runs are being queued because your Run concurrency is limited to 50.
       </Callout>
       <PricingTiers>
@@ -18,6 +21,14 @@ export default function Page() {
         <TierPro />
         <TierEnterprise />
       </PricingTiers>
+      <div>
+        <Header2 spacing>Estimate your usage</Header2>
+        <div className="flex h-full w-full rounded-md border border-border p-6">
+          <PricingCalculator />
+          <div className="mx-6 min-h-full w-px bg-border" />
+          <RunsVolumeDiscountTable />
+        </div>
+      </div>
     </div>
   );
 }