Cinema Ticket

1"use client";
2 
3import { Badge } from "@/components/ui/badge";
4import { motion } from "framer-motion";
5import { Calendar, Clock, Film, MapPin, QrCode, Star } from "lucide-react";
6 
7export function CinemaTicket() {
8  return (
9    <div className="flex min-h-[600px] w-full items-center justify-center p-8">
10      <motion.div
11        initial={{ opacity: 0, y: 50 }}
12        animate={{ opacity: 1, y: 0 }}
13        transition={{ duration: 0.8, type: "spring", bounce: 0.3 }}
14        whileHover={{ y: -10 }}
15        className="group relative flex w-full max-w-sm flex-col overflow-hidden rounded-3xl bg-card border border-border"
16        role="article"
17        aria-label="Cinema Ticket for Interstellar"
18      >
19        {/* Poster Section */}
20        <div className="relative h-96 w-full overflow-hidden bg-neutral-900">
21          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent z-10" />
22          <motion.img
23            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"
24            alt="Interstellar Movie Poster"
25            className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-110"
26          />
27 
28          <div className="absolute top-4 right-4 z-20">
29            <Badge className="bg-primary text-primary-foreground hover:bg-primary/90 border-none">
30              IMAX 3D
31            </Badge>
32          </div>
33 
34          <div className="absolute bottom-0 left-0 right-0 p-6 z-20">
35            <motion.div
36              initial={{ opacity: 0, y: 10 }}
37              animate={{ opacity: 1, y: 0 }}
38              transition={{ delay: 0.2 }}
39            >
40              <h2 className="text-3xl font-bold text-white mb-2">
41                INTERSTELLAR
42              </h2>
43              <div className="flex items-center gap-2 text-white/80 text-sm">
44                <span className="flex items-center gap-1">
45                  <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />{" "}
46                  8.9
47                </span>
48                <span>•</span>
49                <span>Sci-Fi / Adventure</span>
50                <span>•</span>
51                <span>2h 49m</span>
52              </div>
53            </motion.div>
54          </div>
55        </div>
56 
57        {/* Ticket Details Section */}
58        <div className="relative flex-1 bg-card p-6 flex flex-col">
59// … truncated