import * as React from "react"; import { ArrowUpRight, BarChart3, Building2, ClipboardCheck, Globe2, Handshake, Layers, LineChart, Megaphone, Users, } from "lucide-react"; import { ExampleGallerySegmentedUseCaseThree } from "@/registry/example-gallery-segmented-use-case-three/example-gallery-segmented-use-case-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 ExampleGallerySegmentedUseCaseThree >; const personas: ComponentProps["personas"] = [ { id: "revenue", label: "Revenue Ops", description: "Playbooks, forecasting cadences, and pipeline metrics that help revenue teams close multi-region deals faster.", icon: , }, { id: "marketing", label: "Marketing Ops", description: "Narrative-led campaigns, nurture flows, and experimentation dashboards aligned to lifecycle milestones.", icon: , }, { id: "success", label: "Customer Success", description: "Onboarding journeys, account health signals, and renewal workflows personalized for segment maturity.", icon: , }, ]; const featureFilters: NonNullable = [ { id: "playbooks", label: "Interactive playbooks", description: "Step-by-step activation guides that blend video, checklists, and role-based branching.", icon: , }, { id: "metrics", label: "Live metrics", description: "Embedded scorecards and pacing insights wired to your source-of-truth data warehouse.", icon: , }, { id: "automation", label: "Automation hooks", description: "Triggering service tickets, Slack alerts, or API calls when milestones are reached.", icon: , }, ]; const regions: NonNullable = [ { id: "na", label: "North America", description: "Localized compliance checklist and multi-currency pricing scaffolding.", icon: , }, { id: "emea", label: "EMEA", description: "GDPR-ready language and translated nurture touchpoints.", icon: , }, { id: "apac", label: "APAC", description: "Mobile-first templates with timezone-savvy nudges and chat automations.", icon: , }, ]; const rows: ComponentProps["rows"] = [ { id: "revenue-expansion", personaId: "revenue", heading: "Expansion playbooks for hybrid revenue teams", description: "Full-funnel examples aligned to weekly forecasting cadences and deal desk approvals.", cta: { label: "See revenue library", href: "https://nextbasehq.com/library/revenue", icon: , }, cards: [ { id: "deal-room", title: "Enterprise deal room", summary: "Collaborative workspace with battlecards, security packs, and stakeholder heatmaps wired to Slack alerts.", media: { src: "https://images.unsplash.com/photo-1556740749-887f6717d7e4?auto=format&fit=crop&w=1200&q=80", alt: "Interactive deal room dashboard with timeline and tasks", }, features: ["playbooks", "metrics", "automation"], regions: ["na", "emea"], personaIds: ["revenue"], highlight: true, metrics: [ { label: "Time-to-close", value: "-21%", emphasis: "positive" }, { label: "Stakeholders", value: "9 seats", emphasis: "muted" }, { label: "Security", value: "SOC 2", emphasis: "default" }, ], tags: ["Mutual action plan", "Real-time notes", "Slack sync"], actions: [ { label: "Launch workspace", href: "https://nextbasehq.com/demo/deal-room", external: true, icon: , }, ], }, { id: "forecast-pulse", title: "Weekly forecast pulse", summary: "Adaptive forecast board breaking out pipeline by health signals, quota pacing, and coachable gaps.", media: { src: "https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?auto=format&fit=crop&w=1200&q=80", alt: "Revenue forecast board with charts", }, features: ["metrics"], regions: ["na", "apac"], personaIds: ["revenue"], metrics: [ { label: "Forecast accuracy", value: "+13%", emphasis: "positive" }, { label: "Refresh cadence", value: "Hourly", emphasis: "muted" }, ], tags: ["Weighted pipeline", "Call recordings", "Revenue intelligence"], actions: [ { label: "Review template", href: "https://nextbasehq.com/templates/forecast", external: true, }, ], }, { id: "renewal-at-risk", title: "Renewal at-risk tracker", summary: "Color-coded account portfolio with sentiment inputs and renewal blockers escalated to exec sponsors.", media: { src: "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1200&q=80", alt: "Customer renewal tracker with at-risk accounts", }, features: ["metrics", "automation"], regions: ["emea", "apac"], personaIds: ["revenue", "success"], metrics: [ { label: "Churn reduction", value: "-9%", emphasis: "positive" }, { label: "Escalations", value: "Auto", emphasis: "muted" }, ], tags: ["CS synched", "Sentiment survey", "Exec sponsor"], }, { id: "partner-sourced", title: "Partner sourced pipeline", summary: "Bio cards for partner reps with co-branded assets and co-selling playbook triggers.", media: { src: "https://images.unsplash.com/photo-1573497491208-6b1acb260507?auto=format&fit=crop&w=1200&q=80", alt: "Partner collaboration dashboard", }, features: ["playbooks", "automation"], regions: ["na"], personaIds: ["revenue"], metrics: [ { label: "Influenced pipe", value: "+31%", emphasis: "positive" }, ], tags: ["Co-selling", "Asset hub"], }, ], }, { id: "marketing-campaigns", personaId: "marketing", heading: "Lifecycle campaigns with narrative sequencing", description: "Story-driven galleries showing how campaigns evolve from product launch to advocacy.", cta: { label: "Open campaign center", href: "https://nextbasehq.com/library/marketing", icon: , }, cards: [ { id: "product-hero", title: "Product hero cascade", summary: "Visual canvas showing hero headline explorations, supporting animation layers, and CTA experiments side-by-side.", media: { src: "https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=1200&q=80", alt: "Marketing hero layout exploration", }, features: ["playbooks"], regions: ["na", "emea"], personaIds: ["marketing"], highlight: true, metrics: [ { label: "Conversion lift", value: "24%", emphasis: "positive" }, { label: "Variant count", value: "12", emphasis: "muted" }, ], tags: ["Animation layers", "CTA experiments", "Copy variants"], actions: [ { label: "Explore variants", href: "https://nextbasehq.com/playground/hero-cascade", external: true, }, ], }, { id: "webinar-series", title: "Founder spotlight webinar series", summary: "Replicable webinar stack with speaker bios, registration funnel analytics, and post-event nurture assets.", media: { src: "https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=1200&q=80", alt: "Live webinar experience on laptop", }, features: ["playbooks", "automation"], regions: ["na", "apac"], personaIds: ["marketing"], metrics: [ { label: "Attendance", value: "680", emphasis: "muted" }, { label: "SQL ratio", value: "18%", emphasis: "positive" }, ], tags: ["Segmented drip", "Speaker prep"], }, { id: "advocacy-gallery", title: "Advocacy story gallery", summary: "Masonry gallery blending customer quotes, short-form video, and in-product proof points.", media: { src: "https://images.unsplash.com/photo-1483478550801-ceba5fe50e8e?auto=format&fit=crop&w=1200&q=80", alt: "Customer advocacy profile", }, features: ["metrics", "automation"], regions: ["emea", "apac"], personaIds: ["marketing", "success"], metrics: [{ label: "Share rate", value: "3.2x", emphasis: "positive" }], tags: ["UGC", "Localized subtitles"], }, { id: "launch-command", title: "Launch command center", summary: "Command pallet of tactics, experiment backlog, and approvals to keep go-lives on track.", media: { src: "https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=1200&q=80", alt: "Launch command center dashboard", }, features: ["automation", "metrics"], regions: ["na"], personaIds: ["marketing"], metrics: [ { label: "Launch velocity", value: "+35%", emphasis: "positive" }, ], tags: ["QA checklist", "Creative approvals"], }, ], }, { id: "success-onboarding", personaId: "success", heading: "Customer success journeys going from adoption to advocacy", description: "Curated examples of success rooms, onboarding canvases, and proactive renewal planning.", cta: { label: "Browse success lab", href: "https://nextbasehq.com/library/success", icon: , }, cards: [ { id: "activation-studio", title: "Activation studio", summary: "Modular onboarding plan with milestone gates, time-to-value targets, and stakeholder accountability.", media: { src: "https://images.unsplash.com/photo-1556740749-887f6717d7e4?auto=format&fit=crop&w=1200&q=80", alt: "Customer onboarding checklist", }, features: ["playbooks", "metrics"], regions: ["na", "apac"], personaIds: ["success"], highlight: true, metrics: [ { label: "Time-to-value", value: "28 days", emphasis: "muted" }, { label: "Activation rate", value: "+17%", emphasis: "positive" }, ], tags: ["Journey map", "Automation nudges", "Executive recap"], actions: [ { label: "Duplicate plan", href: "https://nextbasehq.com/templates/activation", external: true, }, ], }, { id: "health-dashboard", title: "Account health dashboard", summary: "Real-time health scoring with adoption metrics, NPS pulses, and champion engagement trends.", media: { src: "https://images.unsplash.com/photo-1434030216411-0b793f4b4173?auto=format&fit=crop&w=1200&q=80", alt: "Customer health dashboard", }, features: ["metrics"], regions: ["emea", "apac"], personaIds: ["success"], metrics: [ { label: "Health accuracy", value: "92%", emphasis: "positive" }, { label: "Alerts", value: "Automated", emphasis: "muted" }, ], tags: ["Executive summary", "Segment drilldowns"], }, { id: "renewal-room", title: "Renewal command room", summary: "Mutual renewal checklist with countersigned milestones, ROI calculator, and champion quote library.", media: { src: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=1200&q=80", alt: "Renewal meeting workspace", }, features: ["playbooks", "automation"], regions: ["na", "emea"], personaIds: ["success", "revenue"], metrics: [ { label: "Renewal likelihood", value: "+11%", emphasis: "positive" }, { label: "Prep time", value: "-4 hrs", emphasis: "positive" }, ], tags: ["ROI summary", "Mutual plan"], }, { id: "advocacy-tracker", title: "Advocacy tracker", summary: "Customer stories gallery capturing quotes, headshots, and content eligibility by segment.", media: { src: "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=1200&q=80", alt: "Customer story gallery", }, features: ["metrics", "automation"], regions: ["emea"], personaIds: ["success", "marketing"], metrics: [ { label: "Stories sourced", value: "+48", emphasis: "positive" }, ], tags: ["Reference ready", "Quote approvals"], }, ], }, ]; export function ExampleGallerySegmentedUseCaseThreeDemo(): React.JSX.Element { return ( ); } export default ExampleGallerySegmentedUseCaseThreeDemo;

Simple