44 lines
1.8 KiB
TypeScript

import React from 'react';
const NewCallToAction: React.FC = () => {
return (
<section className="py-24 bg-gradient-to-r from-blue-600 to-purple-600 relative overflow-hidden">
{/* Decorative circles */}
<div className="absolute top-0 left-0 w-96 h-96 bg-white opacity-5 rounded-full -translate-x-1/2 -translate-y-1/2"></div>
<div className="absolute bottom-0 right-0 w-96 h-96 bg-white opacity-5 rounded-full translate-x-1/2 translate-y-1/2"></div>
<div className="max-w-[1280px] mx-auto px-5 relative z-10">
<div className="text-center max-w-3xl mx-auto">
<h2 className="text-4xl lg:text-5xl font-bold text-white mb-6">
¿Listo para comenzar tu próxima transmisión?
</h2>
<p className="text-xl text-blue-100 mb-10">
Únete a miles de creadores que ya están transmitiendo con AvanzaCast. Es gratis para comenzar.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
<a
href="/auth/register"
className="bg-white text-blue-600 px-10 py-5 rounded-lg hover:bg-gray-100 transition-all font-bold text-lg shadow-xl hover:shadow-2xl hover:-translate-y-1 no-underline"
>
Comienza gratis
</a>
<a
href="#features"
className="bg-transparent border-2 border-white text-white px-10 py-5 rounded-lg hover:bg-white hover:text-blue-600 transition-all font-bold text-lg no-underline"
>
Ver características
</a>
</div>
<p className="text-sm text-blue-100 mt-8">
No se requiere tarjeta de crédito Configura en menos de 2 minutos
</p>
</div>
</div>
</section>
);
};
export default NewCallToAction;