Steps to Get Started - Copy this React, Tailwind Component to your project

Underneath inside my card add a divider and create a call to action that really stands out import React from 'react'; import { Wallet, Upload, Share2, CheckCircle } from 'lucide react'; const StepsToGetStarted = () => { const steps = [ { id: 1, title: "Sign Up as a Ticket Seller", description: "Create an account to start managing and distributing tickets securely.", icon: Wallet, color: "from cyan 400 to blue 600", }, { id: 2, title: "Load Your Wallet", description: "Top up your wallet to facilitate secure ticket transactions and transfers.", icon: Upload, color: "from indigo 400 to purple 600", }, { id: 3, title: "Import Event Tokens", description: "Easily upload and configure your event tokens with our intuitive interface.", icon: Share2, color: "from fuchsia 400 to pink 600", }, { id: 4, title: "Share Tickets with Buyers", description: "Distribute tickets seamlessly through secure links or supported platforms.", icon: CheckCircle, color: "from violet 400 to purple 600", }, ]; return ( <div className="relative py 16 bg gray 50 overflow hidden"> <div className="absolute inset 0 bg gradient to br from blue 900 to blue 600 opacity 95" /> {/* Background decorative elements */} <div className="absolute inset 0"> <div className="absolute top 24 right 24 w 96 h 96 rounded full bg blue 400 mix blend multiply opacity 20 animate pulse" /> <div className="absolute bottom 24 left 24 w 96 h 96 rounded full bg purple 400 mix blend multiply opacity 20 animate pulse delay 700" /> </div> <div className="max w 7xl mx auto px 4 sm:px 6 lg:px 8 relative"> <div className="text center mb 16"> <span className="inline block px 4 py 1.5 rounded full mb 4 bg white/10 border border white/30 text xs font medium tracking wider uppercase text white"> Get Started in Minutes </span> <h2 className="text 4xl font bold text white mb 4"> Your Journey Begins Here </h2> <p className="text xl text blue 100 max w 2xl mx auto"> Follow these four simple steps to revolutionize your ticket management. </p> </div> <div className="bg white/10 backdrop blur lg rounded 3xl shadow xl p 8 border border white/20"> <div className="grid grid cols 1 md:grid cols 4 gap 8"> {steps.map((step, index) => ( <div key={step.id} className="relative group hover:scale 105 transition transform duration 300 ease in out" > {index !== steps.length 1 && ( <div className="hidden md:block absolute top 8 left full h 0.5 w full transform translate x 1/2 bg gradient to r from white/30 to transparent" /> )} <div className="flex flex col items center"> <div className="relative"> <div className={`w 16 h 16 rounded 2xl bg gradient to br ${step.color} flex items center justify center shadow lg transform rotate 3 group hover:rotate 6 transition transform duration 300`} > <step.icon className="w 8 h 8 text white" aria hidden="true" /> </div> <div className="absolute top 2 right 2 w 6 h 6 rounded full bg white shadow md flex items center justify center transform rotate 3 group hover: rotate 6 transition transform duration 300"> <span className="text sm font semibold text gray 700">{step.id}</span> </div> </div> <div className="mt 6 text center"> <h3 className="text xl font bold text white mb 2">{step.title}</h3> <p className="text blue 100 leading relaxed">{step.description}</p> </div> </div> </div> ))} </div> </div> </div> </div> ); }; export default StepsToGetStarted;