62:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 63:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 64:T7c71,'use client' import * as React from 'react' import { useState } from 'react' import { ArrowRight, ArrowUpRight, CheckCircle2, Clock, Compass, CreditCard, Download, HeartHandshake, Lightbulb, MousePointerClick, Rocket, Share2, ShieldAlert, Smile, TrendingUp, Zap, } from 'lucide-react' import { cn } from '@/lib/utils' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' import { Progress } from '@/components/ui/progress' import { Separator } from '@/components/ui/separator' export interface CustomerJourneyMapProps { className?: string } interface JourneyStage { id: string stageNumber: string title: string subtitle: string icon: React.ElementType volume: string volumeLabel: string volumeChange: string volumeChangeTrend: 'up' | 'down' conversionRate: string conversionLabel: string primaryAction: { icon: React.ElementType text: string } keyMetrics: { label: string value: string detail?: string }[] touchpoints: { name: string channel: string type: 'organic' | 'app' | 'email' | 'billing' }[] sentiment: { score: number maxScore: number label: string icon: React.ElementType progressColor: string gaugeLabel: string } frictionPoint: string opportunity: { experiment: string expectedImpact: string } badgeVariant: 'outline' | 'secondary' | 'default' | 'success' | 'info' | 'warning' } const timeframes = [ { id: '30d', label: 'Last 30 Days' }, { id: '90d', label: 'Last 90 Days' }, { id: 'qtd', label: 'Quarter to Date' }, { id: 'ytd', label: 'Year to Date' }, ] const stages: JourneyStage[] = [ { id: 'acquisition', stageNumber: '01', title: 'Acquisition', subtitle: 'Traffic & Inbound Discovery', icon: Compass, volume: '120,000', volumeLabel: 'Unique Visitors', volumeChange: '+14.2%', volumeChangeTrend: 'up', conversionRate: '6.8%', conversionLabel: 'Visitor to Signup', primaryAction: { icon: MousePointerClick, text: 'Browses docs & visits pricing', }, keyMetrics: [ { label: 'Top Channel', value: 'Organic Search', detail: '48% of volume' }, { label: 'Signup Conv.', value: '6.8%', detail: '8,160 accounts' }, { label: 'Avg. Bounce', value: '41.2%', detail: '-2.4% vs benchmark' }, ], touchpoints: [ { name: 'SEO landing pages & technical blog', channel: 'Search', type: 'organic' }, { name: 'Interactive sandbox demo playground', channel: 'Web App', type: 'app' }, { name: 'Product Hunt launch & GitHub repo', channel: 'Community', type: 'organic' }, { name: 'Developer search & social ad campaigns', channel: 'Paid Ads', type: 'organic' }, ], sentiment: { score: 8.2, maxScore: 10, label: 'High Intent', icon: Smile, progressColor: 'bg-chart-1', gaugeLabel: '8.2 / 10', }, frictionPoint: 'Technical landing page bounce rate spikes on legacy mobile browsers (54%).', opportunity: { experiment: 'Optimize hero headline for developer intent to lift bounce rate by 5%', expectedImpact: '+420 signups/mo', }, badgeVariant: 'secondary', }, { id: 'activation', stageNumber: '02', title: 'Activation', subtitle: 'Onboarding & First Success', icon: Rocket, volume: '8,160', volumeLabel: 'Signups Onboarded', volumeChange: '+8.6%', volumeChangeTrend: 'up', conversionRate: '78.0%', conversionLabel: 'Reached Aha Milestone', primaryAction: { icon: Zap, text: 'Runs first CLI query & creates project', }, keyMetrics: [ { label: 'Key Milestone', value: 'Created 1st Project', detail: '78% completed' }, { label: 'Time to Value', value: '12 min', detail: 'Median onboarding' }, { label: 'Stage Drop-off', value: '22.0%', detail: 'Step 3 invite friction' }, ], touchpoints: [ { name: 'Automated 4-part welcome email sequence', channel: 'Email', type: 'email' }, { name: 'Interactive 3-step setup checklist', channel: 'In-App Modal', type: 'app' }, { name: 'Pre-populated template project schemas', channel: 'Workspace', type: 'app' }, { name: 'CLI quickstart terminal prompt', channel: 'Developer Tool', type: 'app' }, ], sentiment: { score: 8.8, maxScore: 10, label: 'Enthusiastic', icon: Smile, progressColor: 'bg-chart-2', gaugeLabel: '8.8 / 10', }, frictionPoint: 'Drop-off occurs during mandatory colleague invite screen before dashboard access.', opportunity: { experiment: 'Add single-sign on prompt to reduce drop-off by 8%', expectedImpact: '+650 activated teams', }, badgeVariant: 'info', }, { id: 'monetization', stageNumber: '03', title: 'Monetization', subtitle: 'Free to Paid Conversion', icon: CreditCard, volume: '1,420', volumeLabel: 'Paid Customers', volumeChange: '+22.4%', volumeChangeTrend: 'up', conversionRate: '17.4%', conversionLabel: 'Signup to Paid Rate', primaryAction: { icon: TrendingUp, text: 'Selects Team plan & enters credit card', }, keyMetrics: [ { label: 'Avg. Order Value', value: '$49/mo', detail: 'Blended Team/Pro' }, { label: 'Conv. Rate', value: '17.4%', detail: '1,420 total accounts' }, { label: 'Gross New MRR', value: '+$69,580', detail: 'Paced above target' }, ], touchpoints: [ { name: 'Feature gate limit trigger modal', channel: 'In-App', type: 'app' }, { name: 'Self-serve pricing comparison drawer', channel: 'Web App', type: 'app' }, { name: 'Stripe checkout with annual savings toggle', channel: 'Billing Gateway', type: 'billing' }, { name: 'Instant VAT receipt & team tax invoice', channel: 'Automated Email', type: 'email' }, ], sentiment: { score: 8.4, maxScore: 10, label: 'ROI Positive', icon: Smile, progressColor: 'bg-chart-3', gaugeLabel: '8.4 / 10', }, frictionPoint: '12% checkout abandonment when international VAT verification requires manual review.', opportunity: { experiment: 'Introduce annual billing 20% discount badge in checkout to lift ARPU', expectedImpact: '+$14.2k MRR expansion', }, badgeVariant: 'warning', }, { id: 'retention', stageNumber: '04', title: 'Retention & Advocacy', subtitle: 'Active Renewals & Expansion', icon: HeartHandshake, volume: '92.0%', volumeLabel: 'Net Retention Rate', volumeChange: '+3.1%', volumeChangeTrend: 'up', conversionRate: '92.0%', conversionLabel: 'Cohort Net Retention', primaryAction: { icon: Share2, text: 'Shares referral link & invites teammates', }, keyMetrics: [ { label: 'NPS Score', value: '+68', detail: 'Industry world-class' }, { label: 'Referral Velocity', value: '1.2 invites', detail: 'Per active user/mo' }, { label: 'Monthly Logo Churn', value: '0.8%', detail: 'Negative revenue churn' }, ], touchpoints: [ { name: 'Automated weekly performance digest', channel: 'Email Digest', type: 'email' }, { name: 'Quarterly proactive CSM review email', channel: 'Success Touch', type: 'email' }, { name: 'Referral program link inside settings', channel: 'Workspace Settings', type: 'app' }, { name: 'Changelog notification & release notes', channel: 'In-App Feed', type: 'app' }, ], sentiment: { score: 9.4, maxScore: 10, label: 'Brand Advocates', icon: Smile, progressColor: 'bg-chart-4', gaugeLabel: '9.4 / 10', }, frictionPoint: 'Feature discovery lag for advanced multi-region latency controls on growing teams.', opportunity: { experiment: 'Launch one-click workspace invite link to increase referral velocity to 1.8', expectedImpact: '+35% viral coefficient', }, badgeVariant: 'success', }, ] const overallSummary = { funnelConversion: '1.18%', funnelConversionDetail: '1,420 Paid from 120,000 Visitors', timeToValue: '12 min', timeToValueDetail: 'Median signup to Aha moment', conversionVelocity: '4.2 days', conversionVelocityDetail: 'First touch to paid subscription', netRetention: '92.0%', netRetentionDetail: 'Expansion outpacing churn by 3.8x', } export function CustomerJourneyMap({ className }: CustomerJourneyMapProps) { const [selectedTimeframe, setSelectedTimeframe] = useState('30d') const [isExporting, setIsExporting] = useState(false) const [selectedStageIndex, setSelectedStageIndex] = useState(null) const handleExport = () => { setIsExporting(true) setTimeout(() => { setIsExporting(false) }, 1200) } return (

