{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cinema-ticket-baseui",
  "type": "registry:component",
  "title": "Cinema Ticket",
  "description": "Cinematic theater ticket with rip effect and barcode (Base UI)",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-baseui/src/components/sections/cinema-ticket-baseui.tsx",
      "content": "\"use client\";\n\nimport { motion } from \"framer-motion\";\nimport { Calendar, Clock, Film, MapPin, QrCode, Star } from \"lucide-react\";\n\nexport function CinemaTicketBaseui() {\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 border border-border bg-card\"\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 z-10 bg-gradient-to-t from-black/80 via-transparent to-transparent\" />\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 right-4 top-4 z-20\">\n            <span className=\"inline-flex items-center rounded-full border-none bg-primary px-2.5 py-0.5 text-xs font-semibold text-primary-foreground hover:bg-primary/90\">\n              IMAX 3D\n            </span>\n          </div>\n\n          <div className=\"absolute bottom-0 left-0 right-0 z-20 p-6\">\n            <motion.div\n              initial={{ opacity: 0, y: 10 }}\n              animate={{ opacity: 1, y: 0 }}\n              transition={{ delay: 0.2 }}\n            >\n              <h2 className=\"mb-2 text-3xl font-bold text-white\">\n                INTERSTELLAR\n              </h2>\n              <div className=\"flex items-center gap-2 text-sm text-white/80\">\n                <span className=\"flex items-center gap-1\">\n                  <Star className=\"h-3 w-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 flex-1 flex-col bg-card p-6\">\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 uppercase tracking-wider text-muted-foreground\">\n                  Date\n                </p>\n                <div className=\"flex items-center gap-2 font-medium text-card-foreground\">\n                  <Calendar className=\"h-4 w-4 text-primary\" />\n                  <span>Nov 14, 2025</span>\n                </div>\n              </div>\n              <div className=\"space-y-1\">\n                <p className=\"text-xs uppercase tracking-wider text-muted-foreground\">\n                  Time\n                </p>\n                <div className=\"flex items-center gap-2 font-medium text-card-foreground\">\n                  <Clock className=\"h-4 w-4 text-primary\" />\n                  <span>20:00</span>\n                </div>\n              </div>\n              <div className=\"space-y-1\">\n                <p className=\"text-xs uppercase tracking-wider text-muted-foreground\">\n                  Cinema\n                </p>\n                <div className=\"flex items-center gap-2 font-medium text-card-foreground\">\n                  <MapPin className=\"h-4 w-4 text-primary\" />\n                  <span>Odeon Luxe</span>\n                </div>\n              </div>\n              <div className=\"space-y-1\">\n                <p className=\"text-xs uppercase tracking-wider text-muted-foreground\">\n                  Seat\n                </p>\n                <div className=\"flex items-center gap-2 font-medium text-card-foreground\">\n                  <Film className=\"h-4 w-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 my-6 flex items-center justify-center\">\n            <div className=\"absolute -left-6 z-20 h-12 w-12 rounded-full bg-transparent\" />\n            <div className=\"w-full border-t-2 border-dashed border-border/50\" />\n            <div className=\"absolute -right-6 z-20 h-12 w-12 rounded-full bg-transparent\" />\n          </div>\n\n          <div className=\"flex items-center justify-between\">\n            <div className=\"space-y-1\">\n              <p className=\"text-xs uppercase tracking-wider text-muted-foreground\">\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=\"rounded-lg bg-white p-2\" aria-label=\"QR Code\">\n              <QrCode className=\"h-12 w-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-baseui.tsx"
    }
  ]
}