{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "theater-ticket-shadcnui",
  "type": "registry:component",
  "title": "Theater Ticket",
  "description": "Cinematic theater ticket with rip effect and barcode",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/sections/theater-ticket.tsx",
      "content": "\"use client\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { motion } from \"framer-motion\";\nimport { Calendar, Clock, MapPin, Star, Ticket } from \"lucide-react\";\n\nexport function TheaterTicket() {\n  return (\n    <div className=\"flex min-h-[400px] w-full items-center justify-center p-8\">\n      <motion.div\n        initial={{ opacity: 0, y: 20 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: 0.6, ease: \"easeOut\" }}\n        whileHover={{ scale: 1.02 }}\n        className=\"group relative flex w-full max-w-2xl flex-col md:flex-row overflow-hidden rounded-xl bg-card border border-border shadow-2xl\"\n        role=\"article\"\n        aria-label=\"Theater Ticket for The Phantom of the Opera\"\n      >\n        {/* Main Ticket Section */}\n        <div className=\"relative flex-1 p-6 md:p-8 overflow-hidden\">\n          {/* Gradient Background */}\n          <div className=\"absolute inset-0 bg-gradient-to-br from-primary/10 to-card z-0\" />\n\n          {/* Background Texture */}\n          <div className=\"absolute inset-0 opacity-10 bg-[url('https://www.transparenttextures.com/patterns/stardust.png')] mix-blend-overlay z-0\" />\n\n          <div className=\"relative z-10 flex flex-col justify-between h-full space-y-6\">\n            <div className=\"flex justify-between items-start\">\n              <Badge\n                variant=\"outline\"\n                className=\"border-primary/50 text-primary bg-primary/10\"\n              >\n                <Star className=\"w-3 h-3 mr-1 fill-current\" /> PREMIERE\n              </Badge>\n              <Ticket className=\"w-6 h-6 text-muted-foreground\" />\n            </div>\n\n            <div className=\"space-y-2\">\n              <motion.h2\n                className=\"text-3xl md:text-4xl font-serif font-bold text-card-foreground tracking-wide\"\n                initial={{ opacity: 0, x: -20 }}\n                animate={{ opacity: 1, x: 0 }}\n                transition={{ delay: 0.2 }}\n              >\n                THE PHANTOM\n                <br />\n                <span className=\"text-primary\">OF THE OPERA</span>\n              </motion.h2>\n              <p className=\"text-muted-foreground text-sm tracking-widest uppercase\">\n                Royal Albert Hall\n              </p>\n            </div>\n\n            <div className=\"grid grid-cols-3 gap-4 pt-4 border-t border-border\">\n              <div>\n                <p className=\"text-xs text-muted-foreground uppercase mb-1\">\n                  Date\n                </p>\n                <p className=\"text-card-foreground font-medium flex items-center\">\n                  <Calendar className=\"w-3 h-3 mr-2 text-primary\" />\n                  Dec 12\n                </p>\n              </div>\n              <div>\n                <p className=\"text-xs text-muted-foreground uppercase mb-1\">\n                  Time\n                </p>\n                <p className=\"text-card-foreground font-medium flex items-center\">\n                  <Clock className=\"w-3 h-3 mr-2 text-primary\" />\n                  19:30\n                </p>\n              </div>\n              <div>\n                <p className=\"text-xs text-muted-foreground uppercase mb-1\">\n                  Seat\n                </p>\n                <p className=\"text-card-foreground font-medium flex items-center\">\n                  <MapPin className=\"w-3 h-3 mr-2 text-primary\" />\n                  A-24\n                </p>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        {/* Rip Line (Desktop) */}\n        <div className=\"relative hidden w-8 flex-col items-center justify-center bg-card md:flex\">\n          <div className=\"absolute -top-3 w-6 h-6 rounded-full bg-background z-20 border-b border-border\" />\n          <div className=\"h-full border-l-2 border-dashed border-border mx-auto\" />\n          <div className=\"absolute -bottom-3 w-6 h-6 rounded-full bg-background z-20 border-t border-border\" />\n        </div>\n\n        {/* Rip Line (Mobile) */}\n        <div className=\"relative flex h-8 w-full items-center justify-center bg-card md:hidden\">\n          <div className=\"absolute -left-3 h-6 w-6 rounded-full bg-background z-20 border-r border-border\" />\n          <div className=\"w-full border-t-2 border-dashed border-border my-auto\" />\n          <div className=\"absolute -right-3 h-6 w-6 rounded-full bg-background z-20 border-l border-border\" />\n        </div>\n\n        {/* Ticket Stub */}\n        <motion.div\n          className=\"relative w-full md:w-32 bg-muted/50 p-6 flex flex-col items-center justify-center border-t md:border-t-0 md:border-l border-border\"\n          whileHover={{ x: 5 }}\n          transition={{ type: \"spring\", stiffness: 300 }}\n        >\n          {/* Barcode Lines */}\n          <div\n            className=\"flex md:flex-col justify-center space-x-1 md:space-x-0 md:space-y-1 h-12 md:h-24 w-full opacity-70\"\n            role=\"img\"\n            aria-label=\"Barcode\"\n          >\n            {[...Array(12)].map((_, i) => (\n              <div\n                key={i}\n                className={`bg-foreground ${i % 3 === 0 || i % 2 === 0 ? \"w-1 h-full md:w-full md:h-1\" : \"w-2 h-full md:w-full md:h-2\"}`}\n              />\n            ))}\n          </div>\n          <div className=\"mt-4 text-center\">\n            <p className=\"text-xs text-muted-foreground md:rotate-90 origin-center whitespace-nowrap mt-2 md:mt-8\">\n              ADMIT ONE\n            </p>\n          </div>\n        </motion.div>\n      </motion.div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/theater-ticket-shadcnui.tsx"
    }
  ]
}