{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "team-classic",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/team-section/team-classic.tsx",
      "content": "'use client'\r\n\r\nimport { TimelineAnimation } from '@/components/ui/timeline-animation'\r\nimport { cn } from '@/lib/utils'\r\nimport React, { useRef } from 'react'\r\n\r\nconst Icons = {\r\n  Twitter: () => (\r\n    <svg className=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n      <path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\" />\r\n    </svg>\r\n  ),\r\n  LinkedIn: () => (\r\n    <svg className=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n      <path d=\"M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z\" />\r\n    </svg>\r\n  ),\r\n  Instagram: () => (\r\n    <svg className=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n      <path d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z\" />\r\n    </svg>\r\n  ),\r\n  Facebook: () => (\r\n    <svg className=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n      <path d=\"M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z\" />\r\n    </svg>\r\n  ),\r\n}\r\n\r\nexport const TeamClassic = () => {\r\n  const timelineRef = useRef<HTMLDivElement>(null)\r\n\r\n  return (\r\n    <div\r\n      className=\"bg-[#FFF0F5] min-h-screen py-24 px-6 text-center\"\r\n      ref={timelineRef}\r\n    >\r\n      <div className=\"max-w-6xl mx-auto\">\r\n        <TimelineAnimation\r\n          timelineRef={timelineRef}\r\n          animationNum={1}\r\n          as=\"h2\"\r\n          className=\"text-5xl font-cursive text-neutral-800 mb-6\"\r\n        >\r\n          Our Team Of Professionals\r\n        </TimelineAnimation>\r\n        <TimelineAnimation\r\n          timelineRef={timelineRef}\r\n          animationNum={2}\r\n          as=\"p\"\r\n          className=\"text-neutral-500 max-w-xl mx-auto mb-20 text-sm tracking-wide\"\r\n        >\r\n          Awesome site on the top advertising a business online includes\r\n          assembling <br /> Having the most well-planned\r\n        </TimelineAnimation>\r\n\r\n        <div className=\"grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-12\">\r\n          {[\r\n            {\r\n              id: '1',\r\n              name: 'Candice Wu',\r\n              role: 'Founder & CEO',\r\n              borderClass: 'ring-red-500',\r\n              emoji: '🔥',\r\n              image:\r\n                'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=880&auto=format&fit=crop',\r\n            },\r\n            {\r\n              id: '2',\r\n              name: 'Demi Wilkinson',\r\n              borderClass: 'ring-blue-500',\r\n              role: 'Engineering Manager',\r\n              emoji: '🌊',\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: 'Drew Cano',\r\n              role: 'Product Manager',\r\n              borderClass: 'ring-purple-500',\r\n              emoji: '🎯',\r\n              image:\r\n                'https://images.unsplash.com/photo-1569292316763-0b667e9e960c?q=80&w=687&auto=format&fit=crop',\r\n            },\r\n            {\r\n              id: '4',\r\n              name: 'Natali Craig',\r\n              role: 'Frontend Developer',\r\n              borderClass: 'ring-green-400',\r\n              emoji: '🌿',\r\n              image:\r\n                'https://images.unsplash.com/flagged/photo-1573603867003-89f5fd7a7576?q=80&w=746&auto=format&fit=crop',\r\n            },\r\n          ].map((member, i) => (\r\n            <TimelineAnimation\r\n              key={member.id}\r\n              timelineRef={timelineRef}\r\n              animationNum={3 + i}\r\n              className=\"flex flex-col items-center group\"\r\n            >\r\n              <div\r\n                className={cn(\r\n                  `relative sm:w-56 w-48 sm:h-56 h-48 rounded-xl p-1 mb-5 group-hover:ring-4`,\r\n                  member.borderClass\r\n                )}\r\n              >\r\n                <div className=\"w-full h-full rounded-xl overflow-hidden bg-white shadow-xl\">\r\n                  <img\r\n                    src={member.image}\r\n                    className=\"w-full h-full object-cover\"\r\n                    alt={member.name}\r\n                  />\r\n                </div>\r\n                <div className=\"absolute top-0 group-hover:opacity-100 opacity-0 right-0 w-12 h-12 bg-white rounded-full flex items-center justify-center shadow-lg transform translate-x-1/4 -translate-y-1/4 text-green-500 transition-opacity duration-300\">\r\n                  {member.emoji}\r\n                </div>\r\n              </div>\r\n              <h3 className=\"text-xl font-bold text-neutral-800 tracking-wider mb-1 font-spaceGrotesk\">\r\n                {member.name}\r\n              </h3>\r\n              <p className=\"text-green-500 font-medium text-xs tracking-widest uppercase mb-4\">\r\n                {member.role}\r\n              </p>\r\n              <div className=\"flex gap-6 text-neutral-500\">\r\n                <a href=\"#\" className=\"hover:text-black transition-colors\">\r\n                  <Icons.Facebook />\r\n                </a>\r\n                <a href=\"#\" className=\"hover:text-black transition-colors\">\r\n                  <Icons.Twitter />\r\n                </a>\r\n                <a href=\"#\" className=\"hover:text-black transition-colors\">\r\n                  <Icons.Instagram />\r\n                </a>\r\n              </div>\r\n            </TimelineAnimation>\r\n          ))}\r\n        </div>\r\n      </div>\r\n    </div>\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"
}