4e: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 4f: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 50:T15fb,'use client' import * as React from 'react' import { icons } from 'lucide-react' import { motion, useReducedMotion, type Variants } from 'motion/react' import Balancer from 'react-wrap-balancer' import { cn } from '@/lib/utils' import { Icon } from '../../shared/dynamic-icon' import { DashboardDemo } from './dashboard-demo' export interface Content11Feature { icon: string title: string description: string } export interface Content11Props { title: string description?: string feature1: Content11Feature feature2: Content11Feature media?: React.ReactNode variant?: 'standard' | 'compact' animation?: 'none' | 'subtle' } const variantStyles = { standard: { section: 'py-16 sm:py-24', grid: 'gap-10 lg:gap-14', title: 'text-2xl sm:text-3xl', description: 'max-w-sm text-sm sm:text-base', header: 'gap-4', frame: 'h-72 sm:h-80 lg:h-[22rem]', peek: 'absolute top-6 left-6 w-[125%] max-w-none overflow-hidden rounded-2xl', features: 'gap-4 sm:gap-5', featureCard: 'gap-2 p-6', icon: 'size-5', }, compact: { section: 'py-12 sm:py-16', grid: 'gap-8 lg:gap-10', title: 'text-xl sm:text-2xl', description: 'max-w-xs text-sm', header: 'gap-3', frame: 'h-60 sm:h-64 lg:h-72', peek: 'absolute top-4 left-4 w-[120%] max-w-none overflow-hidden rounded-xl', features: 'gap-3 sm:gap-4', featureCard: 'gap-2 p-5', icon: 'size-4', }, } as const const container: Variants = { hidden: {}, visible: { transition: { staggerChildren: 0.1, delayChildren: 0.05 } }, } const item: Variants = { hidden: { opacity: 0, y: 12, filter: 'blur(6px)' }, visible: { opacity: 1, y: 0, filter: 'blur(0px)', transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] }, }, } const mediaItem: Variants = { hidden: { opacity: 0, scale: 0.97, filter: 'blur(8px)' }, visible: { opacity: 1, scale: 1, filter: 'blur(0px)', transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] }, }, } function FeatureCard({ feature, animate, className, iconClassName, }: Readonly<{ feature: Content11Feature animate: boolean className: string iconClassName: string }>) { const cardClassName = cn( 'bg-secondary/70 dark:bg-secondary/30 flex h-full flex-col rounded-3xl', className, ) const content = ( <> {feature.icon && ( )}

{feature.title}

{feature.description}

) if (!animate) return

{content}

return ( {content} ) } function Reveal({ active, variants, className, children, }: Readonly<{ active: boolean variants?: Variants className?: string children: React.ReactNode }>) { if (!active) return

{children}

return ( {children} ) } export function Content11({ title, description, feature1, feature2, media = , variant = 'standard', animation = 'none', }: Readonly) { const reduce = useReducedMotion() const animate = animation === 'subtle' && !reduce const vs = variantStyles[variant] const titleElement = title && (

{title}

) const descriptionElement = description && (

{description}

) const mediaElement = media && (

{media}

) const feature1Element = feature1 && ( ) const feature2Element = feature2 && ( ) const featuresElement = (

{feature1Element} {feature2Element}

) return (

{titleElement} {descriptionElement}

{mediaElement} {featuresElement}

) } 51:T11ab,import { ArrowDownRight, ArrowUpRight, Mail, MessageSquare, Phone } from 'lucide-react' import { Card } from '@/components/ui/card' import { cn } from '@/lib/utils' const stats = [ { label: 'Outstanding balance', value: '$1,842,900', delta: '-4.2%', trend: 'down' as const }, { label: 'Active accounts', value: '312', delta: '+12', trend: 'up' as const }, { label: 'Recovery rate', value: '74%', delta: '+3.1%', trend: 'up' as const }, { label: 'Avg. resolution', value: '9.6 days', delta: '-1.8d', trend: 'down' as const }, ] const channels = [ { icon: Mail, label: 'Email', sent: '1,240 sent', rate: '21.3%' }, { icon: MessageSquare, label: 'SMS', sent: '860 sent', rate: '26.5%' }, { icon: Phone, label: 'Phone', sent: '410 sent', rate: '31.2%' }, ] const timeline = [ { title: 'Payment posted', meta: 'Meridian Co · $12,400' }, { title: 'Reminder sequence completed', meta: 'Harlow Group' }, { title: 'New accounts imported', meta: '380 records' }, { title: 'Collection plan started', meta: 'Ridgeline LLC' }, ] export function DashboardDemo() { return (

Collections

How every account is trending this month

{stats.map((stat) => (

{stat.label}

{stat.value}

{stat.trend === 'up' ? ( ) : ( )} {stat.delta}

))}

Channel mix

{channels.map(({ icon: ChannelIcon, label, sent, rate }) => (

{label}

{sent}

{rate}

))}

Timeline

{timeline.map((entry) => (

{entry.title}

{entry.meta}

))}

) } 52:T44a,import { Content11, type Content11Props } from './content-11' export const values = { title: 'Every account, one place to watch it move', description: 'Balances, campaigns, and payments stay in sync automatically, so your team spends less time reconciling and more time collecting.', variant: 'standard', animation: 'subtle', feature1: { icon: 'LayoutDashboard', title: 'One view for every account', description: 'Balances, payments, and campaign activity live in a single dashboard instead of scattered spreadsheets.', }, feature2: { icon: 'Sparkles', title: 'Insights that update themselves', description: 'Every record is grouped by status, channel, and performance automatically, so trends surface before you go looking for them.', }, } satisfies Content11Props export function Content11Example() { return ( ) } 4d:["$","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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}],["$","li","react-wrap-balancer",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-wrap-balancer","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":"react-wrap-balancer"}]]}]}]]}],["$","$L4e",null,{"namespace":"@flx","registryDependencies":["@flx/dynamic-icon","card","badge"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/blocks/content/content-11/content-11.tsx","content":"$50","type":"registry:component","target":"components/flx/blocks/content/content-11/content-11.tsx"},{"path":"registry/blocks/content/content-11/dashboard-demo.tsx","content":"$51","type":"registry:component","target":"components/flx/blocks/content/content-11/dashboard-demo.tsx"},{"path":"registry/blocks/content/content-11/content-11-example.tsx","content":"$52","type":"registry:component","target":"components/flx/blocks/content/content-11/content-11-example.tsx"}],"className":"h-[70svh] min-h-80"}]]}]