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

Lets build a powerfully desgined beautfil How It Works section. use this background color: bg gradient to b from [#026CDF]/5 to transparent. attached is code built but i dont want to do a iamge. with text. import React, { useState, useEffect } from 'react'; import { FaTicketAlt, FaLock, FaQrcode, FaExchangeAlt, FaCog, FaChartLine, FaArrowRight, FaArrowLeft } from 'react icons/fa'; const HowItWorks = () => { const [activeSection, setActiveSection] = useState(0); const [timeLeft, setTimeLeft] = useState(10); const [isVisible, setIsVisible] = useState(true); const processes = [ { id: 1, icon: <FaTicketAlt className="text 3xl" />, title: "Original Token", description: "Simply share the original token from your ticket, and we'll handle the rest—securely generating real time rolling barcodes, validating tickets, and ensuring seamless resale.", details: "Our platform creates tokenized tickets with real time rolling timestamps, ensuring each ticket is uniquely tied to the ticket holder. These dynamic tokens can bypass Ticketmaster's restrictions while maintaining security and validity.", color: "from blue 600 to blue 400", image: "/api/placeholder/600/400" }, { id: 2, icon: <FaLock className="text 3xl" />, title: "Real Time Validation", description: "The system uses time based validation to verify ticket access instantly. Tickets are updated with rotating barcodes, ensuring they remain secure and usable even offline.", details: "Our validation system combines time based security with offline capabilities, ensuring your tickets remain valid and secure in any situation.", color: "from indigo 600 to indigo 400", image: "/api/placeholder/600/400" }, { id: 3, icon: <FaExchangeAlt className="text 3xl" />, title: "Unrestricted Resale", description: "Unlike traditional systems, our platform allows ticket holders to securely resell their tickets outside of closed marketplaces, providing users with the freedom to transfer tickets on their terms.", details: "Break free from closed marketplaces and transfer your tickets securely and freely.", color: "from purple 600 to purple 400", image: "/api/placeholder/600/400" }, { id: 4, icon: <FaCog className="text 3xl" />, title: "Seamless Management", description: "Users can control access, track usage, and monitor activity logs through a comprehensive management suite, providing full transparency and control over their ticket sales and transfers.", details: "Take full control of your tickets with our comprehensive management tools.", color: "from green 600 to green 400", image: "/api/placeholder/600/400" }, { id: 5, icon: <FaChartLine className="text 3xl" />, title: "Transparency & Flexibility", description: "With user friendly tools, ticket holders can view logs, validate ticket authenticity, and manage their tickets without relying on proprietary platforms or third party apps.", details: "Manage your tickets independently with our intuitive tools and transparent system.", color: "from teal 600 to teal 400", image: "/api/placeholder/600/400" }, { id: 6, icon: <FaQrcode className="text 3xl" />, title: "Advanced Security", description: "Our system employs multiple layers of security, including rotating QR codes, real time validation, and encrypted data transfer to ensure maximum protection.", details: "Experience peace of mind with our advanced security features and protection systems.", color: "from cyan 600 to cyan 400", image: "/api/placeholder/600/400" } ]; const handleNext = () => { setIsVisible(false); setTimeout(() => { setActiveSection((prev) => (prev + 1) % processes.length); setIsVisible(true); setTimeLeft(10); }, 500); }; const handlePrevious = () => { setIsVisible(false); setTimeout(() => { setActiveSection((prev) => (prev === 0 ? processes.length 1 : prev 1)); setIsVisible(true); setTimeLeft(10); }, 500); }; useEffect(() => { let timer; if (timeLeft > 0) { timer = setTimeout(() => { setTimeLeft((prev) => prev 1); }, 1000); } else { setTimeout(() => { handleNext(); }, 500); } return () => { if (timer) clearTimeout(timer); }; }, [timeLeft]); return ( <section className="bg gradient to b from [#026CDF]/5 to transparent py 16"> <div className="max w 7xl mx auto px 6 lg:px 8"> {/* Header */} <div className="text center mb 16"> <div className="inline block"> <h1 className="text 5xl font bold text gray 900 mb 6">How It Works</h1> <p className="text lg text gray 600 max w 2xl mx auto"> Experience secure and flexible ticket management with our innovative platform </p> </div> </div> {/* Process Flow Card */} <div className="bg white rounded 2xl shadow xl p 8 mb 12 relative"> {/* Navigation Buttons */} <button onClick={handlePrevious} className="absolute left 4 top 1/2 translate y 1/2 z 20 w 10 h 10 bg gradient to r from blue 600 to blue 400 rounded full shadow lg flex items center justify center hover:opacity 90 transition opacity duration 200" > <FaArrowLeft className="text white" /> </button> <button onClick={handleNext} className="absolute right 4 top 1/2 translate y 1/2 z 20 w 10 h 10 bg gradient to r from blue 600 to blue 400 rounded full shadow lg flex items center justify center hover:opacity 90 transition opacity duration 200" > <FaArrowRight className="text white" /> </button> {/* Timer */} <div className="mb 8 w full"> <div className="bg white rounded lg shadow p 4"> <div className="relative w full h 4 bg gray 100 rounded full overflow hidden"> {/* Progress Bar */} <div className="absolute top 0 left 0 h full bg gradient to r from blue 600 to blue 400 transition all duration 1000" style={{ width: `${(timeLeft / 10) * 100}%` }} /> </div> <div className="flex justify between mt 2"> {/* Timer Display */} <span className="text sm font medium text gray 600">Time Remaining:</span> <span className="text lg font bold text gray 900">{timeLeft}s</span> </div> </div> </div> {/* Process Navigation */} <div className="flex justify between mb 12 relative px 8"> {processes.map((process, index) => ( <div key={process.id} className="relative z 10 flex flex col items center"> <button className={`flex flex col items center space y 4 ${ index === activeSection ? 'scale 110' : 'opacity 70' } transition all duration 300`} onClick={() => { setIsVisible(false); setTimeout(() => { setActiveSection(index); setIsVisible(true); setTimeLeft(10); }, 500); }} > <div className={`w 16 h 16 rounded full bg gradient to r ${process.color} flex items center justify center text white shadow lg ${index === activeSection ? 'ring 4 ring white' : 'hover:scale 105'}`}> {process.icon} </div> <span className="text sm font medium text gray 900 text center w 24"> {process.title} </span> </button> {index < processes.length 1 && ( <div className="absolute left [90px] top 6"> <FaArrowRight className={`text xl transform transition all duration 300 ${index < activeSection ? 'text blue 500' : 'text gray 300'}`} /> </div> )} </div> ))} </div> {/* Content */} <div className="bg gray 50 rounded xl p 8 transition all duration 500" style={{ opacity: isVisible ? 1 : 0, transform: `translateY(${isVisible ? 0 : '20px'})` }}> <div className="grid md:grid cols 2 gap 8 items center"> <div className="space y 6"> <div className={`inline flex items center space x 3 ${processes[activeSection].color} bg clip text text transparent`}> {processes[activeSection].icon} <h3 className="text 2xl font bold">{processes[activeSection].title}</h3> </div> <p className="text gray 600 text lg leading relaxed"> {processes[activeSection].description} </p> <p className="text gray 500 italic"> {processes[activeSection].details} </p> </div> <div className="relative"> <img src={processes[activeSection].image} alt={processes[activeSection].title} className="rounded lg shadow lg w full h 64 object cover" /> </div> </div> </div> </div> </div> </section> ); }; export default HowItWorks;