{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glassmorphism-launch-timeline-block-shadcnui",
  "type": "registry:block",
  "title": "Glassmorphism Launch Timeline",
  "description": "Frictionless launch roadmap with staggered motion, glassmorphism milestones, and paired CTA actions",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/sections/glassmorphism-launch-timeline-block.tsx",
      "content": "\"use client\";\n\nimport { motion, type Variants } from \"framer-motion\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { CalendarDays, Compass, Flag, Rocket, Sparkles } from \"lucide-react\";\n\nconst steps = [\n  {\n    title: \"Discovery & Strategy\",\n    description:\n      \"Align your team around a bold yet achievable product vision in just one workshop.\",\n    icon: Compass,\n    time: \"Week 1\",\n  },\n  {\n    title: \"Design Sprint\",\n    description:\n      \"Translate insights into polished flows with daily feedback loops and rapid iteration.\",\n    icon: Sparkles,\n    time: \"Week 2\",\n  },\n  {\n    title: \"Beta Launch\",\n    description:\n      \"Ship a confident release backed by telemetry and real user validation.\",\n    icon: Rocket,\n    time: \"Week 3\",\n  },\n  {\n    title: \"Scale & Learn\",\n    description:\n      \"Capture momentum with automation, growth playbooks, and purposeful analytics.\",\n    icon: Flag,\n    time: \"Week 4\",\n  },\n];\n\nconst container: Variants = {\n  hidden: { opacity: 0, y: 16 },\n  show: {\n    opacity: 1,\n    y: 0,\n    transition: {\n      duration: 0.5,\n      ease: \"easeOut\",\n      staggerChildren: 0.12,\n    },\n  },\n};\n\nconst item: Variants = {\n  hidden: { opacity: 0, y: 28 },\n  show: {\n    opacity: 1,\n    y: 0,\n    transition: {\n      ease: \"easeOut\",\n      duration: 0.55,\n    },\n  },\n};\n\nexport function GlassmorphismLaunchTimelineBlock() {\n  return (\n    <section className=\"relative overflow-hidden px-6 py-24 lg:py-32\">\n      <div className=\"mx-auto grid max-w-6xl gap-14 lg:grid-cols-[1.05fr_1fr]\">\n        <motion.div\n          initial={{ opacity: 0, y: 32 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.6, ease: \"easeOut\" }}\n          className=\"relative overflow-hidden rounded-3xl border border-border/50 bg-background/45 p-10 backdrop-blur-2xl\"\n        >\n          <div className=\"absolute inset-0 bg-gradient-to-br from-foreground/[0.04] via-transparent to-transparent\" />\n          <div className=\"relative\">\n            <Badge\n              variant=\"outline\"\n              className=\"mb-6 inline-flex items-center gap-2 rounded-full border-border/50 bg-background/55 px-4 py-1.5 text-xs uppercase tracking-[0.2em] text-foreground/70 backdrop-blur\"\n            >\n              <CalendarDays className=\"h-3.5 w-3.5\" />\n              launch timeline\n            </Badge>\n\n            <div className=\"space-y-5\">\n              <h2 className=\"text-4xl font-semibold tracking-tight text-foreground md:text-5xl\">\n                Launch faster with a frictionless roadmap\n              </h2>\n              <p className=\"max-w-xl text-base leading-relaxed text-foreground/70 md:text-lg\">\n                An intentionally minimal planning flow that surfaces the\n                important moments, keeps teams aligned, and celebrates progress\n                along the way.\n              </p>\n            </div>\n\n            <div className=\"mt-10 flex flex-col gap-4 sm:flex-row\">\n              <Button\n                size=\"lg\"\n                className=\"h-12 rounded-full px-8 text-sm uppercase tracking-[0.2em]\"\n              >\n                Book a session\n              </Button>\n            </div>\n          </div>\n        </motion.div>\n\n        <motion.ul\n          variants={container}\n          initial=\"hidden\"\n          animate=\"show\"\n          className=\"relative flex flex-col gap-4\"\n        >\n          <div className=\"pointer-events-none absolute left-[22px] top-4 bottom-4 hidden w-px bg-gradient-to-b from-foreground/10 via-foreground/5 to-transparent lg:block\" />\n          {steps.map((step, index) => {\n            const Icon = step.icon;\n            return (\n              <motion.li\n                key={step.title}\n                variants={item}\n                className=\"group relative overflow-hidden rounded-3xl border border-border/50 bg-background/45 p-6 backdrop-blur-2xl transition-all duration-300 hover:-translate-y-1 hover:border-border/70\"\n              >\n                <div className=\"relative z-10 flex items-start gap-4\">\n                  <div className=\"relative flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border border-border/40 bg-background/70 text-foreground/80 shadow-[0_10px_30px_rgba(15,23,42,0.25)]\">\n                    <Icon className=\"h-4 w-4\" />\n                  </div>\n                  <div className=\"space-y-3\">\n                    <div className=\"flex flex-wrap items-center gap-3\">\n                      <h3 className=\"text-lg font-semibold tracking-tight text-foreground\">\n                        {step.title}\n                      </h3>\n                      <span className=\"rounded-full border border-border/40 bg-background/70 px-3 py-1 text-xs font-medium uppercase tracking-[0.2em] text-foreground/60 backdrop-blur\">\n                        {step.time}\n                      </span>\n                    </div>\n                    <p className=\"max-w-xl text-sm leading-relaxed text-foreground/70\">\n                      {step.description}\n                    </p>\n                  </div>\n                </div>\n                <div className=\"absolute inset-0 bg-gradient-to-br from-foreground/[0.04] via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100 -z-10\" />\n              </motion.li>\n            );\n          })}\n        </motion.ul>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/uitripled/glassmorphism-launch-timeline-block-shadcnui.tsx"
    }
  ]
}