{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-hero",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/feature-section/feature-hero.tsx",
      "content": "'use client'\r\nimport { Settings, Users, BarChart3, Lightbulb, Target } from 'lucide-react'\r\nimport { motion } from 'motion/react'\r\nimport { cn } from '@/lib/utils'\r\n\r\nconst features = [\r\n  {\r\n    icon: Settings,\r\n    title: 'AI Campaign Optimization',\r\n    desc: 'Automatically analyzes ad performance and adjusts targeting for optimal results',\r\n  },\r\n  {\r\n    icon: Users,\r\n    title: 'AI Audience Segmentation',\r\n    desc: 'Divides audiences into refined segments based on behavior, demographics, and interests',\r\n    highlight: true,\r\n  },\r\n  {\r\n    icon: BarChart3,\r\n    title: 'AI Ad Budget Allocation',\r\n    desc: 'Automatically manages and allocates ad budgets based on campaign performance',\r\n  },\r\n  {\r\n    icon: Lightbulb,\r\n    title: 'AI Creative Insights',\r\n    desc: 'Analyzes creative elements like images, videos, and text to boost engagement',\r\n  },\r\n  {\r\n    icon: Target,\r\n    title: 'AI Performance Prediction',\r\n    desc: 'Predicts campaign outcomes using historical data and market trends',\r\n  },\r\n]\r\n\r\nexport const FeatureHero = () => {\r\n  return (\r\n    <section className=\"py-24 bg-white px-6 font-dmSans relative min-h-screen\">\r\n      <div className=\"absolute bottom-0 left-0 right-0 top-0 bg-[repeating-linear-gradient(45deg,#f3f3f3_0px_1px,transparent_1px_8px)] mask-[radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]\"></div>\r\n      <div className=\"absolute bottom-0 left-0 right-0 top-0 bg-[radial-gradient(125%_125%_at_50%_10%,rgba(255,255,255,0)_40%,rgba(50,97,237,1)_100%)]\"></div>\r\n\r\n      <div className=\"py-24 px-6 max-w-7xl mx-auto text-center font-dmSans relative\">\r\n        <motion.div\r\n          initial={{ opacity: 0, transform: 'translateY(20px)' }}\r\n          whileInView={{ opacity: 1, transform: 'translateY(0)' }}\r\n          viewport={{ once: true }}\r\n          transition={{ duration: 0.5, ease: 'easeOut' }}\r\n        >\r\n          <h1 className=\"text-4xl md:text-5xl font-bold tracking-tight text-slate-900 mb-6 text-balance\">\r\n            Empower Your Business <br /> with AI-Driven Precision\r\n          </h1>\r\n          <p className=\"text-lg text-slate-600 max-w-2xl mx-auto mb-20 text-pretty\">\r\n            Leverage cutting-edge AI tools to optimize campaigns, allocate\r\n            budgets, and unlock actionable insights—all in one platform.\r\n          </p>\r\n        </motion.div>\r\n\r\n        <div className=\"grid grid-cols-1 md:grid-cols-3 gap-y-16 gap-x-12\">\r\n          {features.slice(0, 3).map((f, i) => (\r\n            <FeatureCard key={i} {...f} />\r\n          ))}\r\n\r\n          <div className=\"md:col-span-3 flex flex-col md:flex-row justify-center gap-y-16 gap-x-12\">\r\n            {features.slice(3).map((f, i) => (\r\n              <div key={i} className=\"md:w-1/3\">\r\n                <FeatureCard {...f} />\r\n              </div>\r\n            ))}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  )\r\n}\r\n\r\nconst FeatureCard = ({ icon: Icon, title, desc, highlight }: any) => (\r\n  <div\r\n    className={cn(\r\n      'flex flex-col items-center group transition-all duration-200',\r\n      highlight && 'md:scale-105'\r\n    )}\r\n  >\r\n    <div\r\n      className={cn(\r\n        'size-12 rounded-full flex items-center justify-center mb-6 transition-colors duration-200',\r\n        highlight\r\n          ? 'bg-blue-600 text-white shadow-xl shadow-blue-200'\r\n          : 'bg-blue-50 text-blue-600 group-hover:bg-blue-100'\r\n      )}\r\n    >\r\n      <Icon className=\"size-6\" />\r\n    </div>\r\n    <h3 className=\"text-xl font-bold mb-3 text-slate-900 tracking-tight\">\r\n      {title}\r\n    </h3>\r\n    <p className=\"text-slate-500 leading-relaxed text-sm max-w-xs mx-auto text-pretty\">\r\n      {desc}\r\n    </p>\r\n  </div>\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"
}