{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "team-demo",
  "title": "Team Demo",
  "description": "Demo showing team component.",
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/scroll-animation"
  ],
  "files": [
    {
      "path": "registry/demo/scroll-animations/team/index.tsx",
      "content": "import { cn } from '@/lib/utils';\nimport {\n  ScrollAnimation,\n  ScrollScale,\n  ScrollTranslateX,\n  ScrollTranslateY,\n} from '@/components/systaliko-ui/scroll-animations/scroll-animation';\nimport Image from 'next/image';\n\ninterface TeamMember {\n  avatar: string;\n  name: string;\n  role: string;\n}\nconst TEAM_MEMBERS: TeamMember[] = [\n  {\n    avatar:\n      'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=700&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8cGVvcGxlfGVufDB8fDB8fHww',\n    name: 'Magdalina',\n    role: 'CEO',\n  },\n  {\n    avatar:\n      'https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?w=700&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8cGVvcGxlfGVufDB8fDB8fHww',\n    name: 'Jamie',\n    role: 'CTO',\n  },\n  {\n    avatar:\n      'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=700&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fHBlb3BsZXxlbnwwfHwwfHx8MA%3D%3D',\n    name: 'Emilio',\n    role: 'CTO',\n  },\n  {\n    avatar:\n      'https://images.unsplash.com/photo-1580489944761-15a19d654956?w=700&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjZ8fHBlb3BsZXxlbnwwfHwwfHx8MA%3D%3D',\n    name: 'Samia',\n    role: 'COO',\n  },\n  {\n    avatar:\n      'https://images.unsplash.com/photo-1522556189639-b150ed9c4330?w=700&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzB8fHBlb3BsZXxlbnwwfHwwfHx8MA%3D%3D',\n    name: 'Alex',\n    role: 'Engineer',\n  },\n  {\n    avatar:\n      'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=700&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDl8fHBlb3BsZXxlbnwwfHwwfHx8MA%3D%3D',\n    name: 'Ema',\n    role: 'Head of Product',\n  },\n  {\n    avatar:\n      'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=700&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDZ8fHBlb3BsZXxlbnwwfHwwfHx8MA%3D%3D',\n    name: 'Carlos',\n    role: 'Engineer',\n  },\n  {\n    avatar:\n      'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=700&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTZ8fHBlb3BsZXxlbnwwfHwwfHx8MA%3D%3D',\n    name: 'Campos',\n    role: 'Engineer',\n  },\n];\n\nexport function TeamCard({\n  member,\n  className,\n  ...props\n}: React.ComponentProps<'div'> & { member: TeamMember }) {\n  return (\n    <div className={cn('space-y-6', className)} {...props}>\n      <Image\n        src={member.avatar}\n        alt={member.name}\n        width={200}\n        height={200}\n        className=\"aspect-square w-full\"\n      />\n\n      <div className=\"space-y-1 pb-4 px-4\">\n        <h3 className=\"text-xl font-medium\">{member.name}</h3>\n        <h4>{member.role}</h4>\n      </div>\n    </div>\n  );\n}\nexport function Team() {\n  return (\n    <ScrollAnimation className=\"overflow-hidden\">\n      <ScrollTranslateY className=\"min-h-svh flex flex-col justify-center items-center gap-6\">\n        <div className=\"w-full \">\n          <ScrollTranslateX\n            xRange={['-200%', '0%']}\n            inputRange={[0.4, 0.9]}\n            className=\"origin-bottom flex flex-nowrap gap-4\"\n          >\n            {TEAM_MEMBERS.map((member, index) => (\n              <TeamCard\n                className=\"min-w-[48vw] md:min-w-[20vw] bg-card border\"\n                key={index}\n                member={member}\n              />\n            ))}\n          </ScrollTranslateX>\n        </div>\n        <ScrollScale\n          inputRange={[0, 0.5]}\n          scaleRange={[1.4, 1]}\n          className=\"w-10/12 flex flex-col justify-center text-center items-center mx-auto origin-center\"\n        >\n          <h2 className=\"text-4xl md:text-5xl font-bold\">\n            Compact team of <span className=\"text-primary\">strategists</span>\n          </h2>\n        </ScrollScale>\n        <div className=\"w-full \">\n          <ScrollTranslateX\n            inputRange={[0.4, 0.9]}\n            xRange={['100%', '-50%']}\n            className=\"flex flex-nowrap gap-4\"\n          >\n            {TEAM_MEMBERS.map((member, index) => (\n              <TeamCard\n                className=\"min-w-[48vw] md:min-w-[20vw] bg-card border\"\n                key={index}\n                member={member}\n              />\n            ))}\n          </ScrollTranslateX>\n        </div>\n      </ScrollTranslateY>\n    </ScrollAnimation>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/demo/team.tsx"
    }
  ],
  "type": "registry:block"
}