Conference Ticket

1"use client";
2 
3import { motion } from "framer-motion";
4import { Calendar, MapPin, QrCode, Sparkles } from "lucide-react";
5 
6export function ConferenceTicketBaseui() {
7  return (
8    <div className="flex min-h-[600px] w-full items-center justify-center p-8 perspective-1000">
9      <motion.div
10        initial={{ opacity: 0, rotateX: -10, y: 40, scale: 0.9 }}
11        animate={{ opacity: 1, rotateX: 0, y: 0, scale: 1 }}
12        transition={{
13          duration: 1.2,
14          type: "spring",
15          bounce: 0.2,
16          damping: 20,
17          stiffness: 90,
18        }}
19        whileHover={{
20          scale: 1.02,
21          rotateX: 2,
22          rotateY: 2,
23          transition: { duration: 0.4 },
24        }}
25        className="relative flex w-full max-w-3xl flex-col md:flex-row"
26        style={{ transformStyle: "preserve-3d" }}
27        role="article"
28        aria-label="Conference Ticket for Design & Motion Summit"
29      >
30        {/* Main Ticket Content (Left Side) */}
31        <div className="relative flex-1 overflow-hidden rounded-3xl border border-b-0 border-border/50 bg-background/30 p-8 backdrop-blur-xl md:rounded-l-3xl md:rounded-r-none md:border-b md:border-r-0 md:p-10">
32          <div className="pointer-events-none absolute inset-0 bg-gradient-to-tr from-primary via-transparent to-primary opacity-5" />
33          <div className="absolute -inset-full animate-[shimmer_4s_infinite] bg-gradient-to-r from-transparent via-primary to-transparent opacity-5" />
34 
35          {/* Dashed Line (Right Border for Desktop) */}
36          <div className="absolute bottom-0 right-0 top-0 hidden border-r-2 border-dashed border-border/50 md:block" />
37 
38          {/* Cutout Circles (Desktop) */}
39          <div className="absolute -right-3 -top-3 z-10 hidden h-6 w-6 rounded-full bg-background md:block" />
40          <div className="absolute -bottom-3 -right-3 z-10 hidden h-6 w-6 rounded-full bg-background md:block" />
41 
42          {/* Dashed Line (Bottom Border for Mobile) */}
43          <div className="absolute bottom-0 left-0 right-0 block border-b-2 border-dashed border-border/50 md:hidden" />
44 
45          {/* Cutout Circles (Mobile) */}
46          <div className="absolute -bottom-3 -left-3 z-10 block h-6 w-6 rounded-full bg-background md:hidden" />
47          <div className="absolute -bottom-3 -right-3 z-10 block h-6 w-6 rounded-full bg-background md:hidden" />
48          {/* Decorative Circles */}
49// … truncated