import * as React from "react"; import { ArrowUpRight, BarChart3, BookOpenCheck, Building2, CalendarCheck, CheckCircle2, MousePointerClick, Layers, Link2, Lock, ShieldCheck, Sparkles, } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { IntegrationListCategoryFilteredGridOne } from "@/registry/integration-list-category-filtered-grid-one/integration-list-category-filtered-grid-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 IntegrationListCategoryFilteredGridOne >; type IntegrationListCard = NonNullable[number]; const baseFilters: NonNullable = { categories: [ { id: "automation", label: "Automation & Ops", description: "Orchestrate workflows across GTM systems", count: 38, icon: , }, { id: "crm", label: "CRM & RevOps", description: "Enrich pipeline and revenue engines", count: 26, icon: , }, { id: "analytics", label: "Analytics", description: "Push usage and intent data to warehouses", count: 18, icon: , }, { id: "support", label: "Support & Success", description: "Close the loop for customer teams", count: 22, icon: , }, { id: "finance", label: "Finance & Billing", description: "Sync subscriptions and revenue signals", count: 14, icon: , }, ], featureFilters: [ { id: "bidirectional", label: "Bi-directional sync", description: "Mirror updates instantly across systems", }, { id: "security", label: "Enterprise security", description: "SOC2, SSO, and audit-ready governance", }, { id: "playbooks", label: "Workflow kits", description: "Launch with pre-built automation playbooks", }, { id: "premium", label: "Premium tier", description: "Requires Growth+ plan activation", }, ], relevanceOptions: [ { id: "ranked", label: "Most adopted", description: "Prioritises integrations driving the highest activation", sortKey: "score", direction: "desc", }, { id: "recent", label: "Recently added", description: "Highlight the latest launches to the catalog", sortKey: "recent", direction: "desc", }, { id: "alphabetical", label: "Alphabetical", description: "Scan the directory from A-Z", sortKey: "alphabetical", direction: "asc", }, ], defaultCategoryIds: [], defaultFeatureIds: [], }; const baseIntegrations: IntegrationListCard[] = [ { id: "hubspot", name: "HubSpot CRM", subtitle: "Customer data activation", summary: "Sync lifecycle milestones, product signals, and partner referrals straight into rev ops dashboards.", categoryIds: ["crm", "automation"], featureIds: ["bidirectional", "playbooks"], tier: { label: "Native", tone: "brand" }, depth: "Field-level bi-directional sync with conflict resolution and persona-based scoring.", syncDirection: "Marketing automation ⇄ CRM", syncCadence: "Live webhooks + hourly backfill", capabilities: [ { label: "AI-powered lead scoring", tooltip: "Applies product usage intensity and buying committee sentiment.", }, { label: "Sequenced nurture kits", highlighted: true, tooltip: "Includes 6 pre-built plays for PLG and enterprise buyers.", }, { label: "Custom object sync", premium: true, }, ], proofPoints: [ "31% lift in SQL conversion when paired with Calendly", "Auto-writes call notes back to account timelines", ], securityBadges: ["SOC 2 Type II", "GDPR-ready"], connectCta: { href: "https://nextbasehq.com/integrations/hubspot", label: "Connect HubSpot", icon: , }, learnMore: { href: "https://nextbasehq.com/library/hubspot-ops", icon: , }, score: 97, launchedAt: Date.now() - 1000 * 60 * 60 * 24 * 140, }, { id: "salesforce-data-cloud", name: "Salesforce Data Cloud", subtitle: "Enriched account intelligence", summary: "Push product telemetry into action plans, trigger journey automations, and surface coverage gaps.", categoryIds: ["crm", "analytics"], tier: { label: "Premier", tone: "success" }, depth: "Two-way sync with configurable transformations and sandbox preview.", syncDirection: "Product analytics → CRM → Success", syncCadence: "15-minute streaming + nightly reconciliation", capabilities: [ { label: "Usage heatmaps", tooltip: "Combines seat adoption, feature depth, and license saturation.", highlighted: true, }, { label: "Playbook triggers", tooltip: "Blueprints for renewal, expansion, and churn rescue teams.", }, { label: "Shield-compatible", premium: true, }, ], proofPoints: [ "Forecast pull time drops from 2 hrs to 14 mins", "Shared customer storyboards align GTM + product leadership", ], securityBadges: ["SSO", "Audit trails"], connectCta: { href: "https://nextbasehq.com/integrations/salesforce", label: "Launch Data Cloud", icon: , }, learnMore: { href: "https://nextbasehq.com/library/data-cloud-flight-plan", }, score: 94, launchedAt: Date.now() - 1000 * 60 * 60 * 24 * 45, requiresUpgrade: true, upgradeCopy: "Available on Growth+ plans with Shield compliance package. Talk to sales for enablement.", featureIds: ["bidirectional", "security", "playbooks", "premium"], }, { id: "zendesk", name: "Zendesk Suite", subtitle: "Customer support intelligence", summary: "Blend product heartbeat signals with support queues to proactively orchestrate success rituals.", categoryIds: ["support", "automation"], featureIds: ["bidirectional", "playbooks"], tier: { label: "Native", tone: "brand" }, depth: "Case creation, macros, and SLAs sync with success playbooks.", syncDirection: "Proactive success → Support", syncCadence: "Real-time via webhooks", capabilities: [ { label: "Deflection AI", tooltip: "Routes incidents to knowledge cards before hitting tier one.", }, { label: "Success score overlays", highlighted: true, }, { label: "Premium incident journey", premium: true, }, ], proofPoints: [ "37% faster resolution for expansion accounts", "Escalation rituals align product and support leads weekly", ], securityBadges: ["ISO 27001"], connectCta: { href: "https://nextbasehq.com/integrations/zendesk", label: "Connect Zendesk", icon: , }, learnMore: { href: "https://nextbasehq.com/library/zendesk-success", }, score: 88, launchedAt: Date.now() - 1000 * 60 * 60 * 24 * 70, }, { id: "snowflake", name: "Snowflake", subtitle: "Warehouse activation", summary: "Pipe curated events and health metrics to BI stacks, with dbt models ready for orchestration.", categoryIds: ["analytics"], featureIds: ["security"], tier: { label: "Partner", tone: "muted" }, depth: "Secure data share with column-level governance and replay.", syncDirection: "Product telemetry → Warehouse", syncCadence: "Hourly batch + streaming preview", capabilities: [ { label: "Governed data share", tooltip: "Leverage reader accounts or share into existing org.", highlighted: true, }, { label: "dbt starter project", }, { label: "HIPAA alignment", premium: true, }, ], proofPoints: [ "Analytics teams launch dashboards in 3 days", "Event coverage audit ensures 99.2% capture fidelity", ], securityBadges: ["Field encryption", "Row-level masking"], connectCta: { href: "https://nextbasehq.com/integrations/snowflake", label: "Enable data share", icon: , }, learnMore: { href: "https://nextbasehq.com/library/snowflake-operating-guide", }, score: 91, launchedAt: Date.now() - 1000 * 60 * 60 * 24 * 10, }, { id: "netsuite", name: "NetSuite", subtitle: "Revenue alignment", summary: "Sync ARR, invoices, and collections into adoption dashboards with smart retry logic.", categoryIds: ["finance", "automation"], featureIds: ["bidirectional", "security", "premium"], tier: { label: "Premier", tone: "warning" }, depth: "Ledger events, payment status, and contract metadata sent to RevOps.", syncDirection: "Finance → Product → CRM", syncCadence: "Nightly ledger close + on-demand refresh", capabilities: [ { label: "ARR anomaly alerts", highlighted: true, }, { label: "Revenue schedule sync", }, { label: "SOX controls", premium: true, }, ], proofPoints: [ "Close books 2.4 days faster with automated reconciliations", "Finance sees adoption risk signals inside NetSuite dashboard", ], securityBadges: ["Role-based access"], connectCta: { href: "https://nextbasehq.com/integrations/netsuite", label: "Connect NetSuite", icon: , }, learnMore: { href: "https://nextbasehq.com/library/netsuite-playbook", }, score: 89, launchedAt: Date.now() - 1000 * 60 * 60 * 24 * 18, requiresUpgrade: true, upgradeCopy: "Unlock NetSuite automations by upgrading to the Finance Intelligence add-on.", }, { id: "monday", name: "Monday.com", subtitle: "Launch orchestration", summary: "Pipe launch tasks, status, and retro notes into collaborative roadmaps with focus views.", categoryIds: ["automation", "support"], featureIds: ["playbooks"], tier: { label: "Partner", tone: "muted" }, depth: "Task syncing with owner handoffs and retro capture.", syncDirection: "Product ops ⇄ GTM squads", syncCadence: "Every 5 minutes", capabilities: [ { label: "Launch scorecards", highlighted: true, }, { label: "Retro automations", tooltip: "Auto-share learnings to GTM, product, and leadership.", }, { label: "Shared templates", }, ], proofPoints: [ "Launch retros shipped 4× faster", "Playbooks auto-assign cross-functional owners", ], connectCta: { href: "https://nextbasehq.com/integrations/monday", label: "Sync Monday workspaces", icon: , }, learnMore: { href: "https://nextbasehq.com/library/launch-orchestration", }, score: 82, launchedAt: Date.now() - 1000 * 60 * 60 * 24 * 5, }, ]; export function IntegrationListCategoryFilteredGridOneDemo() { const [segment, setSegment] = React.useState<"product-led" | "finserv">( "product-led", ); const hero = React.useMemo(() => { const baseHero = { eyebrow: "Integration ecosystem", badge: { label: segment === "finserv" ? "Financial services" : "SaaS", tone: segment === "finserv" ? "warning" : "brand", }, title: segment === "finserv" ? "Banking-grade integrations that accelerate compliant onboarding" : "Curate the stack your teams love in weeks, not quarters", description: segment === "finserv" ? "Blend secure client onboarding, risk checkpoints, and account activation signals across your preferred banking systems." : "Launch best-in-class integrations with instant filters, partner stories, and trust badges that keep prospects moving forward.", supportingCopy: segment === "finserv" ? "Enable dedicated compliance playbooks with encryption, audit trails, and consent orchestration baked in." : "Empower GTM, product, and ops teams with ecosystem insights, curated workflows, and security assurances tailored to every buyer persona.", primaryCta: { href: "https://nextbasehq.com/demo", label: "Book an ecosystem tour", icon: , }, secondaryCta: { href: "https://nextbasehq.com/integration-catalog", label: "Browse catalog", variant: "outline", }, fastFacts: segment === "finserv" ? [ { id: "coverage", label: "mission critical workflows", value: "65+", icon: , tone: "warning", }, { id: "compliance", label: "audit trails captured", value: "12k/mo", icon: , tone: "success", }, { id: "customers", label: "regulated orgs live", value: "280", icon: , tone: "muted", }, ] : [ { id: "integrations", label: "ready-to-use integrations", value: "120+", icon: , tone: "brand", }, { id: "uptime", label: "ecosystem uptime", value: "99.99%", icon: , tone: "success", }, { id: "roi", label: "faster launches", value: "4x", icon: , tone: "muted", }, ], } satisfies ComponentProps["hero"]; return baseHero; }, [segment]); const filters = React.useMemo>(() => { if (segment === "finserv") { return { ...baseFilters, defaultCategoryIds: ["finance"], defaultFeatureIds: ["security"], }; } return { ...baseFilters, defaultCategoryIds: [], defaultFeatureIds: [], }; }, [segment]); const integrations = React.useMemo(() => { if (segment === "finserv") { return baseIntegrations.map((integration) => { if (integration.id === "hubspot") { return { ...integration, summary: "Push KYC state, treasury usage, and relationship intel into rev ops with adaptive controls.", proofPoints: [ "Regulated teams shorten onboarding by 19 days", "Consent ledger sync keeps bank examiners audit-ready", ], securityBadges: ["SOC 2 Type II", "FFIEC-aligned"], score: 95, } satisfies IntegrationListCard; } if (integration.id === "snowflake") { return { ...integration, proofPoints: [ "Risk teams monitor suspicious patterns in real-time", "Encryption and masking templates for regulated data domains", ], score: 92, } satisfies IntegrationListCard; } if (integration.id === "netsuite") { return { ...integration, proofPoints: [ "Instantly reconcile ACH, wires, and card payouts", "Automated audit evidence bundle for quarterly reviews", ], score: 93, } satisfies IntegrationListCard; } return integration; }); } return baseIntegrations; }, [segment]); return (

Demo controls

Toggle the integration narrative to see category counts, filters, and copy adapt.

Pro tip Buyers see their filter state persist across sessions. We also surface recent searches and partner requests to accelerate conversion.

); } export default IntegrationListCategoryFilteredGridOneDemo;

Simple