CTA

Seccion de call-to-action final con imagen de fondo a pantalla completa, efectos de luz, prueba social y boton de compra prominente.

Import

import { CTA } from "@/components/landing";

Que incluye

• Imagen de fondo a pantalla completa (/imagen-batalla.jpg) con overlay gradiente
• Efectos de luz de antorchas con blur y animate-pulse
• Badge superior animado ("Tu aventura te espera")
• Headline con texto gradiente
• Contador de builders desde landingConfig
• Boton CTA principal con icono Sword, flecha animada y efecto glow
• Badges de confianza: "Pago unico" y "Sin suscripciones"
• Animaciones de entrada con Framer Motion (whileInView)

Tips

• Empieza el texto del boton con un verbo de accion: "Comenzar", "Obtener", "Descubrir", "Lanzar".
• Repite la propuesta de valor principal. El visitante puede haber olvidado el Hero.
• Incluye siempre al menos un badge de confianza (pago unico, garantia, sin suscripciones).
• El CTA final es tu ultima oportunidad. Hazlo mas grande y llamativo que el del Hero.
• Incluye prueba social aqui también. Refuerza la decision de compra.

Personalizacion

Cambiar el texto del boton

Edita el <Button> en components/landing/cta.tsx:

<Button size="lg" className="glow text-xl px-12 py-8 group font-black uppercase">
  <Sword className="w-6 h-6 mr-3" />
  Comenzar Aventura
  <ArrowRight className="w-6 h-6 ml-3 group-hover:translate-x-2 transition-transform" />
</Button>

Cambiar la imagen de fondo

Reemplaza /imagen-batalla.jpg en public/ o cambia la referencia:

<Image
  src="/imagen-batalla.jpg"
  alt="Battle arena"
  fill
  className="object-cover object-center"
/>

Cambiar badges de confianza

Edita los <div> con icono Shield:

<div className="flex items-center gap-2 bg-background/60 backdrop-blur-sm px-4 py-2 rounded-xl">
  <Shield className="w-5 h-5 text-emerald" />
  <span className="font-semibold">Tu texto aqui</span>
</div>

Cambiar contador de builders

Edita lib/config.ts:

socialProof: {
  buildersCount: "+50",
  buildersLabel: "builders activos",
},