{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "about-creative",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/about-section/about-creative.tsx",
      "content": "'use client'\r\n\r\nimport React from 'react'\r\nimport { motion } from 'motion/react'\r\nimport { Button } from '@repo/shadcn'\r\n\r\nconst values = [\r\n  {\r\n    number: '01',\r\n    title: 'Who We Are',\r\n    description:\r\n      'A diverse collective of thinkers, makers, and problem solvers dedicated to pushing boundaries.',\r\n  },\r\n  {\r\n    number: '02',\r\n    title: 'What Do We Do',\r\n    description:\r\n      'We craft digital experiences that resonate, using state-of-the-art technology and timeless design.',\r\n  },\r\n  {\r\n    number: '03',\r\n    title: 'How Do We Help',\r\n    description:\r\n      'Through deep collaboration and strategic thinking, we help brands navigate the modern digital landscape.',\r\n  },\r\n  {\r\n    number: '04',\r\n    title: 'Create Success',\r\n    description:\r\n      'Our goal is measurable impact and lasting legacy for every client we partner with.',\r\n  },\r\n]\r\n\r\nexport const AboutCreative = () => {\r\n  return (\r\n    <section className=\"py-32 px-6 bg-white text-black overflow-hidden relative min-h-screen\">\r\n      <div className=\"max-w-7xl mx-auto z-10 relative\">\r\n        <div className=\"flex flex-col md:flex-row justify-between items-start gap-12 mb-32\">\r\n          <h2 className=\"text-5xl md:text-6xl font-semibold tracking-tighter\">\r\n            Our Core <br />\r\n            <span className=\"italic\">Philosophy</span>\r\n          </h2>\r\n          <div className=\"max-w-md space-y-6\">\r\n            <p className=\"text-zinc-500 text-lg md:text-xl text-pretty leading-relaxed\">\r\n              At Kreativy, we take pride in our values — service, integrity, and\r\n              excellence. We're driven by the desire to build something\r\n              meaningful.\r\n            </p>\r\n            <Button className=\"h-12 px-6 dark:hover:bg-zinc-50 border text-black border-zinc-200 bg-zinc-100 rounded-full text-sm font-bold hover:bg-zinc-50 transition-colors active:scale-95\">\r\n              Read our values\r\n            </Button>\r\n          </div>\r\n        </div>\r\n\r\n        <div className=\"grid lg:grid-cols-2 gap-24 items-start\">\r\n          <div className=\"grid sm:grid-cols-2 \">\r\n            {values.map((v, i) => (\r\n              <motion.div\r\n                key={v.title}\r\n                initial={{ opacity: 0, y: 15 }}\r\n                whileInView={{ opacity: 1, y: 0 }}\r\n                viewport={{ once: true, margin: '-50px' }}\r\n                transition={{ duration: 0.3, delay: i * 0.05, ease: 'easeOut' }}\r\n                className=\"group hover:bg-zinc-100 p-6 border border-transparent hover:border-zinc-300 transition-colors duration-300\"\r\n              >\r\n                <div className=\"text-xs font-black text-zinc-300 mb-4 tracking-tighter  group-hover:text-black transition-colors duration-300\">\r\n                  {v.number}\r\n                </div>\r\n                <h3 className=\"text-xl font-bold mb-3 tracking-tight font-spaceGrotesk\">\r\n                  {v.title}\r\n                </h3>\r\n                <p className=\"text-zinc-500 leading-relaxed text-sm text-pretty\">\r\n                  {v.description}\r\n                </p>\r\n              </motion.div>\r\n            ))}\r\n          </div>\r\n\r\n          <div className=\"grid grid-cols-2 gap-6 relative\">\r\n            <motion.div\r\n              initial={{ opacity: 0, scale: 0.95 }}\r\n              whileInView={{ opacity: 1, scale: 1 }}\r\n              viewport={{ once: true }}\r\n              transition={{ duration: 0.5, ease: 'easeOut' }}\r\n              className=\"space-y-6\"\r\n            >\r\n              <div className=\"aspect-4/5 rounded-3xl bg-zinc-100 overflow-hidden shadow-inner group\">\r\n                <img\r\n                  src=\"https://images.unsplash.com/photo-1497366216548-37526070297c?q=80&w=800\"\r\n                  alt=\"Workspace\"\r\n                  className=\"object-cover size-full grayscale group-hover:grayscale-0 transition-all duration-700\"\r\n                />\r\n              </div>\r\n              <div className=\"aspect-square rounded-3xl bg-zinc-100 overflow-hidden shadow-inner group\">\r\n                <img\r\n                  src=\"https://images.unsplash.com/photo-1497366811353-6870744d04b2?q=80&w=800\"\r\n                  alt=\"Collaboration\"\r\n                  className=\"object-cover size-full grayscale group-hover:grayscale-0 transition-all duration-700\"\r\n                />\r\n              </div>\r\n            </motion.div>\r\n            <motion.div\r\n              initial={{ opacity: 0, scale: 0.95 }}\r\n              whileInView={{ opacity: 1, scale: 1 }}\r\n              viewport={{ once: true }}\r\n              transition={{ duration: 0.5, ease: 'easeOut', delay: 0.1 }}\r\n              className=\"space-y-6 pt-12\"\r\n            >\r\n              <div className=\"aspect-square rounded-3xl bg-zinc-100 overflow-hidden shadow-inner group\">\r\n                <img\r\n                  src=\"https://images.unsplash.com/photo-1497215728101-856f4ea42174?q=80&w=800\"\r\n                  alt=\"Process\"\r\n                  className=\"object-cover size-full grayscale group-hover:grayscale-0 transition-all duration-700\"\r\n                />\r\n              </div>\r\n              <div className=\"aspect-4/5 rounded-3xl bg-zinc-100 overflow-hidden shadow-inner group\">\r\n                <img\r\n                  src=\"https://images.unsplash.com/photo-1497366754035-f200968a6e72?q=80&w=800\"\r\n                  alt=\"Detail\"\r\n                  className=\"object-cover size-full grayscale group-hover:grayscale-0 transition-all duration-700\"\r\n                />\r\n              </div>\r\n            </motion.div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div className=\"absolute bottom-0 left-0 right-0 top-0 bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] bg-size-[16px_16px] mask-[radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]\"></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"
}