{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cinema-ticket-shadcnui",
  "type": "registry:component",
  "title": "Cinema Ticket",
  "description": "Cinematic theater ticket with rip effect and barcode",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/sections/cinema-ticket.tsx",
      "content": "\"use client\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { motion } from \"framer-motion\";\nimport { Calendar, Clock, Film, MapPin, QrCode, Star } from \"lucide-react\";\n\nexport function CinemaTicket() {\n  return (\n    <div className=\"flex min-h-[600px] w-full items-center justify-center p-8\">\n      <motion.div\n        initial={{ opacity: 0, y: 50 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: 0.8, type: \"spring\", bounce: 0.3 }}\n        whileHover={{ y: -10 }}\n        className=\"group relative flex w-full max-w-sm flex-col overflow-hidden rounded-3xl bg-card border border-border\"\n        role=\"article\"\n        aria-label=\"Cinema Ticket for Interstellar\"\n      >\n        {/* Poster Section */}\n        <div className=\"relative h-96 w-full overflow-hidden bg-neutral-900\">\n          <div className=\"absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent z-10\" />\n          <motion.img\n            src=\"https://images.unsplash.com/photo-1628126235206-5260b9ea6441?q=80&w=987&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n            alt=\"Interstellar Movie Poster\"\n            className=\"h-full w-full object-cover transition-transform duration-700 group-hover:scale-110\"\n          />\n\n          <div className=\"absolute top-4 right-4 z-20\">\n            <Badge className=\"bg-primary text-primary-foreground hover:bg-primary/90 border-none\">\n              IMAX 3D\n            </Badge>\n          </div>\n\n          <div className=\"absolute bottom-0 left-0 right-0 p-6 z-20\">\n            <motion.div\n              initial={{ opacity: 0, y: 10 }}\n              animate={{ opacity: 1, y: 0 }}\n              transition={{ delay: 0.2 }}\n            >\n              <h2 className=\"text-3xl font-bold text-white mb-2\">\n                INTERSTELLAR\n              </h2>\n              <div className=\"flex items-center gap-2 text-white/80 text-sm\">\n                <span className=\"flex items-center gap-1\">\n                  <Star className=\"w-3 h-3 fill-yellow-400 text-yellow-400\" />{\" \"}\n                  8.9\n                </span>\n                <span>•</span>\n                <span>Sci-Fi / Adventure</span>\n                <span>•</span>\n                <span>2h 49m</span>\n              </div>\n            </motion.div>\n          </div>\n        </div>\n\n        {/* Ticket Details Section */}\n        <div className=\"relative flex-1 bg-card p-6 flex flex-col\">\n          <div className=\"flex-1\">\n            <div className=\"mt-2 grid grid-cols-2 gap-6\">\n              <div className=\"space-y-1\">\n                <p className=\"text-xs text-muted-foreground uppercase tracking-wider\">\n                  Date\n                </p>\n                <div className=\"flex items-center gap-2 font-medium text-card-foreground\">\n                  <Calendar className=\"w-4 h-4 text-primary\" />\n                  <span>Nov 14, 2025</span>\n                </div>\n              </div>\n              <div className=\"space-y-1\">\n                <p className=\"text-xs text-muted-foreground uppercase tracking-wider\">\n                  Time\n                </p>\n                <div className=\"flex items-center gap-2 font-medium text-card-foreground\">\n                  <Clock className=\"w-4 h-4 text-primary\" />\n                  <span>20:00</span>\n                </div>\n              </div>\n              <div className=\"space-y-1\">\n                <p className=\"text-xs text-muted-foreground uppercase tracking-wider\">\n                  Cinema\n                </p>\n                <div className=\"flex items-center gap-2 font-medium text-card-foreground\">\n                  <MapPin className=\"w-4 h-4 text-primary\" />\n                  <span>Odeon Luxe</span>\n                </div>\n              </div>\n              <div className=\"space-y-1\">\n                <p className=\"text-xs text-muted-foreground uppercase tracking-wider\">\n                  Seat\n                </p>\n                <div className=\"flex items-center gap-2 font-medium text-card-foreground\">\n                  <Film className=\"w-4 h-4 text-primary\" />\n                  <span>Row H, Seat 12</span>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          {/* Rip Line */}\n          <div className=\"relative flex items-center justify-center my-6\">\n            <div className=\"absolute -left-6 h-12 w-12 rounded-full bg-transparent z-20\" />\n            <div className=\"w-full border-t-2 border-dashed border-border/50\" />\n            <div className=\"absolute -right-6 h-12 w-12 rounded-full bg-transparent z-20\" />\n          </div>\n\n          <div className=\"flex items-center justify-between\">\n            <div className=\"space-y-1\">\n              <p className=\"text-xs text-muted-foreground uppercase tracking-wider\">\n                Ticket ID\n              </p>\n              <p className=\"font-mono text-lg font-bold text-card-foreground\">\n                #9938421\n              </p>\n            </div>\n            <div className=\"bg-white p-2 rounded-lg\" aria-label=\"QR Code\">\n              <QrCode className=\"w-12 h-12 text-black\" aria-hidden=\"true\" />\n            </div>\n          </div>\n        </div>\n      </motion.div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/cinema-ticket-shadcnui.tsx"
    }
  ]
}