{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-digital-success",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/hero-section/hero-digital-success.tsx",
      "content": "'use client'\r\nimport React, { Suspense, useRef } from '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 { Component, Layout, Wallet } from 'lucide-react'\r\nimport MotionDrawer from '@/components/ui/motion-drawer'\r\n\r\nexport const HeroDigitalSuccess = () => {\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 bg-black text-white overflow-hidden flex flex-col\"\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: '100vh',\r\n          }}\r\n          lazyLoad={false}\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.3}\r\n            uDensity={0.8}\r\n            uFrequency={5.5}\r\n            uAmplitude={3.2}\r\n            positionX={-0.1}\r\n            positionY={0}\r\n            positionZ={0}\r\n            rotationX={0}\r\n            rotationY={130}\r\n            rotationZ={70}\r\n            color1=\"#92dbe0\"\r\n            color2=\"#0b7bff\"\r\n            color3=\"#3865cf\"\r\n            reflection={0.4}\r\n            // View (camera) props\r\n            cAzimuthAngle={270}\r\n            cPolarAngle={180}\r\n            cDistance={0.5}\r\n            cameraZoom={15.1}\r\n            // Effect props\r\n            lightType=\"env\"\r\n            brightness={0.8}\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                Our Service\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                About Us\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                Contact\r\n              </a>\r\n            </nav>\r\n          </MotionDrawer>\r\n          <TimelineAnimation\r\n            once={true}\r\n            as=\"button\"\r\n            animationNum={3}\r\n            timelineRef={timelineRef}\r\n            className=\"flex items-center gap-2 w-fit px-8 py-4 rounded-full font-bold text-lg bg-neutral-800 text-white\"\r\n          >\r\n            <span className=\"w-2 h-2 rounded-full bg-red-500\"></span>\r\n            <span className=\"text-sm font-medium\">Book a call</span>\r\n          </TimelineAnimation>\r\n        </div>\r\n      )}\r\n      {/* Header */}\r\n      {!isMobile && (\r\n        <header className=\"relative z-10 flex items-center justify-between px-10 p-4\">\r\n          <TimelineAnimation\r\n            once={true}\r\n            animationNum={1}\r\n            timelineRef={timelineRef}\r\n            className=\"flex items-center gap-2\"\r\n          >\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          </TimelineAnimation>\r\n\r\n          <TimelineAnimation\r\n            once={true}\r\n            as=\"nav\"\r\n            animationNum={2}\r\n            timelineRef={timelineRef}\r\n            className=\"hidden md:flex items-center gap-12 text-sm text-white font-medium\"\r\n          >\r\n            <a href=\"#\" className=\"hover:text-white transition\">\r\n              Our Services\r\n            </a>\r\n            <a href=\"#\" className=\"hover:text-white transition\">\r\n              About Us\r\n            </a>\r\n            <a href=\"#\" className=\"hover:text-white transition\">\r\n              Contact\r\n            </a>\r\n          </TimelineAnimation>\r\n          <TimelineAnimation\r\n            once={true}\r\n            as=\"button\"\r\n            animationNum={3}\r\n            timelineRef={timelineRef}\r\n            className=\"flex items-center gap-2 w-fit px-8 py-4 rounded-full font-bold text-lg bg-neutral-800 text-white\"\r\n          >\r\n            <span className=\"w-2 h-2 rounded-full bg-red-500\"></span>\r\n            <span className=\"text-sm font-medium\">Book a call</span>\r\n          </TimelineAnimation>\r\n        </header>\r\n      )}\r\n\r\n      {/* Main Hero Content */}\r\n      <div className=\"relative z-10 grow flex flex-col justify-center px-12 md:px-24\">\r\n        <TimelineAnimation\r\n          once={true}\r\n          as=\"h1\"\r\n          animationNum={4}\r\n          timelineRef={timelineRef}\r\n          className=\"flex flex-col xl:flex-row text-[10vw] xl:text-[6.5vw] font-medium leading-[100%] items-baseline gap-x-8 gap-y-2 pb-10 \"\r\n        >\r\n          Unlocking\r\n          <span className=\"bg-clip-text text-transparent bg-linear-to-r from-white via-red-500 to-red-500 pb-8 xl:inline-block block\">\r\n            Digital Success\r\n          </span>\r\n        </TimelineAnimation>\r\n\r\n        <div className=\"flex flex-col lg:flex-row items-start lg:items-center gap-10\">\r\n          <div className=\"flex flex-wrap justify-start gap-4\">\r\n            <TimelineAnimation\r\n              once={true}\r\n              as=\"button\"\r\n              animationNum={5}\r\n              timelineRef={timelineRef}\r\n              className=\"cursor-pointer relative group overflow-hidden bg-white text-black px-8 py-4 rounded-full font-medium text-lg flex items-center gap-3 shadow-[0_0_20px_rgba(255,60,60,0.4)]\"\r\n            >\r\n              <img\r\n                src=\"https://picsum.photos/seed/ds/50\"\r\n                className=\"w-6 h-6 rounded-full\"\r\n                alt=\"\"\r\n              />\r\n              Book a Consultation\r\n            </TimelineAnimation>\r\n            <TimelineAnimation\r\n              once={true}\r\n              as=\"button\"\r\n              animationNum={6}\r\n              timelineRef={timelineRef}\r\n              className=\"cursor-pointer border border-white/20 bg-white/5 backdrop-blur-md px-8 py-4 rounded-full font-medium text-lg\"\r\n            >\r\n              More about us\r\n            </TimelineAnimation>\r\n          </div>\r\n          <TimelineAnimation\r\n            once={true}\r\n            as=\"p\"\r\n            animationNum={7}\r\n            timelineRef={timelineRef}\r\n            className=\"max-w-md text-neutral-100 text-xl font-light leading-relaxed\"\r\n          >\r\n            We are a full-stack agency creating captivating web experiences,\r\n            driving e-commerce growth, and maximizing digital impact.\r\n          </TimelineAnimation>\r\n        </div>\r\n      </div>\r\n\r\n      {/* Footer Info */}\r\n      <div className=\"relative z-10 p-12 flex flex-wrap justify-end items-end\">\r\n        <TimelineAnimation\r\n          once={true}\r\n          animationNum={8}\r\n          timelineRef={timelineRef}\r\n          className=\"grid grid-cols-2 md:grid-cols-4 gap-x-12 gap-y-4 bg-black/20 backdrop-blur-lg p-4 rounded-lg\"\r\n        >\r\n          <TimelineAnimation\r\n            once={true}\r\n            animationNum={9}\r\n            timelineRef={timelineRef}\r\n          >\r\n            <p className=\"text-white text-sm mb-1\">Web Design</p>\r\n            <p className=\"text-neutral-300 text-xs\">Ecommerce Design</p>\r\n          </TimelineAnimation>\r\n          <TimelineAnimation\r\n            once={true}\r\n            animationNum={10}\r\n            timelineRef={timelineRef}\r\n          >\r\n            <p className=\"text-white text-sm mb-1\">Social Media Marketing</p>\r\n            <p className=\"text-neutral-300 text-xs\">Email Marketing</p>\r\n          </TimelineAnimation>\r\n          <TimelineAnimation\r\n            once={true}\r\n            animationNum={11}\r\n            timelineRef={timelineRef}\r\n          >\r\n            <p className=\"text-white text-sm mb-1\">\r\n              Conversion Rate Optimization\r\n            </p>\r\n            <p className=\"text-neutral-300 text-xs\">Paid Traffic & Ad</p>\r\n          </TimelineAnimation>\r\n          <TimelineAnimation\r\n            once={true}\r\n            animationNum={12}\r\n            timelineRef={timelineRef}\r\n          >\r\n            <p className=\"text-white text-sm mb-1\">User Generated Content</p>\r\n            <p className=\"text-neutral-300 text-xs\">and more</p>\r\n          </TimelineAnimation>\r\n        </TimelineAnimation>\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"
}