How It Works - Copy this React, Tailwind Component to your project

Design a beauitfil how it works page with this content "use strict"; import React from "react"; import Image from "next/image"; // Feature Data const features = [ { id: 1, title: "Unlimited Ticket Generation", description: "Create an infinite number of valid event tickets, ensuring your audience can always expand without constraints.", icon: "/images/cta/Paper.gif", }, { id: 2, title: "Real Time Ticket Tracking", description: "Log and authenticate distributed tickets instantly, ensuring secure and seamless event access for all attendees.", }, { id: 3, title: "Actionable Ticket Analytics", description: "Gain real time insights into ticket usage, distribution patterns, and attendance trends to optimize event strategies.", icon: "/images/cta/barchart.gif", }, { id: 4, title: "Feature rich platform", description: "Equipped with all essential features, our platform guarantees a flawless and streamlined experience.", icon: "/images/features/center align.gif", }, { id: 5, title: "Instant Access Control", description: "Activate or deactivate tickets on demand, maintaining full authority over who can enter.", icon: "/images/cta/platform.gif", }, { id: 6, title: "Comprehensive Ticket Management", description: "Manage ticket visibility and statuses, ensuring authorized access and efficient tracking of all ticket stages.", icon: "/images/cta/six.gif", }, ]; // Animated Components // AnimatedScanner Component const AnimatedScanner = () => { return React.createElement( "div", { className: "relative w [80px] h [80px] flex items center justify center", }, [ React.createElement( "div", { className: "relative w [60px] h [60px]", }, [ React.createElement("div", { className: "absolute top 0 left 0 w 4 h 4 border t 4 border l 4 border [#026CDF] rounded tl lg", }), React.createElement("div", { className: "absolute top 0 right 0 w 4 h 4 border t 4 border r 4 border [#026CDF] rounded tr lg", }), React.createElement("div", { className: "absolute bottom 0 left 0 w 4 h 4 border b 4 border l 4 border [#026CDF] rounded bl lg", }), React.createElement("div", { className: "absolute bottom 0 right 0 w 4 h 4 border b 4 border r 4 border [#026CDF] rounded br lg", }), React.createElement( "div", { className: "absolute inset 0 flex justify evenly items center", }, Array(6) .fill() .map((_, i) => React.createElement("div", { key: i, className: "h 8 w [3px] bg [#026CDF] opacity 80 animate scannerPulse", style: { animationDelay: `${i * 0.2}s`, }, }) ) ), React.createElement("div", { className: "absolute left 0 right 0 h 1 bg [#026CDF]/50 animate scanner line", }), ] ), ] ); }; // FeatureGridItem Component const FeatureGridItem = ({ title, description, icon, index }) => { return React.createElement( "div", { className: "bg white rounded xl shadow lg p 8 hover:shadow xl transition all duration 300 transform hover: translate y 1", style: { animationDelay: `${index * 100}ms`, }, }, [ // Icon Container React.createElement( "div", { className: "animate bounceSubtle mb 6 flex justify center items center h [80px]", }, index === 1 ? React.createElement(AnimatedScanner) : index === 2 ? React.createElement(Image, { src: icon, alt: title, width: 140, height: 140, className: "transition transform duration 300 hover:scale 110", }) : React.createElement(Image, { src: icon, alt: title, width: 80, height: 80, className: "transition transform duration 300 hover:scale 110", }) ), // Title React.createElement( "h3", { className: "text xl font bold mb 4 text [#026CDF]", }, title ), // Description React.createElement( "p", { className: "text gray 600", }, description ), ] ); }; 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> ); }; const CombinedFeatures = () => { return React.createElement( "div", { className: "relative w full overflow hidden", }, [ // Grid Features Section React.createElement( "section", { className: "relative bg [#f8fbff] py 12", }, React.createElement( "div", { className: "container mx auto px 6 lg:px 8", }, [ React.createElement( "h2", { className: "text 4xl font bold text center mb 12 text [#026CDF]", }, "Features To Accelerate Growth" ), React.createElement( "div", { className: "grid grid cols 1 sm:grid cols 2 lg:grid cols 3 gap 8", }, features.map((feature, index) => React.createElement(FeatureGridItem, { ...feature, index, key: feature.id, }) ) ), ] ) ), // Gradient Separator React.createElement( "div", { className: "relative h [150px] w full overflow hidden transform skew y 6 mt 12", style: { background: "linear gradient(105deg, #f8fbff 0%, rgba(2, 108, 223, 0.1) 100%)", }, }, React.createElement("div", { className: "absolute inset 0 skew y 6", }) ), // Replace Showcase Features Section React.createElement( "div", { className: "relative mt 24", }, React.createElement(TicketFlowDiagram) // Add the new workflow component here ), ] ); }; export default CombinedFeatures;