{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-ai-infrastructure",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/hero-section/hero-ai-infrastructure.tsx",
      "content": "'use client'\r\nimport React, { Suspense, useRef } from 'react'\r\nimport { ArrowRight } from 'lucide-react'\r\nimport { ShaderGradient, ShaderGradientCanvas } from '@shadergradient/react'\r\nimport { TimelineAnimation } from '@/components/ui/timeline-animation'\r\nimport { useMediaQuery } from '@/hooks/use-media-query'\r\nimport MotionDrawer from '@/components/ui/motion-drawer'\r\n\r\nexport const HeroAiInfrastructure = () => {\r\n  const timelineRef = useRef<HTMLDivElement>(null)\r\n  const isMobile = useMediaQuery('(max-width: 768px)')\r\n\r\n  return (\r\n    <section\r\n      ref={timelineRef}\r\n      className=\"relative min-h-screen flex flex-col bg-black text-white w-full overflow-hidden\"\r\n    >\r\n      <Suspense>\r\n        <ShaderGradientCanvas\r\n          style={{\r\n            position: 'absolute',\r\n            top: 0,\r\n            left: 0,\r\n            width: '100vw',\r\n            height: '120vh',\r\n          }}\r\n          lazyLoad={undefined}\r\n          fov={undefined}\r\n          pixelDensity={1}\r\n          pointerEvents=\"none\"\r\n        >\r\n          <ShaderGradient\r\n            animate=\"on\"\r\n            type=\"sphere\"\r\n            wireframe={false}\r\n            shader=\"defaults\"\r\n            uTime={0}\r\n            uSpeed={0.3}\r\n            uStrength={0.4}\r\n            uDensity={0.8}\r\n            uFrequency={5.5}\r\n            uAmplitude={7}\r\n            positionX={0}\r\n            positionY={0}\r\n            positionZ={0}\r\n            rotationX={0}\r\n            rotationY={0}\r\n            rotationZ={140}\r\n            color1=\"#1f469a\"\r\n            color2=\"#000000\"\r\n            color3=\"#000000\"\r\n            reflection={0.5}\r\n            // View (camera) props\r\n            cAzimuthAngle={250}\r\n            cPolarAngle={140}\r\n            cDistance={1.5}\r\n            cameraZoom={12.5}\r\n            // Effect props\r\n            lightType=\"3d\"\r\n            brightness={1.5}\r\n            envPreset=\"city\"\r\n            grain=\"on\"\r\n            // Tool props\r\n            toggleAxis={false}\r\n            zoomOut={false}\r\n            hoverState=\"\"\r\n            // Optional - if using transition features\r\n            enableTransition={false}\r\n          />\r\n        </ShaderGradientCanvas>\r\n      </Suspense>\r\n      {isMobile && (\r\n        <div className=\"flex gap-4 justify-between items-center px-10 pt-4\">\r\n          <MotionDrawer\r\n            direction=\"left\"\r\n            width={300}\r\n            backgroundColor={'#000000'}\r\n            clsBtnClassName=\"bg-neutral-800 border-r border-neutral-900 text-white\"\r\n            contentClassName=\"bg-black border-r border-neutral-900 text-white\"\r\n            btnClassName=\"bg-white text-black relative w-fit p-2 left-0 top-0\"\r\n          >\r\n            <nav className=\"space-y-4 \">\r\n              <div className=\"flex items-center gap-2 text-white\">\r\n                <svg\r\n                  className=\"fill-white w-8 h-8\"\r\n                  width=\"97\"\r\n                  height=\"108\"\r\n                  viewBox=\"0 0 97 108\"\r\n                  fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\"\r\n                >\r\n                  <path d=\"M55.5 0C61.0005 0.00109895 64.5005 2.50586 64.5 7.5V17C64.5 24.5059 68.5005 27.5 81 27.5H88C94.0005 27.5059 96.5 29.5059 96.5 37.5V98.5C96.5 106.006 95.0005 107.5 88 107.5H41.5C36.5005 107.5 32 104.506 32 98.5V88C32 84.5 28.5 80 20.5 80H8.5C3 80 0 76.5 0 71.5V6.5C0.00048844 1.50586 2.50049 0.00585937 8.5 0H55.5ZM31 20C28.7909 20 27 21.7909 27 24V74C27 76.2091 28.7909 78 31 78H58C60.2091 78 62 76.2091 62 74V24C62 21.7909 60.2091 20 58 20H31Z\" />\r\n                </svg>\r\n                <span>UI-Layouts</span>\r\n              </div>\r\n              <a\r\n                href=\"#\"\r\n                className=\"block p-2 hover:bg-neutral-100 hover:text-black rounded-sm\"\r\n              >\r\n                Products\r\n              </a>\r\n              <a\r\n                href=\"#\"\r\n                className=\"block p-2 hover:bg-neutral-100 hover:text-black rounded-sm\"\r\n              >\r\n                Leaderboards\r\n              </a>\r\n              <a\r\n                href=\"#\"\r\n                className=\"block p-2 hover:bg-neutral-100 hover:text-black rounded-sm\"\r\n              >\r\n                Enterprise\r\n              </a>\r\n              <a\r\n                href=\"#\"\r\n                className=\"block p-2 hover:bg-neutral-100 hover:text-black rounded-sm\"\r\n              >\r\n                Government\r\n              </a>\r\n              <a\r\n                href=\"#\"\r\n                className=\"block p-2 hover:bg-neutral-100 hover:text-black rounded-sm\"\r\n              >\r\n                Customers\r\n              </a>\r\n            </nav>\r\n          </MotionDrawer>\r\n          <TimelineAnimation\r\n            as=\"button\"\r\n            timelineRef={timelineRef}\r\n            animationNum={2}\r\n            className=\"cursor-pointer bg-white/10 hover:bg-white/20 transition px-2 py-2 rounded text-sm font-medium border border-white/10 backdrop-blur-md\"\r\n          >\r\n            Register For Free\r\n          </TimelineAnimation>\r\n        </div>\r\n      )}\r\n      {!isMobile && (\r\n        <header className=\"relative z-10 flex items-center max-w-7xl mx-auto w-full justify-between px-8 py-6\">\r\n          <TimelineAnimation\r\n            timelineRef={timelineRef}\r\n            animationNum={1}\r\n            className=\"flex items-center gap-5\"\r\n          >\r\n            <div className=\"text-2xl font-semibold tracking-tight\">\r\n              <svg\r\n                className=\"fill-white w-8 h-8\"\r\n                width=\"97\"\r\n                height=\"108\"\r\n                viewBox=\"0 0 97 108\"\r\n                fill=\"none\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n              >\r\n                <path d=\"M55.5 0C61.0005 0.00109895 64.5005 2.50586 64.5 7.5V17C64.5 24.5059 68.5005 27.5 81 27.5H88C94.0005 27.5059 96.5 29.5059 96.5 37.5V98.5C96.5 106.006 95.0005 107.5 88 107.5H41.5C36.5005 107.5 32 104.506 32 98.5V88C32 84.5 28.5 80 20.5 80H8.5C3 80 0 76.5 0 71.5V6.5C0.00048844 1.50586 2.50049 0.00585937 8.5 0H55.5ZM31 20C28.7909 20 27 21.7909 27 24V74C27 76.2091 28.7909 78 31 78H58C60.2091 78 62 76.2091 62 74V24C62 21.7909 60.2091 20 58 20H31Z\" />\r\n              </svg>\r\n            </div>\r\n            <nav className=\"hidden md:flex items-center gap-6 text-md text-neutral-300\">\r\n              <a href=\"#\" className=\"hover:text-white transition\">\r\n                Products\r\n              </a>\r\n              <a href=\"#\" className=\"hover:text-white transition\">\r\n                Leaderboards\r\n              </a>\r\n              <a href=\"#\" className=\"hover:text-white transition\">\r\n                Enterprise\r\n              </a>\r\n              <a href=\"#\" className=\"hover:text-white transition\">\r\n                Government\r\n              </a>\r\n              <a href=\"#\" className=\"hover:text-white transition\">\r\n                Customers\r\n              </a>\r\n            </nav>\r\n          </TimelineAnimation>\r\n          <div className=\"flex items-center gap-4\">\r\n            <TimelineAnimation\r\n              as=\"button\"\r\n              timelineRef={timelineRef}\r\n              animationNum={2}\r\n              className=\"cursor-pointer bg-white/10 hover:bg-white/20 transition px-2 py-2 rounded text-sm font-medium border border-white/10 backdrop-blur-md\"\r\n            >\r\n              Register For Free\r\n            </TimelineAnimation>\r\n          </div>\r\n        </header>\r\n      )}\r\n\r\n      {/* Main Content */}\r\n      <div className=\"relative z-10 grow flex flex-col items-center justify-center text-center px-4 pt-24 mb-10\">\r\n        <TimelineAnimation\r\n          timelineRef={timelineRef}\r\n          animationNum={3}\r\n          className=\"border border-blue-800 flex items-center gap-2 rounded-2xl p-1 pr-3 bg-blue-800/50 backdrop-blur-lg\"\r\n        >\r\n          <span className=\"py-0.5 px-1 rounded-lg bg-blue-600 text-white\">\r\n            New\r\n          </span>\r\n          <span>Trusted by 999+ growing B2B teams</span>\r\n        </TimelineAnimation>\r\n        <TimelineAnimation\r\n          timelineRef={timelineRef}\r\n          as=\"h1\"\r\n          animationNum={4}\r\n          className=\"text-5xl md:text-7xl font-medium tracking-tight leading-[120%] max-w-5xl my-5\"\r\n        >\r\n          Powering the Next <br />\r\n          Generation of AI\r\n          <br />\r\n          Infrastructure\r\n        </TimelineAnimation>\r\n\r\n        <TimelineAnimation\r\n          timelineRef={timelineRef}\r\n          as=\"p\"\r\n          animationNum={5}\r\n          className=\"text-neutral-300 text-lg md:text-xl max-w-xl mb-10 font-light\"\r\n        >\r\n          High-quality data, scalable tooling, and reliable infrastructure to\r\n          build, train, and deploy AI systems faster and with confidence.\r\n        </TimelineAnimation>\r\n\r\n        <div className=\"flex flex-col sm:flex-row gap-4 items-center\">\r\n          <TimelineAnimation\r\n            timelineRef={timelineRef}\r\n            as=\"button\"\r\n            animationNum={6}\r\n            className=\"cursor-pointer bg-white text-black px-6 py-3 rounded-sm font-semibold flex items-center gap-2 hover:bg-neutral-200 transition\"\r\n          >\r\n            Book a Free Demo <ArrowRight size={18} />\r\n          </TimelineAnimation>\r\n          <TimelineAnimation\r\n            timelineRef={timelineRef}\r\n            as=\"button\"\r\n            animationNum={7}\r\n            className=\"cursor-pointer relative bg-white/10 hover:bg-white/20 transition px-8 py-3 rounded-sm font-semibold border border-white/20 backdrop-blur-md\"\r\n          >\r\n            Build With AI\r\n          </TimelineAnimation>\r\n        </div>\r\n      </div>\r\n\r\n      {/* Trusted By Logos */}\r\n      <div className=\"relative z-10 py-16 flex flex-col items-center\">\r\n        <TimelineAnimation\r\n          timelineRef={timelineRef}\r\n          as=\"p\"\r\n          animationNum={7}\r\n          className=\"text-neutral-400 md:text-xl text-nd text-center mb-8\"\r\n        >\r\n          Scale works with{' '}\r\n          <span className=\"text-white font-medium\">\r\n            Generative AI Companies\r\n          </span>\r\n          , U.S. Government Agencies & Enterprises\r\n        </TimelineAnimation>\r\n        <div className=\"flex flex-wrap justify-center items-center gap-12 opacity-60\">\r\n          <TimelineAnimation\r\n            timelineRef={timelineRef}\r\n            as=\"img\"\r\n            animationNum={8}\r\n            src=\"https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg\"\r\n            className=\"h-8\"\r\n            alt=\"google\"\r\n          />\r\n          <TimelineAnimation\r\n            timelineRef={timelineRef}\r\n            animationNum={9}\r\n            className=\"flex gap-2 text-2xl items-center\"\r\n          >\r\n            <img\r\n              src=\"https://upload.wikimedia.org/wikipedia/commons/4/44/Microsoft_logo.svg\"\r\n              className=\"h-6\"\r\n              alt=\"Microsoft\"\r\n            />\r\n            <span>Microsoft</span>\r\n          </TimelineAnimation>\r\n          <TimelineAnimation\r\n            timelineRef={timelineRef}\r\n            animationNum={10}\r\n            className=\"flex gap-2 text-2xl items-center\"\r\n          >\r\n            <img\r\n              src=\"https://upload.wikimedia.org/wikipedia/commons/3/33/Figma-logo.svg\"\r\n              className=\"h-6\"\r\n              alt=\"figma\"\r\n            />\r\n            <span>Figma</span>\r\n          </TimelineAnimation>\r\n          <TimelineAnimation\r\n            timelineRef={timelineRef}\r\n            as=\"img\"\r\n            animationNum={11}\r\n            src=\"https://upload.wikimedia.org/wikipedia/en/1/1f/Reddit_logo_2023.svg\"\r\n            className=\"h-6 invert\"\r\n            alt=\"reddit\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </section>\r\n  )\r\n}\r\n",
      "type": "registry:block"
    },
    {
      "path": "./components/ui/motion-drawer.tsx",
      "content": "'use client';\nimport { cn } from '@/lib/utils';\nimport { Menu, X } from 'lucide-react';\nimport { AnimatePresence, motion } from 'motion/react';\nimport type React from 'react';\nimport { useState } from 'react';\n\nexport type SideMenuDirection = 'left' | 'right';\nexport type ButtonOpeningVariants = 'push' | 'merge' | 'stay';\n\ninterface SideMenuProps {\n  // Appearance\n  overlayColor?: string;\n  width?: number;\n  direction?: SideMenuDirection;\n  backgroundColor?: string;\n\n  // Content\n  children: React.ReactNode;\n\n  // Behavior\n  isOpen?: boolean;\n  onToggle?: (isOpen: boolean) => void;\n  showToggleButton?: boolean;\n  toggleButtonText?: {\n    open: string;\n    close: string;\n  };\n\n  // Styling\n  btnClassName?: string;\n  className?: string;\n  contentClassName?: string;\n  clsBtnClassName?: string;\n  overlayClassName?: string;\n\n  // Animation\n  animationConfig?: {\n    type?: 'spring' | 'tween';\n    damping?: number;\n    stiffness?: number;\n    duration?: number;\n  };\n\n  // Drag behavior\n  enableDrag?: boolean;\n  dragThreshold?: number;\n\n  // New prop\n  buttonOpeningVariants?: ButtonOpeningVariants;\n}\n\nconst getOpenButtonVariants = (\n  direction: SideMenuDirection,\n  width: number,\n  type: ButtonOpeningVariants\n) => {\n  switch (type) {\n    case 'merge':\n      return direction === 'left'\n        ? {\n            closed: { x: 0, opacity: 1, scale: 1, borderRadius: '0.5rem' },\n            open: {\n              x: width - 68,\n              opacity: 0,\n              scale: 1,\n              borderRadius: '0rem',\n            },\n          }\n        : {\n            closed: { x: 0, opacity: 1, scale: 1, borderRadius: '0.5rem' },\n            open: {\n              x: 68 - width,\n              opacity: 0,\n              scale: 1,\n              borderRadius: '0rem',\n            },\n          };\n\n    case 'push':\n      return direction === 'left'\n        ? { closed: { x: 0, opacity: 1 }, open: { x: width + 20, opacity: 0 } }\n        : {\n            closed: { x: 0, opacity: 1 },\n            open: { x: -(width + 20), opacity: 0 },\n          };\n\n    case 'stay':\n    default:\n      return {\n        closed: { x: 0, opacity: 1 },\n        open: { x: 0, opacity: 0 },\n      };\n  }\n};\n\nconst MotionDrawer: React.FC<SideMenuProps> = ({\n  // Appearance\n  overlayColor = 'rgba(0, 0, 0, 0.3)',\n  width = 250,\n  direction = 'left',\n  backgroundColor = '#ffffff',\n\n  // Content\n  children,\n\n  // Behavior\n  isOpen: controlledIsOpen,\n  onToggle,\n  showToggleButton = true,\n\n  // Styling\n  btnClassName = '',\n  clsBtnClassName = '',\n  className = '',\n  contentClassName = '',\n  overlayClassName = '',\n\n  // Animation\n  animationConfig = {\n    type: 'spring',\n    damping: 25,\n    stiffness: 120,\n  },\n\n  // Drag behavior\n  enableDrag = true,\n  dragThreshold = 0.3,\n\n  buttonOpeningVariants = 'merge',\n}) => {\n  const [internalIsOpen, setInternalIsOpen] = useState<boolean>(false);\n\n  const isOpen = controlledIsOpen !== undefined ? controlledIsOpen : internalIsOpen;\n  const setIsOpen = (value: boolean) => {\n    if (controlledIsOpen === undefined) {\n      setInternalIsOpen(value);\n    }\n    onToggle?.(value);\n  };\n\n  const getDrawerVariants = () => {\n    if (direction === 'left') {\n      return {\n        closed: { x: -width },\n        open: { x: 0 },\n      };\n    } else {\n      return {\n        closed: { x: width },\n        open: { x: 0 },\n      };\n    }\n  };\n\n  const buttonVariants = getOpenButtonVariants(direction, width, buttonOpeningVariants);\n\n  const getDragConstraints = () => {\n    if (direction === 'left') {\n      return { left: -width, right: 0 };\n    } else {\n      return { left: 0, right: width };\n    }\n  };\n\n  const handleDragEnd = (_event: any, info: any) => {\n    if (!enableDrag) return;\n\n    const threshold = width * dragThreshold;\n    const dragDistance = Math.abs(info.offset.x);\n\n    if (direction === 'left') {\n      const isDraggingLeft = info.offset.x < 0;\n      if (isDraggingLeft && dragDistance > threshold && isOpen) {\n        setIsOpen(false);\n      } else if (!isDraggingLeft && dragDistance > threshold && !isOpen) {\n        setIsOpen(true);\n      }\n    } else {\n      const isDraggingRight = info.offset.x > 0;\n      if (isDraggingRight && dragDistance > threshold && isOpen) {\n        setIsOpen(false);\n      } else if (!isDraggingRight && dragDistance > threshold && !isOpen) {\n        setIsOpen(true);\n      }\n    }\n  };\n\n  const drawerPositionClasses = direction === 'left' ? 'left-0' : 'right-0';\n  const openButtonPositionClasses = direction === 'left' ? 'top-4 left-4' : 'top-4 right-4';\n\n  return (\n    <>\n      {showToggleButton && (\n        <motion.button\n          className={cn(\n            `fixed z-99 text-primary cursor-pointer ${openButtonPositionClasses}`,\n            btnClassName\n          )}\n          onClick={() => setIsOpen(true)}\n          variants={buttonVariants}\n          animate={isOpen ? 'open' : 'closed'}\n          transition={animationConfig}\n          whileHover={{ scale: 1.05 }}\n          whileTap={{ scale: 0.95 }}\n        >\n          <Menu />\n          {/* Open */}\n        </motion.button>\n      )}\n\n      <AnimatePresence>\n        {isOpen && (\n          <div className={`fixed w-full h-full top-0 left-0 z-9999 ${className}`}>\n            {/* Overlay */}\n            <motion.div\n              className={`absolute w-full h-full top-0 left-0 ${overlayClassName}`}\n              style={{ backgroundColor: overlayColor }}\n              onClick={() => setIsOpen(false)}\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={{ duration: 0.3 }}\n            />\n\n            {/* Drawer */}\n            <motion.div\n              className={`absolute h-full shadow-[8px_1px_21px_0px_rgba(17,17,26,0.1)] ${drawerPositionClasses} ${contentClassName}`}\n              style={{\n                backgroundColor,\n                width: `${width}px`,\n                padding: '60px 30px 30px 30px',\n                boxSizing: 'border-box',\n              }}\n              drag={enableDrag ? 'x' : false}\n              dragElastic={0.1}\n              dragConstraints={getDragConstraints()}\n              dragMomentum={false}\n              onDragEnd={handleDragEnd}\n              variants={getDrawerVariants()}\n              initial='closed'\n              animate='open'\n              exit='closed'\n              transition={animationConfig}\n            >\n              {/* Close Button */}\n              {showToggleButton && (\n                <motion.button\n                  className={cn(\n                    'absolute top-2 right-8 p-2 text-black cursor-pointer',\n                    clsBtnClassName\n                  )}\n                  onClick={() => setIsOpen(false)}\n                  whileHover={{ scale: 1.1 }}\n                  whileTap={{ scale: 0.9 }}\n                  transition={{ duration: 0.2 }}\n                >\n                  <X size={20} /> {/* Close */}\n                </motion.button>\n              )}\n\n              {/* Content */}\n              <div className='h-full overflow-y-auto'>{children}</div>\n            </motion.div>\n          </div>\n        )}\n      </AnimatePresence>\n    </>\n  );\n};\n\nexport default MotionDrawer;\n",
      "type": "registry:component"
    },
    {
      "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"
    },
    {
      "path": "./hooks/use-media-query.tsx",
      "content": "'use client';\nimport { useEffect, useState } from 'react';\n\nexport function useMediaQuery(query: string) {\n  const [value, setValue] = useState(false);\n\n  useEffect(() => {\n    function onChange(event: MediaQueryListEvent) {\n      setValue(event.matches);\n    }\n\n    const result = matchMedia(query);\n    result.addEventListener('change', onChange);\n    setValue(result.matches);\n\n    return () => result.removeEventListener('change', onChange);\n  }, [query]);\n\n  return value;\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}