{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "about-architecture",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/about-section/about-architecture.tsx",
      "content": "'use client'\r\n\r\nimport React from 'react'\r\nimport { motion } from 'motion/react'\r\n\r\nexport const AboutArchitecture = () => {\r\n  return (\r\n    <section className=\"py-32 px-6 bg-white overflow-hidden text-black\">\r\n      <div className=\"max-w-7xl mx-auto\">\r\n        <div className=\"grid lg:grid-cols-12 gap-12 items-end mb-24\">\r\n          <div className=\"lg:col-span-8\">\r\n            <motion.div\r\n              initial={{ opacity: 0, x: -10 }}\r\n              whileInView={{ opacity: 1, x: 0 }}\r\n              className=\"flex items-center gap-4 mb-8\"\r\n            >\r\n              <span className=\"text-[10px] font-black uppercase tracking-[0.4em] text-zinc-400\">\r\n                Established 1984\r\n              </span>\r\n              <div className=\"h-px w-12 bg-zinc-200\" />\r\n              <span className=\"text-[10px] font-black uppercase tracking-[0.4em] text-black\">\r\n                About the Studio\r\n              </span>\r\n            </motion.div>\r\n            <h2 className=\"text-7xl md:text-9xl font-spaceGrotesk font-bold tracking-tighter leading-none text-balance\">\r\n              Building <br /> <span className=\"italic\">Modernity</span>.\r\n            </h2>\r\n          </div>\r\n          <div className=\"lg:col-span-4 pb-4\">\r\n            <p className=\"text-zinc-500 text-lg text-pretty leading-relaxed\">\r\n              We specialize in the intersection of organic form and industrial\r\n              precision, crafting spaces that breathe and evolve with their\r\n              inhabitants.\r\n            </p>\r\n          </div>\r\n        </div>\r\n\r\n        <div className=\"grid md:grid-cols-2 gap-12\">\r\n          <div className=\"space-y-12\">\r\n            <div className=\"aspect-3/4 overflow-hidden rounded-sm group relative\">\r\n              <img\r\n                src=\"https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=1000\"\r\n                className=\"object-cover size-full grayscale group-hover:grayscale-0 transition-all duration-1000\"\r\n                alt=\"Architecture detail\"\r\n              />\r\n              <div className=\"absolute bottom-8 left-8 text-white mix-blend-difference\">\r\n                <span className=\"text-xs font-mono\">\r\n                  01 / STRUCTURAL INTEGRITY\r\n                </span>\r\n              </div>\r\n            </div>\r\n            <div className=\"max-w-md\">\r\n              <h3 className=\"text-2xl font-bold mb-2 font-spaceGrotesk\">\r\n                Material First\r\n              </h3>\r\n              <p className=\"text-zinc-400 text-sm leading-relaxed text-pretty\">\r\n                Our approach begins with the raw elements. Concrete, steel, and\r\n                light. We believe that architecture should be as much about the\r\n                void as it is about the solid.\r\n              </p>\r\n            </div>\r\n          </div>\r\n\r\n          <div className=\"space-y-12 pt-24\">\r\n            <div className=\"max-w-md ml-auto text-right\">\r\n              <h3 className=\"text-2xl font-bold mb-2 font-spaceGrotesk\">\r\n                Environmental Flow\r\n              </h3>\r\n              <p className=\"text-zinc-400 text-sm leading-relaxed text-pretty\">\r\n                Sustainability is not a feature; it is the foundation. Every\r\n                line we draw considers the path of the sun and the movement of\r\n                the wind.\r\n              </p>\r\n            </div>\r\n            <div className=\"aspect-3/4 overflow-hidden rounded-sm group relative\">\r\n              <img\r\n                src=\"https://images.unsplash.com/photo-1511818966892-d7d671e672a2?q=80&w=1000\"\r\n                className=\"object-cover size-full grayscale group-hover:grayscale-0 transition-all duration-1000\"\r\n                alt=\"Architecture light\"\r\n              />\r\n              <div className=\"absolute bottom-8 right-8 text-white mix-blend-difference\">\r\n                <span className=\"text-xs font-mono\">02 / NATURAL LIGHTING</span>\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"
}