Conference Ticket

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