Gradient Background - Copy this React, Tailwind Component to your project

import React from "react"; import { FaRocket, FaShieldAlt, FaTicketAlt } from "react-icons/fa"; import { Wallet, Upload, Share2, CheckCircle, UserPlus, UploadCloud, Ticket } 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="grid grid-cols-1 lg:grid-cols-2 gap-12 items-stretch"> {/* Left Column - Steps */} <div> <h2 className="text-4xl font-bold mb-6 text-white"> Start Securing Your Events Today </h2> <div className="space-y-8"> {steps.map((step) => ( <div key={step.id} className="flex items-start"> <div className={`flex-shrink-0 p-3 rounded-lg bg-gradient-to-br ${step.color}`} > <step.icon className="w-6 h-6 text-white" /> </div> <div className="ml-4"> <h3 className="text-lg font-semibold text-white">{step.title}</h3> <p className="mt-1 text-blue-100">{step.description}</p> </div> </div> ))} </div> </div> {/* Right Column */} <div className="lg:ml-8 flex flex-col h-full"> <div className="bg-white/10 backdrop-blur-lg rounded-2xl shadow-xl p-8 border border-white/20 flex-grow"> <div className="text-center mb-8"> <div className="inline-block px-4 py-1.5 rounded-full bg-white/20 text-sm font-medium mb-4"> Limited Time Offer </div> <h3 className="text-2xl font-bold mb-2">Get Started Free</h3> <p className="text-blue-100"> Try our platform with no commitments </p> </div> <div className="space-y-4 flex flex-col justify-between h-full"> <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 Now</span> <FaRocket className="w-5 h-5 transition-transform group-hover:translate-x-1" /> </button> <p className="text-center text-sm text-blue-100"> • No credit card required • <br /> • 14-day free trial • Cancel anytime • </p> </div> </div> </div> </div> </div> </section> ); }; export default GetStartedCTA;