{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "about-vision",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/about-section/about-vision.tsx",
      "content": "'use client'\r\nimport { cn } from '@/lib/utils'\r\nimport { Button } from '@repo/shadcn'\r\nimport { motion } from 'motion/react'\r\n\r\nexport const AboutVision = () => {\r\n  return (\r\n    <section className=\"relative overflow-hidden bg-white text-black font-dmSans\">\r\n      <div className=\"relative h-72 flex flex-col items-center justify-center overflow-hidden\">\r\n        <div className=\"absolute inset-0 z-0\">\r\n          <img\r\n            src=\"https://images.unsplash.com/photo-1553729459-efe14ef6055d?q=80&w=1170&auto=format&fit=crop\"\r\n            alt=\"Consultation\"\r\n            className=\"w-full h-full object-cover\"\r\n          />\r\n          <div className=\"absolute inset-0 bg-black/60 backdrop-blur-[2px]\" />\r\n        </div>\r\n        <div className=\"relative z-10 text-center space-y-4\">\r\n          <motion.h1\r\n            initial={{ opacity: 0, y: 10 }}\r\n            animate={{ opacity: 1, y: 0 }}\r\n            className=\"text-5xl font-bold text-white tracking-tight\"\r\n          >\r\n            About Us\r\n          </motion.h1>\r\n          <div className=\"flex items-center justify-center gap-2 text-xs font-medium uppercase tracking-widest text-zinc-300\">\r\n            <span>Home</span>\r\n            <span className=\"text-blue-500\">→</span>\r\n            <span className=\"text-blue-500 font-bold\">About</span>\r\n          </div>\r\n        </div>\r\n        <div className=\"absolute bottom-0 w-full h-12 bg-white z-20\" />\r\n      </div>\r\n\r\n      <div className=\"pb-32 px-6 max-w-7xl mx-auto\">\r\n        <div className=\"grid lg:grid-cols-12 gap-10 items-stretch\">\r\n          <div className=\"lg:col-span-5 space-y-6 flex flex-col\">\r\n            {[\r\n              {\r\n                title: 'Our Vision',\r\n                bg: 'bg-blue-50',\r\n                color: 'text-blue-950',\r\n              },\r\n              {\r\n                title: 'Our Mission',\r\n                bg: 'bg-blue-50',\r\n                color: 'text-blue-950',\r\n              },\r\n              {\r\n                title: 'Our History',\r\n                bg: 'bg-blue-800',\r\n                color: 'text-black',\r\n                textColor: 'text-white/70',\r\n              },\r\n            ].map((card, i) => (\r\n              <motion.div\r\n                key={card.title}\r\n                initial={{ opacity: 0, y: 15 }}\r\n                whileInView={{ opacity: 1, y: 0 }}\r\n                viewport={{ once: true }}\r\n                transition={{ delay: i * 0.1 }}\r\n                className={cn(\r\n                  card.bg,\r\n                  'p-10 rounded-[2.5rem] flex-1 shadow-sm'\r\n                )}\r\n              >\r\n                <div\r\n                  className={cn(\r\n                    'inline-block px-5 py-2 bg-white rounded-xl mb-6 shadow-sm',\r\n                    card.color\r\n                  )}\r\n                >\r\n                  <span className=\"text-sm font-bold\">{card.title}</span>\r\n                </div>\r\n                <p\r\n                  className={cn(\r\n                    card.textColor || 'text-zinc-500',\r\n                    'text-sm leading-relaxed text-pretty'\r\n                  )}\r\n                >\r\n                  Fusce sed pellentesque dui. Nunc lacinia, nibh vitae gravida\r\n                  condimentum, turpis neque commodo mauris, id rutrum lacus nisl\r\n                  a risus.\r\n                </p>\r\n              </motion.div>\r\n            ))}\r\n          </div>\r\n\r\n          {/* Right Column: Large Dark Card */}\r\n          <motion.div\r\n            initial={{ opacity: 0, scale: 0.98 }}\r\n            whileInView={{ opacity: 1, scale: 1 }}\r\n            viewport={{ once: true }}\r\n            className=\"lg:col-span-7 relative rounded-[3rem] overflow-hidden p-12 md:p-20 flex flex-col justify-end text-white\"\r\n          >\r\n            <div className=\"absolute inset-0 z-0\">\r\n              <img\r\n                src=\"https://images.unsplash.com/photo-1560520653-9e0e4c89eb11?q=80&w=1200\"\r\n                alt=\"Plan\"\r\n                className=\"w-full h-full object-cover grayscale opacity-40\"\r\n              />\r\n              <div className=\"absolute inset-0 bg-blue-950/80\" />\r\n            </div>\r\n\r\n            <div className=\"relative z-10 space-y-8 max-w-xl\">\r\n              <h2 className=\"text-4xl md:text-5xl font-bold tracking-tight leading-tight\">\r\n                Our Plan Makes You Feel More Comfortable in Tax Management\r\n              </h2>\r\n              <p className=\"text-zinc-400 leading-relaxed text-pretty text-sm\">\r\n                Nulla semper condimentum tellus in ultricies. Nunc tempor ipsum\r\n                nec fermentum consequat. Cras et felis ultricies.\r\n              </p>\r\n              <div className=\"pt-6\">\r\n                <Button className=\"bg-blue-900 text-white px-8 py-3.5 rounded-full text-xs font-bold transition-transform hover:scale-105 active:scale-95 shadow-lg shadow-blue-900/20\">\r\n                  Contact Us\r\n                </Button>\r\n              </div>\r\n            </div>\r\n          </motion.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"
}