{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "about-mission",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/about-section/about-mission.tsx",
      "content": "'use client'\r\nimport { Button } from '@repo/shadcn'\r\nimport { ChevronDown, Atom, Clapperboard, Columns3 } from 'lucide-react'\r\n\r\nexport const AboutMission = () => {\r\n  return (\r\n    <section className=\"min-h-screen overflow-hidden bg-linear-to-br dark:from-neutral-800 from-slate-50 to-blue-50 dark:to-neutral-950\">\r\n      <div className=\"py-20 relative flex flex-col justify-center items-center gap-y-8 z-10\">\r\n        <span>ABOUT US</span>\r\n        <span className=\"text-6xl max-w-3xl mx-auto text-center font-medium\">\r\n          We are driven by the vision of sustainable future\r\n        </span>\r\n        <Button className=\"flex gap-2 items-center border-2 backdrop-blur-md border-black rounded-full p-2 px-3 cursor-pointer\">\r\n          Scroll Down <ChevronDown />\r\n        </Button>\r\n        <div className=\"absolute bottom-0 left-0 right-0 top-0 z-0 pointer-events-none bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-size-[48px_50px] mask-[radial-gradient(ellipse_25%_30%_at_50%_50%,#000_65%,transparent_110%)]\"></div>\r\n      </div>\r\n\r\n      <div className=\"p-8 lg:p-12\">\r\n        <div className=\"max-w-5xl mx-auto md:flex text-left gap-10\">\r\n          <h2 className=\"text-3xl lg:text-4xl lg:w-72 w-52 uppercase font-medium mb-8 shrink-0\">\r\n            Our Mission\r\n          </h2>\r\n          <div className=\"\">\r\n            <p className=\"text-xl dark:text-neutral-400 text-neutral-600 mb-12 leading-relaxed\">\r\n              We believe technology should empower everyone to create, innovate,\r\n              and solve meaningful problems. Our mission is to democratize\r\n              access to powerful tools that were once only available to large\r\n              corporations.\r\n            </p>\r\n            <div className=\"grid md:grid-cols-3 gap-8\">\r\n              <div className=\"text-center\">\r\n                <div className=\"w-16 h-16 dark:bg-blue-950/50 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4\">\r\n                  <Atom className=\"text-blue-500\" />\r\n                </div>\r\n                <h3 className=\"text-xl font-semibold dark:text-neutral-200 text-neutral-900 mb-2\">\r\n                  Innovation\r\n                </h3>\r\n                <p className=\"text-neutral-600\">\r\n                  Pushing boundaries with cutting-edge technology\r\n                </p>\r\n              </div>\r\n              <div className=\"text-center\">\r\n                <div className=\"w-16 h-16 dark:bg-green-950/50 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4\">\r\n                  <Columns3 className=\"text-green-500\" />\r\n                </div>\r\n                <h3 className=\"text-xl font-semibold dark:text-neutral-200 text-neutral-900 mb-2\">\r\n                  Accessibility\r\n                </h3>\r\n                <p className=\"text-neutral-600\">\r\n                  Making powerful tools available to everyone\r\n                </p>\r\n              </div>\r\n              <div className=\"text-center\">\r\n                <div className=\"w-16 h-16 dark:bg-purple-950/50 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4\">\r\n                  <Clapperboard className=\"text-purple-500\" />\r\n                </div>\r\n                <h3 className=\"text-xl font-semibold dark:text-neutral-200 text-neutral-900 mb-2\">\r\n                  Impact\r\n                </h3>\r\n                <p className=\"text-neutral-600\">\r\n                  Creating meaningful change in the world\r\n                </p>\r\n              </div>\r\n            </div>\r\n          </div>\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"
}