{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "team-magic",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/team-section/team-magic.tsx",
      "content": "'use client'\r\n\r\nimport { TimelineAnimation } from '@/components/ui/timeline-animation'\r\nimport { Button } from '@repo/shadcn'\r\nimport React, { useRef } from 'react'\r\n\r\nconst MAGIC_TEAM = [\r\n  {\r\n    id: '2',\r\n    name: 'Henrik Duer',\r\n    role: 'Healthy habits expert and life-style coach',\r\n    img: '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    img: '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    img: 'https://images.unsplash.com/photo-1734434570358-21badf4ba1c6?q=80&w=687&auto=format&fit=crop',\r\n  },\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 TeamMagic = () => {\r\n  const timelineRef = useRef<HTMLDivElement>(null)\r\n\r\n  return (\r\n    <div\r\n      className=\"bg-neutral-950 min-h-screen py-24 px-6 text-white text-center\"\r\n      ref={timelineRef}\r\n    >\r\n      <div className=\"max-w-5xl mx-auto\">\r\n        <TimelineAnimation\r\n          timelineRef={timelineRef}\r\n          animationNum={1}\r\n          as=\"h2\"\r\n          className=\"text-6xl font-spaceGrotesk font-semibold mb-6\"\r\n        >\r\n          Behind the Magic\r\n        </TimelineAnimation>\r\n        <TimelineAnimation\r\n          timelineRef={timelineRef}\r\n          animationNum={2}\r\n          as=\"p\"\r\n          className=\"text-neutral-400 text-lg mb-20 max-w-3xl mx-auto leading-relaxed\"\r\n        >\r\n          We're a group of passionate designers, developers, and strategists\r\n          united by a mission to craft beautiful and impactful digital\r\n          experiences.\r\n        </TimelineAnimation>\r\n\r\n        <div className=\"grid grid-cols-1 md:grid-cols-3 gap-8 mb-24\">\r\n          {MAGIC_TEAM.map((member, i) => (\r\n            <TimelineAnimation\r\n              key={member.id}\r\n              timelineRef={timelineRef}\r\n              animationNum={3 + i}\r\n              className=\"relative group perspective-1000\"\r\n            >\r\n              <div className=\"aspect-4/5 rounded-[2.5rem] overflow-hidden border border-white/10 group-hover:border-blue-500/50 transition-all duration-700 relative\">\r\n                <img\r\n                  src={member.img}\r\n                  className=\"w-full h-full object-cover filter brightness-75 group-hover:brightness-50 group-hover:scale-110 transition-all duration-700\"\r\n                  alt={member.name}\r\n                />\r\n\r\n                <div className=\"absolute inset-4 rounded-3xl border border-white/20 backdrop-blur-md bg-white/5 flex flex-col items-center justify-center p-6 border-b-0 opacity-0 group-hover:opacity-100 transition-all duration-500 transform translate-y-4 group-hover:translate-y-0\">\r\n                  <div className=\"mt-auto text-center\">\r\n                    <h4 className=\"text-2xl font-bold font-spaceGrotesk mb-1 text-blue-600\">\r\n                      {member.name}\r\n                    </h4>\r\n                    <p className=\"text-white text-sm mb-6\">{member.role}</p>\r\n                    <button className=\"cursor-pointer px-6 py-2 rounded-full border border-white/30 text-xs font-bold bg-white/10 hover:bg-white hover:text-black transition-all\">\r\n                      Let's Connect\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </TimelineAnimation>\r\n          ))}\r\n        </div>\r\n\r\n        <TimelineAnimation\r\n          timelineRef={timelineRef}\r\n          animationNum={6}\r\n          className=\"flex flex-col md:flex-row items-center justify-between text-left gap-8 py-12 border-t border-white/5\"\r\n        >\r\n          <div>\r\n            <h3 className=\"text-3xl font-spaceGrotesk font-bold mb-4\">\r\n              Follow us to see what we're creating.\r\n            </h3>\r\n            <p className=\"text-neutral-500 max-w-xl\">\r\n              We're a diverse team of problem-solvers, designers, and tech\r\n              lovers — passionate about creating impact through digital\r\n              experiences.\r\n            </p>\r\n          </div>\r\n          <Button\r\n            variant=\"outline\"\r\n            className=\"flex items-center gap-4 text-white cursor-pointer hover:text-white bg-white/5 p-3 h-14 rounded-full border border-white/10 hover:bg-white/10 transition-all group\"\r\n          >\r\n            <span className=\"font-bold\">Contact Us</span>\r\n            <div className=\"w-8 h-8 bg-[#00D1FF]/20 text-[#00D1FF] rounded-full flex items-center justify-center group-hover:bg-[#00D1FF] group-hover:text-black transition-all\">\r\n              <svg\r\n                className=\"w-5 h-5\"\r\n                fill=\"none\"\r\n                viewBox=\"0 0 24 24\"\r\n                stroke=\"currentColor\"\r\n              >\r\n                <path\r\n                  strokeLinecap=\"round\"\r\n                  strokeLinejoin=\"round\"\r\n                  strokeWidth={2}\r\n                  d=\"M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z\"\r\n                />\r\n              </svg>\r\n            </div>\r\n          </Button>\r\n        </TimelineAnimation>\r\n\r\n        <TimelineAnimation\r\n          timelineRef={timelineRef}\r\n          animationNum={7}\r\n          className=\"flex gap-4 mt-8\"\r\n        >\r\n          <div className=\"p-3 bg-white/5 rounded-xl text-neutral-400 hover:text-white transition-colors cursor-pointer\">\r\n            <Icons.LinkedIn />\r\n          </div>\r\n          <div className=\"p-3 bg-white/5 rounded-xl text-neutral-400 hover:text-white transition-colors cursor-pointer\">\r\n            <Icons.Instagram />\r\n          </div>\r\n          <div className=\"p-3 bg-white/5 rounded-xl text-neutral-400 hover:text-white transition-colors cursor-pointer\">\r\n            <Icons.Twitter />\r\n          </div>\r\n        </TimelineAnimation>\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"
}