From 912a0ffef680de68f49a79144e91c617b1ad24c5 Mon Sep 17 00:00:00 2001
From: Brendan <brendan.kao@sotai.ai>
Date: Wed, 4 Jun 2025 15:35:42 -0700
Subject: [PATCH 1/3] feat: update lilypad pricing to be multiple components

---
 mirascope-ui/blocks/lilypad-pricing.tsx | 240 ++++++++++++------------
 1 file changed, 124 insertions(+), 116 deletions(-)

diff --git a/mirascope-ui/blocks/lilypad-pricing.tsx b/mirascope-ui/blocks/lilypad-pricing.tsx
index 4fcef72..4cbbbe6 100644
--- a/mirascope-ui/blocks/lilypad-pricing.tsx
+++ b/mirascope-ui/blocks/lilypad-pricing.tsx
@@ -1,20 +1,16 @@
-import { Check, X } from "lucide-react";
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/mirascope-ui/ui/tabs";
-import { ButtonLink } from "@/mirascope-ui/ui/button-link";
 import { cn } from "@/mirascope-ui/lib/utils";
+import { ButtonLink } from "@/mirascope-ui/ui/button-link";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/mirascope-ui/ui/tabs";
+import { Check, X } from "lucide-react";
 
-// Feature row component for displaying features with the same value across tiers
-const FeatureRow = ({
-  feature,
-  free,
-  pro,
-  team,
-}: {
+interface FeatureRowProps {
   feature: string;
   free: string | boolean;
   pro: string | boolean;
   team: string | boolean;
-}) => {
+}
+// Feature row component for displaying features with the same value across tiers
+const FeatureRow = ({ feature, free, pro, team }: FeatureRowProps) => {
   // If all tiers have the exact same value (and it's not a boolean)
   const allSameNonBoolean = free === pro && pro === team && typeof free === "string" && free !== "";
 
@@ -85,6 +81,16 @@ const FeatureRow = ({
   );
 };
 
+interface PricingTierProps {
+  name: string;
+  price: string;
+  description: string;
+  buttonText?: string;
+  buttonLink?: string;
+  customButton?: React.ReactNode;
+  badge?: "Open Beta" | "Closed Beta";
+  variant?: "default" | "outline";
+}
 // Pricing tier component
 const PricingTier = ({
   name,
@@ -92,18 +98,11 @@ const PricingTier = ({
   description,
   buttonText,
   buttonLink,
+  customButton,
   badge,
   variant = "default",
-}: {
-  name: string;
-  price: string;
-  description: string;
-  buttonText: string;
-  buttonLink: string;
-  badge?: "Open Beta" | "Closed Beta";
-  variant?: "default" | "outline";
-}) => (
-  <div className="bg-background border-border overflow-hidden rounded-lg border shadow-sm">
+}: PricingTierProps) => (
+  <div className="border-border bg-background overflow-hidden rounded-lg border shadow-sm">
     <div className={cn("bg-background px-6 py-8")}>
       <div className="mb-2 flex items-center gap-2">
         <h3 className={cn("text-foreground text-xl font-semibold")}>{name}</h3>
@@ -127,26 +126,19 @@ const PricingTier = ({
           <span className="text-muted-foreground ml-1 text-sm">/ month</span>
         )}
       </div>
-      <ButtonLink href={buttonLink} className="w-full" variant={variant}>
-        {buttonText}
-      </ButtonLink>
+      {customButton ?? (
+        <ButtonLink href={buttonLink ?? "/"} className="w-full" variant={variant}>
+          {buttonText}
+        </ButtonLink>
+      )}
     </div>
   </div>
 );
 
 // Feature comparison table component
-const FeatureComparisonTable = ({
-  features,
-}: {
-  features: Array<{
-    feature: string;
-    free: string | boolean;
-    pro: string | boolean;
-    team: string | boolean;
-  }>;
-}) => (
-  <div className="bg-background border-border overflow-hidden rounded-lg border shadow-sm">
-    <div className="bg-accent border-border border-b px-4 py-5 sm:px-6">
+export const FeatureComparisonTable = ({ features }: { features: FeatureRowProps[] }) => (
+  <div className="border-border bg-background overflow-hidden rounded-lg border shadow-sm">
+    <div className="border-border bg-accent border-b px-4 py-5 sm:px-6">
       <h3 className="text-accent-foreground text-lg font-medium">Feature Comparison</h3>
     </div>
     <div className="bg-background overflow-x-auto px-4 py-5 sm:p-6">
@@ -160,22 +152,17 @@ const FeatureComparisonTable = ({
 
       {/* Table rows */}
       {features.map((feat, i) => (
-        <FeatureRow
-          key={i}
-          feature={feat.feature}
-          free={feat.free}
-          pro={feat.pro}
-          team={feat.team}
-        />
+        <FeatureRow key={i} {...feat} />
       ))}
     </div>
   </div>
 );
 
 interface TierAction {
-  buttonText: string;
-  buttonLink: string;
+  buttonText?: string;
+  buttonLink?: string;
   variant?: "default" | "outline";
+  customButton?: React.ReactNode;
 }
 
 interface PricingActions {
@@ -191,48 +178,47 @@ interface PricingActions {
   };
 }
 
+// Cloud hosted features
+export const cloudHostedFeatures = [
+  { feature: "Projects", free: "Unlimited", pro: "Unlimited", team: "Unlimited" },
+  { feature: "Users", free: "2", pro: "10", team: "Unlimited" },
+  {
+    feature: "Tracing",
+    free: "30k spans / month",
+    pro: "100k spans / month (thereafter $1 per 10k)",
+    team: "1M spans / month (thereafter $1 per 10k)",
+  },
+  { feature: "Data Retention", free: "30 days", pro: "90 days", team: "180 days" },
+  { feature: "Versioned Functions", free: true, pro: true, team: true },
+  { feature: "Playground", free: true, pro: true, team: true },
+  { feature: "Comparisons", free: true, pro: true, team: true },
+  { feature: "Annotations", free: true, pro: true, team: true },
+  { feature: "Support (Community)", free: true, pro: true, team: true },
+  { feature: "Support (Chat / Email)", free: false, pro: true, team: true },
+  { feature: "Support (Private Slack)", free: false, pro: false, team: true },
+  { feature: "API Rate Limits", free: "10 / minute", pro: "100 / minute", team: "1000 / minute" },
+];
+
+// Self-hosted features
+export const selfHostedFeatures = [
+  { feature: "Projects", free: "Unlimited", pro: "Unlimited", team: "Unlimited" },
+  { feature: "Users", free: "Unlimited", pro: "As licensed", team: "As licensed" },
+  { feature: "Tracing", free: "No limits", pro: "No limits", team: "No limits" },
+  { feature: "Data Retention", free: "No limits", pro: "No limits", team: "No limits" },
+  { feature: "Versioned Functions", free: true, pro: true, team: true },
+  { feature: "Playground", free: false, pro: true, team: true },
+  { feature: "Comparisons", free: false, pro: true, team: true },
+  { feature: "Annotations", free: false, pro: true, team: true },
+  { feature: "Support (Community)", free: true, pro: true, team: true },
+  { feature: "Support (Chat / Email)", free: false, pro: true, team: true },
+  { feature: "Support (Private Slack)", free: false, pro: false, team: true },
+  { feature: "API Rate Limits", free: "No limits", pro: "No limits", team: "No limits" },
+];
 interface LilypadPricingProps {
   actions: PricingActions;
 }
 
 export function LilypadPricing({ actions }: LilypadPricingProps) {
-  // Cloud hosted features
-  const cloudHostedFeatures = [
-    { feature: "Projects", free: "Unlimited", pro: "Unlimited", team: "Unlimited" },
-    { feature: "Users", free: "2", pro: "10", team: "Unlimited" },
-    {
-      feature: "Tracing",
-      free: "30k spans / month",
-      pro: "100k spans / month (thereafter $1 per 10k)",
-      team: "1M spans / month (thereafter $1 per 10k)",
-    },
-    { feature: "Data Retention", free: "30 days", pro: "90 days", team: "180 days" },
-    { feature: "Versioned Functions", free: true, pro: true, team: true },
-    { feature: "Playground", free: true, pro: true, team: true },
-    { feature: "Comparisons", free: true, pro: true, team: true },
-    { feature: "Annotations", free: true, pro: true, team: true },
-    { feature: "Support (Community)", free: true, pro: true, team: true },
-    { feature: "Support (Chat / Email)", free: false, pro: true, team: true },
-    { feature: "Support (Private Slack)", free: false, pro: false, team: true },
-    { feature: "API Rate Limits", free: "10 / minute", pro: "100 / minute", team: "1000 / minute" },
-  ];
-
-  // Self-hosted features
-  const selfHostedFeatures = [
-    { feature: "Projects", free: "Unlimited", pro: "Unlimited", team: "Unlimited" },
-    { feature: "Users", free: "Unlimited", pro: "As licensed", team: "As licensed" },
-    { feature: "Tracing", free: "No limits", pro: "No limits", team: "No limits" },
-    { feature: "Data Retention", free: "No limits", pro: "No limits", team: "No limits" },
-    { feature: "Versioned Functions", free: true, pro: true, team: true },
-    { feature: "Playground", free: false, pro: true, team: true },
-    { feature: "Comparisons", free: false, pro: true, team: true },
-    { feature: "Annotations", free: false, pro: true, team: true },
-    { feature: "Support (Community)", free: true, pro: true, team: true },
-    { feature: "Support (Chat / Email)", free: false, pro: true, team: true },
-    { feature: "Support (Private Slack)", free: false, pro: false, team: true },
-    { feature: "API Rate Limits", free: "No limits", pro: "No limits", team: "No limits" },
-  ];
-
   return (
     <div className="px-4 py-4">
       <div className="mx-auto max-w-4xl">
@@ -256,35 +242,7 @@ export function LilypadPricing({ actions }: LilypadPricingProps) {
 
           {/* Hosted By Us Tab Content */}
           <TabsContent value="hosted">
-            <div className="mb-10 grid gap-8 md:grid-cols-3">
-              <PricingTier
-                name="Free"
-                price="$0"
-                description="For individuals just getting started"
-                buttonText={actions.hosted.free.buttonText}
-                buttonLink={actions.hosted.free.buttonLink}
-                badge="Open Beta"
-                variant={actions.hosted.free.variant}
-              />
-              <PricingTier
-                name="Pro"
-                price="TBD"
-                description="For teams with more advanced needs"
-                buttonText={actions.hosted.pro.buttonText}
-                buttonLink={actions.hosted.pro.buttonLink}
-                badge="Closed Beta"
-                variant={actions.hosted.pro.variant || "outline"}
-              />
-              <PricingTier
-                name="Team"
-                price="TBD"
-                description="For larger teams requiring dedicated support"
-                buttonText={actions.hosted.team.buttonText}
-                buttonLink={actions.hosted.team.buttonLink}
-                badge="Closed Beta"
-                variant={actions.hosted.team.variant || "outline"}
-              />
-            </div>
+            <LilypadCloudPricing hostedActions={actions.hosted} />
 
             {/* Feature comparison table */}
             <FeatureComparisonTable features={cloudHostedFeatures} />
@@ -309,7 +267,7 @@ export function LilypadPricing({ actions }: LilypadPricingProps) {
                 buttonText={actions.selfHosted.pro.buttonText}
                 buttonLink={actions.selfHosted.pro.buttonLink}
                 badge="Closed Beta"
-                variant={actions.selfHosted.pro.variant || "outline"}
+                variant={actions.selfHosted.pro.variant ?? "outline"}
               />
               <PricingTier
                 name="Team"
@@ -318,7 +276,7 @@ export function LilypadPricing({ actions }: LilypadPricingProps) {
                 buttonText={actions.selfHosted.team.buttonText}
                 buttonLink={actions.selfHosted.team.buttonLink}
                 badge="Closed Beta"
-                variant={actions.selfHosted.team.variant || "outline"}
+                variant={actions.selfHosted.team.variant ?? "outline"}
               />
             </div>
 
@@ -328,7 +286,7 @@ export function LilypadPricing({ actions }: LilypadPricingProps) {
         </Tabs>
 
         {/* FAQ Section */}
-        <div className="bg-card border-border mt-16 rounded-lg border p-8">
+        <div className="border-border bg-card mt-16 rounded-lg border p-8">
           <h2 className="text-foreground mb-4 text-2xl font-semibold">
             Frequently Asked Questions
           </h2>
@@ -338,8 +296,8 @@ export function LilypadPricing({ actions }: LilypadPricingProps) {
                 How long will the open beta last?
               </h3>
               <p className="text-muted-foreground">
-                The open beta period is ongoing, and we'll provide advance notice before moving to
-                paid plans.
+                The open beta period is ongoing, and we&apos;ll provide advance notice before moving
+                to paid plans.
               </p>
             </div>
             <div>
@@ -374,3 +332,53 @@ export function LilypadPricing({ actions }: LilypadPricingProps) {
     </div>
   );
 }
+
+export const LilypadCloudPricing = ({
+  hostedActions,
+}: {
+  hostedActions: {
+    free: TierAction;
+    pro: TierAction;
+    team: TierAction;
+  };
+}) => {
+  const pricingTiers: PricingTierProps[] = [
+    {
+      name: "Free",
+      price: "$0",
+      description: "For individuals just getting started",
+      buttonText: hostedActions.free.buttonText,
+      buttonLink: hostedActions.free.buttonLink,
+      badge: "Open Beta",
+      variant: hostedActions.free.variant,
+      customButton: hostedActions.free.customButton,
+    },
+    {
+      name: "Pro",
+      price: "TBD",
+      description: "For teams with more advanced needs",
+      buttonText: hostedActions.pro.buttonText,
+      buttonLink: hostedActions.pro.buttonLink,
+      badge: "Closed Beta",
+      variant: hostedActions.pro.variant ?? "outline",
+      customButton: hostedActions.pro.customButton,
+    },
+    {
+      name: "Team",
+      price: "TBD",
+      description: "For larger teams requiring dedicated support",
+      buttonText: hostedActions.team.buttonText,
+      buttonLink: hostedActions.team.buttonLink,
+      badge: "Closed Beta",
+      variant: hostedActions.team.variant ?? "outline",
+      customButton: hostedActions.team.customButton,
+    },
+  ];
+  return (
+    <div className="mb-10 grid gap-8 md:grid-cols-3">
+      {pricingTiers.map((tier) => (
+        <PricingTier key={tier.name} {...tier} />
+      ))}
+    </div>
+  );
+};

From 394eef762471953b78c1550d2cda7c56d03ba321 Mon Sep 17 00:00:00 2001
From: Brendan <brendan.kao@sotai.ai>
Date: Wed, 4 Jun 2025 16:43:59 -0700
Subject: [PATCH 2/3] feat: update slack link

---
 mirascope-ui/blocks/lilypad-pricing.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/mirascope-ui/blocks/lilypad-pricing.tsx b/mirascope-ui/blocks/lilypad-pricing.tsx
index 4cbbbe6..3cb2947 100644
--- a/mirascope-ui/blocks/lilypad-pricing.tsx
+++ b/mirascope-ui/blocks/lilypad-pricing.tsx
@@ -319,7 +319,7 @@ export function LilypadPricing({ actions }: LilypadPricingProps) {
           <p className="text-muted-foreground">
             Join our{" "}
             <ButtonLink
-              href="https://join.slack.com/t/mirascope-community/shared_invite/zt-2ilqhvmki-FB6LWluInUCkkjYD3oSjNA"
+              href="https://mirascope.com/slack-invite?"
               variant="link"
               className="h-auto p-0"
             >

From 840d9b549119c5b54f3e7cfd1b2bd9e4f320695d Mon Sep 17 00:00:00 2001
From: Brendan <brendan.kao@sotai.ai>
Date: Thu, 5 Jun 2025 08:03:30 -0700
Subject: [PATCH 3/3] remove button link

---
 .../blocks/lilypad-pricing.stories.tsx        | 145 +++++++++++-------
 mirascope-ui/blocks/lilypad-pricing.tsx       |  54 ++-----
 2 files changed, 101 insertions(+), 98 deletions(-)

diff --git a/mirascope-ui/blocks/lilypad-pricing.stories.tsx b/mirascope-ui/blocks/lilypad-pricing.stories.tsx
index bd3ce48..a7a80be 100644
--- a/mirascope-ui/blocks/lilypad-pricing.stories.tsx
+++ b/mirascope-ui/blocks/lilypad-pricing.stories.tsx
@@ -1,4 +1,5 @@
 import { LilypadPricing } from "@/mirascope-ui/blocks/lilypad-pricing";
+import { ButtonLink } from "@/mirascope-ui/ui/button-link";
 import type { Meta, StoryObj } from "@storybook/react";
 import {
   createMemoryHistory,
@@ -55,36 +56,48 @@ type Story = StoryObj<typeof meta>;
 const defaultActions = {
   hosted: {
     free: {
-      buttonText: "Get Started Free",
-      buttonLink: "/signup",
-      variant: "default" as const,
+      button: (
+        <ButtonLink href="/signup" variant="default">
+          Get Started Free
+        </ButtonLink>
+      ),
     },
     pro: {
-      buttonText: "Join Waitlist",
-      buttonLink: "/waitlist",
-      variant: "outline" as const,
+      button: (
+        <ButtonLink href="/waitlist" variant="outline">
+          Join Waitlist
+        </ButtonLink>
+      ),
     },
     team: {
-      buttonText: "Contact Sales",
-      buttonLink: "/contact",
-      variant: "outline" as const,
+      button: (
+        <ButtonLink href="/contact" variant="outline">
+          Contact Sales
+        </ButtonLink>
+      ),
     },
   },
   selfHosted: {
     free: {
-      buttonText: "Download",
-      buttonLink: "/download",
-      variant: "default" as const,
+      button: (
+        <ButtonLink href="/download" variant="default">
+          Download
+        </ButtonLink>
+      ),
     },
     pro: {
-      buttonText: "Request Access",
-      buttonLink: "/request-access",
-      variant: "outline" as const,
+      button: (
+        <ButtonLink href="/request-access" variant="outline">
+          Request Access
+        </ButtonLink>
+      ),
     },
     team: {
-      buttonText: "Contact Sales",
-      buttonLink: "/contact",
-      variant: "outline" as const,
+      button: (
+        <ButtonLink href="/contact" variant="outline">
+          Contact Sales
+        </ButtonLink>
+      ),
     },
   },
 };
@@ -100,36 +113,48 @@ export const WithExternalLinks: Story = {
     actions: {
       hosted: {
         free: {
-          buttonText: "Sign Up Now",
-          buttonLink: "https://app.lilypad.com/signup",
-          variant: "default" as const,
+          button: (
+            <ButtonLink href="https://app.lilypad.com/signup" variant="default">
+              Sign Up Now
+            </ButtonLink>
+          ),
         },
         pro: {
-          buttonText: "Join Beta",
-          buttonLink: "https://forms.lilypad.com/beta",
-          variant: "outline" as const,
+          button: (
+            <ButtonLink href="https://forms.lilypad.com/beta" variant="outline">
+              Join Beta
+            </ButtonLink>
+          ),
         },
         team: {
-          buttonText: "Schedule Demo",
-          buttonLink: "https://calendly.com/lilypad-team",
-          variant: "outline" as const,
+          button: (
+            <ButtonLink href="https://calendly.com/lilypad-team" variant="outline">
+              Schedule Demo
+            </ButtonLink>
+          ),
         },
       },
       selfHosted: {
         free: {
-          buttonText: "GitHub Release",
-          buttonLink: "https://github.com/mirascope/lilypad/releases",
-          variant: "default" as const,
+          button: (
+            <ButtonLink href="https://github.com/mirascope/lilypad/releases" variant="default">
+              GitHub Release
+            </ButtonLink>
+          ),
         },
         pro: {
-          buttonText: "Enterprise Inquiry",
-          buttonLink: "https://forms.lilypad.com/enterprise",
-          variant: "outline" as const,
+          button: (
+            <ButtonLink href="https://forms.lilypad.com/enterprise" variant="outline">
+              Enterprise Inquiry
+            </ButtonLink>
+          ),
         },
         team: {
-          buttonText: "Book Consultation",
-          buttonLink: "https://calendly.com/lilypad-enterprise",
-          variant: "outline" as const,
+          button: (
+            <ButtonLink href="https://calendly.com/lilypad-enterprise" variant="outline">
+              Book Consultation
+            </ButtonLink>
+          ),
         },
       },
     },
@@ -148,36 +173,48 @@ export const AllPrimaryButtons: Story = {
     actions: {
       hosted: {
         free: {
-          buttonText: "Start Free",
-          buttonLink: "/start",
-          variant: "default" as const,
+          button: (
+            <ButtonLink href="/start" variant="default">
+              Start Free
+            </ButtonLink>
+          ),
         },
         pro: {
-          buttonText: "Upgrade to Pro",
-          buttonLink: "/upgrade-pro",
-          variant: "default" as const,
+          button: (
+            <ButtonLink href="/upgrade-pro" variant="default">
+              Upgrade to Pro
+            </ButtonLink>
+          ),
         },
         team: {
-          buttonText: "Get Team Plan",
-          buttonLink: "/upgrade-team",
-          variant: "default" as const,
+          button: (
+            <ButtonLink href="/upgrade-team" variant="default">
+              Get Team Plan
+            </ButtonLink>
+          ),
         },
       },
       selfHosted: {
         free: {
-          buttonText: "Download Free",
-          buttonLink: "/download",
-          variant: "default" as const,
+          button: (
+            <ButtonLink href="/download" variant="default">
+              Download Free
+            </ButtonLink>
+          ),
         },
         pro: {
-          buttonText: "Get Pro License",
-          buttonLink: "/license-pro",
-          variant: "default" as const,
+          button: (
+            <ButtonLink href="/license-pro" variant="default">
+              Get Pro License
+            </ButtonLink>
+          ),
         },
         team: {
-          buttonText: "Get Team License",
-          buttonLink: "/license-team",
-          variant: "default" as const,
+          button: (
+            <ButtonLink href="/license-team" variant="default">
+              Get Team License
+            </ButtonLink>
+          ),
         },
       },
     },
diff --git a/mirascope-ui/blocks/lilypad-pricing.tsx b/mirascope-ui/blocks/lilypad-pricing.tsx
index 3cb2947..21dc8f8 100644
--- a/mirascope-ui/blocks/lilypad-pricing.tsx
+++ b/mirascope-ui/blocks/lilypad-pricing.tsx
@@ -85,23 +85,11 @@ interface PricingTierProps {
   name: string;
   price: string;
   description: string;
-  buttonText?: string;
-  buttonLink?: string;
-  customButton?: React.ReactNode;
+  button: React.ReactNode;
   badge?: "Open Beta" | "Closed Beta";
-  variant?: "default" | "outline";
 }
 // Pricing tier component
-const PricingTier = ({
-  name,
-  price,
-  description,
-  buttonText,
-  buttonLink,
-  customButton,
-  badge,
-  variant = "default",
-}: PricingTierProps) => (
+const PricingTier = ({ name, price, description, button, badge }: PricingTierProps) => (
   <div className="border-border bg-background overflow-hidden rounded-lg border shadow-sm">
     <div className={cn("bg-background px-6 py-8")}>
       <div className="mb-2 flex items-center gap-2">
@@ -126,11 +114,7 @@ const PricingTier = ({
           <span className="text-muted-foreground ml-1 text-sm">/ month</span>
         )}
       </div>
-      {customButton ?? (
-        <ButtonLink href={buttonLink ?? "/"} className="w-full" variant={variant}>
-          {buttonText}
-        </ButtonLink>
-      )}
+      {button}
     </div>
   </div>
 );
@@ -159,10 +143,7 @@ export const FeatureComparisonTable = ({ features }: { features: FeatureRowProps
 );
 
 interface TierAction {
-  buttonText?: string;
-  buttonLink?: string;
-  variant?: "default" | "outline";
-  customButton?: React.ReactNode;
+  button: React.ReactNode;
 }
 
 interface PricingActions {
@@ -255,28 +236,22 @@ export function LilypadPricing({ actions }: LilypadPricingProps) {
                 name="Free"
                 price="$0"
                 description="For individuals just getting started"
-                buttonText={actions.selfHosted.free.buttonText}
-                buttonLink={actions.selfHosted.free.buttonLink}
                 badge="Open Beta"
-                variant={actions.selfHosted.free.variant}
+                button={actions.selfHosted.free.button}
               />
               <PricingTier
                 name="Pro"
                 price="TBD"
                 description="For teams with more advanced needs"
-                buttonText={actions.selfHosted.pro.buttonText}
-                buttonLink={actions.selfHosted.pro.buttonLink}
                 badge="Closed Beta"
-                variant={actions.selfHosted.pro.variant ?? "outline"}
+                button={actions.selfHosted.pro.button}
               />
               <PricingTier
                 name="Team"
                 price="TBD"
                 description="For larger teams requiring dedicated support"
-                buttonText={actions.selfHosted.team.buttonText}
-                buttonLink={actions.selfHosted.team.buttonLink}
                 badge="Closed Beta"
-                variant={actions.selfHosted.team.variant ?? "outline"}
+                button={actions.selfHosted.team.button}
               />
             </div>
 
@@ -347,31 +322,22 @@ export const LilypadCloudPricing = ({
       name: "Free",
       price: "$0",
       description: "For individuals just getting started",
-      buttonText: hostedActions.free.buttonText,
-      buttonLink: hostedActions.free.buttonLink,
       badge: "Open Beta",
-      variant: hostedActions.free.variant,
-      customButton: hostedActions.free.customButton,
+      button: hostedActions.free.button,
     },
     {
       name: "Pro",
       price: "TBD",
       description: "For teams with more advanced needs",
-      buttonText: hostedActions.pro.buttonText,
-      buttonLink: hostedActions.pro.buttonLink,
       badge: "Closed Beta",
-      variant: hostedActions.pro.variant ?? "outline",
-      customButton: hostedActions.pro.customButton,
+      button: hostedActions.pro.button,
     },
     {
       name: "Team",
       price: "TBD",
       description: "For larger teams requiring dedicated support",
-      buttonText: hostedActions.team.buttonText,
-      buttonLink: hostedActions.team.buttonLink,
       badge: "Closed Beta",
-      variant: hostedActions.team.variant ?? "outline",
-      customButton: hostedActions.team.customButton,
+      button: hostedActions.team.button,
     },
   ];
   return (