{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "impact-experience",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/experience-section/impact-experience.tsx",
      "content": "'use client'\r\nimport React from 'react'\r\nimport { cn } from '@/lib/utils'\r\n\r\ninterface ExperienceItemProps {\r\n  index: string\r\n  className?: string\r\n  company: string\r\n  tagline: string\r\n  period: string\r\n  position: string\r\n  location: string\r\n  industry: string\r\n  website?: string\r\n  description: string[]\r\n}\r\n\r\nconst ExperienceItem: React.FC<ExperienceItemProps> = ({\r\n  index,\r\n  className,\r\n  company,\r\n  tagline,\r\n  period,\r\n  position,\r\n  location,\r\n  industry,\r\n  website,\r\n  description,\r\n}) => {\r\n  return (\r\n    <div className={cn('relative')}>\r\n      <div\r\n        className={cn(\r\n          'grid grid-cols-1 group px-4 md:grid-cols-12 gap-8 py-16 border-neutral-200 overflow-hidden z-10 relative w-full',\r\n          className\r\n        )}\r\n      >\r\n        {index === '1' && (\r\n          <img\r\n            src=\"https://images.unsplash.com/photo-1763010156322-2fb80d48ea8b?q=80&w=1760&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\r\n            alt=\"\"\r\n            className=\"absolute top-0 left-0 w-full h-full object-cover opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-out\"\r\n          />\r\n        )}\r\n        {index === '2' && (\r\n          <img\r\n            src=\"https://images.unsplash.com/photo-1762227144867-c66aee797440?q=80&w=1760&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\r\n            alt=\"\"\r\n            className=\"absolute top-0 left-0 w-full h-full object-cover opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-out\"\r\n          />\r\n        )}\r\n        {index === '3' && (\r\n          <img\r\n            src=\"https://images.unsplash.com/photo-1764138370667-d15f89ee1c45?q=80&w=1760&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\r\n            alt=\"\"\r\n            className=\"absolute top-0 left-0 w-full h-full object-cover opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-out\"\r\n          />\r\n        )}\r\n\r\n        <div className=\"md:col-span-3 space-y-4 relative z-10\">\r\n          <h3 className=\"text-4xl font-bold text-neutral-900 leading-tight\">\r\n            {company}\r\n          </h3>\r\n          <div className=\"space-y-1\">\r\n            <p className=\"text-sm group-hover:text-neutral-800 text-neutral-500 font-medium\">\r\n              {tagline}\r\n            </p>\r\n            <p className=\"text-sm group-hover:text-neutral-800 text-neutral-500 tabular-nums\">\r\n              {period}\r\n            </p>\r\n          </div>\r\n        </div>\r\n\r\n        <div className=\"md:col-span-4 space-y-4 relative z-10\">\r\n          <div className=\"grid grid-cols-2 gap-y-4\">\r\n            <span className=\"text-sm group-hover:text-neutral-800 text-neutral-500\">\r\n              Position\r\n            </span>\r\n            <span className=\"text-sm font-semibold text-neutral-900\">\r\n              {position}\r\n            </span>\r\n\r\n            <span className=\"text-sm group-hover:text-neutral-800 text-neutral-500\">\r\n              Location\r\n            </span>\r\n            <span className=\"text-sm font-semibold text-neutral-900\">\r\n              {location}\r\n            </span>\r\n\r\n            <span className=\"text-sm group-hover:text-neutral-800 text-neutral-500\">\r\n              Industry\r\n            </span>\r\n            <span className=\"text-sm font-semibold text-neutral-900\">\r\n              {industry}\r\n            </span>\r\n\r\n            {website && (\r\n              <>\r\n                <span className=\"text-sm group-hover:text-neutral-800 text-neutral-500\">\r\n                  Website\r\n                </span>\r\n                <a\r\n                  href={`https://${website}`}\r\n                  className=\"text-sm font-semibold text-neutral-900 border-b border-neutral-900 w-fit inline-flex items-center gap-1\"\r\n                >\r\n                  {website} <span className=\"text-xs\">↗</span>\r\n                </a>\r\n              </>\r\n            )}\r\n          </div>\r\n        </div>\r\n\r\n        <div className=\"md:col-span-5 space-y-6 relative z-10\">\r\n          {description.map((para, i) => (\r\n            <p\r\n              key={i}\r\n              className=\"group-hover:text-neutral-800 text-neutral-600 leading-relaxed text-pretty\"\r\n            >\r\n              {para}\r\n            </p>\r\n          ))}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n\r\nexport const ImpactExperience: React.FC = () => {\r\n  return (\r\n    <section className=\"bg-zinc-50 min-h-screen px-5\">\r\n      <div className=\"max-w-7xl mx-auto \">\r\n        <h2 className=\"text-6xl px-5 font-bold bg-zinc-100 border-neutral-200 tracking-tight py-10 text-neutral-900 border-x rounded-b-xl\">\r\n          EXPERIENCE\r\n        </h2>\r\n        <ExperienceItem\r\n          index=\"1\"\r\n          company=\"Northline\"\r\n          tagline=\"Building modern financial tools\"\r\n          period=\"2022 — Present\"\r\n          position=\"Frontend Engineer\"\r\n          location=\"Remote\"\r\n          industry=\"Fintech\"\r\n          website=\"www.northline.co\"\r\n          className=\"border rounded-xl bg-zinc-100\"\r\n          description={[\r\n            'I focus on crafting clean, scalable interfaces for a consumer-facing web platform, translating product requirements into intuitive and accessible user experiences.',\r\n            'My work involves building reusable UI components, improving design consistency, and collaborating with cross-functional teams to ship features efficiently while maintaining a high visual and technical standard.',\r\n          ]}\r\n        />\r\n\r\n        <ExperienceItem\r\n          index=\"2\"\r\n          company=\"Habitatly\"\r\n          tagline=\"Simplifying property exploration\"\r\n          period=\"2020 — 2021\"\r\n          position=\"Frontend Developer\"\r\n          location=\"Berlin, Germany\"\r\n          industry=\"Real Estate Technology\"\r\n          className=\"rounded-xl border-x h-full bg-zinc-100\"\r\n          description={[\r\n            'I contributed to the development of a property discovery application, working across key user flows such as onboarding, search, and detailed listing views.',\r\n            'Beyond feature development, I helped refine UI patterns and improve performance across devices, ensuring a smooth and responsive experience for everyday users.',\r\n          ]}\r\n        />\r\n        <ExperienceItem\r\n          index=\"3\"\r\n          company=\"Brightstack\"\r\n          tagline=\"Tools for growing digital products\"\r\n          className=\"border-t rounded-t-xl border-x h-full bg-zinc-100\"\r\n          period=\"2021 — 2023\"\r\n          position=\"UI Engineer\"\r\n          location=\"Remote\"\r\n          industry=\"SaaS\"\r\n          website=\"www.brightstack.app\"\r\n          description={[\r\n            'I worked on building and refining user interfaces for a web-based product used by small teams to manage workflows and internal tools.',\r\n            'My responsibilities included developing reusable components, improving layout responsiveness, and collaborating with product and design to ship features that balanced usability with visual clarity.',\r\n          ]}\r\n        />\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"
}