Card - Copy this React, Tailwind Component to your project

const TicketFlowDiagram = () => { const features = [ { title: "Secure Ticket Generation", subtitle: "Dynamic barcodes that change automatically", description: "Our advanced ticket system generates continuously changing barcodes, making unauthorized copying and screenshot sharing virtually impossible.", points: [ "Instant barcode rotation", "Screenshot prevention system", "Real-time validation checks" ], imagePath: "/images/features/cloud-network.svg", imageAlt: "Dynamic ticket generation visualization" }, { title: "Intelligent Authentication", subtitle: "Multi-layer verification process", description: "Comprehensive authentication system that ensures only valid tickets and authorized users gain access to your events.", points: [ "Device-specific binding", "Real-time status verification", "Encrypted data transfer" ], imagePath: "/images/features/software-engineer.svg", imageAlt: "Authentication process diagram", reverse: true }, { title: "Advanced Access Control", subtitle: "Complete control over ticket validity", description: "Manage access permissions in real-time with our sophisticated control system that puts you in charge.", points: [ "Instant activation/deactivation", "Bulk management tools", "Automated status updates" ], imagePath: "/images/features/website-maintenance.svg", imageAlt: "Access control interface" } ]; return ( <section className="bg-gradient-to-br from-[#026CDF] to-[#003C74] py-8"> <div className="max-w-7xl mx-auto px-6 lg:px-8"> {/* Enhanced Header */} {/* Header with Custom Chip */} <div className="relative text-center mb-24"> <div className="inline-block"> <h1 className="mt-6 text-4xl md:text-5xl lg:text-6xl font-bold text-white"> How It Works </h1> {/* Subtitle */} <p className="mt-8 mx-auto max-w-2xl text-lg font-light leading-relaxed tracking-wide text-blue-900 text-center bg-white p-6 rounded-lg shadow-lg border border-blue-200"> <span className="inline-block px-4 py-1.5 rounded-full mb-4 bg-gradient-to-r from-[#0288EF] via-[#026CDF] to-[#0348B5] border border-white/30 shadow-lg shadow-[#026CDF]/30 text-xs font-medium tracking-[0.2em] uppercase text-white"> Secure Ticket Management </span> <br /> <span className="italic"> A streamlined process for secure and efficient ticket management </span> </p> </div> </div> {/* Features Content */} <div className="space-y-32"> {features.map((feature, index) => ( <div key={index} className={`flex items-center gap-16 ${feature.reverse ? 'lg:flex-row-reverse' : ''}`}> {/* Image Section */} <div className="hidden lg:block w-1/2"> <div className="relative aspect-[4/3] rounded-xl overflow-hidden bg-white/5 backdrop-blur-sm"> <img src={feature.imagePath} alt={feature.imageAlt} className="w-full h-full object-cover" /> <div className="absolute inset-0 bg-gradient-to-tr from-black/20 to-transparent" /> </div> </div> {/* Content Section */} <div className="w-full lg:w-1/2 space-y-6"> <div className="space-y-2"> <h3 className="text-sm font-semibold text-blue-200 tracking-wider uppercase"> {feature.subtitle} </h3> <h2 className="text-3xl font-bold text-white tracking-tight"> {feature.title} </h2> </div> <p className="text-lg text-blue-100"> {feature.description} </p> <ul className="space-y-4"> {feature.points.map((point, i) => ( <li key={i} className="flex items-start"> <div className="flex-shrink-0 h-6 w-6 rounded-full border border-blue-300/50 flex items-center justify-center"> <div className="h-2 w-2 rounded-full bg-blue-300" /> </div> <span className="ml-3 text-blue-100">{point}</span> </li> ))} </ul> </div> </div> ))} </div> </div> </section> ); };