import * as React from "react"; import { ArrowUpRight, Sparkles, Target, Zap } from "lucide-react"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Separator } from "@/components/ui/separator"; import { IntegrationListJourneyTimelineThree } from "@/registry/integration-list-journey-timeline-three/integration-list-journey-timeline-three"; 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 IntegrationListJourneyTimelineThree >; type JourneyMetric = NonNullable< NonNullable["kpis"] >[number]; type JourneyStage = NonNullable[number]; const globalMetrics: JourneyMetric[] = [ { id: "uptime", value: "99.97%", label: "integration uptime", tone: "success", }, { id: "sync", value: "6m", label: "average sync", tone: "brand" }, { id: "coverage", value: "84%", label: "ecosystem coverage", tone: "muted" }, ]; const regionalMetrics: JourneyMetric[] = [ { id: "uptime", value: "99.88%", label: "integration uptime", tone: "success", }, { id: "sync", value: "8m", label: "average sync", tone: "brand" }, { id: "coverage", value: "72%", label: "ecosystem coverage", tone: "muted" }, ]; const baseStages: JourneyStage[] = [ { id: "capture", title: "Capture", subtitle: "Telemetry foundation", description: "Instrument product usage, marketing interactions, and lifecycle metadata for every workspace.", status: "completed", badge: { label: "Live across all workspaces", tone: "success" }, metrics: [ { id: "events", value: "4.8B/mo", label: "events processed", tone: "success", }, { id: "latency", value: "< 2s", label: "tracking latency", tone: "brand", }, ], integrations: [ { id: "segment-prod", name: "Segment Tracking", partner: "Segment", description: "Collect web + app telemetry with realtime enrichment, batching, and replay safeguards.", direction: "Product usage → Segment → Data cloud", docsHref: "https://nextbasehq.com/docs/segment-instrumentation", docsLabel: "Instrumentation playbook", }, { id: "mutiny-traits", name: "Mutiny Trait Bridge", partner: "Mutiny", description: "Sync persona traits and journey stages for personalised experiences.", direction: "Lifecycle traits → Mutiny", statusBadge: { label: "Always on", tone: "brand" }, }, ], evidence: [ "100% of events pass schema validation", "Regional tracking maps to GDPR & SOC2 controls", ], resources: [ { label: "Download tracking plan", href: "https://nextbasehq.com/resources/tracking-plan", icon: , }, ], completionEstimate: "Completed Q1 FY25", }, { id: "sync", title: "Sync", subtitle: "Warehouse activation", description: "Operationalise governed data shares and curated models into RevOps and Success workspaces.", status: "current", badge: { label: "Pilot live", tone: "brand" }, metrics: [ { id: "share", value: "15", label: "data shares", tone: "brand" }, { id: "models", value: "42", label: "modeled metrics", tone: "muted" }, ], integrations: [ { id: "snowflake-marketplace", name: "Snowflake Data Share", partner: "Snowflake", description: "Secure share of curated events, ARR, and health scores with row-level governance.", direction: "Warehouse → Revenue intelligence", docsHref: "https://nextbasehq.com/docs/snowflake-share", }, { id: "dbt-coverage", name: "dbt Coverage Models", partner: "dbt", description: "Transforms raw telemetry into activation, engagement, and risk composite scores.", direction: "dbt → Metric Layer", statusBadge: { label: "Beta", tone: "warning" }, }, ], alerts: [ { title: "Requires enterprise warehouse", description: "Snowflake Enterprise or above is needed for reader accounts with tagging.", tone: "warning", }, { title: "dbt job sequencing", description: "Ensure coverage jobs run post core transforms to avoid stale adoption scores.", tone: "info", }, ], resources: [ { label: "Enable data share", href: "https://nextbasehq.com/actions/share", icon: , }, ], completionEstimate: "Rollout fin/marketing pods by May", }, { id: "automate", title: "Automate", subtitle: "Lifecycle playbooks", description: "Trigger multi-channel motions when adoption thresholds change or decision makers engage.", status: "upcoming", metrics: [ { id: "playbooks", value: "18", label: "playbooks templated", tone: "brand", }, ], integrations: [ { id: "hubspot-pql", name: "HubSpot Activation Sync", partner: "HubSpot", description: "Maps product-qualified signals into workflows, sales sequences, and nurture journeys.", direction: "Usage scores → HubSpot", statusBadge: { label: "Queued", tone: "muted" }, }, { id: "churnzero-health", name: "ChurnZero Health Feeds", partner: "ChurnZero", description: "Updates customer health and triggers success tasks when adoption drops or stakeholders disengage.", direction: "Warehouse → Success playbooks", }, ], alerts: [ { title: "Marketing alignment", description: "Coordinate with marketing ops to reserve IP warming windows before launching sequences.", tone: "warning", }, ], evidence: ["Pilot customers increased expansion win rate by 12%"], completionEstimate: "Playbooks ready mid-June", }, { id: "scale", title: "Scale", subtitle: "Insights to action", description: "Embed dashboards, anomaly detection, and executive reporting for ongoing optimisation.", status: "upcoming", badge: { label: "Design stage", tone: "muted" }, metrics: [ { id: "dashboards", value: "7", label: "dashboards prototyped", tone: "muted", }, ], integrations: [ { id: "looker-executive", name: "Looker Executive Suite", partner: "Looker", description: "Curated C-level dashboards with drill paths and shared insights.", direction: "Metric Layer → Leadership", }, { id: "slack-radar", name: "Slack Radar Alerts", partner: "Slack", description: "Real-time anomaly alerts streaming into GTM and product command centers.", direction: "Warehouse → Slack", }, ], resources: [ { label: "Preview dashboard wireframes", href: "https://nextbasehq.com/library/dashboard-wireframe", icon: , }, ], completionEstimate: "Executive beta slated for August", }, ]; export function IntegrationListJourneyTimelineThreeDemo() { const [view, setView] = React.useState<"global" | "emea">("global"); const hero: ComponentProps["hero"] = React.useMemo( () => ({ eyebrow: "Lifecycle adoption", badge: { label: view === "global" ? "Global rollout" : "EMEA wave", tone: "brand", }, title: "Integration journey from capture to scale", description: "Track how telemetry, warehouse activation, and lifecycle playbooks come together to drive durable adoption.", progressValue: view === "global" ? 68 : 47, progressLabel: "Journey completion", kpis: view === "global" ? globalMetrics : regionalMetrics, adoptionNarrative: view === "global" ? "Global teams have activated telemetry and are midway through warehouse syncing." : "EMEA pods are finalising governance before moving into automation.", }), [view], ); const stages = React.useMemo(() => { if (view === "global") return baseStages; return baseStages.map((stage) => { if (stage.id === "sync") { return { ...stage, badge: { label: "Regional pilot", tone: "warning" }, status: "current", metrics: stage.metrics?.map((metric) => metric.id === "share" ? { ...metric, value: "7" } : metric.id === "models" ? { ...metric, value: "24" } : metric, ), } satisfies JourneyStage; } if (stage.id === "capture") { return { ...stage, metrics: stage.metrics?.map((metric) => metric.id === "events" ? { ...metric, value: "1.2B/mo" } : metric.id === "latency" ? { ...metric, value: "< 4s" } : metric, ), } satisfies JourneyStage; } if (stage.id === "automate") { return { ...stage, status: "upcoming", metrics: stage.metrics?.map((metric) => metric.id === "playbooks" ? { ...metric, value: "12" } : metric, ), } satisfies JourneyStage; } return stage; }); }, [view]); return (

Journey controls

Toggle regional rollout to watch progress, metrics, and badges adapt.

Press the copy icon inside each stage to share integration IDs with your RevOps channel or tracking sheet.

); } export default IntegrationListJourneyTimelineThreeDemo;

Simple