{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-02",
  "title": "Hero 02",
  "description": "A left-aligned serif hero with a media panel: an image backdrop with a floating dashboard mockup on top.",
  "dependencies": [
    "react-wrap-balancer",
    "motion",
    "lucide-react"
  ],
  "registryDependencies": [
    "@flx/cta",
    "card",
    "badge",
    "avatar",
    "separator"
  ],
  "files": [
    {
      "path": "registry/blocks/hero/hero-02/hero-02.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { motion, useReducedMotion, type Variants } from 'motion/react'\nimport Balancer from 'react-wrap-balancer'\n\nimport { cn } from '@/lib/utils'\n\nimport { Cta, type CtaProps } from '../../shared/cta'\nimport { DashboardDemo } from './dashboard-demo'\n\nexport interface Hero02Props {\n  title: string\n  titleLine2?: string\n  description: string\n  washImage: string\n  animation?: 'none' | 'subtle'\n  primaryCTA: CtaProps\n  variant?: 'standard' | 'compact'\n}\n\nconst variantStyles = {\n  standard: {\n    section: 'py-20 sm:py-28',\n    title: 'text-3xl sm:text-4xl md:text-5xl',\n    description: 'max-w-md text-sm sm:text-base',\n    header: 'gap-5',\n    content: 'gap-14 sm:gap-20',\n  },\n  compact: {\n    section: 'py-14 sm:py-20',\n    title: 'text-2xl sm:text-3xl md:text-4xl',\n    description: 'max-w-sm text-sm',\n    header: 'gap-4',\n    content: 'gap-10 sm:gap-14',\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, y: 24, filter: 'blur(8px)' },\n  visible: {\n    opacity: 1,\n    y: 0,\n    filter: 'blur(0px)',\n    transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] },\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 Hero02({\n  title,\n  titleLine2,\n  description,\n  washImage,\n  animation = 'none',\n  primaryCTA,\n  variant = 'standard',\n}: Readonly<Hero02Props>) {\n  const reduce = useReducedMotion()\n  const animate = animation === 'subtle' && !reduce\n  const vs = variantStyles[variant]\n\n  const titleElement = title && (\n    <h1\n      className={cn(\n        'text-foreground font-serif font-normal tracking-tight text-balance',\n        vs.title,\n      )}\n    >\n      <Balancer>{title}</Balancer>\n      {titleLine2 && (\n        <>\n          <br />\n          <Balancer>{titleLine2}</Balancer>\n        </>\n      )}\n    </h1>\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 ctaElement = <Cta cta={primaryCTA} />\n\n  const mediaElement = (\n    <div className=\"relative w-full overflow-hidden rounded-md outline outline-black/10 dark:outline-white/10\">\n      {washImage && (\n        <img\n          src={washImage}\n          alt=\"\"\n          aria-hidden\n          className=\"absolute inset-0 size-full object-cover\"\n        />\n      )}\n      <div className=\"from-background/30 via-background/10 to-background/40 absolute inset-0 bg-gradient-to-b\" />\n      <div className=\"relative flex items-center justify-center px-6 py-12 sm:px-12 sm:py-16\">\n        <DashboardDemo />\n      </div>\n    </div>\n  )\n\n  return (\n    <section className=\"bg-background relative isolate w-full overflow-hidden\">\n      <motion.div\n        className={cn(\n          'relative z-10 mx-auto flex max-w-6xl flex-col px-6',\n          vs.section,\n          vs.content,\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-2xl flex-col items-start', vs.header)}\n        >\n          {titleElement}\n          {descriptionElement}\n          {ctaElement}\n        </Reveal>\n\n        <Reveal active={animate} variants={mediaItem} className=\"w-full\">\n          {mediaElement}\n        </Reveal>\n      </motion.div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/blocks/hero/hero-02/hero-02.tsx"
    },
    {
      "path": "registry/blocks/hero/hero-02/hero-02-example.tsx",
      "content": "import { Hero02, type Hero02Props } from './hero-02'\n\nexport const values = {\n  title: 'Every metric that matters,',\n  titleLine2: 'in one clear view.',\n  description:\n    'Track revenue, users, and activity in real time, with no setup and no spreadsheets.',\n  washImage:\n    'https://images.unsplash.com/photo-1578301978018-3005759f48f7?q=80&w=1144&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n  animation: 'subtle',\n  primaryCTA: {\n    ctaEnabled: true,\n    text: 'Start free',\n    link: '',\n    variant: 'default',\n    size: 'default',\n  },\n} satisfies Hero02Props\n\nexport function Hero02Example() {\n  return <Hero02 {...values} />\n}\n",
      "type": "registry:component",
      "target": "components/flx/blocks/hero/hero-02/hero-02-example.tsx"
    },
    {
      "path": "registry/blocks/hero/hero-02/dashboard-demo.tsx",
      "content": "import {\n  Activity,\n  BarChart3,\n  Bell,\n  LayoutGrid,\n  Search,\n  Settings,\n  Users,\n} from 'lucide-react'\n\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\n\nconst nav = [\n  { icon: LayoutGrid, label: 'Overview', active: true },\n  { icon: BarChart3, label: 'Reports', active: false },\n  { icon: Users, label: 'Customers', active: false },\n  { icon: Activity, label: 'Activity', active: false },\n  { icon: Settings, label: 'Settings', active: false },\n]\n\nconst stats = [\n  { label: 'Revenue', value: '$48.2k', trend: '+12.4%', up: true },\n  { label: 'Active users', value: '2,318', trend: '+4.1%', up: true },\n  { label: 'Conversion', value: '3.6%', trend: '+0.8%', up: true },\n  { label: 'Churn', value: '1.4%', trend: '-2.0%', up: false },\n]\n\nconst bars = [42, 58, 36, 64, 48, 72, 55, 80, 61, 88, 70, 94]\n\nconst activity = [\n  {\n    src: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=64&q=80',\n    name: 'James Doe',\n    action: 'upgraded to Pro',\n    time: '2m',\n  },\n  {\n    src: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=64&q=80',\n    name: 'Sara Lin',\n    action: 'invited 3 members',\n    time: '18m',\n  },\n  {\n    src: 'https://images.unsplash.com/photo-1633332755192-727a05c4013d?w=64&q=80',\n    name: 'Marcus Vale',\n    action: 'connected Stripe',\n    time: '1h',\n  },\n]\n\nexport function DashboardDemo() {\n  return (\n    <div className=\"relative w-full max-w-4xl\">\n      <Card className=\"bg-card w-full gap-0 overflow-hidden p-0 shadow-2xl outline outline-black/10 dark:outline-white/10\">\n        {/* Window chrome */}\n        <div className=\"flex items-center gap-2 border-b px-3 py-2.5\">\n          <div className=\"flex shrink-0 gap-1.5\">\n            <span className=\"size-2.5 rounded-full bg-red-400/70\" />\n            <span className=\"size-2.5 rounded-full bg-amber-400/70\" />\n            <span className=\"size-2.5 rounded-full bg-emerald-400/70\" />\n          </div>\n          <div className=\"text-muted-foreground bg-muted mx-auto flex h-6 w-full max-w-56 min-w-0 items-center gap-1.5 rounded-md px-2 text-[10px]\">\n            <Search className=\"size-3 shrink-0\" />\n            <span className=\"truncate\">app.acme.com/overview</span>\n          </div>\n          <Avatar className=\"size-6 shrink-0\">\n            <AvatarImage\n              src=\"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=64&q=80\"\n              alt=\"\"\n            />\n            <AvatarFallback className=\"text-[9px]\">JD</AvatarFallback>\n          </Avatar>\n        </div>\n\n        <div className=\"flex\">\n          {/* Sidebar */}\n          <div className=\"hidden w-44 shrink-0 flex-col gap-1 border-r p-3 sm:flex\">\n            <div className=\"mb-2 flex items-center gap-2 px-1\">\n              <div className=\"bg-primary/85 size-6 rounded-lg\" />\n              <span className=\"text-sm font-semibold tracking-tight\">Acme</span>\n            </div>\n            {nav.map(({ icon: Icon, label, active }) => (\n              <div\n                key={label}\n                className={`flex items-center gap-2 rounded-lg px-2 py-1.5 text-xs ${\n                  active\n                    ? 'bg-muted text-foreground font-medium'\n                    : 'text-muted-foreground'\n                }`}\n              >\n                <Icon className=\"size-3.5 shrink-0\" />\n                <span className=\"truncate\">{label}</span>\n              </div>\n            ))}\n          </div>\n\n          {/* Main */}\n          <div className=\"flex min-w-0 flex-1 flex-col gap-3 p-3 sm:p-4\">\n            {/* Header */}\n            <div className=\"flex items-center justify-between gap-2\">\n              <div className=\"flex min-w-0 flex-col gap-0.5\">\n                <span className=\"truncate text-sm font-semibold tracking-tight\">\n                  Overview\n                </span>\n                <span className=\"text-muted-foreground truncate text-[10px]\">\n                  Last 30 days · updated 2m ago\n                </span>\n              </div>\n              <div className=\"flex shrink-0 items-center gap-1.5\">\n                <Button size=\"xs\" variant=\"outline\">\n                  Export\n                </Button>\n                <Button size=\"xs\">New report</Button>\n              </div>\n            </div>\n\n            {/* KPI row */}\n            <div className=\"grid grid-cols-2 gap-2 lg:grid-cols-4\">\n              {stats.map((s) => (\n                <div key={s.label} className=\"min-w-0 rounded-lg border p-2.5\">\n                  <span className=\"text-muted-foreground block truncate text-[9px]\">\n                    {s.label}\n                  </span>\n                  <div className=\"mt-1 flex flex-wrap items-baseline justify-between gap-x-1\">\n                    <span className=\"text-sm font-semibold tabular-nums\">\n                      {s.value}\n                    </span>\n                    <span\n                      className={`text-[9px] font-medium tabular-nums ${\n                        s.up\n                          ? 'text-emerald-600 dark:text-emerald-400'\n                          : 'text-red-500 dark:text-red-400'\n                      }`}\n                    >\n                      {s.trend}\n                    </span>\n                  </div>\n                </div>\n              ))}\n            </div>\n\n            {/* Chart */}\n            <div className=\"rounded-lg border p-3\">\n              <div className=\"flex items-center justify-between gap-2\">\n                <div className=\"flex min-w-0 flex-col gap-0.5\">\n                  <span className=\"truncate text-xs font-medium\">\n                    Monthly revenue\n                  </span>\n                  <span className=\"text-muted-foreground truncate text-[9px]\">\n                    $48,240 total\n                  </span>\n                </div>\n                <span className=\"text-muted-foreground flex shrink-0 items-center gap-1 text-[9px]\">\n                  <span className=\"bg-primary/80 size-1.5 rounded-full\" />\n                  This year\n                </span>\n              </div>\n\n              <div className=\"mt-3 flex h-20 items-end gap-1.5\">\n                {bars.map((h, i) => (\n                  <div\n                    key={i}\n                    className=\"bg-primary/70 min-h-0.5 flex-1 rounded-sm\"\n                    style={{ height: `${h}%` }}\n                  />\n                ))}\n              </div>\n            </div>\n\n            {/* Recent activity */}\n            <div className=\"rounded-lg border p-3\">\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-xs font-medium\">Recent activity</span>\n                <Badge variant=\"secondary\" className=\"text-[9px]\">\n                  Live\n                </Badge>\n              </div>\n              <div className=\"mt-2 flex flex-col\">\n                {activity.map((a, i) => (\n                  <div key={a.name}>\n                    {i > 0 && <Separator className=\"my-2\" />}\n                    <div className=\"flex items-center gap-2\">\n                      <Avatar className=\"size-6 shrink-0\">\n                        <AvatarImage src={a.src} alt=\"\" />\n                        <AvatarFallback className=\"text-[9px]\">\n                          {a.name[0]}\n                        </AvatarFallback>\n                      </Avatar>\n                      <span className=\"min-w-0 flex-1 truncate text-[11px]\">\n                        <span className=\"font-medium\">{a.name}</span>\n                        <span className=\"text-muted-foreground\">\n                          {' '}\n                          {a.action}\n                        </span>\n                      </span>\n                      <span className=\"text-muted-foreground shrink-0 text-[9px] tabular-nums\">\n                        {a.time}\n                      </span>\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </div>\n          </div>\n        </div>\n      </Card>\n\n      {/* Floating notification */}\n      <div className=\"absolute right-1 bottom-1 max-w-[calc(100%-0.5rem)] sm:-right-4 sm:-bottom-4\">\n        <Card className=\"flex-row items-center gap-2.5 p-2.5 shadow-lg\">\n          <div className=\"bg-primary/15 text-primary relative flex size-8 shrink-0 items-center justify-center rounded-lg\">\n            <Bell className=\"size-4\" />\n            <span className=\"border-card absolute -top-0.5 -right-0.5 size-2 rounded-full border-2 bg-emerald-500\" />\n          </div>\n          <div className=\"flex min-w-0 flex-col\">\n            <span className=\"truncate text-xs leading-tight font-medium\">\n              Payment received\n            </span>\n            <span className=\"text-muted-foreground truncate text-[10px] leading-tight\">\n              $1,290 from Acme Inc.\n            </span>\n          </div>\n          <Badge variant=\"secondary\" className=\"ml-1 shrink-0 text-[10px]\">\n            +$1.2k\n          </Badge>\n        </Card>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/blocks/hero/hero-02/dashboard-demo.tsx"
    }
  ],
  "meta": {
    "iframeHeight": 1300
  },
  "type": "registry:block"
}