{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-bento",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/feature-section/feature-bento.tsx",
      "content": "'use client'\r\n\r\nimport { MountainSnow, Rainbow } from 'lucide-react'\r\n\r\nexport const FeatureBento: React.FC = () => {\r\n  return (\r\n    <section className=\"bg-slate-50 min-h-screen py-10 font-manrope\">\r\n      <div className=\"max-w-7xl mx-auto px-4\">\r\n        <div className=\"grid grid-cols-1 md:grid-cols-3 gap-4 auto-rows-[280px]\">\r\n          {/* Hero Card - Large */}\r\n          <div className=\"md:col-span-2 md:row-span-2 bg-linear-to-br from-blue-100 via-blue-600 to-blue-500 rounded-3xl p-10 text-white flex flex-col justify-end relative overflow-hidden group\">\r\n            <div className=\"absolute inset-0 bg-[url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200')] bg-cover bg-center opacity-30 group-hover:scale-105 transition-transform duration-700\" />\r\n            <div className=\"absolute top-0 left-0 w-full h-full bg-linear-to-t from-black/60 to-transparent\" />\r\n\r\n            <div className=\"relative z-10 space-y-3\">\r\n              <div className=\"inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm rounded-full px-4 py-1.5 text-sm font-medium\">\r\n                <span className=\"size-2 bg-green-400 rounded-full animate-pulse\" />\r\n                Live Adventures\r\n              </div>\r\n              <h3 className=\"text-5xl font-bold tracking-tight\">\r\n                Explore Beyond\r\n                <br />\r\n                Boundaries\r\n              </h3>\r\n              <p className=\"max-w-md text-white/90 text-lg\">\r\n                Discover curated trails that challenge your limits and reconnect\r\n                you with nature's raw beauty.\r\n              </p>\r\n            </div>\r\n          </div>\r\n\r\n          {/* Stats Card 1 */}\r\n          <div className=\"bg-linear-to-br from-blue-300 to-blue-700 rounded-3xl p-8 flex flex-col justify-between relative overflow-hidden group transition-all\">\r\n            <div className=\"absolute -right-8 -top-8 size-32 bg-white/20 rounded-full blur-2xl transition-transform duration-500\" />\r\n            <div className=\"relative z-10\">\r\n              <div className=\"size-14 text-white rounded-2xl bg-blue-600 backdrop-blur-sm flex items-center justify-center text-2xl mb-4\">\r\n              <MountainSnow className='w-6 h-6' />\r\n              </div>\r\n              <h4 className=\"text-4xl font-black text-white mb-2\">2,847</h4>\r\n              <p className=\"text-neutral-200 font-medium\">Peaks Conquered</p>\r\n            </div>\r\n          </div>\r\n\r\n          {/* Feature Card */}\r\n          <div className=\"bg-white rounded-3xl p-8 flex flex-col justify-between border border-gray-200 transition-all group\">\r\n            <div className=\"size-12 rounded-lg bg-linear-to-br from-blue-500 to-cyan-400 flex items-center justify-center text-white text-xl font-bold transition-transform\">\r\n              <Rainbow className=\"w-6 h-6\" />\r\n            </div>\r\n            <div className=\"space-y-2\">\r\n              <h4 className=\"text-2xl font-bold text-gray-900\">\r\n                Instant Routes\r\n              </h4>\r\n              <p className=\"text-gray-600\">\r\n                AI-powered trail recommendations based on your skill level and\r\n                preferences.\r\n              </p>\r\n            </div>\r\n          </div>\r\n\r\n          {/* CTA Card */}\r\n          <div className=\"bg-linear-to-br from-neutral-950 to-neutral-800 rounded-3xl p-8 text-white flex flex-col justify-between transition-all cursor-pointer group\">\r\n            <div className=\"flex justify-between items-start\">\r\n              <span className=\"text-xs font-bold uppercase tracking-wider bg-white/20 backdrop-blur-sm px-3 py-1.5 rounded-full\">\r\n                Join Now\r\n              </span>\r\n              <div className=\"size-10 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center text-xl group-hover:bg-white/30 group-hover:rotate-45 transition-all\">\r\n                ↗\r\n              </div>\r\n            </div>\r\n            <h4 className=\"text-2xl font-bold leading-tight\">\r\n              Get Your\r\n              <br />\r\n              Explorer Pass\r\n            </h4>\r\n          </div>\r\n\r\n          {/* Stats Card 2 */}\r\n          <div className=\"bg-gray-950 rounded-3xl p-8 text-white flex flex-col justify-center gap-3 relative overflow-hidden group\">\r\n            <div className=\"absolute inset-0 bg-linear-to-br from-purple-600/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500\" />\r\n            <span className=\"absolute top-5 right-5 flex size-3\">\r\n              <span className=\"absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-400 opacity-75\"></span>\r\n              <span className=\"relative inline-flex size-3 rounded-full bg-blue-500\"></span>\r\n            </span>\r\n            <div className=\"relative z-10\">\r\n              <span className=\"text-5xl font-black bg-linear-to-r from-blue-200 to-blue-600 bg-clip-text text-transparent\">\r\n                18.2k+\r\n              </span>\r\n              <p className=\"text-sm uppercase tracking-widest text-neutral-500 font-semibold mt-2\">\r\n                Active Community\r\n              </p>\r\n            </div>\r\n          </div>\r\n\r\n          {/* Stats Card 3 */}\r\n          <div className=\"bg-linear-to-br from-blue-500 to-blue-600 rounded-3xl p-8 text-white flex flex-col justify-center gap-3 relative overflow-hidden group hover:shadow-2xl transition-all\">\r\n            <div className=\"absolute -bottom-10 -right-10 size-40 bg-white/10 rounded-full blur-3xl\" />\r\n            <div className=\"relative z-10\">\r\n              <span className=\"text-5xl font-black\">94%</span>\r\n              <p className=\"text-sm uppercase tracking-widest text-rose-100 font-semibold mt-2\">\r\n                Satisfaction Rate\r\n              </p>\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"
}