{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-ai-ecommerce",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/hero-section/hero-ai-ecommerce.tsx",
      "content": "'use client'\r\nimport { useRef } from 'react'\r\nimport { CreditCard, LogIn } from 'lucide-react'\r\nimport { EcommerceDash } from '../../assets/index'\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 HeroAiEcommerce = () => {\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=\"min-h-screen text-black bg-white relative overflow-hidden flex flex-col items-center\"\r\n    >\r\n      <div className=\"absolute inset-0 z-0 bg-[url('https://images.unsplash.com/photo-1764138370667-d15f89ee1c45?q=80&w=1760&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')] bg-cover bg-center opacity-50\" />\r\n      {/* Mobile Navigation */}\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={'#ffffff'}\r\n            clsBtnClassName=\"bg-neutral-800 border-r border-neutral-900 text-white\"\r\n            contentClassName=\"bg-white border-r border-neutral-200 text-black\"\r\n            btnClassName=\"bg-white text-black relative w-fit p-2 left-0 top-0 rounded-full shadow-xs border border-neutral-200\"\r\n          >\r\n            <nav className=\"space-y-4 \">\r\n              <div className=\"flex items-center gap-2 text-black\">\r\n                <svg\r\n                  className=\"fill-black 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-200 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-200 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-200 hover:text-black rounded-sm\"\r\n              >\r\n                Contact\r\n              </a>\r\n            </nav>\r\n          </MotionDrawer>\r\n          <TimelineAnimation\r\n            as=\"button\"\r\n            animationNum={2}\r\n            timelineRef={timelineRef}\r\n            className=\"flex items-center gap-2 bg-white px-4 py-2.5 rounded-full shadow-xs border border-neutral-200 text-sm font-medium\"\r\n          >\r\n            <LogIn size={16} /> Sign in\r\n          </TimelineAnimation>\r\n        </div>\r\n      )}\r\n\r\n      {/* Navigation */}\r\n      {!isMobile && (\r\n        <header className=\"w-full relative z-10 max-w-5xl mx-auto flex items-center justify-between px-6 py-6\">\r\n          <TimelineAnimation\r\n            as=\"nav\"\r\n            animationNum={1}\r\n            timelineRef={timelineRef}\r\n            className=\"flex items-center gap-8 bg-white px-6 py-3 rounded-full shadow-xs border border-neutral-200\"\r\n          >\r\n            <div className=\"text-2xl font-extrabold text-[#5d5dff]\">\r\n              <svg\r\n                className=\"fill-indigo-500 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-sm font-semibold text-neutral-800\">\r\n              <a href=\"#\" className=\"hover:text-indigo-500\">\r\n                How It Works\r\n              </a>\r\n              <a href=\"#\" className=\"hover:text-indigo-500\">\r\n                Internships\r\n              </a>\r\n              <a href=\"#\" className=\"hover:text-indigo-500\">\r\n                Students\r\n              </a>\r\n              <a href=\"#\" className=\"hover:text-indigo-500\">\r\n                Professors\r\n              </a>\r\n              <a href=\"#\" className=\"hover:text-indigo-500\">\r\n                FAQs\r\n              </a>\r\n            </nav>\r\n          </TimelineAnimation>\r\n\r\n          <div className=\"flex items-center gap-3\">\r\n            <TimelineAnimation\r\n              as=\"button\"\r\n              animationNum={2}\r\n              timelineRef={timelineRef}\r\n              className=\"flex items-center gap-2 bg-white px-4 py-2.5 rounded-full shadow-xs border border-neutral-200 text-sm font-medium\"\r\n            >\r\n              <LogIn size={16} /> Sign in\r\n            </TimelineAnimation>\r\n          </div>\r\n        </header>\r\n      )}\r\n      {/* Hero Body */}\r\n      <div className=\"text-center relative px-4 pt-16 pb-12 z-10\">\r\n        <TimelineAnimation\r\n          as=\"h1\"\r\n          animationNum={3}\r\n          timelineRef={timelineRef}\r\n          className=\"sm:text-6xl text-5xl md:text-7xl font-medium tracking-tight text-neutral-800 mb-8\"\r\n        >\r\n          Empower Your Learning <br className=\"sm:inline-block hidden\" />\r\n          With{' '}\r\n          <TimelineAnimation\r\n            as=\"span\"\r\n            animationNum={4}\r\n            timelineRef={timelineRef}\r\n            className=\"relative inline-block border-2 border-indigo-500 px-4 py-1 bg-indigo-100 text-indigo-500 rounded-md\"\r\n          >\r\n            AI Communities\r\n            <div className=\"absolute -top-1.5 -left-1.5 w-3 h-3 bg-white border-2 border-indigo-500\"></div>\r\n            <div className=\"absolute -top-1.5 -right-1.5 w-3 h-3 bg-white border-2 border-indigo-500\"></div>\r\n            <div className=\"absolute -bottom-1.5 -left-1.5 w-3 h-3 bg-white border-2 border-indigo-500\"></div>\r\n            <div className=\"absolute -bottom-1.5 -right-1.5 w-3 h-3 bg-white border-2 border-indigo-500\"></div>\r\n          </TimelineAnimation>\r\n        </TimelineAnimation>\r\n        <TimelineAnimation\r\n          as=\"p\"\r\n          animationNum={5}\r\n          timelineRef={timelineRef}\r\n          className=\"text-neutral-500 text-lg md:text-xl max-w-2xl mx-auto mb-5 font-normal leading-relaxed\"\r\n        >\r\n          Join AI-powered course communities that help you study faster,\r\n          collaborate with peers, and excel in your classes.\r\n        </TimelineAnimation>\r\n        <div className=\"flex flex-col items-center gap-6\">\r\n          <TimelineAnimation\r\n            as=\"button\"\r\n            animationNum={6}\r\n            timelineRef={timelineRef}\r\n            className=\"p-1.5 bg-linear-to-t from-indigo-800 to-indigo-100 h-20 rounded-full\"\r\n          >\r\n            <span className=\"bg-linear-to-l from-indigo-500 to-indigo-600 shadow-[inset_4px_4px_5px_0px_rgba(168,170,241,0.5),inset_-1px_-2px_5px_0px_rgba(74,78,197,0.5),inset_-1px_4px_8px_0px_rgba(44,58,98,0.25)] text-white px-10 py-5 rounded-full text-lg font-semibold cursor-pointer\">\r\n              Start Your 14 Day Free Trial\r\n            </span>\r\n          </TimelineAnimation>\r\n          <TimelineAnimation\r\n            as=\"p\"\r\n            animationNum={6}\r\n            timelineRef={timelineRef}\r\n            className=\"text-neutral-600 text-sm flex items-center gap-2 font-medium\"\r\n          >\r\n            <CreditCard size={16} /> No Credit Card Required\r\n          </TimelineAnimation>\r\n        </div>\r\n      </div>\r\n\r\n      {/* Dashboard Preview */}\r\n      <div className=\"w-full max-w-7xl mx-auto rounded-xl relative mt-10\">\r\n        <TimelineAnimation\r\n          animationNum={7}\r\n          timelineRef={timelineRef}\r\n          className=\"rounded-2xl bg-white/50 backdrop-blur-lg p-4\"\r\n        >\r\n          <TimelineAnimation\r\n            animationNum={8}\r\n            as=\"img\"\r\n            timelineRef={timelineRef}\r\n            // @ts-ignore\r\n            src={EcommerceDash?.src}\r\n            alt=\"phoneMockUP\"\r\n            className=\"w-full relative z-4 rounded-2xl\"\r\n          />\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"
}