{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "content-11",
  "title": "Content 11",
  "description": "A billing overview split with a dashboard preview card and two feature highlights, built for the app-shell preset.",
  "dependencies": [
    "motion",
    "react-wrap-balancer"
  ],
  "registryDependencies": [
    "@flx/dynamic-icon",
    "card",
    "badge"
  ],
  "files": [
    {
      "path": "registry/blocks/content/content-11/content-11.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { icons } from 'lucide-react'\nimport { motion, useReducedMotion, type Variants } from 'motion/react'\nimport Balancer from 'react-wrap-balancer'\n\nimport { cn } from '@/lib/utils'\n\nimport { Icon } from '../../shared/dynamic-icon'\nimport { DashboardDemo } from './dashboard-demo'\n\nexport interface Content11Feature {\n  icon: string\n  title: string\n  description: string\n}\n\nexport interface Content11Props {\n  title: string\n  description?: string\n  feature1: Content11Feature\n  feature2: Content11Feature\n  media?: React.ReactNode\n  variant?: 'standard' | 'compact'\n  animation?: 'none' | 'subtle'\n}\n\nconst variantStyles = {\n  standard: {\n    section: 'py-16 sm:py-24',\n    grid: 'gap-10 lg:gap-14',\n    title: 'text-2xl sm:text-3xl',\n    description: 'max-w-sm text-sm sm:text-base',\n    header: 'gap-4',\n    frame: 'h-72 sm:h-80 lg:h-[22rem]',\n    peek: 'absolute top-6 left-6 w-[125%] max-w-none overflow-hidden rounded-2xl',\n    features: 'gap-4 sm:gap-5',\n    featureCard: 'gap-2 p-6',\n    icon: 'size-5',\n  },\n  compact: {\n    section: 'py-12 sm:py-16',\n    grid: 'gap-8 lg:gap-10',\n    title: 'text-xl sm:text-2xl',\n    description: 'max-w-xs text-sm',\n    header: 'gap-3',\n    frame: 'h-60 sm:h-64 lg:h-72',\n    peek: 'absolute top-4 left-4 w-[120%] max-w-none overflow-hidden rounded-xl',\n    features: 'gap-3 sm:gap-4',\n    featureCard: 'gap-2 p-5',\n    icon: 'size-4',\n  },\n} as const\n\nconst container: Variants = {\n  hidden: {},\n  visible: { transition: { staggerChildren: 0.1, delayChildren: 0.05 } },\n}\n\nconst item: Variants = {\n  hidden: { opacity: 0, y: 12, filter: 'blur(6px)' },\n  visible: {\n    opacity: 1,\n    y: 0,\n    filter: 'blur(0px)',\n    transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] },\n  },\n}\n\nconst mediaItem: Variants = {\n  hidden: { opacity: 0, scale: 0.97, filter: 'blur(8px)' },\n  visible: {\n    opacity: 1,\n    scale: 1,\n    filter: 'blur(0px)',\n    transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] },\n  },\n}\n\nfunction FeatureCard({\n  feature,\n  animate,\n  className,\n  iconClassName,\n}: Readonly<{\n  feature: Content11Feature\n  animate: boolean\n  className: string\n  iconClassName: string\n}>) {\n  const cardClassName = cn(\n    'bg-secondary/70 dark:bg-secondary/30 flex h-full flex-col rounded-3xl',\n    className,\n  )\n\n  const content = (\n    <>\n      {feature.icon && (\n        <Icon\n          name={feature.icon as keyof typeof icons}\n          className={cn('text-foreground', iconClassName)}\n        />\n      )}\n      <h3 className=\"text-foreground text-sm font-semibold\">{feature.title}</h3>\n      <p className=\"text-muted-foreground text-sm leading-relaxed\">\n        <Balancer>{feature.description}</Balancer>\n      </p>\n    </>\n  )\n\n  if (!animate) return <div className={cardClassName}>{content}</div>\n\n  return (\n    <motion.div variants={item} className={cardClassName}>\n      {content}\n    </motion.div>\n  )\n}\n\nfunction Reveal({\n  active,\n  variants,\n  className,\n  children,\n}: Readonly<{\n  active: boolean\n  variants?: Variants\n  className?: string\n  children: React.ReactNode\n}>) {\n  if (!active) return <div className={className}>{children}</div>\n\n  return (\n    <motion.div variants={variants ?? item} className={className}>\n      {children}\n    </motion.div>\n  )\n}\n\nexport function Content11({\n  title,\n  description,\n  feature1,\n  feature2,\n  media = <DashboardDemo />,\n  variant = 'standard',\n  animation = 'none',\n}: Readonly<Content11Props>) {\n  const reduce = useReducedMotion()\n  const animate = animation === 'subtle' && !reduce\n  const vs = variantStyles[variant]\n\n  const titleElement = title && (\n    <h2\n      className={cn(\n        'text-foreground font-semibold tracking-tight text-balance',\n        vs.title,\n      )}\n    >\n      <Balancer>{title}</Balancer>\n    </h2>\n  )\n\n  const descriptionElement = description && (\n    <p className={cn('text-muted-foreground', vs.description)}>\n      <Balancer>{description}</Balancer>\n    </p>\n  )\n\n  const mediaElement = media && (\n    <div\n      className={cn(\n        'bg-secondary/70 dark:bg-secondary/30 relative w-full overflow-hidden rounded-3xl',\n        vs.frame,\n      )}\n    >\n      <div className={cn(vs.peek, '*:w-full')}>{media}</div>\n    </div>\n  )\n\n  const feature1Element = feature1 && (\n    <FeatureCard\n      feature={feature1}\n      animate={animate}\n      className={vs.featureCard}\n      iconClassName={vs.icon}\n    />\n  )\n\n  const feature2Element = feature2 && (\n    <FeatureCard\n      feature={feature2}\n      animate={animate}\n      className={vs.featureCard}\n      iconClassName={vs.icon}\n    />\n  )\n\n  const featuresElement = (\n    <div className={cn('flex flex-col', vs.features)}>\n      {feature1Element}\n      {feature2Element}\n    </div>\n  )\n\n  return (\n    <section className=\"bg-background w-full\">\n      <motion.div\n        className={cn(\n          'mx-auto flex max-w-6xl flex-col px-6',\n          vs.section,\n          vs.grid,\n        )}\n        variants={animate ? container : undefined}\n        initial={animate ? 'hidden' : false}\n        whileInView={animate ? 'visible' : undefined}\n        viewport={{ once: true, margin: '-80px' }}\n      >\n        <Reveal\n          active={animate}\n          className={cn('flex max-w-xl flex-col', vs.header)}\n        >\n          {titleElement}\n          {descriptionElement}\n        </Reveal>\n\n        <div className=\"grid grid-cols-1 items-stretch gap-8 lg:grid-cols-[1.4fr_1fr] lg:gap-6\">\n          <Reveal active={animate} variants={mediaItem}>\n            {mediaElement}\n          </Reveal>\n          {featuresElement}\n        </div>\n      </motion.div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/blocks/content/content-11/content-11.tsx"
    },
    {
      "path": "registry/blocks/content/content-11/dashboard-demo.tsx",
      "content": "import { ArrowDownRight, ArrowUpRight, Mail, MessageSquare, Phone } from 'lucide-react'\n\nimport { Card } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\nconst stats = [\n  { label: 'Outstanding balance', value: '$1,842,900', delta: '-4.2%', trend: 'down' as const },\n  { label: 'Active accounts', value: '312', delta: '+12', trend: 'up' as const },\n  { label: 'Recovery rate', value: '74%', delta: '+3.1%', trend: 'up' as const },\n  { label: 'Avg. resolution', value: '9.6 days', delta: '-1.8d', trend: 'down' as const },\n]\n\nconst channels = [\n  { icon: Mail, label: 'Email', sent: '1,240 sent', rate: '21.3%' },\n  { icon: MessageSquare, label: 'SMS', sent: '860 sent', rate: '26.5%' },\n  { icon: Phone, label: 'Phone', sent: '410 sent', rate: '31.2%' },\n]\n\nconst timeline = [\n  { title: 'Payment posted', meta: 'Meridian Co · $12,400' },\n  { title: 'Reminder sequence completed', meta: 'Harlow Group' },\n  { title: 'New accounts imported', meta: '380 records' },\n  { title: 'Collection plan started', meta: 'Ridgeline LLC' },\n]\n\nexport function DashboardDemo() {\n  return (\n    <Card className=\"border-border/40 w-full gap-0 overflow-hidden rounded-none p-0 shadow-sm\">\n      <div className=\"border-border/40 flex items-center justify-between gap-3 border-b px-5 py-4 sm:px-6\">\n        <div>\n          <h3 className=\"text-foreground text-sm font-semibold tracking-tight\">\n            Collections\n          </h3>\n          <p className=\"text-muted-foreground mt-0.5 text-xs\">\n            How every account is trending this month\n          </p>\n        </div>\n      </div>\n\n      <div className=\"grid grid-cols-2 gap-3 px-5 py-4 sm:grid-cols-4 sm:px-6\">\n        {stats.map((stat) => (\n          <div key={stat.label} className=\"border-border/40 min-w-0 rounded-lg border p-3\">\n            <p className=\"text-muted-foreground truncate text-[11px]\">\n              {stat.label}\n            </p>\n            <p className=\"text-foreground mt-1 text-base font-semibold tabular-nums\">\n              {stat.value}\n            </p>\n            <p\n              className={cn(\n                'mt-1 flex items-center gap-0.5 text-[11px] tabular-nums',\n                stat.trend === 'up'\n                  ? 'text-emerald-600 dark:text-emerald-400'\n                  : 'text-muted-foreground',\n              )}\n            >\n              {stat.trend === 'up' ? (\n                <ArrowUpRight className=\"size-3\" />\n              ) : (\n                <ArrowDownRight className=\"size-3\" />\n              )}\n              {stat.delta}\n            </p>\n          </div>\n        ))}\n      </div>\n\n      <div className=\"border-border/40 grid grid-cols-1 gap-6 border-t px-5 py-5 sm:grid-cols-2 sm:gap-0 sm:divide-x sm:divide-border/40 sm:px-6\">\n        <div className=\"sm:pr-6\">\n          <h4 className=\"text-foreground text-xs font-medium\">\n            Channel mix\n          </h4>\n          <div className=\"divide-border/40 mt-3 flex flex-col divide-y\">\n            {channels.map(({ icon: ChannelIcon, label, sent, rate }) => (\n              <div\n                key={label}\n                className=\"flex items-center gap-3 py-2.5 first:pt-0 last:pb-0\"\n              >\n                <ChannelIcon className=\"text-foreground/60 size-4 shrink-0\" />\n                <div className=\"min-w-0 flex-1\">\n                  <p className=\"text-foreground text-xs font-medium\">\n                    {label}\n                  </p>\n                  <p className=\"text-muted-foreground text-[11px]\">{sent}</p>\n                </div>\n                <span className=\"text-foreground text-xs font-medium tabular-nums\">\n                  {rate}\n                </span>\n              </div>\n            ))}\n          </div>\n        </div>\n\n        <div className=\"sm:pl-6\">\n          <h4 className=\"text-foreground text-xs font-medium\">Timeline</h4>\n          <div className=\"relative mt-3 flex flex-col gap-3.5 pl-4\">\n            <div className=\"bg-border/50 absolute top-1 bottom-1 left-[3px] w-px\" />\n            {timeline.map((entry) => (\n              <div key={entry.title} className=\"relative\">\n                <span className=\"bg-foreground/40 absolute top-1 -left-4 size-1.5 rounded-full\" />\n                <p className=\"text-foreground text-xs font-medium\">\n                  {entry.title}\n                </p>\n                <p className=\"text-muted-foreground text-[11px]\">\n                  {entry.meta}\n                </p>\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n    </Card>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/blocks/content/content-11/dashboard-demo.tsx"
    },
    {
      "path": "registry/blocks/content/content-11/content-11-example.tsx",
      "content": "import { Content11, type Content11Props } from './content-11'\n\nexport const values = {\n  title: 'Every account, one place to watch it move',\n  description:\n    'Balances, campaigns, and payments stay in sync automatically, so your team spends less time reconciling and more time collecting.',\n  variant: 'standard',\n  animation: 'subtle',\n  feature1: {\n    icon: 'LayoutDashboard',\n    title: 'One view for every account',\n    description:\n      'Balances, payments, and campaign activity live in a single dashboard instead of scattered spreadsheets.',\n  },\n  feature2: {\n    icon: 'Sparkles',\n    title: 'Insights that update themselves',\n    description:\n      'Every record is grouped by status, channel, and performance automatically, so trends surface before you go looking for them.',\n  },\n} satisfies Content11Props\n\nexport function Content11Example() {\n  return (\n    <Content11\n      title={values.title}\n      description={values.description}\n      feature1={values.feature1}\n      feature2={values.feature2}\n      variant={values.variant}\n      animation={values.animation}\n    />\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/blocks/content/content-11/content-11-example.tsx"
    }
  ],
  "meta": {
    "iframeHeight": 950
  },
  "type": "registry:block"
}