import * as React from "react"; import { ArrowUpRight, Building2, Globe2, Layers, LineChart, Sparkles, } from "lucide-react"; import { ExampleGalleryFilterableCaseStudyOne } from "@/registry/example-gallery-filterable-case-study-one/example-gallery-filterable-case-study-one"; 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 ExampleGalleryFilterableCaseStudyOne >; const filters: NonNullable = [ { value: "all", label: "All", tone: "default" }, { value: "launched", label: "Launched", tone: "brand" }, { value: "pilot", label: "Pilot", tone: "warning" }, { value: "beta", label: "Beta", tone: "muted" }, { value: "scale", label: "Scale", tone: "success" }, ]; const sortOptions: NonNullable = [ { value: "newest", label: "Newest" }, { value: "most-impactful", label: "Most Impactful" }, { value: "alphabetical", label: "A → Z", compare: (a, b) => a.clientName.localeCompare(b.clientName), }, ]; const spotlights: ComponentProps["spotlights"] = [ { id: "northbeam", title: "Unlocked a 38% jump in enterprise conversions", quote: "We finally have a living gallery of customer wins that sales can filter in seconds and marketing can action in minutes.", company: "Northbeam", role: "VP, Revenue Marketing", authorName: "Mara Lutz", media: { src: "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1200&q=80", alt: "Marketing team collaborating around a desk", aspectRatio: 16 / 9, }, metrics: [ { label: "Pipeline velocity", value: "↑ 28%" }, { label: "Activation lift", value: "+36%" }, ], cta: { label: "Read the story", href: "https://nextbasehq.com/stories/northbeam", icon: , }, caption: "Sales teams replay this gallery weekly to anchor success plans and expansion calls.", }, { id: "parcel", title: "Cut onboarding time in half for a global commerce leader", quote: "We capture every persona win in one gallery. Filters make it effortless to tailor to meetings across 12 regions.", company: "Parcel", role: "Director of Solutions", authorName: "Gerald Singh", media: { src: "https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?auto=format&fit=crop&w=1200&q=80", alt: "Customer success managers reviewing dashboards", }, metrics: [ { label: "Time-to-first-value", value: "↓ 14 days" }, { label: "Regional adoption", value: "92%" }, ], cta: { label: "Watch the breakdown", href: "https://nextbasehq.com/stories/parcel", icon: , }, }, ]; const caseStudies: ComponentProps["caseStudies"] = [ { id: "atlas-risk", clientName: "Atlas Risk", headline: "Streamlined audits for complex compliance workflows", summary: "Replaced static decks with a live gallery featuring region-specific controls, approvals, and customer quotes.", industry: "Fintech", status: "launched", media: { src: "https://images.unsplash.com/photo-1556740749-887f6717d7e4?auto=format&fit=crop&w=900&q=80", alt: "Compliance dashboard with audit events", aspectRatio: 4 / 3, }, metrics: [ { label: "Audit prep", value: "↓ 9 hrs", tone: "success" }, { label: "Stakeholder reach", value: "6 personas" }, ], primaryAction: { label: "See launch playbook", href: "https://nextbasehq.com/playbooks/audit", icon: , external: true, }, secondaryAction: { label: "Download asset kit", href: "https://nextbasehq.com/library/audit-gallery", external: true, }, publishedAt: "2024-09-18", impactScore: 94, tags: ["scale", "governance"], }, { id: "coda-health", clientName: "Coda Health", headline: "Personalized clinical pilots with instant proof", summary: "Clinical teams curate outcome galleries per specialty, blending physician stories and regulatory guardrails.", industry: "Healthcare", status: "pilot", media: { src: "https://images.unsplash.com/photo-1587502536807-608fa9bcf1df?auto=format&fit=crop&w=900&q=80", alt: "Healthcare professionals in a meeting", aspectRatio: 4 / 3, }, metrics: [ { label: "Pilot approvals", value: "↑ 41%", tone: "brand" }, { label: "Regions", value: "5" }, ], primaryAction: { label: "Open pilot hub", href: "https://nextbasehq.com/hubs/health", external: true, }, secondaryAction: { label: "Share recap", href: "https://nextbasehq.com/share/coda", external: true, }, publishedAt: "2024-07-02", impactScore: 81, tags: ["pilot", "clinical"], }, { id: "emberbank", clientName: "EmberBank", headline: "360° portfolio insights for relationship teams", summary: "Case study cards sync to CRM segments and illustrate key wins, regional compliance, and team shoutouts.", industry: "Financial Services", status: "scale", media: { src: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=900&q=80", alt: "Financial analysts reviewing documents", aspectRatio: 4 / 3, }, metrics: [ { label: "Cross-sell lift", value: "+18%", tone: "success" }, { label: "Personas", value: "7" }, ], primaryAction: { label: "View revenue workspace", href: "https://nextbasehq.com/workspaces/revenue", external: true, }, secondaryAction: { label: "Export summary", href: "https://nextbasehq.com/export/emberbank", external: true, }, publishedAt: "2024-10-03", impactScore: 96, tags: ["scale", "enterprise"], }, { id: "stellar", clientName: "Stellar", headline: "Unified enablement across product launches", summary: "Launch teams keep a rotating hero story fed by feature launches, partner clips, and performance metrics.", industry: "SaaS", status: "beta", media: { src: "https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?auto=format&fit=crop&w=900&q=80", alt: "Product team collaborating over screens", aspectRatio: 4 / 3, }, metrics: [ { label: "Enablement time", value: "↓ 45%", tone: "success" }, { label: "Personas", value: "4" }, ], primaryAction: { label: "Preview enablement flow", href: "https://nextbasehq.com/flows/stellar", external: true, }, publishedAt: "2024-05-11", impactScore: 74, tags: ["beta", "enablement"], }, { id: "circuit", clientName: "Circuit", headline: "AI-assist gallery fueling partner marketing", summary: "Regional partner managers swap local wins with AI-suggested clips, transcripts, and CTA bundles.", industry: "Logistics", status: "launched", media: { src: "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=900&q=80", alt: "Logistics warehouse with digital screens", aspectRatio: 4 / 3, }, metrics: [ { label: "Partner sourced", value: "+24%", tone: "brand" }, { label: "Gallery variants", value: "18" }, ], primaryAction: { label: "Launch partner hub", href: "https://nextbasehq.com/hubs/partners", external: true, }, secondaryAction: { label: "Schedule review", href: "https://nextbasehq.com/review/circuit", external: true, }, publishedAt: "2024-08-27", impactScore: 88, tags: ["launched", "partner"], }, { id: "everhome", clientName: "Everhome", headline: "Human-centered onboarding narrative", summary: "Success managers align testimonials, metrics, and localized content to personalize enterprise rollouts.", industry: "Proptech", status: "pilot", media: { src: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=900&q=80", alt: "Modern living room with connected devices", aspectRatio: 4 / 3, }, metrics: [ { label: "Adoption", value: "89%", tone: "success" }, { label: "Support tickets", value: "↓ 32%", tone: "success" }, ], primaryAction: { label: "View onboarding guide", href: "https://nextbasehq.com/guides/everhome", external: true, }, publishedAt: "2024-06-16", impactScore: 82, tags: ["pilot", "onboarding"], }, ]; export function ExampleGalleryFilterableCaseStudyOneDemo() { const [activeFilters, setActiveFilters] = React.useState(["all"]); const handleFiltersChange = React.useCallback((values: string[]) => { if (values.includes("all") && values.length > 1) { setActiveFilters(["all"]); return; } if (!values.length) { setActiveFilters(["all"]); return; } setActiveFilters(values.filter((value) => value !== "all")); }, []); const computedFilters = React.useMemo(() => { return filters?.map((filter) => ({ ...filter, tone: filter.tone, })); }, []); const filteredCaseStudies = React.useMemo(() => { if (!activeFilters.length || activeFilters.includes("all")) { return caseStudies; } return caseStudies.filter( (item) => item.tags?.some((tag) => activeFilters.includes(tag)) || activeFilters.includes(item.status), ); }, [activeFilters]); return (

Live demo

Filter across launches and industries to see how the gallery adapts.

Toggle persona tags to watch the gallery reflow with pilot, scale, and enterprise case studies.

Spotlight guidance

Use the hero carousel on mobile to cycle through marquee launches without overwhelming scroll depth.

Regional fidelity

Each card maps to locale-aware testimonials and metrics so global teams can clone and localize in minutes.

Impact tracking

Sort by impact to surface the highest converting narratives when aligning with executive sponsors.

Persona libraries

Filters mirror GTM segments so reps can craft decks aligned to industry, size, and stage in under five minutes.

); } export default ExampleGalleryFilterableCaseStudyOneDemo;

Simple