{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "conference-ticket-baseui",
  "type": "registry:component",
  "title": "Conference Ticket",
  "description": "Animated conference ticket with glassmorphism effects and holographic details (Base UI)",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-baseui/src/components/sections/conference-ticket-baseui.tsx",
      "content": "\"use client\";\n\nimport { motion } from \"framer-motion\";\nimport { Calendar, MapPin, QrCode, Sparkles } from \"lucide-react\";\n\nexport function ConferenceTicketBaseui() {\n  return (\n    <div className=\"flex min-h-[600px] w-full items-center justify-center p-8 perspective-1000\">\n      <motion.div\n        initial={{ opacity: 0, rotateX: -10, y: 40, scale: 0.9 }}\n        animate={{ opacity: 1, rotateX: 0, y: 0, scale: 1 }}\n        transition={{\n          duration: 1.2,\n          type: \"spring\",\n          bounce: 0.2,\n          damping: 20,\n          stiffness: 90,\n        }}\n        whileHover={{\n          scale: 1.02,\n          rotateX: 2,\n          rotateY: 2,\n          transition: { duration: 0.4 },\n        }}\n        className=\"relative flex w-full max-w-3xl flex-col md:flex-row\"\n        style={{ transformStyle: \"preserve-3d\" }}\n        role=\"article\"\n        aria-label=\"Conference Ticket for Design & Motion Summit\"\n      >\n        {/* Main Ticket Content (Left Side) */}\n        <div className=\"relative flex-1 overflow-hidden rounded-3xl border border-b-0 border-border/50 bg-background/30 p-8 backdrop-blur-xl md:rounded-l-3xl md:rounded-r-none md:border-b md:border-r-0 md:p-10\">\n          <div className=\"pointer-events-none absolute inset-0 bg-gradient-to-tr from-primary via-transparent to-primary opacity-5\" />\n          <div className=\"absolute -inset-full animate-[shimmer_4s_infinite] bg-gradient-to-r from-transparent via-primary to-transparent opacity-5\" />\n\n          {/* Dashed Line (Right Border for Desktop) */}\n          <div className=\"absolute bottom-0 right-0 top-0 hidden border-r-2 border-dashed border-border/50 md:block\" />\n\n          {/* Cutout Circles (Desktop) */}\n          <div className=\"absolute -right-3 -top-3 z-10 hidden h-6 w-6 rounded-full bg-background md:block\" />\n          <div className=\"absolute -bottom-3 -right-3 z-10 hidden h-6 w-6 rounded-full bg-background md:block\" />\n\n          {/* Dashed Line (Bottom Border for Mobile) */}\n          <div className=\"absolute bottom-0 left-0 right-0 block border-b-2 border-dashed border-border/50 md:hidden\" />\n\n          {/* Cutout Circles (Mobile) */}\n          <div className=\"absolute -bottom-3 -left-3 z-10 block h-6 w-6 rounded-full bg-background md:hidden\" />\n          <div className=\"absolute -bottom-3 -right-3 z-10 block h-6 w-6 rounded-full bg-background md:hidden\" />\n          {/* Decorative Circles */}\n          <div className=\"absolute -left-16 -top-16 h-40 w-40 rounded-full bg-primary opacity-10 blur-3xl\" />\n          <div className=\"absolute -bottom-16 right-10 h-40 w-40 rounded-full bg-accent opacity-10 blur-3xl\" />\n\n          <div className=\"relative z-10 flex h-full flex-col justify-between space-y-8\">\n            {/* Header */}\n            <div className=\"space-y-4\">\n              <div className=\"flex items-center justify-between\">\n                <span className=\"inline-flex items-center rounded-full border border-primary/30 bg-primary/10 px-2.5 py-0.5 text-xs font-semibold text-primary backdrop-blur-md\">\n                  <Sparkles className=\"mr-1 h-3 w-3\" /> VIP ACCESS\n                </span>\n                <span className=\"font-mono text-xs text-muted-foreground\">\n                  #TRIPLE-D-2025\n                </span>\n              </div>\n              <div>\n                <motion.h1\n                  initial={{ opacity: 0, y: 20 }}\n                  animate={{ opacity: 1, y: 0 }}\n                  transition={{ delay: 0.3, duration: 0.8 }}\n                  className=\"text-4xl font-bold tracking-tight text-foreground md:text-5xl\"\n                >\n                  Design &<br />\n                  <span className=\"bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent\">\n                    Motion Summit\n                  </span>\n                </motion.h1>\n                <p className=\"mt-2 text-lg text-muted-foreground\">\n                  The future of interactive interfaces.\n                </p>\n              </div>\n            </div>\n\n            {/* Event Details */}\n            <div className=\"grid grid-cols-2 gap-6\">\n              <div className=\"space-y-1\">\n                <div className=\"flex items-center text-sm text-muted-foreground\">\n                  <Calendar className=\"mr-2 h-4 w-4\" />\n                  DATE\n                </div>\n                <p className=\"font-medium text-foreground\">Oct 24-26, 2025</p>\n              </div>\n              <div className=\"space-y-1\">\n                <div className=\"flex items-center text-sm text-muted-foreground\">\n                  <MapPin className=\"mr-2 h-4 w-4\" />\n                  LOCATION\n                </div>\n                <p className=\"font-medium text-foreground\">San Francisco, CA</p>\n              </div>\n            </div>\n\n            {/* Attendee Info */}\n            <div className=\"flex items-center gap-4 rounded-2xl border border-border/50 bg-card/30 p-4 backdrop-blur-md\">\n              <div className=\"h-12 w-12 overflow-hidden rounded-full border-2 border-primary/20\">\n                <img\n                  src=\"https://iimydr2b8o.ufs.sh/f/Zqn6AViLMoTtoUjLg4dAryGEidskK72wBCQA6DNcZH4Xh5b8\"\n                  alt=\"Moumen Soliman\"\n                  className=\"h-full w-full object-cover\"\n                />\n              </div>\n              <div>\n                <p className=\"text-sm font-medium text-foreground\">\n                  Moumen Soliman\n                </p>\n                <p className=\"text-xs text-muted-foreground\">\n                  Senior Product Designer\n                </p>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        {/* Stub / QR Code (Right Side) */}\n        <motion.div\n          whileHover={{\n            x: 15,\n            rotate: 5,\n            transition: { type: \"spring\", stiffness: 300, damping: 20 },\n          }}\n          className=\"relative flex w-full flex-col items-center justify-center rounded-3xl border border-t-0 border-border/50 bg-card/10 p-8 backdrop-blur-md md:w-64 md:rounded-l-none md:rounded-r-3xl md:border-l-0 md:border-t\"\n        >\n          <div className=\"space-y-6 text-center\">\n            <div\n              className=\"rounded-xl bg-white p-4 shadow-lg\"\n              aria-label=\"QR Code\"\n            >\n              <QrCode className=\"h-32 w-32 text-black\" aria-hidden=\"true\" />\n            </div>\n            <div className=\"space-y-1\">\n              <p className=\"text-xs uppercase tracking-widest text-muted-foreground\">\n                Ticket No.\n              </p>\n              <p className=\"font-mono text-xl font-bold text-foreground\">\n                A1-8842\n              </p>\n            </div>\n            <div className=\"flex items-center justify-center gap-2 text-xs text-muted-foreground\">\n              <div className=\"h-2 w-2 animate-pulse rounded-full bg-green-500\" />\n              <span>Confirmed</span>\n            </div>\n          </div>\n        </motion.div>\n      </motion.div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/conference-ticket-baseui.tsx"
    }
  ]
}