import * as React from "react"; import { ArrowRightIcon, ClipboardListIcon, FileSpreadsheetIcon, RocketIcon, } from "lucide-react"; import { ResourceLibraryCustomerSuccessPlaybookFive } from "@/registry/resource-library-customer-success-playbook-five/resource-library-customer-success-playbook-five"; 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 ResourceLibraryCustomerSuccessPlaybookFive >; type PlaybookCollection = NonNullable[number]; const stages = [ { id: "activation", label: "Activation", description: "Launch the first workflows", }, { id: "adoption", label: "Adoption", description: "Drive cross-team engagement", }, { id: "expansion", label: "Expansion", description: "Map expansion playbooks", }, ]; const highlights = [ { id: "success-plan", label: "Featured", title: "Executive success plan", description: "Align leadership with a board-ready plan covering KPIs, risk, and enablement milestones.", badge: "Premium", cta: { label: "Download plan", href: "#download-plan", icon: , }, secondaryCta: { label: "Preview", href: "#preview-plan", }, }, { id: "health-review", label: "Spotlight", title: "Quarterly health review kit", description: "Ready-to-send deck plus scorecard template for CSM-led executive reviews.", cta: { label: "Copy to workspace", href: "#copy-health-review", }, }, ]; const collections: PlaybookCollection[] = [ { id: "templates", label: "Templates", description: "Plug-and-play assets for lifecycle emails, QBRs, and renewal cadences.", resources: [ { id: "onboarding-template", title: "30-day onboarding sequence", description: "Sequenced emails, tasks, and handoffs for onboarding new enterprise teams.", durationLabel: "12 steps", gatingLevel: "account", actionLabel: "Use template", actionHref: "#use-template", icon: , }, { id: "renewal-brief", title: "Renewal risk brief", description: "Executive-ready brief to summarize risk signals and mitigation actions.", durationLabel: "4 sections", gatingLevel: "teammates", actionLabel: "Download brief", actionHref: "#download-brief", icon: , }, ], }, { id: "calculators", label: "Calculators", description: "Scenario planners and ROI models to quantify value milestones.", resources: [ { id: "roi-model", title: "Adoption ROI model", description: "Excel workbook modeling adoption impact and expansion triggers.", durationLabel: "Multi-scenario", gatingLevel: "success", actionLabel: "Request access", actionHref: "#request-roi", icon: , }, { id: "playbook-scorecard", title: "Playbook maturity scorecard", description: "Benchmark your playbooks against best-in-class teams and prioritize gaps.", durationLabel: "Scorecard", actionLabel: "Open scorecard", actionHref: "#open-scorecard", icon: , }, ], }, { id: "sessions", label: "Recorded sessions", description: "Deep dives and customer stories to inspire expansion journeys.", resources: [ { id: "workflow-tour", title: "Workflow tour: Lifecycle automation", description: "45-minute walkthrough of automated lifecycle triggers with Q&A.", durationLabel: "45 min", actionLabel: "Watch replay", actionHref: "#watch-workflow", }, { id: "expansion-playbook", title: "Expansion playbook office hours", description: "Live coaching session with top-performing CSMs digging into expansion motions.", durationLabel: "60 min", gatingLevel: "teammates", actionLabel: "Register", actionHref: "#register-expansion", }, ], }, ]; const stats = [ { id: "health", label: "Account health", value: "78%", helper: "Up 12% since last quarter", }, { id: "time", label: "Time to value", value: "21 days", helper: "Goal: < 30 days", }, { id: "expansion", label: "Expansion pipeline", value: "$420K", helper: "8 accounts in play", }, ]; const gatingSteps = [ { id: "account", label: "Sync account data", description: "Connect CRM and usage signals to track cohort health.", status: "completed" as const, }, { id: "teammates", label: "Add teammates", description: "Invite sales engineer + success analyst collaborators.", status: "current" as const, }, { id: "success", label: "Book success review", description: "Meet your CSM to unlock concierge playbooks.", status: "locked" as const, }, ]; const prompts = { nextStepLabel: "Next up: Add teammates", ctaLabel: "Invite teammates", ctaHref: "#invite-teammates", helper: "Access advanced playbooks once your core workspace collaborators join.", }; export function ResourceLibraryCustomerSuccessPlaybookFiveDemo() { const [activeStage, setActiveStage] = React.useState( stages[0]?.id ?? "activation", ); return (

console.log("Resource action", id)} />

Active stage: {activeStage}

); } export default ResourceLibraryCustomerSuccessPlaybookFiveDemo;

Simple