{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "timeline-block-shadcnui",
  "type": "registry:block",
  "title": "Timeline Block",
  "description": "Vertical timeline with alternating cards and animated progress line",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/sections/timeline-block.tsx",
      "content": "\"use client\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Card } from \"@/components/ui/card\";\nimport { motion, useInView } from \"framer-motion\";\nimport { Calendar, CheckCircle2 } from \"lucide-react\";\nimport { useRef } from \"react\";\n\nconst timelineEvents = [\n  {\n    year: \"2020\",\n    title: \"Company Founded\",\n    description:\n      \"Started with a vision to transform how businesses operate digitally.\",\n    icon: CheckCircle2,\n  },\n  {\n    year: \"2021\",\n    title: \"First 1,000 Customers\",\n    description:\n      \"Reached our first major milestone with customers across 20 countries.\",\n    icon: CheckCircle2,\n  },\n  {\n    year: \"2022\",\n    title: \"Series A Funding\",\n    description:\n      \"Raised $10M to accelerate product development and expand our team.\",\n    icon: CheckCircle2,\n  },\n  {\n    year: \"2023\",\n    title: \"Global Expansion\",\n    description:\n      \"Opened offices in 5 new countries and launched multilingual support.\",\n    icon: CheckCircle2,\n  },\n  {\n    year: \"2024\",\n    title: \"AI Integration\",\n    description:\n      \"Launched AI-powered features to help businesses scale faster.\",\n    icon: CheckCircle2,\n  },\n];\n\nexport function TimelineBlock() {\n  const ref = useRef(null);\n  const isInView = useInView(ref, { once: true, amount: 0.3 });\n\n  return (\n    <section ref={ref} className=\"w-full bg-background px-4 py-16 md:py-24\">\n      <div className=\"mx-auto max-w-5xl\">\n        {/* Header */}\n        <motion.div\n          initial={{ opacity: 0, y: -20 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.6 }}\n          className=\"mb-12 text-center md:mb-16\"\n        >\n          <Badge className=\"mb-4\" variant=\"secondary\">\n            <Calendar className=\"mr-1 h-3 w-3\" />\n            Our Journey\n          </Badge>\n          <h2 className=\"mb-4 text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl\">\n            The Story of Our Growth\n          </h2>\n          <p className=\"mx-auto max-w-2xl text-base text-muted-foreground md:text-lg\">\n            From a small startup to a global platform trusted by thousands\n          </p>\n        </motion.div>\n\n        {/* Timeline */}\n        <div className=\"relative\">\n          {/* Vertical line */}\n          <motion.div\n            className=\"absolute left-4 top-0 h-full w-0.5 bg-gradient-to-b from-primary via-primary/50 to-primary/20 md:left-1/2 md:-translate-x-1/2\"\n            initial={{ scaleY: 0 }}\n            animate={isInView ? { scaleY: 1 } : { scaleY: 0 }}\n            transition={{ duration: 1.5, ease: \"easeOut\" }}\n            style={{ transformOrigin: \"top\" }}\n          />\n\n          <div className=\"space-y-12 md:space-y-16\">\n            {timelineEvents.map((event, index) => {\n              const Icon = event.icon;\n              const isEven = index % 2 === 0;\n\n              return (\n                <motion.div\n                  key={event.year}\n                  initial={{ opacity: 0, y: 30 }}\n                  animate={\n                    isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }\n                  }\n                  transition={{\n                    delay: index * 0.2,\n                    duration: 0.5,\n                    ease: \"easeOut\",\n                  }}\n                  className={`relative flex items-center ${\n                    isEven ? \"md:flex-row\" : \"md:flex-row-reverse\"\n                  }`}\n                >\n                  {/* Timeline node */}\n                  <div className=\"absolute left-4 flex h-8 w-8 items-center justify-center md:left-1/2 md:-translate-x-1/2\">\n                    <motion.div\n                      className=\"flex h-8 w-8 items-center justify-center rounded-full border-4 border-background bg-primary\"\n                      initial={{ scale: 0 }}\n                      animate={isInView ? { scale: 1 } : { scale: 0 }}\n                      transition={{ delay: index * 0.2 + 0.3, type: \"spring\" }}\n                    >\n                      <Icon className=\"h-4 w-4 text-primary-foreground\" />\n                    </motion.div>\n                    <motion.div\n                      className=\"absolute h-8 w-8 rounded-full bg-primary/20\"\n                      animate={{ scale: [1, 1.5, 1] }}\n                      transition={{\n                        duration: 2,\n                        repeat: Infinity,\n                        delay: index * 0.2,\n                      }}\n                    />\n                  </div>\n\n                  {/* Content card */}\n                  <div\n                    className={`ml-16 w-full md:ml-0 md:w-5/12 ${\n                      isEven ? \"md:pr-12\" : \"md:pl-12\"\n                    }`}\n                  >\n                    <motion.div\n                      whileHover={{ scale: 1.02, y: -5 }}\n                      transition={{ duration: 0.2 }}\n                    >\n                      <Card className=\"relative overflow-hidden border-border/50 bg-card p-4 shadow-lg md:p-6\">\n                        <motion.div\n                          className=\"absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100\"\n                          whileHover={{ opacity: 1 }}\n                        />\n\n                        <div className=\"relative z-10\">\n                          <Badge className=\"mb-3\" variant=\"outline\">\n                            {event.year}\n                          </Badge>\n                          <h3 className=\"mb-2 text-lg font-bold md:text-xl\">\n                            {event.title}\n                          </h3>\n                          <p className=\"text-sm text-muted-foreground md:text-base\">\n                            {event.description}\n                          </p>\n                        </div>\n                      </Card>\n                    </motion.div>\n                  </div>\n\n                  {/* Spacer for alternating layout */}\n                  <div className=\"hidden w-5/12 md:block\" />\n                </motion.div>\n              );\n            })}\n          </div>\n        </div>\n\n        {/* Future indicator */}\n        <motion.div\n          initial={{ opacity: 0, y: 20 }}\n          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}\n          transition={{ delay: timelineEvents.length * 0.2 + 0.5 }}\n          className=\"mt-12 text-center md:mt-16\"\n        >\n          <div className=\"inline-flex items-center gap-2 rounded-full border border-border bg-card px-6 py-3\">\n            <motion.div\n              animate={{ scale: [1, 1.2, 1] }}\n              transition={{ duration: 2, repeat: Infinity }}\n              className=\"h-2 w-2 rounded-full bg-primary\"\n            />\n            <span className=\"text-sm font-medium\">\n              And the journey continues...\n            </span>\n          </div>\n        </motion.div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/uitripled/timeline-block-shadcnui.tsx"
    }
  ]
}