{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-platform",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/feature-section/feature-platform.tsx",
      "content": "import React from 'react'\r\nimport {\r\n  Diamond,\r\n  Home,\r\n  Wallet,\r\n  TrendingUp,\r\n  DollarSign,\r\n  Package,\r\n  BadgeCent,\r\n} from 'lucide-react'\r\nimport { Button } from '@repo/shadcn'\r\n\r\nexport const FeaturePlatform = () => {\r\n  return (\r\n    <section className=\"py-32 px-6 bg-slate-50 font-dmSans min-h-screen\">\r\n      <div className=\"max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 gap-6\">\r\n        {/* Title Cell */}\r\n        <div className=\"md:col-span-3 flex flex-col justify-start\">\r\n          <h2 className=\"text-4xl font-bold text-slate-900 leading-tight text-balance\">\r\n            Our <br /> Platform\r\n          </h2>\r\n          <p className=\"text-slate-500 text-sm leading-relaxed text-pretty pt-4\">\r\n            Our platform provides you with the tools and resources you need to\r\n            succeed.\r\n          </p>\r\n        </div>\r\n\r\n        {/* Bento Grid Cells */}\r\n        <div className=\"relative overflow-hidden md:col-span-4 bg-white p-10 rounded-3xl border border-slate-200 flex flex-col justify-between h-80\">\r\n          <img\r\n            src=\"https://images.unsplash.com/photo-1763010156322-2fb80d48ea8b?q=80&w=1760&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\r\n            alt=\"\"\r\n            className=\"absolute top-0 left-0 w-full h-full object-cover transition-opacity duration-300 ease-out\"\r\n          />\r\n          <div className=\"flex justify-between items-start relative z-2\">\r\n            <h3 className=\"text-xl font-bold text-slate-900 tracking-tight\">\r\n              Exclusive\r\n            </h3>\r\n            <Package className=\"size-8 text-slate-900\" />\r\n          </div>\r\n          <p className=\"text-slate-900 text-sm leading-relaxed text-pretty relative z-2\">\r\n            200 exclusive prospects pushed to your platform monthly.\r\n          </p>\r\n        </div>\r\n\r\n        <div className=\"md:col-span-5 bg-white p-10 rounded-3xl border border-slate-200 flex flex-col justify-between h-80\">\r\n          <div className=\"flex justify-between items-start\">\r\n            <h3 className=\"text-xl font-bold text-slate-900 tracking-tight\">\r\n              In your backyard\r\n            </h3>\r\n            <Home className=\"size-8 text-slate-400\" />\r\n          </div>\r\n          <p className=\"text-slate-700  text-sm leading-relaxed text-pretty\">\r\n            Radius based leads within 50-miles from you, prioritizing those\r\n            closer to you.\r\n          </p>\r\n        </div>\r\n\r\n        {/* Second Row */}\r\n        <div className=\"md:col-span-4 bg-white p-10 rounded-3xl border border-slate-200 flex flex-col justify-between h-80\">\r\n          <div className=\"flex justify-between items-start\">\r\n            <h3 className=\"text-xl font-bold text-slate-900 tracking-tight\">\r\n              High net worth\r\n            </h3>\r\n            <BadgeCent className=\"size-8 text-slate-400\" />\r\n          </div>\r\n          <p className=\"text-slate-700 text-sm leading-relaxed text-pretty\">\r\n            Average investable assets of $1.5 million.\r\n          </p>\r\n        </div>\r\n\r\n        <div className=\"md:col-span-4 bg-white p-10 rounded-3xl border border-slate-200 flex flex-col justify-between h-80\">\r\n          <div className=\"flex justify-between items-start\">\r\n            <h3 className=\"text-xl font-bold text-slate-900 tracking-tight\">\r\n              High propensity\r\n            </h3>\r\n            <TrendingUp className=\"size-8 text-slate-400\" />\r\n          </div>\r\n          <p className=\"text-slate-700 text-sm leading-relaxed text-pretty\">\r\n            Our combination of event-driven data, historical data, and\r\n            behavioral results in the highest propensity prospects.\r\n          </p>\r\n        </div>\r\n\r\n        <div className=\"md:col-span-4 bg-emerald-500 p-10 rounded-3xl flex flex-col justify-between h-80 relative overflow-hidden group\">\r\n          <div className=\"flex justify-between items-start\">\r\n            <h3 className=\"text-xl font-bold text-slate-900 tracking-tight\">\r\n              Pricing Prospective\r\n            </h3>\r\n            <Wallet className=\"size-8 text-black\" />\r\n          </div>\r\n          <div className=\"absolute inset-0 grid grid-cols-4 gap-2 opacity-10 p-4 pointer-events-none\">\r\n            {Array.from({ length: 16 }).map((_, i) => (\r\n              <DollarSign key={i} className=\"size-6 text-white\" />\r\n            ))}\r\n          </div>\r\n          <div className=\"relative z-10 flex flex-col h-full justify-end\">\r\n            <Button className=\"flex items-center gap-2 text-white font-bold text-lg hover:gap-4 bg-black transition-all\">\r\n              View pricing <span>→</span>\r\n            </Button>\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"
}