import React from 'react';

const CTABanner = () => {
  return (
    <div className="relative max-w-7xl mx-auto rounded-2xl bg-gradient-to-r from-blue-600 via-blue-500 to-cyan-400 overflow-hidden">
      {/* Background decorative elements */}
      <div className="absolute inset-0">
        <div className="absolute top-0 left-0 w-64 h-64 bg-blue-400 rounded-full opacity-20 -translate-x-32 -translate-y-32"></div>
        <div className="absolute bottom-0 right-0 w-96 h-96 bg-cyan-300 rounded-full opacity-20 translate-x-48 translate-y-48"></div>
        <div className="absolute top-1/2 right-1/4 w-32 h-32 bg-blue-300 rounded-full opacity-30"></div>
      </div>
      
      {/* Main content */}
      <div className="relative z-10 px-6 py-16 text-center">
        <div className="max-w-4xl mx-auto">
          {/* Main heading */}
          <h1 className="text-4xl md:text-5xl font-bold text-white mb-4">
            Ready to get started?
          </h1>
          
          {/* Subheading */}
          <p className="text-xl md:text-2xl text-white mb-3 font-medium">
            Create an account and launch your services in minutes
          </p>
          
          {/* Credit offer text */}
          <p className="text-lg text-white/90 mb-8">
            Get ₹18,000 in free credit to launch your first Public Cloud project
          </p>
          
          {/* CTA Button */}
          <button className="bg-white text-blue-600 px-8 py-3 rounded-md font-semibold text-lg hover:bg-gray-50 transition-colors duration-200 shadow-lg hover:shadow-xl transform hover:scale-105 transition-transform">
            Get started now
          </button>
        </div>
      </div>
      
      {/* Additional decorative gradient overlay */}
      <div className="absolute inset-0 bg-gradient-to-br from-blue-600/20 via-transparent to-cyan-400/20 pointer-events-none"></div>
    </div>
  );
};

export default CTABanner;