{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "innovation",
  "type": "registry:block",
  "dependencies": [
    "lucide-react",
    "motion",
    "recharts"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/new-york/innovation/components/cta-button.tsx",
      "content": "import { Download } from \"lucide-react\";\n\ninterface CtaButtonProps {\n  label?: string;\n  href?: string;\n}\n\nexport function CtaButton({ label = \"Get Innovation Materials\", href = \"#\" }: CtaButtonProps) {\n  return (\n    <div className=\"container mx-auto px-4 py-16\">\n      <a\n        href={href}\n        className=\"w-full max-w-2xl mx-auto flex bg-gradient-to-r from-[#033C5A] to-[#024D75] text-white py-8 px-12 rounded-2xl shadow-2xl transition-all relative overflow-hidden group\"\n      >\n        <div className=\"absolute inset-0 bg-gradient-to-r from-[#AA9868] to-[#D4C5A0] opacity-0 group-hover:opacity-100 transition-opacity duration-300\"></div>\n        <div className=\"relative z-10 flex items-center justify-center gap-4 w-full\">\n          <Download className=\"w-8 h-8\" />\n          <span className=\"text-2xl\">{label}</span>\n        </div>\n      </a>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york/innovation/components/get-it-section.tsx",
      "content": "import { Card } from \"@/components/ui\";\nimport { BookOpen } from \"lucide-react\";\nimport type { GetItData } from \"../types\";\n\nexport function GetItSection({ heading, body, resources, highlight }: GetItData) {\n  return (\n    <div className=\"container mx-auto px-4 py-20\">\n      <h2 className=\"text-5xl md:text-6xl font-serif text-white text-center mb-16\">How do I get it?</h2>\n\n      <div>\n        <Card className=\"p-8 bg-white shadow-2xl\">\n          <div className=\"grid md:grid-cols-2 gap-8 items-center\">\n            <div>\n              <h3 className=\"text-[#033C5A] mb-4\">{heading}</h3>\n              <p className=\"text-muted-foreground mb-6 leading-relaxed\">\n                {body}\n              </p>\n\n              <div className=\"space-y-3 mb-6\">\n                {resources.map((resource, i) => (\n                  <a\n                    key={i}\n                    href={resource.href ?? \"#\"}\n                    className=\"flex items-center gap-3 bg-gray-50 p-3 rounded-lg cursor-pointer\"\n                  >\n                    <resource.icon className=\"w-5 h-5 text-[#033C5A]\" />\n                    <span className=\"text-sm text-[#033C5A]\">\n                      {resource.label}\n                    </span>\n                  </a>\n                ))}\n              </div>\n\n              <div className=\"bg-[#AA9868] text-white p-4 rounded-lg\">\n                <p className=\"text-sm\">\n                  {highlight}\n                </p>\n              </div>\n            </div>\n\n            <div\n              className=\"bg-gray-100 rounded-lg p-8 flex items-center justify-center relative overflow-hidden\"\n              style={{ minHeight: \"350px\" }}\n            >\n              <div className=\"absolute inset-0 bg-gradient-to-br from-[#033C5A]/10 to-[#AA9868]/10\"></div>\n              <div className=\"relative z-10 flex flex-col items-center\">\n                <div className=\"relative\">\n                  <div className=\"w-32 h-32 bg-white rounded-lg shadow-xl mb-4 transform rotate-6 absolute top-0 left-0\"></div>\n                  <div className=\"w-32 h-32 bg-white rounded-lg shadow-xl mb-4 transform -rotate-6 absolute top-4 left-4\"></div>\n                  <div className=\"w-32 h-32 bg-gradient-to-br from-[#033C5A] to-[#AA9868] rounded-lg shadow-2xl relative flex items-center justify-center\">\n                    <BookOpen className=\"w-16 h-16 text-white\" />\n                  </div>\n                </div>\n                <p className=\"text-gray-600 mt-40 text-center\">\n                  Access all materials\n                </p>\n              </div>\n            </div>\n          </div>\n        </Card>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york/innovation/components/hero-section.tsx",
      "content": "interface HeroSectionProps {\n  title: string;\n  subtitle: string;\n}\n\nexport function HeroSection({ title, subtitle }: HeroSectionProps) {\n  return (\n    <div className=\"relative py-20 md:py-18 -mb-16\">\n      <div className=\"absolute inset-0 opacity-10\">\n        <div className=\"absolute top-10 left-20 w-64 h-64 bg-white rounded-full blur-3xl\"></div>\n        <div className=\"absolute bottom-10 right-20 w-96 h-96 bg-white rounded-full blur-3xl\"></div>\n      </div>\n      <div className=\"w-full container mx-auto px-4 text-center relative z-10\">\n        <h1 className=\"text-7xl md:text-8xl font-serif text-white mb-2 md:mb-4\">{title}</h1>\n        <p className=\"text-3xl md:text-4xl font-thin text-white/70\">{subtitle}</p>\n      </div>\n    </div>\n  );\n}",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york/innovation/components/how-to-section.tsx",
      "content": "import { ArrowRight } from \"lucide-react\";\nimport { Card } from \"@/components/ui\";\nimport type { HowToUseData } from \"../types\";\n\nexport function HowToUseSection({ steps }: HowToUseData) {\n  return (\n    <div className=\"py-20 max-w-3xl px-4\">\n      <div className=\"container mx-auto\">\n        <h2 className=\"text-5xl md:text-6xl font-serif text-white text-center mb-16\">How do you use it?</h2>\n\n        <div>\n          <Card className=\"p-8 bg-white/10 backdrop-blur-sm shadow-2xl relative border-white/20\">\n            <div className=\"space-y-8\">\n              {steps.map((step, index) => (\n                <div key={index}>\n                  <div\n                    className={`flex items-start gap-6 ${index % 2 === 0 ? \"flex-row\" : \"flex-row-reverse\"}`}\n                  >\n                    <div className=\"flex-shrink-0\">\n                      <div className=\"flex items-center gap-4\">\n                        <span className=\"text-2xl font-bold text-[#AA9868]\">\n                          {index + 1}.\n                        </span>\n                        <div className=\"bg-gray-300 w-20 h-20 rounded-lg flex items-center justify-center\">\n                          <step.icon className=\"w-10 h-10 text-white\" />\n                        </div>\n                      </div>\n                    </div>\n                    <div\n                      className={`flex-1 ${index % 2 === 0 ? \"text-left\" : \"text-right\"}`}\n                    >\n                      <h4 className=\"text-white mb-2\">{step.title}</h4>\n                      <p className=\"text-white/80\">{step.description}</p>\n                    </div>\n                  </div>\n                  {index < steps.length - 1 && (\n                    <div\n                      className={`flex ${index % 2 === 0 ? \"justify-end\" : \"justify-start\"} my-4`}\n                    >\n                      <ArrowRight\n                        className=\"w-8 h-8 text-[#AA9868]\"\n                        style={{\n                          transform:\n                            index % 2 === 0\n                              ? \"rotate(90deg)\"\n                              : \"rotate(90deg) scaleX(-1)\",\n                        }}\n                      />\n                    </div>\n                  )}\n                </div>\n              ))}\n            </div>\n          </Card>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york/innovation/components/nav-footer.tsx",
      "content": "\"use client\";\n\nimport { motion } from \"motion/react\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\n\ninterface NavigationFooterProps {\n  prevHref?: string;\n  nextHref?: string;\n  current?: number;\n  total?: number;\n}\n\nexport function NavigationFooter({\n  prevHref,\n  nextHref,\n  current = 1,\n  total = 1,\n}: NavigationFooterProps) {\n  const dots = Array.from({ length: total }, (_, i) => i + 1);\n\n  return (\n    <div className=\"bg-[#5A6C7D] py-6 mt-20\">\n      <div className=\"container mx-auto px-4\">\n        <div className=\"flex justify-between items-center\">\n          <motion.a\n            href={prevHref ?? \"#\"}\n            whileHover={{ scale: 1.05, x: -5 }}\n            whileTap={{ scale: 0.95 }}\n            className={`flex items-center gap-2 text-white hover:text-[#AA9868] transition-colors ${!prevHref ? \"opacity-30 pointer-events-none\" : \"\"}`}\n          >\n            <ChevronLeft className=\"w-5 h-5\" />\n            <span>PREV</span>\n          </motion.a>\n\n          <div className=\"flex items-center gap-4\">\n            <span className=\"text-white text-sm\">ALL INNOVATIONS</span>\n            <div className=\"flex gap-2\">\n              {dots.map((dot) => (\n                <motion.div\n                  key={dot}\n                  whileHover={{ scale: 1.3 }}\n                  className={`w-2 h-2 rounded-full ${dot === current ? \"bg-[#AA9868]\" : \"bg-white/50\"} cursor-pointer`}\n                />\n              ))}\n            </div>\n          </div>\n\n          <motion.a\n            href={nextHref ?? \"#\"}\n            whileHover={{ scale: 1.05, x: 5 }}\n            whileTap={{ scale: 0.95 }}\n            className={`flex items-center gap-2 text-white hover:text-[#AA9868] transition-colors ${!nextHref ? \"opacity-30 pointer-events-none\" : \"\"}`}\n          >\n            <span>NEXT</span>\n            <ChevronRight className=\"w-5 h-5\" />\n          </motion.a>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york/innovation/components/test-it-section.tsx",
      "content": "\"use client\";\n\nimport { Card } from \"@/components/ui\";\nimport {\n  BarChart,\n  Bar,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  ResponsiveContainer,\n  PieChart,\n  Pie,\n  Cell,\n} from \"recharts\";\nimport type { TestingData } from \"../types\";\n\nconst COLORS = [\"#033C5A\", \"#AA9868\", \"#5A6C7D\", \"#D4C5A0\"];\n\nexport function TestingSection({ headline, body, callout, barData, pieData1, pieData2 }: TestingData) {\n  return (\n    <div className=\"container mx-auto px-4 py-20\">\n      <h2 className=\"text-5xl md:6xl font-serif text-white text-center mb-16\">How have we tested it?</h2>\n\n      <div>\n        <Card className=\"p-8 bg-white/10 backdrop-blur-sm shadow-2xl border-white/20\">\n          <div className=\"grid md:grid-cols-2 gap-8 mb-8\">\n            <div>\n              <h3 className=\"text-white mb-4\">\n                {headline}\n              </h3>\n              <p className=\"text-white/80 mb-6\">\n                {body}\n              </p>\n              <div className=\"bg-white/10 p-4 rounded-lg\">\n                <p className=\"text-sm text-white/90\">\n                  {callout}\n                </p>\n              </div>\n            </div>\n\n            <div className=\"bg-white/5 rounded-lg p-6\">\n              <ResponsiveContainer width=\"100%\" height={250}>\n                <BarChart data={barData}>\n                  <CartesianGrid\n                    strokeDasharray=\"3 3\"\n                    stroke=\"rgba(255,255,255,0.2)\"\n                  />\n                  <XAxis dataKey=\"name\" stroke=\"#ffffff\" />\n                  <YAxis stroke=\"#ffffff\" />\n                  <Tooltip\n                    contentStyle={{\n                      backgroundColor: \"#AA9868\",\n                      color: \"white\",\n                      border: \"none\",\n                      borderRadius: \"8px\",\n                    }}\n                  />\n                  <Bar dataKey=\"value\" fill=\"#AA9868\" radius={[8, 8, 0, 0]} />\n                </BarChart>\n              </ResponsiveContainer>\n            </div>\n          </div>\n\n          <div className=\"grid md:grid-cols-2 gap-8\">\n            <div className=\"bg-white/5 rounded-lg p-6\">\n              <h4 className=\"text-white mb-4 text-center\">\n                Test Results Distribution\n              </h4>\n              <ResponsiveContainer width=\"100%\" height={200}>\n                <PieChart>\n                  <Pie\n                    data={pieData1}\n                    cx=\"50%\"\n                    cy=\"50%\"\n                    innerRadius={40}\n                    outerRadius={80}\n                    paddingAngle={5}\n                    dataKey=\"value\"\n                  >\n                    {pieData1.map((_entry, index) => (\n                      <Cell\n                        key={`cell-${index}`}\n                        fill={COLORS[index % COLORS.length]}\n                      />\n                    ))}\n                  </Pie>\n                  <Tooltip />\n                </PieChart>\n              </ResponsiveContainer>\n              <div className=\"flex justify-center gap-4 mt-4\">\n                {pieData1.map((entry, index) => (\n                  <div key={entry.name} className=\"flex items-center gap-2\">\n                    <div\n                      className=\"w-4 h-4 rounded\"\n                      style={{ backgroundColor: COLORS[index] }}\n                    ></div>\n                    <span className=\"text-sm text-white\">\n                      {entry.name}: {entry.value}%\n                    </span>\n                  </div>\n                ))}\n              </div>\n            </div>\n\n            <div>\n              <h4 className=\"text-white mb-4\">Combination of testing data</h4>\n              <div className=\"bg-white/5 rounded-lg p-6\">\n                <ResponsiveContainer width=\"100%\" height={200}>\n                  <PieChart>\n                    <Pie\n                      data={pieData2}\n                      cx=\"50%\"\n                      cy=\"50%\"\n                      innerRadius={40}\n                      outerRadius={80}\n                      paddingAngle={5}\n                      dataKey=\"value\"\n                    >\n                      {pieData2.map((_entry, index) => (\n                        <Cell key={`cell-${index}`} fill={COLORS[index + 2]} />\n                      ))}\n                    </Pie>\n                    <Tooltip />\n                  </PieChart>\n                </ResponsiveContainer>\n              </div>\n            </div>\n          </div>\n        </Card>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york/innovation/components/user-story-section.tsx",
      "content": "\"use client\";\n\nimport { Card } from \"@/components/ui\";\nimport { User, Quote } from \"lucide-react\";\nimport type { UserStoryData } from \"../types\";\n\nexport function UserStorySection({ storyIntro, paragraphs, quote, name, role, org }: UserStoryData) {\n  return (\n    <div className=\"py-20 px-4\">\n      <div className=\"container mx-auto \">\n        <h2 className=\"text-5xl md:text-6xl font-serif text-white text-center mb-16\">Who has used it?</h2>\n\n        <div>\n          <Card className=\"p-8 bg-white/10 backdrop-blur-sm shadow-2xl overflow-hidden relative border-white/20\">\n            <div className=\"absolute top-0 right-0 w-64 h-64 bg-[#AA9868]/10 rounded-full blur-3xl\"></div>\n            <div className=\"absolute bottom-0 left-0 w-64 h-64 bg-[#033C5A]/10 rounded-full blur-3xl\"></div>\n\n            <div className=\"grid md:grid-cols-2 gap-8 relative z-10\">\n              <div>\n                <div className=\"flex items-center gap-3 mb-6\">\n                  <Quote className=\"w-8 h-8 text-[#AA9868]\" />\n                  <h3 className=\"text-white\">\n                    {storyIntro}\n                  </h3>\n                </div>\n\n                {paragraphs.map((p, i) => (\n                  <p key={i} className=\"text-white/90 mb-4 leading-relaxed\">\n                    {p}\n                  </p>\n                ))}\n\n                <div className=\"bg-[#AA9868] text-white p-4 rounded-lg inline-block\">\n                  <p className=\"text-sm italic\">\n                    &ldquo;{quote}&rdquo;\n                  </p>\n                </div>\n              </div>\n\n              <div className=\"flex flex-col items-center justify-center\">\n                <div className=\"bg-gradient-to-br from-[#033C5A] to-[#AA9868] w-48 h-48 rounded-full flex items-center justify-center shadow-2xl mb-6\">\n                  <User className=\"w-24 h-24 text-white\" />\n                </div>\n\n                <div className=\"text-center\">\n                  <h4 className=\"text-white mb-2\">{name}</h4>\n                  <p className=\"text-white/80\">{role}</p>\n                  <p className=\"text-sm text-[#AA9868] mt-2\">\n                    {org}\n                  </p>\n                </div>\n              </div>\n            </div>\n          </Card>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york/innovation/components/what-is-it-section.tsx",
      "content": "\"use client\";\n\nimport {\n  Card,\n  Accordion,\n  AccordionItem,\n  AccordionTrigger,\n  AccordionContent,\n} from \"@/components/ui\";\nimport type { WhatIsItData } from \"../types\";\n\nexport function WhatIsItSection({ headline, body, capabilities, highlight }: WhatIsItData) {\n  return (\n    <div className=\"py-20\" >\n    <div className=\"w-full container mx-auto px-4\">\n      <h2 className=\"text-5xl md:text-6xl font-serif text-white text-center mb-16\">What is it?</h2>\n      <div>\n      <Card className=\"p-8 bg-white/10 backdrop-blur-sm shadow-2xl border-white/20\">\n        <div className=\"grid md:grid-cols-2 gap-8\">\n          <div>\n            <h3 className=\"text-white mb-4\">\n              {headline}\n            </h3>\n            <p className=\"text-white/90 mb-6\">\n              {body}\n            </p>\n            <Accordion type=\"single\" collapsible className=\"space-y-3\">\n              {capabilities.map((cap, i) => (\n                <AccordionItem key={i} value={`capability-${i}`} className=\"bg-white/10 rounded border-none\">\n                  <AccordionTrigger className=\"px-3 py-3 text-sm text-white hover:no-underline [&>svg]:text-white\">\n                    {cap.label}\n                  </AccordionTrigger>\n                  <AccordionContent className=\"px-3 text-white/80\">\n                    {cap.detail}\n                  </AccordionContent>\n                </AccordionItem>\n              ))}\n            </Accordion>\n            <div className=\"mt-6 bg-[#AA9868] text-white p-4 rounded inline-block\">\n              <p className=\"text-sm\">{highlight}</p>\n            </div>\n          </div>\n          <div className=\"bg-white/5 rounded-lg p-8 flex items-center justify-center relative overflow-hidden\">\n            <div className=\"absolute inset-0 bg-gradient-to-br from-[#AA9868]/20 to-white/10\"></div>\n            <div className=\"relative z-10 text-center\">\n              <div className=\"w-32 h-32 bg-white/20 rounded-full mx-auto mb-4 flex items-center justify-center shadow-lg\">\n                <div className=\"w-24 h-24 bg-gradient-to-br from-[#AA9868] to-white rounded-full\"></div>\n              </div>\n              <p className=\"text-white/80\">Visual representation</p>\n            </div>\n          </div>\n        </div>\n      </Card>\n      </div>\n    </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york/innovation/innovation.tsx",
      "content": "import { HeroSection } from \"./components/hero-section\";\nimport { WhatIsItSection } from \"./components/what-is-it-section\";\nimport { HowToUseSection } from \"./components/how-to-section\";\nimport { TestingSection } from \"./components/test-it-section\";\nimport { UserStorySection } from \"./components/user-story-section\";\nimport { GetItSection } from \"./components/get-it-section\";\nimport { CtaButton } from \"./components/cta-button\";\nimport { NavigationFooter } from \"./components/nav-footer\";\nimport type { InnovationData } from \"./types\";\n\ninterface InnovationProps {\n  data: InnovationData;\n}\n\nexport function Innovation({ data }: InnovationProps) {\n  return (\n    <div className=\"min-h-screen bg-background\">\n      <div className=\"w-full flex flex-col items-center mx-auto\">\n\n        <HeroSection\n          title={data.hero.title}\n          subtitle={data.hero.subtitle}\n        />\n\n        <WhatIsItSection {...data.whatIsIt} />\n        <HowToUseSection {...data.howToUse} />\n        <TestingSection {...data.testing} />\n        <UserStorySection {...data.userStory} />\n        <GetItSection {...data.getIt} />\n\n        <CtaButton\n          label={data.cta?.label}\n          href={data.cta?.href}\n        />\n\n        <NavigationFooter\n          prevHref={data.navigation?.prevHref}\n          nextHref={data.navigation?.nextHref}\n          current={data.navigation?.current}\n          total={data.navigation?.total}\n        />\n      </div>\n    </div>\n  );\n}",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york/innovation/types.ts",
      "content": "import type { LucideIcon } from \"lucide-react\";\n\nexport interface WhatIsItData {\n  headline: string;\n  body: string;\n  capabilities: { label: string; detail: string }[];\n  highlight: string;\n}\n\nexport interface HowToUseData {\n  steps: {\n    title: string;\n    description: string;\n    icon: LucideIcon;\n  }[];\n}\n\nexport interface TestingData {\n  headline: string;\n  body: string;\n  callout: string;\n  barData: { name: string; value: number }[];\n  pieData1: { name: string; value: number }[];\n  pieData2: { name: string; value: number }[];\n}\n\nexport interface UserStoryData {\n  storyIntro: string;\n  paragraphs: string[];\n  quote: string;\n  name: string;\n  role: string;\n  org: string;\n}\n\nexport interface GetItData {\n  heading: string;\n  body: string;\n  resources: {\n    icon: LucideIcon;\n    label: string;\n    href?: string;\n  }[];\n  highlight: string;\n}\n\nexport interface InnovationData {\n  hero: {\n    title: string;\n    subtitle: string;\n  };\n  whatIsIt: WhatIsItData;\n  howToUse: HowToUseData;\n  testing: TestingData;\n  userStory: UserStoryData;\n  getIt: GetItData;\n  cta?: {\n    label?: string;\n    href?: string;\n  };\n  navigation?: {\n    prevHref?: string;\n    nextHref?: string;\n    current?: number;\n    total?: number;\n  };\n}\n",
      "type": "registry:file"
    }
  ]
}