Create a Standout Call to Action Card with Gradient Background

Create a call to action card. Make it stand out. use a background gradient with a card, but keep the page background the same. Then add a divder and put this code import React, { useEffect, useState } from "react"; import Image from "next/image"; import { FaRocket, FaShieldAlt, FaCode, FaCog, FaChartLine, FaUsers } from "react icons/fa"; // Animated Header Component const AnimatedHeader = () => { const [isVisible, setIsVisible] = useState(false); useEffect(() => { setIsVisible(true); }, []); return React.createElement( "h2", { className: "text center font satoshi text 3xl font bold mb 16 text black dark:text white", }, [ React.createElement( "span", { key: "simple", style: { opacity: 0, animation: isVisible ? "fadeIn 0.8s ease forwards" : "none", }, }, "Simple. " ), React.createElement( "span", { key: "secure", className: "text [#026CDF]", style: { opacity: 0, animation: isVisible ? "fadeIn 0.8s ease forwards 0.2s" : "none", }, }, "Secure. " ), React.createElement( "span", { key: "seamless", style: { opacity: 0, animation: isVisible ? "fadeIn 0.8s ease forwards 0.4s" : "none", }, }, "Seamless." ), React.createElement( "style", null, ` @keyframes fadeIn { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } ` ), ] ); }; // Helper function to create flow steps const createFlowStep = (number, title, description, imagePath) => React.createElement( "div", { key: `step ${number}`, className: "flex 1 text center px 4", }, [ React.createElement( "div", { className: "relative mx auto w 24 h 24 mb 4", }, React.createElement(Image, { src: imagePath, alt: title, layout: "fill", objectFit: "contain", }) ), React.createElement( "h3", { className: "text lg font bold mb 2", }, `${number}. ${title}` ), React.createElement( "p", { className: "text gray 600 dark:text gray 400", }, description ), ] ); // Helper function to create arrows const createArrow = () => React.createElement( "div", { className: "hidden md:block flex shrink 0 w 12", }, React.createElement( "div", { className: "text [#026CDF] text 2xl", }, "→" ) ); // Main TokenFlow Component const TokenFlow = () => React.createElement( "section", { className: "relative overflow hidden py 8 bg gradient to b from [#026CDF]/5 to transparent" }, React.createElement( "div", { className: "max w 6xl mx auto pt 4 pb 4 px 4 sm:px 6 lg:px 8 relative z 10" }, [ React.createElement(AnimatedHeader, { key: "header" }), React.createElement( "div", { className: "flex flex col md:flex row items center justify center gap 4 md:gap 0" }, [ createFlowStep("1", "Purchase Tokens", "Buy tokens using credit/debit or cryptocurrency", "/images/cta/card animate.gif"), createArrow(), createFlowStep("2", "Create Tickets", "Generate tickets instantly using your token balance", "/images/cta/barcode.gif"), createArrow(), createFlowStep("3", "Track & Manage", "Monitor sales and verify tickets in real time", "/images/cta/platform.gif"), ] ), ] ) ); export default TokenFlow;\