{/* Header Section */}

Customer Journey & Growth Lifecycle Map

Live Lifecycle

Analyze conversion velocity, friction points, and retention cohorts across user lifecycle stages.

{/* Action Toolbar */}

{timeframes.map((tf) => ( ))}

{/* Connected Horizontal Funnel Flow Ribbon */}

{/* Stage 1 Pill */}

1. Acquisition

120,000 Visitors

{/* Connector 1 */}

6.8%

Signup rate

{/* Stage 2 Pill */}

2. Activation

8,160 Signups

{/* Connector 2 */}

17.4%

Upgrade rate

{/* Stage 3 Pill */}

3. Monetization

1,420 Paid

{/* Connector 3 */}

92.0%

Retention

{/* Stage 4 Pill */}

4. Retention

1,306 Advocates

{/* 4-Stage Horizontal Journey Grid */}

{stages.map((stage, idx) => { const StageIcon = stage.icon const ActionIcon = stage.primaryAction.icon return ( setSelectedStageIndex(selectedStageIndex === idx ? null : idx)} > {/* Stage Badge & Number */}

Stage {stage.stageNumber} {stage.conversionLabel}

{/* Stage Icon & Title */}

{stage.title} {stage.subtitle}

{/* Stage Volume Metric */}

{stage.volumeLabel}

{stage.volume}

{stage.volumeChange}

Conv: {stage.conversionRate}

{/* Primary Customer Action */}

Primary Customer Action

{stage.primaryAction.text}

{/* Key Metrics Grid */}

Key Stage Signals

{stage.keyMetrics.map((metric, mIdx) => (

{metric.label}

{metric.value} {metric.detail && ({metric.detail})}

))}

{/* Key Touchpoints List */}

Active Touchpoints

•

{tp.name} {tp.channel}

{/* Sentiment Indicator */}

Sentiment Score {stage.sentiment.gaugeLabel} ({stage.sentiment.label})

{/* Friction / Drop-off Point Note */}

Friction Point: {stage.frictionPoint}

{/* Opportunity / Next Experiment Box */}

Growth Experiment: {stage.opportunity.expectedImpact}

{stage.opportunity.experiment}

) })}

