Streamlined Ticketing with Real-Time Analytics

make this card stylish import React from "react"; import Link from "next/link"; import { FaRocket } from "react-icons/fa"; import CountUp from "./CountUp"; const CombinedCTA = () => { const handleClick = () => { console.log("CTA button clicked!"); }; return ( <section className="relative overflow-hidden bg-gradient-to-br from-blue-900 to-blue-800 py-24"> {/* Background Decorations */} <div className="absolute top-20 left-20 w-72 h-72 bg-blue-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-pulse"></div> <div className="absolute top-40 right-20 w-96 h-96 bg-blue-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-pulse delay-100"></div> <div className="absolute -bottom-20 left-40 w-80 h-80 bg-blue-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-pulse delay-200"></div> <div className="relative max-w-7xl mx-auto px-6 sm:px-8 xl:px-0"> {/* Call to Action */} <div className="text-center backdrop-blur-lg bg-white/10 rounded-2xl p-8 sm:p-12 w-full mx-auto shadow-2xl"> <h2 className="text-2xl md:text-3xl font-bold text-white mb-4"> Streamlined Ticketing.{" "} <span className="text-blue-300">Real-Time Analytics.</span>{" "} <span className="text-blue-200">Proven Management.</span> </h2> {/* Stats Section */} <div className="flex flex-wrap justify-center gap-12 mb-12 mt-10"> {[ { number: 30000, label: "Tickets Created", key: "1" }, { number: 99.98, label: "Uptime Guarantee", decimal: true, key: "2" }, { number: 500, label: "Barcodes Scanned Daily", key: "3" }, ].map((stat, idx) => ( <div key={stat.key} className="text-center"> <h3 className="text-5xl font-bold text-blue-100"> <CountUp targetNumber={stat.number} decimalPlaces={stat.decimal ? 2 : 0} /> {stat.decimal ? "%" : "+"} </h3> <p className="text-lg text-blue-200 mt-2">{stat.label}</p> </div> ))} </div> <p className="text-lg sm:text-xl text-white/90 mb-8 leading-relaxed"> Ready to Streamline Ticket Management? </p> <button onClick={handleClick} className="group relative inline-flex items-center justify-center px-8 py-4 text-lg font-bold text-white bg-gradient-to-r from-blue-500 to-blue-600 rounded-full overflow-hidden transition-all duration-300 hover:scale-105 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-blue-600" > <span className="absolute inset-0 w-full h-full bg-gradient-to-r from-blue-600 to-blue-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-out"></span> <span className="relative flex items-center"> Get Started Now <FaRocket className="ml-2 text-xl group-hover:translate-x-1 transition-transform duration-300" /> </span> </button> </div> </div> </section> ); }; export default CombinedCTA;