Cinema Ticket

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