{/* Cross-Stage Conversion Velocity & Funnel Health Summary */}

Lifecycle Conversion Velocity & Health Diagnostics End-to-end efficiency metrics tracking user progression speed from initial acquisition to retained advocacy.

Healthy Velocity (+18% QoQ)

{/* Metric Cards Strip */}

Overall Conversion

{overallSummary.funnelConversion}

{overallSummary.funnelConversionDetail}

Time to Value (TTV)

{overallSummary.timeToValue}

{overallSummary.timeToValueDetail}

Avg. Conversion Velocity

{overallSummary.conversionVelocity}

{overallSummary.conversionVelocityDetail}

Net Revenue Retention

{overallSummary.netRetention}

{overallSummary.netRetentionDetail}

{/* Stage Transition Flow Breakdown Bar */}

Lifecycle Pass-Through Velocity 4 Stages Active • 120,000 Cohort Cohere

{/* Multi-segment Funnel Bar */}

Acquisition (100%)

Activation (6.8%)

Monetization (17.4%)

Retention (92.0%)

{/* Key Strategic Growth Takeaway Callout */}

Primary Strategic Growth Takeaway

High Priority

The largest leverage point in the current cohort is the{' '} Activation-to-Monetization conversion gap (17.4%). Implementing contextual in-app checkout prompts at high-usage milestones and launching annual billing discounts is modeled to generate an additional{' '} +$14,200 / mo in net new MRR.

) } export default CustomerJourneyMap 61:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L62",null,{"namespace":"@registrydirectory","registryDependencies":["https://uipkge.dev/r/react/badge.json","https://uipkge.dev/r/react/button.json","https://uipkge.dev/r/react/card.json","https://uipkge.dev/r/react/progress.json","https://uipkge.dev/r/react/separator.json"]}]]}],null]}],["$","$L63",null,{"files":[{"path":"packages/registry-react/blocks/customer-journey-map/CustomerJourneyMap.tsx","content":"$64","type":"registry:block","target":"~/components/blocks/CustomerJourneyMap.tsx"}],"className":"h-[70svh] min-h-80"}]]}]