{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "team-expert",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/team-section/team-expert.tsx",
      "content": "'use client'\r\n\r\nimport { TimelineAnimation } from '@/components/ui/timeline-animation'\r\nimport { Boxes } from 'lucide-react'\r\nimport React, { useRef } from 'react'\r\n\r\nexport const EXPERT_TEAM = [\r\n  {\r\n    id: '1',\r\n    name: 'Eskild Ebbesen',\r\n    role: 'Olympic rowing gold winner and public speaker',\r\n    image:\r\n      'https://images.unsplash.com/photo-1560250097-0b93528c311a?q=80&w=687&auto=format&fit=crop',\r\n  },\r\n  {\r\n    id: '2',\r\n    name: 'Henrik Duer',\r\n    role: 'Healthy habits expert and life-style coach',\r\n    image:\r\n      'https://images.unsplash.com/photo-1623366302587-b38b1ddaefd9?q=80&w=1025&auto=format&fit=crop',\r\n  },\r\n  {\r\n    id: '3',\r\n    name: 'Rikke Hørlykke',\r\n    role: 'Olympic handball gold winner and personal trainer',\r\n    image:\r\n      'https://images.unsplash.com/photo-1765438869321-d60141efd813?q=80&w=687&auto=format&fit=crop',\r\n  },\r\n  {\r\n    id: '4',\r\n    name: 'Stig Severinsen',\r\n    role: 'World record holder and breathwork expert',\r\n    image:\r\n      'https://images.unsplash.com/photo-1734434570358-21badf4ba1c6?q=80&w=687&auto=format&fit=crop',\r\n  },\r\n]\r\nconst ActivityCard = ({\r\n  title,\r\n  timelineRef,\r\n  animationNum,\r\n}: {\r\n  title: string\r\n  timelineRef: React.RefObject<HTMLElement | null>\r\n  animationNum: number\r\n}) => (\r\n  <TimelineAnimation\r\n    timelineRef={timelineRef}\r\n    animationNum={animationNum}\r\n    className=\"bg-white p-8 rounded-2xl shadow-sm border border-neutral-100 flex flex-col items-center text-center hover:shadow-md transition-shadow group cursor-default\"\r\n  >\r\n    <div className=\"w-12 h-12 bg-orange-500 rounded-2xl flex items-center justify-center text-orange-50 group-hover:scale-110 transition-transform\">\r\n      <Boxes />\r\n    </div>\r\n    <h4 className=\"text-lg font-spaceGrotesk font-bold text-neutral-800 my-1\">\r\n      {title}\r\n    </h4>\r\n    <p className=\"text-neutral-400 text-sm\">Strategy and M&A teams</p>\r\n  </TimelineAnimation>\r\n)\r\n\r\nexport const TeamExpert = () => {\r\n  const timelineRef = useRef<HTMLDivElement>(null)\r\n\r\n  return (\r\n    <section className=\"bg-neutral-50 py-24 px-6\" ref={timelineRef}>\r\n      <div className=\"max-w-7xl mx-auto\">\r\n        <div className=\"text-center mb-16\">\r\n          <TimelineAnimation\r\n            timelineRef={timelineRef}\r\n            animationNum={1}\r\n            as=\"h2\"\r\n            className=\"text-4xl font-light text-neutral-800 mb-4\"\r\n          >\r\n            Activities from{' '}\r\n            <span className=\"font-bold font-spaceGrotesk\">\r\n              experts of the world\r\n            </span>\r\n          </TimelineAnimation>\r\n          <TimelineAnimation\r\n            timelineRef={timelineRef}\r\n            animationNum={2}\r\n            as=\"p\"\r\n            className=\"max-w-4xl mx-auto text-neutral-500 text-lg leading-relaxed\"\r\n          >\r\n            'Pleazers' are short team activities led by world record holders,\r\n            Olympic gold medalists, and other inspiring athletes and experts.\r\n          </TimelineAnimation>\r\n        </div>\r\n        <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6\">\r\n          {EXPERT_TEAM.map((member, i) => (\r\n            <TimelineAnimation\r\n              key={member.id}\r\n              timelineRef={timelineRef}\r\n              animationNum={2 + i}\r\n              className=\"group p-6 rounded-3xl transition-all duration-300 bg-orange-100 border border-orange-200 hover:bg-[#FF6B00] hover:shadow-2xl hover:shadow-orange-200\"\r\n            >\r\n              <div className=\"aspect-square rounded-2xl overflow-hidden mb-6 border-4 border-transparent group-hover:border-white/20 transition-all\">\r\n                <img\r\n                  src={member.image}\r\n                  className=\"w-full h-full object-cover transition-transform duration-500 group-hover:scale-105\"\r\n                  alt={member.name}\r\n                />\r\n              </div>\r\n              <h3 className=\"font-spaceGrotesk text-2xl font-semibold mb-2 text-neutral-900 group-hover:text-white transition-colors\">\r\n                {member.name}\r\n              </h3>\r\n              <p className=\"text-sm mb-6 text-neutral-500 group-hover:text-white/80 transition-colors\">\r\n                {member.role}\r\n              </p>\r\n              <button className=\"font-spaceGrotesk text-sm font-semibold flex items-center gap-2 text-[#FF6B00] group-hover:text-white transition-colors\">\r\n                READ MORE\r\n                <span className=\"group-hover:translate-x-1 transition-transform\">\r\n                  →\r\n                </span>\r\n              </button>\r\n            </TimelineAnimation>\r\n          ))}\r\n        </div>\r\n        <div className=\"grid grid-cols-2 md:grid-cols-4 gap-6 mt-16\">\r\n          <ActivityCard\r\n            title=\"Workout\"\r\n            timelineRef={timelineRef}\r\n            animationNum={6}\r\n          />\r\n          <ActivityCard\r\n            title=\"Stretching\"\r\n            timelineRef={timelineRef}\r\n            animationNum={7}\r\n          />\r\n          <ActivityCard\r\n            title=\"Brain Breaks\"\r\n            timelineRef={timelineRef}\r\n            animationNum={8}\r\n          />\r\n          <ActivityCard\r\n            title=\"Mindfulness\"\r\n            timelineRef={timelineRef}\r\n            animationNum={9}\r\n          />\r\n        </div>\r\n      </div>\r\n    </section>\r\n  )\r\n}\r\n",
      "type": "registry:block"
    },
    {
      "path": "./components/ui/timeline-animation.tsx",
      "content": "import type { Variants } from 'motion/react';\nimport { type HTMLMotionProps, motion, useInView } from 'motion/react';\nimport type React from 'react';\n\ntype TimelineContentProps<T extends keyof HTMLElementTagNameMap> = {\n  children?: React.ReactNode;\n  animationNum: number;\n  className?: string;\n  timelineRef: React.RefObject<HTMLElement | null>;\n  as?: T;\n  customVariants?: Variants;\n  once?: boolean;\n} & HTMLMotionProps<T>;\n\nexport const TimelineAnimation = <T extends keyof HTMLElementTagNameMap = 'div'>({\n  children,\n  animationNum,\n  timelineRef,\n  className,\n  as,\n  customVariants,\n  once = true,\n  ...props\n}: TimelineContentProps<T>) => {\n  const defaultSequenceVariants = {\n    visible: (i: number) => ({\n      filter: 'blur(0px)',\n      y: 0,\n      opacity: 1,\n      transition: {\n        delay: i * 0.5,\n        duration: 0.5,\n      },\n    }),\n    hidden: {\n      filter: 'blur(20px)',\n      y: 0,\n      opacity: 0,\n    },\n  };\n\n  const sequenceVariants = customVariants || defaultSequenceVariants;\n\n  const isInView = useInView(timelineRef, {\n    once,\n  });\n\n  const MotionComponent = motion[as || 'div'] as React.ElementType;\n\n  return (\n    <MotionComponent\n      initial='hidden'\n      animate={isInView ? 'visible' : 'hidden'}\n      custom={animationNum}\n      variants={sequenceVariants}\n      className={className}\n      {...props}\n    >\n      {children}\n    </MotionComponent>\n  );\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}