{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glassmorphism-product-update-block-shadcnui",
  "type": "registry:block",
  "title": "Glassmorphism Product Updates",
  "description": "Multi-state changelog cards with glass overlays, status badges, and GitHub integration banner",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/sections/glassmorphism-product-update-block.tsx",
      "content": "\"use client\";\n\nimport { motion } from \"framer-motion\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card } from \"@/components/ui/card\";\nimport { Check, Github, Zap } from \"lucide-react\";\n\nconst updates = [\n  {\n    title: \"Focus view for shipping squads\",\n    description:\n      \"A distilled daily brief that surfaces blockers, approvals, and upcoming releases in one transparent pane.\",\n    status: \"shipped\",\n  },\n  {\n    title: \"Adaptive velocity pacing\",\n    description:\n      \"Predictive nudges align deliverables with the next milestone while respecting the ebb and flow of the team.\",\n    status: \"beta\",\n  },\n  {\n    title: \"Unified changelog API\",\n    description:\n      \"Broadcast every product announcement to web, in-app, and email with a single composable schema.\",\n    status: \"preview\",\n  },\n];\n\nconst badges: Record<string, string> = {\n  shipped: \"bg-emerald-400/10 text-emerald-400 border-emerald-400/40\",\n  beta: \"bg-sky-400/10 text-sky-400 border-sky-400/40\",\n  preview: \"bg-amber-400/10 text-amber-400 border-amber-400/40\",\n};\n\nexport function GlassmorphismProductUpdateBlock() {\n  return (\n    <section className=\"relative overflow-hidden px-6 py-24 lg:py-32\">\n      <div className=\"absolute inset-0 -z-10\">\n        <div className=\"absolute left-0 top-10 h-[380px] w-[380px] rounded-full bg-foreground/[0.03] blur-[120px]\" />\n        <div className=\"absolute right-0 bottom-0 h-[420px] w-[420px] rounded-full bg-foreground/[0.025] blur-[140px]\" />\n      </div>\n\n      <div className=\"mx-auto max-w-5xl space-y-10\">\n        <motion.div\n          initial={{ opacity: 0, y: 26 }}\n          whileInView={{ opacity: 1, y: 0 }}\n          viewport={{ once: true, amount: 0.3 }}\n          transition={{ duration: 0.5, ease: \"easeOut\" }}\n          className=\"text-center\"\n        >\n          <Badge\n            variant=\"outline\"\n            className=\"mb-4 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            <Zap className=\"h-3.5 w-3.5\" />\n            product updates\n          </Badge>\n          <h2 className=\"text-4xl font-semibold tracking-tight text-foreground md:text-5xl\">\n            Quietly confident releases, announced with clarity\n          </h2>\n          <p className=\"mt-5 text-base leading-relaxed text-foreground/70 md:text-lg\">\n            Celebrate the work without overwhelming your readers. These glass\n            cards keep messaging sharp and intentionally minimal.\n          </p>\n        </motion.div>\n\n        <motion.div\n          initial=\"hidden\"\n          whileInView=\"show\"\n          viewport={{ once: true, amount: 0.3 }}\n          variants={{\n            hidden: { opacity: 0 },\n            show: {\n              opacity: 1,\n              transition: { staggerChildren: 0.1 },\n            },\n          }}\n          className=\"grid gap-4\"\n        >\n          {updates.map((update) => (\n            <motion.div\n              key={update.title}\n              variants={{\n                hidden: { opacity: 0, y: 18 },\n                show: {\n                  opacity: 1,\n                  y: 0,\n                  transition: { duration: 0.45, ease: \"easeOut\" },\n                },\n              }}\n            >\n              <Card className=\"group relative overflow-hidden rounded-3xl border border-border/50 bg-background/45 p-8 backdrop-blur-2xl transition-all duration-300 hover:-translate-y-1\">\n                <div className=\"absolute inset-0 bg-gradient-to-br from-foreground/[0.04] via-transparent to-transparent\" />\n                <div className=\"relative z-10 flex flex-col gap-6 sm:flex-row sm:items-start sm:justify-between\">\n                  <div className=\"space-y-4\">\n                    <div className=\"flex items-center gap-3\">\n                      <span\n                        className={`rounded-full border px-3 py-1 text-xs font-semibold uppercase tracking-[0.25em] ${badges[update.status]}`}\n                      >\n                        {update.status}\n                      </span>\n                      <span className=\"hidden items-center gap-2 text-xs uppercase tracking-[0.25em] text-foreground/50 sm:inline-flex\">\n                        <Check className=\"h-3.5 w-3.5\" />\n                        release notes\n                      </span>\n                    </div>\n                    <h3 className=\"text-2xl font-semibold tracking-tight text-foreground\">\n                      {update.title}\n                    </h3>\n                    <p className=\"max-w-2xl text-sm leading-relaxed text-foreground/70\">\n                      {update.description}\n                    </p>\n                  </div>\n                  <Button\n                    variant=\"ghost\"\n                    className=\"h-11 rounded-full border border-border/40 bg-background/60 px-5 text-xs uppercase tracking-[0.2em] text-foreground/70 backdrop-blur hover:text-foreground\"\n                  >\n                    View changelog\n                  </Button>\n                </div>\n              </Card>\n            </motion.div>\n          ))}\n        </motion.div>\n\n        <motion.div\n          initial={{ opacity: 0, y: 18 }}\n          whileInView={{ opacity: 1, y: 0 }}\n          viewport={{ once: true, amount: 0.3 }}\n          transition={{ duration: 0.45, ease: \"easeOut\" }}\n          className=\"flex flex-wrap items-center justify-between gap-4 rounded-3xl border border-border/40 bg-background/40 px-6 py-6 backdrop-blur-xl\"\n        >\n          <div className=\"flex items-center gap-3 text-sm uppercase tracking-[0.25em] text-foreground/60\">\n            <Github className=\"h-4 w-4\" />\n            synced with github releases\n          </div>\n          <Button\n            size=\"sm\"\n            variant=\"outline\"\n            className=\"h-9 rounded-full border-border/40 px-4 text-xs uppercase tracking-[0.2em] text-foreground/60 hover:bg-foreground/5\"\n          >\n            Subscribe via RSS\n          </Button>\n        </motion.div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/uitripled/glassmorphism-product-update-block-shadcnui.tsx"
    }
  ]
}