{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "about-agency",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/about-section/about-agency.tsx",
      "content": "'use client'\r\nimport { Button } from '@repo/shadcn'\r\nimport { motion } from 'motion/react'\r\n\r\nexport const AboutAgency = () => {\r\n  return (\r\n    <section className=\"relative pt-24 pb-32 px-6 overflow-hidden bg-white text-black\">\r\n      <div className=\"max-w-7xl mx-auto\">\r\n        <div className=\"grid lg:grid-cols-2 gap-16 items-start\">\r\n          <div className=\"space-y-10\">\r\n            <motion.div\r\n              initial={{ opacity: 0, x: -20 }}\r\n              animate={{ opacity: 1, x: 0 }}\r\n              transition={{ duration: 0.4, ease: 'easeOut' }}\r\n            >\r\n              <h1 className=\"text-7xl md:text-8xl font-bold font-spaceGrotesk tracking-tighter \">\r\n                About our <br /> agency.\r\n              </h1>\r\n            </motion.div>\r\n\r\n            <motion.div\r\n              initial={{ opacity: 0, y: 10 }}\r\n              animate={{ opacity: 1, y: 0 }}\r\n              transition={{ duration: 0.4, ease: 'easeOut', delay: 0.1 }}\r\n              className=\"space-y-6\"\r\n            >\r\n              <p className=\"text-xl md:text-2xl text-zinc-600 max-w-xl text-pretty leading-relaxed\">\r\n                Based in the vibrant heart of Sydney, Australia, KreativyLab is\r\n                not just a digital agency; we're your partners in creativity.\r\n              </p>\r\n              <p className=\"text-lg text-zinc-400 max-w-lg text-pretty\">\r\n                Our mission is to turn your dreams into reality, one pixel at a\r\n                time. With a diverse team of designers, developers, and\r\n                innovators.\r\n              </p>\r\n\r\n              <div className=\"pt-4\">\r\n                <Button className=\"h-12 px-8 bg-black dark:hover:bg-black/90 hover:bg-black/90 text-white rounded-full font-bold text-sm transition-transform active:scale-95 duration-200\">\r\n                  Our Portfolio\r\n                </Button>\r\n              </div>\r\n            </motion.div>\r\n          </div>\r\n\r\n          <motion.div\r\n            initial={{ opacity: 0, scale: 0.98 }}\r\n            animate={{ opacity: 1, scale: 1 }}\r\n            transition={{ duration: 0.5, ease: 'easeOut', delay: 0.2 }}\r\n            className=\"relative aspect-4/5 lg:aspect-square overflow-hidden rounded-3xl bg-zinc-100 shadow-2xl\"\r\n          >\r\n            <img\r\n              src=\"https://images.unsplash.com/photo-1522071820081-009f0129c71c?q=80&w=1000&auto=format&fit=crop\"\r\n              alt=\"Our creative team in action\"\r\n              className=\"object-cover w-full h-full grayscale hover:grayscale-0 transition-all duration-700 ease-in-out\"\r\n            />\r\n            <div className=\"absolute top-8 right-8\">\r\n              <motion.div\r\n                animate={{ rotate: 360 }}\r\n                transition={{ duration: 20, repeat: Infinity, ease: 'linear' }}\r\n                className=\"size-28 rounded-full bg-white/10 backdrop-blur-md border border-white/20 flex items-center justify-center p-4 text-center\"\r\n              >\r\n                <span className=\"text-xs font-black uppercase text-white tracking-[0.2em] leading-tight\">\r\n                  Design • Strategy • Future\r\n                </span>\r\n              </motion.div>\r\n            </div>\r\n          </motion.div>\r\n        </div>\r\n\r\n        <motion.div\r\n          initial={{ opacity: 0 }}\r\n          whileInView={{ opacity: 1 }}\r\n          viewport={{ once: true }}\r\n          transition={{ duration: 0.6 }}\r\n          className=\"mt-32 pt-16 border-t border-zinc-100 flex flex-col md:flex-row justify-between gap-12\"\r\n        >\r\n          <p className=\"text-3xl md:text-4xl font-medium text-zinc-900 leading-[1.15] text-pretty max-w-3xl\">\r\n            Founded with a vision to redefine design through a modern and\r\n            friendly lens, we've become more than just a design agency; we're a\r\n            community of kindred spirits who share a passion for artistry and\r\n            innovation.\r\n          </p>\r\n          <div className=\"text-sm font-bold font-spaceGrotesk text-zinc-400 uppercase tracking-widest pt-2\">\r\n            Since 2023\r\n          </div>\r\n        </motion.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"
}