import * as React from "react"; import { Globe2, Lock, ShieldCheck, Star } from "lucide-react"; import { PricingConversionFocusedSaasTierGridOne } from "@/registry/pricing-conversion-focused-saas-tier-grid-one/pricing-conversion-focused-saas-tier-grid-one"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; type ComponentProps = React.ComponentPropsWithoutRef< typeof PricingConversionFocusedSaasTierGridOne >; type PricingPlan = NonNullable[number]; const seatOptions = [ { id: "team-10", label: "Startup", description: "Up to 10 seats", seats: 10, }, { id: "team-50", label: "Growth", description: "11-50 seats", seats: 50, }, { id: "team-200", label: "Scale", description: "51-200 seats", seats: 200, }, ]; const plans: PricingPlan[] = [ { id: "starter", name: "Starter", description: "Launch pilots, invite collaborators, and monitor core KPIs.", monthlyPrice: "$29", annualPrice: "$24", priceCaption: "per seat", features: [ { id: "f1", label: "Unlimited dashboards" }, { id: "f2", label: "AI anomaly detection" }, { id: "f3", label: "Guided onboarding" }, ], cta: { label: "Start free", href: "#", variant: "secondary", }, secondaryCta: { label: "Compare plan", href: "#", }, perks: ["SOC 2 attestation", "Email support within 4 hours"], }, { id: "growth", name: "Growth", description: "Automate revenue operations and orchestrate advanced journeys.", monthlyPrice: "$69", annualPrice: "$52", priceCaption: "per seat", highlight: "Best for multi-team adoption", badge: "Popular", recommended: true, features: [ { id: "f4", label: "Revenue intelligence playbooks" }, { id: "f5", label: "2-way Salesforce sync" }, { id: "f6", label: "Live webinar staging" }, ], cta: { label: "Launch trial", href: "#", }, secondaryCta: { label: "Preview analytics", href: "#", }, perks: [ "Dedicated success architect", "Quarterly strategy reviews", "Compliance desk access", ], }, { id: "enterprise", name: "Enterprise", description: "Govern global operations with procurement workflows and SSO.", monthlyPrice: "Custom", annualPrice: "Custom", priceCaption: "billed annually", features: [ { id: "f7", label: "Org-wide orchestration" }, { id: "f8", label: "Dedicated data lake export" }, { id: "f9", label: "Enterprise SLA & 24/7 support" }, ], cta: { label: "Talk to sales", href: "#", }, secondaryCta: { label: "Download security brief", href: "#", }, perks: [ "Named technical account manager", "Field-level encryption controls", "Enterprise sandbox with SSO", ], }, ]; const featureGroups = [ { id: "automation", title: "Automation & workflows", description: "Turn adoption signals into multi-channel automations.", rows: [ { id: "journeys", label: "Journey builder", planValues: [ { planId: "starter", value: "Playbook templates" }, { planId: "growth", value: "Conditional branching", emphasis: true }, { planId: "enterprise", value: "Unlimited workstreams", emphasis: true, }, ], }, { id: "workflow", label: "Workflow triggers", planValues: [ { planId: "starter", value: true }, { planId: "growth", value: true }, { planId: "enterprise", value: true }, ], }, { id: "sandbox", label: "Sandbox environments", planValues: [ { planId: "starter", value: false }, { planId: "growth", value: "Shared" }, { planId: "enterprise", value: "Dedicated" }, ], }, ], }, { id: "security", title: "Security posture", rows: [ { id: "sso", label: "SSO providers", planValues: [ { planId: "starter", value: false }, { planId: "growth", value: "Google & Microsoft" }, { planId: "enterprise", value: "Full SAML/OIDC" }, ], }, { id: "retention", label: "Data retention", planValues: [ { planId: "starter", value: "90 days" }, { planId: "growth", value: "365 days" }, { planId: "enterprise", value: "Custom" }, ], }, { id: "audit", label: "Audit trails", planValues: [ { planId: "starter", value: false }, { planId: "growth", value: true }, { planId: "enterprise", value: true }, ], }, ], }, ]; const trustBadges = [ { id: "soc2", label: "SOC 2 Type II", description: "Independently audited, renewed every 12 months.", icon: , }, { id: "gdpr", label: "GDPR Ready", description: "Regional data residency with EU support SLAs.", icon: , }, { id: "encryption", label: "Field-level encryption", description: "256-bit encryption with granular key rotation policies.", icon: , }, { id: "reviews", label: "4.9 / 5 G2 rating", description: "Based on 620 verified reviews in SaaS analytics.", icon: , }, ]; const guarantees = [ { id: "trial", headline: "14-day free trial", description: "Experiment with all premium workflows before upgrading.", }, { id: "uptime", headline: "99.9% uptime commitment", description: "Backed by real-time status page and transparent incident communication.", }, ]; export function PricingConversionFocusedSaasTierGridOneDemo() { const [selectedPlan, setSelectedPlan] = React.useState(null); return (

setSelectedPlan(plan.id)} />

{selectedPlan ? (

You selected the{" "} {selectedPlan} plan. Enterprise advisors will reach out within 30 minutes.

) : (

Billing toggle updates pricing in place. Annual previews showcase savings messaging while keeping the CTA primary.

)}

); } export default PricingConversionFocusedSaasTierGridOneDemo;

Simple