{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "innovations",
  "type": "registry:block",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/new-york/innovations/components/gallery.tsx",
      "content": "import svgPaths from \"./svg\";\nimport { ImageWithFallback } from '@/components/image-with-fallback';\n\ninterface InnovationCardProps {\n  title: string;\n  description: React.ReactNode;\n  imageFilter: string;\n  icon: React.ReactNode;\n}\n\nfunction IconLeft() {\n  return (\n    <div className=\"relative shrink-0 w-4 h-4\">\n      <svg\n        className=\"block size-full\"\n        fill=\"none\"\n        preserveAspectRatio=\"none\"\n        viewBox=\"0 0 16 16\"\n      >\n        <path d={svgPaths.pfe14800} fill=\"white\" />\n      </svg>\n    </div>\n  );\n}\n\nfunction EnhancedButton() {\n  return (\n    <button className=\"group relative overflow-hidden bg-gradient-to-r from-[#033C5A] to-[#045A85] hover:from-[#045A85] hover:to-[#033C5A] text-white px-6 py-3 rounded-lg shadow-lg shadow-[#033C5A]/30 hover:shadow-xl hover:shadow-[#033C5A]/50 transition-all duration-300 transform hover:-translate-y-0.5\">\n      <div className=\"flex items-center gap-2 relative z-10\">\n        <IconLeft />\n        <span className=\"text-sm font-semibold\">Learn More</span>\n      </div>\n      <div className=\"absolute inset-0 bg-gradient-to-r from-white/0 via-white/10 to-white/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700\" />\n    </button>\n  );\n}\n\nfunction TextHeading({ children }: { children: React.ReactNode }) {\n  return (\n    <div className=\"flex flex-row items-start justify-start p-0 relative w-full\">\n      <h2 className=\"text-3xl font-black text-[#033C5A] leading-tight tracking-tight uppercase relative\">\n        {children}\n        {/* Subtle underline accent */}\n        <div className=\"absolute -bottom-1 left-0 w-full h-0.5 bg-gradient-to-r from-[#AA9868] to-transparent\" />\n      </h2>\n    </div>\n  );\n}\n\nfunction TextSubheading({ children }: { children: React.ReactNode }) {\n  return (\n    <div className=\"flex flex-row items-start justify-start p-0 relative w-full\">\n      <div className=\"flex-1 text-gray-300 text-base leading-relaxed\">\n        {children}\n      </div>\n    </div>\n  );\n}\n\nfunction TextContentHeading({ title, description }: { title: string; description: React.ReactNode }) {\n  return (\n    <div className=\"flex flex-col gap-4 items-start justify-start p-0 relative w-full\">\n      <TextHeading>{title}</TextHeading>\n      <TextSubheading>{description}</TextSubheading>\n      \n      {/* Decorative gradient line */}\n      <div className=\"absolute -left-16 top-12 w-64 h-0.5\">\n        <div className=\"w-full h-full bg-gradient-to-r from-[#AA9868] via-[#AA9868]/60 to-transparent rounded-full shadow-lg shadow-[#AA9868]/20\" />\n      </div>\n    </div>\n  );\n}\n\nfunction ContentBox({ title, description }: { title: string; description: React.ReactNode }) {\n  return (\n    <div className=\"absolute left-20 top-16 w-64 bg-gradient-to-br from-white/95 to-white/90 backdrop-blur-sm rounded-2xl shadow-2xl shadow-black/40 border border-white/20 p-6 z-10 transform hover:scale-105 transition-all duration-300\">\n      <div className=\"flex flex-col gap-6\">\n        <TextContentHeading title={title} description={description} />\n        <EnhancedButton />\n      </div>\n    </div>\n  );\n}\n\nexport function InnovationCard({ title, description, imageFilter, icon }: InnovationCardProps) {\n  return (\n    <div className=\"relative w-96 h-96 group\">\n      {/* Main image area with gradient overlay */}\n      <div className=\"absolute inset-0 w-80 h-96 rounded-2xl overflow-hidden shadow-2xl shadow-black/50\">\n        <div className=\"relative w-full h-full\">\n          <ImageWithFallback\n            src={`https://images.unsplash.com/photo-1551434678-e076c223a692?w=400&h=400&fit=crop&crop=center&auto=format`}\n            alt={`${title} background`}\n            className=\"w-full h-full object-cover\"\n          />\n          {/* Blue gradient overlay */}\n          <div className={`absolute inset-0 bg-gradient-to-br ${imageFilter} mix-blend-overlay`} />\n          <div className=\"absolute inset-0 bg-gradient-to-t from-[#033C5A]/80 via-[#033C5A]/40 to-transparent\" />\n        </div>\n        \n        {/* White border with gradient glow */}\n        <div className=\"absolute inset-0 border-4 border-white/80 rounded-2xl pointer-events-none\" />\n        <div className=\"absolute inset-0 border border-[#AA9868]/30 rounded-2xl pointer-events-none shadow-inner shadow-[#AA9868]/20\" />\n      </div>\n      \n      {/* Content overlay */}\n      <ContentBox title={title} description={description} />\n      \n      {/* Subject-relevant icon */}\n      <div className=\"absolute left-5 top-5 w-16 h-16 bg-gradient-to-br from-[#AA9868] to-[#AA9868]/70 rounded-xl shadow-lg shadow-[#AA9868]/30 backdrop-blur-sm border border-[#AA9868]/40 z-20 flex items-center justify-center group-hover:scale-110 transition-transform duration-300\">\n        {icon}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york/innovations/components/hero.tsx",
      "content": "export function InnovationsHero() {\n  return (\n    <div className=\"flex flex-col gap-4 items-center justify-start max-w-6xl overflow-visible p-0 relative w-full\">\n      <div className=\"flex flex-col gap-12 items-center justify-start overflow-visible px-8 py-20 relative w-full\">\n        <div className=\"flex flex-wrap gap-12 items-center justify-center p-0 relative max-w-4xl\">\n          <div className=\"flex flex-col gap-6 items-start justify-start max-w-4xl p-0 relative\">\n            <div className=\"flex flex-row items-start justify-start p-0 relative\">\n              <h1 className=\"text-7xl font-black text-white leading-none tracking-tight bg-gradient-to-r from-white via-white to-gray-200 bg-clip-text text-transparent\">\n                INNOVATIONS\n              </h1>\n            </div>\n            <div className=\"flex flex-row items-start justify-start p-0 relative w-full max-w-4xl\">\n              <p className=\"text-3xl leading-relaxed text-[#AA9868] font-light\">\n                Explore the center's latest innovations. And maybe a little extra\n                added text for good measure.\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york/innovations/components/section.tsx",
      "content": "import { InnovationCard } from './gallery';\nimport { MessageSquareHeart, Camera } from 'lucide-react';\n\nexport function InnovationsSection() {\n  return (\n    <div className=\"flex flex-col gap-4 items-center justify-start max-w-6xl overflow-visible p-0 relative w-full mt-20\">\n      <div className=\"flex flex-col gap-12 items-center justify-start max-w-6xl overflow-visible pb-20 pt-0 px-8 relative w-full\">\n        <div className=\"flex flex-wrap gap-12 items-start justify-center p-0 relative max-w-4xl\">\n          <InnovationCard\n            title=\"EQUIP\"\n            description={\n              <>\n                <span className=\"font-bold text-[#033C5A]\">EQUIP is for trainers and supervisors</span>\n                <span className=\"text-gray-600\"> to improve the quality of their teams's psychosocial and mental health helping skills.</span>\n              </>\n            }\n            imageFilter=\"from-blue-600/60 to-blue-800/80\"\n            icon={<MessageSquareHeart />}\n          />\n          <InnovationCard\n            title=\"PhotoVoice™\"\n            description={\n              <>\n                <span className=\"font-bold text-[#033C5A]\">Photography and digital storytelling</span>\n                <span className=\"text-gray-600\"> to address stigma in the context of mental health.</span>\n              </>\n            }\n            imageFilter=\"from-blue-700/60 to-indigo-800/80\"\n            icon={<Camera />}\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york/innovations/components/svg.ts",
      "content": "export default {\npfe14800: \"M12.3333 8.33333H8.33333V12.3333H7V8.33333H3V7H7V3H8.33333V7H12.3333V8.33333Z\",\n}",
      "type": "registry:file"
    },
    {
      "path": "registry/new-york/innovations/innovations.tsx",
      "content": "{/* import { InnovationsHero } from './gmh-innovations-hero'; */}\nimport { InnovationsSection } from './components/section';\n\nfunction PageLayout() {\n  return (\n    <div className=\"min-h-screen bg-transparent w-full relative overflow-hidden\">\n      {/* Background decorative elements */}\n      <div className=\"absolute inset-0 opacity-10\">\n        <div className=\"absolute top-20 right-20 w-96 h-96 bg-gradient-to-br from-[#AA9868] to-transparent rounded-full blur-3xl\" />\n        <div className=\"absolute bottom-20 left-20 w-80 h-80 bg-gradient-to-tr from-[#AA9868]/30 to-transparent rounded-full blur-3xl\" />\n      </div>\n      \n      {/* Side margins with subtle gradients */}\n      <div className=\"flex flex-row items-center justify-center min-h-screen\">\n        <div className=\"w-24 shrink-0 h-full bg-gradient-to-r from-[#033C5A]/50 to-transparent\" />\n        <div className=\"min-h-screen w-full relative\">\n      {/* <InnovationsHero /> */}\n          <InnovationsSection />\n        </div>\n        <div className=\"w-24 shrink-0 h-full bg-gradient-to-l from-[#033C5A]/50 to-transparent\" />\n      </div>\n    </div>\n  );\n}\n\nexport function Innovations() {\n  return (\n    <div className=\"relative size-full\">\n      <PageLayout />\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ]
}