{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-01",
  "title": "Hero 01",
  "description": "A centered serif hero with a soft gradient wash, pill CTA, and a floating integration cloud.",
  "dependencies": [
    "react-wrap-balancer",
    "motion"
  ],
  "registryDependencies": [
    "@flx/cta"
  ],
  "files": [
    {
      "path": "registry/blocks/hero/hero-01/hero-01.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 { IntegrationCloud } from './integration-cloud'\n\nexport interface Hero01Props {\n  title: string\n  titleLine2?: string\n  description: string\n  washImage: string\n  animation?: 'none' | 'subtle'\n  primaryCTA: CtaProps\n  integrationRows: string[][]\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    content: 'gap-8',\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    content: 'gap-6',\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\nfunction Reveal({\n  active,\n  className,\n  children,\n}: Readonly<{\n  active: boolean\n  className?: string\n  children: React.ReactNode\n}>) {\n  if (!active) return <div className={className}>{children}</div>\n\n  return (\n    <motion.div variants={item} className={className}>\n      {children}\n    </motion.div>\n  )\n}\n\nexport function Hero01({\n  title,\n  titleLine2,\n  description,\n  washImage,\n  animation = 'none',\n  primaryCTA,\n  integrationRows,\n  variant = 'standard',\n}: Readonly<Hero01Props>) {\n  const reduce = useReducedMotion()\n  const animate = animation === 'subtle' && !reduce\n  const vs = variantStyles[variant]\n\n  const backgroundElement = washImage && (\n    <div\n      aria-hidden\n      className=\"pointer-events-none absolute inset-x-0 top-0 z-0 mx-auto h-full w-full mask-t-from-60% mask-t-to-90% mask-b-from-75% mask-b-to-85% mask-radial-[70%_70%] mask-radial-from-60% mask-radial-to-90% mask-radial-at-top opacity-50 md:mask-radial-[70%_90%] dark:opacity-10\"\n    >\n      <img\n        src={washImage}\n        alt=\"\"\n        className=\"absolute inset-0 size-full object-cover object-top\"\n      />\n      <div className=\"bg-background/30 dark:bg-background/45 absolute inset-0\" />\n    </div>\n  )\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 illustrationElement = (\n    <IntegrationCloud rows={integrationRows} />\n  )\n\n  return (\n    <section className=\"bg-background relative isolate w-full overflow-hidden\">\n      {backgroundElement}\n\n      <motion.div\n        className={cn(\n          'relative z-10 mx-auto flex max-w-3xl flex-col items-center px-6 text-center',\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 active={animate} className=\"flex flex-col items-center gap-5\">\n          {titleElement}\n          {descriptionElement}\n        </Reveal>\n\n        <Reveal active={animate}>{ctaElement}</Reveal>\n\n        <Reveal active={animate} className=\"w-full\">\n          {illustrationElement}\n        </Reveal>\n      </motion.div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/blocks/hero/hero-01/hero-01.tsx"
    },
    {
      "path": "registry/blocks/hero/hero-01/hero-01-example.tsx",
      "content": "import { Hero01, type Hero01Props } from './hero-01'\n\nexport const values = {\n  title: 'Build what matters.',\n  titleLine2: 'Connect what works.',\n  description:\n    'A single layer for payments, auth, and messaging in your product.',\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: 'Get started',\n    link: '',\n    variant: 'default',\n    size: 'default',\n  },\n  integrationRows: [\n    ['Notion', 'GitHub', 'Stripe', 'Figma'],\n    ['Supabase', 'Resend', 'Raycast'],\n  ],\n} satisfies Hero01Props\n\nexport function Hero01Example() {\n  return <Hero01 {...values} />\n}\n",
      "type": "registry:component",
      "target": "components/flx/blocks/hero/hero-01/hero-01-example.tsx"
    },
    {
      "path": "registry/blocks/hero/hero-01/integration-cloud.tsx",
      "content": "export interface IntegrationCloudProps {\n  rows: readonly (readonly string[])[]\n}\n\nexport function IntegrationCloud({ rows }: Readonly<IntegrationCloudProps>) {\n  if (rows.length === 0) return null\n\n  return (\n    <div\n      aria-hidden\n      className=\"flex w-full flex-col items-center gap-3 mask-x-from-90% mask-x-to-100% pt-4 pb-1\"\n    >\n      {rows.map((row, rowIndex) => (\n        <div\n          key={rowIndex}\n          className=\"flex items-center justify-center gap-3 sm:gap-4\"\n        >\n          {row.map((name, nameIndex) => (\n            <div\n              key={nameIndex}\n              className=\"border-border/50 bg-card/90 text-foreground/70 shrink-0 rounded-full border px-3.5 py-1.5 text-xs font-medium whitespace-nowrap shadow-sm\"\n            >\n              {name}\n            </div>\n          ))}\n        </div>\n      ))}\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/blocks/hero/hero-01/integration-cloud.tsx"
    }
  ],
  "meta": {
    "iframeHeight": 720
  },
  "type": "registry:block"
}