Get Started C T A - Copy this React, Tailwind Component to your project

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 8"> <div className="inline block px 6 py 2 rounded full bg gradient to r from indigo 500 to blue 500 text lg font semibold mb 4 shadow lg"> Limited Time Offer </div> <p className="text center text lg mb 4"> <span className="bg gradient to r from blue 300 to indigo 300 text transparent bg clip text font bold"> Unlock 3 Free Tokens </span> <span className="mx 2 text blue 300">•</span> <span className="text blue 200"> Offer Expires Jan. 31, 2025 </span> </p> <button onClick={() => console.log("Get Started clicked")} className="group w full inline flex items center justify center gap 2 px 8 py 4 text lg 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 Free</span> <FaRocket className="w 5 h 5 transition transform group hover:translate x 1" /> </button> </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"> <div className={`flex shrink 0 p 3 rounded lg bg gradient to br ${step.color} mb 4`} > <step.icon className="w 6 h 6 text white" /> </div> <h3 className="text lg font semibold text white mb 2 w full"> {step.title} </h3> <p className="text blue 100 text sm">{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;