Bloque de Información CashTrackr

SubscriptionDowngrade.tsx

export default function SubscriptionDowngrade() {
  return (
    <div className="rounded-xl  bg-indigo-600 p-6 mb-6">
      <h3 className="text-2xl font-bold mb-1 text-white">
        Estás en el plan Anual
      </h3>
      <p className="text-white">
        Si deseas cambiar a mensual, puedes cancelar tu suscripción
        actual. Mantendrás acceso hasta el 
        y después podrás suscribirte al plan mensual.
      </p>
    </div>
  )
}

SubscriptionUpgrade.tsx

export default function SubscriptionUpgrade() {

  return (
    <div className="rounded-xl bg-purple-950 p-6 mb-6">
      <div className="flex items-start gap-4">
        <div className="flex-1">
          <h3 className="text-2xl font-bold mb-1 text-white">
            Upgrade a Anual y ahorra
          </h3>
          <p className="text-white mb-4">
            Paga $990 al año en lugar de $1,188 ($99 × 12).
            <strong> Te ahorras $198 al año</strong> — el equivalente a 2 meses gratis.
          </p>
          <button
            className="bg-amber-500 hover:bg-amber-400 text-white font-bold py-3 px-6 rounded-lg disabled:opacity-50 cursor-pointer"
          >
              Upgrade a Anual
          </button>
          <p className="text-xs text-white mt-3">
            Solo pagas la diferencia proporcional al tiempo que te queda del mes actual.
          </p>
        </div>
      </div>
    </div>
  )
}