import * as React from "react"; import { ArrowUpRight, BarChart3, CalendarClock, ChartNetwork, ClipboardList, Folders, Globe2, MessageCircle, ShieldCheck, Sparkles, Users2, } from "lucide-react"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { IntegrationListUseCaseTabbedGalleryTwo } from "@/registry/integration-list-use-case-tabbed-gallery-two/integration-list-use-case-tabbed-gallery-two"; 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 IntegrationListUseCaseTabbedGalleryTwo >; type UseCase = NonNullable[number]; type UseCaseGalleryIntegration = NonNullable[number]; type GalleryMetricChip = NonNullable[number]; const heading: NonNullable = { eyebrow: "Use-case gallery", title: "Curated integration recipes for every go-to-market motion", description: "Guide buyers through outcome-driven stories that highlight the exact integrations, automations, and workflows your teams trust in production.", supportingCopy: "Each recipe bundles complementary partners and clearly communicates prerequisites so prospects can launch with confidence.", }; const pipelineIntegrations: UseCaseGalleryIntegration[] = [ { id: "hubspot-calendly-slack", title: "HubSpot + Calendly + Slack", summary: "Move qualified leads from form fill to booked demo while arming the account team with signals in a shared command center.", logos: [ { name: "HubSpot", initials: "HS" }, { name: "Calendly", initials: "Ca" }, { name: "Slack", initials: "Sl" }, ], tags: [{ label: "Launch ready", tone: "brand" }], benefits: [ "Routes MQLs based on product intent, persona, and territory", "Instantly books demos with pooled reps and round robin rules", "Pushes meeting notes and highlights into Slack war rooms", ], workflow: { headline: "Book and brief in under 60 seconds", description: "Align demand gen, SDRs, and AEs with alerts, prep packets, and automated recap notes.", steps: [ { id: "form-ingest", title: "Enrich and score the submission", description: "HubSpot applies AI scoring using product usage, firmographic enrichment, and campaign source.", icon: , }, { id: "instant-book", title: "Surface calendar based on routing logic", description: "Calendly invites the pooled AE or CSM with time blocks tied to account tier and region.", icon: , }, { id: "prep-packet", title: "Drop prep packet in shared Slack channel", description: "Slack notifies the revenue pod with account intel, product usage clips, and next best actions.", icon: , callout: "Records owner", }, ], supportingApps: ["Notion", "Gong", "Zoom"], prerequisites: [ "HubSpot Marketing Pro", "Calendly Teams seats", "Slack Sales pod", ], successNarrative: "Teams using this trio see 3× faster handoffs with zero no-shows across enterprise segments.", }, complementaryApps: ["Mutiny", "ZoomInfo"], prerequisites: [ "Requires HubSpot routing rules", "Calendly pooled availability", ], cta: { label: "Add playbook", href: "https://nextbasehq.com/gallery/pipeline-playbook", icon: , }, }, { id: "linkedin-clearbit-segment", title: "LinkedIn Ads + Clearbit + Segment", summary: "Orchestrate targeted outreach and real-time scoring for high-value audiences across paid and owned channels.", logos: [ { name: "LinkedIn", initials: "LI" }, { name: "Clearbit", initials: "CB" }, { name: "Segment", initials: "SG" }, ], tags: [{ label: "ABM", tone: "success" }], benefits: [ "Build dynamic LinkedIn audiences from product-qualified signals", "Reveal anonymous traffic and trigger nurture journeys instantly", "Sync first-party data back into paid media segments nightly", ], workflow: { headline: "Meet buyers where they research", steps: [ { id: "identify", title: "Map anonymous traffic", description: "Clearbit reveals visiting accounts, layering revenue band, tech stack, and hiring velocity.", icon: , }, { id: "enrich", title: "Push enriched audiences to LinkedIn", description: "Segment writes PQL cohorts into matched audiences with intent windows and persona fields.", icon: , }, { id: "convert", title: "Auto nurture responders", description: "HubSpot sequences personalize follow-up based on product triggers and campaign path.", icon: , }, ], prerequisites: ["Segment Connections", "LinkedIn Matched Audiences"], supportingApps: ["HubSpot", "Mutiny"], }, cta: { label: "Launch ABM recipe", href: "https://nextbasehq.com/gallery/abm-recipe", icon: , }, }, { id: "mutiny-gong-notion", title: "Mutiny + Gong + Notion", summary: "Feed conversational insights back into personalized landing pages and sales playbooks.", logos: [ { name: "Mutiny", initials: "MU" }, { name: "Gong", initials: "GO" }, { name: "Notion", initials: "NO" }, ], tags: [{ label: "Storytelling", tone: "muted" }], benefits: [ "Transcribe discovery calls and surface objections", "Personalize hero copy for each vertical in minutes", "Publish living playbooks with embedded wins and snippets", ], workflow: { headline: "Close the feedback loop between calls and creative", steps: [ { id: "mine", title: "Mine Gong calls for objection themes", description: "AI labels risk keywords and champion language by industry and deal stage.", icon: , }, { id: "personalize", title: "Sync insights to Mutiny", description: "Mutiny tailors landing page blocks using the latest playback from revenue calls.", icon: , }, { id: "publish", title: "Publish playbooks in Notion", description: "Sales enablement receives curated clips, copy, and counters mapped to personas.", icon: , }, ], successNarrative: "Enablement teams refresh messaging weekly without waiting on manual briefs.", }, complementaryApps: ["Figma", "DocSend"], cta: { label: "Deploy storytelling kit", href: "https://nextbasehq.com/gallery/storytelling-kit", icon: , }, }, ]; const expansionIntegrations: UseCaseGalleryIntegration[] = [ { id: "salesforce-gainsight-loom", title: "Salesforce + Gainsight + Loom", summary: "Proactively guide account teams with adoption triggers, renewal forecasts, and async stakeholder updates.", logos: [ { name: "Salesforce", initials: "SF" }, { name: "Gainsight", initials: "GS" }, { name: "Loom", initials: "LM" }, ], tags: [{ label: "Success", tone: "success" }], benefits: [ "Surfacing usage drop-offs directly in account plans", "Auto-scheduling executive check-ins with health snapshots", "Delivering Loom recaps to multi-threaded champions", ], workflow: { headline: "Reinforce value ahead of renewals", steps: [ { id: "monitor", title: "Monitor product telemetry", description: "Gainsight monitors feature adoption and playbook completion across workspaces.", icon: , }, { id: "alert", title: "Alert the account team", description: "Salesforce creates tasks and updates forecast categories when health scores slip.", icon: , }, { id: "broadcast", title: "Share Loom recap", description: "CSM records a micro-update, automatically shared with exec sponsors and operations.", icon: , }, ], prerequisites: ["Gainsight NXT", "Salesforce Enterprise"], }, cta: { label: "Enable CS ops play", href: "https://nextbasehq.com/gallery/expansion", icon: , }, }, { id: "stripe-zendesk-notion", title: "Stripe + Zendesk + Notion", summary: "Align finance, support, and product with a shared view of billing incidents and customer impact.", logos: [ { name: "Stripe", initials: "ST" }, { name: "Zendesk", initials: "ZD" }, { name: "Notion", initials: "NO" }, ], benefits: [ "Escalate payment failures to the right success pods", "Bundle remediation steps with runbooks and owner workflow", "Sync credits or refunds back into finance ledgers", ], workflow: { headline: "Create closed-loop remediation", steps: [ { id: "detect", title: "Detect failed transactions", description: "Stripe Radar flags risk events and sends payload to Zendesk.", icon: , }, { id: "triage", title: "Route incident", description: "Zendesk macros assign owners, SLAs, and customer communications.", icon: , }, { id: "document", title: "Document in Notion", description: "Runbooks generate action checklists and time-to-resolution metrics for retros.", icon: , }, ], supportingApps: ["Slack", "Looker"], }, prerequisites: ["Stripe Radar", "Zendesk Enterprise triggers"], cta: { label: "Add remediation kit", href: "https://nextbasehq.com/gallery/remediation", icon: , }, }, { id: "productboard-amplitude-figma", title: "Productboard + Amplitude + Figma", summary: "Tightly connect customer feedback, usage analytics, and prototype collaboration for expansion bets.", logos: [ { name: "Productboard", initials: "PB" }, { name: "Amplitude", initials: "AM" }, { name: "Figma", initials: "FG" }, ], tags: [{ label: "Expansion", tone: "brand" }], benefits: [ "Centralize requests by ARR impact and persona", "Validate feature interest with cohort analysis", "Share interactive concepts with revenue champions", ], workflow: { headline: "Decide, validate, and deliver", steps: [ { id: "capture", title: "Capture high-value feedback", description: "Productboard aggregates notes from support, sales calls, and in-app prompts.", icon: , }, { id: "analyze", title: "Analyze in Amplitude", description: "Revenue cohorts show adoption lift when new workflows land.", icon: , }, { id: "prototype", title: "Prototype with champions", description: "Figma share links notify stakeholders with contextual comments and approvals.", icon: , }, ], }, complementaryApps: ["Gong"], cta: { label: "Share discovery workspace", href: "https://nextbasehq.com/gallery/discovery", icon: , }, }, ]; const onboardingIntegrations: UseCaseGalleryIntegration[] = [ { id: "notion-linear-slack", title: "Notion + Linear + Slack", summary: "Welcome new customers with guided spaces, issue triage, and live ops updates in one cohesive workspace.", logos: [ { name: "Notion", initials: "NO" }, { name: "Linear", initials: "LN" }, { name: "Slack", initials: "Sl" }, ], tags: [{ label: "Onboarding", tone: "brand" }], benefits: [ "Spin up project spaces with blueprint checklists", "Auto-create Linear tickets for blockers", "Notify champions of progress and sign-offs", ], workflow: { headline: "Guide implementation squads", steps: [ { id: "space", title: "Create workspace", description: "Notion templates generate a roadmap, owners, and deliverables per customer tier.", icon: , }, { id: "triage", title: "Escalate blockers", description: "Linear auto-triages tasks by severity and tags engineering owners.", icon: , }, { id: "signal", title: "Broadcast milestones", description: "Slack milestone bot posts progress snapshots and requests approvals.", icon: , }, ], prerequisites: ["Linear Insights"], supportingApps: ["Zapier"], }, cta: { label: "Activate onboarding kit", href: "https://nextbasehq.com/gallery/onboarding", icon: , }, }, { id: "mixpanel-churnzero-zapier", title: "Mixpanel + ChurnZero + Zapier", summary: "Trigger success plays based on early activation signals and retention risk.", logos: [ { name: "Mixpanel", initials: "MP" }, { name: "ChurnZero", initials: "CZ" }, { name: "Zapier", initials: "ZA" }, ], benefits: [ "Score onboarding milestones automatically", "Launch nurture sequences for disengaged champions", "Sync custom segments to marketing touchpoints", ], workflow: { headline: "Automate onboarding guardrails", steps: [ { id: "track", title: "Track activation events", description: "Mixpanel measures time-to-value against target cohorts.", icon: , }, { id: "play", title: "Launch success plays", description: "ChurnZero assigns tasks and sends welcome journeys when milestones slip.", icon: , }, { id: "sync", title: "Sync to marketing", description: "Zapier updates lifecycle stage and nudges marketing automation to reinforce value.", icon: , }, ], }, prerequisites: ["Mixpanel Data Pipelines"], cta: { label: "Automate milestones", href: "https://nextbasehq.com/gallery/onboarding-automation", icon: , }, }, { id: "asana-zoom-gong", title: "Asana + Zoom + Gong", summary: "Run collaborative onboarding sprints with live workshops, recaps, and tracking across teams.", logos: [ { name: "Asana", initials: "AS" }, { name: "Zoom", initials: "ZO" }, { name: "Gong", initials: "GO" }, ], tags: [{ label: "Hybrid", tone: "muted" }], benefits: [ "Share project plans with champions and admins", "Capture live workshop recordings and notes", "Slice insights by persona to refine enablement", ], workflow: { headline: "Keep onboarding moments on track", steps: [ { id: "plan", title: "Plan sprint", description: "Asana boards spin up tasks, dependencies, and owners per segment.", icon: , }, { id: "facilitate", title: "Facilitate workshops", description: "Zoom recordings sync to Gong where enablement highlights wins and risk.", icon: , }, { id: "share", title: "Share success", description: "Success managers share curated clips and tasks back with exec sponsors.", icon: , }, ], }, cta: { label: "Run sprint template", href: "https://nextbasehq.com/gallery/onboarding-sprint", icon: , }, }, ]; const pipelineMetrics: GalleryMetricChip[] = [ { id: "sql", value: "+28%", label: "demo-to-SQL win rate", tone: "success" }, { id: "speed", value: "-11 hrs", label: "manual routing each week", tone: "brand", }, { id: "coverage", value: "95%", label: "leads touched within 2h", tone: "muted", }, ]; const expansionMetrics: GalleryMetricChip[] = [ { id: "renewal", value: "+17%", label: "renewal forecast accuracy", tone: "success", }, { id: "time", value: "-9 hrs", label: "saved per escalation", tone: "brand" }, ]; const onboardingMetrics: GalleryMetricChip[] = [ { id: "time-to-value", value: "12 days", label: "time to first value", tone: "success", }, { id: "nps", value: "+34", label: "implementation NPS", tone: "brand" }, { id: "coverage", value: "93%", label: "milestones on time", tone: "muted" }, ]; const useCases: UseCase[] = [ { id: "pipeline", label: "Pipeline acceleration", headline: "Convert qualified interest into revenue meetings", description: "Unify lead capture, scheduling, and prep rituals so account teams enter every meeting with full context.", subheading: "Pair demand gen and sales with a turnkey playbook that keeps every prospect warm between touchpoints.", metrics: pipelineMetrics, testimonial: { quote: "The curated combo of HubSpot, Calendly, and Slack shaved days off our handoffs and triples meeting show rates.", author: "Jordan Blake", role: "VP Demand Generation, Riverside", metric: "+3.2x pipeline from ABM sequences", highlight: "Marketing and sales ops now collaborate from one shared war room, complete with live prep packets.", chips: [ { id: "coverage", value: "98%", label: "leads routed correctly" }, { id: "hand-off", value: "<5 min", label: "median response", tone: "brand", }, ], logo: ( Riverside ), }, addAllCta: { label: "Add pipeline stack", href: "https://nextbasehq.com/stacks/pipeline", icon: , description: "Preload all connectors and sync rules in under five minutes.", }, integrations: pipelineIntegrations, }, { id: "expansion", label: "Expansion & retention", headline: "Spot risk early and champion value moments", description: "Bring product telemetry, finance signals, and success playbooks together so teams act before renewals wobble.", metrics: expansionMetrics, testimonial: { quote: "Forecast meetings went from reactive to proactive. We now have one command center for customer health.", author: "Miya Chen", role: "Chief Customer Officer, Atlas", metric: "+9 point NRR lift in two quarters", chips: [ { id: "health", value: "92", label: "median health score", tone: "success", }, { id: "escalations", value: "-48%", label: "support escalations" }, ], }, integrations: expansionIntegrations, }, { id: "onboarding", label: "Onboarding & activation", headline: "Deliver guided implementations that stick", description: "Give implementation teams visibility into milestones, stakeholder engagement, and risks across every cohort.", metrics: onboardingMetrics, testimonial: { quote: "Customers finally feel the red carpet treatment. Every project lead knows their role and what success looks like.", author: "Alton Wells", role: "Head of Customer Programs, Northwind", metric: "94% onboarding satisfaction", chips: [ { id: "time", value: "-41%", label: "time to first value", tone: "brand", }, { id: "csat", value: "4.8/5", label: "post-onboarding CSAT" }, ], }, addAllCta: { label: "Install onboarding workspace", href: "https://nextbasehq.com/stacks/onboarding", icon: , description: "Provision project templates, automations, and dashboards instantly.", }, integrations: onboardingIntegrations, }, ]; export function IntegrationListUseCaseTabbedGalleryTwoDemo() { return (

Showcase demo

Tabs update the gallery instantly—mobile visitors get a native select with the same data.

); } export default IntegrationListUseCaseTabbedGalleryTwoDemo;

Simple