Simplify Ticket Management

Keep color scheme. make the simplify wording better stylish the four column steps, assign 1,2,3,4 import React from "react"; import { FaRocket } from "react icons/fa"; import { Wallet, UploadCloud, Ticket, UserPlus } from "lucide react"; const GetStartedCTA = () => { const steps = [ { id: 1, title: "Sign Up as a Ticket Seller", description: "Create an account to start managing and distributing tickets securely.", icon: UserPlus, color: "from blue 500 to blue 700", }, { id: 2, title: "Load Your Wallet", description: "Top up your wallet to facilitate secure ticket transactions and transfers.", icon: Wallet, color: "from blue 500 to blue 700", }, { id: 3, title: "Import Event Tokens", description: "Easily upload and configure your event tokens with our intuitive interface.", icon: UploadCloud, color: "from blue 500 to blue 700", }, { id: 4, title: "Share Tickets with Buyers", description: "Distribute tickets seamlessly through secure links or supported platforms.", icon: Ticket, color: "from blue 500 to blue 700", }, ]; return ( <section className="relative overflow hidden bg gradient to br from blue 900 to blue 600 text white py 16"> <div className="absolute inset 0 opacity 20"> <div className="absolute top 24 right 24 w 96 h 96 rounded full bg blue 400 animate pulse" /> <div className="absolute bottom 24 left 24 w 96 h 96 rounded full bg purple 400 animate pulse delay 700" /> </div> <div className="relative max w 7xl mx auto px 4 sm:px 6 lg:px 8"> <div className="bg white/10 backdrop blur lg rounded 2xl shadow xl p 8 border border white/20"> <div className="text center mb 12"> <div className="space y 2 mb 6"> <div className="inline block px 4 py 1.5 rounded full bg white/20 text lg font medium"> 🎉 Unlock 3 Free Tokens </div> <p className="text sm text white/70">Limited Time Offer • Expires Jan. 31, 2025</p> </div> <button onClick={() => console.log("Get Started clicked")} className="group w full max w xl mx auto inline flex items center justify center gap 3 px 8 py 5 text xl font semibold rounded xl text white bg gradient to r from blue 500 to indigo 600 hover:from blue 600 hover:to indigo 700 transform transition all duration 200 hover:scale [1.02] focus:outline none focus:ring 2 focus:ring blue 500 focus:ring offset 2 shadow lg" > <span>Get Started</span> <FaRocket className="w 6 h 6 transition transform group hover:translate x 1" /> </button> <h3 className="text lg font medium text white/90 mt 8">Simplify Ticket Management</h3> </div> <div className="flex items start justify between"> {steps.map((step, index) => ( <React.Fragment key={step.id}> <div className="flex flex col items center text center w full px 4 group"> <div className={`flex shrink 0 p 4 rounded lg bg gradient to br ${step.color} mb 4 transform transition all duration 200 group hover:scale 110`} > <step.icon className="w 6 h 6 text white" /> </div> <h3 className="text lg font semibold text white mb 2"> {step.title} </h3> <p className="text blue 100 text sm leading relaxed">{step.description}</p> </div> {index < steps.length 1 && ( <div className="flex flex col items center justify center self center gap 1"> <div className="w 2 h 2 rounded full bg blue 400/60" /> <div className="w 2 h 2 rounded full bg indigo 400/40" /> <div className="w 2 h 2 rounded full bg blue 400/20" /> </div> )} </React.Fragment> ))} </div> </div> </div> </section> ); }; export default GetStartedCTA;