{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "conference-ticket-shadcnui",
  "type": "registry:component",
  "title": "Conference Ticket",
  "description": "Animated conference ticket with glassmorphism effects and holographic details",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/sections/conference-ticket.tsx",
      "content": "\"use client\";\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { motion } from \"framer-motion\";\nimport { Calendar, MapPin, QrCode, Sparkles } from \"lucide-react\";\n\nexport function ConferenceTicket() {\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 p-8 md:p-10 overflow-hidden rounded-3xl md:rounded-r-none md:rounded-l-3xl border border-border/50 border-b-0 md:border-b md:border-r-0 bg-background/30 backdrop-blur-xl\">\n          <div className=\"absolute inset-0 pointer-events-none 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 top-0 bottom-0 right-0 hidden md:block border-r-2 border-dashed border-border/50\" />\n\n          {/* Cutout Circles (Desktop) */}\n          <div className=\"absolute -right-3 -top-3 h-6 w-6 rounded-full bg-background z-10 hidden md:block\" />\n          <div className=\"absolute -right-3 -bottom-3 h-6 w-6 rounded-full bg-background z-10 hidden md:block\" />\n\n          {/* Dashed Line (Bottom Border for Mobile) */}\n          <div className=\"absolute left-0 right-0 bottom-0 block md:hidden border-b-2 border-dashed border-border/50\" />\n\n          {/* Cutout Circles (Mobile) */}\n          <div className=\"absolute -left-3 -bottom-3 h-6 w-6 rounded-full bg-background z-10 block md:hidden\" />\n          <div className=\"absolute -right-3 -bottom-3 h-6 w-6 rounded-full bg-background z-10 block md:hidden\" />\n          {/* Decorative Circles */}\n          <div className=\"absolute -left-16 -top-16 h-40 w-40 rounded-full bg-primary blur-3xl opacity-10\" />\n          <div className=\"absolute -bottom-16 right-10 h-40 w-40 rounded-full bg-accent blur-3xl opacity-10\" />\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                <Badge\n                  variant=\"outline\"\n                  className=\"border-primary/30 bg-primary/10 text-primary backdrop-blur-md\"\n                >\n                  <Sparkles className=\"mr-1 h-3 w-3\" /> VIP ACCESS\n                </Badge>\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=\"text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent\">\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-muted-foreground text-sm\">\n                  <Calendar className=\"mr-2 h-4 w-4\" />\n                  DATE\n                </div>\n                <p className=\"text-foreground font-medium\">Oct 24-26, 2025</p>\n              </div>\n              <div className=\"space-y-1\">\n                <div className=\"flex items-center text-muted-foreground text-sm\">\n                  <MapPin className=\"mr-2 h-4 w-4\" />\n                  LOCATION\n                </div>\n                <p className=\"text-foreground font-medium\">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              <Avatar className=\"h-12 w-12 border-2 border-primary/20\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"Moumen Soliman\"\n                />\n                <AvatarFallback>MS</AvatarFallback>\n              </Avatar>\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 p-8 backdrop-blur-md md:w-64 rounded-3xl md:rounded-l-none md:rounded-r-3xl border border-border/50 border-t-0 md:border-t md:border-l-0 bg-card/10\"\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 rounded-full bg-green-500 animate-pulse\" />\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-shadcnui.tsx"
    }
  ]
}