{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-service",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/feature-section/feature-service.tsx",
      "content": "import {\r\n  MapPin,\r\n  Briefcase,\r\n  PieChart,\r\n  ArrowRight,\r\n  Lightbulb,\r\n} from 'lucide-react'\r\nimport { cn } from '@/lib/utils'\r\nimport { Button } from '@repo/shadcn'\r\n\r\nexport const FeatureServices = () => {\r\n  return (\r\n    <section className=\"py-32 px-6 bg-slate-50 min-h-screen font-dmSans\">\r\n      <div className=\"max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-16 items-center\">\r\n        <div className=\"lg:col-span-4\">\r\n          <span className=\"px-4 py-1.5 rounded-md border border-slate-200 text-xs font-bold uppercase tracking-widest text-slate-500 mb-5 inline-block\">\r\n            Services\r\n          </span>\r\n          <h2 className=\"text-4xl font-bold text-slate-900 mb-5 text-balance tracking-tight leading-tight\">\r\n            Explore our comprehensive service offerings\r\n          </h2>\r\n          <p className=\"text-slate-500 text-lg leading-relaxed text-pretty mb-10\">\r\n            Focused on your unique needs, our team delivers solutions that blend\r\n            deep industry knowledge and cutting-edge strategies to ensure\r\n            lasting growth.\r\n          </p>\r\n          <Button className=\"bg-blue-600 text-white px-8 py-3 rounded-lg font-bold flex items-center gap-2 hover:bg-blue-700 transition-all active:scale-95 shadow-xl shadow-blue-100\">\r\n            Get Started <ArrowRight className=\"size-4\" />\r\n          </Button>\r\n        </div>\r\n\r\n        <div className=\"lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n          <ServiceCard\r\n            icon={MapPin}\r\n            title=\"Strategy Development\"\r\n            desc=\"Crafting strategic plans that align with your goals.\"\r\n            active\r\n          />\r\n          <ServiceCard\r\n            icon={Briefcase}\r\n            title=\"Financial Consulting\"\r\n            desc=\"Expert guidance to optimize your financial performance.\"\r\n          />\r\n          <ServiceCard\r\n            icon={Lightbulb}\r\n            title=\"Technology Solutions\"\r\n            desc=\"Innovative tech strategies to enhance operational efficiency.\"\r\n          />\r\n          <ServiceCard\r\n            icon={PieChart}\r\n            title=\"Risk Management\"\r\n            desc=\"Identify, assess, and mitigate risks to protect your assets.\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </section>\r\n  )\r\n}\r\n\r\nconst ServiceCard = ({ icon: Icon, title, desc, active }: any) => (\r\n  <div\r\n    className={cn(\r\n      'p-10 rounded-2xl transition-all duration-300 flex flex-col gap-6',\r\n      active\r\n        ? 'bg-blue-500 text-white shadow-2xl shadow-blue-200'\r\n        : 'bg-slate-50 text-slate-900 border border-slate-100'\r\n    )}\r\n  >\r\n    <div\r\n      className={cn(\r\n        'size-12 rounded-full flex items-center justify-center',\r\n        active ? 'bg-white/20' : 'bg-blue-600 text-white'\r\n      )}\r\n    >\r\n      <Icon className=\"size-5\" />\r\n    </div>\r\n    <div className=\"space-y-4\">\r\n      <h3 className=\"text-2xl font-semibold tracking-tight\">{title}</h3>\r\n      <p\r\n        className={cn(\r\n          'text-sm leading-relaxed text-pretty',\r\n          active ? 'text-white/80' : 'text-slate-500'\r\n        )}\r\n      >\r\n        {desc}\r\n      </p>\r\n    </div>\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"
}